Дизайн — довольно широкий и расплывчатый термин. Когда кто-то говорит: «Я дизайнер», не сразу понятно, чем он занимается изо дня в день. Есть целый ряд различных отраслей, входящих в это понятие.

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

«У этого вопроса нет единственного правильного ответа.»

Давайте попытаемся разобраться что на самом деле это означает в ИТ-индустрии.

UX дизайнер

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

«Определять модели взаимодействия, поток задач пользователя и специфику интерфейса. Разрабатывать сценарии, end-to-end взаимодействия, модели взаимодействия, разработка графического интерфейса пользователя. Работа с нашим креативным директором и графическим дизайнером, чтобы оъединить визуальную сторону Twitter с его функциональными особенностями. Разрабатывать и поддерживать, вайрфреймы, мокапы и спецификации по мере необходимости».

Пример экрана приложения, разработанного UX дизайнером
Источник: Kitchenware Pro Kit Wireframe от Neway Lau на Dribbble.

Задача: Вайрфреймы экранов, раскадровки, план сайта

Инструменты: Photoshop, Sketch, Illustrator, Fireworks, InVision

Вы скорее всего слышали от него: « Страницу „Спасибо“ пользователь должен увидеть после окончания регистрации».

UI дизайнер

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

«Концепция и реализация визуального языка Airbnb.com. Создание расширенного стайлгайда.»

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

UI дизайнер определяет общее восприятие и внешний вид приложения.
Источник: Metro Style Interface 4 работа Ionut Zamfir на Dribbble.

Инструменты: Photoshop, Sketch, Illustrator, Fireworks

«Поля „войти“ и „зарегистрироваться“ нужно переместить в правый верхний угол».

Графический дизайнер

«Графические дизайнеры корпят над мелкими деталями, на которые другие не обращают внимания».

Графический дизайнер это тот, кто занимается графикой — скорее всего ответит вам не-дизайнер, если вы спросите у него, чем занимается дизайнер. Графических дизайнеров не волнует то, как экраны ссылаются друг на друга, ни как кто-то взаимодействует с продуктом. Вместо этого их внимание сосредоточено на разработке красивых иконок, средств управления и визуальных элементов и создание подходящего оформления. Графические дизайнеры прорабатывают мелкие детали, которые другие не видят, и часто работают в Photoshop с 4-х кратным и 8-ми кратным увеличением.

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

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

Графический дизайнер проектирует, направляет и регулирует каждый пиксель, чтобы обеспечить идеальный конечный результат.
Источник: IOS 7 Guide Freebie PSD от Seevi kargwal на Dribbble.

Инструменты: Photoshop, Sketch

Вы скорее всего слышали от него: «Уменьшить кернинг и перенести кнопку на 1 пиксель влево!»

Моушн дизайнер

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

«Требуется знание графического дизайна, моушн дизайна, диджитал арт, чувство цвета и типографики, общая осведомленность материалов/текстур и практическое понимание анимации. Знание прошивок iOS, OS X, Photoshop и Illustrator, а также знакомство с Director (или эквивалент), Quartz Composer (или эквивалент), 3D компьютерное моделирование, моушн графика».

Инструменты: AfterEffects, Core Composer, Flash, Origami

Вы скорее всего слышали от него: «Меню должно всплывать слева через 800 мс.»

UX исследователь

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

UX исследователь знает все о потребностях пользователей. Цель исследователя — ответить на два главных вопроса: «Кто наши пользователи?» и «Чего наши пользователи хотят?». Как правило, это подразумевает под собой опрос пользователей, исследование рынка, и анализ данных. Дизайн это процесс постоянного итерирования. Исследователи могут помочь в этом процессе с помощью проведения тестов типа A/B, чтобы выяснить, какой вариант дизайна лучше удовлетворяет потребности пользователей. UX исследователи, как правило, главная опора крупных компаний, где доступ к большому количеству данных открывает им широкие возможности для статистически значимых выводов.

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

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

Дизайнеры

