Arrow_down_24.svgchevron-right-s-16icon-bars1-72icon-bars10-72icon-bars11-72icon-bars12-72icon-bars13-72icon-bars2-72icon-bars3-72icon-bars4-72icon-bars5-72icon-bars6-72icon-bars7-72icon-bars8-72icon-bars9-72storybook-16-solid

В разделе описаны правила оформления элементов характерных для интерфейса

Заголовок и подзаголовок

В первую очередь читатель обращает внимание на заголовки. Они являются маркерами понимания общего контекста. Пишите заголовки кратко и ясно. Чтобы выразить основную мысль достаточно не более 7 слов.

Если в заголовке образуется много абзацев — вынесите основную мысль в краткий заголовок и добавьте уточняющий подзаголовок

Правильно
Неправильно

Кнопка

В кнопке могут размещаться слова трёх категорий:

  • «Команда». Отвечает на вопрос «Что сделать?»
  • «Статус». Отвечает на вопрос «Это что?», «Как?» и «Какое?». Это может быть существительное, прилагательное, наречие, причастие, и глагол в личной форме
  • «Навигация». Отвечает на вопрос «Что?».

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

Правильно
Неправильно

Списки

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

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

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

Если список является продолжением предложения, то перед списком ставится двоеточие, а пункты пишутся с маленькой буквы.

Каждый элемент списка является отдельным интерфейсной единицей, поэтому в конце предложения знаки препинания не ставятся

Правильно
Неправильно

Ссылки

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

Не используйте наречия: «сюда», «здесь», «по ссылке». Предлоги не входят в оформление ссылки

Правильно
Неправильно

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

Когда указывается адрес сайта, слово «сайт» не пишется. Если указывается название сайта — используйте формулировку «на сайте…»

Правильно
Неправильно

Названия разделов

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

Правильно
Неправильно

Обучение

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

Чтобы этого добиться, руководствуйтесь принципами:

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

Названия полей

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

Правильно
Неправильно

Тост-сообщение

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

В тост-сообщениях не используйте заголовки или уточнения. Пишите одно краткое предложение, которое сориентирует пользователя на дальнейшие его действия

Правильно
Неправильно

Хинт

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

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

Правильно
Неправильно

Модальные окна

Чаще всего модальное окно обращает внимание пользователя на совершаемом действии или важной информации.

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

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

Текст для модального окна может состоять из инструкции или описания процесса.

Не пишите текст подробно, он должен быть кратким

Пустые состояния

Задача пустого состояния — информировать пользователя о причинах отсутствия контента.

Чаще всего пустые страницы состоят из заголовка, описания и кнопок.

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

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

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

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

Экран успеха

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

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

Странница коротко информирует о результате

Экран ошибки

Страницы ошибки сообщают пользователю, что сервис не может отобразить контент.

Экраны ошибки состоят из заголовка, описания, кнопок и контактов техподдержки.

Пишите заголовок, как краткое объяснение что случилось.

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

Извиняться нужно, если проблема возникла по вине сервиса

Странница предлагает пользователю варианты выхода из ситуации