SECL Group
Компания
45,67
рейтинг
25 ноября 2013 в 15:47

Дизайн → Продающий дизайн интернет-магазина. Часть 2. Элементы интерфейса tutorial

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

Логотипы крупнейших интернет-магазинов

Шапка сайта


Шапка (header) – очень важная составляющая, она находится в самом верху сайта. Здесь обычно располагаются такие элементы как логотип, поиск по сайту, контактные телефоны, обратный звонок, корзина, панель авторизации. Всеми этими элементами пользователь пользуется очень часто, намного чаще, чем всем остальным, поэтому они и находятся обычно здесь, в шапке, чтобы к ним всегда был доступ, с любой страницы сайта. Когда пользователь «созрел» и ему нужно перейти в корзину, или найти номер телефона, чтобы уточнить наличие, он всегда может проскролить вверх, или нажать клавишу Home – и моментально перейдет в верхнюю часть сайта, к шапке.

Рис. 10. Шапки сайтов, flipkart.com, aliexpress.com, infibeam.com

image

image

image

Логотип. Посмотрите логотипы мировых брендов, не важно каких, будь то производители одежды, электроники, автомобилей, бытовой техники или логотипы IT-компаний. Всех их объединяет одно: хороший логотип всегда уникален, лаконичен, прост и в то же время совершенен, легко запоминается и вызывает правильные ассоциации. Состоит логотип обычно из 2-3 цветов. Не стоит делать новый логотип согласно последних тенденций дизайна, через год-два они изменятся. Логотип должен быть «вне времени», как например, логотип Coca-Cola, который за 100 с лишним лет остался практически неизменным. Хороший логотип легко запомнится пользователю, и он подсознательно «свяжет» его с магазином, хорошим сервисом, удачными покупками.

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

Рис. 11. Логотипы известных интернет-магазинов

image

Поиск по сайту. Поиск – незаменимая и крайне важная функция, которой пользуются очень многие и очень часто. Важен он потому, что с помощью поиска пользователь может всегда с легкостью найти нужный ему товар, не пользуясь при этом навигацией. Поиск лидирует – посетители реже пользуются навигацией по сайту, предпочитая находить товары через поиск (Data Insight, 2013 г.). К примеру, один из крупнейших интернет-магазинов СНГ «Сотмаркет» в 2012 году провел редизайн сайта, внедрив новый алгоритм поиска. Это увеличило конверсию в два раза. Поиск всегда под рукой, т.к. находится в шапке сайта. Это самый кратчайший путь перехода на страницу товара. Если в вашем магазине этих товаров множество, можно также добавить возможность выбора категории для конкретизации поиска. Делайте поиск выделяющимся, видным, поле для ввода большим.

Рис. 12. Поиск на сайтах alibaba.com, homeshop18.com

image

image

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

Рис. 13. Номера телефонов на сайтах bigbrownbox.com.au, ballarddesigns.com

image

image

Номера телефонов. Крупные интернет-магазины обычно используют номера горячей линии 0 800. На такой номер вы сможете звонить со стационарного телефона бесплатно, с мобильного – по тарифу оператора (в указанное время, например, 8:00 – 21:00, или круглосуточно, всё это следует дописывать). Чаще всего интернет-магазины используют для контактов номер горячей линии и местные номера. Если вы предпочтете использовать номера мобильных операторов – скомпонуйте их, добавив выбор оператора выпадающим списком (ведь если таких номеров у вас будет 5 или 7 – все они займут много места).

Онлайн чат. Предоставьте пользователю общаться с вами с помощью онлайн-чата. Кого-то такой способ общения устроит больше, чем телефонный разговор. Многим нужна консультация по товарам, например. Разместите иконку или ссылку онлайн чата в шапке сайта или прикрепите его к окну браузера, чтобы он при прокрутке всегда был на экране. Важно держать эту кнопку на видном месте. Одному будет удобней позвонить, а другому – написать. Мы должны создать для пользователей комфорт на сайте. Сервис является неотъемлемой частью продаж.

Рис. 14. Онлайн чат в шапке и на странице товара, zappos.com, beauty.com

image

image

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

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

Рис. 15. Корзина на сайтах amazon.com, hushbabies.com, beauty.com

image

image

image

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

Главная страница


Каталог товаров. Обычно он расположен в левом сайдбаре (левой части сайта) или по центру выше середины экрана. В зависимости от масштабов магазина, отличаться будет и каталог товаров: его структура, размер и расположение. Например, крупный интернет-ритейлер Amazon имеет 2х-уровневый каталог товаров, во втором уровне также присутствует тематическая реклама. Если у вас небольшой магазин с 5-7 товарными группами – вы можете расположить каталог горизонтально, с выпадающим меню подкатегорий.

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

Рис. 16. Каталог товаров на сайтах amazon.com, ebay.com, yebhi.com

image

image

image

Центральная часть. По данным исследований, человек подсознательно запоминает левый верхний угол, область логотипа, которую мы описывали выше. Сразу после этого взгляд его переходит ниже, в середину экрана. Здесь нужно располагать информацию, которая сможет заинтересовать, вызвать интерес, заманить. А это – наиболее популярные товары, товары со скидкой, новые поступления, хиты продаж. Также используйте продающие тексты акций, например: «Товар дня: Блендер. 599 грн. Вместо 900, осталось 5 штук». Одним словом, всё то, что сможет зацепить пользователя, заинтересовать его и убедить остаться. Здесь же расположен и промо-блок.

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

Рис. 17. Промо-блок на сайтах amazon.com, beauty.com

image

image

