У каждого дизайнера есть свое представление, как устроен идеальный рабочий процесс, поэтому все решает удобство и договоренности с заказчиком.
Однако в то же время при разработке любого приложения есть определенные этапы, которые нельзя перескочить, не нарушив технологию работы. Особенно это касается полного цикла UX/UI-дизайна, где все построено на принципе обратной связи и регулярном тестировании продукта.
В общем, сегодняшняя статья посвящена процессу и этапам разработки UX/UI-дизайна и основным принципам, которые следует учитывать по мере работы над готовым прототипом.
Источник фото: Napkin AI, kedu.ru
Шаг 1. Определение целей и требований
Первый этап, как и в любом деле, это понять, зачем вообще проект реализуется и какие задачи он будет решать.
Для заказчика составляется бриф — своего рода опросник с пожеланиями и общей направленностью будущего проекта. Вместо брифа может быть серия устных обсуждений, где стороны обмениваются идеями и своим видением.
UX/UI-дизайнеру здесь необходимо тщательно все записать, учесть и проанализировать.
Шаг 2. Исследование пользователей (User Research)
Исследование UX — важнейшая часть дизайна UX/UI-разработки, поскольку без понимания, кто аудитория продукта не получится и толкового интерфейса.
На этом этапе UX/UI-дизайнер различными методами собирает все возможные данные о пользователе: его мотивациях, болевых точках и потребностях. Далее он анализирует предпочтения и поведение, основываясь на работе с похожими продуктами.
Можно использовать опросы, интервью, карты пользовательского пути и другие методы, чтобы детально изучить целевую аудиторию. Это позволит глубже понять UX/UI процессы и предложить правильные решения
Наиболее типичной является методика из 6 вопросов, на которые должен быть дан четкий ответ:
- Кто? Имя и род занятий пользователя;
- Что вы собираетесь предпринять, чтобы решить проблемы пользователя;
- Где физически находится пользователь, когда применяет ваш продукт;
- Когда возникает проблема, которую предстоит решить пользователю;
- Почему данная проблема влияет на жизнь пользователя;
- Как пользователь способен решить проблему, используя продукт.
Такой подход помогает понять и целевую аудиторию, и её «боли», и в целом понять, какой тип программного продукта им нужен. Можно проследить это на примере маркетплейса товаров для детей:
- Кто — мама в декрете Ирина, возраст 27 лет;
- Что — продажа товаров для детей через единый маркетплейс;
- Почему — у Ирины мало времени на походы по магазинам, ей удобнее заказывать все в одном месте и пользоваться доставкой на дом.
Вариации ответов могут быть разными, но, полагаем, суть понятна: нужно четко понимать, для кого вы разрабатываете интерфейс.
Шаг 3. Создание информационной архитектуры
После анализа пользователей важно продумать структуру продукта — информационную архитектуру. Она будет отражать то, как данные организованы и представлены в интерфейсе. На этом этапе формируются блоки, разделы и пути, по которым пользователи будут перемещаться.
Это один из ключевых этапов UX/UI-проектирования, который закладывает фундамент для удобного использования продукта. При этом разработчик интерфейса должен в общих чертах продумать и предугадать траекторию движения пользователей. На примере того же маркетплейса можно понять, что основные перемещения будут: из каталога (поиска) на страницы товаров, а с них — в личный кабинет (корзину) для оформления заказа. Следовательно, рядом с каждым товаром следует предусмотреть кнопки «В корзину», чтобы пользователь мог отложить товар и оформить заказ позже, и «Купить», если он готов приобрести товар сразу.
Шаг 4. Прототипирование
Прототипирование — ещё один важный UX-процесс. На этом этапе дизайнер создает черновые версии экранов, которые отражают основные функции продукта. Работа с прототипом помогает протестировать логику взаимодействия пользователей с интерфейсом и понять, правильно ли работают сценарии работы.
1. Варфрейм
Начинается создание прототипа с чернового макета — warframe. Он обычно статичный и показывает основные группы контента, блоки, структуру и навигацию. На начальном этапе его могут вообще не верстать в Figma, а просто начертить от руки на листах бумаги.
При создании варфрейма есть возможность ещё раз проверить поведение пользователей, протестировав, как они будут переходить с одной страницы на другую и располагать отдельные элементы на странице.
Этот метод в UX-дизайне называется карточной сортировкой. Задача участников — сгруппировать эти карточки по категориям на основе их логики и предложить названия для этих категорий. Карточная сортировка может быть открытой, когда пользователи сами придумывают категории, и закрытой, когда категории заданы заранее
Сортировку часто используют на этапах проектирования структуры интерфейса или архитектуры информации, например, при создании меню сайта или навигации приложения. Карточная сортировка помогает выявить сценарии, которые используют люди, чтобы адаптировать интерфейс под их ожидания и сделать его более интуитивным. Она позволяет улучшить навигацию и повысить удобство пользования интерфейсом, обеспечивая легкий доступ к нужной информации.
Карточную сортировку имеет смысл проделать над каждым принципиальным элементом интерфейса, будь то расположение товаров в каталоге, их категории, навигационные элементы, позволяющие перемещаться между страницами каталога и тому подобное.
2. User Flow
В практике UX/UI этим термином обозначают процесс перехода от одного сценария к другому. Пользователь должен делать это интуитивно, затрачивая минимум времени. Именно поэтому нужно уделить user flow самое пристальное внимание, добившись понимания, где человек испытывает трудности в навигации и сколько в целом тратит времени на перемещения по страницам.
На примере высоконагруженного сервиса, такого, как уже упомянутый маркетплейс, или интернет-магазин с большим количеством товарных позиций, user flow важен, чтобы пользователь побыстрее совершил целевое действие — то есть отложил выбранный товар в корзину или купил его. На этом пути у него должно быть как можно меньше препятствий
3. Интерактивный прототип
Завершающая стадия прототипирования — это сборка интерактивных страниц с кликабельными элементами: кнопками, иконками, навигационными ссылками, иллюстрациями и т.д.
Сначала собирают прототипы с основными функциями, затем последовательно наполняют их. Цель — проверить все гипотезы, которые были выдвинуты на предыдущих стадиях.
Тестирование рабочего прототипа проводится множеством разных способов и в разных вариациях, но основных путей два:
- Модерируемая проверка — своего рода лаборатория, когда модератор просит фокус-группу прокликать основные элементы и выполнить отдельные задания;
- Немодерируемая удаленная проверка — макет отдают на проверку независимой группе тестировщиков, которые проверяют его функции и пишут свои замечания.
По итогам тестирования UX/UI-дизайнер составляет диаграмму сходства, которая поможет упорядочить замечания, понять, где остались узкие места, и «докрутить» пользовательский опыт.
Но это еще не все: далее следует разработать метрики и дополнительные опросники для фокус-группы. Они помогут определиться, где есть баги и недоработки. Вариантов опросников великое множество, но наиболее популярные, где предлагаются вопросы и шкала согласия от 0 до 10, где 0 «полностью не согласен», а 10 «полностью согласен».
Шаг 5. Работа над дизайном и создание макета
Когда прототипы утверждены, в разработке UX/UI-дизайна начинается этап создания рабочего макета. Здесь разрабатывается стиль, подбираются цвета, шрифты, иконки и другие элементы.
Разумеется, макет также нужно проверить на гармоничность и привлекательность у аудитории. Чаще всего дизайнер отрисовывает два-три варианта, предлагая пользователям выбрать наиболее удачный на их взгляд вариант.
Это помогает создать приятный и функциональный интерфейс, который не только привлекателен, но и удобен для пользователей.
Шаг 6. Тестирование и итерации
После завершения визуального дизайна следует этап тестирования рабочего прототипа. Здесь продукт отдают на тестирование целевой группе, которая и вынесет окончательный вердикт: полезен он или нет, работают ли все его функции, как задумано, и так далее.
По итогу, UX/UI-дизайнеру предстоит сделать две-три или больше итерации готового дизайна, чтобы приложение заработало.
Шаг 7. Внедрение и поддержка
Последний шаг в UI/UX проекте — это внедрение дизайна и дальнейшая поддержка продукта. Дизайнеры отдают макет в разработку, однако, на этом их работа не заканчивается. Впереди ещё несколько этапов тестирования и отслеживание UX-метрик — здесь лучший друг UX/UI-дизайнера это разнообразные фреймворки, куда уже включены интегративные параметры. Самым популярным на сегодняшний момент является фреймворк HEART (Happiness, Engagement, Adoption, Retention, Task success) от Google.
Также в арсенале UX/UI-дизайнера должна быть CJM (Customer Journey Map) — своеобразная навигационная карта, которая показывает путь знакомства пользователя с продуктом от потребности в нем до покупки (подписки) и дальнейшего использования.
Изучая CJM, дизайнер может отслеживать незакрытые боли пользователя и отдельные нюансы, которые он не смог учесть в первой итерации продукта.
В общем, процесс создания UX/UI-дизайна будет продолжаться ровно столько, сколько действует поддержка продукта. Пока программисты будут допиливать техническую часть и отлавливать баги, UX/UI-дизайнеру предстоит думать, как ещё он может улучшить пользовательский опыт и облегчить работу с приложением.
