Лого 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. ЦП запилите как ВК кто кому ответил, а то кнопка есть, а как будто ответил на корневой комментарий %)

1

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

0

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

0

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

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

0

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

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

«В ecommerce — mobile second.» только одна, блядь, буква русская

страница товара — лендинг? ну удачи вам с лендингами на 10 000 позиций

0

Я сейчас угадываю, но наполнением товара занимаются, часто специально обученные люди. Не берем в пример автоматически агрегированные выгрузки в интернет магазин, т.к. это больше история про скорость и нежелание делать "качественный" интернет магазин.
Вместо обычного наполнения товара, наполнять согласно, предварительно подготовленному чек листу и контенту, а так же обученным сотрудникам. Каждая карточка товара, будет генерироваться так же, просто иметь вид лендинга. Да это более трудоемко и соответственно более дорогое наполнение, ну что поделаешь, калькулятор в помощь. Есть ниши, где это выгодно, есть где не выгодно, но отрицать то, что правильные лендинги продают лучше, не стоит.
Еще это не касается магазинов акссесуарщиков, которые зарабатывают на аксессуарах, хотя можно воткнуть в лендинги и допы.

Ну это же не универсальное решение.
Каждой нише своя фишка.

0

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

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

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

0

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

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

Сейчас обсуждают
Сергей Никитин

Есть ли (планируются ли) какие-нибудь принципиальные отличия от ilovepdf.com, например?

Инструмент из России: PDF.io — набор веб-сервисов для работы с PDF-файлами
0
Mark Lesly

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

Control365 — система управления автомойкой, шиномонтажом или автосервисом
0
Илья Поздняков

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

Смерть стартапа: Что случилось с производителем дронов Lily Camera, собравшим $34 млн на предзаказах
0
Илья Поздняков

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

Смерть стартапа: Что случилось с производителем дронов Lily Camera, собравшим $34 млн на предзаказах
0
Таир Бакиев

Стор давно превратился в помойку полную всяких "гостей вконтакте и инстаграмм"

Неизвестные загрузили в App Store приложения-клоны Gett, Uber и других такси-сервисов
0
Показать еще