Типичные ошибки дизайна сайта, SEO и технических нюансов

/ 12.09.2018
Час на читання: 7 хвилин
Типичные ошибки дизайна сайта и SEO ошибки

Почему одни сайты затягивают и мотивируют изучить все детали, а другие хочется закрыть после первых 2 секунд? Почему один Landing Page успешно генерирует десятки заявок в день, а другой – ни одной? Есть масса факторов: от ниши бизнеса до качества и источника трафика. Но большинство проблем упирается в ошибки дизайна сайта, организации контента и технические тонкости.

В этой статье расскажем про:

Ошибки дизайна сайта: Landing Page и корпоративные сайты.
Технические ошибки и тонкости
SEO ошибки сайта: как и что исправлять

Ошибки дизайна сайта: Landing Page и корпоративные сайты

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

Ошибка №1: Отсутствуют смысловые блоки

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

Ошибка №2. Разные и неправильные отступы между элементами

Если отступы слишком маленькие, блоки начинают «прилипать» друг к другу и создают путаницу. Пользователь может неправильно сопоставить заголовок и текст, не уловить логическую связь. Зачастую это просто вызовет сложности и может заставить просто закрыть сайт.

ошибки дизайна сайта - неправильные отступы в дизайне сайта

Пример неправильной верстки и нарушения правила внутреннего и внешнего.

Чтобы не вникать в десятки тонкостей верстки, запомните одно, базовое правило.

Правило внутреннего и внешнего: внутреннее ≤ внешнее.

  1. Внутреннее — расстояние между буквами, внешнее — между словами.
  2. Внутреннее — между словами, внешнее — между строками.
  3. Внутреннее — между строками, внешнее — между абзацами или поля вокруг текста.

Это касается всего контента на сайте.

Ошибка №3: Тексты на фотографиях и иллюстрациях плохо считываются

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

Ошибка №4: Много стилей, цветов и шрифтов

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

Чтобы не допускать этого, старайтесь выдерживать:

  • 1 или 2 шрифта (пара, которая сочетается);
  • 2 вида насыщенности – для обычного текста и для заголовков, подзаголовков;
  • 2-3 цвета для всего сайта – 1, как правило, акцентный: для кнопок, визуального выделения и т.д.

Ошибка №5: Выравнивание по центру с большим объемом текста

Выравнивать по центру заголовки, подзаголовки, призывы – одно дело. Но когда большой объем текста или несколько колонок по 5-7 строк, лучше выбрать выравнивание по левому краю. Это упрощает чтение для пользователя.

выравнивание текста по центру

Много текста с выравниваем по центру тяжело читать.

Ошибка №6: нарушение визуальной иерархии

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

Ошибка №7: мало «воздуха» в дизайне

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

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

правильные акценты в дизайне и белое пространство

Пример дизайна страницы с «белым» пространством и правильными акцентами.

 

Технические ошибки сайта и тонкости

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

Скорость загрузки сайта

Убедитесь, что сайт находится в «зеленой зоне» Google Page Speed и загружается быстро как с мобильных устройств, так и с компьютера. Большая часть пользователей закроет сайт, если он грузится дольше 3 секунд.

Понятные адреса страниц

Если вы попадаете по ссылке site.com/1215252/3952.html, вам вряд ли понятно из адреса, о чем идет речь. Но стоит настроить ЧПУ (человекопонятные URL) и адрес превращается в site.com/services/uborka-domov.

HTTPS соединение

Если ваш сайт еще находится на протоколе http://, Google будет отмечать его как «Небезопасный» — поскольку этот протокол устарел. Это может отпугивать пользователей и ухудшать ваши позиции в поиске.

Страница ошибки 404

Это ошибка, которая возникает, когда человек переходит по недействительном адресу – удалили страницу, опечатались при отправке и т.д. Сделайте эту страницу информативной. Объясните, что произошла ошибка, оставьте ссылку на главную страницу, добавьте строку поиска, чтобы человек нашел, что искал.

Редиректы

Это перенаправления между страницами вашего сайта. Определите основной адрес сайта. Например: vashbrand.com. Настройте 301 редирект, чтобы с адреса www.vashbrand.com пользователя автоматически «перекидывало» на основной адрес. Это поможет избежать дублей страниц и проблем с оптимизацией под поисковые системы.

Правильный код

Проверьте свой сайт на валидность (правильность) кода в сервисе W3C. Чистый, правильный код не только ускоряет загрузку страницы, но еще и влияет на корректное отображение с разных устройств, позиции в Google и Яндекс.

Надежный сервер/хостинг

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

seo ошибки сайта - что и как исправлять

SEO ошибки сайта: как и что исправлять

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

Что учесть на сайте в плане SEO

  1. Прописывайте правильно Meta-тэги. Title – до 70 символов, Description – до 160 знаков, лучше включать свои УТП, выгоды для клиентов.
  2. Обязательно включайте ключевые фразы в Title, Description, заголовки H1-H
  3. Используйте уникальные иллюстрации и фото, прописывая им релевантные описания в Title и Alt.
  4. Создайте XML и HTML карту сайта для нового сайта, чтобы ускорить индексацию в поисковых система. Особенно актуально – для больших сайтов.
  5. Добавьте сайт в Яндекс.Вебмастер и Google Search Console. Там же вы будете получать важные уведомления и рекомендации по оптимизации сайта.
  6. Отталкивайтесь от удовлетворения запросов пользователей – добавляйте фото, видео, инструкции и вовлекающие элементы на страницы, чтобы люди поводили на них больше времени. Это часть поведенческих факторов, которые учитываются в продвижении.
  7. Ссылайтесь на другие страницы своего сайта. Например, в статье блога можно ссылаться на какие-либо кейсы, страницы услуг или другие, связанные по теме, статьи.
  8. Размещайте публикации на профильных площадках, форумах и в СМИ. Ссылки с качественных ресурсов по-прежнему играют важную роль в продвижении сайта.

Проверьте свой сайт на ошибки, описанные в статье, и исправьте их. Так вы сделаете серьезный рывок вперед:

  • упростите жизнь свои клиентам;
  • повысите конверсию и получите больше обращений;
  • снизите показатель отказов;
  • улучшите позиции в поисковых системах;
  • снизите издержки на маркетинг.

Just do it!

5,00
Загрузка...

Готові до стрімкого зростання?

Для цього я підготував спеціальні чек-листи

  • Контент-план для соцмереж на 30 днів
  • Перелік важливих Hard Skills Маркетолога
  • Список питань для визначення ЦА
  • Ключові етапи воронки продажів
  • Опрацювання образу клієнта
  • Чек-лист перевірки сайту


Подписывайтесь на telegram-канал Скромного Маркетолога

[contact-form-7 id="1458" title="Контактная форма 1"]

Готовы к более
стремительному росту
вашего бизнеса?

Для этого мы подготовили специальные чек-листы.

  • Все в порядке с вашим сайтом или лендингом и что стоит улучшить;
  • Какие есть ключевые этапы воронки продаж;
  • ТОП 10 лучших инструментов аналитики;
  • Блиц-тест проработки образа клиента (за 3 минуты).