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

Недавно мы опубликовали чек-лист для проведения аудита сайта электротехнической компании. Разработали его в большей степени для участников международного конкурса «Электросайт года — 2019», победителей которого вместе с другими членами жюри выбирал генеральный директор нашего агентства Павел Тарелкин. Однако материал будет полезен не только владельцам сайтов электротехнической отрасли — он помогает проверить сайт на соответствие современным требованиям digital-индустрии, выявить возможные ошибки и исправить их.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В превью карточки продукта по умолчанию отображается фото, название, способ крепления и размер. При наведении курсора на карточку появляются дополнительные сведения: световой поток, цветовая температура, мощность. Также сразу можно скачать спецификацию. zumtobel.us

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

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

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

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

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

Кнопка для перехода к покупке сопровождается сильным заголовком «Присоединитесь к будущему». www.koleda.co

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

#разработка сайтов, #проектирование