Дизайн интуитивного интерфейса: как простота и удобство повышают лояльность клиентов

Маргарита Савченко

продуктовый дизайнер клиентских приложений Flowwow

Привет! Я Маргарита Савченко, продуктовый дизайнер клиентских приложений маркетплейса Flowwow. Сегодня поговорим о том, какие принципы и инструменты помогают сделать интерфейс интуитивно понятным.

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

Анализ пользователей — фундамент эффективного интерфейса

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

• Внутренний и командный груминг. Дизайнеры сначала испытывают фичи сами: абстрагируются от реальности и представляют себя на месте пользователя. А потом проводят груминг-встречи, на которых с командой обсуждают идеи и на уровне небольшой фокус-группы проверяют гипотезы. 
• Коридорное тестирование. В этом случае мы показываем новый интерфейс коллегам и просим дать короткую обратную связь. Важно собирать отзывы в моменте, а не давать время на обдумывание. Цель коридорного исследования — понять, что нравится или отталкивает в продукте в первые минуты пользования.
• A/B-тесты. Это довольно дорогой метод, поэтому мы применяем его только для масштабных изменений в функционале. Например, новую категорию «Премиум» с товарами от 20 000 рублей мы вводили обособленно для пользователей из пяти городов, включая Москву, Санкт-Петербург и Екатеринбург, чтобы протестировать фичу на узкой аудитории. Сперва оценили, стали ли люди покупать больше из новой категории, увеличился или упал их средний чек и как изменилось поведение. Только после того, как мы убедились, что функция полезная и помогает пользователям, внедрили ее на всех остальных.
• Аналитика поведения пользователей. Для построения CJM (Customer Journey Map) — карты пути клиента можно использовать разные инструменты. Например, «вебвизор» — это бесплатный инструмент, который позволяет «подсмотреть» за действиями человека на сайте. На видеозаписи можно увидеть, на какие страницы пользователь переходит, чему он уделяет больше внимания, а в какой момент он закрывает вкладку. Единственный минус — для мобильных приложений опция недоступна.

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

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

Пользователи знают лучше: как мы работаем с обратной связью

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

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

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

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

Мы всегда исходим от рационального вопроса «зачем?». Это помогает понять, что изменение в интерфейсе даст продукту и как оно ускорит путь клиента. Если ответа нет, значит, опция не нужна. Также необходимо сверяться с цифрами. Если мы видим, что неудобное расположение кнопки не просто огорчает пользователей, а снижает покупки, то также повысим приоритет запроса и исправим ошибку.

Интуитивно понятный интерфейс: психология и принципы

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

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

Однако существуют фундаментальные правила, которые работают независимо от культуры:

1. Принципы гештальта (их около 7), описывающие, как человек группирует и разделяет визуальную информацию, чтобы получить простую для понимания форму. Например, принцип близости: элементы, расположенные рядом, воспринимаются как связанные. Это может быть заголовок и подзаголовок.
2. Цветовые ассоциации: красный — для ошибок, зеленый — для успешных действий.

Хотя цвет действительно влияет на восприятие, не стоит переоценивать его значение. Фиолетовый может ассоциироваться и с депрессией, и с творчеством — все зависит от контекста. Мы создаем простые и понятные интерфейсы, где каждый элемент служит конкретной цели, а не становится предметом для интерпретации.

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

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

1. Необходимо постепенно внедрять новые элементы. Например, такой опыт постепенных обновлений мы прошли во время масштабного ребрендинга Flowwow. Мы начали с внедрения нового онбординга (последовательности первых экранов), обновили экран загрузки и баннерную сетку. Только после этого заменили основные цвета, шрифты и изображения.
2. Важно сохранить удобные для пользователя шрифты. Кажется, что для консистентности в брендинге важно использовать одинаковые шрифты во всех продуктах, но это не всегда так. Важнее учитывать особенности площадки. Поэтому для Android- и iOS-приложений в процессе ребрендинга мы будем использовать системные шрифты, которые помогают плавно перейти из интерфейса телефона в приложение. Для Android это Roboto Flex, а для iOS — San Francisco.

Чем меньше действий, тем лучше

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

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

Ключ к удобному интерфейсу — понимание, на чем именно нужно сделать акцент. Для этого мы:

1. анализируем поведение пользователей с помощью различных инструментов;
2. постоянно задаемся вопросом: как можно сделать еще проще?

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

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