Вы здесь

Электросайт года: член жюри раскрывает секреты.

Опубликовано чт, 01/16/2020 - 15:25 пользователем Игнатов Сергей

В декабре 2019 года мы подвели итоги  конкурса «Электросайт года - 2019».

Одним из членов жюри был генеральный директор digital-агентства Uplab Павел Тарелкин. По итогам работы  в конкурсе,  эксперты компании подготовили рекомендации для сайтов электротехнической отрасли.

Очень часто сайт — это первая точка контакта потребителя с вашей компанией, и от того, насколько сайт будет дружелюбным к ним, может зависеть их отношение к вам. Из статьи вы узнаете о лучших практиках, которые позволят сделать сайт более современным, удобным, интересным и полезным для пользователей. Для наглядности и удобства в нем много примеров и ссылок. Ориентироваться в них поможет Содержание. А в конце вас ждет небольшой бонус.

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

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

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

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

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

UI-анимация                                                                                                                                    6

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

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

Навигация                                                                                                                                     10

Меню                                                                                                                                               10

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

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

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

Продукция                                                                                                                                     13

Каталоги                                                                                                                                          13

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

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

Бонус                                                                                                                                               19

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

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

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

1_03e55220

Заголовок, краткий текст, поиск и карточки продуктов — ничего лишнего. hoyermotors.com

 

2_fa375101

Много воздуха между элементами, благодаря чему страница выглядит эстетично, а информация легко и быстро считывается. uzenergy.com

3_1679fbef

Эта страница менее презентационная и более функциональная, но в то же время сделана в минималистичном стиле. zumtobel.us

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

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

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

4_40d4f628

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

5_e401ac52

Комфортная длина строки, текст разбит на небольшие абзацы, разбавляется изображениями и списками. www.aqs.se

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

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

 

6_a22078b3

Прием с фотографией. uzenergy.com

7_e35c598f

Прием с видео. www.betterenergy.com

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

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

8_b3dac05c

При переключении экранов с описанием продукта запускаются короткие видео, которые показывают продукт со всех сторон и объясняют принцип работы. www.fohse.com

9_9e8a9ea3

Принцип работы оборудования описывается краткими текстовыми блоками и дополняется схемой. www.serel.com

10

Карта с отмеченными точками дополняет тезис про стремление расширения бизнеса по всему миру. hoyermotors.com

UI-анимация

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

11_5f135c05

Анимация элементов для управления вниманием, бесшовные плавные переходы между страницами. www.tubelectric.com.ar

12

Анимированное появление элементов при прокрутке, анимация наведения курсора на элементы и переходов между страницами. ukrcable.com.ua

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

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

13

По наведению курсора на выделенные точки появляются описания особенностей продукта. www.aqs.se

14

Интерактивный конфигуратор светильника. exzite.auralight.com

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

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

15

Начало презентации батареи DURACELL. www.duracellenergybank.com

16

Экран, посвященный дизайну устройства. www.mi.com

17

Экран с технической спецификацией солнечной батареи. www.tesla.com

Навигация

Меню

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

18

Мега-меню каталога. Кроме ссылок на категории продукции, в правой части выделены быстрые ссылки на ключевые продукты. www.qualcomm.com

19

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

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

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

20

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

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

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

21

Одно из самых распространенных решений в каталогах — размещение в конце описания продукта блока со ссылками на другие продукты. www.tubelectric.com.ar
 
22
 
В интернет-магазинах можно дополнительно размещать ссылки на справочную информацию. В данном примере это описание способов доставки, бонусная программа, финансовые программы. www.samsung.com

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

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

23

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

Продукция

Каталоги

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

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

24

Фильтрация списка выключателей по количеству кнопок, цвету, стоимости и наличию. www.busterandpunch.com
 
25
 
Вкладки для переключения видов компрессоров и различные фильтры, связанные со спецификой оборудования.

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

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

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

27

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

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

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

29

Калькулятор расчета окупаемости энергосберегающей лампочки.
 
30
 
Интерактивный конфигуратор светильника. exzite.auralight.com

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

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

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

31Яркие кнопки «Купить сейчас» в шапке сайта и на первом экране страницы продукта. www.koleda.co
 
32
 
Синяя кнопка «Найти дистрибьютора» размещается на первом экране продуктовой страницы и хорошо заметна. При прокрутке страницы кнопка всегда отображается в верхней части экрана. gastmfg.com
 
33
 
Каталог оформлен в бело-серых цветах, а основные элементы для совершения действий (добавить в корзину, добавить избранное, где купить, сравнить) выделены синим и сразу бросаются в глаза. www.samsung.com

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

34

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

Бонус

В этом материале описаны лишь общие практики, которые помогут улучшить сайт. Мы планируем расширить наш обзор и дополнить его подробным чек-листом, по которому можно будет сделать аудит вашего сайта, заметить возможные ошибки и исправить их.

Заполните короткую форму «Хочу чек-лист для аудита сайта», и мы пришлем вам материал и чек-лист в феврале 2020 года.

Рубрика: 
Интернет-маркетинг