Какова разница между UI (user interface, пользовательский интерфейс) и UX (user eXperience, пользовательский опыт)?

Если бы у нас было 30 секунд на объяснение, мы бы дали такое блиц-описание.

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

Пользовательский опыт, с другой стороны, — это внутренний опыт, получаемый человеком при взаимодействии с каждым аспектом продукта компании.

Плохой UX: «Я ненавижу всех! Включая тебя!». Великолепный UX: «Люблю жизнь! И тебя! И щеночков!».

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

В 1970-е годы, если вам требовалась помощь компьютера, вы должны были использовать интерфейс командной строки, выглядевший следующим образом:

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

Затем в 1981 году группа специалистов в области вычислительной техники компании Xerox PARC разработала и запустила Xerox Star — персональный компьютер с самым первым графическим пользовательским интерфейсом (Graphical User Interface, GUI). Он использовал окна, иконки, раскрывающееся меню, (Radio Buttons) и чекбоксы (Checkboxes, флажки для выбора функций). Пользователи теперь могли открывать, перемещать и удалять файлы:

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

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

Команда компании Apple Computer продолжила свое развитие и расширение именно на базе идеи GUI. И в 1984 году они выпустили Macintosh, ставший первым коммерчески успешным десктопным компьютером. Он имел интерфейс с несколькими окнами и мышку, работавшую по принципу «наведи и кликни» (point-and-click).

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

Эта область развивалась на протяжении последних нескольких десятилетий, и она будет продолжать эволюционировать в будущем.

Проектировщики UI сегодня работают над веб-сайтами, приложениями, так называемыми «носимыми» гаджетами (wearables) и программами. Пожалуй, на них также лежит ответственность за возникновение таких вещей, как визуальные элементы страниц или экранов системы, а также дизайн интерфейса цифровых продуктов.

Что такое пользовательский опыт?

Термин «пользовательский опыт» был придуман ученым-когнитивистом Доном Норманом (Don Norman) в начале 1990-х, когда он был вице-президентом группы разработки новейших технологий в компании Apple.

Вот как звучит определение Нормана: «Пользовательский опыт охватывает все аспекты взаимодействия конечного пользователя с компанией, ее услугами и ее продукцией».

Объясняя происхождение термина, Норман писал:

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

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

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

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

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

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

  1. Процесс, через который они проходят, когда ищут продукт вашей компании.
  2. Последовательность действий, выполняемых ими при взаимодействии с интерфейсом.
  3. Мысли и чувства, возникающие у них при выполнении своей задачи.
  4. Впечатления, получаемые ими от взаимодействия в целом.

UX должен быть: полезным (useful), удобным (usable), востребованным (desirable), имеющим ценность (valuable), находимым (findable), доступным (accessible), вызывающим доверие (credible)

Обязанность UX-дизайнеров заключается в том, чтобы гарантировать: поставляемые компанией товары или услуги отвечают потребностям клиента и позволяют им беспрепятственно достичь желаемого результата. Чтобы добиться этого, дизайнеры могут обратиться к исследованиям для получения как можно большего количества информации о контексте взаимодействия пользователя с продуктом, чтобы затем с помощью этих сведений смоделировать структурные схемы (Wireframes) и прототипы (Prototypes), позволяющие пользователю добраться из точки А в точку Б.

Какова разница между UI и UX?

Дон Норман и Якоб Нильсен (Jakob Nielsen) кратко и понятно резюмировали разницу между двумя понятиями:

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

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

Еще одним удачным примером является Google. Его интерфейс очень прост. Он почти ничего не содержит — только логотип, строку поиска и несколько кнопок:

Но когда вы вводите что-либо в поле поиска, менее чем за секунду вы получаете доступ к почти полной базе человеческих знаний в оцифрованном виде:

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

Мнения

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

1. UX ориентирован на путь пользователя, ищущего решение своей проблемы, в то время как UI сфокусирован на том, как продукт выглядит и работает на внешнем уровне.

Кен Нортон (Ken Norton), один из партнеров в Google Ventures, бывший руководитель отдела по разработке новой продукции в Google:

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

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

Энди Бадд (Andy Budd), соучредитель компании Clearleft и основатель UX Лондон:

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

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

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

Джейсон Мисут (Jason Mesut) отлично описал разницу между UX и UI (а также и частичное совпадение их смыслов) в его «дважды бриллиантовой» модели (Double Diamond Model). Согласно этой модели, разработчик UX имеет глубокие познания в стратегии, практике исследований, информационной архитектуре и дизайне взаимодействия (Interaction Design).

UI-дизайнер (или, как теперь его принято называть в Кремниевой долине, дизайнер цифровых продуктов) также имеет навыки в области дизайна взаимодействия. Однако фокус его работы тяготеет больше к таким областям, как информационный дизайн (Information Design), «движущийся дизайн» (Motion Design) и брендинг.

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

3. Нет никакой разницы между UX- и UI-дизайном, потому это два несопоставимых понятия.

Крейг Моррисон (Craig Morrison), руководитель отдела по разработке продукции компании RecordSetter и основатель Usability Hour:

«Я слышу этот вопрос все время, и я много раз отвечал на него. В итоге я пришел к такому выводу.

Нет никакой разницы между UX- и UI-дизайном, поскольку эти две вещи не сопоставимы друг с другом. Это то же самое, что спрашивать, к примеру, какова разница между красной краской и химическими веществами, из которых состоит эта краска?

Нет никакой разницы.

Красную краску дает соединение различных химических веществ…

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

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

Какова разница между MacBook и формой клавиш?

Какова разница между чаем и видом материала, из которого сделан чайный пакетик?

Какова разница между автомобилем и цветом, в который он окрашен?

Если провести сравнение с вкусным тортом (а почему бы и нет?), UI будет глазурью, коржами, вкусом, способом подачи и оформления. UX же будет первопричиной того, почему мы вообще решили сделать торт и почему люди предпочтут его, скажем, гамбургерам».

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

Патрик Ниман (Patrick Neeman), начальник отдела дизайна продуктов компании Apptio, основатель Usability Counts:

«Дизайн пользовательского опыта охватывает весь опыт пользователя, даже вне экрана его компьютера. Дизайн пользовательского интерфейса, как правило, связан с визуальным и информационным дизайном, то есть с тем, что происходит на экране. Современное определение UX восходит к тому, что дала Nielsen Norman Group: UX — это любая точка контакта пользователя или клиента с системой, как в цифровом ее виде, так и в других проявлениях».

5. UI ориентирован на продукт и представляет собой серию визуальных характеристик за отрезок времени. UX фокусируется на пользователе и его пути «через продукт».

Скотт Дженсон (Scott Jenson), руководитель отдела стратегического развития продуктов в Google:

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

UX фокусируется на пользователе и его пути «через продукт».

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

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

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

Клейтон Янь (Clayton Yan), UX-дизайнер компании UserTesting:

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

Я всегда объясняю эту тему, используя аналогию со строительством дома. Когда вы строите дом, вы думаете о его планировке и расположении комнат.

Сколько спален вам нужно, 2 или 3? Будет ли каждая из этих спален иметь собственную ванную комнату? Будет ли гостиная располагаться сразу у входа? Будет ли дом одноэтажным или сделать два этажа?

Для меня UX представляет общий опыт и впечатление, получаемые от вашего дома (или продукта). Все ли имеет смысл? Как ваш пользователь чувствует себя при взаимодействии с продуктом?

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

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

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

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

А каково ваше мнение?

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

А что думаете вы? Какова разница между UI и UX? Могут ли они использоваться взаимозаменяемо или означают разные вещи?

Представляем новую статью серии . В этой части цикла рассмотрим позицию UX/UI дизайнера - специалиста, отвечающего за соответствие внешнего вида и логики продукта.

UX/UI дизайнер - специалист, который занимается проектированием пользовательских интерфейсов.

Типичный рабочий день включает в себя:

  • работу над приоритетными задачами (проектирование, отрисовка);
  • общение с заказчиком;
  • внесение правок.

Преимущества и недостатки

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

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

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

«Лично меня бесят тупые приложения, неудобные расположения кнопок в лифтах, непродуманные интерьеры автомобилей - мне нравится делать что-то, что может это улучшить. Этот мир настолько несовершенен (не природа - там все идеально и сбалансирвано), что для толкового дизайнера всегда найдется работа».

«Я училась на программиста-сисадмина, но всегда было интересно делать что-то в Фотошопе. Раньше не было такого количества туториалов, видеоуроков и статей, как сейчас, поэтому большинство функций и возможностей я осваивала методом тыка. Позже решила попробовать Иллюстратор, он был намного сложнее Фотошопа, но прекрасен для создания вектора. Мне нравится создавать что-то новое, что-то полезное и красивое, нравится улучшать и видеть достигнутый результат. Сфера дизайна позволяет всё это осуществлять. Интересно и то, как изменяются тренды, появляются новые программы и фичи, нужно всегда за всем этим следить и постоянно развиваться».

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

Еще один плюс - возможность работать удаленно ( 20% всех дизайнеров), большой выбор проектов на фрилансе.

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

«В 80-90% случаев приходится работать без ТЗ с требованиями типа: «Сделай мегакрасиво и мегаконфигурируемо».

«Недостатком профессии считаю отношение к дизайну и дизайнерам в Украине. Почему-то все считают, что если они когда-то открывали Фотошоп, то автоматически могут быть дизайнерами и самостоятельно решать, сколько времени уйдёт на дизайн. Особенно этим грешат неопытные менеджеры и программисты (один менеджер из новичков утверждал, что сделал бы задачу за 30 минут в Пейнте, но у него нет времени на художества)».

«Недостатки - отсутствие сколько-нибудь серьезной школы и отсутствие понимания грамотных процессов и методологий на рынке. В аутсорсе - невозможность отслеживать результат, наращивать свои собственные бест-практиз. В продукте - некоторая монотонность для зрелых и полный хаос для стартапов».

«Минусы - как и во всем ИТ - сидячая работа, страдающие глаза и иногда заказчик, которому надо сделать белый #ffffff еще белее:)»

Как стать и куда двигаться дальше

Первый и главный навык по части UI - освоить графический редактор. Самый востребованный инструментарий - Adobe Photoshop, Sketch, Principle, Adobe Illustrator, After Effects. Для начала можно попробовать перерисовать скриншоты любого мобильного приложения или сайта. Но не просто скопировать (хотя и это нужно уметь), а заметить какое-то неудобство и предложить решение, как сделать лучше.

Также важно понимать теорию цвета, типографику, композицию, эргономику сайта (принципы юзабилити интерфейсов), а также основы маркетинга, бизнес-анализ, психологию. Для более эффективного общения с разработчиками будут полезны навыки верстки (HTML/CSS) и базовые знания JavaScript и фреймворков.

Изучение UX можно начать со знакомства с методологией, почитав книги Нильсена Нормана, Алана Купера, Джефа Раскина, Стива Круга, Алистера Коберна. Более прикладная литература - «The User Experience Team of One: A Research and Design Survival Guide» Leah Buley.

«В современном мире возможностей для реализации множество. Я покупал и продолжаю покупать онлайн-курсы на таких платформах, как Coursera, Udemy, Edx. Смотрю онлайн-конференции от Adobe, Google, читаю техническую литературу, анализирую работы на Dribbble , Behance , Awwwards ».
«UX/UI дизайнеру надо изучить классику пользовательского интерфейса: „Не заставляйте меня думать“ Стива Круга, „Дизайн привычных вещей“ Нормана, читать Люка Вроблевски. Необходимо постоянно практиковаться, ставить себя на место пользователя. Найти ментора, который будет указывать на ошибки, давать советы и способствовать росту».

Начать карьеру можно с фриланса на различных англоязычных платформах, также будет полезно испытать свои навыки на чемпионатах, например, Dev Challenge . Это поможет наработать портфолио.

UX и UI навыки и компетенции ()

Из личных качеств важны:

  • усидчивость;
  • упорность;
  • креативное мышление;
  • перфекционизм;
  • желание учиться и развиваться;
  • умение слышать критику.
«Человек, который проектирует интерфейсы, - это инженер, он должен обладать сильным аналитическим мышлением, обладать высокоразвитым скилом эмпатии и умением проникать в суть вещей. Конечно, есть еще практические навыки - это владение различными технологиями и инструментами, но это, как правило, на втором месте, человек должен быть инженером по натуре. А стать не сложно, если над этим усердно работать, читать книги и статьи по дизайну (композиция, цветоведение, типографика) и по психологии (нужно понимать, как человек делает выбор и как работает его мозг), ходить на лекции и воркшопы и очень много практиковаться».

Возможные карьерные пути UX/UI дизайнера:

  • совершенствоваться как дизайнер, повышать рейт (если фрилансер);
  • осваивать смежные направления, развиваясь как дизайнер продукта, VR дизайнер, VFX дизайнер, Game дизайнер;
  • дорасти до позиции Арт-директора (Head of Design);
  • развиваться как , если хочется переключиться с дизайна на управление продуктом в целом;
  • стать , если интересно координировать людей;
  • заняться , если больше интересен технический аспект;
  • освоить программирование и стать UI-разработчиком;
  • попробовать себя в маркетинге или .
«Технологии очень быстро развиваются и всё время появляется что-то новое, для всего нужен свой специфический дизайн, есть свои требования и особенности. А мы, дизайнеры, будем помогать всему этому становиться лучше, красивее и удобнее:)»

Благодарю за помощь в написании статьи Юлию Бондаренко , Максима Паливоду , Марину Поповиченко и 25 других украинских дизайнеров, которые рассказали DOU о своей должности. Приведенные в статье цитаты взяты из их рассказов.

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

Но что из этого UX, а что UI? Процесс изготовления – это UX, а процесс раскладывания по тарелкам и подачи к столу — UI.

А как насчет поедания? Это UX; кроме случаев, когда это не UX. Получит ли потребитель другой опыт, если пирожные будут поданы сразу со сковородки или красиво разложены на тарелке? Я бы сказал, да, последнее было бы предпочтительнее.

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

С этой оговоркой, давайте взглянем на некоторые различия между ними.

UX – это не UI

UX дизайн, или дизайн пользовательского опыта, это процесс, с помощью которого определяется необходимость. Затем рисуется грубый прототип, который позже подтверждается (или нет) путем тестирования. Когда подтверждается и бизнес-модель, и предложение ценности — продукт готов.

Об UI, или дизайне пользовательского интерфейса можно думать так:

Дизайн пользовательского интерфейса = Визуальный дизайн + Дизайн взаимодействия.

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

И хотя и UX, и UI дизайнеры создают взаимодействия, UX дизайнеров можно считать архитекторами макровзаимодействий, а UI дизайнеров – создателями микровзаимодействий, занимающихся деталями.

По словам дизайнера Ника Бабича:

«Лучшие продукты хорошо справляются с двумя вещами: функциями и деталями. Функции – это то, что привлекает людей к вашему продукту. Детали – это то, что их удерживает».

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

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

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

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

После того, как потоки пользователей и ваерфрэймы запрототипированы и протестированы, процесс переходит к UI дизайнеру – его задачей будет заставить всё это красиво выглядеть. Это включает в себя выбор цветовой схемы и оформления, которое будет и красивым, и простым в использовании. Тем не менее, выбор цвета, оформление и взаимодействия основываются не на личных предпочтениях дизайнера, а на четко сформулированных причинах, специфических для персон, разработанных UX дизайнерами. С их помощью UI дизайнеры реализуют визуальную иерархию, которая послужит для пользователей проводником, объясняющими им что и когда делать, чтобы достичь своей цели.

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

UX помогает пользователям достигать целей

UI создает эмоциональные связи

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

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

После того, как вы настроили основное юзабилити, согласно Аарону Уолтеру, автору книги «Дизайн для эмоций», лояльность ваших пользователей будет зависеть от личности вашего интерфейса. Яркий дизайн может привлечь к вашему сайту людей, они даже могут задержаться, если там можно что-то сделать. И когда образуется личная связь – они на крючке. Заставляет ли ваш интерфейс их смеяться? Цепляет ли он их? Насколько он дерзкий? Аарон говорит: «Люди простят ваши недостатки, последуют за вами, и будут петь вам дифирамбы, если вы наградите их положительными эмоциями.» Вот здесь вступает UI дизайнер.

Сначала создается UX дизайн

Потом (иногда) создается дизайн UI

Как UX и UI дизайнеры работают вместе на протяжении процесса проектирования?

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

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

Однако этот путь не всегда линеен, и зависит от многих факторов. Например:

  • Кто занимается UX и UI?
  • Один и тот же человек, или кто-то другой, и другая команда?

UX используется во всех продуктах, интерфейсах и услугах

UI относится только к интерфейсам

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

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

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

Выводы

Почти невозможно отделить UX от UI или UI от UX.

Но если попытаться, то можно заключить, что:

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

Перевод статьи Дона Склехта

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

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

UX дизайн (UX design )

User Experience Design в переводе означает «опыт взаимодействия» и включает в себя различные UX -компоненты: информационную архитектуру, проектирование взаимодействия, графический дизайн и контент.

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

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

Основные вопросы, решаемые UX дизайном:

  • Постановка целей и задач - чего в итоге нам необходимо достичь?
  • Подбор подходящих UX инструментов для реализации целей
  • Разработка продукта, максимально удобного и легкого в восприятии целевой аудиторией
  • Анализ конечного результата - соответствует ли продукт ожиданиям заказчика и насколько высок уровень удовлетворенности пользователей.

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

UI дизайн (UI design)

User Interface Design или пользовательский интерфейс - это более узкое понятие, включающее в себя определенный набор графически оформленных технических элементов (кнопки, чекбоксы, селекторы и другие поля). Его задача - помочь пользователю организовать взаимодействие с программой/сайтом. На сегодняшний момент существуют некоторые правила UI дизайна :

  1. Организованность элементов интерфейса. Это означает, что они должны быть логически структурированы и взаимосвязаны.
  2. Группировка элементов интерфейса. Подразумевает объединение в группы логически связанных элементов (меню, формы).
  3. Выравнивание элементов интерфейса . Сложно представить, что плохо выровненный интерфейс может быть для кого-то удобным!
  4. Единый стиль элементов интерфейса. Стилевое оформление играет не последнюю роль, ведь именно оно сохраняется в памяти пользователя.
  5. Наличие свободного пространства. Это позволяет разграничивать информационные блоки, сосредотачивая внимание на чем-то одном.

Разработанный по все правилам пользовательский интерфейс значительно повышает эффективность ресурса и дает ему конкурентные преимущества.

Информационная архитектура (ИА)

Отдельно хотелось бы сказать пару слов об Information Architecture (IA ) . Ее деятельность сфокусирована на организации данных, то есть насколько информация является структурированной с точки зрения пользователя, а не технических или системных правил. Она определяет размещение элементов на странице, связь самих страниц. Компетенция ИА - это скорее меню и навигация и их грамотное внедрение.

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

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

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

Что делает UX Designer?

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

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

UX-дизайн — что это? Концепция технологии

Важной концепцией в дизайне UX является процесс, с помощью которого пользователи формируют опыт. Когда потребитель впервые сталкивается с продуктом, формируется мгновенное впечатление, которое меняется со временем. В этом процессе восприятие, действие, мотивация и познание объединяются, чтобы сформировать пользовательский опыт. Этот процесс вызывает эмоциональные реакции, которые в значительной степени определяют, будет ли опыт положительным или отрицательным.

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

Почему — подразумевает мотивацию пользователей к принятию продукта и желанию им обладать.

Что — касается того, что люди могут делать с продуктом и его функциональностью.

Как — относится к дизайну функциональности доступным и эстетически приятным способом.

Дизайн UX начинается с категории «почему», затем определяет, «что» и, наконец, «как», чтобы создавать продукты, с которыми пользователи могут получать значимые впечатления.

Историческая ретроспектива

