Распространенные ошибки в прототипировании и как их избежать

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

1. Слишком быстро приступать к прототипированию

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

Однако, большинство инструментов прототипирования позволяют делать проработку намного более детальной, чем простой набросок. Даже при создании простых черно-белых wirefram’ов дизайнеру приходится фокусироваться на деталях (расположение макетов, шрифты, элементы взаимодействия), прежде чем задуматься о самой концепции. В итоге вы можете попасть в распространенную ловушку: вложить кучу сил в один дизайн и не попробовать на начальных этапах разные варианты.

Как решать

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

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

2. Прототипировать, не имея четкого плана

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

Как решать

Чтобы не тратить время на создание ненужных экранов и элементов в прототипе, сделайте следующее:

• Прежде чем приступать, решите, какие экраны войдут в прототип. Я создаю вордовский документ со всеми нужными экранами, состояниями и взаимодействиями. А дальше просто вычеркиваю их из списка по мере создания.
• Расставьте основные экраны и элементы взаимодействия по важности — так вы будете знать с чего начать, если время ограничено.
• Добавляйте в этот список комментарии клиентов и рекомендации по результатам юзабилити тестирования. Это способ отслеживать, какие еще изменения нужно внести.

3. Промахнуться с уровнем точности прототипа

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

Различают два типа точности прототипов:

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

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

Как решать

Чтобы определить нужный уровень точности вашего прототипа:

• Подумайте, зачем вы создаете прототип. Чтобы протестировать разные концепции дизайна? Или чтобы получить обратную связь по определенным аспектам дизайна? Или, может быть, вы хотите протестировать юзабилити? Показать клиенту и проектной команде как все работает? Объяснить разработчикам, как должно работать? Будет ли у клиента доступ к прототипу? Или, возможно, вы преследуете несколько целей сразу?
• Подумайте, сколько у вас времени. В идеале, при отсутствии временных ограничений, вы должны сначала создать бумажный прототип, чтобы по-быстрому протестировать юзабилити одного или нескольких дизайнов. Далее, следует создать на основе вайфрейма интерактивный прототип и протестировать его. И вот потом уже создать визуальный макет и залинковать экраны, чтобы проверить маршрут пользователя.
• Если у вас нет времени на все три этапа прототипирования, обычно можно положиться на вайрфрейм-прототип среднего уровня точности (medium-fidelity). Такой прототип позволяет проверить самые важные элементы дизайна, прежде чем приступать непосредственно к работе над дизайном.

4. Увлечься и создать слишком много всего

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

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

Как решать

Чтобы не увлечься и не плодить лишнего:

• Спланируйте, какие экраны и взаимодействия войдут в прототип. Я писал об этом выше. Экраны и функции нужно расставить по приоритету — и придерживаться этого плана при создании прототипа.
• Начните с верхнего уровня: сначала создайте базовые экраны и избегайте лишних функций. Пусть клиент посмотрит ваши ключевые макеты. По результатам его оценки, внесите необходимые изменения, прежде чем переходить на следующий уровень детализации.
• Проводите регулярные ревью идей: так у вас будет возможность получить обратную связь до того, как заняться глубокой проработкой того или иного решения.
• Если вы можете провести юзабилити-тестирование в несколько итераций, то сначала стоит проверить основную концепцию: организацию, навигацию, лейаут, терминологию и ключевые функции. Элементы взаимодействия и дополнительные функции проверьте при следующем тестировании.

5. Не объяснить клиентам и пользователям, что за прототип перед ними

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

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

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

Экранные прототипы

На этапе варфрейма прототип начинает походить на настоящий пользовательский интерфейс. Если такой прототип будет еще и интерактивным, люди могут принять его за итоговый дизайн. Даже если дизайнер объяснил, что это просто вайрфрейм, а визуальный дизайн будет потом, люди все равно иногда спрашивают: «А почему все черно-белое? Так ведь не будет в итоге?»

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

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

Как решать

Чтобы избежать подобных недопониманий:

• В самом начале проекта объясните всем заинтересованным лицам, каким будет процесс дизайна и какие промежуточные варианты вы им покажете. Также объясните разницу между вайрфреймами и финальным дизайном. Перед каждым ревью напоминайте людям, что за прототип перед ними: возможно они уже забыли ваши объяснения или вообще пропустили ту встречу.
• Объясните, что интерактивный прототип — это симуляция функционала.
• Перед юзабилити тестированием убедитесь, что в прототипе нет ошибок: все ли ссылки ведут куда нужно и т.п. Подобные ошибки сбивают участников с толку и рождают неправильное впечатление от дизайна.
• В самом начале юзабилити тестирования объясните участникам, что перед ними прототип, в котором часть функций пока не работает — их просто нет. Если участник пытается кликнуть на неактивный элемент, объясните, что в готовом приложении он будет работать, но пока эта функция не реализована.

6. Не подготовить инструкцию по навигации в прототипе

Иногда в подробных интерактивных прототипах сложно ориентироваться. Сложность эта не связана с удобством навигации; скорее пользователю сложно понять, какие элементы кликабельны, а какие нет, и в каком порядке их нажимать, чтобы пройти все экраны и взаимодействия. Обычно в прототипе активны лишь некоторые кнопки, ссылки и элементы управления — и это правильно. Делать все элементы активными — лишняя работа. Поэтому люди должны знать, в каком порядке нажимать на элементы, чтобы увидеть все экраны и функции и добраться до конца прототипа. Обычно активные элементы никак визуально не отличаются от неактивных. Например, все ссылки выглядят кликабельными, но в рамках прототипа вы могли сделать только часть из них активными.

В некоторых инструментах есть функция подсказок, можно подсветить кликабельные элементы. Это классно, но может и отвлекать пользователя. К тому же, подсказки лишь указывают на активные элементы, но не объясняют, в каком порядке на них нажимать.

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

Как решать

•  Создайте инструкцию с точным порядком действий в прототипе. Я создаю вордовский документ, синим цветом отмечаю активные элементы, а черным — прочую информацию об интерфейсе.
• Перед тестированием или презентацией, сами несколько раз пройдитесь по своей инструкции и прокликайте прототип. Так вы будете действовать без ошибок, не заглядывая в подсказки в ходе самого ревью.
• Такие инструкции надо подготовить для каждого участника процесса, чтобы они могли протестировать прототип самостоятельно.
• Еще можно создать стартовую страницу со ссылками на все рабочие части прототипа. Таким образом вы даете пользователям быстрый доступ ко всем экранам и функциям в приложении, а не только привычный первый шаг с одной ссылкой.
• У некоторых инструментов есть подсказки навигации, но они могут отвлекать от процесса. Поэтому у пользователя должна быть возможность их отключить.
• Для разработчиков я создаю документ, где показываю и описываю каждый экран, состояния элементов и принципы взаимодействия. Таким образом разработчикам не нужно копаться в прототипе — они могут сразу увидеть все экраны приложения и разобраться что и как работает.

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

Лучший совет

«Сначала проектируйте, а потом прототипируйте по плану».

Лучший способ избежать ошибок — это сначала проектировать (design), а потом прототипировать по плану. В наше время есть масса отличных инструментов, которые позволяют быстро создавать очень реалистичные прототипы. Однако несмотря на все возможности, мы часто забываемся и делаем ошибки: приступаем к прототипу слишком рано, забываем планировать, выбираем не тот уровень точности, включаем слишком много функций. В результате у нас получаются слишком сложные прототипы, в которых легко запутаться. Грамотное планирование помогает избежать этих ошибок, разумно распределять время и силы и создавать более эффективные прототипы.