Разница между UX и UI дизайном

«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»»https://www.behance.net/gallery/86523347/Social-Gift-Collections-App-UIUX»

Когда речь идет о разработке MVP (первой продуктовой версии) и ограниченном бюджете, важно следующее: не забить на UI или UX. А ещё не прогадать с наймом дизайнера. Найти человека, который сможет закрыть задачи “с обеих сторон” = сэкономить ресурсы.

А теперь подведем итог и выделим основные различия между UI и UX еще раз:

Если мы говорим про UX, то:

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

UI отличается от UX, так как:

• UI это про то, как продукт будет воспринят пользователем
• затрагивает только визуальную часть дизайна
• это забота о внешнем виде и интерактивном дизайне

Продукт с непроработанными флоу и крутым UI — такой себе вариант. Это же касается решений с крутым UX и дизайном из 00-x