19 марта 2018
В последнее время на рынке происходит какой-то взрыв новых инструментов для прототипирования, которые позволяют быстро и просто моделировать сложные взаимодействия. И все же… UX- дизайнеры по-прежнему допускают одни и те же распространенные ошибки при создании прототипов.
Прототипирование — это лучший способ исследовать дизайн, определить, насколько хорошо он работает, эффективно представить дизайн другим участникам команды и протестировать его на пользователях. В последнее время я наблюдаю настоящий взрыв новых инструментов для прототипирования, которые позволяют быстро и просто моделировать сложные взаимодействия. И все же, несмотря на все технологические новинки — а может быть как раз из-за них — UX дизайнеры продолжают допускать одни и те же ошибки при создании прототипов. В этой статье я рассмотрю самые частые из них и подскажу, как их избежать.
Одна из самых частых ошибок — приступить к созданию прототипа, не успев внимательно продумать и спланировать дизайн. Эта проблема особенно актуальна для тех, кому не нравятся неструктурированные наброски от руки. Кажется, что работать с дизайном на экране будет проще — и мысль сразу открыть приложение для прототипирования кажется очень заманчивой.
Однако, большинство инструментов прототипирования позволяют делать проработку намного более детальной, чем простой набросок. Даже при создании простых черно-белых wirefram’ов дизайнеру приходится фокусироваться на деталях (расположение макетов, шрифты, элементы взаимодействия), прежде чем задуматься о самой концепции. В итоге вы можете попасть в распространенную ловушку: вложить кучу сил в один дизайн и не попробовать на начальных этапах разные варианты.
Вот что можно сделать, чтобы побороть желание сразу приступить к прототипированию:
Когда вы уже готовы к прототипированию, бывает заманчиво просто начать создавать первый экран, толком не продумав, какие экраны и взаимодействия действительно важно включить в прототип. В современных инструментах так легко создавать экраны и моделировать взаимодействия, что дизайнеры часто ударяются в проработку всех экранов, функций и действий — не раздумывая, на какие элементы стоит тратить время, а на какие — нет. Кроме потраченного времени есть еще один фактор: лишние элементы и экраны делают прототип громоздким и сложным. В результате вам тяжелее отслеживать процесс и вносить изменения.
Чтобы не тратить время на создание ненужных экранов и элементов в прототипе, сделайте следующее:
Большинство UX-дизайнеров по привычке работают с одним и тем же инструментом для прототипирования: возможно, владеют им лучше других, а может быть используют тот, что предлагает работодатель. И тогда уровень точности будет зависеть от возможностей инструмента, а это не всегда соответствует тому, что вам действительно сейчас нужно.
Различают два типа точности прототипов:
В зависимости от обстоятельств, вам могут понадобиться прототипы разной точности. К примеру, иногда вам нужно просто проверить концепцию дизайна и получить обратную связь. В этом случае лучше быстро собрать прототип на бумаге, чем тратить время на разработку интерактивного прототипа. Иногда вместо того, чтобы создавать детальный макет дизайна и линковать экраны в отдельном инструменте, бывает достаточно простого вайрфрейма с отдельными интерактивными элементами. Это позволяет сфокусироваться на расположении, навигации, названиях, лейауте и проектировании взаимодействий.
Чтобы определить нужный уровень точности вашего прототипа:
Современные инструменты позволяют так легко добавлять экраны и создавать взаимодействия, что многих заносит — и они пытаются показать все. Вы можете подумать: Ну, почему бы заодно не показать как работает это. Раз я показал одно, то можно показать и другое. Каждый функциональный элемент вашего прототипа можно создать за несколько минут, но где одно, там другое и третье — и в итоге у вас получается огромный, сложный прототип. А ведь еще даже не было тестирования на пользователях и отзывов от клиентов!
Когда вы наконец-то соберетесь показать макет клиентам, будет достаточно сложно вносить их правки и пожелания в ваш громоздкий прототип с кучей экранов, состояний и взаимодействий. Иногда бывает проще создать новый прототип, чем вносить правки в старую сложную версию.
Чтобы не увлечься и не плодить лишнего:
UX-дизайнеры привыкли использовать в работе разные виды прототипов и поэтому часто забывают, что клиенты, участники тестирования и другие заинтересованные лица могут вообще не знать, что такое прототип. Часто эти люди даже не понимают разницу между прототипом и готовым пользовательским интерфейсом.
Никто еще не принял бумажный прототип за финальный дизайн или готовый интерфейс. У бумажных прототипов есть одно большое преимущество: они выглядят как скетчи. Люди понимают, что перед ними лишь черновик и нужно включить воображение, чтобы понять, как все будет работать.
На этапе варфрейма прототип начинает походить на настоящий пользовательский интерфейс. Если такой прототип будет еще и интерактивным, люди могут принять его за итоговый дизайн. Даже если дизайнер объяснил, что это просто вайрфрейм, а визуальный дизайн будет потом, люди все равно иногда спрашивают: «А почему все черно-белое? Так ведь не будет в итоге?»
Современные инструменты для прототипирования позволяют создавать очень реалистичные взаимодействия — именно поэтому люди часто принимают прототипы за готовые приложения. К примеру, недавно в процессе ревью одного дизайна, я показал клиентам, как работает экран с результатами поиска. Слово вводится в поле поиска, далее нажимаем Найти и на экране отображаются результаты. Одна девушка спросила меня, можно ли поискать другое слово. Она думала, что функция поиска реально работает — но на самом деле это были просто два экрана, залинкованные через нажатие кнопки Найти.
В ходе юзабилити тестирования участники также часто думают, что используют реальное приложение. Они пытаются кликнуть на неработающие элементы и думают, что что-то сломалось. Важно, чтобы модератор объяснил, почему часть элементов не работает — иначе у участников тестирования может сложиться неправильное впечатление об интерфейсе.
Чтобы избежать подобных недопониманий:
Иногда в подробных интерактивных прототипах сложно ориентироваться. Сложность эта не связана с удобством навигации; скорее пользователю сложно понять, какие элементы кликабельны, а какие нет, и в каком порядке их нажимать, чтобы пройти все экраны и взаимодействия. Обычно в прототипе активны лишь некоторые кнопки, ссылки и элементы управления — и это правильно. Делать все элементы активными — лишняя работа. Поэтому люди должны знать, в каком порядке нажимать на элементы, чтобы увидеть все экраны и функции и добраться до конца прототипа. Обычно активные элементы никак визуально не отличаются от неактивных. Например, все ссылки выглядят кликабельными, но в рамках прототипа вы могли сделать только часть из них активными.
В некоторых инструментах есть функция подсказок, можно подсветить кликабельные элементы. Это классно, но может и отвлекать пользователя. К тому же, подсказки лишь указывают на активные элементы, но не объясняют, в каком порядке на них нажимать.
Эта проблема особенно актуальна, если участники тестирования проводят ревью самостоятельно. Да и сам автор прототипа может иногда забыть точный порядок действий, особенно если прототип сложный.
Мы готовим карту экранов с переходами и пояснениями. Это наглядно отражает весь сценарий, но на подготовку уходит больше времени
«Сначала проектируйте, а потом прототипируйте по плану».
Лучший способ избежать ошибок — это сначала проектировать (design), а потом прототипировать по плану. В наше время есть масса отличных инструментов, которые позволяют быстро создавать очень реалистичные прототипы. Однако несмотря на все возможности, мы часто забываемся и делаем ошибки: приступаем к прототипу слишком рано, забываем планировать, выбираем не тот уровень точности, включаем слишком много функций. В результате у нас получаются слишком сложные прототипы, в которых легко запутаться. Грамотное планирование помогает избежать этих ошибок, разумно распределять время и силы и создавать более эффективные прототипы.