Пора в отпуск
6000 миль
за оформление карты
Подробнее
(function(w, d, promoUrl, loc) { var modal, box, closeModalBtn, isModalAnimation, body, html, scrollBarWidth, promoButton; var teaser = d.querySelector('.tinkoff-all-airlines'); if (!teaser) return false; initModal(); preloadImages(['https://leonardo.osnova.io/2755fcfd-f5aa-3496-f0b8-2066ac91e9fa/', 'https://leonardo.osnova.io/0006b8c0-6e01-4b3f-6765-45d1606a2c48/', 'https://leonardo.osnova.io/da12942b-f4f3-2560-40b3-a1c930f4b330/']).then(function() { setTimeout(function() { analyticsEvents(); teaser.classList.add('is-init'); teaser.addEventListener('click', openModal); onDestroy(); }, 100); }); function onDestroy() { var moduleAjaxify = window.Air && window.Air.get('module.ajaxify'); if (moduleAjaxify && moduleAjaxify.on) { moduleAjaxify.on('Before page changed', function() { window.removeEventListener('scroll', scrollHandler); hideModal(); if (teaser) { teaser.removeEventListener('click', openModal); } if (box) { box.removeEventListener('click', stopPropagation); } if (closeModalBtn) { closeModalBtn.removeEventListener('click', closeModalStop); } if (promoButton) { promoButton.removeEventListener('click', clickPromo); } if (modal) { modal.removeEventListener('click', closeModal); modal.remove(); } }); } }; function initModal() { body = d.querySelector('body'); html = d.documentElement; modal = d.querySelector('.tinkoff-all-airlines-promo'); box = d.querySelector('[data-tinkoff-all-airlines-box]'); closeModalBtn = d.querySelector('[data-tinkoff-all-airlines-close]'); isModalAnimation = false; scrollBarWidth = getScrollbarWidth(); box.addEventListener('click', stopPropagation); modal.addEventListener('click', closeModal); closeModalBtn.addEventListener('click', closeModalStop); promoButton = d.querySelector('.tinkoff-all-airlines-promo__button'); if (promoButton) { promoButton.setAttribute('href', promoUrl); promoButton.addEventListener('click', clickPromo); } body.appendChild(modal); }; function clickPromo() { sendEvent('Promo button'); }; function stopPropagation(e) { e.stopPropagation(); }; function closeModalStop(e) { e.preventDefault(); e.stopPropagation(); closeModal(); }; function openModal() { if (isModalAnimation) return false; isModalAnimation = true; sendEvent('Popup', 'Open'); body.style.overflow = 'hidden'; html.style.marginRight = scrollBarWidth + 'px'; modal.classList.remove('is-hidden'); setTimeout(function() { modal.classList.add('is-show'); setTimeout(function() { isModalAnimation = false; }, 300); }, 0); }; function closeModal() { if (isModalAnimation) return false; isModalAnimation = true; hideModal(); sendEvent('Popup', 'Close'); }; function hideModal() { modal.classList.remove('is-show'); setTimeout(function() { modal.classList.add('is-hidden'); body.style.overflow = 'auto'; html.style.marginRight = '0px'; isModalAnimation = false; }, 300); }; function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; function preloadImages(urls) { return Promise.all(urls.map(function(url) { return new Promise(function(resolve) { var image = new Image(); image.onload = resolve; image.src = url; }); })); }; function sendEvent(label, state) { state = state ? state : 'Click'; var value = 'Tinkoff All Airlines 650 (' + loc + ') — ' + label + ' — ' + state; console.log(value); if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function getScrollbarWidth() { var outer = d.createElement('div'); outer.style.visibility = 'hidden'; outer.style.overflow = 'scroll'; outer.style.msOverflowStyle = 'scrollbar'; d.body.appendChild(outer); var inner = d.createElement('div'); outer.appendChild(inner); var scrollbarWidth = (outer.offsetWidth - inner.offsetWidth); outer.parentNode.removeChild(outer); return scrollbarWidth; }; function analyticsEvents() { sendEvent('Teaser', 'init'); window.addEventListener('scroll', scrollHandler); scrollHandler(); }; function scrollHandler() { if (isScrolledIntoView(teaser)) { sendEvent('Teaser', 'Show'); window.removeEventListener('scroll', scrollHandler); } }; function isScrolledIntoView(el) { var rect = el.getBoundingClientRect(); var elemTop = rect.top; var elemBottom = rect.bottom; var isVisible = (elemTop >= 0) && (elemBottom <= w.innerHeight); return isVisible; }; }(window, document, 'https://www.tinkoff.ru/cards/credit-cards/all-airlines/promo/form/black-friday/?utm_source=vc0920_cc&utm_medium=ntv.fix&utm_campaign=allairlines.vcbf', 'entry-head'));
Дизайн
Mojo
6878

Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть пятая

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

В закладки
Слушать

В предыдущих сериях

  • В первой статье мы обсудили психологию восприятия специально для адептов мнения «дизайн не помогает продавать». В конце я даю простые и универсальные советы для ecommerce-проектов.
  • Во второй статье начали долгий путь с обратной связи и навигации в интернет-магазине. Ошибешься в навигации — будет плохо всю дорогу.

В других местах ошибаться тоже не стоит. Для этого прочитайте третью и четвертую части.

  • В третьей статье разобрали главные элементы каталога: фильтрацию и карточки. Я рассказал, почему IKEA использует горизонтальный фильтр-бар и как исправить главные ошибки выпадающих списков.
  • В четвертой статье продолжили говорить про каталог и обсудили грех быстрого просмотра у WildBerries и Lamoda. Главной темой была страница продукта.
  • Главный гость пятого выпуска — корзина.

Корзина

Клиент нашел товар, отфильтровал и нажал на заветную кнопку «Добавить в корзину». Рано расслабляться — добавление в корзину не означает покупку.

Институт Бэймарда говорит, что почти 70% заказов так и остаются в корзине.

70% заказов
остаются в корзине навсегда

Давайте обсудим причины, связанные с дизайном. Начнем с очевидного.

Мини-корзина

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

Пример мини-корзины  Один из наших проектов

В мини-корзине нет ничего плохого. Она обеспечивает быстрый доступ, легко грузится и не путает пользователя в отличие от «быстрого просмотра».

Главная проблема мини-корзины — ограничения в размере. Они заставляют ограничивать и контент. Мини-корзиной нельзя заменить полноценную страницу.

Корзина — пользовательский «рубикон». Клиент последний раз проверяет список покупок, изучает финальную стоимость, проверяет обещанные скидки и бонусы.

Если вы где-то обманете его, то прощения ждать не стоит.

50% онлайн-корзин
брошены из-за дополнительных расходов. Например, доставки.

Посмотрим на инфографику исследования Baymard о причинах бросить корзину, помимо «Я просто посмотреть».

Почему пользователи бросают свои электронные корзины Исследование Baymard Institute

Все причины рассмотрим позже, когда перейдем к оформлению заказа.

Объявление на vc.ru
Маркетинг
Взрывной кейс «тех самых духов» от biblioteka aromatov + SRSLY
Разбор кейса про трехкратный рост SRSLY и бум продаж ароматов-воспоминаний, реализованного за одну неделю.

Карточка в корзине

Никакой сложно арифметики. Показывайте характеристики, которые влияют на решение о покупке.

Советы

Маст-хэв: изображение и выбранные пользователем характеристики (цвет, размер, мощность оперативной памяти и т.п.). Информации должно быть не меньше, чем на карточке в каталоге.

Важную информацию вынесли в корзину, но фотографию товара лучше сделать побольше Интернет-магазинг hm.com

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

Эйчик с зарой ходят парой. Здесь смогли решить проблему изображений вертикальной ориентацией карточки. С другой стороны, для пользователя это непривычно Интернет-магазин zara.com

Изображения важны. Товар на фото должен быть в выбранном пользователем варианте. Особенно, если варианты по-разному выглядят на фото.

По клику на карточку переводите пользователя на страницу товара.

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

Дальше случился рейд по корзинам спортивных интернет-магазинов в поиске «идеальной» карточки. Будет много картинок.

Рейд по спортивным интернет-магазинам

Vans делают прекрасные кеды, но продают их на сайте с крайне плохим дизайном. Изменить нельзя ничего. Хорошо, что хоть кнопка удалить вынесена отдельно, а не количество нужно выкрутить на 0 Интернет-магазин vans.ru
У дизайнера adidas нашлось место на 2 кнопки «Оформить», но не нашлось на изменение расцветки внутри карточки или хотя бы размера Интернет-магазин adidas.
Nike дают возможность поменять размер. Выпадающий список при этом стоит кастомизировать, а изменить расцветку в корзине по-прежнему никак нельзя Интернет-магазин nike.com
На сайте Reebok постарались исправить ошибку старшего брата. Зачем-то закостылили все с помощью подобия быстрого просмотра. Выпадающий список, уходящий за пределы окна — без комментариев :) Интернет-магазин reebok.ru
Интересное решение с добавлением размеров для примерки. Хорошо, что можно менять размер (хотя анимация божественна просто — попробуйте сами) Интернет-магазин newbalance.ru
Кнопка изменить у Puma вышлет тебя обратно на продуктовую страницу, где ты сможешь изменить любой параметр. Параметров всего три — за что такие мучения? Может быть, где-то есть товары с большим количеством параметров. Я не нашел Интернет-магазин puma.com

