Проектирование главной страницы сайта

Как оформить главную страницу сайта

Главная страница — это лицо вашего сайта! Особенно, это утверждение применимо для сайтов предоставляющих какие либо услуги. Я очередь редко встречаю сайты, использующие потенциал главной страницы с умом. Обычно я сталкиваюсь с невменяемой семантикой и кривой структурой.

Определите тип страницы

Главная страница может иметь несколько типов, в зависимости от поставленных задач. Например, в интернет магазинах, главная страница выполняет навигационную роль + транзакционную (продажа товаров по акции, новинок, и тд). Для сайтов услуг, наиболее характерно продавать с главной страницы свою главную услугу (например: «утилизация отходов», «школа скорочтения», «разработка сайтов»).

Я выделяю 3 возможных типа главной страницы:

  1. Транзакционная — отрабатаваем возражения и продаем свой товар клиенту (страницы выглядят как LP);
  2. Информационная — мы рассказываем о компании, бомбардируем своими УТП и кейсами;
  3. Навигационная — даем пользователю удобную навигацию, увлекаем его и уводим в глубины сайта).

*Все зависит от тематики вашего сайта и ваших приоритетов. Чем сложнее вам определить тип страницы, тем больше вероятность что она будет не эффективной. Смешивать типы можно, но вы должны четко представлять что ждете от пользователя (Например: покупка, переход на страницу каталога, подписка на новости)…

Перед проектированием определите:

  1. Чего мы хотим от пользователя попавшего на нашу страницу? (Модели поведения)
  2. По каким поисковым запросам пользователи должны попадать на эту страницу?
  3. Какие задачи ставит пользователь перед нами, какие у него потребности?
  4. Какие страхи у нашего пользователя и какие факторы влияют на его решение?

Ошибки при проектировании страниц, очень похожи на ошибки начинающих менеджеров по продажам:

  • Менеджеру нужно заполучить доверие — а он старается продать в лоб;
  • Когда доверие получено и нужно говорить о деньгах — менеджер болтает и дает повод для сомнений.

То же самое и с сайтами. Так где пользователям нужно дать коммерческую информацию, УТП и интерфейс направленный на конверсии — им почему подсовывают непонятные SEO тексты, кучу ссылок и вкладок, и все это очень часто сопровождается кислотными палитрами:

Пример нелепого макета из выдачи ПС

ПС: Yandex; Запрос: «Купить кондиционер»; Позиция: 17

Пример плохой страницы товаров

ВЕРДИКТ:

  • Куча кнопок, цвета сливаются,
  • Автоматически сгенерированные тексты для карточек товаров (никакой ценности они не несут),
  • На странице кондиционеров показывается баннер со снегоуборочной машиной!
  • Основной фокус забирают на себя кнопки «Выбрать» и «Подобрать» — вместо кнопки «Добавить в корзину»

Продолжать можно до бесконечности… А вывод всего один: дизайнер и проектировщик не понимали какая цель у страницы. Они просто не смогли расставить акценты на важных элементах

Пример главной интернет магазина


Пример главной страницы сайта Макет собран на скорую руку, но может быть полезен для новичков. Блоки в исходнике не пронумерованы и для объектов не заданы имена (на подобный макет обычно уходит не более 20 минут).

  • Слайдер спецпредложений
  • Матрица УТП 3х3 максимум
  • Товарный концентратор
  • Концентратор категорий и подкатегорий
  • Текст о компании + фото
  • Отзывы клиентов 3х1 + пагинация
  • Концентратор статей / новостей

 

 

 

 

 

Пример главной для клиники


Пример главной страницы сайта клиники Макет собран на скорую руку, но может быть полезен для новичков. Блоки в исходнике не пронумерованы и для объектов не заданы имена (на подобный макет обычно уходит не более 20 минут).

  • Слайдер спецпредложений
  • Матрица УТП 4х1 максимум
  • Концентратор услуг
  • Информационный блок
  • Блок ответов на вопросы (отработка возражений)
  • Список врачей
  • Текстовый блок
  • Слайдер наград и сертификатов клиники

О чем следует помнить

  • Определите что конкретно вы хотите получить от пользователя
  • Не перегружайте пользователя, выводите в 1 ряд, не более 3х блоков
  • Перед проектирование главной страницы, определите для нее продвигаемые запросы
  • Проверьте что делают ваши конкуренты, посмотрите какая блочность определена на их сайтах
  • Каждый новый блок должен приближать пользователя к целевому действию
  • Упрощайте!

 

 

3 комментария

  • Евгений Беляев

    25.08.2018 at 04:33

    Владимир, отличная статья! Удивлен что раньше не видел ваш блог
    Откуда берете информацию? Поделитесь источниками?

    Ответить
    • Кондрашов Владимир

      25.08.2018 at 10:21

      Евгений, спасибо за обратную связь!

      Информацию беру отовсюду ( mozcom / webpagefx / ahrefs blog…)

      Но статьи пишу основываясь на личном опыте, и на примере собственных сайтов

      Скоро заведу раздел «Рекомендую почитать» — и сделаю небольшие обзоры на узко направленную литературу по SEO / UX UI проектированию / Машинному обучению

      Ответить
  • Камилла

    03.01.2019 at 21:31

    В этом деле я новичок, но статья действительно интересная! Спасибо) Для себя нашла ещё кучу полезной информации у вас на сайте.

    Ответить

Добавить комментарий