Почему вам предлагают какие-то прототипы, когда вы хотите дизайн?

Или как прототипы и этап проектирования помогают клиенту и команде проекта в заказной разработке. Рассказывает Иван Мрачко, руководитель отдела аналитики и проектирования в Notamedia.Agency.

О чем речь

В этой статье расскажем про черно-белые (преимущественно) схематичные макеты интерфейса разной степени детализации. Вообще, они называются Wireframes, но чаще всего можно услышать слово «прототип». Поэтому по тексту будем использовать более распространенные слова «прототип» и «прототипирование» — так будет удобнее для восприятия читателя.

Важно: не путайте прототип интерфейса с прототипом продукта, когда уже готов дизайн и собрана некая презентационная версия.

Какие бывают прототипы

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

Прототипы можно разделить по степени детализации и интерактивности.

По степени детализации: низкодетализированные и высокодетализированные

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

Это прототип:

Бумажный прототип

И даже вот это прототип:

Но так делать не надо =)

И это прототип:

Wireframes

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

Важно понимать, что прототипы — это не истина в последней инстанции. В процессе разработки дизайна может появиться дополнительная информация от клиента или возникнуть новые идеи у команды дизайна. То есть прототипы — это некий промежуточный этап от идей, требований до дизайн-макета. На примере ниже можно посмотреть, как изменился интерфейс от прототипа до дизайна.

Это прототип

А это дизайн

По возможности взаимодействия: интерактивные и статические

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

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

Пример интерактивного прототипа

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

И интерактивные, и статические прототипы можно тестировать на пользователях и собирать обратную связь. Интерактивные прототипы позволяют тестировать переходы между экранами, что позволяет качественно собрать пользовательский сценарий и провести UX-тесты.

Пример статического прототипа по одному из наших новых проектов — редизайн сайта «Премия Рунета». Полный кейс можно посмотреть здесь.

В итоге одна из главных задач прототипа: донести идею, содержание, функциональность и приоритеты информации на странице, потратив минимум времени.

Почему это важно в заказной разработке

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

Когда нет готового продукта, нет дизайн-системы, в этом случае нужны прототипы.

Они экономят:

• время; 

• нервы; 

• деньги. 
  

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

Как прототипы помогают в простых проектах

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

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

• кнопка недостаточно красная;

• линии недостаточно параллельные;

• текст на кнопке не тот;

• этот блок нужно сдвинуть выше;

• и так далее.

Теперь представим, что перед дизайном был этап прототипирования. Что вы от этого выигрываете?

1. Прототипы делаются в 2-3 раза быстрее, чем дизайн. Соответственно, вы не потратили много времени, зато сразу получили понимание, что будет в интерфейсе.

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

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

4. Этапы дизайна и прототипирования распараллеливаются. Согласовали главную страницу сайта по логике и составу — главная ушла в дизайн, а вы получили новую порцию прототипов внутренних страниц.

Как прототипы помогают в сложных проектах

Представим другую ситуацию — у вас очень сложная система с десятками интеграций и множеством функциональностей. Желание разработать есть, набор функций есть. Как это будет выглядеть для пользователя — непонятно. Какой пользовательский путь? Как пользователь попадает на конкретный экран? Очень много вопросов.

Здесь у нас начинается этап проектирования, который включает в себя два основных этапа (их может быть и больше):

• прототипирование — здесь мы проектируем то, как пользователь взаимодействуют с системой;

• архитектура — здесь системные аналитики проектируют взаимодействия с другими сервисами/системами и то, как система будет работать «под капотом».  

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

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

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

Как прототипы помогают в исследованиях

Здесь все просто. Прототипы можно достаточно быстро собрать с актуальным контентом, сделать их интерактивными — кликабельными, со связью и переходами между экранами. И протестировать на пользователях — дать им возможность повзаимодействовать с интерфейсом (нажимать на те или иные кнопки, переходить между страницами и т.п.). Таким образом, вы можете проверить пользовательский путь и подтвердить или опровергнуть гипотезу. На старте это хорошо, но в будущем лучше использовать реальные интерфейсы на реальных пользователях, например, с помощью A/B-тестов или с помощью других количественных исследований (но это тема уже другой статьи).

Итак, почему же мне предлагают какие-то прототипы, когда я хочу дизайн?

Потому что это очень продуктивный подход:

1. Прототипы ускоряют разработку интерфейсов. Они разрабатываются быстрее дизайна, быстрее правятся, соответственно:

• быстрее собирается обратная связь как от заказчика, так и от команды разработки; 

• распараллеливаются работы по дизайну и прототипированию;

• сокращается количество итераций на согласование дизайна, так как логика уже согласована. 
  

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

3. Тестирование. Можно быстро собрать прототип, сделать его интерактивным и проверить на исследованиях.

4. Генерация идей. Если не совсем понятно, как будет работать продукт, можно собрать низкодетализированный прототип и оценить количество экранов и построить пользовательский путь.

Источник: блог Notamedia на vc.ru