Еще в 1997 году я разработал 5 фундаментальных правил веб-дизайна. Эти правила дизайна веб-сайта очень просты, но важны для положительного пользовательского опыта. Мои правила гласят, что веб-сайт должен быть:
- Легко читается
- Легкая навигация
- Легко найти
- Последовательный и понятный макет, дизайн и маркировка
- Быстро скачать
Некоторые из этих правил кажутся настолько очевидными. На самом деле некоторые люди искренне считают, что они глупы. «Конечно, мой сайт легко читается!» - воскликнули мне некоторые разработчики, закатывая глаза. «Я могу это прочитать!»
Ирония профессионала в области юзабилити заключается в понимании того, что большинство пользователей не замечают очевидного. Дизайнеры, разработчики, авторы контента и другие веб-специалисты настолько сильно вовлечены в свои обязанности по созданию веб-сайта, что упускают из виду очевидные (и даже важные) рекомендации по содержанию.
Тем не менее, я продолжаю возвращаться к этим 5 основным правилам год за годом. Фактически, некоторые из моих правил (легко читаемые, быстро загружаемые) теперь фактически являются факторами ранжирования в поисковых системах.
Bing недавно объявил, что читаемость контента является фактором ранжирования мобильных веб-сайтов, и я полностью согласен с этим решением. За прошедшие годы я провел множество тестов на удобство использования веб-сайтов и часто слышу, как участники тестов бормочут о трудностях при чтении веб-сайтов, независимо от того, имеют ли они в виду контент, навигацию или и то, и другое.
Легко читать. Легко сканировать
Еще в 1997 году доктор Якоб Нильсен из Nielsen Norman Group написал о том, как пользователи читают в Интернете, и вскоре после этого предоставил несколько рекомендаций по написанию веб-страниц. Подводя итог:
Пользователи Интернета обычно предпочитают краткий, удобный для чтения и объективный (а не рекламный) стиль.
Пользователи Интернета связывают возможность сканирования с количеством усилий, которые потребуются для выполнения своих задач. В статье «Если трудно читать, то трудно сделать: беглость обработки информации влияет на прогнозирование усилий и мотивацию» Ассоциации психологических наук:
Люди с большей вероятностью будут проявлять определенное поведение, чем меньше усилий оно требует. Как показали многочисленные исследования, воспринимаемые усилия являются основным препятствием на пути к изменению поведения.
По моему опыту, даже если страница имеет хорошие позиции в поисковых системах, пользователи, скорее всего, покинут ваш сайт сразу же после его сканирования, если: (а) они посчитают, что навигация слишком сложна в использовании, и (б) контент слишком сложно читать. Поэтому по многим причинам я всегда делал возможность сканирования приоритетом при создании и публикации веб-контента.
10 способов облегчить сканирование контента
Прежде всего, контент должен казаться искренним и быть подлинным. Я всегда советую копирайтерам сначала написать контент, а о сканируемости беспокоиться после того, как будет написана основная часть веб-контента. По мере того, как писатели становятся более опытными, они могут научиться естественным образом включать возможность сканирования в свои форматы письма. Никогда не жертвуйте возможностью сканирования ради подлинного, искреннего письма. Вот мои 10 способов сделать контент удобным для чтения и сканирования.
1. Короткие и лаконичные абзацы
После того, как я напечатаю первый вариант содержимого моей веб-страницы, я просматриваю его на мониторе компьютера, чтобы увидеть, где есть большие блоки черного текста. Затем я просто разделяю длинные абзацы на более короткие. Часто я смотрю, есть ли в этом абзаце предложение или идея, которую я хочу подчеркнуть, и затем помещаю это единственное предложение в отдельный абзац.
Вместо этого:
Рис. 1a: Содержимое с большими блоками черного текста может показаться трудным для чтения.
Сделайте это:
Рис. 1b: Содержание может показаться более читабельным, если разбить его на более короткие и лаконичные абзацы.
Быстрый совет: В верхней части страницы, сразу после подзаголовка, я открываю абзац с наиболее важными ключевыми словами и понятиями. Многие читатели пропустят любые дополнительные идеи, если их не уловят первые несколько слов абзаца.
2. Текстовые ссылки, встроенные в контент
Поисковые системы и пользователи обрабатывают встроенные в контент текстовые ссылки иначе, чем глобальные навигационные ссылки.
Когда поисковые системы вычисляют уникальный отпечаток контента документа, элементы шаблона (например, глобальные навигационные ссылки) не включаются в этот отпечаток контента. Поэтому почти на каждой странице сайта я стараюсь добавлять текстовые ссылки, встроенные в контент, чтобы побудить пользователей нажимать на них.
Например:
Рис. 2: Простое добавление пары релевантных встроенных текстовых ссылок побуждает посетителей сайта читать больше контента.
Совет: Не переусердствуйте с этой стратегией! Если контент короткий, у вас должно быть меньше ссылок. Если контент длиннее, вы можете безопасно добавлять соответствующие текстовые ссылки, не делая страницу нечитаемой или нечитаемой.
3. Заголовки и подзаголовки
Если я знаю, что содержимое страницы будет длиннее, чем один экран монитора компьютера, я пытаюсь создать заголовки и подзаголовки. Если вы посмотрите на изображения «до» и «после» ниже, обратите внимание, куда направлен ваш взгляд. Даже без добавления цвета или другого шрифта к подзаголовкам ваш взгляд естественным образом привлечется к ним.
Вместо этого:
Рисунок 3a: Этот контент может показаться неинтересным читателям, поскольку единственный визуальный интерес - это основной заголовок страницы и короткие абзацы.
Сделайте это:
Рисунок 3b: Если вы знаете, что содержимое вашей страницы потребует некоторой прокрутки, разделение контента на «куски» или разделы может облегчить сканирование. Пользователи обычно просматривают текст в подзаголовках.
Быстрый совет: Серый - это не тот цвет, который я рекомендую использовать для заголовков. Текст серого цвета имеет тенденцию отступать, а заголовки должны выделяться на странице. Кроме того, серый текст труднее читать на мобильных телефонах. Чтобы заголовки выделялись, убедитесь, что у вас высокий цветовой контраст. Для проверки цветового контраста я предпочитаю использовать инструмент Color Contrast Checker на WebAIM.
4. Маркированные или нумерованные списки
На длинных страницах, таких как часто задаваемые вопросы (часто задаваемые вопросы) или страница вопросов и ответов (вопросы и ответы), чтобы сохранить сканируемый контент в верхней части экрана, я предпочитаю размещать маркированный или нумерованный список интерактивных текстовых ссылок вверху. страницы. Таким образом, пользователям не придется прокручивать страницу, чтобы быстро просмотреть контент, доступный на странице.
Вот пример:
Рис. 4: Длинные страницы можно легко «разбить» на подзаголовки и текстовые ссылки на странице. Этот формат страницы не только удобен для пользователя, но и удобен для поисковых систем.
Быстрый совет: Один из способов добавить к контенту сканируемый маркированный список - найти предложение, содержащее несколько запятых. Вероятно, вы можете переписать и переформатировать предложение в виде маркированного списка.
5. Вытягивающие и блоковые кавычки
Один из самых простых способов создать сканируемый контент - создать кавычки и блок-кавычки.
Элемент
Ablockquoteопределяет раздел (внутри документа), цитируемый из другого источника.pull-quote (или цитата) - это краткая, привлекающая внимание цитата, обычно в особом формате, взятая из основного текста статьи и используемая в качестве элемента страницы.
В целях поисковой оптимизации (SEO) я часто использую эти форматы, чтобы побудить авторов делать упор на содержание, ориентированное на ключевые слова или концепции. Не забывайте по возможности форматировать кавычки и блок-кавычки как текст.
Вот несколько примеров:
Рис. 6: Вытягивающие и блоковые кавычки предоставляют некоторые творческие возможности командам дизайнеров и конверсистов.
Быстрый совет: Старайтесь выравнивать текст цитаты по левому краю. Текст будет легче читать и легче сканировать. Кроме того, не форматируйте этот текст в Javascript. Вы хотите, чтобы поисковые системы уловили этот текст.
7. Графические изображения с дополнительными подписями и заголовками
Графические изображения на веб-страницах должны служить определенной цели, а не просто эстетической причине. Облегчает ли графическое изображение сканирование контента? Помогает ли графическое изображение конверсиям, привлекая внимание пользователей к важному контенту? Помогает ли графическое изображение передать ощущение места или информационный запах? Подходит ли графическое изображение для страницы, а не просто стандартная фотография?
Все это веские причины использовать графические изображения на веб-страницах.
Одним из вариантов графических изображений является включение заголовка и подписи изображения, отформатированных в CSS (каскадная таблица стилей). Окружение графического изображения контекстом помогает как поисковым системам, так и читателям понять суть изображения.
Быстрый совет: Старайтесь выровнять заголовок изображения и текст подписи по левому краю. Текст будет легче читать и легче сканировать.
7. Видео с дополнительными субтитрами и заголовками
Как и графические изображения, видео на веб-страницах должно служить определенной цели, а не просто эстетической причине или маркетинговой рекламе. Помогают ли видео повысить доверие к вашим продуктам и/или услугам? Помогают ли видео пользователям выполнить желаемые задачи? Повышают ли видео доверие пользователей?
Мне также нравится окружать видео правильным контекстом - как заголовком видео, так и подписью, отформатированной в CSS - когда это возможно.
8. Жирный и курсив
Более тонкий способ улучшить сканируемость контента - использовать жирный шрифт и/или курсив внутри контента. При правильном использовании этот текстовый формат может привлечь внимание пользователей к подписи, заголовку, цитате, блок-кавычке или даже к слову или фразе в статье.
Аннотированный маркированный или нумерованный список также может привлечь дополнительное внимание, если использовать жирный текст, как показано в примере ниже:
- Шаг 1: Сделайте это и подождите 30 секунд.
- Шаг 2: Сделайте это немедленно.
- Шаг 3: Подождите еще 30 секунд, пока что-нибудь не произойдет.
- Шаг 4: Вспеньте, промойте и повторите при необходимости.
Мне нравится использовать жирный шрифт, когда я определяю термин в статье. В этой статье я сделал это с определениями Blockquote и Pull-quote. Я редко использую курсив, потому что из-за него текст становится труднее читать.
Имейте в виду, что с любым из этих способов можно легко переборщить, особенно если ваш контент уже содержит заголовки и подзаголовки. В этом случае я настоятельно рекомендую A/B и многовариантное тестирование.
9. Числа, заглавные буквы и специальные символы
Цифры повышают удобство сканирования веб-контента, особенно если пользователи ищут факт. Простое размещение в контенте цифры (4) вместо написанного слова (четыре) должно усилить фиксацию.
Такие символы, как знак процента (%), знак доллара или другой валюты ($), также могут усилить фиксацию. Я часто использую цифры и символы в элементах страницы, на которые хочу обратить внимание пользователей, например в подписи или цитате.
Попробуйте, если хотите провести простой эксперимент. Что вы замечаете больше: шестьдесят девять процентов или 69%? Увеличение продаж на 69 процентов или УВЕЛИЧЕНИЕ продаж на 69%?
Опять же, чтобы добиться эффекта, не злоупотребляйте этими предметами. Слишком большое использование заглавных букв может иметь противоположный эффект и может выглядеть так, будто вы кричите посетителям вашего сайта.
10. Аннотации
Последний элемент часто упускают из виду, как придать контенту информативную окраску, актуальность и ключевые слова.
Слишком часто ссылка может быть «сексуальной» без ключевого слова или ключевой фразы. Он может стоять сам по себе (если он выглядит и доступен для кликов). Поскольку я давно понял, что поисковые системы ценят слова в якорном тексте и рядом с ним, я часто размещаю аннотации в различных областях страницы.