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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#Интерфейсы