Koval
Web
Production

Суть UX и UI дизайнов: их понятия и отличия

Время чтения 8 мин.
Читать статью

Что первое приходить на ум при упоминании слова “дизайн”? Красота, эстетичность, стиль? Точно что-то про внешний вид. Но сайты создаются не для выставки и любования, а для зарабатывания денег. Поэтому задача веб-дизайнера подтолкнуть посетителя к целевому действию. Для этого нужно чтоб веб-ресурс был понятным, удобным, отзывчивым, ну и привлекательным тоже.

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

Так на рынку появилось разделение на UX и UI дизайн.

И так, что такое UX/UI и чем они отличаются, читайте дальше.

Что такое UX?

UX (англ. user experience) — пользовательский опыт.

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

Основная задача — изучить поведения посетителя и найти лучший способ отображения элементов на веб-площадке.

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

Что конкретно делает UX-специалист:

  • изучает целевую аудиторию (берет интервью, тестирует, смотрит за реакциями, составляет портрет).
  • анализирует статистику площадки (ищет проблемные зоны, где и почему гости уходят).
  • продумывает варианты пользовательских сценариев (связи между страницами и элементами интерфейса, их расположение, логику и последовательность).
  • разрабатывает вайрфреймы, мокапы и прототипы.
  • проводит А/В тестирование прототипов.
Вайрфреймы — черно-белый, без детализации план веб-проекта. Показывает в общих чертах Что? Где? Как?Мокапы — план, который передает стиль, «характер» задания. Тут есть цвет, картинки, информационная структура.Прототипы — интерактивный образец с помощью которого можно проводить юзабилити-тестирования. Нажимаются кнопки, работают всплывающие окна.

Например, как разрабатывали UX-дизайн навигации в компании Uber для водительского приложения.

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

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

Так понятие UX-дизайна это про маркетинг, психологию, инженерию и в некой степени программирование.

Что такое UI?

UI (англ. user interface) — пользовательский интерфейс.

UI — работа над внешним видом.

Задача — сделать интерфейс удобным, понятным и красивым.

Цель — создать веб-продукт на котором клиент быстро, без проблем решит свою задачу. Формирование узнаваемости бренда с помощью единого стиля.

 Что делает UI-специалист:

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

То есть, отслеживает чтоб был удобный размер окна, хорошо видима кнопка, читабельный шрифт,  понятная форма обратной связи, красиво ли смотрится.

 7 слов на «П», что описывают требования к UX/UI дизайну

  1. Привлекательность. Дизайн, который интригует и нравиться. Нет раздражительных цветов, постоянно всплывающих окон. Все сделано со вкусом.
  2. Понятность. “Вот корзина, а это кнопка купить, если нажму сюда, попаду в каталог, а если сюда, вернусь на главную». Клиент должен понимать все детали интуитивно. Не надо путать юзера и выдумывать велосипед, лучше использовать всем знакомые иконки, узнаваемые цвета.
  3. Простота. Нет лишних элементов, что отвлекают от конечной цели. На экране присутствуют объекты которые важны в данный момент.
  4. Продуманность. Вся информация, страницы, объекты структурированные, логично размещенные. Чтоб было легко находить ответы и достигать нужной цели.  
  5. Предусмотрительность. Позаботьтесь об ошибках клиента. Чтоб он легко смог отменить действие, вернуться обратно или узнать что пошло не так. Он будет вам благодарен, а поэтому лояльный.
  6. Продуктивность. Интерфейс должен экономить время и усилия. Поэтому к конечной цели посетитель должен дойти быстро и легко.
  7. Положительность. Манипуляции с продуктом должны вызывать приятный опыт, оставлять только хорошее впечатление.

Отличия UX и UI: расставляем четкие границы

Где должно быть меню интернет-магазина? Какие элементы должны присутствовать, а какие отвлекают внимание? Продумывание навигационных цепочек, чтоб посетитель понимал где он находиться и как вернуться к исходной точки либо на шаг обратно. Этим занимается UX-дизайнер.

Какой шрифт использовать для меню? Какой цвет? Как должны подсвечиваться ссылки на страницы? Как выглядят иконки панели навигации? Область заданий UI-дизайнера.

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

UI-дизайн — про видимую часть проекта. Как это должно выглядеть и сочетаться.

Если погуглить вакансии, то очень редко встречаются предложения на отделенную должность UI либо UX-специалиста. Чаще ищут универсального бойца, имя которому UI/UX-дизайнер.  И грань между ними стирается, поэтому часто не понимают их отличие.

В UX идет упор на понимание человеческого поведение, его мышления, нужд и хотелок. UI — это про графику, цвета и красоту, на основе данных предоставленных UX-дизайнером. 

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

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