UX vs UI: в чем разница

Ольга Сорока, Янина Ноэль

Фото Charles Deluvio

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

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

В то же самое время оба эти элемента имеют решающее значение для конечного результата и не могут существовать друг без друга. В общих чертах, UX Design или User Experience Design — это аналитическая и техническая область разработки, в то время как UI Design или User Interface Design — то, что мы иногда ошибочно называем графическим дизайном. Хотя, на самом деле, все гораздо сложнее.

Представим, что наш будущий продукт — это дом. Фундамент, каркас, опоры и балки в нем — это программный код, который придает ему структуру и не дает развалиться на части. Стены, комнаты, дверные и оконные проемы — это измерение UX, оптимизация пространства для его максимально комфортного использования. И User Interface — это уже отделка стен, ламинат или кафель, все что создает внешний вид нашего дома и его уют для пользователей.

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

UX делает интерфейс полезным

Фото Charles Deluvio

User experience — это процесс определения проблем пользователя и решение этих проблем с целью повышения его удовлетворенности. Улучшение удобства использования, простота использования и удовлетворение, которое клиент получает при взаимодействии с продуктом, определяют качество и востребованность этого продукта.

Вы не замечаете результат работы UX дизайнера, пока все работает хорошо. Но если при работе с продуктом вы начинаете задаваться вопросом “Что же делать дальше, чтобы решить мою задачу?”, то вам попался плохой UX.

User experience — это настоящая наука, сродни архитектуре или психологии. В ее основе лежат исследования пользовательских групп, информационная архитектура, удобство использования, контент-стратегия. В результате объединения этих компонентов получают решение целей и задач тем способом, который имеет наибольший смысл для человека использующего конкретную функцию. UX дизайнер — это помощник для пользователя. Он выслушает и вникнет во все проблемы клиента лучше любого психолога, создаст самые благоприятные условия для достижения поставленных перед дизайном целей.

По сути, проблемы UX дизайна субъективны, так как, зачастую, связаны с индивидуальным восприятием какого-либо продукта или услуги, поэтому у одной проблемы может быть множество решений. Целью проектировщика является выбор наиболее удачного варианта, который подойдет максимальному количеству пользователей.

Разберем основные задачи UX дизайнера

  • Стратегия и структура. Проектировщики UX собирают и анализируют информацию о пользователях и основных конкурентах, определяют цели и пожелания клиентов, а также анализируют, как данные задачи уже решаются на рынке. На основе этого анализа находят наиболее удачный и гибкий способ решения для конкретного продукта. Вырабатывают структуру и стратегию работы приложения.
Фото Charles Deluvio
  • Варфреймы и прототипирование. На основе составленной стратегии прорабатываются варфреймы, из них создаются рабочие прототипы. Тестирование и разработка прототипов позволяет определить проблемные места и создать плавный процесс взаимодействия пользователя с интерфейсом.
  • Разработка и анализ. Работа UX проектировщиков не заканчивается на прототипе, они принимают участие в проекте на всех этапах разработки продукта координируя работу с разработчиками и дизайнерами интерфейса. Также они несут ответственность за реализацию целей продукта.

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

Итак, подведем итоги:

  • User experience design — это процесс проектирования и улучшения качественного взаимодействия между пользователем и приложением.
  • UX дизайнер занимается процессом исследований, тестирования, разработки, контента и прототипов, чтобы проверить качество результатов.
  • UX является нецифровой практикой, но используется и определяется преимущественно цифровыми индустриями.

UI делает интерфейс красивым

Фото Charles Deluvio

User Interface Design — это посредник между девайсом и человеком. Это не только внешний вид, но и интерактивность продукта.

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

Если UX — это наука, то UI — это искусство, которое фокусируется на всех элементах продукта, делающих его притягательным: цвета, стиль кнопок, графика, анимация, типография, инфографика, виджеты, поведение, отклики кнопок и так далее. UI-дизайнер несет ответственность за то, как пользователь будет воспринимать продукт с визуальной точки зрения. Он берет научные выводы и заключения UX дизайнера и превращает их в определенную форму искусства. Именно от него зависит то, каким мы увидим продукт в итоге. Удачное объединение иконографии, типографики, цвета, пространства и текстур поможет пользователю без труда ориентироваться в готовом приложении.

Пользователь должен чувствовать себя хорошо, используя продукт. Это зависит не только от интуитивно понятного интерфейса, но и от того, как этот интерфейс выглядит. 90% пользователей прекращают использовать приложение из-за плохого визуального дизайна.

Визуальный дизайн — это индивидуальность продукта. Он руководит ключевыми элементами, которые вызывают доверие к бренду.

На основании опыта в EGO Creative Innovations мы можем отметить, что основные задачи UI дизайнера включают:

  • Сторитейлинг. Для UI дизайнера очень важно понимать, как человеческий мозг реагирует на определенные визуальные сигналы. Например, показать пользователю что картинка, на которую они смотрят, это еще и кнопка, на которую можно нажать и получить дополнительную информацию. Задача UI дизайнера помочь пользователю правильно использовать приложение, опираясь на его визуальные элементы, и при этом используя как можно меньше слов.
  • Графика и анимации. Иллюстрации, различные графические элементы и плавные переходы создают ощущение особенности и уникальности. Помимо этого, дизайнеры пользовательского интерфейса могут быть задействованы в разработке логотипа, брендинга и других маркетинговых элементов для поддержания целостности образа продукта.
  • Отзывчивость. UI прототипирование, анимации и адаптивность — это те аспекты, которые обеспечат максимальный комфорт использования продукта на любых девайсах.

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

