БлогУслугиПроекты
Обсудить проект
БлогУслугиПроектыОбсудить проект
Разработка сайтов

Кабинет клиента пока пуст: как написать первый экран

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

Редакция Feature IT
Редакция Feature IT·
25 окт
·
10 мин
·
Пустой личный кабинет как освещённая ниша с папкой для первого проекта

Клиент зарегистрировался, подтвердил почту и открыл личный кабинет. В центре экрана написано «Данных нет». Слева несколько разделов, сверху номер аккаунта. Человек пока ничего не заказывал и пришёл как раз за первым заказом, но интерфейс сообщает только об отсутствии записей.

Текст пустого кабинета должен объяснять следующее действие. Для этого редактору придётся узнать, кто открыл страницу, почему список пуст и какое действие доступно этому человеку. После такой проверки заголовок, подсказка и кнопка складываются в короткую инструкцию. Её можно проверить на макете и измерить перед передачей разработчику.

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

Сначала установите причину пустоты

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

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

У учебной типографии первое состояние звучит как «Создайте заявку на расчёт упаковки». Ниже достаточно объяснить, какие сведения понадобятся и что произойдёт после отправки. Если же клиент уже заказал коробки и скрыл их фильтром, ему нужна кнопка сброса фильтра. Повторное предложение начать знакомство будет выглядеть странно.

Составьте небольшую таблицу для рабочей команды.

Причина пустого списка Что сообщить Следующее действие
Первый вход Как получить первый результат Создать заявку
Выбран фильтр По этим условиям записей нет Сбросить фильтр
Данные загружаются Список ещё загружается Дождаться ответа
Ошибка загрузки Список сейчас недоступен Повторить загрузку
Ограничение прав Кто может открыть раздел Связаться с администратором

Эта таблица станет основой задачи на тексты. Она защищает редактора от попытки уместить пять разных ситуаций в один абзац. Если проблема касается всей структуры кабинета, её удобнее обсуждать вместе с разработкой интерфейса, показав маршруты пользователей каждой роли.

Заголовок связывайте с задачей человека

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

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

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

Затем прочитайте заголовок без окружающего оформления. Он должен оставаться понятным человеку, который впервые увидел услугу. Внутренние слова команды вроде «объект», «сущность» или «единица» замените привычными названиями. Если заказчики говорят «заказ», используйте его последовательно на экране и в письмах.

Для короткой версии пригодится приём из редактуры первого экрана коммерческого предложения. Сначала оставьте предмет и полезное действие, затем добавляйте детали. Красивое вступление чаще всего проигрывает конкретной подписи, по которой понятно, куда нажимать.

Подсказка отвечает на ближайшее затруднение

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

Уместите в основной подсказке одно ближайшее действие и его результат. Например, «Укажите размеры и тираж. Менеджер подготовит расчёт и ответит в этом кабинете». Это пример структуры; время ответа и сам канал должны совпадать с работой компании. Добавление неподтверждённого обещания испортит даже хорошо отредактированный текст.

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

Если подсказка выросла до нескольких абзацев, разделите её по вопросам пользователя. Один фрагмент останется на первом экране, другой появится у поля, подробности уйдут в справку. Ссылка на справку должна называть содержание: «Требования к макету» понятнее слова «Подробнее».

Для выбора длины сравните две версии в счётчике символов Feature IT. Вставляйте заголовок и подсказку отдельно. Число знаков помогает заметить разницу объёма, но окончательное решение принимайте на макете с реальным размером шрифта и шириной блока.

Проверить текст

Пришлите задачу и текущий сценарий работы, чтобы согласовать следующий шаг.

Проверить текст

Кнопка должна совпадать с тем, что откроется

«Начать» удобно помещается почти в любую кнопку, но ничего не говорит о следующем экране. «Создать заявку» точнее, если дальше открывается форма. «Загрузить макет» подходит, когда первое действие действительно связано с файлом. Выберите подпись после просмотра рабочего перехода, чтобы текст и интерфейс обещали одно и то же.

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

Проверьте подпись после выполнения действия. Когда заявка появилась, пустой экран должен смениться рабочим списком. Если кнопка остаётся, её смысл может измениться на создание следующей заявки. Текст приветствия нового клиента тоже стоит убрать, иначе кабинет продолжит вести себя так, будто человек ничего не сделал.

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

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

Сокращайте по смыслу, затем считайте знаки

Возьмём черновик для учебного сервиса: «В настоящий момент в вашем личном кабинете пока ещё отсутствуют созданные вами заявки на изготовление упаковки». Читатель уже видит пустой список. Фраза расходует место на описание экрана и несколько указаний времени, которые ничего не меняют в действии.

В рабочем варианте можно написать «Создайте заявку на упаковку» и отдельной строкой объяснить состав данных. При правке исчезают повторения, но сохраняется назначение раздела. Если контекст страницы уже называет упаковку, повторять её в каждой подписи тоже необязательно. Читайте весь экран целиком, чтобы заметить такие дубли.

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

Затем проверьте текст на телефоне. Одинаковое количество знаков может занимать разное число строк из-за ширины букв, слов и шрифта. Смотрите на переносы заголовка, расстояние до кнопки и положение справочной ссылки. При увеличении текста блок должен оставаться читаемым, поэтому жёсткое ограничение высоты требует отдельного внимания команды.

Если текст передают в нескольких вариантах, назовите причину выбора. «Короткая версия для узкого блока» полезнее пометки «вариант два». Приём работы с небольшим объёмом подробно разобран в материале о тексте на 200 символов. Здесь тот же принцип: сохраняйте действие и убирайте повторённый контекст.

Обсудим ваш проект?

Оставьте контакты — перезвоним и обсудим задачу

Проверьте возвращение после первого действия

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

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

Проверьте экран на человеке, который его впервые видит

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

Зафиксируйте расхождение ожиданий с реальным действием. Если человек думает, что кнопка сразу оформляет платный заказ, а дальше только запрос цены, подпись требует уточнения. Если он ищет готовый договор до отправки заявки, проверьте порядок шагов и объяснение процесса. Такие наблюдения полезнее общего ответа «всё понятно».

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

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

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

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

  • Как задать копирайтеру объём текста.
  • Текст слайда, который удобно читать.

Обсудим ваш проект?

Оставьте контакты — перезвоним и обсудим задачу

Содержание
  • Сначала установите причину пустоты
  • Заголовок связывайте с задачей человека
  • Подсказка отвечает на ближайшее затруднение
  • Кнопка должна совпадать с тем, что откроется
  • Сокращайте по смыслу, затем считайте знаки
  • Проверьте возвращение после первого действия
  • Проверьте экран на человеке, который его впервые видит
Поделиться:

Похожие статьи

Рекламу включат утром: что проверить на сайте сегодня
Разработка сайтов

Рекламу включат утром: что проверить на сайте сегодня

9 мин
Форма без мыши: 6 проверок доступности перед запуском
Разработка сайтов

Форма без мыши: 6 проверок доступности перед запуском

10 мин
Как принять сайт у подрядчика: 8 проверок перед запуском
Разработка сайтов

Как принять сайт у подрядчика: 8 проверок перед запуском

9 мин
Feature IT

Feature IT — платформа по обучению программированию и разработке цифровых продуктов. Мы создаём современные веб-решения для бизнеса и обучаем этому других!

Политика конфиденциальностиПользовательское соглашение

О компании

  • Проекты
  • Блог
  • Карьера

Услуги разработки

  • Разработка сайтов под ключ
  • Веб-приложения на React/Next.js
  • Telegram-боты для бизнеса
  • Mini Apps (Telegram, VK)
  • SEO-оптимизированные сайты
  • Автоматизация бизнес-процессов
  • Поддержка и развитие IT-продуктов

Обучение

  • Курс Python с нуля
  • Алгоритмы и структуры данных
  • Паттерны проектирования
  • Подготовка к собеседованиям в IT
  • Практика на реальных проектах

Инструменты

  • Генератор UTM-меток
  • Счётчик символов