Знаете ли вы, что UI (user interface — пользовательский интерфейс) и UX  (user experience — опыт взаимодействия) — это разные понятия? Конечно, они тесно связаны, пересекаются и редко существуют друг без друга. Хотите понять различия между дизайном UI и UX в деталях? Эта статья дает вам такую ​​возможность.

Авторы статьи считают, что невозможно стать экспертом в области веб-дизайна без ясного понимания обоих терминов. В этом материале вы найдете самые разные определения и объяснения: веселые, серьезными и глубокие. Приятного чтения. 

Определения

Начнем с определения. Нам будет проще идти дальше, четко понимая о чем мы говорим.

UI

Согласно Википедии, UI это разновидность интерфейсов, в котором одна сторона представлена человеком (пользователем), другая — машиной/устройством. Представляет собой совокупность средств и методов, при помощи которых пользователь взаимодействует с различными, чаще всего сложными, машинами, устройствами и аппаратурой.

Другими словами, пользовательский интерфейс является системой, посредством которой люди (пользователи) взаимодействуют с машиной. Пользовательский интерфейс включает в себя два компонента: оборудование (физический компонент) и программное обеспечение (логический компонент). Существуют интерфейсы для различных систем. UI являются средством для выполнения двух типов взаимодействия:
— ввод (Input), позволяющий пользователям управлять системой;
— вывод (Output), позволяющий системе демонстрировать эффект от произведенных пользователем манипуляций.

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

В компьютерную эру термин «пользовательский интерфейс» как правило, предполагает графический интерфейс пользователя, однако изначально речь идет о панелях управления в промышленных отраслях.

• Типы  UI

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

1. Графический интерфейс пользователя (GUI). Пользователь осуществляет операцию ввода через устройства, такие как компьютерная клавиатура и мышь, а машина и обеспечивает графический вывод на мониторе компьютера.
2. Веб-интерфейс (WUI). Это совокупность средств, при помощи которых пользователь взаимодействует с веб-сайтом или любым другим приложением через браузер. Новые реализации используют Java, JavaScript, AJAX, Adobe Flex, Microsoft. NET , или аналогичные технологии. С их помощью возможен контроль в режиме реального времени, что исключает необходимость обновления, состоящую в основе HTML-браузеров.
3. Административные веб-интерфейсы. Используются для работы с серверами и удаленными компьютерами. Часто называются панелью управления.
4. Сенсорные экраны. Это дисплеи, принимающие ввод при касании пальцами или стилусом . Используется в мобильных устройствах, уличных автоматах различных типов и т. д.

Разработка UI — это создание интерфейса, который обеспечивает самый лучший, простой, приятный и не обременяющий способ взаимодействия пользователя с продуктом. Большую часть работы во время создания интерфейса составляет наблюдение за поведением пользователя, что позволяет принимать решения, основанные на собранных данных. Создание UI по сути ремесло, ведь вы создаете нечто красивое и вполне конкретное, используя навыки, знания и методы, полученные в результате опыта. В своей работе некоторые дизайнеры пользовательского интерфейса применяются такие инструменты как Photoshop, Illustrator, Fireworks, Cinema 4D, ZBrush, а также ручку и бумагу. Однако чтобы стать хорошим дизайнером UI необходимо понимать что такое UX.

UX

UX, или опыт взаимодействия предполагает поведение человека, его отношение, и эмоции вызванные и связанные с использованием продукта, системы или услуги. Опыт взаимодействия включает в себя практические, основанные на опыте, эффективные, значимые и ценные аспекты взаимодействия человека с компьютером или продуктом. Кроме того, UX включает в себя восприятие пользователем характеристик системы, таких как полезность, простота использования и эффективность. Опыт взаимодействия носит субъективный характер, ведь речь идет о индивидуальном восприятии и оценке системы. UX — понятие непостоянное, ведь его параметры постоянно изменяются вместе с системами, обстоятельствами, технологиями и т. д. Разработка UX начинается с определения вашей базового контингента и создания целевого «пользователя» и его характеристик. Основываясь на этих знаниях вы можете вывести специальные требования к разрабатываемому проекту. Разрабатывается информационная архитектура и проектируется иерархия содержимого, что очень помогает на этапе прототипирования. Далее выбирается наиболее оптимальный метод прототипирования. Он должен быть достаточно экономичным, однако и эффективным настолько, чтобы была возможность сбора обратной связи в быстрой и легкой форме. Прототипы в данной области бывают:

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

После выбора типа прототипа начинается процесс итерации. Он сильно разница в зависимости от того, что разрабатывается — программное обеспечение, услуга или промышленный дизайн-проект.

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

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

На самом деле довольно трудно отделить эти два понятия, поскольку они очень тесно связаны. UI часто является частью UX. Тем не менее, UX может существовать даже без пользовательского интерфейса. Может показаться, что вы оказались в «Зазеркалье» Льюиса Кэрролла и все это игра слов, загадки и игры разума, однако все проще чем кажется. Ниже вы найдете список различий между дизайном UI и UX, составленный со слов профессиональных веб-разработчиков.