Можно только предположить, что выбор цвета слишком сложен в разработке.

Упрощаем

Хэдер и футер несут большое количество информации и даже CTA. Большие футеры — хорошо и удобно, подробный хэдер — прекрасно, но не в корзине.

Наша цель — минимизировать количество отвлекающих факторов. Футер и хедер упрощаются до логотипа с телефоном, политики конфиденциальности или других документов.

Так мы делать не рекомендуем Интернет-магазин ozon.ru
А так рекомендуем. Минимум деталей для максимальной сосредоточенности на задаче «Оформить заказ» Интернет-магазин mvideo.ru

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

Не только доставка

Конечная стоимость не менее важна, чем стоимость доставки.

Дизайнер asos решил держать нас в неведении и обойтись строчкой «всего». Интернет-магазин asos.com

Мы рекомендуем объяснять пользователю «как так вышло». Например, с помощью формул.

Связной показывает, как считается стоимость. Для итоговой стоимости есть строчка с  Интернет-магазин svyaznoy.ru

Проверьте мобильную версию, снова

Примерно 70% трафика в наших последних проектах интернет-магазинов приходит с мобильных. В мобильной версии корзина всегда должна быть на видном месте.

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

Корзина на правильном месте Интернет-магазин svyaznoy.ru

Упростите изменение и удаление из корзины. Передумать в процессе нормально, не мешайте пользователю оставить в корзине только нужные товары.

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

Не забудьте показывать саммари заказа и в мобильной версии.

Один из наших проектов

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

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

Снова не конец

Часть про корзину вышла довольно длинной. Историю про оформление заказа сокращать не хочется, поэтому впереди еще одна статья цикла.

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

Всегда отвечаю на все комментарии и сообщения в личке. Мне очень важна обратная связь от вас :)

{ "author_name": "Mojo", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043c\u0430\u0433\u0430\u0437\u0438\u043d"], "comments": 33, "likes": 49, "favorites": 316, "is_advertisement": false, "subsite_label": "design", "id": 131458, "is_wide": true, "is_ugc": true, "date": "Mon, 08 Jun 2020 12:00:02 +0300", "is_special": false }
Маркетинг
Как бизнесу заработать в соцсетях в 2020 году: полноценное руководство с прогнозами и примерами
Пошаговая рабочая стратегия продвижения бизнеса в соцсетях с медиапланом и примерами внедрения от директора «Студии…
Объявление на vc.ru
0
33 комментария
Популярные
По порядку
Написать комментарий...
6

По поводу выбора цвета в корзине.
Это скорее осознание решение.
Покупатель уже решил что хочет и возможность поменять цвет заставит задуматься над тем тот ли цвет я выбрал или может другой, что провоцирует отложить и обдумать. В то время как размер это лишь важен, 41,5 и 42 ощутимая разница для ежедневного использования

Ответить
0

Интересная гипотеза, но даже размер дают не везде менять :)

Ответить
0

По размерам в принципе верно написано, только с поправкой что рассмотрены магазины моно бренды. Возможно есть свои мотивы.
Более показательны мульти брендовые средней руки. А также разбор мобильных версий, да покупки могут быть и стационраного. Но первый контакт это все же мобильный в 7/10 случаев (не имхо, а статистика)

Ответить
0

Да, часто бывает что и больше 70% с мобильного. В большинстве случаев мобильные версии — урезанные полноценные, но иногда я затрагиваю их в цикле специально и фокусируюсь на отдельных моментах.

Например, во второй статье довольно много про навигацию в мобильных версиях.

Я, естественно, посмотрел не только эти магазины, но и другие. В большинстве рассмотренных дают менять только количество товаров. Характеристики — нет. 

Ответить
0

В том же woocommerce это можно сделать через такие костыли, даже представить тяжело....

Ответить
0

Понимаю вас :)

Мы тоже сталкиваемся с ограничениями во время разработки: бюджет, сроки и инструменты далеки от идеала. Главное, всегда пытаться достичь максимально хорошего UX.

Ответить
4

Отличный материал пишите. Жду продолжение.

Ответить
2

Спасибо, Сергей :)

Вы как раз вовремя, следующая статья, возможно, будет последней из цикла :) 

Ответить
0

Интересно, почему указанные в статье компании этого не понимают. Есть какая-та причина, почему они не делают корзины по-человечески? 

Ответить
4

Работая с крупными компаниями, я понял что они ни чем не отличаются от мелких и средних.

Во многих крупных компаниях точно так же есть некомпетентные менеджеры и точно так же есть фокусы на опте. А для розницы и так сойдёт.

Ответить
1

И это очень грустно :( Хотим, чтобы люди начали заботиться о других людях и своей прибыли. Пусть и с розницы.

С кем вам удалось поработать, если не секрет?

Ответить
0

А вы не рассматривали эти ошибки с позиции "не ошибок"?
То есть, может быть у магазина есть обоснованные мнения, почему сделано именно так?  Ведь согласитесь, продавать и рисовать, условно, не одно и то же. Возможно вы не знаете чего-то?
Есть ли тут эксперт с обратной стороны?

Ответить
0

Микро и малый бизнес, мне кажется, ставит в приоритет розницу, по крайней мере в моём опыте.

Ответить
0

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

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

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

Все можно исправить, но иногда приходится начинать с нуля.

Ответить
0

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

Судя по сайту Vans, они на него просто забили. Какую-то прибыль приносит и ладно.

Ответить
0

В моём укладе мира это не состыковывается 😁

Ответить
1

Отличная серия вышла, доходчиво и понятно, с примерами. Благодарю вас

Ответить
1

Спасибо, Эд :)

Еще одна статья точно будет. Потом посмотрим.

Ответить
1

Ох жду, надеюсь и дальше будете писать, прям услада для мозга

Ответить
3
Ответить
–1

Причем здесь дизайн??? Я, например, сотни раз оставляла в корзине товары, так как меня не устраивал пункт выдачи, или невозможность оплатить картой, или стоимость доставки. И в ПОСЛЕДНЮЮ очередь меня волновал дизайн корзины. 

Ответить
4

Думаю, мы понимаем профессию дизайнера по-разному, Екатерина.

Мы проектируем интерфейс от начала до конца. Выделяем и согласуем функциональность. Определяем, что показывать, а что нет. Мы не только рисуем картинки :) Иногда даже советуем, какие платежки подключать и объясняем клиентам, что оплата картой — мастхэв.

Вы привели в пример хороший кейс про стоимость доставки. Если магазины показывали бы вам минимальную стоимость доставки заранее, то вы бы даже не добавили в корзину товар со слишком дорогой доставкой. Верно? Или проблема была иной?)

Ответить
0

Мы не только рисуем картинки :)

Осталось только убедить в этом остальных х)

Ответить
1

Mojo, вы невероятно кстати, я завтра буду наверстать корзину, а потом страницу оформления заказа, 80% я и так знаю и делаю, а остальные 20% взял на заметку и записал к себе. 😘     ❤

Ответить
0

Очень рад, что смог помочь!

К сожалению, оформление заказа придется ждать до понедельника :(

💙

Ответить
1

Прочитал весь цикл статей, понравилось. Сделайте, пожалуйста, отдельно о мобильной версии.

Ответить
0

Вы мой герой! (Особенно, если везде лайк поставили, а то там третья статья проседает)

Из этого цикла точно еще будет статья об оформлении заказа. Про мобилку как раз думаем сейчас :)

Ответить
0

Mojo, а как насчёт сделать нижнюю панель-бар, как в приложениях и отказаться от мини корзины, так будет по идее быстрее. Например как у ozon) И еще важная деталь, будет ли это юзабильно без ajax, то есть страницы будут загружаться с перезагрузкой, а не в фоне.

Ответить
0

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

Ответить
0

Не компактным, а удобным. Как можно их не замечать??? В каждом втором приложении панель-бары...

Ответить
0

Нижнюю панель-бар для десктопа я плохо представляю :) 

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

Расширенная информация в карточке по наведению — хорошее решение, но в мобильных интерфейсах будет мешать. Как минимум, потому что onHover в мобилке (пока?) отсутствует.

Соответственно, можно просто отправлять пользователя в корзину.

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

К сожалению, панель-бар тоже не выглядит, как панацея:
1. Сайт открывается в браузере и привычную нижнюю часть занимает интерфейс браузера. При скролле вниз он пропадает, при скролле вверх возникает снова. Панель-бар будет прыгать.
2. На айфоне панель-бар может конфликтовать с хоум-индикатором, превратившимся в тонкую полоску в самом низу экрана.
3. В андройдах есть разные решения, но проблемы примерно те же.

Когда разрабатывается приложение, то все эти проблемы решаются :)

Что можно делать в версии для смартфонов? Например, добавить навигацию на главную страницу мобильной версии и в футер.

Подробно про всю навигацию я писал во второй статье. Вот ссылка :)

Ответить
0

Что скажете по поводу одновременного существования и корзины, и виш-листа?
Не снижает ли наличие дополнительной опции конверсию, за счёт размытия пути пользователи и\или удлинения шага сделки ещё на один этап?

Ответить
0

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

Виш-лист — не очень хорошее название, я об этом писал в третьей статье. Лучше использовать «Избранное».

У NNG есть еще идея с функцией отложить, но она для российского рынка очень непривычна. Я прям крайне редко встречаю её на локальных сайтах.

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

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

Ответить

Комментарии

null