Фото Charles Deluvio

Подведём итоги:

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

На чем фокусируются дизайнеры UI и UX?

Фото Charles Deluvio

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

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

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

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

0
32 комментария
Написать комментарий...
Кроко

UI - это ваша еда на тарелке, а UX - это ваше состояние после ее употребления. Зачем усложнять.

Ответить
Развернуть ветку
Yanina Noel
Автор

А что тогда - процесс приготовления еды?

Ответить
Развернуть ветку
Кроко

Наслаждение :)

Ответить
Развернуть ветку
Сергей Бутко

"дизайнеры создают эмоции" - мне кажется это самое важное, они, как дирижеры внимания на сайте!

Ответить
Развернуть ветку
Yanina Noel
Автор

Да! Показали на примере визуала с мопсиком )

Ответить
Развернуть ветку
Evil Pechenka

Ну что я понял... На сайт нужно постить мопсиков.

Ответить
Развернуть ветку
Yanina Noel
Автор

А почему нет? :) Если контент на сайте средненький, то запомнят визуальную часть.

Ответить
Развернуть ветку
Valeriya Ivanova

Мопсики зачетные 👍🏻

Ответить
Развернуть ветку
Наталья Артемова

Такое ощущение, что в комментариях идет выполнение плана "зарегайся на виси и положительно прокомментируй эту статью"

Ответить
Развернуть ветку
Юрий Б.

А чем статья плоха? Ну, кроме мопсиков

Ответить
Развернуть ветку
Наталья Артемова

А я разве написала, что статья плоха? Статья норм, комментарии выглядят нагнанными :)

Ответить
Развернуть ветку
Юрий Б.

А ведь и правда: сходил в профили и убедился, что камент единственный тут у: Юля Соседова (Зарегистрировался час назад), Victoria Skorobahatko (Зарегистрировался час назад), Valeriya Ivanova (Зарегистрировался 21 мар 2017, что довольно неожиданно - впрок готовили виртуалов?), Сергей Бутко (Зарегистрировался 2 часа назад).

Выглядит, как говорится, подозрительно.

Ответить
Развернуть ветку
Оля Сорока

а ответ прост - я расшарила статью на фб и мои друзья откликнулись ;)

Ответить
Развернуть ветку
Yanina Noel
Автор

О! Спасибо за идею! А ведь и правда, 100 комментов можно купить совсем за маленькие деньги и куча предложений, типа commentor2000

Ответить
Развернуть ветку
Юрий Б.

Конечно, можно. Но если статью не комментирует сама исконная аудитория сайта, то может сложиться мнение, что статье тут не место.

Ответить
Развернуть ветку
Yanina Noel
Автор

Почему, многие же просто читают, но не логинятся, чтобы коментить. Даже New York TImes покупают китайских ботов, чтобы накручивать трафик и просмотры себе же на сайт :)

Ответить
Развернуть ветку
Yanina Noel
Автор

Юрий, плодотворного вам воскресенья! И не забудьте сеять негатив ;)

Ответить
Развернуть ветку
Юрий Б.

В обязательном порядке. Пишите ещё!

Ответить
Развернуть ветку
Victoria Skorobahatko

Очень полезная статья! Спасибо!!!!!

Ответить
Развернуть ветку
Yanina Noel
Автор

И вам спасибо за отзыв. Нам очень приятно!

Ответить
Развернуть ветку
Юля Соседова

спасибо, статья очень полезная, теперь вопросов в различии UX и UI не осталось

Ответить
Развернуть ветку
Yanina Noel
Автор

Юля, спасибо за отзыв. Нам очень приятно!

Ответить
Развернуть ветку
Bogdan Yosava

Понравилось сравнение с несущими конструкциями и внутр отделкой дома.
Думаю элементы отделки тоже если углубиться в вопрос содержат и UX и UI аспекты

Ответить
Развернуть ветку
Yanina Noel
Автор

Bogdan, спасибо за идею! Проанализируем и найдем партнеров на написание статьи про стройматериалы ))

Ответить
Развернуть ветку
Vitaliy Chehoff

UX дизайн рассмотрели слишком узко. UX - это проектирование клиентского опыта взаимодействия с компанией в целом, а не только определённым продуктом.
В целом, кратко, понятно, доступно и годно.

Ответить
Развернуть ветку
Yanina Noel
Автор

Спасибо, уже и забыла про статью. На vc охват маленький стал :(

Ответить
Развернуть ветку
Den Hardubernerd

Спасибо за статью, можете посоветовать посмотреть касаемо мобильного UX/UI, какие то доклады, конфы и принципы дизайна в целом? Спасибо.

Ответить
Развернуть ветку
Martha Wilson

s

Ответить
Развернуть ветку
Серафима Филипченко

Мопсики и морковки очень даже в тему! Реально создали настроение. Улыбалась пока читала)))

Ответить
Развернуть ветку
Ирина Карасева

— User interface design отвечает за перенос визуальных аспектов бренда на интерфейс продукта с целью его улучшения.

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

У вас одно и то же название написано

Ответить
Развернуть ветку
Тоже хочу

"UI ― это user interface, пользовательский интерфейс, проще говоря ― оформление сайта: сочетания цветов, шрифты, иконки и кнопки." - полный бред уровня школоты из skillbox.

UI это интерфейс, его задача обеспечить дотсуп к функционалу, а UX - сделать его удобным. А картинки - это графический дизайн.

Ответить
Развернуть ветку
Yanina Noel
Автор

О да! Мы старались старались сделать storytelling в картинках!

Ответить
Развернуть ветку
29 комментариев
Раскрывать всегда