Разработка интерфейса приложений, сайтов или игр является достаточно сложным процессом и нуждается в применении знаний из разных областей: инженерии, психологии и дизайна. Дизайнеры пользовательского интерфейса (по-английски - User Interface или UI) фокусируются на способе отображения функциональности сайта (поиск, вкладки, меню) и деталях взаимодействия клиента и интерфейса. Цель UI-дизайнера - эстетически приемлемый современный дизайн продукта . UX расшифровывается как User Experience, что в переводе значит «пользовательский опыт». UX-дизайнер больше сосредоточен на удобстве и понимании интерфейса потенциальным пользователем. Такой специалист зачастую проводит исследования и опросы, которые станут основой для создания концепции дизайна, а также тестирует концепции в ходе разработки и после неё. Обычно он сосредоточен на структуре, содержании, навигации и том, как пользователь взаимодействует с этими элементами.

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

Что нужно знать UX/UI-дизайнеру

Графические редакторы . Самые популярные на рынке инструменты - это Adobe Photoshop, Adobe Illustrator, а также Sketch, Figma. Выберите удобный для себя редактор и попробуйте для начала нарисовать скриншоты сайта или приложения немного их модернизировав.

Инструменты прототипирования (Mockplus, Axure) . Инструмент для создания прототипов является связывающим звеном между идеей и её реализацией. Неважно каким инструментом при этом вы будете пользоваться. Можно попробовать несколько и определиться с тем, который подойдёт именно вам по стилю и предпочтениям.

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

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

Желательно иметь представление о типографике , средстве объединения текстовой и визуальной составляющей.

Композиция и юзабилити сайта.

В зависимости от специфики работы может понадобиться понимание HTML и CSS или (немного) языков программирования (ссылки на ресурсы можно посмотреть ниже, в разделе «Что должен знать Front-end разработчик»).

Разработчик Front-end

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

Что должен знать Front-end разработчик

Как правило, front-end стоит на трёх китах: язык разметки страницы HTML, таблицы стилей CSS и язык программирования JavaScript. Кроме того, фронтендщик должен понимать принципы работы протокола HTTP, серверов и браузеров, особенности отображения интерфейса на различных устройствах, которые в настоящее время находятся на рынке. Инструменты и методы создания веб-интерфейсов постоянно развиваются и меняются, поэтому разработчик должен за этим постоянно следить.

HTML и CSS (вёрстка)

Это верстка, те самые кирпичи, из которых строится сайт. Язык разметки HTML диктует организацию сайта, содержимое и все взаимодействие между ними. Он позволяет обозначить верхнюю часть страницы, нижнюю, боковые блоки с содержимым, заголовки, отображение текста и мультимедийных элементов. Таблицы стилей CSS служит для украшения HTML-элементов. Они определяют, как именно отображается каждый графический элемент, который располагается на странице. С помощью самых свежих версий HTML5 и CSS3 можно размещать видео и аудио компоненты на страницу, создавать двухмерные изображения и анимацию, и даже писать несложные игры. Не нужно стараться запомнить сразу все теги и стили. Будет полезно изучить основы и сразу же применить их в действии. Очень неплохой сайт, где можно изучить основы HTML и CSS - W3School. Но только если у вас есть хотя бы базовые знания английского. Также фронтендщик должен разбираться в кросс-браузерной и кроссплатформенной разработке, адаптивной и отзывчивой вёрстке.

Bootstrap

Это фреймворк для HTML, CSS и JavaScript. То есть определённые шаблоны, из которых, как из конструктора, можно собирать сайты гораздо быстрее, чем без них. Но, разумеется, его нужно затачивать под ваши потребности самостоятельно. Если знаете английский, рекомендуем сайт getbootstrap и всё тот же w3schools .

JavaScript

Javascript – ядро front-end разработки. Это первый и наиболее распространённый язык программирования интерфейсов. Он способен добавить массу возможностей на сайт. На базовом уровне этот язык позволяет добавлять интерактивные элементы на страницу. Его используют для создания карт, которые обновляются в режиме реального времени, интерактивных онлайн-игр и фильмов. На старших курсах JavaRush мы немного изучаем JavaScript. Также его можно изучать на том же W3School или почитать о нём на русском, на сайте javascript.ru .

