«UI» и «UX» чаще всего используются в связке (например, UI/UX, UI-UX или UI & UX) — значит ли это, что они отражают одни и те же процессы и зоны ответственности? Есть ли какая-то разница между UI и UX дизайном? В чём заключаются услуги UI/UX? Отвечаем на все вопросы и развеиваем ошибочные суждения — раз и навсегда. Айда читать!
Погружаемся в суть
Ну а как по-другому-то, если хотим узнать разницу между UI и UX?
UX — это про взаимодействие пользователя с продуктом. Это про то, как сделать так, чтобы каждый открыл приложение и сходу разобрался, как оно работает.
Любой проект начинается с проработки UX-части. На этом этапе дизайнеры досконально штудируют продукты конкурентов, определяют потребности пользователей, их проблемы, а после приходят к пониманию, как наилучшим образом их решить. Такие UX-исследования позволяют продумать продукт, создать и протестировать прототипы и отказаться от заведомо нерабочих решений.
Чем отличается UI от UX? UX — это скелет, UI — обертка
UI — это про то, как продукт выглядит, каким его воспринимает пользователь. Главная задача — создать интерфейс, который будет выделяться на фоне конкурентов. Глядя на который пользователь подумает: «Блин, кто так круто сделал?» Для этого в ход идут цвета, типографика, инфографика и анимация.
На этапе создания UI дизайнер также может работать над логотипом и брендингом (фирменным стилем) — всем, что, так или иначе, отражает целостность продукта, его позиционирование. UI прототипирование, анимация и адаптивность — это те аспекты, которые обеспечивают комфортное взаимодействие с продуктом на любых девайсах.
Получается, что разница между UI и UX заключается в рабочих процессах. А цель одна.
Анализируем процесс работы
Делать крутой UI/UX можно и нужно. Правда в том, что рабочие интерфейсы — это, главным образом, про синергию юзабилити и визуала. Чтобы понять в чем как ее достичь, давайте посмотрим как создается продуктовый дизайн у нас в Purrweb.
Первым в бой идет UX
Как говорили ранее, любой дизайн-проект начинается с UX-исследования. Посмотреть, как сделаны продукты конкурентов, раскопать потенциальные «боли» юзеров — эти задачи должны быть закрыты уже на старте. Опустить этот этап нельзя — слишком велики риски сделать ровно то, что уже представлено на рынке. По-настоящему крутые и полезные приложения без вот такого анализа просто-напросто не случаются (впрочем, вы и сами все знаете).
После анализа конкурентов и целевого рынка, дизайнеры переключаются на проработку информационной архитектуры. Планируют иерархию экранов и навигацию, которая расскажет пользователям обо всех функциях продукта. Созданная ИА позволяет взяться за low-fidelity вайрфреймы, базовый скелет будущего интерфейса с минимальным UI. По минимуму — это когда вместо изображений и кнопок используются плейсхолдеры.
На этом этапе задач куча:
- брифы — документ, в котором зафиксирована основная информация о проекте — чтобы и дизайнер, и клиент знали, что к чему
- мудборды — сбор паттернов, узоровов, цветых палитр — чтобы дизайнер представлял внешний вид продукта и сделал именно то, что нужно клиенту
- рефы — просмотр продуктов с похожим функционалом — чтобы понять, как они выглядят и работают
- персоны — архетипическое представление потенциальных пользователей — чтобы представить процесс взаимодействия с продуктом конкретного человека
В нашей команде за них отвечает один дизайнер, но если работы становится слишком много (например, проект включает в себя слишком много фич и скринов), то подключаем второго. И здесь разница между UI и UX постепенно размывается.
Так мы в Purrweb разработали вайрфреймы и user flow для приложения Wishlist
А UI выйдет? Выйдет!
После low-fi прототипов дизайнер переключается на проработку hi-fi вайрфреймов и добавляют минимальный UI дизайн. На этом этапе прорабатываются сетки, отступы и типографика, в результате чего появляется интерактивный, максимально приближенный к финальному варианту интерфейса, прототип.
Финальные штрихи — это добавление цвета и прорисовка всех оставшихся графических элементов.
Вот таким стал персональный вишлист после работы над визуальным дизайном
Пошагово это выглядит вот так:
- продумывание каждого экрана, с которым будет взаимодействовать пользователь
- отрисовка кнопок, слайдеров, блоков, переключателей и других элементов
- проработка графических элементов в соответствии с фирменным стилем
- составление UI-китов для дальнейшей разработки
Вот так вот разные процессы, которые составляют разницу между UI и UX, взаимодействуют между собой. Они взаимосвязаны и взаимозависимы.
Почему задачи по UI/UX дизайну может закрывать один человек?
UI и UX — два важных этапа в разработке продуктовых интерфейсов, каждый со своими правилами и инструментами. Можно бесконечно говорить о разнице между UI и UX, но в конце концов все сводится к тому, что UI и UX дизайн идут рука об руку. Любой UX-дизайнер обладает базовыми знаниями в UI, и наоборот — вот почему Google выдает вам кучу вакансий совмещающих в себе роль UI/UX.
Когда речь идет о разработке MVP (первой продуктовой версии) и ограниченном бюджете, важно следующее: не забить на UI или UX. А ещё не прогадать с наймом дизайнера. Найти человека, который сможет закрыть задачи “с обеих сторон” = сэкономить ресурсы.
