(function (d, ver) { var s = d.createElement('script'); s.src = window.__specials_cdn + 'SpecialBranding/top.min.js?' + ver; s.async = true; var container = d.getElementById('special-branding-top'); if (container) { s.onload = function () { new window['BrandingTop']({ container, content: { theme: 'light', link: 'https://go.vc.ru/u3sR', text: 'Познакомьтесь с нашими проектами поближе 👀', button: 'Открыть кейсы', color: '#e6e6e6', textColor: '', img: '', }, }); }; } d.body.appendChild(s); })(document, '__specials_version' in window ? window.__specials_version : 0); (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(22537453, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(22537453, 'hit', window.location.href);

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

Хороший UX — это не то, как работает интерфейс, а то, как работает бизнес. Специалисты digital-агентства «Атвинта» собрали три заблуждения о том, что такое UX и чем он не является.

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

Заблуждение 1: Плохой интерфейс равно отсутствие UX

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

В чем заблуждение

Термин «UX» (User Experience) говорит о любом опыте, который получает пользователь при взаимодействии с IT-продуктом. Опыт может быть как хорошим, так и плохим. И не всегда этот опыт связан с дизайном самого интерфейса. Ошибка — по умолчанию думать, что «UX» равно «хорошее юзабилити».

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

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

Пример: как улучшить обслуживание клиентов с помощью UX в интерфейсе

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

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

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

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

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

Заблуждение 2: За качество UX отвечает дизайнер

Довольно частая история в практике «Атвинты», когда компания обращается только за дизайном, ожидая, что это решит вопросы с конверсией.

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

В чем заблуждение

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

UX зависит от очень многих факторов:

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

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

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

Хороший UX приложения или веб-сервиса — это результат командной работы и скрупулезно проведенной аналитики.

Пример: как проработать UX с учетом всего процесса разработки

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

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

Один из пользовательских сценариев приложения

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

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

Заблуждение 3. Есть правила проектирования и дизайна, если их нарушить, получится плохой UX

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

В чем заблуждение

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

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

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

Пример: сделать востребованный продукт с помощью UX

MedTech-стартап из США решил выпускать smart-оборудование для медицинских лабораторий. Одно из устройств в линейке — микробиологический инкубатор. Для запуска эксперимента на устройстве нужен интерфейс, который позволит регулировать состав среды и считывать показания с датчиков внутри инкубатора.

Если опираться на стандартные паттерны восприятия, то такой продукт в принципе сложно реализовать.

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

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

Но у нас диагональ экрана — 7 дюймов. Это всего на дюйм больше экрана iPhone 12. На небольшом экране детализированный график будет плохо считываться.

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

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

Решение получилось удачным: стартап получили инвестиции в раунде А и предзаказы от медлабораторий еще до старта промышленного производства оборудования.

Правильный подход к разработке UX

Когда люди пользуются продуктом, они не думают, насколько хорошо эта вещь спроектирована и классно ли в нем реализован UX.

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

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

При разработке UX стоит задаваться вопросами:

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

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

(function (d, ver) { var s = d.createElement('script'); s.src = window.__specials_cdn + 'SpecialBranding/bottom.min.js?' + ver; s.async = true; var container = d.getElementById('special-branding-bottom'); if (container) { s.onload = function () { new window['BrandingBottom']({ container, content: { theme: 'light', link: 'https://go.vc.ru/u3sR', text: 'Познакомьтесь с нашими проектами поближе 👀', button: 'Открыть кейсы', color: '#e6e6e6', textColor: '', img: 'cba9d7af-106a-5987-b37f-a9fcea6fbfbb', }, }); }; } d.body.appendChild(s); })(document, '__specials_version' in window ? window.__specials_version : 0);
0
40 комментариев
Написать комментарий...
Денис Сухоруков

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

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

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

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

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

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Денис Сухоруков

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

Я говорил именно про широко распространенный софт.
Берем для примера тот же сайт яндекса и мылару. Когда им нужно было выделиться на фоне, всё вкладывалось в дизайн и реально приятно было пользоваться. Сейчас конкуренции практически нет. И дизайн сайтов превратился в сраное гавно на которое налеплено куча "маркетинговых фишечек". Типа "куда они денутся, нехай жрут". А вот Гугл следит за своим лицом. И денег с рекламы имеют и сайт при этом выглядит очень чисто по дизайну. И я уверен, что за дизайн в стиле яндекса на гугле его изобретателя сразу бы посадили на бутылку.  

Ответить
Развернуть ветку
Koxae Sun

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

Ответить
Развернуть ветку
Денис Сухоруков

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

Так что у меня по поводу поиска картинок к гуглу вопросов нет. Это направление было заброшено по объективным причинам. Да и истории этой уже года три.

Ответить
Развернуть ветку
Koxae Sun

Я не путаю. Спрятать фильтры под кнопкой "инструменты", урезать фильтр по размерам, изменить ссылку на полное изображение ссылкой на страницу с ней и тп - это не бизнс-процесс, а деградация UX

Ответить
Развернуть ветку
Денис Сухоруков

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

Ответить
Развернуть ветку
Koxae Sun

Печально, на самом деле. Я пользовалась. Для меня это был полезный инструмент. И даже с такой выдачей, если бы не порезали фильтр размеров, то поиском можно было бы пользоваться. А так поиск картинки, например, 16х16 точек теперь невозможен.

Ответить
Развернуть ветку
Денис Сухоруков

Могу bing посоветовать. А для чего нужно 16 на 16? Мне то обычно нужно наоборот. Чем больше тем лучше. А вот с обратным вариантом не сталкивался.

Ответить
Развернуть ветку
Koxae Sun
Могу bing посоветовать

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

Ответить
Развернуть ветку
Денис Сухоруков

www.Flaticon.com же.
Много бесплатного.

Ответить
Развернуть ветку
Koxae Sun

Не совсем то. Мне нужны были пиксельные иконки, которые изначально рисовалось в таком размере.

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

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

Ответить
Развернуть ветку
Денис Сухоруков

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

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Маратка Тотсамый

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

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

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

за такую хрень платят

Ответить
Развернуть ветку
Evgeniy Prihodko

Расскажите об этом компании 1С

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

Автор смешал UX и CX в одну кучу. Новичкам этот материал только навредит, а профи он просто не зайдёт из-за ошибок. Возникает вопрос, для кого эта статья?

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

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

Понял, но тогда логичнее всего было бы выделить отдельный раздел о CX. Так как сейчас UX и CX смешали в одну кучу. Если что, это лично мое пожелание, а так смотрите сами. В любом случае, спасибо вам за проделанную работу)

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо :) Возьмем на заметку рассказать разделение CX и UX

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

