Что такое пользовательский интерфейс и как происходит разработка UI

Мы не устаем писать о том, как важен дизайн в разработке мобильных приложений, в особенности если это MVP. Однако вокруг данной темы остается довольно много недопонимания и путаницы. Где заканчивается дизайн интерфейса и начинается UX дизайн? Какой этап важнее? Что такое вайрфреймы и прототипирование? Давайте разбираться по порядку.

Коротко о главном

Что такое UI и зачем он нужен

Начнем с понятия «интерфейс». Простыми словами, это набор средств, которые позволяют взаимодействовать двум системам и решать какую-то задачу. И если посмотреть внимательно, то интерфейсы повсюду.

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

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

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

Так же и с приложениями: то, что пользователь видит, запуская ваш продукт, и есть интерфейс, он же UI (User Interface). Задача дизайнера — через интерфейс показать пользователю, как работает приложение, и привести его к желаемому результату, будь то заказ продуктов из магазина или установка будильника. Но как узнать, что именно пользователь ждет от приложения? Как он будет с ним взаимодействовать? Какие у него предпочтения? Ответы на эти вопросы находятся в плоскости UX дизайна (User eXperience).

Продукты с проработанным интерфейсом удерживают пользователей дольше, конвертируют их в платящих клиентов чаще и быстрее завоёвывают доверие аудитории. Над такими задачами в Purrweb работает команда UI/UX дизайн от Purrweb.

Какие бывают виды пользовательских интерфейсов

Пользовательский интерфейс бывает разным. Тип определяет, как именно человек взаимодействует с продуктом: через экран, голос, жест или текстовые команды. У каждого варианта своя среда и своя аудитория.

• GUI (графический интерфейс пользователя) — управление через визуальные элементы на экране. Пользователь нажимает кнопки, листает списки, заполняет поля через экран с помощью мыши, пальца или стилуса. Внутри GUI различают десктопный вариант (мышь и клавиатура) и мобильный (touch-first, под жесты). Мобильные приложения на iOS и Android, веб-сервисы, SaaS-продукты, интернет-магазины относятся к GUI. Большинство проектов, с которыми приходят к нам, попадают именно в эту категорию.
• VUI (голосовой интерфейс) — управление через голосовые команды без обязательного экрана. Пользователь говорит, система распознаёт речь и отвечает. Применяется там, где руки заняты или экран недоступен: умные колонки (Яндекс Станция, Amazon Echo), голосовые ассистенты (Алиса, Siri), навигаторы, системы управления умным домом.
• Жестовый и сенсорный интерфейс — управление движениями рук или касаниями без традиционной мыши. Смартфон одновременно относится и к GUI, и к жестовому типу: свайп, пинч, тап работают как жестовые команды поверх визуального слоя. Наиболее чистый пример жестового UI без экрана — гарнитуры AR/VR: Apple Vision Pro управляется взглядом и движениями рук, Meta Quest 3 распознаёт жесты без контроллера.
• CLI (интерфейс командной строки) — управление через текстовые команды в терминале. Без графики, только ввод и текстовый вывод. Это специализированный инструмент для разработчиков и DevOps: Git, Docker, kubectl, npm. Конечным пользователям CLI не встречается, но именно с ним работают те, кто разворачивает и поддерживает продукты.

Из чего состоит интерфейс — основные элементы

Любой интерфейс складывается из повторяющихся блоков, у каждого из которых своя роль.

• Кнопки — запускают действие. Нажатие на кнопку отправляет форму, переводит на следующий экран или подтверждает операцию.
• Иконки — визуальные ярлыки для функций. Символ корзины, лупы или домашней страницы распознаётся мгновенно, без текстовой подписи.
• Поля ввода — собирают данные от пользователя. Через них передаются текст, числа, даты или файлы.
• Навигация — показывает маршруты между экранами. Пользователь видит, где находится и куда может перейти.
• Типографика — задаёт иерархию и читаемость. Размер, шрифт и контрастность подсказывают, что читать сначала.
• Обратная связь — сигнализирует, что действие принято. Кнопка меняет цвет при нажатии, появляется спиннер загрузки, вибрирует телефон при ошибке.

Почему UI неотделим от UX

UX дизайн — это так называемый «дизайн пользовательского опыта». Из него следует UI дизайн — «дизайн пользовательского интерфейса». У каждого из них свои задачи.

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

