В декабре 2019 года мы подвели итоги конкурса «Электросайт года - 2019».
Одним из членов жюри был генеральный директор digital-агентства Uplab Павел Тарелкин. По итогам работы в конкурсе, эксперты компании подготовили рекомендации для сайтов электротехнической отрасли.
Очень часто сайт — это первая точка контакта потребителя с вашей компанией, и от того, насколько сайт будет дружелюбным к ним, может зависеть их отношение к вам. Из статьи вы узнаете о лучших практиках, которые позволят сделать сайт более современным, удобным, интересным и полезным для пользователей. Для наглядности и удобства в нем много примеров и ссылок. Ориентироваться в них поможет Содержание. А в конце вас ждет небольшой бонус.
Дизайн и организация информации 2
Лаконичность и простота 2
Комфортное чтение 3
Крупные качественные фотографии и видео 4
Визуализация информации 5
UI-анимация 6
Интерактивные элементы 7
Страница продукта как презентация 8
Навигация 10
Меню 10
Якорные ссылки 11
Внутренние ссылки 12
Удобный поиск 13
Продукция 13
Каталоги 13
Конфигураторы и калькуляторы 16
Целевые действия 17
Бонус 19
Дизайн и организация информации
Лаконичность и простота
Лучший интерфейс — его отсутствие. На современных сайтах информация представлена с использованием небольшого количества элементов, в тренде минимализм. Текст — тоже элемент интерфейса, поэтому его максимально сокращают, оставляя самую суть и убирая «воду».
Заголовок, краткий текст, поиск и карточки продуктов — ничего лишнего. hoyermotors.com
Много воздуха между элементами, благодаря чему страница выглядит эстетично, а информация легко и быстро считывается. uzenergy.com
Эта страница менее презентационная и более функциональная, но в то же время сделана в минималистичном стиле. zumtobel.us
Комфортное чтение
Пользователи не читают большие объемы текстов на сайте — это тяжело и скучно. К тому же, сплошные блоки текста сложно просканировать взглядом в поисках нужных деталей. Для решения этих проблем нужно позаботиться о верстке текстовой информации и разбавлять однородный текст другими элементами: списками, иконками, визуальным контентом.
Также не стоит забывать о важном правиле оформления текстовых блоков — для комфортного чтения длина строки не должна превышать 60-80 символов.
Текст аккуратно разбит на абзацы, ключевая мысль и важные цифры выделены крупным шрифтом. bluewavesolar.com
Комфортная длина строки, текст разбит на небольшие абзацы, разбавляется изображениями и списками. www.aqs.se
Крупные качественные фотографии и видео
Очень распространенный прием — размещение крупных фотографий или видео на весь экран с коротким тезисом. Обычно применяется на первых экранах главных страниц сайтов, чтобы донести имиджевое сообщение. Но применение качественных визуальных материалов не ограничивается только первыми экранами и главными страницами — они уместны везде.
Прием с фотографией. uzenergy.com
Визуализация информации
Ввиду отраслевой специфики не всегда можно понятно описать что-то текстом. Иногда проще визуализировать это и наглядно донести суть до пользователей.
При переключении экранов с описанием продукта запускаются короткие видео, которые показывают продукт со всех сторон и объясняют принцип работы. www.fohse.com
Принцип работы оборудования описывается краткими текстовыми блоками и дополняется схемой. www.serel.com
Карта с отмеченными точками дополняет тезис про стремление расширения бизнеса по всему миру. hoyermotors.com
UI-анимация
Анимация интерфейса сегодня не просто украшение сайта, теперь она должна решать практические задачи: управлять вниманием пользователя, показывать связи между элементами, вызывать конкретные эмоции.
Анимация элементов для управления вниманием, бесшовные плавные переходы между страницами. www.tubelectric.com.ar
Анимированное появление элементов при прокрутке, анимация наведения курсора на элементы и переходов между страницами. ukrcable.com.ua
Интерактивные элементы
Благодаря анимации сайты становятся все более «живыми», но это не единственное решение. Различные интерактивные элементы, взаимодействующие с пользователем, помогают сделать сайт более интересным и вовлечь в изучение контента.
По наведению курсора на выделенные точки появляются описания особенностей продукта. www.aqs.se
Интерактивный конфигуратор светильника. exzite.auralight.com
Страница продукта как презентация
Современные продуктовые страницы все больше похожи на хорошие презентации, где один слайд (экран) посвящен отдельному смысловому блоку информации. Данный тренд был задан сайтом Apple.
Начало презентации батареи DURACELL. www.duracellenergybank.com
Экран, посвященный дизайну устройства. www.mi.com
Экран с технической спецификацией солнечной батареи. www.tesla.com
Навигация
Меню
Важный фактор удобства для сайтов с большим количеством страниц и несколькими уровнями вложенности – проработанное навигационное меню. Исследования говорят, что наиболее удачным решением в данном случае будет так называемое «мега-меню». Оно подразумевает отображение ссылок на разделы сразу нескольких уровней в одном блоке.
Мега-меню каталога. Кроме ссылок на категории продукции, в правой части выделены быстрые ссылки на ключевые продукты. www.qualcomm.com
Еще один пример мега-меню. Здесь, кроме ссылок на разделы двух уровней, отображается форма поиска продукта. gastmfg.com
Якорные ссылки
Для навигации по длинным страницам рекомендуется добавить меню с якорными ссылками. Это ссылки, после клика на которые, страница прокрутится до определенного блока.
Внутренние ссылки
Одного главного меню не всегда достаточно, чтобы сделать навигацию удобной и правильно вести пользователя по сайту. В процессе проектирования нужно тщательно продумать пользовательский путь и размещать на страницах ссылки таким образом, чтобы пользователь никогда не оказывался в тупике.
Удобный поиск
Современный поиск на сайте ищет быстро и мгновенно показывает результат.
Продукция
Каталоги
Каталог продукции — самый главный раздел, если ваш сайт должен демонстрировать или продавать какие-то товары. Поэтому при проектировании сайта в первую очередь нужно уделить внимание тому, как пользователи будут работать с каталогом.
Если у вас больше 10-15 продуктов в категории, то в первую очередь нужно задуматься о фильтрации. В качестве параметра фильтров должны быть основные характеристики, по которым пользователь может выбирать продукт, а также другие факторы — например, стоимость или наличие товара в интернет-магазине.
В каталоге у пользователя должна быть возможность получить минимальную необходимую информацию о продукте до того, как он перешел на страницу. Она должна быть представлена в превью карточки продукта.
Зачастую в сфере электротехники бывает так, что у одного продукта есть множество разновидностей, которые отличаются только техническими параметрами. В таком случае, список можно представить таблицей.
Конфигураторы и калькуляторы
Различные интерактивные конфигураторы и калькуляторы продукции на сайтах помогают решать бизнес-задачи. Но также они доставляют больше ценности пользователям. Это может прямо повлиять на их решение о покупке.
Целевые действия
Если сайт решает коммерческие задачи, то он обязательно должен содержать конверсионные элементы. Пользователь должен иметь возможность быстро связаться с вами в любой момент времени, когда у него может возникнуть потребность.
Элементы для совершения целевых действий должны быть хорошо заметны и контрастировать с другими блоками на страницах.
Яркие кнопки «Купить сейчас» в шапке сайта и на первом экране страницы продукта. www.koleda.co
Полезно использовать интересные формулировки, которые рассказывают о потенциальной пользе решений для клиентов и мотивируют к покупке.
Кнопка для перехода к покупке сопровождается сильным заголовком «Присоединитесь к будущему». www.koleda.co
Бонус
В этом материале описаны лишь общие практики, которые помогут улучшить сайт. Мы планируем расширить наш обзор и дополнить его подробным чек-листом, по которому можно будет сделать аудит вашего сайта, заметить возможные ошибки и исправить их.
Заполните короткую форму «Хочу чек-лист для аудита сайта», и мы пришлем вам материал и чек-лист в феврале 2020 года.
