Начните с вопросов клиента, а не с меню
Типичный кабинет проектируют от разделов: профиль, заказы, документы, настройки, поддержка. Получается меню, в котором всё есть, но человек не знает, куда нажать, чтобы узнать главное. Удобный кабинет проектируют от вопросов, с которыми клиент в него заходит.
Выпишите эти вопросы своими словами и отсортируйте по частоте. Хороший источник — обращения в поддержку и звонки менеджерам: каждый повторяющийся вопрос — кандидат на место в кабинете. Обычно список выглядит примерно так:
- Что с моей заявкой или заказом и когда будет готово?
- Нужно ли что-то от меня: документ, оплата, подтверждение?
- Сколько я должен и за что?
- Как записаться, продлить или заказать снова?
- Где мои документы, чеки и договоры?
- Как связаться с человеком, если что-то пошло не так?
Главный экран: состояние, а не приветствие
Первый экран кабинета часто занимают приветствие, баннер с акцией и плитки разделов. Полезнее поставить туда ответ на самый частый вопрос: текущие заявки с их статусом и то, что требует действия клиента. Если от человека нужен документ или оплата, это должно быть видно сразу, а не в третьем разделе меню.
Порядок на главном экране простой. Сверху — то, что требует действия сейчас. Ниже — то, что в работе, со сроками. Ещё ниже — история и быстрые действия: повторить заказ, записаться снова, скачать документы. Разделы меню остаются, но становятся вторым путём, а не единственным.
Если кабинетом пользуются разные роли — клиент, его бухгалтер, менеджер вашей компании, — главный экран у каждой свой. Бухгалтеру нужны счета и закрывающие документы, менеджеру — список заявок, где клиент ждёт ответа. Роли стоит определить до первого макета: от них зависят меню, права и половина состояний.
Статус заявки, который снимает звонки
Статус — самый ценный экран кабинета. Он отвечает на вопрос, ради которого клиент чаще всего звонит. Хороший статус показывает весь путь, а не одно слово «в работе»: какие этапы пройдены, на каком заявка сейчас, что будет дальше и когда.
В кейсе Нова Сервис — сайте сервисного центра касс — статус заявки устроен как пять этапов от «Принята» до «Выдана», текущий подсвечен. Это не закрытый кабинет, но задача та же, что у личного кабинета клиента: дать человеку узнать всё без звонка. Отдельное состояние «Нужны документы» выделено жёлтым и объясняет, что именно принести. Пустое состояние и «заявка не найдена» тоже нарисованы, с подсказкой, что делать дальше.
Из этого примера — три правила для любого статуса:
- Показывайте этапы целиком, чтобы было видно, сколько осталось.
- Выделяйте состояния, где нужно действие клиента, и объясняйте, какое.
- Рисуйте и редкие случаи: заявка не найдена, отменена, приостановлена.
Формы и запись: шаги на одном экране
Формы в кабинете — запись, заявка, оплата, смена данных — ломаются чаще всего. Клиент не понимает, на каком он шаге, что уже выбрано и почему кнопка не нажимается.
В Нова Сервисе запись собрана в пять шагов на одном экране: услуга, модель кассы, формат (в сервисе, выезд или удалённо), календарь со свободными окнами и контакты. Форматы, недоступные для выбранной услуги, отключаются сразу, а не после отправки. Справа талон-черновик заполняется по ходу: человек видит, что уже выбрал. Ошибки показываются рядом с полем и в сводке, а успех — это тот же талон с номером заявки и ссылкой на статус. Так запись и статус связаны: после отправки человек сразу знает, где следить за заявкой.
Ещё несколько деталей, которые делают форму спокойной. Телефон вводится с маской, а ошибка формата видна до отправки. Согласие на обработку данных стоит рядом с кнопкой, а не спрятано в мелкий текст внизу. Если форма длинная, введённое не теряется при случайном уходе со страницы. Кнопка отправки показывает, что запрос идёт, и не даёт отправить заявку дважды.
Пустые экраны, ошибки и загрузка
Кабинет живёт не только в идеальном случае. У нового клиента ещё нет заявок, сеть пропала посреди оплаты, сессия истекла, документ не загрузился. Если эти состояния не нарисованы, разработчик сделает их на своё усмотрение — обычно серым текстом «Нет данных» или технической ошибкой.
Что проектируем для каждого экрана кабинета:
- Пустое состояние: что здесь появится и с чего начать — например, кнопка первой записи.
- Загрузка: скелетон вместо пустого белого экрана.
- Ошибка: что случилось человеческими словами и что делать — повторить, проверить данные, связаться с поддержкой.
- Частичный успех: заявка отправлена, но документ не загрузился.
- Длинные данные: имена, адреса и списки, которые не помещаются в макет.
Мобильная версия и доступность
В кабинет нередко заходят с телефона: по ссылке из СМС или письма, в дороге, в очереди. Поэтому мобильную версию проектируем отдельно, а не сжимаем десктоп. В Нова Сервисе на телефоне диагност перестраивается в одну колонку, оглавление услуги становится лентой чипов, а снизу закреплена панель с ценой и кнопкой записи. Меню открывается шторкой, фокус клавиатуры остаётся внутри неё. Поля ввода — не меньше 16 пикселей, чтобы страница не увеличивалась при вводе на iPhone.
Доступность — не отдельная опция, а часть удобства. Стандарт WCAG 2.2 требует контраст обычного текста не меньше 4,5:1 к фону и цели касания не меньше 24×24 CSS-пикселя на уровне AA. Видимый фокус нужен тем, кто работает с клавиатуры, а уважение к системной настройке «меньше движения» — тем, кому мешает анимация. Всё это закладывается в дизайн сразу и почти не стоит денег, а переделка после запуска обходится дорого.
Как проверить кабинет до разработки
Кабинет — это сценарии, поэтому проверять его лучше прототипом, а не набором картинок. Соберите кликабельный прототип главных сценариев: проверить статус, записаться, загрузить документ. Дайте его нескольким клиентам с задачей и посмотрите, где они застревают. Если кабинет уже работает, начните с UX-аудита: пройдите ключевые сценарии, найдите, где люди теряются, и расставьте исправления по приоритету.
Хороший сигнал, что кабинет удался, — меньше одинаковых вопросов в поддержку. Поэтому полезно заранее договориться, какие обращения вы ждёте сократить, и смотреть на них после запуска.
Сколько стоит дизайн личного кабинета
У нас дизайн веб-сервиса или личного кабинета стоит от 90 000 ₽, ориентировочно от 6 недель: сценарии, прототип, макеты для десктопа и телефона со всеми состояниями и UI-кит для разработчиков. Дизайн CRM и дашбордов — тоже от 90 000 ₽, от 6 недель. Если кабинет уже есть и нужно понять, что в нём мешает, — UX-аудит от 60 000 ₽, ориентировочно от 1 недели. Кликабельный прототип главного сценария — от 30 000 ₽, от 1 недели.
Чтобы обсудить ваш кабинет, напишите нам в Telegram, позвоните или отправьте письмо. Пришлите список вопросов, с которыми клиенты звонят чаще всего, — с него и начнём проектирование.
