Как сделать качественный сайт электротехнической компании. Чек-лист
Article title

Как сделать качественный сайт электротехнической компании. Чек-лист

27 февраля 2020
~ 15 минут на чтение
Алексей Андреев
ux-дизайнер
В декабре 2019-го состоялся международный конкурс «Электросайт года — 2019». На нем генеральный директор нашего агентства Павел Тарелкин оценивал работы и определял победителей. Члены жюри обращали внимание на дизайн сайтов, их юзабилити, информационное наполнение, мобильную версию и другие составляющие современных ресурсов.

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

Что должно быть на сайте

Шапка

  • Кликабельный логотип компании (ссылка на главную страницу).
  • Номер телефона компании — должен быть сделан ссылкой
    <a href="tel:+1234567890">.
Пример размещения нескольких номеров и ссылок на мессенджеры на сайте
Интересный прием размещения сразу нескольких номеров и ссылок на мессенджеры с помощью раскрывающегося списка.
  • Поле / иконка поиска (если такой функционал есть на сайте).
  • Ссылки навигационного меню на виду (не рекомендуется использовать бургер-меню, если это не презентационный сайт).

Подвал

  • Основные контакты компании.
Пример размещения основной контактной информации в подвале.
Пример размещения основной контактной информации и ссылок на все контакты в подвале.
  • Ссылки на социальные сети (размещаются в виде узнаваемых иконок).
  • Основное меню из шапки (пункт опциональный). Например, в ситуации, когда шапка с меню «прилипает» к верху экрана при прокрутке, дублировать меню в подвале бессмысленно.
Пример подвала, вмещающего логотип, ссылки на все разделы сайта, соцсети и служебные страницы.
Большой подвал вместил в себя логотип, ссылки на все разделы сайта, соцсети и служебные страницы.

Навигация и поиск информации

  • В основном навигационном меню ограниченное количество ссылок — рекомендуется размещать не более 5−7.
Пример разбиения ссылок в меню на смысловые группы
Если уменьшить количество ссылок не получается, то нужно подумать о разбиении их на смысловые группы.
  • В навигационном меню — ссылки на все основные разделы сайта, желательно вплоть до 3-го уровня вложенности (особенно актуально для каталогов продукции).
  • Названия ссылок в меню понятные и конкретные — по ним пользователь сразу понимает, что увидит на странице.
  • На длинных страницах (например, продуктовых) должно быть дополнительное якорное меню со ссылками на блоки страницы.
  • На всех внутренних страницах — «хлебные крошки».
Пример хлебных крошек на сайте
Хлебные крошки — это навигационная цепочка, которая размещается в верхней части страницы сайта и отображает путь от главной страницы до той, на которой сейчас находится пользователь.
  • На страницах должны быть дополнительные способы навигации, кроме основного меню. Например, блоки с быстрыми ссылками на близкие по смыслу разделы или блоки с другой продукцией в каталогах.
Пример блока с похожей продукцией на сайте
Must have — блок с похожей продукцией в карточке продукта.
  • Если на сайте — много страниц или каталог продукции, то обязательно должен быть функционал поиска.
  • Поиск заметен и легко доступен с любой страницы сайта.
  • Поиск быстро работает и мгновенно показывает результат.
Пример поисковой выдачи по сайту
При вводе 3-х символов поиск уже показывает результаты.
  • При вводе запроса в поле поиска автоматически предлагаются варианты результатов или по умолчанию отображаются популярные запросы.
Пример поиска информации по тегам на сайте
В поиске отображаются популярные запросы и теги для поиска.
  • На странице поисковой выдачи показывается количество найденных результатов и есть возможность их фильтрации.
Пример фильтров на сайте

Главная страница

  • В начале страницы размещены элементы, благодаря которым пользователь понимает, куда он попал. Это может быть логотип (если компания узнаваемая), крупный заголовок на первом экране или даже визуальное оформление.
  • На странице представлены блоки основных разделов сайта. Например, есть блок с услугами или продукцией, краткий блок о компании, блок с последними новостями и т.д. Из каждого из них можно перейти в соответствующий раздел.
Пример главной страницы сайта
Главная страница полностью раскрывает содержание продуктового сайта GE Lighting: здесь представлены различные семейства продукции, виды предлагаемого освещения, описаны преимущества LED-ламп, есть краткое описание компании.
  • Наглядно показаны преимущества компании.
  • Последние новости на главной странице всегда должны быть свежими и актуальными. Если пользователь увидит, что последняя новость вышла еще год назад, он может подумать, что компания больше не работает.

Продукция

  • Каталог продукции разбит на категории с понятными и популярными среди целевой аудитории названиями.
Пример навигации на сайте
Понятные названия категорий в основном меню сопровождаются иллюстрациями.
  • Категории каталога представлены с помощью иллюстраций, которые точно отображают продукцию внутри категории.
Пример карточек продукции на сайте
  • У компаний, которые предлагают b2b-решения для разных отраслей, каталог должен быть дополнительно представлен отраслями применения продукции.
  • Возможность в один клик переключаться между основными категориями каталога.
  • В категории каталога — больше 15 продуктов (фильтрация по характеристикам, по которым выбирают продукты).
  • Сортировка продуктов по популярности, названию и цене.
