Как создать личный кабинет, который понравится пользователям

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

Как создать личный кабинет, который понравится пользователям

Зачем делать личный кабинет

У пользователя должно быть ощущение «центра управления» сайтом. Когда вы планируете, какие возможности включить в личный кабинет, держите в уме все пользовательские цели, например:

  1. Посмотреть расписание событий и зарегистрироваться.
  2. Подключить сервисы и услуги.
  3. Задать вопрос в чате.
  4. Проверить баланс счёта и бонусов.
  5. Посмотреть статус и историю заказов.

Чем это удобно компании?

  1. Собрать данные о пользователе для конкурса.
  2. Интегрировать внутреннюю CRM, чтобы видеть заказы, оплату, личную информацию.
  3. Повысить качество обслуживания и лояльность аудитории.
  4. Общаться с пользователем через еще один канал.
Личный кабинет от <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fdribbble.com%2FLeavingstone&postId=73397" rel="nofollow noreferrer noopener" target="_blank">Leavingstone</a> для сбора статистики
Личный кабинет от Leavingstone для сбора статистики

Баланс удобства и безопасности

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

Автор Telegram-канала «Про удобство» Михаил Греков советует по каждому полю на форме регистрации задавать себе вопрос: нужна ли эта информация именно при регистрации. Кроме того:

  1. Сделайте все поля обязательными, необязательные всё равно никто не заполнит.
  2. Автоматически логиньте пользователя после завершения регистрации.
  3. Для рунета: предупредите пользователя, что он указывает пароль кириллицей, — наверняка, случайно.
Форма авторизации на сайте журнала «Сноб»
Форма авторизации на сайте журнала «Сноб»

Пользовательский путь

Google Cloud советует, как сделать сценарий использования аккаунта привычным и безопасным:

  1. Оставьте возможность сохранять пароли. Они должны храниться в зашифрованном виде с помощью, например, PBKDF2, Argon2, Scrypt или Bcrypt. Разрешите пользователям использовать любые символы и длину пароля, ведь они защищены криптографией.
  2. Разрешите авторизацию через соцсети, так вы избавляете пользователя от необходимости запоминать ещё один пароль.
  3. Используйте двухступенчатую верификацию. У подтверждения по SMS много слабостей, но это удобно пользователю и многократно повысит уровень безопасности.
  4. Разделите концепт авторизации пользователя и личного кабинета. Ваши пользователи — это не электронные письма, номера телефонов или ID. Пользователи на сайте — это уникальный набор персональных данных и опыта использования вашего сервиса.
  5. Разрешите нескольким ID присоединяться к одному личному кабинету. Пользователь, неделю назад заходивший под логином и паролем, может выбрать авторизацию через Google, не понимая, что он создает второй аккаунт.
  6. Разрешите удалять аккаунт и сопутствующие данные.
Как создать личный кабинет, который понравится пользователям

Среди хороших примеров пользователи Quora предсказуемо называют Facebook, Google, LinkedIn, Twitter, Invision, а также отмечают удобство аккаунтов платформы для блогов Medium:

  1. Вход через Facebook или Google автоматически подтягивает аватар из этих аккаунтов.
  2. Чтобы добавить персональные данные, нужно просто кликнуть на пустое поле и начать печатать, всё интуитивно.
  3. С первой секунды понятно, что нужно делать на этом сайте: писать текст.
  4. Чистый UI. Пользовательский контент — это главный элемент на странице.
Как создать личный кабинет, который понравится пользователям

Функции

Как создать личный кабинет, который понравится пользователям

Личные кабинеты можно разбить на два типа.

  • Утилитарные кабинетыс простыми функциями для рекламных компаний и промомеханик. Взаимодействие с интерфейсом минимальное: нужна возможность принять участие и следить за статусами.

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

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

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

Там могут быть функции управления услугами, оплаты, бонусной программы. Все функции открываются после регистрации.

Как создать личный кабинет, который понравится пользователям

Best practice

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

Если на продуктовом или промосайте большую роль играет эмоциональное вовлечение, то в персональной зоне этого не бывает. Этот фактор накладывает отпечаток на все: интерфейс, look & feel, структуру меню и страниц кабинета.

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

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

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

На сайте Alfa Travel пользователь в личном кабинете узнаёт баланс накопленных миль и обменивает их на билеты
На сайте Alfa Travel пользователь в личном кабинете узнаёт баланс накопленных миль и обменивает их на билеты

Подводим итог

  1. Личный кабинет пользователя входит в UX-экосистему.
  2. Интерфейс гораздо более рациональный и менее эмоциональный, чем сайт.
  3. Акцент на пользовательском взаимодействии и интерфейсных характеристиках продукта.
Личный кабинет для обмена купонами от <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fdribbble.com%2Frwds&postId=73397" rel="nofollow noreferrer noopener" target="_blank">Rwds</a>
Личный кабинет для обмена купонами от Rwds

Чеклист

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

"разным набором функциq" - поправьте)

2
Ответить

Подскажите конструктор сайтов или лендосов, в функционале которого уже заложено создание ЛК. Чтобы было так же просто, как два пальца обоссать. Есть такой конструктор?

Ответить

Наиболее нормальный и известный конструктор сейчас - tilda

1
Ответить

На темфоресте можно найти что-то подходящее, например, покупая тему для админского-дашборда под WordPress, часто идут на тех же рельсах плагины для полноценных ЛК https://themeforest.net/category/site-templates/admin-templates

Ответить