Как разработать пользовательский интерфейс: 5 этапов, 3 правила

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

В мобильных и веб-приложениях интерфейс — незаменимая часть, благодаря которой пользователь может взаимодействовать с продуктом. Дизайнер, который отвечает за UI (User Interface), должен подсказать, как запустить приложение, как им пользоваться и выполнять целевые действия. Задачи пользователя могут быть разные: поставить будильник, заказать пиццу или положить деньги на счет. Чтобы понять, что хочет клиент, как именно ему будет удобно выполнить задачу, какие у него предпочтения, нужно обратиться к UX-дизайну (User experience).

Как связаны UI-дизайн и UX-дизайн

UX-дизайн помогает понять, как пользователь взаимодействует с цифровым решением, какие у него сценарии и паттерны поведения. На основе этого опыта строится пользовательский интерфейс, который отвечает за удобство и понятность использования. У UX- и UI-дизайна разные задачи. 

UX:

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

UI:

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

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

Как происходит разработка дизайна

Чтобы разработать интерфейс, нужно понимать пользователя. Важно провести исследование целевой аудитории (ЦА), анализ конкурентов, проработать прототип, протестировать на фокус-группах и выбрать рабочий вариант. После результат передается разработчикам для создания цифрового продукта. Рассмотрим подробнее каждую фазу разработки.

1. Исследование

Аналитика — часть этапа исследования, она помогает собрать данные и определить глобальные цели. Ключевые задачи этапа исследования:

• обозначение задачи, которую решает цифровой продукт; 
• определение ЦА — цели, задачи, мотивация, стиль жизни, предыдущий опыт, паттерны взаимодействия с подобными приложениями или сайтами; 
• анализ конкурентов и их способов решения пользовательских задач.

2. Разработка пользовательских сценариев

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

1. Зайти на сайт.
2. Ввести логин и пароль.
3. Перейти в профиль.
4. Кликнуть на фото профиля.
5. Выбрать файл из библиотеки устройства.
6. Обрезать изображение и подтвердить действие.
7. Сохранить изменения.

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

3. Прототипирование

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

1. Прототипы создаются при помощи макетов. Самый распространенный тип макета — вайрфрейм (от английского wireframe — «каркасный»). Чаще всего вайрфрейм выглядит как множество прямоугольных блоков, простых кнопок и текста. Именно эти графические элементы помогают передать суть продукта и сценарии пользовательского взаимодействия. На этапе вайрфреймов продумываются все текстовки продукта — надписи на кнопках, сообщения об ошибках, текст на главной и т. д.
2. На основе базового прототипа создается детализированный формат. Он более конкретный: если в вайрфрейме совокупность прямоугольников и окружностей могут обозначать что угодно, то в детализированном прототипе за фигурами закреплена определенная функция. Например, прописывается, что в окружности будет фото профиля, а в прямоугольнике — текст сообщения с возможностью добавлять файлы, аудио или видео. 
3. Детализированный прототип может эволюционировать в интерактивный. Он помогает улучшить понимание продукта, и оценить его функционирование. В нем можно прокликать и пролистать все элементы интерфейса, проверить логику работы перед тем, как приложение попадет в продакшн. После этого этапа функциональность и интерфейс можно считать утвержденным, а этап прототипирования завершенным.

Особенности интерактивных прототипов

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

Все действия с прототипом соответствуют пользовательским сценариям, поэтому должны быть продуманными и связанными. На начальных этапах разработки создают User Flow (UF) — визуальное представление пути пользователя. В нем описывается, какие действия совершает человек, перемещаясь по цифровому решению. Чаще всего UF выглядит как блок-схема, несколько связанных между собой логически фигур. Основная задача схемы — кратко и понятно описать, что делает пользователь в приложении, какие элементы критически важны, а какие можно убрать.

4. Создание UI 

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

Продумать стилистику помогают наборы изображений — мудборды («доска настроения», набор фото, иллюстраций, фонов, слоганов, шрифтов, цветовых схем). Их можно собрать в Pinterest, Mirro или просто сложить изображения в папку. Важно подобрать такие картинки, которые передадут настроение, будут связаны стилистически, станут источником вдохновения. На основе мудборда проще подбирать кнопки, шрифты и формировать целостный дизайн. 

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

5. Подготовка материалов для разработчиков

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

Что в итоге

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

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

Читайте также: