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

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

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

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

Дизайн и организация информации

Лаконичность и простота

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

Комфортное чтение

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

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

Крупные качественные фотографии и видео

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

Визуализация информации

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

UI-анимация

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

Интерактивные элементы

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

Страница продукта как презентация

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

Навигация

Меню

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

Якорные ссылки

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

Внутренние ссылки

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

Удобный поиск

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

Продукция

Каталоги

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

Если у вас больше 10−15 продуктов в категории, то в первую очередь нужно задуматься о фильтрации. В качестве параметра фильтров должны быть основные характеристики, по которым пользователь может выбирать продукт, а также другие факторы — например, стоимость или наличие товара в интернет-магазине.
В каталоге у пользователя должна быть возможность получить минимальную необходимую информацию о продукте до того, как он перешел на страницу. Она должна быть представлена в превью карточки продукта.
Ховер эффекты на карточке продукта
В превью карточки продукта по умолчанию отображается фото, название, способ крепления и размер. При наведении курсора на карточку появляются дополнительные сведения: световой поток, цветовая температура, мощность. Также сразу можно скачать спецификацию. zumtobel.us
Зачастую в сфере электротехники бывает так, что у одного продукта есть множество разновидностей, которые отличаются только техническими параметрами. В таком случае, список можно представить таблицей.

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

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

Целевые действия

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

Элементы для совершения целевых действий должны быть хорошо заметны и контрастировать с другими блоками на страницах.
Полезно использовать интересные формулировки, которые рассказывают о потенциальной пользе решений для клиентов и мотивируют к покупке.
Кнопка с призывом к действию
Кнопка для перехода к покупке сопровождается сильным заголовком «Присоединитесь к будущему». www.koleda.co
Мы рассказали о ключевых трендах разработки электротехнической отрасли. Используйте полученную информацию — улучшайте свой сайт по всем критериям современной веб-разработки!
Читайте по теме
1539
Оцените статью
(3.9)

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

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

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

5 мифов о разработке сайтов на конструкторе Tilda. Кейсы Uplab

90
15 апреля 2021
Статьи ~ 15 минут на чтение

Дроп-домены: что это такое, когда они нужны и как найти хороший дроп

344
17 марта 2021
Статьи ~ 10 минут на чтение

Пять трендов веб-дизайна на 2021 год на примере промышленных гигантов

446
15 марта 2021
Статьи ~ 10 минут на чтение

Почему брендинг важен для каждой компании?

3054
30 декабря 2020
Статьи ~ 5 минут на чтение

Команда Uplab: как мы создаем дизайн сайта

2934
26 декабря 2020
Статьи ~ 20 минут на чтение

Data Driven: как принимать решения на основе данных

47407
25 декабря 2020
Статьи ~ 10 минут на чтение

Поиск фрилансеров: когда это нужно, и как это сделать?

2723
24 декабря 2020
Статьи ~ 10 минут на чтение

Как создать эффективную презентацию?

2567
23 декабря 2020
Статьи ~ 10 минут на чтение

Лицензионные фото для сайта: правила поиска

2792
21 декабря 2020
Статьи ~ 25 минут на чтение

Юнит-экономика: как оценить успешность бизнеса

80991
18 декабря 2020