Mobile second: 5 трендов дизайна ecommerce-проектов в 2015 году Статьи редакции

Основатель компании-разработчика интернет-магазинов Prime ecommerce agency (в портфолио — Pleer.ru, «Техносила», BaOn, «МТС-Банк», Orby) Александр Степыгин написал для рубрики «Интерфейсы» колонку об основных трендах в дизайне e­commerce-проектов в 2015 году.

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

Создаём что-то ­— трафик ­— обработка заказов ­— трафик ­— обработка заказов ­— юзибилити и дизайн?

Не берём крупных офлайн-ритейлеров, создающих e­commerce на базе офлайна. Речь идет именно о интернет-магазинах, созданных «с нуля».

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

Поэтому появилось желание поделиться основными трендами в дизайне e­commerce-проектов.

1. Упрощаем. Затем упрощаем снова

В работе мы часто сталкиваемся с очень амбициозными клиентами.

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

Смотрим на Amazon:

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

И несомненный тренд в дизайне e­сommerce-проектов сегодня — это тотальное упрощение восприятия продукта для пользователя. Нужно убрать подальше всё лишнее, отвлекающее от покупок, требующее дополнительных пояснений.

Пользователю необходимо оставить только самые важные характеристики — те, которые влияют на принимаемое им решение. Неплохим примером может служить новый магазин «М-Видео»:

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

2. От универсальности к уникальности

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

Сейчас индустрия понимает, что дизайн сам по себе может создавать дополнительную ценность к покупке. Например, пользователь планирует купить часы Richard Mille RM 52­01 limited — это само по себе говорит, что человек с неким вкусом и требованиями к качеству вещей в своей жизни.

Итак, где бы он совершил покупку?

Первая выдача Google:

Или так:

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

3. Карточка товара ­— лэндинг

Лэндинги доказали свою эффективность по сравнению с простыми карточками товаров. У нас есть клиент, интернет-магазин которого состоит из 433 лэндингов.

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

Отличный пример:

4. Mobile second

Некоторое время назад был популярным тренд под названием Mobile First. Всё внимание уделялось мобильным прототипам и макетам, на основе стилей которых далее делали макеты для десктопа.

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

У наших клиентов в среднем около 25% аудитории — пользователи смартфонов, при этом лишь небольшой процент реально совершает покупки с этих устройств. Поэтому ориентироваться на них в первую очередь — ошибочно.

В e­commerce — mobile second.

5. Товар в деталях

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

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

В карточке товара продвинутых магазинов сейчас можно встретить не только фото, но и видео, а так же и «обзор­ 360». Примером подобной реализации может служить интернет-­магазин бильрядных киёв 1000cues.ru, где основным продающим фактором является возможность рассмотреть товар во всех деталях, а так же покрутить в 3D:

Помните, красивые картинки продают.

0
17 комментариев
Написать комментарий...
Андрей Бурдин

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

Ответить
Развернуть ветку
Виктор Суздалев

Ошибка выживших, говорите? ;-)

Ответить
Развернуть ветку
Praetorian

Браво

Ответить
Развернуть ветку
Андрей Бурдин

нет, напротив, оценка слов тех, кто не купил.

Ответить
Развернуть ветку
Yan Petrov

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

Ответить
Развернуть ветку
Praetorian

Тут такой момент: с мобильного действительно не покупают, но мобильная версия может быть точкой первого контакта и ознакомления с товаром, а затем через десктоп человек совершает покупку. Но это просто не отслеживается (да и как?), в итоге делается вывод, что мобайл не продает.

Ответить
Развернуть ветку
Владимир

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

Ответить
Развернуть ветку
Владимир

да, это я к комменту от Karim Musaev. ЦП запилите как ВК кто кому ответил, а то кнопка есть, а как будто ответил на корневой комментарий %)

Ответить
Развернуть ветку
Андрей Бурдин

вот и я о том - точка входа должна лучше работать.

Ответить
Развернуть ветку
Sergiy Lemeshkin

Есть такая вещь как ассоцированные конверсии. Отслеживается не все, но вывод сделать можно.
Путь с телефона в десктоп достаточно тернист.

Ответить
Развернуть ветку
Vladimir Alyoshin

PLeer.ru?
Вы серьезно?
Попробуйте зайти на этот чудо-сайт и купить mp3 плеер.

Ответить
Развернуть ветку
Yan Arefiev

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Maxim Syabro

За увеличение наведением мышкой хочется пиздить ногами. Долго. Очень долго.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Danya Kryuchkov

Экспертизой в посте аж завоняло

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Valentin Gusev

в портфолио http://1000cues.ru/ - числится как адаптивный сайт, ребят вы серьезно? Если я такой открою на мобильном я точно ничего там не куплю)

Резиновость и адаптивность не одно и тоже, и возможно стоит в начале подкачать знания, а потом ими делиться)

Ответить
Развернуть ветку
Константин Низамов

Открыл на мобильном, всё ок. Что не так? Вы, наверное, окно в браузере перетягиваете туда сюда, вместо того, чтобы с реального устройства открыть.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Читать все 17 комментариев
null