Этой кнопке нужен текст. O UX-писательстве коротко и понятно

Поле для ввода текста – такая штука, в которую пользователю надо вводить текст (Л – логика). Вроде не такая, в которой самому продукту стоит что-то писать. Но, во-первых, без подсказок вроде «пишите прямо здесь» пользователи часто не понимают, что делать и куда вписать своё сообщение. Во-вторых, в интерфейсе каждый квадратный сантиметр на счету. Так почему бы не использовать всю доступную площадь с максимальной отдачей?

Тем более что поле для ввода текста – это иногда и строка поиска. А что, пользовательский поисковый запрос – такой же текст, который кто-то вводит. Строка для ввода поискового запроса – это маленькое поле. Подсказку в нём можно сформулировать стандартно-дежурно:

А можно немного повеселиться. Только в таком случае надо учитывать контекст – насколько к месту окажется та или иная формулировка:

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

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

Только не нужно втаскивать в интерфейс всё, что и в самом деле обычно пишут пользователи. Честность – хорошо, но в таком случае вы, скорее всего, проиграете, когда какой-то пользователь решит поругать ваш продукт и вы на автомате дёрнете в интерфейс часть его комментария. Все мотивирующие примеры в полях для ввода текста всегда пишет или согласовывает редактор. В противном случае и так не лучший продукт может стать ещё хуже – пользователи не обращаются в поддержку или к разработчикам просто так, в 99 % случаев они жалуются на проблемы. Чужое негативное мнение ухудшает отношение людей и заставляет их придираться к продукту по пустякам. Срабатывает стадное чувство: «Ух ты, вот тут штука, которую все ругают. Интересно, а за что могу поругать её я?»

Пункты меню

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

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

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

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

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

Если доступное действие всего одно и это не изменится никогда, то лучше нарисовать в интерфейсе отдельную кнопку для этого действия. Но, когда есть малейшая возможность того, что в будущем появятся второй и следующие пункты, можно сразу оформлять первый в контекстном меню. И пускай сначала оно будет состоять всего из одного пункта. Тут ограничений нет – не строгая навигация.

Текст

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

Например, заголовок ошибки состоит из текста, подзаголовок или объяснение – тоже текст. Всякие подсказки – текст. Реплики AI-ассистента в чате или голосом – текст. Текстом же мы подписываем поля в форме обратной связи. Я сейчас про названия полей – локальные заголовки и подзаголовки, а не про подсказки в самих полях для ввода текста, о которых уже поговорили раньше. Обычный текст присутствует в значках, которые ещё принято называть иконками. Без текстовой подписи поди разберись, что означают все эти картинки. А с подписями вроде «Здоровье» или «Анализы» сразу понятно, что это за приложения, – там в целом о моём здоровье, а здесь только результаты анализов.

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

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

Глава 11 Пишем кнопки

Такая ситуация: к редактору пришли с просьбой согласовать текст для кнопки. Вроде всё просто, надо подтвердить пару слов – «Получить код».