в Юзабилити и маркетинг

Баннеры действительно работают? или 4-ая ошибка в юзабилити интернет-магазинов

Уважаемые читатели!

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

Основной вопрос: Нужен ли баннер на Главной?  

Пример из жизни:

На рынке много-много торговых палаток, и рядом находятся 2 мясных магазина.

На одном написано: Мясо.

На втором же, написано, что в магазине всегда свежее мясо птицы, свинина и говядина.

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

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

Баннер должен содержать больше графической информации, чем текстовой, т.к. пользователи ее воспринимают  легче, пример, как делать не надо, можно посмотреть на сайте интернет-магазина Королева Спорта:

Сохраненное изображение 2015-2-3_14-22-18.761

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

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

Пример хорошего исполнения баннера, я бы сказал, как надо делать, можно посмотреть на сайте activizm.ru:

Сохраненное изображение 2015-2-3_14-24-52.556

Каких размеров должен быть баннер с точки зрения юзабилити?

Рекомендуется делать баннер шириной и высотой таким, чтобы его без проблем могли просмотреть в полном разрешении экрана своего устройства не менее 75%-80% ваших посетителей.

Помните, большой баннер оставляет важную для посетителей информацию за пределами первого экрана (первый экран-это та область сайта, которая просматривается без прокрутки страницы вниз и вправо):

Сохраненное изображение 2015-2-3_17-57-51.88

Какое дизайн решение использовать?

Цветовая гамма и используемые шрифты должны соответствовать тематике и общему стилю сайта.

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

Не используйте пестрящие красные тона, их излишек воспринимается как сплошная реклама и отсеивается, вступает в силу такой эффект как баннерная слепота:

Баннерная слепота — психологическая оптическая иллюзия, благодаря которой пользователь сайта не замечает рекламные блоки (баннеры) или объекты, похожие на них.(Википедия)

Сохраненное изображение 2015-2-3_17-11-29.524

Каким должен быть баннер статическим, flash баннер или сделанный с помощью яваскриптовых фреймворков?

Немного поясню, что это означает:

Статический баннер: просто картинка-никуда не двигается, ничего не делает.

Преимущество: простота, дешевизна и быстрая загрузка.

Недостатки: полностью исключается способность человеческого глаза улавливать движение, что снижает  степень вовлеченности пользователя 

Flash баннер — это баннер, организованный с помощью flash-технологии, т.е. анимация.

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

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

Баннер на основе яваскриптовых фреймворков (Javascript фреймворков) — это последовательность статических баннеров, связанных стандартными переходами с заданным временем перелистывания.

Это средний вариант по тем показателям, что я рассматривал ранее.

Какую информацию использовать на баннере?

Здесь вы должны разместить все то, что вы хотели бы показать вашему покупателю: хотите показать, чем вы лучше других, так разместите в баннере преимущества покупки именно у вас, как например это реализовано на сайте http://moscross.ru/:

Сохраненное изображение 2015-2-3_14-26-31.691

У вас есть товары «локомотивы» — расположите их в этом баннере. Практически во всех интернет-магазинах есть акции, расскажите в баннере о них.

Как не надо делать:

Сохраненное изображение 2015-2-3_14-25-20.728

Как надо делать:

Сохраненное изображение 2015-2-3_18-0-47.656

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

Как не надо делать можно посмотреть на сайте http://slalomshop.ru/:

Сохраненное изображение 2015-2-3_14-21-16.716

Несколько переключающихся баннеров рассказывают о различных товарах, но баннеры не кликабельны и ни предоставляют пользователю дальнейших действий, а искать товар, представленный на баннере, по каталогу будет не больше 2 покупателей из 100 (самые-самые горячие покупатели).

Внимание! Уделите должное внимание тестированию баннера. В идеале следует провести А/В тестирование баннера на сайте, оценивая эффективность с помощью статистики. Однако есть и более экономный вариант тестирования-покажите этот баннер своим друзьям или знакомым, поскольку ваш взгляд «замылен», и вы не можете в полной мере оценить, эффективен ли баннер.

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

Как должна выглядеть витрина с товаром?

Продолжение следует…

Высоких Вам конверсий и продаж!

 

Возникли проблемы с созданием витрины, пишите, подскажу.

Комментировать

Комментарии