jQuery

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

Javascript-фреймворки

Существуют различные типы фреймворков, но вы можете выбрать один из них, который будет удобен в использовании именно вам. Самые известные - Angular, Backbone, Ember, и React. Представляют собой готовую структуру для кода. Они помогают ускорить разработку. А в совокупности с библиотеками способны минимизировать разработку сайта или приложения с нуля. Обзор 5 самых популярных JavaScript фреймворков и библиотек 2017

Система управления версиями Git

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

Краткие выводы

UI расшифровывается как User Interface, что в переводе означает «интерфейс пользователя». То есть, Дизайнер UI отвечает в первую очередь за то, как продукт представлен пользователю. Он разрабатывает кнопки, иконки, подбирает шрифты, готовит макет. UX расшифровывается как User Experience (пользовательский опыт). Так что UX-дизайнер проектирует дизайн сайта, приложения - да чего угодно - так, чтобы пользователю было удобно и понятно, что к чему, и он мог получить от сайта то, что ему нужно с минимальными усилиями. Очень часто оба вида работ выполняет один человек-оркестр: UI/UX-дизайнер. Разработчик Front-end оживляет работу дизайнеров, внося в неё динамику: кнопки начинают нажиматься, а картинка - меняться. Он должен знать языки программирования, приправленные фреймворками, препроцессорами и библиотеками.

User Interface Design или пользовательский интерфейс призван помочь организовать взаимодействие пользователя с устройством или программой.Это то, с чем пользователь сталкивается при взгляде на устройство или экран: расположение графических элементов интерфейса, кнопок и навигации. От того, насколько пользовательский интерфейс удобен, зависит желание человека воспользоваться сайтом или приложением. Лояльность пользователей во многом зависит от удобства и привлекательности интерфейса. Яркий дизайн привлекает людей и заставляет их зайти в программу или на сайт. Поэтому важно чтобы UI дизайн был интуитивно понятен.

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

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

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

Вы получите

Качественно выполненная работа

Привлекательный дизайн

Эмоциональное вовлечение пользователей

Структурированный интерфейс

От чего зависит цена UI дизайна

1. Количества концептов интерфейса. Чем их больше, тем она выше.
2. Типа устройств, для которого разрабатывается интерфейс. Это может быть интерфейс приложения андроид, интерфейс приложения IOS или же web-приложение.
3. Наличия сформированных правил UX. Если нам нужно будет выработать правила - цена повышается.
4. Необходимости создания иллюстраций . Они могут быть графическими и анимационными. Также цена зависит от их количества. Чем больше иллюстраций требуется, тем выше стоимость UI дизайна.

Закажите дизайн пользовательского интерфейса в брендинговом агентстве KOLORO. Мы найдем подход к вашему проекту.

Разработка UI дизайна: этапы

1.Постановка задачи:

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

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

UI интерфейс включает в себя такие элементы:

• информационную архитектуру;
• проектирование взаимодействия;
• графический дизайн.

Создание UI дизайна: правила

1. Дизайн элементов приложений должен быть максимально простым и понятным .
2. Пользователь не должен совершать сложных действий или длинных цепочек переходов.
3. Желательно использовать привычные элементы управления и понятные визуальные образы.
4. Логически связанные элементы необходимо объединять в меню и формы.
5. Самые важные элементы пользовательского интерфейса должны идти первыми .
6. Интерфейс должен быть оформлен в едином стиле.

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

Закажите дизайн интерфейсов в брендинговом агентстве KOLORO . Мы умеем соблюдать баланс.

Особенности разработки интерфейса приложения

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

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

Перед UI интерфейсом стоят такие задачи

1. Обеспечивать взаимодействие пользователя с приложением.
2. Приносить эмоциональное удовлетворение пользователю в процессе работы.
3. Выглядеть привлекательно .

Составляющие UI

