UX/UI: сходства, различия и оценка эффективности

В сфере дизайна цифровых продуктов выделяют две формы: пользовательский опыт (UX – user eXperience) и пользовательский интерфейс (UI – user interface). Под UX зачастую понимают только дизайн, красивую картинку, хотя на практике это “зона ответственности” UI.

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

О чём поговорим:

• Принципы UX/UI
• Сходства и различия UX и UI
• Какие тренды существуют в UX/UI
• Задачи UX
• Как оценить эффективность UX
• Зоны ответственности UX и UI
• Аудит UX: пример из практики

Хотите разобраться в этом поподробнее? Тогда читайте дальше!

Основы UX/UI

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

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

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

Сходства и различия UX и UI

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

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

Тренды

Осознание бизнесом важности влияния UX на продукт привело к тому, что проектирование UX/UI стало одним из необходимых этапов разработки. В результате сложилось несколько трендов:

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

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

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

Задачи UX

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

• Дать пользователю ощущение уникальности продукта;
• Побудить пользователя изучать продукт и пользоваться контентом;
• Убедить нового пользователя “попробовать” продукт;
• Побудить пользователя продолжать применять продукт;

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

Какую пользу UX приносит бизнесу

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

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

Таким образом, UX действительно помогает бизнесу заработать:

• Увеличить конверсию
• Повысить продажи
• Повысить лояльность пользователей

Кроме того, тщательная работа с UX способна сделать продукт понятнее, а также сэкономить на его обслуживании:

• Снизить расходы на поддержку
• Снизить недовольство пользователей (и даже избежать судебных издержек)
• Снизить затраты на привлечение пользователей

UX может навредить бизнесу?

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

HEART: как оценить эффективность UX

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

• H — happiness (счастье пользователя)
• E  — engagement (вовлеченность)
• A  — adoption (принятие)
• R  — retention (удержание)
• T  — task (успешность достижения цели)

Метрики эффективности UX: примеры

Метрики счастья пользователя:

• Рост числа положительных отзывов и сокращение отрицательных
• Рост числа сделок, покупок
• Удовлетворенность (net promoter score)

Метрики вовлечения:

• Число посещений в неделю, повторных визитов
• Количество пользователей, которые нажимают кнопку “Поделиться”
• Число фотографий, загруженных одним пользователем

Метрики принятия:

• Новые подписки, регистрации
• Покупки, сделанные новыми пользователями

Метрики удержания:

• Повторные покупки
• Продление подписки, обновление до последней версии
• Число активных пользователей

Метрики успешности выполнения задач:

• Время на выполнение задачи (например, сколько времени уходит на совершение покупки)
• Сокращение числа ошибок пользователей
• Нашел ли пользователь то, что искал

Зоны ответственности UX и UI

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

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

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

За что отвечает команда UX

• Коммуникации  — способность объяснять и интерпретировать, выступать посредником между командой разработчика и заказчиком.
• Исследование пользователей. Понимать пользователей, их боли и желания для того, чтобы сделать продукт таким, как им нужно.
• Информационная архитектура. Дизайнер упорядочивает беспорядок в проекте, рисует план действий, который позволяет дойти от начала до результата.
• Работа в команде. Навыки продуктивного общения обязательны. Может ли специалист доступно объяснить свою идею? А помочь в этом другому члену команды - программисту, директору, будущим пользователям продукта?
• Проектирование «сценария взаимодействия» (User-Flow)  — последовательности макетов, по которым строится путь пользователя к цели.
• Тестирование UX/UI. Проверка корректности работы продукта. Это касается не только дизайна интерфейса UX/UI, но и всего customer journey  — от первого соприкосновения с продуктом до покупки.
• Аналитика. Эксперт на основе аналитических данных определяет, как пользователи применяют продукт, что им нравится и не нравится.
• UX writing (копирайтинг). Создание подписей, сценариев диалогов и т.п. В большинстве продуктов текст является основой контента.

За что отвечает дизайнер UI

• Сборка макетов (Wireframe)  — это каркас интерфейса, состоящий из линий, прямоугольников и фигур.
• Дизайн, визуальная составляющая интерфейса. Работа с продуктом должна оставлять у пользователя приятное впечатление.
• Прототипирование. Создание прототипа  — простой способ увидеть, как всё будет работать.
• Сторителлинг. Инициировать действие со стороны пользователя, используя минимум слов. Важно добиться нужной реакции с помощью визуального образа, чтобы человек взаимодействовал с интерфейсом системы, согласно заранее продуманному сценарию. При этом важно, чтобы он думал, что “я сделал это сам”.
• Графика и анимации. Дизайнер должен уметь работать с графикой, создавать элементы и переходы.

Исследование юзабилити UX/UI: пример из практики

Мы в компании SimbirSoft c 2001 года создаем программное обеспечение на заказ. К нам обращаются за разработкой решений для бизнеса с нуля, а также в тех случаях, когда нужно “спасти” продукт и повысить его эффективность.

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

Мы в своей практике часто работаем с решениями для дистанционного банковского обслуживания (ДБО). Рассмотрим на примере банковского мобильного приложения, как аудит UX помогает наметить вектор развития продукта.

Аудит банковского продукта

В 2017 году к нам обратился крупный региональный банк СКБ. Перед нами стояла задача усовершенствовать мобильный банк, сделать его удобнее для клиентов банка из числа малого и среднего бизнеса.

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

Как мы работаем с гипотезами:

1. UX/UI анализ продукта начинается с выявления проблем. Для этого мы анализируем поведение пользователей и находим “узкие места” при взаимодействии с приложением.В данном случае мы опросили тех специалистов, которые являются ключевыми пользователями приложения – в первую очередь это бухгалтеры, юристы и экономисты. Выяснилось, что больше всего времени они тратят на работу с бумагами, проверку данных и перевод информации (реквизитов) из финансовых документов в электронный вид. При этом случаются ошибки: например, пользователь может ошибиться при вводе номера расчетного счета.
2. Далее исследуем, действительно ли существует эта проблема и насколько она важна.
3. После подтверждения проблемы мы выдвигаем гипотезу о решении. На основе своего опыта мы предложили банку добавить в приложение функцию автоматического распознавания данных финансовых документов. Также мы оценили эту гипотезу вместе с ключевыми пользователями продукта.
4. Когда гипотеза подтверждена, мы детально прорабатываем новую функциональность. С помощью автоматического распознавания работа пользователя с документами сводится к тому, чтобы сфотографировать данные на смартфон. При этом данные автоматически загружаются в нужные формы, передаются в банк, проверяются и подтверждаются. Такой алгоритм работы позволяет быстро и без ошибок переводить информацию в электронный вид.
5. Далее мы протестировали новую функциональность и проверили ее в фокус-группах. Как показала практика, новый алгоритм работы позволяет быстро и без ошибок переводить информацию в электронный вид, ускорить и упростить работу пользователей с мобильным банком.

С новым ДБО наш партнер вошел в ТОП5 по версии Markswebb: мобильный банк занял 4 место среди лучших банков для малого бизнеса (2017 год), а онлайн-банк – 2 место в рейтинге интернет-банков для индивидуальных предпринимателей (2018 год). Подробнее об аудите банковского продукта мы рассказывали ранее в нашем блоге.

Подводя итоги

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

Приглашаем узнать больше о наших продуктах в разделе “Портфолио”: