Лого vc.ru

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

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:

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

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

0

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

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

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

0

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

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

0

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

0

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

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

0

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

Никому другому ещё не удавалось продавать то, чем покупатели никогда не воспользуются, так что не в дизайне дело.

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

0

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

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

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

Прямой эфир
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления