Так мог бы выглядеть интернет-магазин «220 вольт»
Дизайн-команда ADN Digital Studio предложила свое видение интерфейса онлайн-магазина «220 вольт».
Мы проанализировали сайт известного онлайн-ритейлера, нашли несколько проблем и предложили свои варианты интерфейса.
Первая проблема — текущий интерфейс все еще ориентирован на мониторы с небольшим разрешением (1024×768). Такое искусственное ограничение привносит визуальной сумятицы, «слепливает» блоки друг с другом и в целом уменьшает полезную область — на картинке выше поле поиска, меню, слайдер и акционные товары умещаются на одном прямоугольнике размером 960 на 520 пикселей, элементам на превью товара тоже «тесно».
Вторая проблема — навигация. Местами на сайте странная логика и неудобное или неочевидное управление.
Третья проблема — отсутствие какой бы то ни было адаптивности.
Мы попробовали сделать сайт чуть более современным, функциональным и удобным.
Главная страница
-
Наш вариант
-
Старый вариант
Что сделали и почему так
Шапка. Шапка сайта выглядела перегруженной, сетка использовалась нерационально. Много места занимали минорные элементы — иконки социальных сетей, блок с телефоном и обратным звонком. Мы облегчили хедер, на нашей концепции осталось только самые востребованные покупателями элементы.
Сюда же вынесли статьи, советы по выбору и видеообзоры, объединив их в раздел «журнал» — до этого ссылки сиротливо висели в подвале.
Меню и первый экран. В старом варианте меню было развернуто по умолчанию, чем отнимало чуть меньше ⅓ первого экрана — устранили эту проблему, переместив кнопку меню в шапку. Кроме того, в старом варианте была странная особенность: по клику на стрелку рядом с меню «Каталог товаров» (скриншот справа) пользователь переходил на страницу со всеми категориями магазина, а не сворачивал меню.
Убрали с первого экрана акционные товары — они будут находиться ниже. Первый экран стал компактнее и чище.
Слайдер. Типичная проблема всех слайдеров — со временем они становятся лоскутным одеялом (вот таким), начинаю выбиваться из общей стилистики сайта. Чтобы подтянуть эстетику, мы сделали универсальный шаблон для всех слайдов.
Блок товаров. Делаем навигацию с вкладками — такое решение позволяет выводить вдвое больше товаров на один раздел. При этом главная страница остается компактной.
Информационный блок. Раньше здесь был виджет VK, последние новости, баннер, ссылки на магазины и блок с преимуществами. Мы убрали все новости в специальный раздел в шапке, поэтому этот блок тоже стал компактнее — и при этом в нем теперь гораздо больше воздуха.
Подвал. Здесь только косметические изменения. Сделали форму подписки на рассылку более явной — в старой редакции она терялась (а еще добавили чекбокс согласия с пользовательским соглашением, сегодня без него могут и засудить).
Стало лучше. Взялись за остальные ключевые страницы.
Каталог товаров
-
Наш вариант
-
Старый вариант
Что сделали и почему так
Сортировщик. Заменили каждый сортировщик выпадающими меню, привели всё к единому виду. Убрали избыточные сегодня текстовые подсказки. Стало аккуратнее.
Фильтр. Делаем немного меньше по ширине, а в целом — к фильтру особых замечаний нет.
Также добавили количество товаров в категории — над самим каталогом.
Карточка товара в каталоге
Что сделали и почему так
В текущей версии было несколько спорных моментов:
- Пользователь не мог увидеть рейтинг товара, если товар акционный — лейбл «акция» просто вытеснял рейтинг.
- Количество комментариев и видеообзоров отображалось красным цветом, а количество получаемых бонусов — зеленым. Такое цветовое кодирование создавало ненужную ассоциацию «плохо-хорошо» (у товара как будто отрицательные отзывы).
- В каталоге скидка указывалась в рублях, а на странице товара — в процентах.
- Лейбл скидки массивный, часто перекрывающий изображение товара.
- Иконка бонусов не очевидна для нового пользователя — при наведении на нее нет всплывающей подсказки.
- Клики на иконки отзывов и видео о товаре вели на страницу товара (не было необходимости делать их интерактивными).
Мы облегчили карточку, оставив только самые важные элементы и немного поработав над композицией. Остальные элементы перенесли непосредственно на страницу товара.
Карточка товара
-
Наш вариант
-
Старый вариант
Что сделали и почему так
Карточка. Улучшили композицию и отступы, в результате чего блок стал менее громоздким и в нем появилось больше воздуха.
Где купить. Проблема текущего интерфейса — при большом количестве пунктов выдачи и способов доставки сайт заметно вытягивается по вертикали. Добавили скроллбар для списка и поместили его сбоку от карты — получилось компактнее.
Товарные рекомендации. Поместили блоки товарных рекомендаций один под другим (раньше их «разрывали» другие блоки страницы). Сделали компактные вкладки сопутствующих товаров, это позволит рекомендовать товары сразу, без перехода в категорию.
Характеристики товара. Сделали блок более вместительным и добавили товарную рекомендацию похожего товара.
Обзоры и статьи. Предложили немного разнообразить контент на вкладке «Видео» — выводить там не только видео-обзоры, но и упоминания в статьях. Вкладку переименовали в «Обзоры».
Корзина и оформление заказа
-
Наш вариант
-
Старый вариант
Что сделали и почему так
Корзину реорганизовали полностью — сделали классическую трехшаговую, с постепенным сохранением данных о заказе.
Первый шаг:
Второй шаг — сделали более компактный и современный интерфейс заполнения данных:
Третий шаг — подтверждение заказа и благодарность за покупку. Здесь же — работаем с лояльностью, дарим подарки, предлагаем подписаться на магазин в социальных сетях и установить приложение:
Адаптив
Текущий сайт полностью не адаптивный — предложили один вариант отображения на планшетах, без детальной проработки всех разрешений:
Конечно, любой ecommerce-сайт нельзя просто так взять и перерисовать — ибо, как мы уже сказали, расположение и логика работы каждого блока есть результат многократных тестов. Скорее всего.
С другой стороны, ничто не мешает оптимизировать сам интерфейс — причем без радикальных изменений и шокирования лояльной аудитории, как это в свое время было с новым «Кинопоиском».
Приглашаем кидаться в комментариях переспелыми томатами.
Мы отправляем полезные материалы, которые помогут вам в работе
Популярные статьи в категории Дизайн
-
28 декабря 2016
1 775
42
-
11 сентября 2017
1 470
29
-
02 июля 2018
4 150
155