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

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

Делимся нашей коллекцией лучших решений веб-разработки: по дизайну, организации информации, навигации и представлению продукции. Смотрите, изучайте, внедряйте!

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

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

Также не стоит забывать о важном правиле оформления текстовых блоков — для комфортного чтения длина строки не должна превышать 60−80 символов.

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

Ввиду отраслевой специфики не всегда можно понятно описать что-то текстом. Иногда проще визуализировать это и наглядно донести суть до пользователей.

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

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

Важный фактор удобства для сайтов с большим количеством страниц и несколькими уровнями вложенности — проработанное навигационное меню. Исследования показывают, что наиболее удачным решением в данном случае будет так называемое «мега-меню». Оно подразумевает отображение ссылок на разделы сразу нескольких уровней в одном блоке.

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

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

Современный поиск на сайте ищет быстро и мгновенно показывает результат.

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

Если у вас больше 10−15 продуктов в категории, то в первую очередь нужно задуматься о фильтрации. В качестве параметра фильтров должны быть основные характеристики, по которым пользователь может выбирать продукт, а также другие факторы — например, стоимость или наличие товара в интернет-магазине.

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

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

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

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

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

Полезно использовать интересные формулировки, которые рассказывают о потенциальной пользе решений для клиентов и мотивируют к покупке.

Лучшие практики дают отличный стимул для того, чтобы посмотреть на свой сайт под новым углом. Но как оценить его объективно? В этом поможет чек-лист, который составили наши эксперты.

•

Номер телефона компании — должен быть сделан ссылкой

•

<a href="tel:+1 234 567 890">.

•

Кликабельный логотип компании (ссылка на главную страницу).

•

Ссылки навигационного меню на виду (не рекомендуется использовать бургер-меню, если это не презентационный сайт).

•

Поле / иконка поиска (если такой функционал есть на сайте).

•

Основные контакты компании.

•

Ссылки на социальные сети (размещаются в виде узнаваемых иконок).

•

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

•

В основном навигационном меню ограниченное количество ссылок — рекомендуется размещать не более 5−7.

•

В навигационном меню — ссылки на все основные разделы сайта, желательно вплоть до 3-го уровня вложенности (особенно актуально для каталогов продукции).

•

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

•

На длинных страницах (например, продуктовых) должно быть дополнительное якорное меню со ссылками на блоки страницы.

•

На всех внутренних страницах — «хлебные крошки».

•

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

•

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

•

Поиск заметен и легко доступен с любой страницы сайта.

•

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

•

При вводе запроса в поле поиска автоматически предлагаются варианты результатов или по умолчанию отображаются популярные запросы.

•

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

•

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

•

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

•

Наглядно показаны преимущества компании.

•

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

•

Каталог продукции разбит на категории с понятными и популярными среди целевой аудитории названиями.

•

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

•

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

•

Возможность в один клик переключаться между основными категориями каталога.

•

В категории каталога — больше 15 продуктов (фильтрация по характеристикам, по которым выбирают продукты).

•

Фильтры работают таким образом, что никогда не будет пустых результатов фильтрации.

•

Продукция в каталоге представлена несколькими способами. Например, карточками и таблицей (актуально для b2b-клиентов).

•

У превью продукции в каталогах должны быть указаны основные характеристики или краткое описание.

•

На первом экране карточки продукта — основная информация о нем и кнопка действия.

•

В карточках продукта указана стоимость, описаны преимущества и технические характеристики.

•

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

•

Раздел с документацией и справочной информацией о продукции.

•

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

•

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

•

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

•

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

•

Результат конфигуратора / расчета можно скачать или отправить по почте.

•

Возможность отправить заявку на собранную конфигурацию / расчет.

•

На всех целевых страницах — конверсионные элементы: призывы к действию, формы, отзывы, сертификаты, чат-боты, блоки обратной связи.

•

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

•

Конверсионные элементы хорошо заметны и контрастируют с другими элементами на странице.

•

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

•

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

•

В формах обратной связи минимум полей для заполнения — только самые необходимые.

•

Есть контакты всех основных направлений / отделов / ключевых сотрудников (телефоны, факс, e-mail).

•

Динамическая карта проезда до офиса («Яндекс.Карты» или Google Maps).

•

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

•

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

•

Интерфейс чистый и лаконичный — отсутствуют нагромождения элементов в рамках одного экрана, между блоками и элементами есть «воздух».

•

Информация подается структурировано и группируется в смысловые блоки заметными заголовками.

•

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

•

Длина текстовой строки не более 60−80 символов.

•

На сайте используются качественные фотографии и видео.

•

Для текста используется комфортный для чтения размер шрифта (16px и больше).

•

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