1. Визуальный дизайн , или VD важен для качественного отображения цветов, шрифтов и других элементов сайта, поскольку именно это создает эстетику сайта. Хороший пользовательский интерфейс может существовать только в совокупности содержания страницы и ее функционала. Кроме этого, визуальный дизайн направлен на то, чтобы привлечь пользователя и выстроить его доверие к продукту или услуге.
2. Дизайн система  — проектирование пользовательского интерфейса через системы отдельных элементов интерфейса. Они нужны для разработки многоразовых шаблонов.
3. Прототип  представляет собой действующий пример разработанного пользовательского интерфейса. Имитирование работы дает представление об откликах элементов интерфейса до их непосредственной разработки.
4. Содержимое . Гаджеты приучили пользователей работать в режиме многозадачности, поэтому при проектировании пользовательского интерфейса важно быстро и корректно продемонстрировать главный контент и функционал приложения, а все вторичное перенести на задний план или убрать.

1. Обратная коммуникация — это использование разного оформления или анимации отклика программы на действие пользователя. Человеку это дает понимание, что все под контролем и функционирует корректно.
2. Работа с помощью одной руки . Хороший дизайн интерфейса должен быть адаптирован под управление одной рукой. Легче всего управлять программой, когда необходимые элементы навигации расположены в нижнем левом углу. Также удобный дизайн интерфейса предусматривает наличие больших кнопок, отступов и броского оформления важных элементов для легкого взаимодействия с ними.
3. Быстрый ввод . Формы для заполнения должны: требовать от пользователя минимального количества информации; предлагать варианты ответов. Например, при необходимости узнать возраст юзера лучше использовать выпадающий список, а, узнавать адрес через синхронизацию с геолокацией. Общая рекомендация - минимальный ручной ввод.

Разработка UI дизайна в KOLORO принесет вам

1. Эстетически привлекательный интерфейс. Элементы дизайна и цветовые решения будут подобранны в соответствии с концепцией приложения.
2. Простоту и понятность использования. Люди будут с лёгкостью понимать, как взаимодействовать с интерфейсом.
3. Согласованность. Элементам, которые действуют одинаково необходимо придавать согласованность. Это облегчит использование приложения.

UI дизайн - важный элемент интерфейса. С его помощью контактируют программа и пользователь. Обратитесь в брендинговое агентство KOLORO, и мы разработаем максимально удобный UI дизайн!

29.09.2017

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

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

Что такое User Experience (UX)?

UX расшифровывается как “user experience (опыт взаимодействия)”. Опыт взаимодействия – это то, как люди взаимодействуют с продуктом.

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

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

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

• Получил ли я пользу от этого продукта?
• Легко ли его использовать?
• Приятно ли его использовать?

То, станут ли люди постоянными и верными пользователями продукта напрямую зависит от ответа на эти вопросы.

Элементы UX

Дон Норман (Don Norman), соучредитель Nielsen Norman Group , был первым, кто ввел понятие “user experience” в 90-ые годы, сказав “Опыт взаимодействия охватывает все аспекты взаимодействия пользователя с компанией, ее услугами и продуктами”.

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

В этом видео Дон Норман делится своим мнением об истоках термина UX.

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

• Опыт взаимодействия основывается на ощущениях. Он выходит за рамки обычного человек-компьютер взаимодействия (human-computer interaction (HCI)) и уделяет особое внимание человеческой стороне. Люди оценивают взаимодействие как личный момент.
• UX зависит от контекста, в котором используется продукт. Условия, при которых используется продукт, постоянно меняются. UX предполагает понимание более широкого контекста, в котором работают пользователи, и определение того, какую роль продукт играет в их жизни.
• Опыт взаимодействия эволюционирует со временем. Опыт взаимодействия с вашим продуктом динамичен. Например, когда новый продукт попадает на рынок, или когда пользователь впервые испытывает продукт, он может быть дезориентирован и иметь смешанные чувства, потому что не знает, чего ему ожидать. Позже, когда пользователи станут знакомы с вашим продуктом и определят его пользу , их опыт взаимодействия будет позитивно расти и вызывать эмоциональную привязанность .

