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

Когда вы в последний раз делали заказ по телефону? Или уточняли у поддержки статус доставки? Сегодня это звучит странно и неудобно. Всё — от покупки до возврата — пользователи привыкли и хотят делать самостоятельно, онлайн и в пару кликов без звонков, писем или долгого ожидания.

Об этом и о том, какой должна быть разработка личного кабинета, рассказывает Яна Иоффе, юзабилити-специалист в Convergent.

Личный кабинет – это полноценный интерфейс для управления своими действиями и данными. И он нужен практически везде, например:

1. на eCommerce-платформах – чтобы отслеживать статус заказов, оплачивать их, оформлять возвраты, получать бонусы
2. в банковских приложениях – чтобы контролировать и управлять счетами, оплачивать покупки, услуги ЖКХ, совершать переводы
3. в сфере услуг – от интернет-провайдеров до медицины – для записи, отмены, переноса, оплаты, настройки подписки
4. на образовательных платформах – для доступа к материалам, отслеживания прогресса, связи с преподавателями

На сайте и в приложении «Золотого Яблока» пользователи могут комфортно оформлять заказы и отслеживать их статус через личный кабинет. Источник: Приложение Золотое яблоко

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

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

1. Управлять профилем: редактировать личные данные, управлять подписками и уведомлениями
2. Проверить статус: заказа, доставки, оплаты, подписки, заявки, бронирования
3. Получить документы: счета, чеки, выписки
4. Обратиться в поддержку: задать вопрос, оставить жалобу
5. Повторить действие: перезаказать товар, скопировать информацию
6. Получить персональный опыт в виде скидок, бонусов, рекомендаций

ЛК — это место, где пользователь работает с информацией, а не просто просматривает её. Хороший ЛК должен быть логичным и понятным, тогда пользователь получает следующие преимущества:

1. Удобство личного кабинета и доступность: пользователь может управлять услугами, получать информацию в любое комфортное время суток, экономя своё время и силы
2. Персонализация: пользователь может получать персональные предложения, что повышает его лояльность к сервису
3. Прозрачность взаимодействия: доступ к истории заказов, платежей, записей, общение с поддержкой

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

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

Какие преимущества получает бизнес:

1. Снижение нагрузки на поддержку: пользователи самостоятельно могут выполнить большинство типовых задач, например, записаться на прием
2. Повышение лояльности и удержания клиентов: чем удобнее пользователям взаимодействовать с самим сервисом и его ЛК, тем выше их удовлетворённость, соответственно, выше вероятность, что пользователь вернётся снова
3. Сбор данных и аналитика поведения: ЛК — это ценный источник данных о клиентах и их поведении, что помогает улучшать сервис, UX и делать пользователям более релевантные персональные предложения
4. Формирование образа современной компании: удобный и понятный ЛК помогает выделиться на фоне конкурентов и показать, что компания идёт в ногу со временем

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

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

1. Сложная или непоследовательная навигация: пользователю приходится долго искать нужный раздел
2. Лишние шаги: чтобы изменить один параметр, нужно пройти 5 лишних окон
3. Неочевидные и неинтуитивно понятные названия: “Мои операции” вместо “История заказов” 
4. Нет обратной связи при совершении действий: пользователь нажал кнопку, и ничего не происходит
5. Ошибки без объяснений: “Что-то пошло не так” – и нет шансов понять, в чём проблема и как решить её

В обоих примерах некорректно был введен email адрес — пропущено “.ru”. В первом примере при авторизации на сайте сообщение об ошибке “Эти учётные данные не соответствуют нашим записям” может сбить с толку и запутать пользователя. Во втором случае ошибка формулируется конкретно: “Пожалуйста, укажите свой адрес электронной почты в формате name@example.com”, — и это позволяет пользователю сразу понять, что и как нужно исправить. Источники: Сайт FitStars (пример 1), сайт Freepik (пример 2)

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

Ошибки в интерфейсе личного кабинета — это не только про неудобство, но и про потери: и финансовые, и репутационные.

Вот чек-лист, по которому мы в Convergent сами проверяем ЛК. Он поможет понять, что работает, а что точно стоит поправить:

1.Простая и логичная навигация

1. Пользователь всегда понимает, в каком разделе он находится и как вернуться назад
2. Один раздел = одна задача: например, история покупок и избранные товары пользователя находятся на разных страницах. 
3. Совет: Используйте знакомые UI-паттерны. Пользователям будет проще ориентироваться в ЛК, если его структура будет соответствовать привычным шаблонам сервисов популярных интерфейсов. Не стоит “изобретать велосипед”, например, разместите поиск и фильтры по аналогии с популярными сайтами из вашей сферы. Это снизит когнитивную нагрузку на пользователя и повысит комфорт использования сервиса.

2.Понятные статусы:

1. Каждое действие пользователя имеет быстрый и понятный отклик: система отображает пользователю информацию - Заказ оформлен, Заявка отправлена и тд. Если пользователь некорректно ввел данные, система подсвечивает поле, где была совершена ошибка, и дает пояснение, что пошло не так
2. Отслеживания процессов (доставка, подтверждение, проверка, запись на услугу) легко найти и считать информацию

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

3.Минимум шагов до цели:

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

4.Понятный язык:

1. Используйте понятный и простой язык без сложной терминологии. Например, “Уже покупали” или “Мои покупки” вместо “История операций клиента”

5.Возможность самостоятельного решения задач:

1. Изменить данные, отменить заказ, скачать документы, записать на прием и т.д. – все это можно сделать через ЛК без необходимости клиенту писать или звонить представителю компании
2. Есть возможность обращения в чат с поддержкой – на случай, если у пользователя все-таки возникнут вопросы или трудности

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

6.Делайте контент персональным:

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

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

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

7.Адаптивность:

1. ЛК и все его функции должны быть доступны и удобны с любого устройства: телефон, компьютер, планшет

8.Безопасность и доверие:

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

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

Создавайте простые и понятные ЛК — и обязательно продолжайте регулярно анализировать поведение пользователей: какие разделы пользуются большей популярностью, где у пользователей чаще всего возникают проблемы. Это позволит быстро определять слабые места и улучшать личный кабинет. Ведь лучше всего именно пользователи подскажут, что действительно требует внимания.