Для ранжирования в поисковиках важны поведенческие факторы — то, как пользователи ведут себя на сайте, сколько времени на нем проводят, и как много из них уходит, только открыв страницу.
На поведенческие факторы можно влиять с помощью дизайна и продуманной навигации для юзабилити. Разберем важные элементы дизайна, влияющего на SEO.
1.Навигация
Веб-дизайнеры при проработке навигации и меню ориентируются на правило, по которому взгляд пользователей скользит по экрану согласно Z-модели, начиная с верхнего левого угла. Если пользователи столкнутся с неудобной запутанной навигацией, они уйдут с сайта, показатель отказов вырастет.
В примере навигация расположена по горизонтали в ряд, названия понятны для пользователя и не перегружены.
Совет: проанализируйте меню на вашем сайте и посмотрите на него глазами пользователя, который не знает ничего о вашей компании и хочет найти ответ на какой-то вопрос или решить задачу. Подумайте, все ли ему понятно, как быстро он сможет сориентироваться и добраться до нужного раздела.
2. Читабельность
Визуальный контент улучшает понимание и запоминаемость, но текст тоже нужно прочитать, и задача веб-мастера — сделать его читабельным и комфортным для восприятия.
Правила для читабельного текста:
- Черный или темно-серый контрастный текст на белом или светло-сером фоне.
- Простые шрифты с засечками или без засечек,используйте декоративные для акцентов на важных заголовках, но не увлекайтесь ими.
- Размер текста от 16 пунктов.
- Строки длиной от 50 до 60 символов.
- Абзацы не более 4-5 строк.
- Большие части однородного контента разбиты списками,схемами, картинками или другими медиа.
- Заголовки позволяют читателям и поисковым роботам быстрее понять, о чем страница.
Совет: оформляйте контент так, чтобы его было легко читать порциями, иллюстрируйте текст. Если понимаете, что какую-то тему можно нагляднее раскрыть визуально, снимите видео или сделайте схему.
3. Всплывающие окна
Google плохо относится к сайтам, которые злоупотребляют всплывающими окнами, пользователи тоже их не любят. Сейчас говорят уже не только о баннерной слепоте, но и о pop-up-слепоте, когда пользователь не воспринимает информацию на всплывающем окне, а закрывает его, не читая.
Если вам нужно сделать всплывающее окно, как его лучше оформить:
- минимальное количество pop-up;
- окно не мешает воспринимать контент и легко закрывается;
- окно появляется своевременно: после определенного количества проведенных секунд на сайте, на подходящих страницах;
- pop-up занимает немного места на экране, а если окно большое,то содержит очевидные преимущества и выгоды.
Совет: некоторые элементы и предложения можно поместить на странице как баннер или выделить как-то еще, не помещая на всплывающее окно. Но если pop-up все-таки нужен, оформите его ненавязчивым и не мешающим просмотру.
4. Изображение как фон для текста
Текст на изображениях, даже на контрастных, читается хуже из-за того, что изображение все-таки пестрое и отвлекает. На мобильном экране читать текст с картинки еще сложнее.
Если вам нужно поместить заголовок на изображение, затемните низ, сделайте виньетку или как-то по-другому сгладьте пестроту фона и сделайте его контрастным тексту. Но лучше смотрится текст под изображениями.
Совет: текст на изображении может выглядеть красиво, но читать его неудобно. Проверьте, как читаются все заголовки на вашем сайте, не конфликтуют ли они с картинками, не напрягаются ли глаза от долгого чтения контента.
Следите за тем, чтобы вашим пользователям было удобно воспринимать информацию с сайта, читать текст и находить нужные данные.