Этот список не является исчерпывающим, он предназначен для того, чтобы вооружить вас всего несколькими идеям, зато их вы можете применить немедленно.
Основные принципы читабельной страницы
Полезный, легко читаемый контент получается в результате совместной работы веб-дизайнеров и копирайтеров. Дизайн веб-страницы должен способствовать лёгкости чтения, важно всё: цвет, шрифт, расстояние, оформление и т.д.
В свою очередь копирайтер должен писать такие тексты, которые позволяют читателю легко найти, прочитать и усвоить их.
Вот три основных принципа, которых следует придерживаться:
- Визуально текст и оформление странички должны быть приятными глазу и легко восприниматься читателем (текст должно быть хорошо видно, он должен быть разборчивым).
- Содержание должно быть лёгким для понимания.
- Текст должен быть таким, чтобы его можно было бегло просмотреть. Веб-пользователи не читают много. Исследования показывают, что в лучшем случае мы читаем 28% текста на веб-странице.
Как же достигнуть соответствия контента на сайте этим принципами? Об этом мы и расскажем в нашей статье.
1. Сохраняйте контент как можно более кратким
Хорошо известно, что у веб-пользователей очень короткий промежуток внимания, они не читают статьи тщательно и в полном объёме. Исследования изменений привычек чтения показали, что пользователи бегло просматривают страницы в поисках нужной им информации: ищут по ключевым словам, читают по диагонали и невнимательно.
Пришло время обратиться к исследованиям Якова Нильсена: он утверждает, что юзабилити сайта может быть повышено на 58% только путём сокращения текстов на нём наполовину.
Сокращение статьи увеличивает её читабельность так же, как и употребление более простых коротких предложений и слов. Это основные факторы, влияющие на удобство чтения и понимания.
Что можно сделать уже сейчас:
- Переходите ближе к делу как можно быстрее. Не нужно длинных вступлений.
- Вырежьте всю не слишком необходимую информацию.
- Используйте лёгкие для понимания слова и фразы.
- Избегайте длинных абзацев и предложений.
- Используйте сохраняющие время и привлекающие внимание техники, такие как использование цифр вместо написания чисел прописью: «1000» вместо «одна тысяча». Такое представление текста облегчает беглый просмотр текста и позволяет быстро схватывать нужную информацию.
2. Используйте подзаголовки, чтобы разбить длинную статью на части
Исследования юзабилити, проведённые экспертом по веб-контенту Джерри МакГоверном, привели его к выводу, что веб-читатели изучают страницу, мысленно разбивая её на блоки и секции, он называет это «блочное чтение». Подробнее об этом можно почитать в его статье «Block reading: how we read on the Web».
Т.е. когда пользователь смотрит на страницу, он воспринимает её не как единое целое, а как отдельные фрагменты информации. Пользователь бегло просматривает отдельные блоки, которые, как ему кажется, содержат ту информации, которую он активно ищет. Очень хорошо это иллюстрирует тепловая карта, сделанная при помощи прибора Eye Tracker, который фиксирует движение глаза пользователя, когда он смотрит на экран. Пользователи читали кусками: сначала слева направо, потом сверху вниз, пропуская много текста с других сторон, получается подобие буквы F.
Можно сделать кое-что для того, чтобы приспособиться под это «кружевное» чтение. Во-первых, разбить длинный текст подзаголовками, чтобы пользователь мог легко скользить вниз по странице. Это поддерживает пользовательскую манеру «блочного чтения», так как заголовки автоматически разбивают текст на блоки. А также соответствует манере пользователя просматривать страницу F-образным способом, так как заголовки помогают ему легко двигаться вниз.
Ниже представлено два варианта расположения текста:
1. Без заголовков
2. С заголовками
Посмотрите сами, какой из них более читабельный.
Что можно сделать уже сейчас:
- Прежде чем написать пост, попробуйте разбить его на логические части, которые можно обособить подзаголовками.
- Используйте простые и короткие заголовки.
- Используйте ключевые слова в тексте и заголовке, чтобы привлечь внимание пользователя.
3. Помогите пользователям быстро просканировать вашу страницу
Мы уже не раз упоминали о том, что пользователь стремится бегло просмотреть страницу, нужно помочь ему в этом, сделать её более удобной для такого сканирования, и юзабилити повысится примерно на 47% (согласно исследованиям Якова Нильсена).
Что можно сделать уже сейчас:
- Сделайте первые два слова значимыми. Когда пользователь просматривает страницу, он обращает внимание только на несколько первых слов заголовка или ссылки.
- Используйте ключевые слова в заголовках и ссылках.
- При написании текста используйте стиль «перевёрнутой пирамиды», поместив самую важную информацию в начале текста.
4. Используйте маркированные списки и форматирование текста
Согласно исследованиям, проведённым при помощи Eye Tracker, пользователь фиксировал взгляд на маркированных списках и выделенном шрифте (жирный или курсив). Эти инструменты помогают привлечь внимание пользователя (таким образом можно выделить ключевые слова), а также они ускоряют процесс сканирования страницы, так как разбивают текст на части.
Что можно сделать уже сейчас:
- Сделайте текст таким, чтобы можно было вставить список, маркируйте его точками.
- Выделите важную информацию курсивом или жирным шрифтом.
5. В тексте должно быть достаточно пространства
Расстояние между символами, словами, строчками и параграфами — очень сильно влияет на скорость чтения пользователя и восприятие им информации.
Что можно сделать уже сейчас:
- Рассмотреть сайт, оценить оформление, исправить расстояние, если где-то оно слишком маленькое и мешает комфортному чтению.
- Тщательно следить за всеми размерами и расстояниями: поля, высота строки, промежуток между буквами и словами, отступы текста и т.д.
6. Ссылки должны быть правильными
Одно из самых больших преимуществ веб-контента — возможность пользоваться ссылками.
Что можно сделать уже сейчас:
- Использованные ссылки должны отличаться цветом от тех, по которым пользователь ещё не переходил.
- Используйте всплывающие подсказки. Пользователь должен знать, чего ему ожидать при переходе по ссылке.
7. Используйте визуальные эффекты
Фотографии, диаграммы и графики стоят тысячи слов. Использование визуальных инструментов значительно повышает читабельность длинного текста.
И снова согласно исследованиям, проведённым при помощи Eye Tracker, стало ясно, что пользователи уделяют очень пристальное внимание картинкам, которые содержат нужную информацию.
Однако некоторые изображения пользователи игнорируют, в частности типичные сток-фото, не имеющие прямого отношения к содержанию текста. Когда в сочетании с другими изменениями на сайте, удалялись и лишние изображения, юзабилити повышалось на 34%.
Что можно сделать уже сейчас:
- Убедитесь, что изображения соответствуют содержанию текста.
- Избегайте фотографий из стока и бессмысленных визуальных эффектов.
Как видите, совсем несложно сделать некоторые изменения на вашем сайте уже сейчас, однако благодаря им, юзабилити сайта существенно повысится.