Как разработать пользовательский интерфейс: 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 — набор графических элементов. Материалы уже адаптированы для работы разработчиков и передаются им для создания цифрового продукта. В агентствах полного цикла дизайнеры и разработчики работают в одной команде, поэтому оперативно дают обратную связь друг другу и вносят правки.

Что в итоге

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

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

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

Расскажите коллегам:
Комментарии
Генеральный директор, Москва

Хорошая статья - просто, понятно и со вкусом составлен материал....

Кто планирует обращаться к подрядчикам с с созданием сайта/моб приложения и т.п., особенно впервые - must have read...

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

Researcher, Москва

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

Посему вопрос: на кого ориентирована статья?

Лучшие силы (и умы) IT сосредоточены на разработке многопользовательских систем реального времени. А здесь все совсем не так.

Главное — это «Рабочее место» в Бизнес-процессе системы. И естественно требование к usability «Рабочего места» базируются на иных принципах.   

Генеральный директор, Москва

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

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

Директор по развитию, Воронеж
Валерий Овсий пишет:
на разработке многопользовательских систем реального времени

"на разработке многопользовательских систем реального времени" - например?

 

Researcher, Москва
Павел Егоров пишет:
"на разработке многопользовательских систем реального времени" - например?

Например, система для банков, разработанная нашей компанией.
 
Т. к. реклама здесь запрещена то ее название и сайт легко найти по моим данным в профиле. 

Как пример в одном банке в системе работаете около 3000 (три тысячи) пользователей в отделениях на территории от Шанхая (Китай) до Калининграда в 10-часовых поясах.

Аналитик, Москва
Валерий Овсий пишет:

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

Посему вопрос: на кого ориентирована статья?

Лучшие силы (и умы) IT сосредоточены на разработке многопользовательских систем реального времени. А здесь все совсем не так.

Главное — это «Рабочее место» в Бизнес-процессе системы. И естественно требование к usability «Рабочего места» базируются на иных принципах.   

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

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

Иногда всё это становится историческим анекдотом. Вот кто-нибудь объяснит, зачем практически 90 процентов сайтов при регистрации просит повторить пароль? Это было довольно важно во времена начала интернета. Но так и вставляют везде.

IT-менеджер, Украина

Ну наконец-то кто-то внятно объяснил связь этих модных аббревиатур UI+UX человеческими словами.

Думаю, сайт - это пример. Этот подход можно применить к любому однопользовательскому продукту, где нужно тыкать и вводить.

Для многопользовательских это уже неоднозначно.

Оставлять комментарии могут только зарегистрированные пользователи
Статью прочитали
Обсуждение статей
Все комментарии
Дискуссии
Все дискуссии
HR-новости
«Кухня на районе» запустит автоматы с готовой едой и кафетерии в Москве

Для сервиса выход в офлайн — один из способов увеличить оборот.

За год стереотипов в отношении женщин на рынке труда стало меньше

В 81% компаний сообщили, что семейное положение женщины не влияет на решение о ее работе.

Сервис аренды самокатов Whoosh выйдет на IPO

Ожидается, что это произойдет 14 декабря 2022 года.

«МегаФон» продал долю в «Связном»

Оператор «МегаФон» владел 25% акций сети магазинов «Связной».