Перед тем как перечислить отличия, давайте подчеркнем сходство между «дизайном UI» и «дизайном UX»

1. Оба могут быть применены к (почти) любому продукту.
2. Оба решают задачи, связанные с дизайнерским аспектом продукта.
3. Оба ориентированы на комфорт пользователя.

Теперь перейдем к обещанным различиям.
UI это… (Звучит как текст из вкладышей в жвачку “Love is…”):

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

Теперь давайте выберем правую дорожку и узнаем что говориться о UX!

• UX может охватывать широкий спектр областей: от промышленного дизайна до архитектуры
• Дизайн UX дает мало информации о дизайне UI
• Дизайн UX показывает насколько удобно приложение для пользователя
• UX дизайн имеет дело с общим впечатлением, связанным с использованием продукта или услуги
• UX является результатом комбинирования прямых и косвенных взаимодействий с брендом
• UX отвечает за функциональность веб-сайта
• UX может быть улучшена за счет улучшения интерфейса
• UX дизайн имеет дело с общим впечатлением, связанным с использованием продукта или услуги, которые могут включать в себя пользовательский интерфейс
• Дизайн UX — это эмоции
• UX — это то, что вы запоминаете
• UX дизайн это создание опыта использования с точки зрения пользователя, с целью произвести влияние или вызвать эмоции. UX определяет и ограничивает дизайн пользовательского интерфейса, а также то, с чем пользователь может взаимодействовать. Это должно приводить к улучшению дизайна пользовательского интерфейса
• UX дизайн это то, как программа работает, как люди взаимодействуют с ней, с ее информационной архитектурой, какова ее юзабилити и т.д. Дизайнер пользовательского интерфейса создает дизайн исходя от конструкции UX
• UX — это то, что чувствует пользователь, когда заходит на веб-сайт
• UX является следствием использования продукта
• UX дизайн это «термин-зонтик». Он охватывает широкий спектр процессов и навыков , которые формируют опыт работы пользователя с продуктом. К ним относятся: исследования, юзабилити, информационная архитектура, дизайн взаимодействия, визуальный дизайн, содержание
• UX является следствием манипуляций и взаимодействия с вашим UI
• UX — это эмоции, чувства и опыт
• UX это большая картина, сочетающая дизайн, юзабилити и архитектуру
• UX — это опыт, полученный в результате использования продукта. На UX могут влиять другие составляющие, такие как UI, так что они не могут разрабатываться отдельно друг от друга. К примеру, прокручивание в самый низ страницы для добавления вопроса — это решение из области UI, которое ухудшает результаты UX
• UX представляет собой сочетание всех элементов веб-сайта, в том числе теории цвета и навигации, которые составляют конечный опыт пользователя. Хотя многие дизайнеры UX умеют обращаться с кодом, чаще всего они выступают креативными директорами проекта
  
• UX это то, как клиенты взаимодействуют с продуктом с точки зрения таких категорий как простота в использовании, удобность навигации, выполнение задач, брендинг и т.д. 
• Опыт взаимодействия это любовь
• При проектировании опыта взаимодействия важно учесть психологическое состояние пользователя, когда он пытаются выполнить задачу
• UX делает кнопку достаточно большой, так что конечный пользователь видел это на первый взгляд
• UX — это то, как чувствует себя пользователь, когда смотрит на сайт
• UX это взаимодействие само по себе
• Дизайн UX — это любой аспект опыта взаимодействия пользователя с системой, в том числе интерфейс, графика, промышленный дизайн, физическое взаимодействие и руководство
• UX — это новый термин для понятия юзабилити, который позволяет некоторым людям почувствовать себя умнее.
• В UX много стратегии
• UX использует более широкий подход, и учитывает намного больше факторов, чем UI. Часто вам приходится иметь в виду культурные факторы, организационных факторы и т.д. Таким образом, вы разрабатываете весь пользовательский опыт — не только пользовательский интерфейс. Полный опыт, к примеру, может включать обращение в службу поддержки клиентов при помощи письма с обычной почты и т.д. 
• UX = ввод информации
• UX — это то, как продукт заставляет вас чувствовать себя
  
• UX — это решение о том, как расположить элементы, основываясь на приоритетах
• UX может выражается удовольствием пользователя, удовлетворением и даже социальным аспектом работы с продуктом
• UX это прежде всего опыт
• UX представляет собой комбинацию различных интерфейсов, и UI — один из них

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

Вывод

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

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

Автор статьи Helga Moreno

Перевод Дежурка

Смотрите также:

• Юзабилити сайта: распространенные ошибки
• В поисках личности вашего бренда
• Стереотипы индустрии веб-дизайна и веб-разработки