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

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

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

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

Как решать

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

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

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

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

Как решать

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

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

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

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

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

Как решать

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

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

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

Наблюдение AIC

Как решать

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

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

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

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

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

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

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

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

Как решать

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

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

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

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

Как решать

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

Лучший совет

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

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/