Принципы качественного текста для команд и сочетаний клавиш09.12.2020 13:03

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

Наталья Буянина перевела и адаптировала статью Norman Nielsen Group о том, как сделать текст элементов интерфейса простым и логичным.

Рекомендации для названий кнопок и команд

Называем команду коротко, но понятно

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

Циан.Ипотека сделала кнопки под описанием каждого банка. В кнопках немного слов, но не ясно, что за ними скрывается и почему они все называются по-разному

Пишем, что произойдёт при нажатии на кнопку

Если нажать на кнопку «Пауза» при просмотре видео, его воспроизведение остановится и появится надпись «Смотреть». Это то, что случится с видео при повторном нажатии на кнопку, а не его текущее состояние.

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

Используем глаголы для обозначения действий и предоставления информации

Команды «Назад», «Вперёд», «Далее» или «Настройки» понятные, но могут быть слишком общими.

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

Если кнопка инициирует действие, лучше использовать глаголы. Понятные команды «Распечатать», «Удалить», «Войти» подскажут, что случится при нажатии на кнопку.

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

Указываем прилагательные для изменения состояния элемента

Прилагательные показывают, каким будет элемент: «Жирный», «Полужирный», «Зачёркнутый» и другие. Эти лаконичные определения не требуют дополнительных связок с глаголом — «сделать жирным», «сделать зачёркнутым». Этот приём обычно используется в текстовых редакторах.

Команды в Google Документах открываются в меню «Формат» → «Текст», поэтому пользователю сразу понятно, что речь идёт об изменении текста

Добавляем подсказки, где нужна дополнительная информация

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

Авито даёт подсказку в самом начале объявления ― появляется сама, если поставить курсор в поле ввода. Текст не помогает заполнить поле с названием, но говорит о том, что будет дальше

Уточняем команды в зависимости от контекста

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

В меню поста в фейсбуке можно выбрать, редактировать публикацию или аудиторию

Избегаем общих фраз вроде ОK

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

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

Google Chrome уточняет, действительно ли нужно закрыть сайт и не сохранять данные. Для подтверждения действия Google предлагает команду «Закрыть» — вместо OK — и подсвечивает кнопку синим, чтобы пользователь обратил на неё внимание

Ставим многоточие при необходимости уточнения информации

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

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

 Курс

UX-писатель

Узнать больше

• Научитесь создавать и анализировать пользовательские сценарии
• Сможете писать микротексты и соблюдать tone of voice
• Узнаете, как проектировать дружелюбный интерфейс в паре с дизайнером

Рекомендации для оформления быстрых клавиш

Быстрые (горячие) клавиши — это комбинации клавиш на клавиатуре, которые позволяют пользователям быстро выполнять частые команды. Примеры быстрых клавиш — Ctrl + S (Windows) для сохранения или Command + N (MacOS) для открытия нового окна браузера.

Горячие клавиши ускоряют передвижение по продукту и упрощают выполнение популярных задач. Нажать, например, Ctrl + V или Command + V быстрее, чем искать функции копирования и вставки из меню.

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

Фиксируем быстрые клавиши для часто выполняемых задач

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

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

Не меняем стандартные сочетания клавиш

Если создаёте собственные сочетания клавиш, учтите распространённые варианты, чтобы не путать пользователя. Например, встречающиеся во многих продуктах Ctrl + C для копирования и Ctrl + V для вставки.

Делаем быстрые клавиши одинаковыми для схожих систем

Одинаковые сочетания должны быть доступны как для операционных систем MacOS, так и Windows. Также пользователи должны иметь возможность устанавливать собственные клавиши, помимо параметров по умолчанию.

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

В Google Таблицах такие же сочетания клавиш, как и в MS Excel. Подсказка по сочетанию клавиш отображается при наведении курсора на панель инструментов

Полный список горячих клавиш Trello можно посмотреть здесь — в разделе поддержки пользователей

Устанавливаем сочетания клавиш, которые легко запоминаются

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

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

Фейсбук предлагает латинские буквы, чтобы опубликовать новый пост, поставить лайк или выполнить другие действия. Горячие клавиши легко запомнить: например, P — пост (post), L — лайк (like), S — поделиться (share)

Используем комбинации в одну-две клавиши

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

У программы Power BI Desktop в комбинации встречается до трёх клавиш, и их может быть сложно запомнить

Резюмируем

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

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.