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

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

Как решать

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

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

Как решать

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

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

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

Как решать

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

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

Как решать

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

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

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

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

Как решать

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

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

Как решать

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

Лучший совет

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
aic blog

aic blog

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

More from Medium

A Racer’s Dream (written 1990/91)

Huobi #PrimeEarn Phase 5 is here!

Hansel La Rosa