Подробнее о том, в чём разница между UI и UX, разобрали отдельно.

Если вернуться к примеру про смеситель, то все, что касается материалов, цвета, формы и маркировки, относится к UI, а принцип работы — к UX.

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

Неудивительно, что сейчас UI не рассматривают в отрыве от UX, а соответствующая профессия звучит как UI/UX дизайнер.

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

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

Мы уже писали об особенностях нашего дизайн-процесса в целом ⤵️

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

Проводим предварительные исследования

Процесс проектирования интерфейса стоит начать с аналитики. Ключевые задачи при этом следующие:

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

Более подробно об анализе конкурентов и исследовании целевой аудитории можно прочитать в нашем блоге ⤵️

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

Полина Толмачева

Лид UI/UX дизайнер в Purrweb

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

Проектируем UX

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

Майндмэп — это схематичное изображение всех функций продукта и навигации между ними.

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

Разработка карты функциональности занимает всего лишь 8-10 часов, зато позволяет избежать недопонимания с заказчиком и подготовить основу для полноценного дизайна.

Работаем над первыми макетами

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

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

Создаем концепт для клиента

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

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

Полина Толмачева

Лид UI/UX дизайнер в Purrweb

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

Для разработки концепта мы используем сервис Readymag. Это удобный онлайн-инструмент для создания лендингов и презентаций. Такое представление идеи будущего продукта намного нагляднее и понятнее для клиента, чем просто демонстрация нескольких экранов.

{{tg-banner}}

Рисуем UI-дизайн всего приложения

Вместе с концептом обычно утверждаются цветовая схема и шрифты. Затем все это необходимо масштабировать на остальные части приложения и доработать, например, отрисовать иконки или иллюстрации. Для этого дизайнеры чаще всего работают в Figma, а среди альтернатив встречаются Sketch и Adobe XD.

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

Разрабатываем интерактивный прототип

Прототип — это интерактивный макет, который отражает внешний вид и функции приложения. Благодаря его «кликабельности», можно оценить логику работы продукта. Поэтому он в первую очередь нужен самим дизайнерам, чтобы убедиться в отсутствии ошибок в user flow. Чем еще полезен прототип:

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

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

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

→ Вот уже 10 лет мы помогаем стартапам создавать красивые и удобные приложения. Если у вас есть идея, но вы не знаете, с чего начать — заполните форму, и мы свяжемся с вами.

Принципы проектирования хорошего пользовательского интерфейса

Зная, из каких шагов складывается разработка UI, стоит разобраться, по каким критериям оценивают результат.

1. Понятность. Пользователь с первого взгляда понимает, что делает интерфейс и как им пользоваться. В банковском приложении баланс и кнопка «Перевести» видны сразу, не нужно искать, где начать.
2. Интуитивность. Интерфейс следует устойчивым конвенциям, которые люди усвоили из других продуктов. Иконка корзины в правом верхнем углу воспринимается как список покупок даже при первом визите в незнакомый магазин.
3. Консистентность. Одинаковые элементы работают одинаково на всех экранах продукта. Если кнопка «Сохранить» синяя и справа на одном экране, на остальных она выглядит и ведёт себя так же.
4. Обратная связь. Интерфейс сообщает о результате каждого действия. После нажатия «Оплатить» появляется спиннер, затем экран «Оплата прошла» с галочкой: пользователь не гадает, прошла ли транзакция.
5. Визуальная иерархия. Размер, контраст и расположение элементов подчёркивают главное. Цена товара крупная, кнопка «Купить» выделена цветом, условия возврата уходят вниз мелким шрифтом: глаз идёт по нужному маршруту сам.
6. Доступность. Приложения, которые обходят стандарт WCAG (Web Content Accessibility Guidelines) 2.2, теряют часть аудитории: людей со слабым зрением или с моторными ограничениями. Минимальный порог по WCAG AA: контраст текста к фону 4,5:1, подписи к иконкам для скринридеров.

Как понять, что интерфейс удобный? Замер удобства строится на трёх сигналах. Смотрят время выполнения целевого действия, процент ошибок при юзабилити-тестировании (usability testing) и оценку по шкале SUS (System Usability Scale). Показатель SUS выше 70 из 100 считается приемлемым.

Разбор конкретных промахов собран в статье про частые ошибки в интерфейсах.