Дизайн Ян Австрейх
3 591

Придумать простые и понятные названия команд для интерфейса: правила написания хорошего 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-текст.

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

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

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

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 #юзабилити

{ "author_name": "Ян Австрейх", "author_type": "self", "tags": ["\u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438","ui"], "comments": 4, "likes": 24, "favorites": 94, "is_advertisement": false, "subsite_label": "design", "id": 67419, "is_wide": true, "is_ugc": true, "date": "Thu, 16 May 2019 14:00:45 +0300" }
SMS-чат для клиентов
{ "id": 67419, "author_id": 192524, "diff_limit": 1000, "urls": {"diff":"\/comments\/67419\/get","add":"\/comments\/67419\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/67419"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

4 комментария 4 комм.

Популярные

По порядку

0

До сих пор не знаю как хорошо перевести мобильные tap, swipel:)

Ответить
4

Нажать, смахнуть - не?

Ответить
2

трогни, чтоб начать

Ответить
0

Трогают, чтобы кончить.
Прикоснись, чтобы начать.

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления
{ "page_type": "default" }