Так мог бы выглядеть интернет-магазин «220 вольт»

Мы проанализировали сайт известного онлайн-ритейлера, нашли несколько проблем и предложили свои варианты интерфейса.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стало лучше. Взялись за остальные ключевые страницы.

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

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

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

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

Также добавили количество товаров в категории — над самим каталогом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Первый шаг:

Второй шаг — сделали более компактный и современный интерфейс заполнения данных:

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

Адаптив

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

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

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

Приглашаем кидаться в комментариях переспелыми томатами.