Советы по улучшению читабельности UX: "за" и "против"

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

Что такое читабельность UX? 

В двух словах, читаемость в UX отвечает на вопрос, легко ли следовать, понимать и четко распознавать элементы вашего сайта всем пользователям.

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

Однако с точки зрения UX-дизайнера определение удобочитаемости шире и относится к четкости как текста, так и графики на странице, к тому, как они сочетаются и выглядят на странице. Улучшение читаемости позволяет дизайну удерживать пользователей или отпугивать их. 

Хорошая читабельность UX означает также, что содержимое вашего продукта одинаково доступно для разных групп пользователей. Например, дальтонизмом страдает 4,5% населения, а 2,2 млрд. человек живут с ослабленным зрением. Каждый дизайнер, осознающий важность удобочитаемости, должен учитывать эти моменты при создании пользовательских интерфейсов. Умение различать хорошую и плохую читаемость также является важным навыком. 

Как определить, что пользовательский интерфейс нечитабелен?

Мы настоятельно рекомендуем протестировать прототип на удобочитаемость, прежде чем переходить к проектированию реального продукта. Обычно опытные дизайнеры могут сразу указать на шрифты или графику, которые выглядят отвратительно. А иногда это настолько очевидно, что любой может сказать, что читабельность сайта могла бы быть лучше. Например, посмотрите на картинку ниже - захотите ли вы ее читать? Лично я сомневаюсь.

Чтобы определить плохую читабельность, можно пройтись по пяти контрольным точкам:

• Размер и ширина шрифта. Несбалансированность шрифтов - первый признак плохой читаемости.
• Высота и ширина строки. Слишком длинные строки, а также те, которые требуют прокрутки или дополнительных усилий, приводят к плохой читаемости.
• Регистр. Для лучшей читаемости лучше сочетать прописные и строчные буквы. 
• Цвет текста. Неудачный выбор цвета или несоответствие цвета фону мгновенно ухудшают читаемость.
• Контрастность. Высокий контраст между цветом шрифта и фона делает текст нечитаемым.

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

Важнейшая роль шрифтов в обеспечении читабельности

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

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

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

10 советов по улучшению читабельности UX вашего продукта или веб-сайта

Вот несколько советов, которые, безусловно, помогут вам повысить читабельность и разборчивость. Как ни странно, мы проиллюстрируем их примерами того, как НЕ должны выглядеть читаемые интерфейсы. Готовы? ‍

1. Используйте шрифты с умом. Помните, что разные шрифты лучше работают в разных размерах. Избегайте слишком сложных или популярных шрифтов, так как они повсюду и раздражают пользователей. Например, некогда популярные готические шрифты или Comic Sans сегодня вышли из моды и легко заметны пользователям.
2. Используйте шрифты, которые легко читаются на экранах ваших пользователей. Это особенно актуально для мобильных устройств, где экраны гораздо меньше, чем на настольных компьютерах, и у вас гораздо меньше места для представления информации, поэтому выбирать шрифт нужно тщательно.
3. Выбирайте цвета, отличающиеся от фона, но избегайте слишком высокой контрастности. Выбор цвета очень важен, так как он позволяет выделить определенную информацию и при этом ослабить акцент на других вещах.
4. Соблюдайте визуальную иерархию. Для облегчения восприятия текста на каждом экране используйте заголовки и подзаголовки, а также изображения и графики.
5. Длина строки должна быть достаточно короткой, чтобы пользователям не приходилось прокручивать страницу по горизонтали, читая строку текста (в идеале - не более 70 символов в строке).
6. Не используйте слишком много шрифтов на каждом экране - не более одного-двух.
7. Выбирайте шрифт с прописными и строчными буквами и избегайте эффекта блокировки прописных букв.
8. Шумные фоны могут сделать нечитаемым даже самый хороший шрифт. Будьте очень осторожны с видеофоном, так как он может иметь тот же шумовой эффект.
9. Расстояния между текстовыми блоками не менее важны. Загроможденные блоки контента разочаровывают пользователей. Дайте им немного пространства, чтобы они могли лучше усвоить представленную информацию.
10. Не забывайте о пользователях. Учитывайте их образование, навыки чтения, уровень заинтересованности, среду, в которой они читают. Не забывайте и о доступности - убедитесь, что дизайн вашего продукта может восприниматься не только через цвет, что текст может быть прочитан пользователями с неидеальным зрением и доступен как для пожилых пользователей, так и для других групп.

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

Заключение

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

Читабельность - это лишь часть уравнения для успешного продукта. Но это то, что пользователи видят в первую очередь. Сделайте так, чтобы все остальное работало в его пользу.