Hi-Tech

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

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

В закладки

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

UI-текст — наименования команд, которые отображены на кнопках, пунктах меню и других элементах интерфейса, ориентированных на выполнение каких-либо действий.

Анна Кейли

Разница между UI-текстом, UX-текстом, микроконтентом и ссылкой

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

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

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

Почему нужно работать над UI-текстом

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

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

Правила написания хорошего UI-текста

Делать текст команды кратким, но в то же время понятным

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

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

Примеры плохого и хорошего UI-текстов

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

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

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

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

Элементы в меню «Вид» описывают желаемое состояние, а не текущее. Как только вы меняете состояние, меняется и название элемента. «Показать панель вкладок» (слева) меняется на «Скрыть панель вкладок» (справа), когда панель вкладок видна

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

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

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

Вместо пространных названий Sweaty Betty использует ясные глагольные фразы вроде «Continue to Billing» («Перейти к оплате») Компания Experian просила пользователей прочитать и принять новые «Условия использования» на этапе входа в систему. Текст кнопки использовал глагольную фразу «Accept and Sign In» («Принять и войти»), чтобы было понятно, что произойдёт после нажатия

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

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

Элемент меню «Сглаживание» в Photoshop запускает подменю параметров, описывающих, как края изображения изменятся после выбора команды-прилагательного

Избегайте использования неясных названий команд

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

Сделайте подсказки

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

Illustrator использует анимированную подсказку, чтобы рассказать о команде с непонятным названием Puppet Warp

Меньше используйте название бренда

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

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

Adobe Acrobat Pro DC использует название только в главном меню приложения и в пунктах меню «Справка». Все остальные команды отображаются в виде простых фраз, не связанных с брендом

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

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

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

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

Избегайте общих фраз вроде «Ок» в тексте команды

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

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

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

Включите многоточия ( «...» ) в текст команды, чтобы указать, что пользователю потребуется дополнительная информация

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

Excel: многоточия в меню «Файл» указывают, что соответствующие команды требуют для выполнения дополнительной информации от пользователя

Сочетания клавиш

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

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

Чтобы выбрать пункт «New Album» («Новый альбом»), можно открыть меню «File» («Файл») и нажать на клавиатуре N или использовать комбинацию Ctrl+N

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

Сочетания клавиш должны быть в приоритете для частых задач

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

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

Facebook предлагает список сочетаний клавиш для регулярных команд

Не изменяйте стандартные сочетания команд

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

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

Сделайте сочетания клавиш заметными и изменяемыми

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

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

«Google Таблицы» используют привычные сочетания клавиш и отображают их в тексте подсказки, появляющейся при наведении курсора на кнопку. В данном случае видно, что распечатать можно, нажав Ctrl+P Помогая пользователям узнать сочетания клавиш, Trello предлагает изучить шпаргалку, доступную на любом устройстве В Evernote можно создавать свои собственные сочетания клавиш для часто выполняемых действий

Сочетания клавиш должно легко запоминаться

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

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

Приложение Transcribe показывает список сочетаний клавиш и их названия рядом с плеером. Так они легче запоминаются

Используйте минимальное количество клавиш

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

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

Заключение

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

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

Показать больше

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть