UX/UI дизайн и почему его не бывает?

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

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

1. Что есть что

1.1. UI — User Interface (пользовательский интерфейс)

Интерфейс сайта (User Interface или UI) – совокупность составных частей, с помощью которых посетитель сайта достигает своей цели. К составным частям относятся и элементы навигации (позволяют перемещаться) и заголовки (позволяют понимать, где он находится) и кнопки обратной связи или заказа.

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

Если интерфейс сайта нужно осваивать – он сделан плохо. Если все понятно сразу – сделан хорошо.

1.2. UX — User Experience (пользовательский опыт)

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

1.3. Почему это важно и освоение интерфейса исключается в принципе?

Проще всего на примере магазина. Потому что онлайн магазин очень легко покинуть. Если в ваш магазин (фирму, ателье) пришел посетитель и его встретил небритый и заспанный менеджер – посетитель еще не потерян. Он уже потратил время на дорогу до вас и чтобы уйти к конкуренту, он должен потратить время снова. Ему лень и он может попытаться купить услугу даже у неприветливого продавца. Онлайн не так. Издержки посетителя это несколько секунд времени на введенный запрос. А уйти к соседу по поисковой выдаче – еще меньше.

2. Почему дизайнер не контролирует ни UX ни UI?

2.1. В части UX (пользовательский опыт)

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

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

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

2.2. В части UI (пользовательский интерфейс)

Аналитические инструменты для изучения поведения пользователя на сайте в ведении маркетолога и/или веб-аналитика. Это тепловые карты в Яндекс Метрике, Карты кликов и Пути по сайту из Universal Analytics.

Видите, как четко тепловая карта отразила на какие элементы нажимают, а на какие нет?

А вот карта поведения на сайте

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

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

2.2. Частные примеры

Пример 1.

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

Следующие клиенты заходят на сайт и видят, что билетов на мероприятие нет, начинают писать в поддержку и нервировать организатора. Дальше остается проанализировать статистику оплат, сократить время “брони”, например, до 15 минут, отправлять на e-mail и телефон пользователя напоминания об оплате. А также создать алгоритм, препятствующий оформлению покупок на заведомо ложные электронные адреса и телефоны.

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

Пример 2.

Пример грамотного UI интернет-магазина — сайт Wildberries. Здесь предлагают большой выбор одежды. Пользователь может далеко прокручивать страницу, отсортировав товар по выбранным фильтрам. Чтобы случайно их не сбросить переходом на страницу конкретного товара, он пользуется всплывающей кнопкой “Быстрый просмотр”, позволяющей открыть интересующую позицию в отдельном модале. Это создает ощущение открытия полной страницы без ее фактического открытия.

А наведя курсор на фотографию, клиент может рассмотреть ее крупнее.

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

Но! Это работает «на продажи» не во всех товарах. Это эффективно в части одежды. А Ozon например, модальные окна не использует – там где внешний вид продукта не так важен, переход на отдельную карточку (с выходом из общего каталога) дает лучшую конверсию в продажи.

4. Истоки UX/UI легенды и что делать

4.1. Источник легенды

Англоязычная терминология и неточность перевода. В английском языке слово design не эквивалент русского «дизайн». Design это дизайн, проектирование, разработка, в одном из значений — расчет. Слово «дизайн» ближе к английскому styling – это и есть оформление и все.

Так в Википедии UX design в англоязчной статье включает Usability testing и Testing the design разделы. А на русском языке "Дизайн взаимодействия с пользователем" это визуальный дизайн + информационная архитектура.

И в англоязычной среде специализация «веб-дизайн» включает знания HTML и CSS – того, что в России относится к профессии верстальщика. Это не заменяет веб-аналитики, но делает понятие «design» куда более объемным и близким к разработке и расчету, чем отрисовка макетов в Photoshop.

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

4.2. Что делать?

Принять 2 тезиса:

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

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