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

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

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

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

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

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

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

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

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

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

Смотрим на Amazon:

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

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

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

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

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

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

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

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

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

Или так:

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

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

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

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

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

4. Mobile second

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

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

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

В ecommerce — mobile second.

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

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

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

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