Дизайн

UX vs UI. В чем разница?

01 июня 2020

Привет, мой маленький дизайнер! И не только дизайнер 🙂 это первая статья в моем блоге и я мог бы тут рассказать о себе, но для этого отдельно есть раздел на сайте “Обо мне”, где можно краткую рабочую информацию прочесть. 

 

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

 

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

  1. Я топлю за то, чтобы разделять понятия UX и UI в описании позиции и скиллов дизайнера.
  2. Нормальный подход к разработке проекта – это пройти все стадии: ресерч, прототипирование, тестирование и т.д. (об этом в деталях дальше), ибо эти грабли инвесторами проектов были исхожены вдоль и поперек, вот только “стороне заказчика” и дальше продолжает прилетать непонимание и, следовательно, недовольство командой разработки, когда после запуска они получают удар граблями по лицу и не только в виде непонятного интерфейса и ненужных фичей.

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

  1. Исследование (исследуется целевая аудитория, цели инвестора, рынок).
  2. Документируем наши исследования и формируем образ продукта и требования к разработке, разрабатываем архитектуру сервиса и многое-многое другое.
  3. Создаем прототип проект.
  4. Тестируем прототип (если необходимо – вносим правки в прототип после тестирования). 
  5. Разрабатываем пользовательский интерфейс (он же UI ин инглиш) – конечный дизайн.
  6. Дальше было бы неплохо еще раз его протестировать, дабы искоренить проблемы с восприятием и пониманием пользователями всех заголовков, внешнего вида компонентов и пр. (+ если вы замеряли метрики на предыдущем этапе тестирования, то сравнить насколько показатели стали лучше/хуже).
  7. Отдаем в разработку.
  8. Запускаем проект и начинается этап наблюдения (при помощи того же HotJar или прочих сервисов – тут выбирайте по вкусу и карману).
  9. Дальше могут начаться различные loop-тесты или полноценные A/Б тесты, зависит от того, что необходимо исправить/доработать.

 

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

 

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

 

После этого прототипируем (Axure, Figma, Sketch + InvisionApp или еще какой софт – тут кому как удобнее) и тестируем прототип на нашей ЦА (желательно все же метрики замерять для сравнения при тестировании конечного UI и на случай дальнейшей оптимизации со временем). Дальше вы знаете.

 

И даже после запуска продукта UX дизайнер не выключается из работы. Мы наблюдаем за поведением ЦА на сервисе (Яндекс.Метрика, HotJar, CrazyEgg или еще что – тут тоже на ваш выбор и толщину кошелька). Это необходимо для того, чтобы выявить проблемные зоны и при помощи loop-тестов попытаться их локально “подлечить” потом. 

 

Да, может быть еще А/Б тестирование потом, но там цикл почти в полном своем объеме повторяется, так что нет смысла повторяться. Есть еще отдельный набор задач, который называется “UX аудит” (ну или просто аудит – смотря насколько сильно нравится выделываться умными терминами), но об этом я потом отдельно напишу и он уместен в случае наличия какого-либо существующего решения (ибо вряд ли кто-то из конкурентов даст вам возможность залезть к ним в продукт и изучить его 🙂 ), т.е. не во всех проектах данный этап может быть. 

 

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

Почитай еще 3 последних статьи: