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

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 способна сделать продукт понятнее, а также сэкономить на его обслуживании:


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

cost.png

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

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

lost.jpg

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

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


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

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

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

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

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

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

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

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

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

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

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

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


HEART.png

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

skb.jpg

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

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

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


1406.png

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

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

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

Почувствуйте наш подход и повторите
успех наших клиентов

Напишите нам
МАКСИМ БЕЛЯКОВ
МАКСИМ БЕЛЯКОВ
СЕРГЕЙ ИСАКОВ
СЕРГЕЙ ИСАКОВ