С технической точки зрения UX включает практические, эмпирические, аффективные, значимые и ценные аспекты взаимодействия. Соты Питера Морвилла (Peter Morville) – это инструмент, который поможет вам найти правильный баланс между различными областями эффективного UX.

• Usable: Продукт должен быть простым и легким в использовании. Он должен быть разработан так, чтобы быть знакомым и понятным.
• Useful: Продукт должен удовлетворять потребности. Если он этого не делает, что у пользователя нет причин его использовать.
• Desirable: Визуальная эстетика продукта должна быть привлекательна. Элементы дизайна могут вызывать позитивные эмоции и симпатию.
• Findable : Если у пользователя возникли проблемы с продуктом, то они должны быть в состоянии быстро найти решение.
• Accessible : Дизайн продукта должен быть таким, чтобы даже физически неполноценные люди могли иметь такой же опыт как и все остальные.
• Credible : Компания и ее продукты должны вызывать доверие.

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

Что такое UX дизайн?

UX практически всегда сопровождается словом “дизайн”. Люди, работающие в этой области – UX дизайнеры.

Простыми словами, User Experience Design (UXD или UED) – это процесс создания физического или электронного продукта, который полезен, легок в использовании и приятен для взаимодействия. Но на самом деле все значительно сложнее:

01. UX дизайн больше чем юзабилити

Существует заблуждение, что UX дизайн – это то же самое, что и юзабилити. И это заблуждение понятно: юзабилити предполагает, что продукт полезен и легок в использовании.

Юзабилити – это качественный атрибут пользовательского интерфейса, который устанавливает, легок ли продукт в изучении, насколько он эффективен, и так далее.

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

02. UX дизайн не является визуальным или UI дизайном

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

Пользовательский интерфейс (UI) определяется как средство связи между человеком и системой. С увеличением популярности персональных компьютеров и мобильных девайсов этот термин обычно приравнивают к “графическому пользовательскому интерфейсу (graphical user interface (GUI))” – внешний вид и ощущение, презентация и интерактивность продукта.

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

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

03. UX дизайн – это люди

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

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

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

04. UX дизайн имеет разные размеры

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

05. UX дизайн – это постоянно продолжающийся процесс

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

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

Чем занимаются UX дизайнеры?

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

Затем дизайнер пытается удовлетворить эти нужды фокусируясь на следующих областях:

• Визуальный дизайн . Создание эффективной визуальной иерархии для UI.
• Информационная архитектура. Удовлетворение целей пользователей путем анализа ключевых задач и поведения пользователей.
• Интерактивный дизайн. Оптимизация взаимодействия людей и интерфейсами.
• Юзабилити. Анализ того, как люди используют продукт.
• Контент стратегия. Согласование контента с общей стратегией продукта.

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

Наконец, UX дизайнеры проводят много времени над . Прототипирование – это важенейшая часть рабочего процесса UX дизайнера, во время которой создаются пробные продукты, которые могут быть протестированы перед запуском финального варианты. Прототип может быть чем угодно: от наброска до пиксель-перфект интерактивного интерфейса. Суть прототипа в том, чтобы тестировать продукт и идеи прежде чем создать финальное решение. Прототипы помогают исправлять ошибки юзабилити и открывают области, нуждающиеся в доработке. Создавать быстрые прототипы можно, например, с помощью Adobe XD .

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

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

Примеры отличного UX дизайна

Джаред Спул (Jared Spool), эксперт в области UX дизайна, сказал: “Хороший дизайн, когда он правильно сделан, невидим. Мы замечаем его, только когда он плох.”

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

01. Предоставляйте достаточно правильной информации

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

Плохой UX: Автомобиль сообщает водителю о поломке.

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

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

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

02. Избегайте визуального беспорядка

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

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

Эффективный UX: Фокусируется на том, что важно пользователю

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

03. Делайте путешествие пользователя максимально гладким

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

Плохой UX: Принуждение к регистрации без предложения выгоды

