Юзабилити Главной страницы, или как не ударить в грязь лицом

Что должно быть в каталоге домашней страницы или сохранено во вкладках браузера?

Что должно быть на странице

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

Заголовок страницы

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

Информационное окно страницы должно быть визуально отделено от остальных элементов и содержать следующие элементы:

  1. Логотип Лучше быть слева. Название компании , если эта информация не указана в логотипе. Сокращенное описание услуги , также если эта информация не включена в логотип или название компании хорошо отражает предоставляемые услуги или товары. <Регионы обслуживания для сайта обслуживания и регионы доставки для интернет-магазинов. <Контактные данные. Даже если у вашей компании несколько телефонных номеров, лучше оставить один номер рядом с номером телефона. Адрес может быть добавлен, если местоположение компании важно для темы. Например, для оздоровительного клуба, клиники или юридической фирмы. <Рядом с номером телефона добавьте форму обратного звонка. Кроме того, для интернет-магазинов добавьте ссылку на их корзину, список желаний и список сравнения продуктов.

Если вы пропустите хотя бы один пункт, то запутаетесь.

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

Неинформативный заголовок страницы

И такой заголовок сайта сразу сориентирует нового посетителя на страницу, очень понятно, чем занимается компания:

 

Информационный заголовок веб-сайта

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

Форма поиска в заголовке

Дополнительные сведения о том, как должна выглядеть форма поиска, см. в этой статье.

Главное меню

 

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

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

Меню лучше не перегружать, достаточно 5-7 основных ссылок. Если у вас несколько разделов, мы рекомендуем разделить меню на два: один под заголовком, который ссылается на любые вспомогательные разделы (например, о странице компании, блоге, партнерском разделе и т. Д.), А другой под заголовком заголовок, который ссылается на каталог или службы. Пример:

 

Два горизонтальных меню на странице

 

рекомендуюа также чтение статей о базовой навигации на сайте и формах.

Первый экран

 

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

Это можно сделать двумя способами:

Определите, почему вы лучше других. Убедитесь, что вы используете свой SPP. Вы можете добавить ссылку на каталог / список услуг или форму запроса. Пример первого экрана с преимуществами:

Первый экран на веб-сайте с преимуществами компании

Размещайте ссылки на рекламные акции, акции и новые продукты, которые можно оформить в виде слайдера. Убедитесь, что вы добавили к ползунку стрелки, индикатор количества слайдов и замедленную прокрутку. Слайды должны быть интерактивными и вести на соответствующие страницы сайта.

Ползунок на первом экране

Вы можете комбинировать варианты, например, в этом примере вы указываете преимущества компании и добавляете информацию об акции при оформлении заказа с веб-сайта:

 

Информация о преимуществах и акциях на первом экране

Второй экран обычно наиболее эффективен для ваших продуктов или услуг.

Список услуг или категорий продуктов

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

Блок категории товаров

Для услуг можно дополнительно указать стоимость:

 

Блок категории услуг

Блок категорий услуг

 

Если список категорий слишком длинный, информацию можно сгруппировать в группы:

Блокировать с группами категорий товаров

Многие страницы делают ошибку, заменяя этот блок боковым меню. Домашняя страница усиливает линейку продуктов, но оставляет боковую панель в разделе каталога или услуг.

В дополнение к списку товаров вы можете отдельно отображать новые или популярные товары со скидкой для вашего интернет-магазина. Покажите лучше 3-4 товара (или воспользуйтесь слайдером) и добавьте ссылку на соответствующий раздел в каталоге. Пример такого блока:

Пример блока новостей

Преимущества для клиентов

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

Список преимуществ

Дополнительные услуги и функции

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

 

Информационный блок для партнеров

Или о мобильном приложении можно рассказать отдельно:

 

Информацияо мобильном приложении

Рабочий процесс

Этот блок особенно важен для сложных, нишевых или новых тем, в которых пользователей необходимо проинформировать об этапах взаимодействия. Это можно сделать в виде схемы или краткой инструкции:

 

Руководство по сайту

И еще пример:

Схема рабочего процесса

Примеры работы

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

 

Пример проекта

 Пример проекта

 

Еще один пример в виде ползунка с работает до и после:

Портфолио как слайдер с работами до и после

Или вы можете оформить свою работу в виде тематического исследования:

 

Форматирование работает как дела

О компании

 

Мы рекомендуем добавить страницу компании на свой веб-сайт, чтобы завоевать доверие, рассказав пользователям больше о вас. Подробнее о том, что разместить на сайте, можно прочитать здесь.

Для домашней страницы вы можете добавить короткую рекламу этого раздела с кратким описанием и несколькими фотографиями. Пример:

 

 

Информационный блок компании

Клиентский опыт

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

Отзывы с фотографиями клиентов

Для сегмента B2B вы можете публиковать обзоры как отсканированные документы:

 

Обзоры документов

Если позволяет тематика бизнеса, можно дополнительно показать логотипы партнеров:

Партнерские логотипы

 Партнерские логотипы

 

Статьи, новости, полезные ресурсы

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

 

Начать.

Анонсы статей

Пример блока сообщения:

Новостные анонсы

Если у вас несколько разделов со статьями, вы можете оформить их так:

 

Блок со ссылками на статьи, обзоры и новости

Форма консультации

Для тех пользователей, у которых есть вопросы после просмотра домашней страницы, вы можете разместить форму консультации ниже:

Образец формы внизу страницы

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

Пример ссылки на онлайн-консультанта

Нижний колонтитул страницы

 

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

 

База сайта

 База сайта

 

Это все основные информационные блоки, которые следует разместить на главной странице.

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

 

Подвал веб-сайта Beru

 

Распространенные ошибки

 

Пока мы рассмотрели основы, давайте поговорим о типичных ошибках в дизайне домашней страницы.

Нет текста. На главной странице часто отсутствует текст или наоборот. занимает слишком много места.

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

Кроме того, мы рекомендуем прочитать следующие статьи: Домашний текст и текст B2B.

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

Из-за этого информация выглядит беспорядочной и неудобной, особенно если ползунки анимированы. Лучше чередовать вид слайдера и статический вид.

Пример размещения ползунков один за другим:

 

Размещение ползунков рядом

Размещение ползунков рядом

 

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

 

Объединение ползунков в один блок

Объединение ползунков в один блок

 

Несколько информационных столбцов. Давным-давно страницы с содержанием в 3 столбца утратили актуальность.

Чтобы ваши страницы казались менее загроможденными визуально и с ними было легче ориентироваться, мы рекомендуем одну или две колонки.

Пример перегруженной страницы:

Размещение информации в трех столбцах

Пример современного последовательного макета с одним столбцом:

Организуйте информацию в один столбец

Организуйте информацию в один столбец

 

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

Всплывающие окна.

Этот инструмент полезен, но мы узнали больше о том, как его правильно использовать здесь.

Пример раздражающего всплывающего окна:

Всплывающее окно на странице

Плохие фотографии портят впечатление о сайте и снижают доверие. Прочтите эту статью о выборе правильных изображений для вашего сайта. Хорошие фотографии помогают продавать ваши товары и услуги.

См. наглядный пример эти сочные фотографии определенно заставят вас просмотреть меню и порядок:

 

Пример качественной фотографии

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

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

 

Оцените статью