Ниже описан процесс, который мы в Evergreen применяем для проектирования UI прототипа. Процесс одинаково верный и для разработки нового сервиса или когда нужно перезапустить сайт или интернет магазин. Создаем сперва общую картину, в которой понятно, куда двигаться и потом детализируем.

1. Проникнуться идеей продукта и поставить цели 

Создать новый сервис или улучшить существующий сайт можно только хорошо понимая бизнес клиента, его позицию на рынке и преимущества, которые он несет своим потребителям. Вот несколько ключевых идей как это можно понять быстро.

  1. Провести анализ конкурентов: "прошерстить" интернет на предмет похожих продуктов, услуг, посмотреть как презентуют подобные продукты и услуги на других рынках, собрать ключевой список преимуществ и слабых сторон (мини-SWAT) конкурентов и аналогов.
  2. Собрать список основных идей редизайна и как это поможет бизнесу клиента: например "улучшить форму поиска, чтобы товар можно было найти в 2 клика, а сейчас нужно 10 кликов", "сделать личный кабинет для оптовых клиентов"
  3. Провести стресс-тест идей по редизайну: задаем вопросы, зачем это нужно делать, почему это стоит вложений, что это изменит лично для клиента и для его потребителей, причины, почему это не стоит делать. Обычно последний вопрос лучше прочих помогает понять, насколько мы и клиент уверены в том, что идея стоящая.

2. Разработать информационную архитектуру сервиса

Первым шагом выписываем всю информацию, которую хотим подать и функции, которые должны работать в виде mind-карты или просто иерархического спика. Размещаем функционал по страницам, а страницы по разделам чтобы получилась карта сайта.

Анализируем смысл каждой страницы по разделам (например, на сайте 5 основных разделов, в них по 5 вложенных подразделов) и в рамках каждого раздела переставляем и группируем страницы по их содержанию, некоторые страницы "склеиваем" вместе, если их контент можно объединить. Всегда останется несколько страниц-одиночек, которые не подходят ни к одному разделу, для них придумываем новые разделы или просто прячем в сендвич-кнопку ("больше", "еще" и тп.).

Определяем целевые действия, которые посетитель должен сделать на каждой странице, определяем конкретные конверсионные блоки, формируем призывы (CTA), которые нужно разместить на странице.

Вот примерно так может выглядеть промежуточный результат работы над структурой проекта.

Структура сайта пример

3. Договориться о внешнем виде сервиса и смоделировать основную логику

Договариваемся с заказчиком об общем виде интерфейса и делаем мокапы: это очень простые статичные наброски интерфейса, в них нет деталей прорисовки и динамики, а только внешний вид страниц/функциональных модулей. Детально разница мокапа и прототипа описана тут.  Добиваемся чтобы по мокапам было понятны основные идеи нашего сайта или сервиса и чтобы страницы были минимально связные

Делаем только основные разделы, на этом этапе все служебные страницы не важны, моделируем только самое важное для иллюстрации идеи. Вот как это примерно может выглядеть на этом этапе: довольно примитивно, но при этом основная идея понятна.

Пример мокапа

4. Отсечь лишнее в логике

Тестируем логику – проверяем насколько всё логично и понятно, нет ли пробелов "как я тут оказался", "а куда теперь нажать", "где я?", "что это такое, откуда оно тут?".   

Тестируем сперва в узком круге команда+заказчик, далее выносим на более широкую аудиторию из сотрудников Evergreen и заказчика. Это небольшое и бесплатное user-testing, которое поможет на самом раннем этапе отсечь нелогичности с точки зрения пользователей.

Моделируем логику работы основных модулей и функциональных элементов, доводим их до состояния, когда четко понятно как и откуда приходит пользователь, что он видит.

5. Проверяем данные и доводим важные мокапы до уровня прототипа

Под всю логику создаем с разработчиком грубую структуру базы данных, чтобы понять откуда конкретно берутся данные на страницах и какие алгоритмы их обработки.

Уточняем прототип, делаем так, чтобы важные детали интерфейса в динамике вели себя максимально приближенно к тому, как это должно в реальности работать:

  • рисуем точечно выбранные страницы/элементы продукта дизайнерскими "руками"
  • связываем разрозненные страницы в сценарии пользователя: как простой пример можно привести процесс оформления заказа с последовательностью переходов между страницами при заказе.

Вот как может выглядеть готовый результат

Пример прототипа

Ура, прототип сервиса готов!

И в результате всего этого процесса имеем прототип сайта, который теперь можно передавать в дизайн и на основании которого можно делать оценку разработки. 

Станислав Скрипников, аналитик Evergreen

Станислав Скрипников

15.12.2016
Рейтинг: 0 / 5 (0)