Баннеры действительно работают? или 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-х дней, мы узнаем:

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

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

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

 

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

Я хочу купить товар, помогите найти его? или 3 ошибка юзабилити интернет-магазинов

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

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

Сегодня хочу рассмотреть, как не упустить «горячих» покупателей, которые пришли к вам в интернет-магазин купить конкретный товар. Как показывает статистика, 60% таких посетителей пользуются поиском на сайте , поэтому поиску необходимо уделить должное внимание при создании интернет-магазина.

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

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

 

Вы заходите в магазин, где вам искать желаемый товар?

 

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

Итак, 3 ошибка в юзабилити интернет-магазинов — отсутствие или неудобный поиск.

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

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

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

Сравним две поисковые строки в интернет-магазинах:

1) http://www.kemping-market.ru/ — интернет-магазин туристического снаряжения

kemping-market

2) http://veryvery.ru/ — интернет-магазин любимых товаров

veryvery

В обоих случаях, поисковая строка легко находится, потому что оптимально выбрана высота строки, но в первом случае поисковая строка слишком маленькая по ширине. К примеру, если вы захотите ввести «Подводная камера Aqua-Vu Micro», то эта фраза в поисковую строку не поместится. Для проверки, все ли вы правильно  ввели, придется пролистывать фразу на начало строки, что очень неудобно, особенно с мобильных устройств. Во втором случае ширина поисковой строки оптимальная и составляет 30% от ширины страницы интернет-магазина.

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

Где расположить поисковую строку с точки зрения юзабилити?

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

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

Рассмотрим основные требования к функционалу поиска:

1) поиск должен быть построен с использованием автокомплита (автоподбора), то есть выпадающего окна с подсказками.

без автокомплита

kind

с автокомплитом

veryvery0

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

veryvery1

3) при вводе символов в строку поиска в выпадающем списке в названиях товаров должна выделяться вводимая фраза, для легкого поиска взглядом нужного товара в списке.

4) помимо названия товара в выпадающем списке рекомендуется отображать миникартинку и стоимость товара, как в интернет-магазине http://www.epool.ru/

www.epool.ru

Что позволит людям с визуальной памятью по картинкам найти нужный товар в списке.

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

eldorado

6) для удобства восприятия списка не рекомендуется выводить более 10 товаров, поскольку это именно то количество строк текста, которое человек может визуально воспринять за раз. К каждому выпадающему списку необходимо прикрепить ссылку «Все результаты», чтобы пользователи понимали, что это еще не все товары, и остальные можно просмотреть кликом по ссылке, которая ведет к результатам поиска

veryvery2

7) в случае, если ничего не найдено, не пугайте пользователя пустой страницей, напишите «по вашему запросу ничего не найдено» и предложите список рекомендуемых или похожих товаров.

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

Стоит ли показывать на главной баннеры и какие?

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

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

 

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

Как мне найти нужный товар? или 2 ошибка юзабилити интернет-магазинов

Многие пользователи, попадая на страницу интернет-магазина, задаются одним простым целевым вопросом:

Как мне найти нужный товар?

Самые распространенные решения:

  • Меню
  • Поиск

Как правило, владельцы интернет-магазинов, ни какому из этих пунктов не уделяют должного внимания.

2 ошибка в юзабилити интернет-магазинов — непродуманное меню.

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

Каким должно быть меню с точки зрения юзабилити — горизонтальным в шапке (header) или вертикальным в левой или правой колонках (sidebar)?

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

Скриншот с сайта  - guardino.ru

Скриншот с сайта — guardino.ru

Как правило, в интернет-магазинах пунктов меню больше 7-ми, поэтому следует использовать два меню.

Основное требование:

1) горизонтальное меню должно содержать основные пункты касаемые работы магазина, например: О компании, Доставка, Способы оплаты, Гарантия и возврат, Контакты

2) вертикальное меню должно содержать пункты каталога товаров, а также мотивирующие разделы: Распродажа, Новинки, Хиты продаж, С доставкой сегодня  и т.д.

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

Вы купили товар, он сломался или был с браком, куда вы пойдете его возвращать?

В тот отдел, где покупали или подойдете к администратору магазина и все узнаете?

Конечно можно пойти более сложным путем и начать с консультанта, который продавал этот товар, но проще подойти к стойке администратора и узнать, как можно вернуть товар.

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

Сколько уровней должно иметь меню каталога товаров с точки зрения юзабилити?

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

Что же делать, если в два уровня никак не получается?

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

Разберем на примере сайта http://www.aromatsale.ru/ , как с точки зрения юзабилити не стоит делать меню.

www.aromatsale.ru

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

Что делать, когда так и есть, список большой? Предлагаю не делать выпадающие списки, а оставить только пункты Женская и Мужская косметика.

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

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

С меню мы определились, теперь еще несколько советов по отображению меню на сайте:

Где я сейчас нахожусь?

Этим вопросом задаются все пользователи, кто попадает в интернет-магазин с торговых площадок, а это в среднем до 60% от общего потока. Чтобы помочь этим посетителям понять, где они есть, нужно обязательно выделять пункт и подпункт меню с данным товаром.

Где посмотреть товары по акции, распродаже или новинки?

Чтобы помочь пользователю в этом, сначала решите для себя, что вам выгоднее продавать.

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

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

menu

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

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

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

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

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

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

 

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

 

Куда мы попали? Что здесь продают? — юзабилити интернет-магазина

С главной страницы начинается знакомство пользователя с интернет-магазином.

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

Среднее время прибывания на главной странице не должно превышать 30-50 секунд. При этом не более, чем за 10 секунд  пользователь должен понять:

Куда он попал? И что здесь продают?

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

Вам нужно купить колеса на машину, в магазин с какой вывеской вы пойдете : Автотехсервис или Звезда (Шины и Диски)

Правильно, Вы пойдете сразу же во второй магазин, потому что на вывеске написано, что он продает Шины и Диски.

Чтобы было удобно пользователю нужно делать также в интернет-магазинах.

Попробуйте угадать, что продает интернет-магазин Ультра Звук (http://www.ultra-zvuk.ru/):

Юзабилити: как не надо делать

Шапка сайта интернет-магазина Ультра Звук

Из шапки абсолютно непонятно, что он продает. Наверное, что-то связанное с аудиотехникой, полазив по меню, понимаешь, что он продает электронику для авто.

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

1 правило юзабилити главной страницы интернет-магазинов:

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

Например:

Юзабилити: как надо делать

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

Какое меню выбрать для нашего сайта и какой структуры?

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

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

 

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

Юзабилити интернет-магазинов, продолжаю писать

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

Продолжаю рубрику посвященную основным ошибкам в юзабилити интернет-магазинов (сайтов).

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

Но вы ничего не потеряли, я написал книгу:  Юзабилити интернет-магазинов — как продавать больше конкурентов (Часть 1)

Скачать книгу на русском языке           Скачать книгу на английском языке

Следующая очень важная часть, которую я рассмотрю, это юзабилити (usability) главной страницы интернет-магазинов, основные ошибки и маркетинговые решения.

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

С уважением,
Дронов Алексей
Мой skype: anvictor2008
Высоких Вам конверсий и продаж!