От перегруженности к функциональности: концепт редизайна интернет-магазина «220 Вольт»

Новое видение интерфейса сайта от дизайн-команды ADN Digital Studio.

Руководитель компании по разработке Павел Занин рассказал о том, как команда проанализировала сайт онлайн-ритейлера »220 вольт», нашла несколько проблем и предложила свои варианты интерфейса.

a86880a6928759.png

Первая проблема: текущий интерфейс всё ещё ориентирован на мониторы с небольшим разрешением (1024×768). Такое искусственное ограничение привносит визуальную сумятицу, «слепляет» блоки друг с другом и в целом уменьшает полезную область: на картинке выше поле поиска, меню, слайдер и акционные товары умещаются на одном прямоугольнике размером 960 на 520 пикселей, элементам на превью товара тоже тесно.

Вторая проблема — навигация. Местами на сайте странная логика и неудобное или неочевидное управление. Третья проблема — отсутствие какой бы то ни было адаптивности.

Мы попробовали сделать сайт чуть более современным, функциональным и удобным.

Главная страница

51cb41a88ee15d.jpg
Старый вариант слева, наш вариант — справа

Что сделали и почему

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

18e4af78f12d68.png
Старый вариант
de838e627c95f4.png
Наш вариант

Сюда же вынесли статьи, советы по выбору и видеообзоры, объединив их в раздел «Журнал» — до этого ссылки сиротливо «висели» в подвале.

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

7e28a3c4ed8346.png
Старый вариант
639d4445ef27e3.png
Наш вариант

Убрали с первого экрана акционные товары — они будут находиться ниже. Первый экран стал компактнее и чище.

Слайдер. Типичная проблема всех слайдеров — со временем они становятся лоскутным одеялом (вот таким), начинаю выбиваться из общей стилистики сайта. Чтобы подтянуть эстетику, мы сделали универсальный шаблон для всех слайдов.

Блок товаров. Делаем навигацию с вкладками — такое решение позволяет выводить вдвое больше товаров на один раздел. При этом главная страница остается компактной.

accd555ff791c5.png
Старый вариант
482c9d5debd786.png
Наш вариант

Информационный блок. Раньше здесь был виджет «ВКонтакте», последние новости, баннер, ссылки на магазины и блок с преимуществами. Мы убрали все новости в специальный раздел в шапке, поэтому этот блок тоже стал компактнее — при этом в нём теперь гораздо больше воздуха.

1d118ddd8a5ac6.png
Старый вариант
f0ba41f2401160.png
Наш вариант

Подвал. Здесь только косметические изменения. Сделали форму подписки на рассылку более явной — в старой редакции она терялась. Также добавили чекбокс согласия с пользовательским соглашением (сегодня без него могут и обвинить в судебном порядке).

10345668f77c78.png
Старый вариант
e9810586ccda19.png
Наш вариант

Каталог товаров

4cbbc611c8f5d5.jpg
Старый вариант слева, наш вариант — справа

Что сделали и почему

Сортировщик. Заменили каждый сортировщик выпадающими меню, привели всё к единому виду. Убрали избыточные текстовые подсказки. Стало аккуратнее.

Фильтр. Делаем немного меньше по ширине, в целом к фильтру особых замечаний нет. Также добавили количество товаров в категории — над самим каталогом.

Карточка товара в каталоге

746a4d64d4a7a9.png
Старый вариант
8054778ad05475.png
Наш вариант

Что сделали и почему

В текущей версии было несколько спорных моментов:

  • Пользователь не мог увидеть рейтинг товара, если он акционный, — лейбл «Акция» просто вытеснял рейтинг.
  • Количество комментариев и видеообзоров отображалось красным цветом, а количество получаемых бонусов — зеленым. Такое цветовое кодирование создавало ненужную ассоциацию «плохо-хорошо» (как будто у товара отрицательные отзывы).
  • В каталоге скидка указывалась в рублях, а на странице товара — в процентах.
  • Лейбл скидки был массивным, часто перекрывал изображение товара.
  • Иконка бонусов была неочевидна для нового пользователя — при наведении на неё не появлялось всплывающей подсказки.
  • Клики на иконки отзывов и видео о товаре вели на страницу товара (не было необходимости делать их интерактивными).

Мы облегчили карточку, оставив только самые важные элементы и немного поработав над композицией. Остальные элементы перенесли непосредственно на страницу товара.

Карточка товара

e4731ec8f287da.jpg
Старый вариант слева, наш вариант — справа

Что сделали и почему

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

«Где купить». Проблема текущего интерфейса — при большом количестве пунктов выдачи и способов доставки сайт заметно вытягивается по вертикали. Добавили скроллбар для списка и поместили его сбоку от карты — получилось компактнее.

Товарные рекомендации. Поместили блоки товарных рекомендаций один под другим (раньше их «разрывали» другие блоки страницы). Сделали компактные вкладки сопутствующих товаров — это позволит рекомендовать товары сразу, без перехода в категорию.

80d572ffd99d01.png
Старый вариант
f1e6ce640c886a.png
Наш вариант

Характеристики товара. Сделали блок более вместительным и добавили товарную рекомендацию похожего товара.

cfbba4a34bb786.png
Старый вариант
6b46db457d8f7f.png
Наш вариант

Обзоры и статьи. Предложили немного разнообразить контент во вкладке «Видео» — публиковать там не только видеообзоры, но и упоминания в статьях. Вкладку переименовали в «Обзоры».

e0a51d98b98fcc.png
Наш вариант

Корзина и оформление заказа

6b11d0e5af27b3.jpg
Старый вариант
bc4e2dcb9e7443.png
Наш вариант

Что сделали и почему

Корзину реорганизовали полностью: сделали классическую трехшаговую концепцию с постепенным сохранением данных о заказе. Реализовали более компактный и современный интерфейс заполнения данных.

d960390e6af5b8.jpg

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

5bced7e1641088.jpg

Адаптив

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

71eacfa757845c.jpg

Конечно, любой ecommerce-сайт нельзя просто так взять и перерисовать, потому что, как мы уже сказали, расположение и логика работы каждого блока — это результат многократных тестов. Скорее всего.

С другой стороны, ничто не мешает оптимизировать сам интерфейс — причем без радикальных изменений и шокирования лояльной аудитории, как это в свое время было с новым «Кинопоиском».

©  vc.ru