Назад
Про разницу между UI и UX

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

«UI» и «UX» чаще всего используются в связке (например, UI/UX, UI-UX или UI & UX) — значит ли это, что они отражают одни и те же процессы и зоны ответственности? Есть ли какая-то разница между UI и UX дизайном? В чём заключаются услуги UI/UX? Отвечаем на все вопросы и развеиваем ошибочные суждения — раз и навсегда. Айда читать!

Погружаемся в суть

Ну а как по-другому-то, если хотим узнать разницу между UI и UX?

UX — это про взаимодействие пользователя с продуктом. Это про то, как сделать так, чтобы каждый открыл приложение и сходу разобрался, как оно работает.

READ MORE  Разработка MVP: когда именно вам нужен UX-дизайнер?

Любой проект начинается с проработки UX-части. На этом этапе дизайнеры досконально штудируют продукты конкурентов, определяют потребности пользователей, их проблемы, а после приходят к пониманию, как наилучшим образом их решить. Такие UX-исследования позволяют продумать продукт, создать и протестировать прототипы и отказаться от заведомо нерабочих решений.

Про разницу между UI и UXЧем отличается UI от UX? UX — это скелет, UI — обертка

UI — это про то, как продукт выглядит, каким его воспринимает пользователь. Главная задача — создать интерфейс, который будет выделяться на фоне конкурентов. Глядя на который пользователь подумает: «Блин, кто так круто сделал?» Для этого в ход идут цвета, типографика, инфографика и анимация.

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

Получается, что разница между UI и UX заключается в рабочих процессах. А цель одна.

Анализируем процесс работы

Делать крутой UI/UX можно и нужно. Правда в том, что рабочие интерфейсы — это, главным образом, про синергию юзабилити и визуала. Чтобы понять в чем как ее достичь, давайте посмотрим как создается продуктовый дизайн у нас в Purrweb.

Первым в бой идет UX

Как говорили ранее, любой дизайн-проект начинается с UX-исследования.  Посмотреть, как сделаны продукты конкурентов, раскопать потенциальные «боли» юзеров — эти задачи должны быть закрыты уже на старте. Опустить этот этап нельзя — слишком велики риски сделать ровно то, что уже представлено на рынке. По-настоящему крутые и полезные приложения без вот такого анализа просто-напросто не случаются (впрочем, вы и сами все знаете).

READ MORE  Дизайн MVP: этапы, инструменты, результаты

После анализа конкурентов и целевого рынка, дизайнеры  переключаются на проработку информационной архитектуры. Планируют иерархию экранов и навигацию, которая расскажет пользователям обо всех функциях продукта. Созданная ИА позволяет взяться за low-fidelity вайрфреймы, базовый скелет будущего интерфейса с минимальным UI. По минимуму — это когда вместо изображений и кнопок используются плейсхолдеры.  

На этом этапе задач куча:

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

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

Про разницу между UI и UXТак мы в Purrweb разработали вайрфреймы и user flow для приложения Wishlist

А  UI выйдет? Выйдет!

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

Финальные штрихи — это добавление цвета и прорисовка всех оставшихся графических элементов.

Про разницу между UI и UXВот таким стал персональный вишлист после работы над визуальным дизайном

Пошагово это выглядит вот так:

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

Вот так вот разные процессы, которые составляют разницу между UI и UX, взаимодействуют между собой. Они взаимосвязаны и взаимозависимы.

Почему задачи по UI/UX дизайну может закрывать один человек?

UI и UX — два важных этапа в разработке продуктовых интерфейсов, каждый со своими правилами и инструментами.  Можно бесконечно говорить о разнице между UI и UX, но в конце концов все сводится к тому,  что UI и UX дизайн идут рука об руку. Любой UX-дизайнер обладает базовыми знаниями в UI, и наоборот — вот почему Google выдает вам кучу вакансий совмещающих в себе роль UI/UX.

READ MORE  Особенности разработки мобильного приложения для службы доставки: кейс B2B-сервиса Cargo

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

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