UX/UI советы для развития продукта

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

Грамотное проектирование важно для всего — от сайта проекта до офлайн-процессов. Одна из составляющих конкретно цифрового дизайна — UX/UI, то есть работа над удобными, красивыми и понятными интерфейсами диджитал-продуктов. Разберемся подробнее.

Что такое продуктовый дизайн

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

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

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

UX/UI как составная часть продуктового дизайна

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

Поэтому таким продуктам нужен грамотный UX/UI, то есть дизайн пользовательского опыта и интерфейсов.

• UX — user experience: какой опыт человек получает, когда пользуется продуктом. Откуда приходит, на что смотрит, куда заходит в результате, какие ошибки может допустить.
• UI — user interface, дизайн интерфейса продукта. Какие есть блоки и формы, где они расположены, как подчеркнуты, насколько красивы эстетически.

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

Как работать над дизайном диджитал-продукта

В идеале продуктовый дизайн начинается еще до выхода продукта на рынок. Тут важно действовать последовательно:

1. Определить задачу — понять, что вообще нужно сделать и зачем. В аутсорсе это бриф заказчика, в инхаус-дизайне — совещания и брейнстормы.
2. Проанализировать метрики и конкурентов — как ситуация обстоит сейчас, какие метрики вырастить, как всё устроено у похожих компаний и почему так нужно или не нужно делать.
3. Исследовать целевую аудиторию — как она ведет себя в разных ситуациях, какие продукты предпочитает и почему.
4. Сформулировать гипотезу — как именно пользователи будут вести себя на страницах сайта или диджитал-сервиса.
5. Спроектировать структуру продукта — составить карту пути пользователя CJM, разработать пользовательские сценарии USM, чтобы человек на сайте делал в первую очередь то, что нужно бизнесу.
6. Продумать вайрфреймы — приблизительные образы будущего дизайна, где видно структуру продукта. Вайрфреймы основаны на карте пути и на пользовательских сценариях.
7. Создать визуальный дизайн — отрисовать макеты, уже не приблизительные, а полноценные изображения будущего дизайна.
8. Протестировать макеты на пользователях — посмотреть, насколько им понятно и удобно пользоваться дизайном. Это стоит делать еще до того, как внедрять новый интерфейс.
9. Реализовать дизайн — поставить задачу разработчикам и оставаться с ними на связи, чтобы при необходимости уточнять детали.
10. Проверить работу дизайна — сначала самостоятельно, а потом на пользователях, например с помощью A/B-тестирования.
11. Проанализировать результат — отслеживать метрики и их изменения, интерпретировать их и делать выводы на будущее.

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

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

Что еще нужно учитывать при разработке дизайна

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

Вот какие рекомендации помогут создать качественный дизайн

Проектировать интерфейс с помощью пользовательских историй

Это значит — понимать потребности, боли и возможные сценарии поведения пользователя. Человек может в процессе заказа отвлечься на обед и забыть, на каком этапе он находится и что делать дальше. Он может ввести неверные данные, уйти не на ту страницу, ему могут быть нужны детали, о которых вы даже не задумывались: скажем, возможность быстро отменить удаление товара из корзины. Чтобы создать хороший дизайн, нужно знать всё это и смотреть на продукт со стороны пользователя. А для этого — проводить тестирование, собирать от людей обратную связь и прислушиваться к ней.

Смотреть на продукт как на единое целое

Бывает так, что части продукта создают в разные промежутки времени. Сначала быстрый пилот, потом — дополнительные функции. На то, как всё это выглядит, смотрят «в моменте», а в итоге получают очень разнородный и неочевидный дизайн. Чтобы такого не было, продукт нужно сразу воспринимать как единое целое, где всё взаимосвязано со всем. Поэтому всегда смотрите на продукт целиком, а не только на отдельную его часть. Проверяйте, по какой логике пользователи переходят от одной части продукта к другой: это поможет составить последовательный «путь клиента». А еще помогут стайл-гайды, или UI-киты: наборы шаблонных элементов с похожим дизайном, чтобы оформление не различалось от экрана к экрану.

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

Тестировать разные варианты

Один из способов придумать хороший дизайн — A/B-тестирование: пользователям предлагают разные варианты дизайна, а потом смотрят, по какому из них результаты были лучше. Это поможет выбрать из нескольких идей ту, которая гарантированно работает на результат — а еще так можно найти интересные инсайты.

Пример: у Brele был кейс, где мы делали редизайн маркетплейса автозапчастей Emex. Мы провели A/B-тестирование для вариантов оплаты: залипающая кнопка скроллинга к списку вариантов или автоматический предвыбор последнего варианта. Вариант с кнопкой доскролла повысил конверсию среди новых пользователей, а с предвыбором последнего использованного варианта оплаты лучше сработал среди текущих клиентов.

Адаптировать дизайн под разные устройства

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

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

Есть и менее очевидные моменты. Скажем, если пользователь зашел с телефона — выше шанс, что он не дома. А в дороге часто медленный интернет, и «тяжелые» элементы могут долго грузиться. Зато в приложении на телефоне можно скачать кино или музыку и пользоваться сервисом офлайн, а в браузере так нельзя. Всё это нужно учитывать, чтобы сделать общение пользователя с продуктом как можно более комфортным.

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

Управлять вниманием пользователя

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

Пример: посмотрите на две страницы сервисов Exist.ru и Emex. Обе страницы дают одинаковые сведения — рассказывают о возврате товара. Но первая страничка сухая и неинтересная, взгляд не выделяет важные моменты, а полотно канцелярского текста сложно воспринимать. А во второй расставлены акценты, отформатирован текст и есть яркие вставки. Ее легче читать.

Итоги: как развивать продукт с помощью UX/UI-дизайна

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

***

UX/UI-дизайн многообразен, и в нём тысячи деталей. Если вам нравится наш подход и вы хотите так же — приходите на аудит по методике бюро Brele. Мы поможем сделать продукт привлекательным.