Придумать простые и понятные названия команд для интерфейса: правила написания хорошего UI-текста Статьи редакции

Пересказ материала Анны Кейли из Nielsen Norman Group.

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

Кейли предпочитает термину «UX-текст» менее громкий «UI-текст». Это название, считает она, больше подходит тексту для элементов действия и помогает отделить его от некликабельного контента для чтения.

UI-текст также отличается от «микроконтента» (или «микрокопии»). Последний представляет собой набор небольших текстов для заголовков и подсказок.

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

Команды — основа навигации в приложениях.

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

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

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

В UI-тексте слева много лишних слов. Первый пункт «Сохранить и выйти» сопровождён ненужным описанием: «Сохраните свой прогресс в игре и выйдите после. Предыдущая сохранённая игра будет перезаписана». Справа представлен UI-текст без лишних описаний и пункта «Не выходить» (он не нужен, можно просто нажать на крестик в углу окна).

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы отказаться от несохранённых изменений (Discard unsaved changes) в «Google Календаре», нужно нажать на кнопку «Отказаться» (Discard). Использовать это слово вместо «OK» полезно: оно усиливает действие, которое пользователь собирается выполнить.

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

Текст и символы, которые показывают сочетание клавиш, также считаются UI-текстом.

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

Распространёнными примерами использования сочетаний клавиш являются клавиши Ctrl+S для сохранения или Cmd+N для открытия нового окна браузера. Сочетания клавиш помогают ускорить движение через интерфейс и упростить выполнение часто выполняемых задач. Нажать Ctrl+V и Cmd+V быстрее, чем искать функции копирования и вставки в меню.

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

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

Некоторые сочетания клавиш (Ctrl+S или Cmd+S для сохранения) широко используются, и многие люди привыкли к ним.

Автор советует не перегружать знакомые команды — например, не использовать Ctrl+S для прокрутки страницы. При создании новых сочетаний всегда учитывайте набор стандартных сочетаний клавиш, чтобы не запутать пользователя.

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

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

Автор не советует использовать первые попавшиеся уникальные комбинации клавиш. Комбинация должна быть легко узнаваемой и запоминающейся.

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

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

Расширение для браузера Action Screenshot отображает сочетания клавиш в меню; но они состоят из нескольких кнопок и их трудно запомнить.

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

#ui #юзабилити