Download to read offline
More Related Content
![Sonrisa ([1]..](https://cdn.slidesharecdn.com/ss_thumbnails/sonrisa1-090306192555-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Дизайн интернет магазина
Дизайн интернет магазина
- 1. Основные прототипы применяемыена различных масштабах Калимуллин К.Г. AdVantShop.NET
- 2. Удобныйинтернет-магазин. О чём говорим? Главнаястраница Каталог, Фильтры Акценты, визуалы Разные масштабы
- 4. Вечныйспор! Простота = легкостьдля восприятия Одна простая идея эффективнее Это обязательно должно быть на главной. Выжать по максимуму.
- 6. Тезис-аксиома Чем удобнее магазин,тем лучше
- 7. Какпонятьчтонетак? Статистика, Визор Опытные люди,изучаем тренды Ищем гармонию. 7+-2, ограниченная палитра. Простота лучше! Все сомнения в сторону нет. Экспертное мнение Тесты на потребителей Гармония
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. Советыпоглавной На главной должнобыть что-то самое главное! Простота лучше!(вспомните про логотип Microsoft и Adobe). Всё идёт к простоте. Всё гениальное – просто, но не всё простое – гениально. (с) Энштейн. Что самое главное? Как сделать еще проще? Ищем гормонию
- 16. Бедыкаталогов Попытка структурировать каталог изback-end. Категории в одном списке не однородны(машины, техника, для мужчин, зеленые). Нарушения гармонии каталога(30 категорий в одном, а в другом 2). Отсутствия контекста. А где это лежит? А у них это есть?
- 17. Фильтры,сравнения 1. Фильтры большие 2.Результат выдаёт нулевой результат. Что лучше?
- 18. Разнотипнаяструктуризация 1. Не использованиенескольких разный структуризаций, когда это необходимо (категории, бренд, назначение). 2. Не удобная категоризация/смешение А я хочу искать по другому. Как?
- 19. Поиск 1. Попытка решитьпоиском не умение классифицировать товар 2. Боязнь использовать расширенный поиск/поиск по ключевому полю. А я хочу искать просто. Как?
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 30. Подводныекамниакцентов,визуалов 1. Центральный визуальный баннер. 2.Баннеры на сайтах(низкая конверсия). 3. Выделить товар в списке категорий. 4. Предложить альтернативные предложения. Выделить главное Предложить альтернативу Сфокусировать внимание.
- 31.
- 32.
- 33.
- 34.
- 35.
- 38. Правильновыбирайтемасштаб магазина Масштаб (подходы кудобству) определяются масштабом магазина У каждого подхода свои решения Не бойтесь казаться маленьким магазином.Специализация лучше попыток догнать монстров. Удобство
- 39.
- 40. До10товаров Одна/две страницы дотовара. Примитивная категоризация (2 категории) Десять товаров 2 категории
- 41. До100товаров Две/три страницы дотовара. Одноуровневая категоризация. Категории и ведущие товары на главной. 100 товаров Одноуровневая категоризация
- 42. До1000товаров Две/Три страницы. Трехуровневая категоризация. Дополнительнаякорневая категоризация каталога (например, по типу и по бренду). Категории и ведущие товары на главной. Поиск. 1000 товаров Двухуровневая категоризация
- 43. До10000товаров Две/три страницы дотовара. Трёхуровневая категоризация Два корневых каталога (например, по типу, по бренду, назначению). Категории развернутые на главной. Поиск контекстный <10000 товаров Два корневых каталога Поиск
- 44. Свыше10000товаров Две/три страницы дотовара. Трёх-четырехуровневая категоризация Два-три корневых каталога (например, по типу, по бренду, назначению). Категории, развернутые на главной. Поиск контекстный. Поиск по ключевому полю(полям), например, номер запчасти, и/или дата. > 10000 товаров Два-три корневых каталога Поиск по ключевым полям
- 45. Создавайтеценность! Удобство – этоценность. Спасибо! Камиль Калимуллин @buxler kamil@itmcompany.ru
Editor's Notes
- #3 Рад всех приветствовать. Делая 1000-и интернет-магазинов для наших клиентов мы задумались о том, чтобы систематизировать опыт, касаемый подходов к дизайну интернет-магазинов. В докладе мы рассмотрим различные компоненты дизайна интернет-магазина. Еще раз, отмечу, что мы не будем рассматривать моменты, касаемые подходам к иллюстрации. Нас будут интересовать моменты удобства интернет-магазина, или то, как сделать его удобным для клиентов.
- #4 Итак, как известно, основной траффик интернет-магазинов приходится на главную первую страницу. Давайте посмотрим что происходит со главной страницей в интернет-магазинах.
- #5 Большая часть интернет-магазинов борется или скоро начнёт бороться с вечным, можно даже сказать философвским спором – Что важнее? Простота или функциональность? С одной стороны – простота помогает сделать идею и предложение интернет-магазина легким, более понятным, с другой стороны, хочется выжать из главной страницы по-максимуму, предложить клиенту то, что ему нужно сразу. Кто склоняется к минимализму, но в основном, все насыщают свои главные страницы множеством контента.
- #6 Вот пример одного из интернет-магазинов, который я нашел, набрав в интернете. Этот пример ни в коем случае не говорит, что текущий дизайн интернет-магазина плох или хорош. Данный пример показывает общую «среднюю по-больнице» тенденцию, когда главная страница становится достоянием всевозможных маркетинговых идей и задач. Как мы видим, тут есть и текст для SEO, тут и множество всяческих блоков, информирующие потенциального клиента о предложениях.
- #7 Предлагаю исходить из тезиса-аксиомы «Удобство в использовании интернет-магазина = ценности магазина», а следовательно, чем удобнее интернет-магазин для потенциального потребителя, тем конверсия у магазина выше(при прочих равных).
- #8 Как же понять, что на сайте что-то не удобно? Существует несколько разных подходов. Один из известных подходов – взять и проанализировать статистику. Например, показатель отказов по главной странице, или конверсию переходов, посмотреть тепловую схему, узнав куда нажимают люди, а куда нет. Существуют такие вещи, как Вебвизор, которые позволяют смотреть движение мышкой посетителя магазина. Анализ может навести нас на мысли об изменении интернет-магазина. Есть также способ попросить совета у знакомого или консультанта, чтобы он покритиковал, сказал, что так или не так на странице. Все эти способы не работают, если магазин только создаётся, но тратится на хорошую дизайн-студию не хочется. Нужно иметь некоторое представление о том, как правильно сделать интернет-магазин удобным. Мой ответ на вопрос – как сделать интернет-магазин удобным такой: «Ищем гармонию. Используем правило 7+-2.Ограничиваем палитку.» Кто знает что такое метод 7+-2? Это ровно столько, сколько объектов может человек воспринимать одномоментно. Именно этим методом можно оценить много блоков на сайте сейчас или нет. Опыт говорит о том, что именно стремление к простоте может стать ключом успеха. Если встаёт вопрос «Стоит ли данный блок ставить на главную или нет» мы рекомендуем ответ «Все сомнения в сторону - нет».
- #9 В докладе я буду опиратся на дизайн магазина, который мы разработали с учетом специфики обращения клиентов, трендов западных интернет-магазинов и нашего субъективного представления об удобстве. Нам представляется шаблон/прототип дизайна достаточно успешным, чтобы на его примере показать как именно может выглядить магазин. Использование шаблона не означается, что необходимо брать и копировать его. На основании шаблона мы хотим обратить Ваше внимание на компоненты магазина, которые возможно, были бы полезны и для применения Вами.
- #10 Итак, посмотрим на первый скрин сайта, полученный на ноутбуке. Обратите внимание, на сайт есть логотип, навигация, телефон, каталог, поиск и центральный слайдер, показывающий спец.предложения. ВСЁ!!! Больше ничего нет. Есть небольшая справочная полоска сверху, но она практически не меняет композиции. Заметьте, что всё перечисленное мной поместилось в 7 слов. Логотип, навигация, телефон, каталог, поиск, центральный слайдер. Именно такой подход нам нравится, и мы предлагаем посмотреть на него.
- #11 Что же находится ниже слайдера 3 блока со спец.предложениями. Хиты, Новинки, Скидки. Обратите внимание, как именно решается вопрос проявления активности по блоку (переход на все хиты продаж, все новинки и т.д.).
- #12 И еще чуть ниже 4 блока – информационных(новости, опрос, сервисы, соц.сети). Всё опять поместилось в 7 блоков. Обратите внимание, нет информации, которая бы требовала от нас некоторого усилия. Блоки явно выражены. Сценарии что с этим делать – понятны. Ссылка, кнопка.
- #13 Посмотрим, на еще один пример главной страницы интернет-магазина одежды. Авторизация, поиск, логотип, телефон, категории, центральный слайдер. Всё очень просто. Моё мнение – именно простота рождает успешность, тем, что людям не нужно напрягаться, чтобы запомнить что-то. Потребитель чётко отражает в своей голове центральное сообщение(мессадж), который Вы ему пытаетесь донести.
- #14 Еще один пример интернет-магазина автозапчастей, в котором находятся миллионы запчастей. Посмотрите, страница выглядит менее наглядной, чем предыдушие, но в общем-то мессадж и стилистика простоты донесена. Логотип, поиск, телефон, категории, фильтр, поиск по коду, рекламные банеры, текст. Сложнее, но приемлимо.
- #15 Итак, какие основные советы по главной странице. Главной страницей Вы должны донести главную мысль Вашего магазина. Самое выгодное предложение, ваш каталог в удобном виде или что-то еще. Всё идёт к простоте. Не бойтесь быть простым и люди к Вам потянутся. Всё гениальное просто, но не всё простое гениально, сказал Энштейн. Ищите компромисс между простотой и пользой.
- #16 Перейдем к следующему не менее важному элементу интернет-магазина – это каталог, и всевозможный инструментарий по работе с ним.
- #17 В чём беда современных каталогов? Некоторые интернет-магазины пытаются back-еnd каталоги(каталог, используемый для внутренних процессов компании) использовать как каталоги для клиентов. Клиенты хотят видить свой каталог, который удобен им со стороны выбора и поиска товаров. Учитывайте это при оформлении каталога. Иногда встречаются каталоги, в котором сущности каталога не однородны. Например, машины, техника, для мужчин, зеленые. В таких каталог легко запутатся. Бывает также такое, что заходишь в категорию, а там 30 подкатегорий. 7+-2 я не хочу видеть большего. Максимум 9 и я что-то выберу. Есть также интернет-магазины, которые любят направить человека на страницу, из которой не понятно где именно в каталоге он находится. Помните, что правильная структуризация каталога очень важна для потребителя, потому что он не знает о товаре столько, сколько знаете Вы. У нас есть клиент(интернет-магазин безопасности видео-наблюдения), так вот, после небольшого изменения в категориях они получили явный отклик от рынка падением объема продаж, после чего исправились и сделали даже лучше.
- #18 Надо понимать, что фильтр и сравнения товаров – неотъемлимая часть покупки товара в интернет-магазине. Только делая выбор клиент может убить свои сомнения в выборе и уже что-то выбрать и купить. Наиболее частой ошибкой в реализации фильтров является то, кто они очень большие, не дающие реальной пользы от выбора. Либо, что еще хуже, при выборе фильтра магазин выдаёт нулевой результат. Следовательно спрашивается – зачем фильтровали?
- #19 Есть очень хороший приём, который многие используют, это категоризовать товар по различным направлениям, например по товарной категории и бренду. Но многие, им почему-то не пользуются. Хотя есть очевидная категория клиентов, которая хочет искать именно по бренду, например, или по размеру или по чему-то еще. Некоторые интернет-магазины совершают ошибку в том, что смешивают товар, пытаясь категоризовать по разным направлениям, но в одном каталоге. Иногда это допустимо, но в целом есть и другие методы.
- #20 Поиск есть во многих интернет-магазинах, однако, надо признать, что на поиск пытаются переложить больше, чем возможно. Во-первых, многие движки поиска на сайте не совершенны. Во вторых, конечно же поиск выдаст позиции хуже, чем если человек задал точные категории, поэтому категоризуйте правильно, и ставьте поиск. Очень слабо магазины используют расширеный поиск, когда поиск осуществляется по определенным ключевым параметрам.
- #21 Мы считаем, что одной из ценность является возможность клиентом найти быстро необходимый товар, поэтому этой задачей надо серьезно заниматься и она принесёт свои плоды.
- #22 Давайте посмотрим на пример подачи категории. Слева – подкатегории. Справа(основная часть) – картинка категории. Удобно. Ничего лишнего.
- #23 Вот так может выглядить список товаров в категории, опять же всего две колонки, слева категории, справа товар с описанием.
- #24 Иногда, когда описания мало, фотографий нет, и необходимо выдать больше позиций на страницу выдают список товаров в таком виде. В виде списка.
- #25 Или в таком виде, когда картинка является рабочим инструментом и она важнее описания.
- #26 Посмотрим на реализацию фильтров и отображении каталога в интернет-магазине одежды. Каталог выводится в виде картинок товара, и чуть ниже описание товара.
- #27 Обратите внимание, пользователь может свернуть фильтры и фильтровать так как ему удобно на одной странице.
- #28 Обратите внимание на структуру каталога, отображения фильтров у данного интернет-магазина запчастей. Категории сверху. Слева узко-ориентированный фильтр, поиск по номеру запчасти, вывод списка товаров в категории осуществляется в полном виде.
- #29 Обратите внимание на отображение поиска, после выбора поиска есть возможность поискать еще, слева отображается поле для поиска.
- #31 Рассмотрим акценты, которые должны решать задачу - выделить главное, предложить альтернативу, сфокусировать снимание. С акцентами всегда перебор. В попытках сделать товар более продаваемым сайты, которые не заложили изначально функционал акцентов, делают сайт не с акцентами, а сайт-акцент. Давайте рассмотрим моменты-акценты и посмотрим на возможные реализации акцентов, визуалов.
- #32 Пример главного предложения на одном из интернет-магазинов одежды. Центральный визуал удобен и позволяет четко акцентировать внимание на каком-либо предложении. Его точно не пропустят(главная страница) и он не будет мешать, красивая плашка – это удобно.
- #33 На данном проекте вы можете посмотреть реализацию акцентов на товаре в виде небольших маркеров товара – это помогает пользователю сориентироватся в нужном товаре. Даже для текущего интернет-магазина Вы можете реализовать данную возможность.
- #34 Еще один пример акцентов, который редко встречается в текущих интернет-магазинах – бирки на товар.
- #35 Евросеть
- #36 Пример главного предложения на одном из интернет-магазинов одежды. Центральный визуал удобен и позволяет четко акцентировать внимание на каком-либо предложении. Его точно не пропустят(главная страница) и он не будет мешать, красивая плашка – это удобно.
- #38 Понятно, что подходы к формированию интернет-магазина очень зависят от масштаба. Если у Вас интернет-магазин, содержащий 100 позиций или интернет-магазин, содержащий миллион позиций – подходы к прототипам интернет-магазина отличаются.
- #39 Какие типовые ошибки масштаба? Тут всё просто – самые распространенные ошибки - это попытка использовать шаблоны интернет-магазина на большое количество товара для маленького и наоборот, шаблон для малого количества товара – загрузка туда большого количества товаров. Помните об этом, когда проектируете интернет-магазин, или задумались его переработать.
- #40 Один товар – одна страница. Очевидная вещь – обычное решение. Длинная страница, с описанием товара.
- #41 До 10 товаров – страница с примитивной категоризацией(максимум 2 категории), отображение – на одной главной странице. Максимально – товары на второй странице.
- #42 До 100 товаров – многие начинают с этого. Соответственно, помним про правило 7+-2 категорий первого уровня будет например 5 или 9 и внутри будет лежать товар. Правильно распределите товар по категориям, чтобы из 100 товаров в одной категории желательно, чтобы не было 90, так как в противном случае категории не равновесны.
- #43 Многие интернет-магазины – именно тут. Трех-уровневая категоризация(в две товар не укладывается). Помните, что есть возможность выводить категории и третьего уровня на главной, если это уместно. До 1000 товаров рекомендуется задуматься и о дополнительной корневой категоризации. Например, если у вас одежды, можно разместить не только категории (брюки, юбки, плащи), но и категоризацию по брендам. Уже до 1000 товаров Вы должны задуматься о поиске, хотя до 1000 при наличии правильной категоризации – это не критично.
- #44 До 10000 товаров входят 95% интернет-магазинов. Поиск – обязательно. Категоризация – обязательно. Фильтры – обязательно. Поставьте себя на месте пользователя.
- #45 Некоторые интернет-магазины дорастают до такого ассортимента и обычно ловят все проблемы масштаба – товар ищется хуже с ростом ассортимента. Понятно, что для таких интернет-магазинов работает и 4 уровневая категоризация(возможно), и понятно, что нужно товар категоризовывать и по другому ключу(например, для интернет-магазина подарков нужно вносить например, для мужчин/женщин) либо использовать несколько параметров категоризации. Понятно, что должен работать поиск, также возможно, будет уместно использовать поиск по ключевому полю, например по номеру запчасти или дате.
- #46 Помните, что удобство – это ценность. Создавайте ценность.