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

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

Содержание

Личный кабинет — это полноценный интерфейс для управления своими действиями и данными. И он нужен практически везде, например:
  • на eCommerce-платформах — чтобы отслеживать статус заказов, оплачивать их, оформлять возвраты, получать бонусы
  • в банковских приложениях — чтобы контролировать и управлять счетами, оплачивать покупки, услуги ЖКХ, совершать переводы
  • в сфере услуг — от интернет-провайдеров до медицины — для записи, отмены, переноса, оплаты, настройки подписки
  • на образовательных платформах — для доступа к материалам, отслеживания прогресса, связи с преподавателями
Приложение Золотого Яблока
На сайте и в приложении «Золотого Яблока» пользователи могут комфортно оформлять заказы и отслеживать их статус через личный кабинет.

Источник: Приложение Золотое яблоко

Личный кабинет стал центром управления и решения всех задач пользователя

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

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

Вне зависимости от сферы можно выделить следующие цели пользователя:

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

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

Удобство личного кабинета и доступность

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

Персонализация

Пользователь может получать персональные предложения, что повышает его лояльность к сервису

Прозрачность взаимодействия

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

Источник: Приложение YPLACES

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

Снижение нагрузки на поддержку

Пользователи самостоятельно могут выполнить большинство типовых задач, например, записаться на прием

Повышение лояльности и удержания клиентов

Чем удобнее пользователям взаимодействовать с самим сервисом и его ЛК, тем выше их удовлетворённость, соответственно, выше вероятность, что пользователь вернётся снова

Сбор данных и аналитика поведения

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

Формирование образа современной компании

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

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

  • Сложная или непоследовательная навигация: пользователю приходится долго искать нужный раздел
  • Лишние шаги: чтобы изменить один параметр, нужно пройти 5 лишних окон
  • Неочевидные и неинтуитивно понятные названия: «Мои операции» вместо «История заказов»
  • Нет обратной связи при совершении действий: пользователь нажал кнопку, и ничего не происходит
  • Ошибки без объяснений: «Что-то пошло не так» — и нет шансов понять, в чём проблема и как решить её
Окно входа в приложении FitStars и на сайте Freepik
В обоих примерах некорректно был введен email адрес — пропущено «.ru».
В первом примере при авторизации на сайте сообщение об ошибке «Эти учётные данные не соответствуют нашим записям» может сбить с толку и запутать пользователя. Во втором случае ошибка формулируется конкретно: «Пожалуйста, укажите свой адрес электронной почты в формате name@example.com», — и это позволяет пользователю сразу понять, что и как нужно исправить.

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

Чек-лист

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

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

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

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

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

◻ Каждое действие пользователя имеет быстрый и понятный отклик: система отображает пользователю информацию — Заказ оформлен, Заявка отправлена и т. д. Если пользователь некорректно ввел данные, система подсвечивает поле, где была совершена ошибка, и дает пояснение, что пошло не так

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

Источник: Приложения Helix и Apteka.ru
Больше полезных чек-листов и разборов мировых кейсов — в наших каналах. Короткий формат для тех, кто любит быстро.

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

◻ Самые популярные действия совершаются в пару кликов

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

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

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

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

◻ Изменить данные, отменить заказ, скачать документы, записать на прием и т. д. — все это можно сделать через ЛК без необходимости клиенту писать или звонить представителю компании

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

Источник: Приложение Case

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

◻ Обращайтесь к пользователю по имени, поздравляйте с днем рождения, предлагайте персональные акции

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

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

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

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

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

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

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