Конспект доклада арт-директора uchi.ru Марины Степановой с UX-марафона 18 апреля 2019 года.
Кто не читает
Перед началом проектирования определите не только, кто ваш пользователь, но и:
- будет ли у него возможность читать,
- сколько у него на это времени.
Пользователь не читает интерфейсный текст, когда:
- Пользователь — ребёнок;
- Текст на незнакомом языке;
- Нет времени что-либо прочитать.
Uchi.ru — платформа с курсами по школьным предметам. Её основная аудитория — ученики начальных классов, которые ещё только учатся читать. Они читают по слогам и даже по отдельным буквам.
Чтение отнимает у них много сил. Ребёнок может прочитать текст вслух и не воспринять ничего из прочитанного, так как все силы уйдут на само чтение.
Взрослый может оказаться в незнакомой языковой среде. Например, при покупке билета на внутренний перелёт по Китаю на сайте, который рассчитан только на китайцев. Гугл-переводчик не всегда может помочь.
Нет времени читать, например, когда человек управляет машиной и использует навигатор. Читает он в пробке или стоя на светофоре. В остальное время навигатор сообщает информацию иконками и другими легко воспринимаемыми способами.
Во время готовки иногда надо вспомнить, например, через сколько минут после начала жарки надо перевернуть кусок мяса. Информация нужна быстро, так как мясо уже жарится.
Как написать
1. Убедитесь, что текст помогает достичь цели
В начале определите цель — какую задачу решает пользователь с помощью вашего продукта. Например, в uchi.ru ученик получает новые знания. Интерфейс (и текст, как его часть) должен помогать в достижении цели.
2. Сократите объём
Если пользователю сложно читать, чем меньше текста, тем лучше. Даже если получается слишком сухо.
Удаляйте воду и красивые эпитеты, если они не помогают достичь цели. Оставшиеся предложения должны быть лаконичными. В одном предложении должна быть одна мысль. Если мысль сложная, её можно разделить на несколько предложений.
3. Говорите с пользователем на одном языке
Дети лучше понимают примеры из реального мира. Не «кликни на стакан», а «возьми стакан».
Общайтесь с представителями вашей целевой аудитории, проводите интервью и тестируйте текст. Собирайте список слов, которых они не понимают: «Приведите аналогию» → «Приведите пример».
Как протестировать текст:
- Попросите респондента прочитать его вслух. Вы услышите, какие места вызывают проблемы: слишком длинные слова, непонятные слова, которые он повторяет, сложные предложения, в которых респондент делает паузы и теряет суть прочитанного;
- Попросите пересказать суть. Результаты могут быть неожиданными;
- Достаточно 3 представителей вашей аудитории, чтобы найти критические ошибки.
4. Не путайте разные символы
Для ребёнка разница в символах имеет значение. Если вместо «её» написать «ее», он прочитает как написано и не научится правильному произношению слова.
Даже Гугл-переводчик может неправильно распознать язык и ошибиться в переводе, если пропадут диакритические знаки.
Как оформить
Любой текст должен быть свёрстан. Как пользователь его прочитает, зависит от компоновки: на каких словах сделан акцент, что главное, что второстепенное, а что и вовсе не нужно пользователю и размещено по требованию закона.
Инсайт: в газетной вёрстке пользователь обращает внимание на заголовки, а в интерфейсах они часто остаются непрочитанными.
То, что максимально помогает пользователю достичь цели, выделите размером и цветом.
Текст длиннее 3 строк выровняйте по левому краю. Избегайте слишком рваного правого края текстового блока.
Возникает вопрос: что важнее, сохранить одинаковую длину строк (как в книжной вёрстке) или не разделять переносами смысловые единицы. Важнее — не разделять смысловые единицы, например, не оставлять висящие предлоги, не отделять цифры от единиц измерения.
Есть заблуждение, что объёмные красивые буквы, тени и красочные фоны помогают увлечь ребёнка и втянуть в процесс чтения. Так можно оформить заставку, на которую ребёнок просто посмотрит. Текст оформлять так нельзя.
Всё, что мешает распознавать символы, мешает чтению:
- Яркие фоны — заменить на спокойные и однородные;
- Фоны с мелкими объектами — притушить или не показывать непосредственно под словами;
- Анимация фона или текста;
- Низкая контрастность;
- Мелкий текст;
- Переносы или вертикальное написание, которые затрудняют восприятие конкретного слова;
- Написание по диагонали или окружности;
- Сжатие и растяжение слов;
- Необычные шрифты. Дети ещё плохо распознают стандартные начертания букв, нестандартные даются им ещё сложнее.
Как мотивировать
Пользователь не станет читать, если увидит большой текст и решит, что он ему не особенно и нужен. И будет читать, если деваться некуда и ему в любом случае нужен билет на внутренний перелёт по Китаю. В остальных случаях важно не убить пользовательскую мотивацию.
Текст не должен выглядеть большим. Если нельзя сократить, разделите его на части и подавайте порционно, отдельными экранами.
Когда пользователь получает порцию текста, он ожидает, что быстро всё прочитает и будет свободен. С каждой новой порцией мотивация падает (сколько там ещё?). Сформируйте ожидание — заранее предупредите о будущем количестве порций, например, с помощью прогресс-бара. Неизвестность пугает больше, чем количество.
Каждая прочитанная порция — это законченное действие, за которое можно похвалить. Также стоит фиксировать прогресс.
Напишите, что будет дальше. Кнопка «Продолжить чтение» → «Узнать про мотив».
Добавьте картинки, сочетающиеся с конкретной порцией текста.
Объясните, как этот текст поможет пользователю с его текущей задачей.
Демотивирует всё, что заставляет чувствовать себя глупым и беспомощным, действие без понятной цели.
Что ещё демотивирует:
- много текста,
- длинное предложение,
- много знаков препинания,
- сложная формулировка,
- скучно,
- неясная цель,
- непонятное слово,
- непонятно, когда конец,
- устали глаза,
- текст двигается,
- сложное предложение.
Используйте только те термины, которым вы хотите научить пользователя или которые точно знакомы вашей целевой аудитории.
Когда текст можно убрать
Интерфейс должен быть понятным без объяснений. Если кнопка похожа на кнопку, рядом с ней не пишут, что на неё можно нажать.
1. Иконки
Их важно протестировать на своих пользователях. Попросите респондента предположить, что произойдёт после нажатия на иконку. Можно наоборот рассказать, какое действие будет скрываться за иконкой, и спросить респондента, как она должна выглядеть.
Есть стандартные иконки: стрелки, кнопка play. Кастомные иконки работают намного хуже, их обязательно надо тестировать.
2. Микроанимации
Они сокращают и заменяют текст. Например:
- Иконки приложений в macOS подпрыгивают, когда приложению что-то нужно от пользователя;
- При открытии сторис в Инстаграме анимация ползунка для голосования показывает, что его можно двигать;
- Если пользователь ошибся, можно потрясти объект, а не отображать сообщение об ошибке.
3. Озвучка
В навигаторе озвучка дублирует отображаемые на экране знаки.
В uchi.ru каждый абзац текста можно озвучить. Также можно озвучить отдельные сложные слова, например, английские слова в русском тексте.
Это не очень удобно в общественном пространстве. Если у пользователя нет наушников, ему будет некомфортно. С этим надо разбираться ещё на берегу, во время проектирования.
Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 249 рублей.