Главное Свежее Вакансии   Проекты
😼
Выбор
редакции
274 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

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

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


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

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


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


На странице есть полотно текста. Быстро считывать его сложно, пользователь может просто не прочесть всего.


У сайта есть визуальное деление на смысловые блоки. Информация считывается быстрее и удобнее.

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


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


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

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

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

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

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

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


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


На этом фото текст плохо считывается, местами фон слишком светлый.


Наложив темный цвет поверх изображения, текст стал считываться гораздо проще и быстрее.

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


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


На этом примере слишком много цветов, тяжело сфокусироваться на чем-нибудь конкретном.


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

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

  1. 1 или 2 шрифта (пара, которая сочетается);
  2. 2 вида насыщенности — для обычного текста и для заголовков, подзаголовков;
  3. 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


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

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

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

Just do it!

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.