Москва
Кемерово

Как устроен хороший UX дизайн интерфейсов на самом деле

сложность:  

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

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

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

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

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

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

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

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

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

UX дизайн интерфейса

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

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

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

Пример UX дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UX проектирование интерфейсов

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

UX пользовательского интерфейса

Подробнее о процессе мы рассказали в кейсе.

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

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

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

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

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

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

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

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

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

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

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

Принципы и основы UX дизайна

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

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

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

Проектирования пользовательских интерфейсов и UX схем
UX элементы интерфейса

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

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

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

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

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

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

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

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

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

Оцените пост:
8
Не очень

Читайте также

Читать весь блог
Атвинта стала соавтором курса по UX/UI-дизайну от Нетологии

Атвинта стала соавтором курса по UX/UI-дизайну от Нетологии

Для студентов образовательной программы мы разработали блок по анимации интерфейсов. Запись на курс открыта на сайте площадки.

13 января 2023
Как вставить 3D модель на сайт?

Как 3D влияет на проект: подходы, бюджет и выгода для бизнеса

3D — это трендовый инструмент, который мы активно используем на сайтах наших заказчиков. Мы разобрали несколько аспектов этой технологии, которые важно понимать, если вы планируете использовать 3D в своем проекте.

01 марта 2023