В широком смысле интерфейс — набор средств для взаимодействия двух систем. Он используется повсюду — в мобильных приложениях, на сайтах, в соцсетях, системах управления автомобилем и умными вещами, даже на кнопках в лифте. Интерфейс помогает нам управлять другими объектами, чтобы написать сообщение в чате, найти информацию на сайте, переключить каналы, или доехать до необходимого места.
В мобильных и веб-приложениях интерфейс — незаменимая часть, благодаря которой пользователь может взаимодействовать с продуктом. Дизайнер, который отвечает за UI (User Interface), должен подсказать, как запустить приложение, как им пользоваться и выполнять целевые действия. Задачи пользователя могут быть разные: поставить будильник, заказать пиццу или положить деньги на счет. Чтобы понять, что хочет клиент, как именно ему будет удобно выполнить задачу, какие у него предпочтения, нужно обратиться к UX-дизайну (User experience).
Как связаны UI-дизайн и UX-дизайн
UX-дизайн помогает понять, как пользователь взаимодействует с цифровым решением, какие у него сценарии и паттерны поведения. На основе этого опыта строится пользовательский интерфейс, который отвечает за удобство и понятность использования. У UX- и UI-дизайна разные задачи.
UX:
- изучить опыт человека и его приоритеты в пользовании решением;
- создать пользовательский путь — очередность действий для достижения цели;
- создать прототип, отображающий основные блоки;
- сделать использование приложения удобным;
- использовать необычные сценарии, чтобы выделиться на фоне конкурентов.
UI:
- создать продуманный интерфейс, учитывающий запросы пользователей;
- подобрать шрифты, цвета и анимацию, которые будут отражать ценности и смыслы приложения;
- превратить прототип в дизайнерский продукт;
- сделать пользование визуально приятным и интуитивно понятным.
UX — основа для создания UI. Одно невозможно без другого, потому что UX позволяет понять пользователя, его ход мыслей и очередность действий, а UI помогает облечь смыслы в визуально понятную систему. Поэтому человека, который занимается комплексной разработкой дизайна, называют UI/UX-дизайнером.
Как происходит разработка дизайна
Чтобы разработать интерфейс, нужно понимать пользователя. Важно провести исследование целевой аудитории (ЦА), анализ конкурентов, проработать прототип, протестировать на фокус-группах и выбрать рабочий вариант. После результат передается разработчикам для создания цифрового продукта. Рассмотрим подробнее каждую фазу разработки.
1. Исследование
Аналитика — часть этапа исследования, она помогает собрать данные и определить глобальные цели. Ключевые задачи этапа исследования:
- обозначение задачи, которую решает цифровой продукт;
- определение ЦА — цели, задачи, мотивация, стиль жизни, предыдущий опыт, паттерны взаимодействия с подобными приложениями или сайтами;
- анализ конкурентов и их способов решения пользовательских задач.
2. Разработка пользовательских сценариев
После того как стало понятно, зачем нужно приложение, можно переходить к определению задач интерфейса. Сначала создается список действий, который будет доступен пользователю в приложении. После он детализируется и прописывается пошаговый план. Например, чтобы поменять фото профиля на маркетплейсе, необходимо:
- Зайти на сайт.
- Ввести логин и пароль.
- Перейти в профиль.
- Кликнуть на фото профиля.
- Выбрать файл из библиотеки устройства.
- Обрезать изображение и подтвердить действие.
- Сохранить изменения.
Такие списки помогают определить наиболее энергозатратные действия, в которых путь к выполнению самый длинный. Тогда дизайнеры создают пользовательские сценарии, в которых уменьшают количество действий и упрощают пользование. На основе созданных списков строится интерфейс программы: определяется количество экранов, вкладок, расположение блоков.
3. Прототипирование
Создание прототипа — этап, на котором становится понятна структура страниц, размещение на них текстов, изображений, заголовков и кнопок. В нем без деталей отображается внешний вид, логическая цепочка работы и главная функциональность.
- Прототипы создаются при помощи макетов. Самый распространенный тип макета — вайрфрейм (от английского wireframe — «каркасный»). Чаще всего вайрфрейм выглядит как множество прямоугольных блоков, простых кнопок и текста. Именно эти графические элементы помогают передать суть продукта и сценарии пользовательского взаимодействия. На этапе вайрфреймов продумываются все текстовки продукта — надписи на кнопках, сообщения об ошибках, текст на главной и т. д.
- На основе базового прототипа создается детализированный формат. Он более конкретный: если в вайрфрейме совокупность прямоугольников и окружностей могут обозначать что угодно, то в детализированном прототипе за фигурами закреплена определенная функция. Например, прописывается, что в окружности будет фото профиля, а в прямоугольнике — текст сообщения с возможностью добавлять файлы, аудио или видео.
- Детализированный прототип может эволюционировать в интерактивный. Он помогает улучшить понимание продукта, и оценить его функционирование. В нем можно прокликать и пролистать все элементы интерфейса, проверить логику работы перед тем, как приложение попадет в продакшн. После этого этапа функциональность и интерфейс можно считать утвержденным, а этап прототипирования завершенным.
Особенности интерактивных прототипов
В интерактивном прототипе нужно показать, как пользователь будет взаимодействовать с отдельными элементами, переходить со страницы на страницу и доходить до целевого действия. Особенность интерактивного прототипа в том, что можно пощупать будущее цифровое решение — сайт или мобильное приложение. Это позволяет оценить интерфейс до того, как им будет пользоваться ЦА.
Все действия с прототипом соответствуют пользовательским сценариям, поэтому должны быть продуманными и связанными. На начальных этапах разработки создают User Flow (UF) — визуальное представление пути пользователя. В нем описывается, какие действия совершает человек, перемещаясь по цифровому решению. Чаще всего UF выглядит как блок-схема, несколько связанных между собой логически фигур. Основная задача схемы — кратко и понятно описать, что делает пользователь в приложении, какие элементы критически важны, а какие можно убрать.
4. Создание UI
Механику и логику продукта важно облечь в приятный и понятный интерфейс. Он помогает создать единый облик продукта, становится его голосом, который будет разговаривать с пользователем. Фирменный стиль, шрифты, цвета, иконки и иллюстрации — все это формирует комплексный образ продукта.
Продумать стилистику помогают наборы изображений — мудборды («доска настроения», набор фото, иллюстраций, фонов, слоганов, шрифтов, цветовых схем). Их можно собрать в Pinterest, Mirro или просто сложить изображения в папку. Важно подобрать такие картинки, которые передадут настроение, будут связаны стилистически, станут источником вдохновения. На основе мудборда проще подбирать кнопки, шрифты и формировать целостный дизайн.
Концептуальный дизайн нужен, чтобы показать, как будет выглядеть будущий цифровой продукт. Важно скрестить функциональную составляющую и облечь прототипы в фирменный стиль. Если дизайн-концепция понравится клиенту, то дизайнеры оформляют весь проект в таком стиле. Прототип становится на шаг ближе к готовому продукту.
5. Подготовка материалов для разработчиков
Итог работы UX/UI-дизайнера — набор файлов дизайн-решений. Чаще всего это вайрфреймы, кликабельные или интерактивные прототипы, макеты приложений и UI Kit — набор графических элементов. Материалы уже адаптированы для работы разработчиков и передаются им для создания цифрового продукта. В агентствах полного цикла дизайнеры и разработчики работают в одной команде, поэтому оперативно дают обратную связь друг другу и вносят правки.
Что в итоге
Пользователи цифрового решения — люди, а не его разработчики и дизайнеры. Интерфейс — важная часть цифрового решения, через которую пользователи смогут взаимодействовать с ним. Поэтому важно помнить три правила — понятная функциональность, прозрачный путь и очевидное действие.
- Понятная функциональность — пользователю должно быть ясно, что делает цифровое решение, для чего нужны разные вкладки, как выполнить определенное действие, как понять, что получен результат. Функциональность закладывается на первых этапах проектирования и во многом зависит от целевой аудитории.
- Прозрачный путь — необходимо продумать назначение кнопок, полей ввода, смену экранов или страниц, чтобы привести пользователя к покупке, заказу или публикации поста. Для получения правильного ответа на этот вопрос, нужно продумать пользовательские сценарии, протестировать прототипы на пользовательских сценариях, внести правки при необходимости и получить рабочий результат.
- Очевидное действие — пользователь должен понимать, куда нажимать, чтобы произошел ответ системы. Выделенная цветом, размером или формой кнопка для совершения целевого действия должна показывать свое специальное назначение.
Читайте также: