Москва
Кемерово

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

сложность:  

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

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

В каких случаях личный кабинет необходим

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

Личный кабинет пригодится в следующих случаях:

  • Интернет-магазин продает товары (ozon.ru)
  • Сайт предоставляет услуги, которые можно заказать онлайн, а также по которым можно отслеживать статус выполнения и другие параметры (gosuslugi.ru)
  • На сайте ведется онлайн-запись (vrach42.ru)
  • Работает система бронирования (airbnb.ru)
  • Пользователю нужно отслеживать прогресс, делать собственные подборки (netflix.com)
  • На сайте оставляют отзывы и комментарии (flamp.ru)

Сайту не нужен личный кабинет, если пользователь:

  • не возвращается к действиям, совершенным на нем;
  • не оставляет комментарии и не общается с другими пользователями сайта.

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

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

Преимущества личного кабинета

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

  • Пользователь сам взаимодействует с продуктом. Например, самостоятельно выбирает и заказывает товары, записывается на услуги без участия менеджера, делает подборки избранного. 
  • Сохраняется история действий. А значит, пользователь может повторно оформить заказ или вернуться к информации о нем. Стоимость, сроки и даты, артикулы, прогресс могут пригодиться позже. Это актуально не только для B2C, но и для B2B-ниш, где клиенты ведут отчетность, планирование, бюджетирование и другие процессы, требующие точных данных.
  • Дополнительный функционал повышает конкурентоспособность компании. Например, человек скорее придет в лабораторию, которая прикрепляет результаты онлайн в личном кабинете, и, наоборот, не будет сдавать анализы там, где нужно звонить или лично обращаться в регистратуру.
  • Компания использует данные для внутренних целей. Интеграция личного кабинета с CRM и другими сервисами автоматизирует ведение бухгалтерии, формирует клиентскую базу, помогает следить за остатками. 

Что должно быть в личном кабинете

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

«Мы проводим аналитику, которая помогает определить наполнение и функции личного кабинета. На этом этапе применяем ряд инструментов: глубинные интервью с заказчиком и конечными пользователями, построение User flow (последовательность действий пользователя на сайте), составление тест-кейсов, юзабилити-исследование, разработка CJM (карты пути клиента) и т.д. Через такие исследования мы выясняем, что хотят видеть в личном кабинете люди, которые будут им пользоваться, и уже на основе этого разрабатываем прототипы».User Flow

user flow, разработка личного кабинетаТак выглядит User flow по одному из действий пользователя
кейсы по поиску на сайтеТест-кейсы по сайту для поиска работы

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

Клиническая медико-санитарная часть «Энергетик»

«Энергетик» — это большой медицинский центр со множеством отделений от клинико-диогностическиской лаборатории до пластической хирургии. Сюда за лечением по ОМС, ДМС, а также платным приемом съезжаются люди со всего региона.

онлайн запись к врачу, энергетик

Что есть в личном кабинете пациента:

  • Список услуг по видам: прием врача, анализы, диагностика и т.д. По отдельным баннерам легко сориентироваться и найти нужную услугу.
  • Запись на прием, сдачу анализов (необходимо подтвердить личность в клинике).
  • Корзина. В нее можно добавить услуги и оплатить прямо на сайте.
  • Посещения. Предстоящие и завершенные посещения клиники.
  • Результаты исследований. Подгружаются поликлиникой при подтверждении личности.
  • Назначения. Не нужно хранить бумажный рецепт и держать в голове назначенные исследования и анализы.
  • История оплат. Фиксируются и онлайн-оплаты через личный кабинет, и в клинике.

Телеком-провайдер Subnet

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

Действия, которые доступны клиенту провайдера:

  • посмотреть тариф и остаток на счете;
  • внести абонентскую плату;
  • сменить тариф, подключить или отключить услуги;
  • приостановить услуги на время, например, если уехали в отпуск;
  • получить отсрочку платежа.

Сервис доставки товаров из IKEA Smart Logistic

IKEA Smart Logistic занимается доставкой товаров из магазинов IKEA в города Кемеровской области. Клиенты оформляют заказ на доставку через сайт.

онлайн запись на прием

В профиле пользователя находится:

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

Что надо учесть при разработке личного кабинета

Карина Скородинская, старший дизайнер нашего агентства, выделяет три основных принципа разработки личного кабинета:

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

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

карина, ux/ui дизайне

Скородинская Карина

старший дизайнер

digital-агентство Атвинта

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

  • Не запрашивайте лишнюю информацию. Хватит основных данных о клиенте: ФИО или название организации, номер телефона, e-mail или адрес сайта для B2B-сегмента, документы клиента при предоставлении юридических и банковских услуг. Со временем можно запросить заполнить дополнительные графы.
  • Добавьте авторизацию через соцсети. Так пользователю не придется запоминать лишний пароль.
  • Добавьте каналы для общения: форму обратной связи, чат-бот или звонок в колл-центр.
  • Продумайте вопросы безопасности. Пользователю важно знать, что его данные не попадут в открытый доступ. Используйте протоколы шифрования и двухфакторную верификацию.
  • Сделайте восстановление доступа простым. Так пользователю будет удобно вернуться в личный кабинет, если он забудет пароль от вашего ресурса.

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

Частые ошибки

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

Неочевидное воздействие 

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

Нельзя редактировать поле 

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

Сложный или перегруженный интерфейс

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

Закрытый доступ к сайту и его функциям

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

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

Выводы

  • Личный кабинет нужен, если сайт предполагает персонификацию или возврат к действиям. Это актуально для интернет-магазинов, провайдеров, банков, клиник, форумов, некоторых компаний из сферы B2B.
  • Функциональность. Поставьте себя на место клиента и подумайте, что ему нужно от персонального раздела. Например, в интернет-магазине пригодятся заказы, статус доставки, бонусный счет, а в клинике — запись визитов и выгрузка готовых анализов. 
  • Безопасность. Важно гарантировать защиту от слива личной и платежной информации, проработать безопасность хранящихся на сайте баз данных.
  • Интерфейс. Не перегружайте личный кабинет лишними элементами дизайна и сложным копирайтингом. Все должно быть лаконично, чтобы клиент не запутался в нем.
  • Ошибки. Не раздражайте пользователя мелкими недоработками, а чтобы избежать этого, протестируйте личный кабинет перед запуском.

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

Оцените пост:
15
Не очень

Читайте также

Читать весь блог
приложение для записи к врачу

Записали на прием 1000 пациентов онлайн: как работает приложение после релиза

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

09 марта 2023
разработка мобильного приложения

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

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

21 октября 2022