Ага, и еще такое ощущение, что именно работу дизайнера он сумел свети только к UI. Это я про "первые 3 пункта"

Ответить
Развернуть ветку
Marat Hakimov

Digital-агентство Атвинта, спасибо.

Интересно про устройство для смешивания жидкостей для парения:

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

— есть ли конкретная цифровая метрика, типа "среднее время обслуживания одного покупателя сократилось на Х%, на Z минут"?

Ответить
Развернуть ветку
Атвинта digital agency
Автор

"Среднее время обслуживания" - не совсем наша метрика, там есть много факторов, на которые наша работа не повлияла. А вот сокращение времени на программирование пропорций жидкостей было до 1 минуты, стало в среднем до 12 секунд, а при стандартных пропорциях - 2-3 секунды: нажать одну кнопку пропорций плюс кнопка "Подтвердить".

Ответить
Развернуть ветку
Marat Hakimov

Спасибо за конкретику, Digital-агентство Атвинта.

Получается, процесс улучшился в 5-30 раз.
Кмк, это оч красиво.
И, похоже, корректно будет сказать, что
""Среднее время обслуживания сократилось на 48- 58 секунд".

Процветания Человекам из КемероВО!-)
"..они знают ходы под землёй..."))

Ответить
Развернуть ветку
Koxae Sun

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

Ответить
Развернуть ветку
Kot Newman

Статья топ, ребята вы замечательные)

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо :)

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

Хорошая статья. Спасибо

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Благодарим :)

Ответить
Развернуть ветку
Art Grom

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

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Во всем нужен баланс, согласны. Целенаправленно делать страшненький интерфейс с мыслью "и так схвают" - плохая стратегия :)

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

Не могу согласиться со всем, но в целом статья отличная. Особенно порадовали конкретные примеры. Все сжато, но информативно. Спасибо!

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

Наконец-то дизайнер ответственен не за все)

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Вы дизайнер?)

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

да

Ответить
Развернуть ветку
Sergey Nemerov

Что забавно, в серьезных взрослых интерфейсах, особенно в военной отрасли, ещё лет 50 назад догадались, что хороший интерфейс тот, который обеспечивает выживание пилота, повышает жизнеспособность корабля или облегчает общий вес ракеты. А не вылизанные кнопусечки. Хорошо что сия мудрость наших дедов - сегодня начинает доходить и до хипстеров, это позитивный сдвиг сознания))) не прошло и сотни лет

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