По сравнению со многими другими дисциплинами, особенно с веб-системами, UX-дизайн является относительно новым. Термин «пользовательский опыт» был введен доктором Дональдом Норманом, исследователем когнитивной науки, который также первым описал важность ориентированного на пользователя дизайна — понятия, согласно которому проектные решения должны основываться на потребностях потребителей. С публикации данного понятия началась история UX-дизайна.

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

    исследование потребителя;

    дизайн продукта;

    тестирование;

    реализация.

Рассмотрим каждый из них подробнее.

Исследование потребителя: с чего начать начинающему дизайнеру?

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

    вопросники;

    обсуждения в фокус-группах;

    онлайн-опросы;

    анализ задач.

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

    Дизайн

    Разработка дизайнерской гипотезы включает в себя представление о том, как новые продукт или услуга могут адаптироваться к тому, как клиент уже ведет себя (это выявляется исследованиями пользователей). Дизайн продукта ориентирован на функциональность и удобство использования, а не на то, как он выглядит. На этом этапе используются следующие :

      информационная архитектура;

    • прототипирование.

    Тестирование

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

      тестирование a/b;

      юзабилити;

      дистанционное тестирование пользователей.

    Реализация

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

    Что такое пользовательский опыт?

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

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

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

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

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

    Профессиональные компетенции

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

      лидерство;

    • управление проектами;

      эффективное взаимодействие с командой.

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

    В чем разница между дизайном UX и UI?

    Дизайнеры пользовательского интерфейса (UI) фокусируются на макете и фактическом дизайне каждого элемента, с которым взаимодействует пользователь, тогда как дизайнеры User Experience (UX) сосредотачивают свое внимание на взаимодействиях пользователя с этим элементом, а также на комплексном впечатлении от продукта. Дизайнеры UI и UX часто работают вместе, а также в команде с веб-разработчиками, для создания продукта, который является визуально привлекательным и приятным в использовании.

    Что делает на самом деле дизайнер UX?

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

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

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

    Задачи и методы

    Дизайнеры UX выполняют различные задачи в разных точках процесса. Ниже представлен основной перечень:

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

      A/B TESTING. Специалист может разработать исследование для сравнения эффективности и качества опыта различных пользовательских интерфейсов. Это выполняется путем выдвижения гипотезы (например, «зеленая кнопка более привлекательна, чем красная»). Затем предлагается несколько версий дизайна и в порядке тестирования определяется «лучший опыт» (например, «зеленая кнопка лучше, потому что пользователи щелкали по ней чаще».).

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

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

      Пользовательские потоки. Проектирование того, как пользователи должны перемещаться по системе, является еще одним популярным инструментом.

    Шаблоны проектирования

    Шаблоны обеспечивают согласованность и способ нахождения наиболее эффективного «инструмента» для работы. Например, при разработке шаблонов пользовательского интерфейса выбор правильных элементов (например, вкладки модуля, слайд-шоу) для определенных задач, основанных на их эффективности, приводит к лучшему решению. Разработчики UX не только предлагают шаблоны проектирования, которые используются на других веб-сайтах, но и разрабатывают свои шаблоны для текущего проекта.

    Программы

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

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

    Некоторые программные средства для создания каркаса и прототипов:


    При обучении основам UX-дизайна используется тестирование A/B, также известное как раздельное или многовариантное тестирование. Данный инструмент сравнивает разные версии страницы. Тестирование может быть выполнено с помощью любой из нескольких программ.

    В основном программное обеспечение для тестирования A/B разбивает трафик веб-сайта на два равных сегмента. Одна группа видит версию A, а другая — версию B. Статистика, такая как коэффициент конверсии и показатель отказов, отслеживается для каждой версии. Сплит-тестирование определяет, какая версия лучше, и данное решение основано на статистических данных. Одним из самых популярных приложений для тестирования A/B является Website Optimizer Google.

    Управление контентом

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

    Веб-сайты, созданные с такими системами управления контентом, как WordPress и Drupal, как правило, имеют встроенные инструменты, которые показывают карту существующего веб-сайта.

    Опросы и фидбек

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

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

    Примеры

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

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