Что такое UX и чем он отличается от UI
Расставляем все точки над i в большом гайде
Ну казалось бы, что тут сложного: UX — это юзер экспириенс, или то, как пользователи взаимодействуют с продуктом, а UI — юзер интерфейс и то, как этот продукт выглядит. Спутать, вроде бы, невозможно. Но понятия не живут отдельно друг от друга: они работают в тандеме. Из-за этого возникает путаница: за что должен отвечать UX-дизайнер, а за что — UI-специалист, могут ли эти роли сочетаться в одном человеке и что вообще таят в себе эти простые на вид понятия.
Сегодня — разберемся. Начнем с того, как вообще появился UX, изучим разницу между терминами UX, UI и юзабилити и узнаем, могут ли навыки UX и UI сочетаться в одном специалисте.
Сегодня — разберемся. Начнем с того, как вообще появился UX, изучим разницу между терминами UX, UI и юзабилити и узнаем, могут ли навыки UX и UI сочетаться в одном специалисте.
Откуда взялся UX
UX может казаться выходцем из 2010-х, но на деле он куда старше — из 1988-го, когда Дональд Норман, сооснователь Nielsen Norman Group и теперь уже бывший вице-президент Apple, впервые ввел этот термин в своей книге «Дизайн привычных вещей». Он писал, что UX — пользовательский опыт — шире, чем просто юзабилити или пользовательские интерфейсы.
Один из самых популярных примеров плохого UX — так называемые «двери Нормана»: такие, которые вряд ли получится открыть с первого раза, потому что непонятно, тянуть их или толкать.
Тянуть или толкать? Дверь Нормана (источник)
После появления UX как термина, он быстро стал частью дизайн-процесса при создании продукта и стал эволюционировать.
UX в каскадной модели разработки
Как только понятие UX сформировалось, пользовательский опыт стал решающим фактором в создании продукта и встроился в каскадную модель. Чтобы проработать UX, нужно было пройти через последовательные шаги:
После запуска продукта дизайнеры собирали обратную связь от пользователей и возвращались к первому шагу для внедрения улучшений.
- исследование, определение и категоризация проблем;
- проработка целевых персон и CJM;
- создание гипотез, разработка прототипов, тестирование;
- разработка продукта по выбранному прототипу.
После запуска продукта дизайнеры собирали обратную связь от пользователей и возвращались к первому шагу для внедрения улучшений.
UX в Agile
Чем быстрее становился прогресс и чем сильнее развивались технологии, тем менее жизнеспособной становилась каскадная модель. Вместо неё требовался более быстрый подход, при котором продукт можно было предоставить пользователям всего за несколько недель. Так UX подружился с Agile, который фокусируется на быстрых итерациях.
Но дружба оказалась недолгой: от UX-дизайна требовалось уместиться в сжатые сроки разработки, но впихнуть в них полноценные исследования и тестирование перед запуском не получалось. Так UX стал тормозить быстрый процесс создания продукта и блокировать развитие клиентского бизнеса, поэтому компании начали отказываться от него. Вместо специалистов, которые занимались исследованиями и тестами перед запуском продукта, они просто нанимали графических дизайнеров, которые «шлепали» красивые макеты за пару недель.
Но дружба оказалась недолгой: от UX-дизайна требовалось уместиться в сжатые сроки разработки, но впихнуть в них полноценные исследования и тестирование перед запуском не получалось. Так UX стал тормозить быстрый процесс создания продукта и блокировать развитие клиентского бизнеса, поэтому компании начали отказываться от него. Вместо специалистов, которые занимались исследованиями и тестами перед запуском продукта, они просто нанимали графических дизайнеров, которые «шлепали» красивые макеты за пару недель.
Эра UX/UI-дизайнеров
Чуть позже Agile породил гибрид под названием UI/UX Designer. Решение — рабочее и классное, но имевшее и негативные последствия. Восприятие пользовательского опыта сильно исказилось: UX стали чаще связывать с визуальными эффектами, чем с проработкой и улучшением опыта. Такой перекос местами сохраняется и сейчас.
Lean UX как решение проблемы
Классический UX — процесс создания продукта, основанный на требованиях. Lean UX больше ориентирован на результат. Этот подход в 2013-м изобрели Джефф Готельф и Джош Сейден — он включает стратегии и методы, с которыми UX можно применять в быстро меняющейся Agile-среде.
Но и у этой концепции есть свои проблемы: недостаточная проработка продукта на старте часто приводит к потерям (это и застопорившиеся проекты, которые так и не выстрелили и не ушли в разработку, и бесконечные правочки по дизайну).
Но и у этой концепции есть свои проблемы: недостаточная проработка продукта на старте часто приводит к потерям (это и застопорившиеся проекты, которые так и не выстрелили и не ушли в разработку, и бесконечные правочки по дизайну).
Google Ventures на смену всем концепциям
Подход Google Ventures предложил использовать дизайн-спринт — короткий пятидневный процесс, состоящий из идеи, создания быстрой версии продукта, ее запуска и обучения на основе реального пользовательского опыта. Концепция стала хитом, потому что способна решать критические бизнес-задачи быстро и с минимальными потерями.
Теперь дизайнеры могут быстро протестировать свои решения вместо того, чтобы убеждать всех в верности гипотез, а бизнес — быстрее получает результаты и внедряет улучшения.
Но даже самые рабочие концепции не избавляют от недопонимания, а что же в себя включает пользовательский опыт и чем он не является. И тут на помощь спешат мемы :)
Теперь дизайнеры могут быстро протестировать свои решения вместо того, чтобы убеждать всех в верности гипотез, а бизнес — быстрее получает результаты и внедряет улучшения.
Но даже самые рабочие концепции не избавляют от недопонимания, а что же в себя включает пользовательский опыт и чем он не является. И тут на помощь спешат мемы :)
Что такое UX на самом деле
Дональд Норман изначально определил UX как концепцию, которая охватывает все аспекты взаимодействия человека с продуктом: вместе с дизайном, интерфейсом, физическим взаимодействием и руководством для пользователей.
В сети годами гуляет мем, который иллюстрирует роль UX в продукте:
В сети годами гуляет мем, который иллюстрирует роль UX в продукте:
Знаменитый мем, который постили все и всюду. Например, издание UX Magazine в своем LinkedIn
Но некоторые UX-дизайнеры с ним не согласны. Дело в том, что UX — это не что-то отдельное, а непрерывный целостный процесс. В подтверждение этому они отфотошопили мем так, как считали правильным.
Слева — неочевидный дизайн, справа — пользовательский опыт (он же UX)
Почему это правильнее? Потому что UX — это процесс, а значит, изначальный мем иллюстрирует только часть пути развития продукта.
Скорее всего, история его развития была такой: жил-был продукт — вымощенные дорожки и зеленый газон вокруг (изображение 1 ниже). Его выпустили в свободное плавание, и им стали пользоваться люди. Но не так, как предполагали создатели: вместо вымощенной дорожки они ходили по газону, потому что так короче и удобнее (изображение 2). После такой обратной связи команда решила дать пользователям MVP — временную тропинку из гравия. Новую версию продукта отдали пользователям: те оценили и стали ходить по гравийке без зазрения совести (изображение 3). Тогда команда изменила продукт и в новой итерации сделала из гравийной тропинки полноценную вымощенную дорожку (изображение 4).
Скорее всего, история его развития была такой: жил-был продукт — вымощенные дорожки и зеленый газон вокруг (изображение 1 ниже). Его выпустили в свободное плавание, и им стали пользоваться люди. Но не так, как предполагали создатели: вместо вымощенной дорожки они ходили по газону, потому что так короче и удобнее (изображение 2). После такой обратной связи команда решила дать пользователям MVP — временную тропинку из гравия. Новую версию продукта отдали пользователям: те оценили и стали ходить по гравийке без зазрения совести (изображение 3). Тогда команда изменила продукт и в новой итерации сделала из гравийной тропинки полноценную вымощенную дорожку (изображение 4).
Благодаря пристальной работе с UX появилось множество удобных штук:
- Клавиатура QWERTY — родилась из-за проблемы в первых пишущих машинках. Те имели серьезный недостаток: если быстро нажать две буквы рядом друг с другом, машинку заклинивало. Чтобы этого не происходило, создатели привычной нам раскладки определили наиболее используемые буквы и разделили их на клавиатуре между другими.
- Умная подстановка текста: T9 и другие технологии интеллектуального ввода текста позволили нам тратить меньше времени на печать символов и исправление ошибок.
- Устройства для чтения электронных книг: с ними можно настраивать шрифт и яркость и больше не покупать не и носить с собой тяжелые бумажные книги.
UX, UI, юзабилити — в чем разница?
UX часто смешивают с юзабилити (простотой взаимодействия с продуктом) или UI — дизайном пользовательского интерфейса, который фокусируется на внешнем виде продукта. И это не совсем верно.
UX-дизайн — это целостный процесс создания продукта, который удовлетворяет потребности пользователей и бизнеса. Он предусматривает работу над информационной архитектурой, дизайном, контентом и прочими важными составляющими полезного опыта. Юзабилити и интерфейс — тоже части UX, которые появляются в продукте на более поздних этапах.
Соотношение трех понятий может выглядеть, как на изображении ниже: наравне с UI и юзабилити в UX также входят исследования, целевые персоны, интервью, информационная архитектура, контент и тестирование. Порядок действий, как правило, важен: начинаем с исследований, заканчиваем тестированием.
UX-дизайн — это целостный процесс создания продукта, который удовлетворяет потребности пользователей и бизнеса. Он предусматривает работу над информационной архитектурой, дизайном, контентом и прочими важными составляющими полезного опыта. Юзабилити и интерфейс — тоже части UX, которые появляются в продукте на более поздних этапах.
Соотношение трех понятий может выглядеть, как на изображении ниже: наравне с UI и юзабилити в UX также входят исследования, целевые персоны, интервью, информационная архитектура, контент и тестирование. Порядок действий, как правило, важен: начинаем с исследований, заканчиваем тестированием.
Как соотносятся UX, UI и юзабилити
Если совсем коротко, то UX — это логика взаимодействия пользователя с продуктом, а UI — то, как этот продукт выглядит. Поэтому у UX и UI разные задачи и разные результаты работы:
Задачи UX
— Исследование пользователей продукта: их потребностей, целей и мотивов.
— Создание целевых персон для помощи в развитии проекта.
— Интервью со стейкхолдерами для понимания целей и задач продукта.
— Интервью с пользователями (в том числе, глубинные).
— Составление карты путешествия пользователей, чтобы понимать их действия и контекст.
— Юзабилити-тесты для обратной связи.
— A/B-тесты для оценки гипотез.
— Поиск и выявление узких мест и гипотезы, как их улучшить.
— Базовая информационная архитектура.
— Проработка интерфейса и создание прототипов продукта.
— Создание продукта в связке с разработчиками.
— Исследование пользователей продукта: их потребностей, целей и мотивов.
— Создание целевых персон для помощи в развитии проекта.
— Интервью со стейкхолдерами для понимания целей и задач продукта.
— Интервью с пользователями (в том числе, глубинные).
— Составление карты путешествия пользователей, чтобы понимать их действия и контекст.
— Юзабилити-тесты для обратной связи.
— A/B-тесты для оценки гипотез.
— Поиск и выявление узких мест и гипотезы, как их улучшить.
— Базовая информационная архитектура.
— Проработка интерфейса и создание прототипов продукта.
— Создание продукта в связке с разработчиками.
Задачи UI
— Детальная проработка информационной архитектуры.
— Создание макетов, с которыми будут взаимодействовать пользователи.
— Создание адаптивного дизайна.
— Разработка элементов пользовательского интерфейса (кнопки, иконки, жесты для приложений).
— Подбор типографики и цветовой палитры.
— Проработка интерактивности элементов интерфейса (что происходит с кнопками при нажатии и т. д.).
— Подбор и проработка анимаций элементов.
— Создание гайдлайна со всеми элементами пользовательского интерфейса.
— Детальная проработка информационной архитектуры.
— Создание макетов, с которыми будут взаимодействовать пользователи.
— Создание адаптивного дизайна.
— Разработка элементов пользовательского интерфейса (кнопки, иконки, жесты для приложений).
— Подбор типографики и цветовой палитры.
— Проработка интерактивности элементов интерфейса (что происходит с кнопками при нажатии и т. д.).
— Подбор и проработка анимаций элементов.
— Создание гайдлайна со всеми элементами пользовательского интерфейса.
Результаты UX
— Карта сайта.
— Дизайн-система.
— Прототипы и вайрфреймы.
— CJM.
— Аналитика на основе отзывов пользователей и интервью с ними.
— Карта сайта.
— Дизайн-система.
— Прототипы и вайрфреймы.
— CJM.
— Аналитика на основе отзывов пользователей и интервью с ними.
Разница между UX и UI наглядно показана на одной из самых популярных интернет-картинок с кетчупом Хайнц. Слева — просто красивая классическая бутылка, которая выглядит стильно, но доставляет проблемы пользователю: кетчуп тяжело выложить на тарелку. Справа — такая упаковка, которая решает эту проблему.
UX и UI на примере кетчупа Хайнц
Опять же, не все дизайнеры согласны с такой аналогией. Но если посмотреть на ключевые отличия UX и UI, то вот они:
UX-дизайн
Ощущение от продукта. Общее впечатление от опыта с продуктом.
Прототип. Логическая основа продукта для удобства пользователей.
Верхнеуровневая структура. Работает с логикой, формой и идеей продукта и гарантирует продуманность и последовательность.
Ощущение от продукта. Общее впечатление от опыта с продуктом.
Прототип. Логическая основа продукта для удобства пользователей.
Верхнеуровневая структура. Работает с логикой, формой и идеей продукта и гарантирует продуманность и последовательность.
UI-дизайн
Взгляд на продукт. То, как продукт выглядит и удобный ли у него интерфейс.
Визуал. Работа с вовлеченностью пользователя через визуал.
Детальная проработка. Работает с отдельными страницами, кнопками и действиями пользователя и гарантирует вылощенный внешний вид и четкую функциональность.
Взгляд на продукт. То, как продукт выглядит и удобный ли у него интерфейс.
Визуал. Работа с вовлеченностью пользователя через визуал.
Детальная проработка. Работает с отдельными страницами, кнопками и действиями пользователя и гарантирует вылощенный внешний вид и четкую функциональность.
Итого: UX делает интерфейсы полезными, а UI — красивыми. Когда про пользу, ощущения от продукта, его удобство и внешний вид не думают, получается нечто неудобное и бесящее. Отличный, пусть и старинный пример такой непродуманности от российского гуру интерфейсов Ильи Бирмана — домофоны. Глядя на них часто вообще непонятно, что нужно нажимать и в каком порядке, чтобы тебе открыли. Очевидно, про UX и UI создатели не слышали.
Типичный домофон. Пример Ильи Бирмана (источник)
UX- и UI-специализация: вместе или раздельно?
Обычно выделяют три разные роли, относящиеся к дизайну UX и UI:
- UX-дизайнер, он же — продуктовый дизайнер;
- UI-дизайнер, он же — дизайнер пользовательского интерфейса;
- UX/UI-дизайнер — универсал, который умеет и в UX, и в UI.
Иногда в разработке продукта участвуют и другие люди: например, вместо UI-дизайнера — UI-разработчик, а также разработчик приложений и графический дизайнер. У каждого из них — свой фронт работ.
Процесс создания продукта и его участники
Другая распространенная практика — UI-задачи отдают молодым специалистам, чтобы те оттачивали умения в визуальном дизайне, а за UX отвечают ведущие дизайнеры и арт-директоры, потому что у них уже есть опыт и видение продуктов. При этом за исследования и интервью может отвечать вообще третий человек — аналитик (или даже UX-аналитик).
Сейчас есть тренд на стирание границ между UX- и UI-ролями: дизайнерам приходится сочетать в себе навыки и UX, и UI, а также разбираться в продуктовой разработке. Это очень похоже на эволюцию ролей в разработке:
- сначала были веб-мастера, которые в одиночку могли собрать сайт;
- потом появились фронтендеры и бэкендеры, и каждый занимался своим делом;
- сейчас четкого деления снова нет: кодер должен одинаково хорошо понимать и во фронте, и в бэке, и может выполнять разные задачи.
Короче
- UX — пользовательский опыт — шире, чем просто юзабилити или пользовательские интерфейсы.
- UX — это логика взаимодействия пользователя с продуктом, а UI — то, как этот продукт выглядит.
- UX, больше чем просто юзабилити или пользовательские интерфейсы и включает в себя анализ и исследования пользователей, интервью, построение информационной архитектуры, проработку контента, UI и юзабилити, а также тестирование.
- UI отвечает за визуальную часть продукта (цвета, шрифты, иконки, анимации, жесты и интерфейс в целом).
- UX — это непрерывный процесс.
- UX определяет цель и полезность продукта. UI — качество взаимодействия пользователя с продуктом.
- UI — это средство, которое приводит нас к желаемому результату от использования продукта, UX — это ощущение от процесса пользования им.
- UX может не работать, если есть бюджетные ограничения, недопонимание, давление со стороны заинтересованных сторон, которые сжимают сроки работы над проектом и заставляют отказываться от важных составляющих UX (например, от исследований или тестирования).