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

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

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

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

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

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

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

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

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

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

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

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

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

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

UI-анимация

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

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

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

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

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

Навигация

Меню

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

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

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

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

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

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

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

Продукция

Каталоги

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

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

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

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

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

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

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

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

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

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

SWOT-анализ: определение, применение, примеры

34
11 августа 2020
Статьи ~ 35 минут на чтение

Как прокачать Digital Skills. Подборка ресурсов для самообразования

1477
05 июня 2020
Статьи ~ 20 минут на чтение

G Suite: 33 полезные функции для бизнеса

2034
24 апреля 2020
Статьи ~ 5 минут на чтение

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

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

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

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

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

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

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

4942
16 марта 2020
Статьи ~ 15 минут на чтение

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

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

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

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

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

3356
31 января 2020
новое
Мы сделали постер
«Набор инструментов для организации работы компании в online»
Получить бесплатно
Закрыть
Спасибо
за обращение
Мы ответим вам
в ближайшее время.
Получить постер