E-commerce сайты часто используют логические стены. Необходимость регистрации имеет высокую стоимость интеракции, потому что заставляют пользователя тратить свое время на создание нового аккаунта и запоминание информации. Более 85% посетителей покидают страницу из-за вынужденной регистрации. Даже Amazon это делает. Он заставляет регистрироваться пользователей прежде чем купить выбранные товары, поэтому огромное количество посетителей покидает сайт.

Эффективный UX: Дать гостевой доступ

Процесс регистрации может быть упрощен с помощью гостевого доступа. Для e-commerce сайтов нормально спрашивать информацию об оплате, но не заставлять пользователей регистрироваться.

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

04. Устраните неопределенность пользователя

Давайте взглянем на форму для онлайн покупки. Оплачивать что-то онлайн с карточки легко, да ведь? И да, и нет. Да, потому что многие пользователи имеют такой опыт, и нет, потому что нет и двух одинаковых форм.

Плохой UX: Не помогает пользователю

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

У пользователя наверняка возникнут следующие вопросы:

• Какие карточки можно использовать? Можно ли заплатить с American Express?
• Что за “Name”? Имя на карте или ваше полное имя?
• В каком формате должна быть дата? MM/YY или MM/YYYY?
• Что за “Security code?
• Что будет если я нажму “Next”? Это завершающий шаг оплаты или я смогу проверить введенные данные?

Эффективный UX: Визуализируйте все необходимое

Иногда простое усовершенствование UX в процессе ввода данных может заработать вам миллионы долларов.

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

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

Почему стоит позаботиться о UX?

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

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

Хороший UX для хорошего бизнеса

В случае с бизнесом, UX – важнейший критерий выживания. Современный пользователь ожидает многого от вашего бренда, что означает, что ваш продукт должен предоставлять хороший опыт взаимодействия. UX дизайн – это основная инвестиция. Forrester Research сообщает , что каждый инвестированный в UX доллар в среднем приносит 100$ прибыли и окупаемость инвестиций в 9,900 процентов .

Спрос на рынке труда

UX дизайнеры очень востребованы. Согласно CNN Money , UX дизайн – одна из топ 50 вакансий в Соединенных Штатах. Средняя заработная плата UX дизайнера в США составляет 70000$ в год на начальных уровнях и 100000$ в год для опытных дизайнеров.

Тенденции найма в UX дизайне

Согласно Adobe survey большинство компаний нанимают UX дизайнеров для работы с веб и мобильными приложениями. Ожидается, что в течение 5 лет мобильная индустрия станет самой востребованной. В то время как desktop-to-mobile (кроссплатформенный дизайн) останется важным, практически половина компаний в следующе 3-5 лет планирует нанимать UX дизайнеров, кто сможет работать с виртуальной реальностью (VR).

Заключение

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

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

Коротко про разницу

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

UX-дизайнер (user experience) - это не дизайнер, а проектировщик (просто в английском слово designer имеет как раз второе значение). Он изучает потребности пользователей, строит логические схемы работы интерфейса, тестирует прототипы на живых людях, пишет ТЗ на дизайн. Другими словами, это такой инженер-маркетолог: на входе аналитика, на выходе принципы создания интерфейса, логика работы, компоновка, контент. Рисования как такового он не касается.

Вот и всё.

Зачем нужно было всё усложнять

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

И дизайнер назывался просто «дизайнер». Без заморских приставок.

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

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

То же самое уже было в отрасли. Например, просто «программистов» разделили на «фронтенд» и «бэкенд». А фронтендеров на истинных фронтендеров и «просто верстальщиков». Кстати, .

Причина всегда одна: одного человека не хватает на большой процесс. Едем дальше.

Кто такой UX/UI-дизайнер

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

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

Кто такой UX/UI в идеальном мире? Сверхчеловек, который проводит весь цикл работ UX, а потом еще успевает отрисовать всё с несколькими итерациями правочек (сделать UI).

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

Так что, если видите удивительного мутанта UX/UI, знайте, что:

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

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

Как запомнить, где UX, а где UI

Предлагаем две простые запоминалки.

Для тех, кто знает английский:

Для тех, кто не знает:

Кстати

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