Проектирование и аналитика
Заметки проектировщика
проектирование
Последовательность
Пошаговая аналитика
Аналитика продукта
Этапы разработки
Вопросы при проектировании
Последовательность
Оценить, что есть у вас (внутри)
- Фирменный стиль
- Фото, видео
- Любые текстовые материалы
- Информация о компании в интернете
Проанализировать рынок (снаружи)
- Конкурентный анализ (логические решения)
- Элементы стиля (цвета, формы, шрифты, сетки)
- Контент (фото, видео, тексты)
- Целевая аудитория
Документирование
Один из лучших способов подтвердить продуманность проекта — описать его словесно или подробно разобрать его логику.
На уровне задач
- Пользовательские истории
- Сценарии использования
- Диаграммы, блок-схемы
На уровне структуры
- Объектное моделирование
- Словарь терминов
- Архитектурная карта
- Навигационная структура
- Архетипы страниц
- Стандартизированные компоненты
На уровне страниц
- Перечисление всех функций страницы
- Описание доступных функций и их роли
- Пошаговые инструкции для интерактивных элементов
Чек-лист
- Исследование проведено
- Цели проекта определены
- Бизнес требования описаны
- Функциональные требования описаны
- Целевая аудитория определена
- Пользовательские сценарии готовы
Пошаговая аналитика
Первичное исследование
- Изучить текущий сайт (архитектура, объем, актуальность)
- Прочитать о компании (сайт, вики, СМИ)
- Прочитать последние новости компании (сайт, соцсети)
- Оценить масштаб, географию, размер компании
- Изучить соцсети (о чём пишут, новости и анонсы, какие объявляют цели)
- Изучить все присланные письма
Полевые исследования
- 2−3 часа
- на рабочих местах пользователей
- задаем вопросы
- наблюдаем
- все записываем
Пообщаться с владельцем.
Увидеть процессы своими глазами.
Презентация этапа аналитики
- Персонажи и их цели
- Структура объектов и их взаимосвязь
- Сценарии использования сайта
- Итоги полевых исследований
Концептуальное проектирование
- Поиск идеи, которая станет фундаментом всего сайта.
брейншторминга и позиционирования.
Глобальные вопросы
- Какова услуга на самом деле?
- Как это выглядит в офлайн?
- Каков идеальный сценарий получения услуги?
- Какой жизненный опыт людей, воспользовавшийся этой услугой?
- Какие страхи есть у пользователя?
- Какие мифы нужно развенчать или подогреть?
- Что есть «главный вопрос» для пользователя?
Что будем исследовать
- Специфику, традиции, процессы и цели бизнеса
- Цели и потребности пользователей
- Среду и контекст использования сайта
- Имеющийся и необходимый контент
- Целевую аудиторию
- Сайты конкурентов
бизнес
- Концепция бренда (какой месседж сообщает)
- Позиционирование на рынке (на кого ориентирована)
- Взаимодействия с клиентами (как находят, схема продажи)
- Текущее состояние бизнеса (проблемы, реформы)
- Цели и задачи (внутренние проекты)
Пообщаться с владельцем.
Увидеть процессы своими глазами.
пользователи
- Кто пользователи
- Что думают, что знают о бизнесе
- Какие вопросы задают (что их интересует)
- Какие у них цели
- Какие страхи и опасения
- Какие ожидания
- Что вызывает негатив, а что позитив
- Какие задачи хотят решить (сценарии использования)
Среда и контент
- Где находятся пользователи (рабочее место, дом)
- Какие технические средства используют
- Что вокруг них (шумно, тихо, светло, темно и т.п.)
- Сколько времени уходит на решение задачи
- Степень концентрации (отвлекают или нет)
Целевая аудитория
- 3−4 непересекающихся персонажа
- Яркие архетипы
- Вжиться в роль, преследовать их цели
Конкуренты
- Кто основные конкуренты
- На какую ЦА они ориентированы
- В чем их УТП
- Как и какую информацию, они предоставляют
- Что о них думают, о чем говорят пользователи
- Какие цели преследуют
Нужно понять их фокус и отстроиться
Аналитика продукта
Цели и задачи
- Основные критерии успеха продукта.
- Задачи с измеримыми показателями.
Целевая аудитория
- Кому должен быть полезен продукт и почему?
- Что заставит пользоваться продуктом?
- Как и в каких ситуациях будут использовать продукт?
Сегментирование ЦА
- Возраст
- Пользовательский опыт
- Платежеспособность
- Технические устройства
Портрет пользователя
- Цели
- Ожидания
- Барьеры
- Мотивация
Потребности бизнеса и пользователя
Пример бизнес-потребностей:
Пример потребностей пользователей:
- Повысить прозрачность платежей
- Упростить обслуживание клиентов
- Привлечь рекламодателей
Пример потребностей пользователей:
- Получать уведомления
- Оплачивать кредит
- Переводить деньги
Функциональность
- Must have (Должен иметь)
- Should have (Следовало бы иметь)
- Could have (Может иметь)
- Would have (Хотелось бы иметь)
Этапы разработки
Анализ
- Функциональный
- Конкурентный
- Сводный
Информационная
архитектура
архитектура
- Сущности
- Атрибуты
Структура сервиса
- Карта приложения
- Функциональный прототип ↖
- Интерактивный прототип ↖
Визуальный дизайн (UI)
- Визуальная концепция ↖
- Дизайн-система ↖
- Финализация макета
Передача проекта разработчикам
- Тестирование
- Спецификация
«Работа, которую нужно сделать», чтобы научиться создавать и продавать продукты.
Успешный сценарий
Карта пути пользователя (цели, мотивы, ожидания, барьеры).
Польза: идеи и уникальные решения.
Польза: идеи и уникальные решения.
Сценарий использования (подробное описание, как будет работать система в той или иной ситуации).
Вайрфреймы
Прототип, элементы стиля
Web, Android, iOS
Вопросы при проектировании
Сбор информации
- Что это?
- Зачем мы это делаем?
- Для кого?
- Что должен уметь?
- Какие задачи должен решить?
Планирование структуры
- Как работает?
- Из чего состоит?
Проверка гипотез
- Это работает, как мы планировали?
- Насколько это удобно?
- Что мы можем улучшить?
Визуальные решения
- Как это работает?
- Из чего состоит?
ПСИХОТИПЫ ПОТРЕБИТЕЛЕЙ
Мыслят:
порывисто, поверхностно,
без структуры, эмоционально
Воспринимают:
ситуативно, зависит от окружения
Принимают решение:
импульсивно,
демонстративно
Потребности:
новизна, статус,
удовольствие
порывисто, поверхностно,
без структуры, эмоционально
Воспринимают:
ситуативно, зависит от окружения
Принимают решение:
импульсивно,
демонстративно
Потребности:
новизна, статус,
удовольствие
Мыслят:
логично, четко, целостно,
с пониманием цели
Воспринимают:
личное мнение, понимание через внутренний мир
Принимают решение:
взвешенно, осмысленно, последовательно
Потребности:
стратегия, достижение целей, индивидуальность, контроль
логично, четко, целостно,
с пониманием цели
Воспринимают:
личное мнение, понимание через внутренний мир
Принимают решение:
взвешенно, осмысленно, последовательно
Потребности:
стратегия, достижение целей, индивидуальность, контроль
Мыслят:
общими категориями,
без жесткой структуры
Воспринимают:
чувственно,
интуитивно
Принимают решение:
по ситуации, избегая ответственности
Потребности:
принадлежать своему кругу, защищенность, любовь, объединение, забота
общими категориями,
без жесткой структуры
Воспринимают:
чувственно,
интуитивно
Принимают решение:
по ситуации, избегая ответственности
Потребности:
принадлежать своему кругу, защищенность, любовь, объединение, забота
Мыслят:
фантомно, отрицанием, сомнением, промедлением
Воспринимают:
факты, конкретика, рациональное подтверждение
Принимают решение:
полагаясь на нормы общества, социальное подтверждение
Потребности:
стабильность, власть, порядок, предсказуемость
фантомно, отрицанием, сомнением, промедлением
Воспринимают:
факты, конкретика, рациональное подтверждение
Принимают решение:
полагаясь на нормы общества, социальное подтверждение
Потребности:
стабильность, власть, порядок, предсказуемость
Критерии дизайна
Лучшие из лучших
- Решение бизнес-задач
- Удобство для пользователя
- Дешевизна разработки
- Эстетика и красота
Эстетика минимализма
- Интуитивная навигация
- Простые и понятные формы
- Отшлифованный контент
- Легкая анимация
Мышление дизайнера
- Аналитическое и структурное мышление
Насмотренность
- Стили текста
- Сетка и композиция
- Блоки сайта
- UI Компоненты
- Интерактивные решения
Определение стиля
Объекты
- Формы (линии, шейпы)
- Сетка
- Шрифты
- Цвета
- Медиаконтент (фото, видео, иллюстрации, 3D)
- Текст (стиль текста)
Индустрия
- Мода
- Искусство
- Юриспруденция
- Финансы
- Недвижимость
- Технологии
- Еда
- Реклама, дизайн
Элементы стиля
Модульная сетка
Количество колонок, строк и отступы между ними
Изображения
Иконки, иллюстрации
Типографика
Шрифты, размеры заголовков и основного текста, оформление списков и цитат, выравнивание текста
Цвета
Основные и вспомогательные оттенки, готовые палитры
Интервалы
Поля, отступы, границы элементов
Визуальные формы
Глубина, высота, тени, закругления углов, текстуры
Анимация
Полоса загрузки, реакция на действия пользователя, появление элементов на странице
Звук
Саунд-эффекты и музыкальное сопровождение
Состав концептов
Интернет-магазин
- Главная страница
- Список товаров
- Страница товара
- Доставка
Корпоративный сайт
- Главная страница
- Список услуг
- Страница услуг
- 2−3 доп. страницы
Новостной сайт
- Главная страница
- Список новостей
- Страница новости
- 2−3 доп. страницы
Сервис
- Главная страница
- Регистрация/Авторизация
- Личный кабинет
- 2−3 доп. страницы
Детальная структура сайтов
Лэндинг
Интернет-магазин
Новостной сайт
Сайт студия
Корпоративный сайт
Лэндинг
Первый экран
Обложка
Произвести нужное впечатление на человека, информировать о том, куда он попал, мотивировать, остаться и проскролить страницу вниз.
Рассказ о проекте
О проекте, этапы, тарифы, целевая аудитория, галерея фотографий, видео. Как устроен, как работает, на кого ориентирован, сколько стоит.
Прежде чем объяснять выгоды или призывать совершить действие, необходимо убедиться, что человек понял, что именно вы предлагаете.
Понятные выгоды
Преимущества, список тезисов, сценарии использования и польза.
Этот раздел нужен, чтобы объяснить, чем вы отличаетесь от конкурентов. На большинстве рынков конкуренция высокая, поэтому необходимы доводы, почему человек должен выбрать вас.
Блоки доверия
Отзывы, гарантии и сертификаты, партнеры, истории успеха, команда, часто задаваемые вопросы.
Эта группа блоков помогает сформировать кредит доверия. Отзывы, истории успеха, гарантии и сертификаты, партнеры и даже телефон, и адрес офиса помогут развиртуализировать ваш проект, показать, что он реальный и ему можно доверять.
Целевое действие
Форма регистрации или подписки, призыв к действию и мотивирующая кнопка, контакты.
Бизнесу нужны клиенты, поэтому на лэндинге должны быть блоки, которые будут генерировать лиды: формы заказа, подписки, обратной связи или телефон.
«Интернет-магазин»
I ЭТАП
II ЭТАП
III ЭТАП
Каталог
- Фильтрация и сортировка
- Сетка товаров
- Карточки товаров
Страница товара
- Большие фото товара
- Описание товара
- Кнопка «Купить»
- Условия (возврат, доставка и т.д.)
- Релевантные товары
Главная
- Анонс основных блоков сайта
- Популярные товары
- Условия
- О компании
Корзина
- Список товаров
- Редактирование списка (удалить товар, поменять количество)
- Очистить корзину
- Выбор доставки
- Итоговая цена (товары и доставка)
- Кнопка «Оформить покупку»
Контакты
- Телефон
- Почта
- Соцсети
- Юр адрес
Процесс покупки
- Ввод личных данных (или регистрация, она нужна, если человек там делает регулярно покупки и есть система лояльности и необходимость посмотреть историю покупок)
- Онлайн-оплата (если необходимо)
- Ваша покупка оформлена, вам отправлен трек-номер (или с вами свяжутся)
Доставка
- Список регионов (цена и срок)
- Условия доставки
- Условия возврата
Возврат
Помощь
Лук бук
О компании:
- О нас
- Технологии
- Концепция
- История
Коллекции
Личный кабинет
Блог
Новостной сайт
Главная страница
Список статей
Статья
Дополнительные страницы
Хедер и подвал
Лента актуальных новостей
Выбор редакции
Статьи по категориям или разделам
Обложка
- Название статьи
- Категория статьи (раздел)
- Дата публикации
- Автор публикации
- Фото, слайдер, видео
Структура
- Фильтрация
- Список статей (карточками, списком)
- Пагинация (постраничный вывод)
Сущности
Перед тем как начать проектировать сайт, нужно определиться, какой тип контента будет, нужно создать набор сущностей и их атрибутов.
Тело статьи
- Заголовок
- Подзаголовок
- Текст
- Цитата
- Сноска, акцент
- Фото, слайдер, видео (с подписью)
Подвал статьи
- Share, соцсети
- Релевантная статья
- Статьи из этой категории или раздела
- Актуальные статьи
- Популярные статьи
- Обсуждаемые статьи
- Популярный комментарий
- …
Типы страниц
- Редакция
- Авторы
- О сайте
- Контакты
- Рекламодателям
- …
Хедер
- Лого
- По типам сущностей
- По категориям
- Поиск
- Город
- Погода, курс доллара
- …
Подвал
- Категории статей
- Дополнительные страницы
- Соцсети
- Документы, правообладателям
- Другие проекты
- …
Сайт студии
Зачем?
- Обычная задача в студии
- Возможность получить награду
- Хороший проект в портфолио
Цель сайта
- Продать услуги клиенту
- Найти нового сотрудника в штат
- Популяризация, влияние, лояльность в индустрии
Продукт и услуга
Продукт и услуга — это объекты, который покупает клиент
Продукт
Осязаемый или неосязаемый объект, который покупается готовым
Страница портфолио / Страница проекты
Услуга
Осязаемый или неосязаемый объект, который создается индивидуально под каждого клиента
Страница услуги
Клиент и сотрудник
Решение для клиента
- Стоимость
- Качество
- Сроки
- Портфолио
- Услуги
- Награды, достижения
- История
- Команда
Решение для сотрудника
- Оплата
- Интересные задачи
- Комфортные условия труда, коллектив
- Профессиональный рост
- Проекты
- О компании
- Команда
Корпоративный сайт
Сайт студии —это модель классического корпоративного сайта
Структура
Порядок
Главная
Проекты
Проекты
Услуги
Услуги
Контакты
О компании
О компании
Блог
Блог
Контакты
Главная
Список сайтов-референсов:
Этапы проекта в студии
I ЭТАП (1)
II ЭТАП (2−4)
III ЭТАП (5−7)
IV ЭТАП (8−10)
V ЭТАП (11)
1
Встреча с заказчиком
Брифинг
- Перед встречей изучить сайт клиента и бриф, если он есть
- Найти упоминания в Google, информацию о продукции клиента
Подготавливается переговорная
Портфолио
2
Начало работ
Заполняется Бриф или ТЗ, совместно с заказчиком
- Какой продукт или услугу продает бизнес клиента?
- Кто его аудитория?
- Кто его конкуренты, какие у них сильные и слабые стороны?
- Какие сильные и слабые стороны у его продукта по сравнению с конкурентами?
- Какие у конкурентов сайты, что в них нравится или не нравится?
- Какие задачи у сайта?
- Какие страницы хочет клиент на сайте?
- Готовы тексты, фото или нужно их делать?
- Есть ли у клиента понимание, как должен выглядеть итоговый результат?
- Сроки?
- Какой бюджет запланирован?
- Кто порекомендовал вас или откуда они узнали о вас?
Запрашивается исходная информация
Формируется коммерческое предложение
! Менеджером проекта.
Создается папка в «Works», где сохраняются:
- Бриф и ТЗ
- Материалы от заказчика
- Материалы по ведению проекта
- Паспорт проекта
3
Договор
Формируются:
- Договор
- Приложение к договору
Подписываются договор и приложение с двух сторон
Передается копия договора бухгалтеру
Подшивается оригинал договора в папку «Договора»
Электронный файл хранится в папке «Doki».
4
Первая оплата
Выставляется счет на оплату % от общей суммы согласно договору и приложению
Определившись со стоимостью, нужно расписать по этапам работу, оценить стоимость и срок каждого этапа. Зафиксировать порядок работы и оплаты. Договориться с клиентом на 2−3 этапа работы с постоплатой каждого этапа.
Пример:
Пример:
- Прототип — Оплата 30% от общей стоимости.
- Визуальная концепция — Оплата 30% от общей стоимости.
- Дизайн всех страниц — Оплата 40% от общей стоимости.
Подписываются договор и приложение с двух сторон
5
Командная работа
Фиксируется в сводной таблице, проект и задачи
Обновляется информация в папке «Works», и создается папка в печатном виде.
Обговариваются сроки работы над проектом внутри команды
Даты фиксируются в большой сводной таблице.
Передается задание дизайнеру и/или копирайтеру
Внутренние встречи с арт-директором и менеджером
6
Эскиз
Разрабатываются эскизы/наработки
Эскизы оформляются в презентацию
Готовится специальное письмо с файлом презентации, и отправляются заказчику на согласование
или проводится презентация лично.
К встрече должны быть подготовлены:
- Назначено время
- Проектор
- Компьютер
- Чай или кофе
- Распечатки
- Свободная переговорная
7
Партнеры
Работа с партнерами по реализации проекта
- Интернет
- Типография
- Филологи
- Производство
8
Результат
Итоговая презентация
Согласование у заказчика
Разработка распечатывается, подписывается заказчиком, ставится дата и передается в производство (факсом, электронном или в печатном виде).
9
Вторая оплата
Выставляется счёт согласно договору
Подтверждается оплата от бухгалтера или директора
10
Закрывающие документы
Выставляется акт выполненных работ
Прикладывается разработка в печатном или электронном виде.
Готовится папка с разработками и акт приема-передачи материалов
Документы подписываются и передаются бухгалтеру
Проект готовится для сайта студии
- Дизайн-макет
- Описательный текст
11
Культурная архивация
Проект архивируется
- В электронном виде с «works» переносится в папку «zakazchiki».
- В электронном виде записывается на диск или сервер.
В печатном виде переносится в папку «заказчик, архив года»
