19 марта 2018

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

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

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

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

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

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

Как решать

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

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

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

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

Как решать

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

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

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

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

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

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

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

Как решать

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

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

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

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

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

Как решать

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

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

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

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

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

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

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

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

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

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

Как решать

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

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

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

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

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

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

Как решать

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

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

Лучший совет

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

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

Дальше — большe

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

20 февраля 2019

Муки арт-директора: нанимать профессионалов или прокачивать новичков

31 июля 2018

Как использовать бенчмаркинг для передачи знаний

26 января 2017

Невероятная новость об искусственном интеллекте Google, которую вы, возможно, пропустили

23 августа 2017

Сколько процентов населения составляют продвинутые пользователи? Все хуже, чем кажется

2 июля 2018

Как искать и отбирать респондентов для юзабилити-тестирования

7 сентября 2017

Сколько вариаций нужно проверить в A/B тестировании?