редакции
Типичные ошибки дизайна сайта, SEO и технических нюансов
Почему одни сайты затягивают и мотивируют изучить все детали, а другие хочется закрыть после первых 2 секунд? Почему один Landing Page успешно генерирует десятки заявок в день, а другой — ни одной? Есть масса факторов: от ниши бизнеса до качества и источника трафика. Но большинство проблем упирается в ошибки дизайна сайта, организации контента и технические тонкости.
Ошибки дизайна сайта: Landing Page и корпоративные сайты
В этом материале мы акцентируем внимание именно на ошибках и нюансах корпоративных, имиджевых, продающих, информационных страниц. У Ecommerce проектов есть некоторые отличия, но большинство приемов можно применить и для них.
Ошибка № 1: Отсутствуют смысловые блоки
Когда на сайте единый фон и полотном идут текст, изображения, кнопки и формы, пользователю тяжело выделить смысловые блоки. Сделайте заметные отступы между блоками, выделите их за счет дизайна — фоном, иллюстрациями, разделителями.
На странице есть полотно текста. Быстро считывать его сложно, пользователь может просто не прочесть всего. У сайта есть визуальное деление на смысловые блоки. Информация считывается быстрее и удобнее. Если отступы слишком маленькие, блоки начинают «прилипать» друг к другу и создают путаницу. Пользователь может неправильно сопоставить заголовок и текст, не уловить логическую связь. Зачастую это просто вызовет сложности и может заставить просто закрыть сайт. Пример неправильной верстки и нарушения правила внутреннего и внешнего. Чтобы не вникать в десятки тонкостей верстки, запомните одно, базовое правило. Правило внутреннего и внешнего: внутреннее ≤ внешнее. Это касается всего контента на сайте. Большие фоновые изображения здорово цепляют внимание пользователей, но неудачное наложение текста может только отпугнуть. Если текст и иллюстрация не будут контрастными, быстро считывать заголовки, призывы, описания не получится. На этом фото текст плохо считывается, местами фон слишком светлый. Наложив темный цвет поверх изображения, текст стал считываться гораздо проще и быстрее. Несмотря на то, что яркие цвета привлекают внимание, их изобилие может отпугивать. Аналогично со шрифтами. В итоге получается непонятный микс как на примере. На этом примере слишком много цветов, тяжело сфокусироваться на чем-нибудь конкретном. Здесь всё проще и понятнее — за счет разной насыщенности шрифта сразу расставляются акценты даже без ярких цветов. Чтобы не допускать этого, старайтесь выдерживать: Выравнивать по центру заголовки, подзаголовки, призывы — одно дело. Но когда большой объем текста или несколько колонок по 5-7 строк, лучше выбрать выравнивание по левому краю. Это упрощает чтение для пользователя. Много текста с выравниваем по центру тяжело читать. Когда одни элементы больше других, мы автоматически считываем их как более важные. Если сделать главный заголовок крупнее, чем подзаголовки (смотреть пример), логика и структура распадаются. Когда визуальная иерархия соблюдается, клиент может быстро считывать информацию и правильно выделять, что и к какому блоку относится. Иерархия нарушена — заголовок меньше, чем подзаголовки внутри одного блока. На этом примере всё в порядке — заголовок большой, подзаголовки «Преимущества» меньше. Воздухом обычно называют белое/пустое пространство вокруг элементов и смысловых блоков. С одной стороны кажется, что можно использовать место на сайте максимально, с другой — перегруженные блоки тяжело считывать. Дополнительная причина использовать белой пространство — оно выступает таким же элементом композиции, помогает выделить другие элементы. В примере ниже, например, отлично используется и белое пространство, и визуальные акценты. За счет тонких шрифтов ощущение легкости только усиливается, а продукты выступают точками фокуса для пользователя. Пример дизайна страницы с «белым» пространством и правильными акцентами. Кажется, если визуально с сайтом всё в порядке, все ошибки дизайна сайта исправлены, то никаких проблем нет. Но внутренняя, техническая часть не менее важна. Она влияет на удобство для пользователей, оптимизацию для поисковых систем, конверсию. Убедитесь, что сайт находится в «зеленой зоне» Google Page Speed и загружается быстро как с мобильных устройств, так и с компьютера. Большая часть пользователей закроет сайт, если он грузится дольше 3 секунд. Если вы попадаете по ссылке site.com/1215252/3952.html, вам вряд ли понятно из адреса, о чем идет речь. Но стоит настроить ЧПУ (человекопонятные URL) и адрес превращается в site.com/services/uborka-domov. Если ваш сайт еще находится на протоколе http://, Google будет отмечать его как «Небезопасный» — поскольку этот протокол устарел. Это может отпугивать пользователей и ухудшать ваши позиции в поиске. Это ошибка, которая возникает, когда человек переходит по недействительном адресу — удалили страницу, опечатались при отправке и т.д. Сделайте эту страницу информативной. Объясните, что произошла ошибка, оставьте ссылку на главную страницу, добавьте строку поиска, чтобы человек нашел, что искал. Это перенаправления между страницами вашего сайта. Определите основной адрес сайта. Например: vashbrand.com. Настройте 301 редирект, чтобы с адреса www.vashbrand.com пользователя автоматически «перекидывало» на основной адрес. Это поможет избежать дублей страниц и проблем с оптимизацией под поисковые системы. Проверьте свой сайт на валидность (правильность) кода в сервисе W3C. Чистый, правильный код не только ускоряет загрузку страницы, но еще и влияет на корректное отображение с разных устройств, позиции в Google и Яндекс. Вы можете оптимизировать сайт, наладить код, устранить все ошибки, но из-за нестабильной работы сервера или хостинга, сайт будет медленно загружаться или периодически не загружаться вовсе. В идеале — использовать отдельный сервер у надежной компании с быстрыми SSD дисками, круглосуточной поддержкой, высокой производительностью. Практически все технические аспекты так или иначе влияют на продвижение сайта в поисковых системах. Но есть и другие нюансы, которые часто не учитываются. Подготовили небольшой чек-лист по SEO. Проверьте свой сайт на ошибки, описанные в статье, и исправьте их. Так вы сделаете серьезный рывок вперед: Just do it!
Ошибка № 2. Разные и неправильные отступы между элементами
Ошибка № 3: Тексты на фотографиях и иллюстрациях плохо считываются
Ошибка № 4: Много стилей, цветов и шрифтов
Ошибка № 5: Выравнивание по центру с большим объемом текста
Ошибка № 6: нарушение визуальной иерархии
Ошибка № 7: мало «воздуха» в дизайне
Технические ошибки сайта и тонкости
Скорость загрузки сайта
Понятные адреса страниц
HTTPS соединение
Страница ошибки 404
Редиректы
Правильный код
Надежный сервер/хостинг
SEO ошибки сайта: как и что исправлять
Что учесть на сайте в плане SEO