Пример сортировки товаров на сайте
Обычно сортировка реализуется с помощью раскрывающегося списка.
  • Фильтры работают таким образом, что никогда не будет пустых результатов фильтрации.
  • Продукция в каталоге представлена несколькими способами. Например, карточками и таблицей (актуально для b2b-клиентов).
  • У превью продукции в каталогах должны быть указаны основные характеристики или краткое описание.
  • На первом экране карточки продукта — основная информация о нем и кнопка действия.
  • В карточках продукта указана стоимость, описаны преимущества и технические характеристики.
  • Если в каталоге представлено много взаимозаменяемых продуктов, то должен быть функционал сравнения.
Сравнительная таблица товаров в интернет-магазине Samsung.
Сравнительная таблица в интернет-магазине Samsung. Группировка по категориям, есть возможность скрыть одинаковые характеристики.
  • Раздел с документацией и справочной информацией о продукции.
Раздел «Поддержка» на сайте Schneider Electric
Раздел «Поддержка» на сайте Schneider Electric содержит не только страницы с документацией, но и полезные ссылки на подбор продукции, приложения, информационные страницы.
  • Если компания реализует сложные нестандартные технические решения, то должен быть раздел с описанием выполненных проектов.

Конфигураторы и калькуляторы

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

Конверсии

  • На всех целевых страницах — конверсионные элементы.
Блок для обратной связи размещается на всех основных страницах сайта Bosch.
Блок для обратной связи размещается на всех основных страницах сайта Bosch.
  • Если есть цель получать звонки, то в шапке сайта должна быть соответствующая кнопка.
Яркая кнопка «Перезвоните мне» в шапке сайта.
Яркая кнопка «Перезвоните мне» в шапке сайта.
  • Конверсионные элементы хорошо заметны и контрастируют с другими элементами на странице.
Хорошо заметная кнопка «Отправить» на странице.
Хорошо заметная кнопка «Отправить» на странице.
  • Для побуждения пользователей к действию используются формулировки, демонстрирующие выгоду.
  • Если пользователь может совершить два разных действия, то одно выделяется как основное, а другое как второстепенное.
Поиск магазинов на сайте
Основное действие (поиск магазинов) реализовано контрастной синей кнопкой, а второстепенное (посмотреть характеристики) — кнопкой с серым контуром.
  • В формах обратной связи минимум полей для заполнения — только самые необходимые.

Контакты

  • Есть контакты всех основных направлений / отделов / ключевых сотрудников (телефоны, факс, e-mail).
Группировка контактов компании
Контакты компании сгруппированы по отделам, а контакты отдела продаж дополнительно разбиты по географии.
  • Динамическая карта проезда до офиса («Яндекс.Карты» или Google Maps).
  • Если у компании есть филиалы, то они должны быть представлены в разделе с контактами с понятным разделением / фильтрацией по городам.

Дизайн

  • Визуальный стиль сайта должен соответствовать сфере, в которой работает компания.
  • Интерфейс чистый и лаконичный — отсутствуют нагромождения элементов в рамках одного экрана, между блоками и элементами есть «воздух».
  • Информация подается структурировано и группируется в смысловые блоки заметными заголовками.
  • На страницах отсутствуют большие блоки сплошного текста, если только это не новость. Текстовые блоки разбавляются различным визуальным контентом.
  • Длина текстовой строки не более 60−80 символов.
  • Для текста используется комфортный для чтения размер шрифта (16px и больше).
  • На сайте используются качественные фотографии и видео.
  • На сайте есть анимация микровзаимодействий для улучшения пользовательского опыта.
Отличный пример использования микроанимаций — сайт Hoyer.
Отличный пример использования микроанимаций — сайт Hoyer.

Заключение

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

683
Оцените статью
(3.86)

Поделитесь материалом с друзьями и коллегами:

Комментарии к статье

Другие статьи в блоге
Статьи ~ 5 минут на чтение

Как работать из дома эффективно: лайфхаки от удаленщиков Uplab

154
31 марта 2020
Статьи ~ 20 минут на чтение

Как продвинуть интернет-магазин с помощью коммерческих факторов

364
27 марта 2020
Статьи ~ 15 минут на чтение

Work From Home: полезные сервисы для удаленной работы

457
24 марта 2020
Статьи ~ 30 минут на чтение

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

674
16 марта 2020
Статьи ~ 10 минут на чтение

Сайты электротехнической отрасли: разбираем лучшие практики

511
28 февраля 2020
Статьи ~ 30 минут на чтение

30 сервисов, чтобы создать онлайн-курс и заработать на нем

4076
18 февраля 2020
Статьи ~ 15 минут на чтение

Наполнение сайта контентом без ошибок: чек-лист

1797
31 января 2020
Статьи ~ 20 минут на чтение

Как в Uplab разрабатывают сайты. Финальный этап

948
24 января 2020
Статьи ~ 30 минут на чтение

Как работать с отзывами в интернете

4192
17 января 2020
Статьи ~ 25 минут минут на чтение

Как подготовить сайт на «1С-Битрикс» к поисковому продвижению

2740
22 ноября 2019