7. Какпонятьчтонетак?
Статистика, Визор
Опытные люди, изучаем
тренды
Ищем гармонию. 7+-2,
ограниченная палитра.
Простота лучше!
Все сомнения в сторону нет.
Экспертное
мнение
Тесты на
потребителей
Гармония
14. Советыпоглавной
На главной должно быть что-то
самое главное!
Простота лучше!(вспомните про
логотип Microsoft и Adobe). Всё
идёт к простоте.
Всё гениальное – просто, но не всё
простое – гениально. (с) Энштейн.
Что самое
главное?
Как сделать еще
проще?
Ищем гормонию
15.
16. Бедыкаталогов
Попытка структурировать каталог
из back-end.
Категории в одном списке не
однородны(машины, техника, для
мужчин, зеленые).
Нарушения гармонии каталога(30
категорий в одном, а в другом 2).
Отсутствия контекста.
А где это лежит?
А у них это есть?
18. Разнотипнаяструктуризация
1. Не использование нескольких
разный структуризаций, когда
это необходимо (категории,
бренд, назначение).
2. Не удобная
категоризация/смешение
А я хочу искать по
другому. Как?
19. Поиск
1. Попытка решить поиском не
умение классифицировать
товар
2. Боязнь использовать
расширенный поиск/поиск по
ключевому полю.
А я хочу искать
просто. Как?
38. Правильновыбирайтемасштаб
магазина
Масштаб (подходы к удобству)
определяются масштабом
магазина
У каждого подхода свои решения
Не бойтесь казаться маленьким
магазином.Специализация лучше
попыток догнать монстров.
Удобство
41. До100товаров
Две/три страницы до товара.
Одноуровневая категоризация.
Категории и ведущие товары на
главной.
100 товаров
Одноуровневая
категоризация
43. До10000товаров
Две/три страницы до товара.
Трёхуровневая категоризация
Два корневых каталога (например,
по типу, по бренду, назначению).
Категории развернутые на
главной.
Поиск контекстный
<10000 товаров
Два корневых
каталога
Поиск
44. Свыше10000товаров
Две/три страницы до товара.
Трёх-четырехуровневая
категоризация
Два-три корневых каталога
(например, по типу, по бренду,
назначению).
Категории, развернутые на
главной.
Поиск контекстный.
Поиск по ключевому полю(полям),
например, номер запчасти, и/или
дата.
> 10000 товаров
Два-три корневых
каталога
Поиск по
ключевым полям
Рад всех приветствовать. Делая 1000-и интернет-магазинов для наших клиентов мы задумались о том, чтобы систематизировать опыт, касаемый подходов к дизайну интернет-магазинов. В докладе мы рассмотрим различные компоненты дизайна интернет-магазина. Еще раз, отмечу, что мы не будем рассматривать моменты, касаемые подходам к иллюстрации. Нас будут интересовать моменты удобства интернет-магазина, или то, как сделать его удобным для клиентов.
Итак, как известно, основной траффик интернет-магазинов приходится на главную первую страницу. Давайте посмотрим что происходит со главной страницей в интернет-магазинах.
Большая часть интернет-магазинов борется или скоро начнёт бороться с вечным, можно даже сказать философвским спором – Что важнее? Простота или функциональность? С одной стороны – простота помогает сделать идею и предложение интернет-магазина легким, более понятным, с другой стороны, хочется выжать из главной страницы по-максимуму, предложить клиенту то, что ему нужно сразу.
Кто склоняется к минимализму, но в основном, все насыщают свои главные страницы множеством контента.
Вот пример одного из интернет-магазинов, который я нашел, набрав в интернете. Этот пример ни в коем случае не говорит, что текущий дизайн интернет-магазина плох или хорош. Данный пример показывает общую «среднюю по-больнице» тенденцию, когда главная страница становится достоянием всевозможных маркетинговых идей и задач. Как мы видим, тут есть и текст для SEO, тут и множество всяческих блоков, информирующие потенциального клиента о предложениях.
Предлагаю исходить из тезиса-аксиомы «Удобство в использовании интернет-магазина = ценности магазина», а следовательно, чем удобнее интернет-магазин для потенциального потребителя, тем конверсия у магазина выше(при прочих равных).
Как же понять, что на сайте что-то не удобно? Существует несколько разных подходов. Один из известных подходов – взять и проанализировать статистику. Например, показатель отказов по главной странице, или конверсию переходов, посмотреть тепловую схему, узнав куда нажимают люди, а куда нет. Существуют такие вещи, как Вебвизор, которые позволяют смотреть движение мышкой посетителя магазина. Анализ может навести нас на мысли об изменении интернет-магазина.
Есть также способ попросить совета у знакомого или консультанта, чтобы он покритиковал, сказал, что так или не так на странице.
Все эти способы не работают, если магазин только создаётся, но тратится на хорошую дизайн-студию не хочется.
Нужно иметь некоторое представление о том, как правильно сделать интернет-магазин удобным.
Мой ответ на вопрос – как сделать интернет-магазин удобным такой: «Ищем гармонию. Используем правило 7+-2.Ограничиваем палитку.»
Кто знает что такое метод 7+-2? Это ровно столько, сколько объектов может человек воспринимать одномоментно.
Именно этим методом можно оценить много блоков на сайте сейчас или нет.
Опыт говорит о том, что именно стремление к простоте может стать ключом успеха.
Если встаёт вопрос «Стоит ли данный блок ставить на главную или нет» мы рекомендуем ответ «Все сомнения в сторону - нет».
В докладе я буду опиратся на дизайн магазина, который мы разработали с учетом специфики обращения клиентов, трендов западных интернет-магазинов и нашего субъективного представления об удобстве. Нам представляется шаблон/прототип дизайна достаточно успешным, чтобы на его примере показать как именно может выглядить магазин. Использование шаблона не означается, что необходимо брать и копировать его. На основании шаблона мы хотим обратить Ваше внимание на компоненты магазина, которые возможно, были бы полезны и для применения Вами.
Итак, посмотрим на первый скрин сайта, полученный на ноутбуке. Обратите внимание, на сайт есть логотип, навигация, телефон, каталог, поиск и центральный слайдер, показывающий спец.предложения. ВСЁ!!! Больше ничего нет. Есть небольшая справочная полоска сверху, но она практически не меняет композиции. Заметьте, что всё перечисленное мной поместилось в 7 слов. Логотип, навигация, телефон, каталог, поиск, центральный слайдер. Именно такой подход нам нравится, и мы предлагаем посмотреть на него.
Что же находится ниже слайдера 3 блока со спец.предложениями. Хиты, Новинки, Скидки. Обратите внимание, как именно решается вопрос проявления активности по блоку (переход на все хиты продаж, все новинки и т.д.).
И еще чуть ниже 4 блока – информационных(новости, опрос, сервисы, соц.сети). Всё опять поместилось в 7 блоков.
Обратите внимание, нет информации, которая бы требовала от нас некоторого усилия. Блоки явно выражены. Сценарии что с этим делать – понятны. Ссылка, кнопка.
Посмотрим, на еще один пример главной страницы интернет-магазина одежды. Авторизация, поиск, логотип, телефон, категории, центральный слайдер.
Всё очень просто. Моё мнение – именно простота рождает успешность, тем, что людям не нужно напрягаться, чтобы запомнить что-то. Потребитель чётко отражает в своей голове центральное сообщение(мессадж), который Вы ему пытаетесь донести.
Еще один пример интернет-магазина автозапчастей, в котором находятся миллионы запчастей.
Посмотрите, страница выглядит менее наглядной, чем предыдушие, но в общем-то мессадж и стилистика простоты донесена.
Логотип, поиск, телефон, категории, фильтр, поиск по коду, рекламные банеры, текст. Сложнее, но приемлимо.
Итак, какие основные советы по главной странице.
Главной страницей Вы должны донести главную мысль Вашего магазина. Самое выгодное предложение, ваш каталог в удобном виде или что-то еще.
Всё идёт к простоте. Не бойтесь быть простым и люди к Вам потянутся.
Всё гениальное просто, но не всё простое гениально, сказал Энштейн. Ищите компромисс между простотой и пользой.
Перейдем к следующему не менее важному элементу интернет-магазина – это каталог, и всевозможный инструментарий по работе с ним.
В чём беда современных каталогов? Некоторые интернет-магазины пытаются back-еnd каталоги(каталог, используемый для внутренних процессов компании) использовать как каталоги для клиентов. Клиенты хотят видить свой каталог, который удобен им со стороны выбора и поиска товаров. Учитывайте это при оформлении каталога.
Иногда встречаются каталоги, в котором сущности каталога не однородны. Например, машины, техника, для мужчин, зеленые. В таких каталог легко запутатся. Бывает также такое, что заходишь в категорию, а там 30 подкатегорий. 7+-2 я не хочу видеть большего. Максимум 9 и я что-то выберу.
Есть также интернет-магазины, которые любят направить человека на страницу, из которой не понятно где именно в каталоге он находится.
Помните, что правильная структуризация каталога очень важна для потребителя, потому что он не знает о товаре столько, сколько знаете Вы.
У нас есть клиент(интернет-магазин безопасности видео-наблюдения), так вот, после небольшого изменения в категориях они получили явный отклик от рынка падением объема продаж, после чего исправились и сделали даже лучше.
Надо понимать, что фильтр и сравнения товаров – неотъемлимая часть покупки товара в интернет-магазине. Только делая выбор клиент может убить свои сомнения в выборе и уже что-то выбрать и купить.
Наиболее частой ошибкой в реализации фильтров является то, кто они очень большие, не дающие реальной пользы от выбора. Либо, что еще хуже, при выборе фильтра магазин выдаёт нулевой результат. Следовательно спрашивается – зачем фильтровали?
Есть очень хороший приём, который многие используют, это категоризовать товар по различным направлениям, например по товарной категории и бренду. Но многие, им почему-то не пользуются. Хотя есть очевидная категория клиентов, которая хочет искать именно по бренду, например, или по размеру или по чему-то еще.
Некоторые интернет-магазины совершают ошибку в том, что смешивают товар, пытаясь категоризовать по разным направлениям, но в одном каталоге. Иногда это допустимо, но в целом есть и другие методы.
Поиск есть во многих интернет-магазинах, однако, надо признать, что на поиск пытаются переложить больше, чем возможно. Во-первых, многие движки поиска на сайте не совершенны. Во вторых, конечно же поиск выдаст позиции хуже, чем если человек задал точные категории, поэтому категоризуйте правильно, и ставьте поиск.
Очень слабо магазины используют расширеный поиск, когда поиск осуществляется по определенным ключевым параметрам.
Мы считаем, что одной из ценность является возможность клиентом найти быстро необходимый товар, поэтому этой задачей надо серьезно заниматься и она принесёт свои плоды.
Давайте посмотрим на пример подачи категории. Слева – подкатегории. Справа(основная часть) – картинка категории. Удобно. Ничего лишнего.
Вот так может выглядить список товаров в категории, опять же всего две колонки, слева категории, справа товар с описанием.
Иногда, когда описания мало, фотографий нет, и необходимо выдать больше позиций на страницу выдают список товаров в таком виде. В виде списка.
Или в таком виде, когда картинка является рабочим инструментом и она важнее описания.
Посмотрим на реализацию фильтров и отображении каталога в интернет-магазине одежды. Каталог выводится в виде картинок товара, и чуть ниже описание товара.
Обратите внимание, пользователь может свернуть фильтры и фильтровать так как ему удобно на одной странице.
Обратите внимание на структуру каталога, отображения фильтров у данного интернет-магазина запчастей. Категории сверху. Слева узко-ориентированный фильтр, поиск по номеру запчасти, вывод списка товаров в категории осуществляется в полном виде.
Обратите внимание на отображение поиска, после выбора поиска есть возможность поискать еще, слева отображается поле для поиска.
Рассмотрим акценты, которые должны решать задачу - выделить главное, предложить альтернативу, сфокусировать снимание.
С акцентами всегда перебор.
В попытках сделать товар более продаваемым сайты, которые не заложили изначально функционал акцентов, делают сайт не с акцентами, а сайт-акцент.
Давайте рассмотрим моменты-акценты и посмотрим на возможные реализации акцентов, визуалов.
Пример главного предложения на одном из интернет-магазинов одежды.
Центральный визуал удобен и позволяет четко акцентировать внимание на каком-либо предложении. Его точно не пропустят(главная страница) и он не будет мешать, красивая плашка – это удобно.
На данном проекте вы можете посмотреть реализацию акцентов на товаре в виде небольших маркеров товара – это помогает пользователю сориентироватся в нужном товаре. Даже для текущего интернет-магазина Вы можете реализовать данную возможность.
Еще один пример акцентов, который редко встречается в текущих интернет-магазинах – бирки на товар.
Евросеть
Пример главного предложения на одном из интернет-магазинов одежды.
Центральный визуал удобен и позволяет четко акцентировать внимание на каком-либо предложении. Его точно не пропустят(главная страница) и он не будет мешать, красивая плашка – это удобно.
Понятно, что подходы к формированию интернет-магазина очень зависят от масштаба. Если у Вас интернет-магазин, содержащий 100 позиций или интернет-магазин, содержащий миллион позиций – подходы к прототипам интернет-магазина отличаются.
Какие типовые ошибки масштаба? Тут всё просто – самые распространенные ошибки - это попытка использовать шаблоны интернет-магазина на большое количество товара для маленького и наоборот, шаблон для малого количества товара – загрузка туда большого количества товаров.
Помните об этом, когда проектируете интернет-магазин, или задумались его переработать.
Один товар – одна страница. Очевидная вещь – обычное решение. Длинная страница, с описанием товара.
До 10 товаров – страница с примитивной категоризацией(максимум 2 категории), отображение – на одной главной странице. Максимально – товары на второй странице.
До 100 товаров – многие начинают с этого. Соответственно, помним про правило 7+-2 категорий первого уровня будет например 5 или 9 и внутри будет лежать товар. Правильно распределите товар по категориям, чтобы из 100 товаров в одной категории желательно, чтобы не было 90, так как в противном случае категории не равновесны.
Многие интернет-магазины – именно тут. Трех-уровневая категоризация(в две товар не укладывается). Помните, что есть возможность выводить категории и третьего уровня на главной, если это уместно. До 1000 товаров рекомендуется задуматься и о дополнительной корневой категоризации. Например, если у вас одежды, можно разместить не только категории (брюки, юбки, плащи), но и категоризацию по брендам.
Уже до 1000 товаров Вы должны задуматься о поиске, хотя до 1000 при наличии правильной категоризации – это не критично.
До 10000 товаров входят 95% интернет-магазинов. Поиск – обязательно. Категоризация – обязательно. Фильтры – обязательно. Поставьте себя на месте пользователя.
Некоторые интернет-магазины дорастают до такого ассортимента и обычно ловят все проблемы масштаба – товар ищется хуже с ростом ассортимента. Понятно, что для таких интернет-магазинов работает и 4 уровневая категоризация(возможно), и понятно, что нужно товар категоризовывать и по другому ключу(например, для интернет-магазина подарков нужно вносить например, для мужчин/женщин) либо использовать несколько параметров категоризации. Понятно, что должен работать поиск, также возможно, будет уместно использовать поиск по ключевому полю, например по номеру запчасти или дате.
Помните, что удобство – это ценность. Создавайте ценность.