Что сказать о дизайне промо-блока? Обычно он выполнен в виде слайдера, вертикального или горизонтального с возможностью интерактивного переключения слайдов. Делайте элементы переключения (стрелки, пагинацию) видными и понятными, чтобы пользователь сразу понимал, что это не простой баннер, а промо-блок (пусть даже он не будет знать это слово), где можно что-то для себя выбрать. Элементы дизайна в слайдах (визуальные образы, заголовки, фразы-зацепки), а также их расположение нужно делать по законам маркетинга. Используйте также методы стимулирования сбыта (например, цены «599,90», «старая цена-новая цена-экономия», и т.д.). Всё это должно зацепить нашего пользователя, заинтересовать и мотивировать его к покупке.

Подвал. В подвале (footer) могут быть расположены ссылки на информацию для покупателей: О магазине, Оплата и доставка, Контактная информация, Возврат денег, Безопасность покупок, FAQ (часто задаваемые вопросы) и т.д. Здесь может вкратце дублироваться меню категорий, например, меню только первой категории. Также в футере может располагаться форма подписки, иконки платежных систем, и др. Универсальности или какой-то единой схемы футера быть не может, элементы здесь всегда зависят от масштабов и специфики магазина. Если в футере будет много информации, делайте его просторным, большим. Текст должен быть контрастным, заголовки выделяться. Часто просмотр страницы заканчивается именно футером и пользователь может перейти в нужный раздел через него. Одним словом, футер – важная часть вашего сайта, поэтому и внимание ему нужно уделить должное.

Рис. 18. Подвалы интернет-магазинов beauty.com, zappos.com

image

image

Фильтры товаров


Товаров в вашем магазине будет огромное множество, а любой человек обычно руководствуется какими-то критериями выбора – ценовой диапазон, бренд, цвет, и т.д. Фильтр (фасетная навигация) должен быть подробный, содержать в себе возможность выбора основных имеющихся характеристик данной группы товара. Располагается обычно в левом сайдбаре страницы каталога, на первом экране. Делайте дизайн фильтра простым и понятным. Заголовки должны быть выделены, акцентированы, хорошо читабельны. Сгруппируйте и разграничьте пункты выбора, чтобы покупатель в них не терялся.

Рис. 19. Примеры фасетной навигации на сайтах bigbrownbox.com.au, amazon.com, yebhi.com

image

image

image

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

Анонсы от автора:

Курсы по электронной коммерции. Совсем скоро в нашей бизнес-школе «Digitov» стартуют практические курсы от авторов статьи: Проектирование серьезных сайтов, Маркетинг для интернет-магазина и Все о создании интернет-магазина. Спешите записаться на курс и получить скидку!

Книга по электронной коммерции. Мы заканчиваем писать книгу по созданию и продвижению интернет-магазинов. Желающие могут оставить заявку и получить первые экземпляры книги. Для этого нужно отправить на email: info@seclgroup.ru письмо-заявку с темой «Книга по электронной коммерции» и сразу после выхода книги мы отправим подробную информацию.

Новые статьи. Чтобы получать наши новые статьи раньше других или просто не пропустить новые публикации — подписывайтесь на фан страницы SECL Group: Facebook, VK, и Twitter или на фан страницы Digitov, где будут выкладываться обучающие материалы и мероприятия, в том числе бесплатные: Facebook, VK, и Twitter.

Оригинал статьи: http://seclgroup.ru/article_prodayushchiy_dizayn_internet-magazina_elementy_interfeysa_2.html

Авторы:

Сергей Яковенко, Senior Designer, компания «SECL GROUP» / «Internet Sales Technologies»
Никита Семенов (Facebook, VK, LinkedIn), CEO, компания «SECL GROUP» / «Internet Sales Technologies»
Автор: @SECL
SECL Group
рейтинг 45,67
Компания прекратила активность на сайте

Комментарии (10)

  • +3
    Материал хороший, но слишком обзорный. Нужны конкретные рекомендации, как создать продающий интернет-магазин.
    • +3
      Завтра опубликую 3ю часть про дизайн и начну публиковать статьи по проектированию. Там будет много конкретных рекомендаций, можно будет использовать как инструкцию. В дизайне много зависит от целей, тут сложно написать список конкретных рекомендаций, которые можно применять при любых раскладах.
      • 0
        А можете туда включить сравнение отечественных и зарубежных особенностей дизайнов?
        Возможно я старпёр, но мне нравился например старый юлмарт (новый попсеет что ли), ebay ничего, а вот остальные сыпят горами велосипедов, мигалок, фигурок и прочей пестроты; Алиэкспресс, так там вообще чёрт ногу сломит.
        Просто интересно понять, почему такие дизайны выигрывают в пользователях и прибыли.
        • 0
          3я часть уже готова, там этого нет. А вот в цикле про проектирование есть глава с сравнением интернет-магазинов США, Китая, России и Украины. Все крупнейшие проанализировал.
        • +1
          Согласен, старый дизайн Юлмарта был удобнее.
    • 0
      Не стоит быть такими наивными по нескольким причинам — в каждой отрасли свои «продающие» фишки, одной волшебной пилюли нет.
      Если бы всё было так просто то основные магазины были бы похожи как две капли воды.

      Даже если вы возьмёте и скопируете дизайн один в один с того же амазона вы не получите такого же результата.
      Нужно брать и делать, пробовать, искать СВОЙ вариант.
  • +1
    Есть мнение, что самый «продающий дизайн» — это дизайн ориентированный на удобство и простоту взаимодействия с пользователем. Привлекательный, контролируемый, не делающий из пользователя дурака — интерфейс.
  • 0
    Как среди Юлмарта и Амазона сюда затесался Сотмаркет?
  • 0
    Хотел посмотреть на «продающий» дизайн экзиста, а его тут нет…
    • 0
      Он был первым или одним из первых. Занять свободный рынок можно и без дизайна, а вот удержаться на нем — это уже второй вопрос.

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

Самое читаемое Дизайн