2 ноября 2018

Прототипы – верный способ прокачаться в UX-дизайне

Если вы хотите отточить свое мастерство UX-аналитика, то наш перевод статьи о прототипировании и интерактивном дизайне — для вас!

Prototyping UX design Noveo

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

Прототипирование — это итеративный процесс, позволяющий вам оценивать и тестировать ваш дизайн. За последние несколько лет я создал прототипы на все случаи жизни и с самым разным уровнем детализации. Анализируя пройденный мной путь, я делаю следующие выводы:

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

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

Поиск правильных инструментов: как оценить то, что существует

Когда дело доходит до сравнения инструментов прототипирования, мы часто сталкиваемся с парадоксом выбора: многие инструменты предлагают вполне сравнимые между собой возможности и цены, что ведет к еще большей растерянности. Мне лично нравится Flinto, который я использую для большинства своих прототипов из-за скорости и детальной проработки. Однако, важно сохранять гибкость: в некоторых случаях я переключаюсь на редактор кода и привлекаю к решению задач HTML/CSS/JS.

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

Детализация и персонализация

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

Время, необходимое для освоения

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

Единство с командой

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

Есть и другие факторы, которые стоит принять во внимание (например, насколько просто получить совместный доступ и доступ к коду), но все вышеперечисленное — очень весомые аргументы при выборе инструмента для дальнейшей работы. Не забывайте: дело не столько в самом инструменте, сколько в том, чего он позволяет вам достичь.

Дизайн на грани реальности: как сделать прототипы живыми

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

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

Состояния элементов

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

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

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


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

Peter Vachon Prototyping Hover

  • Вариант 1 меняет цвет корзины на красный, сигнализируя, что это действие может быть опасным.
  • На варианте 2 всплывает подсказка с обозначением действия, выполняемого этой иконкой.
  • Вариант 3 более игровой и использует саму иконку для иллюстрации выполняемого ей действия.

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


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

Peter Vachon Prototyping Press/Click/Tap

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


В дополнение к клику добавьте жест смахивания, чтобы перейти от одного экрана к другому. Благодаря вездесущности таких ОС, как iOS и Android, провести пальцем в сторону — знакомый многим шаблон навигации, и, взаимодействуя с мобильным UI, пользователь ожидает, что этот жест будет присутствовать.

Peter Vachon Prototyping Swipe


Переходы, переходы, переходы

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

Peter Vachon Prototyping Transitions

  • Вариант 1: Сдвиг влево. Механизм перехода из коробки iOS, накладывающий один экран на другой. Эта опция часто встречается в пакетах инструментов ПО, но может раздражать пользователей при переходах между незначительно отличающимися экранами.
  • Вариант 2: Без перехода. Простая замена одного экрана на другой хорошо подходит для минимального изменения элементов.
  • Вариант 3: Специально сделанный переход. Он может смягчить переход между экранами и подсказать пользователю, какая информация изменится.

Дайте пользователю шанс разобраться самому

Ничто так не дает пользователю ощущение реальности, как возможность контролировать процесс. И иногда это значит дать им самим разобраться и, может быть, (немного) отклониться от курса. Это прекрасный способ увидеть, какая навигация будет для пользователей естественной, и понять, как пользоваться приложением.

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

Peter Vachon Prototyping Table of contents
Действия легко можно осуществить через раскрывающееся меню
Peter Vachon Prototyping Table of Contents
Действия, которые можно совершить с одним или несколькими объектами, отражены на специальной панели
Peter Vachon Prototyping Table of Contents
Просмотр дополнительных деталей об объекте и возможность совершить с ним какое-то действие

Оправдывать ожидания пользователей (…или нет)

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

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

Petert Vachon Prototyping Failure


Проверяйте на том девайсе, для которого вы разрабатываете

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


Будьте креативными и настоящими

Извлекайте максимум из инструмента, которым вы пользуетесь. Пользуйтесь преимуществом поддержки видео и создавайте гифки или анимированные страницы, чтобы лучше имитировать UI.

Прототип, воспринимаемый пользователем как реальное приложение, оставляет неизгладимое впечатление. А мы знаем: нет ничего лучше интерактива :)


Прежде, чем браться за дело: определите, что именно вам нужно сделать, исходя из вашей аудитории

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

Peter Vachon Prototyping
Прототип, сделанный для проверки соответствия архитектуре и демонстрирующий управление предложенным UX-фреймворком
Peter Vachon Prototyping
Следующая итерация прототипа UX-фреймворка: добавлена интерактивность, более точно воспроизведено взаимодействие, определен контекст

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

Представляете свой прототип с помощью ПО для видеозвонков

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

Peter Vachon Prototyping


Делитесь с командой разработки

Если ваш прототип предназначен для сообщения алгоритмов взаимодействия команде разработки, делайте его в форме небольших картинок. Совет от профессионала: по возможности сформулируйте фактические параметры движения, такие как длительность, задержка, изгиб и т.д. Для того, чтобы связать все картинки воедино, я люблю предоставлять диаграмму информационной архитектуры или высокоуровневую карту пользовательского опыта в качестве быстрой инструкции (см. ниже).

Peter Vachon Prototyping
Пример последовательной диаграммы

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

Peter Vachon Prototyping
В этом примере контент и визуальная достоверность не на высоте, так что я могу ясно показать, каким будет алгоритм взаимодействия для панели деталей и действий с несколькими объектами

Пользовательское тестирование

Оно полезно, когда вы хотите, чтобы ваш прототип выглядел максимально реалистичным. В рамках своего прототипа оставьте действия неупорядоченными и предоставьте пользователям несколько путей, если они доступны. Не вынуждайте пользователей использовать удачный путь; наоборот, делайте выводы из их реального взаимодействия.

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


Ключевые моменты

  • Не слишком увлекайтесь подбором инструмента. Прототипируйте с помощью любого из тех, которые в принципе способны справиться с вашей задачей, и не бойтесь инвестировать в качественный инструмент.
  • Делайте ваши прототипы реалистичными, добавляя немного тонкости.
  • Прототипы — один из лучших ресурсов для вашей большой команды (партнеры по бизнесу, разработчики, исследователи и т.д.)
  • Прототипирование заставляет вас учитывать весь процесс UX-разработки и за счет этого делает вас более вдумчивым UX-аналитиком.

Оригинал: https://uxdesign.cc/becoming-a-better-designer-through-prototyping-2de76df8c866

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте в нашем блоге

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: