От перегруженности к функциональности: концепт редизайна интернет-магазина «220 Вольт»
Новое видение интерфейса сайта от дизайн-команды ADN Digital Studio.
Руководитель компании по разработке Павел Занин рассказал о том, как команда проанализировала сайт онлайн-ритейлера »220 вольт», нашла несколько проблем и предложила свои варианты интерфейса.
Первая проблема: текущий интерфейс всё ещё ориентирован на мониторы с небольшим разрешением (1024×768). Такое искусственное ограничение привносит визуальную сумятицу, «слепляет» блоки друг с другом и в целом уменьшает полезную область: на картинке выше поле поиска, меню, слайдер и акционные товары умещаются на одном прямоугольнике размером 960 на 520 пикселей, элементам на превью товара тоже тесно.
Вторая проблема — навигация. Местами на сайте странная логика и неудобное или неочевидное управление. Третья проблема — отсутствие какой бы то ни было адаптивности.
Мы попробовали сделать сайт чуть более современным, функциональным и удобным.
Главная страница
Что сделали и почему
Шапка. Шапка сайта выглядела перегруженной, сетка использовалась нерационально. Много места занимали минорные элементы — иконки социальных сетей, блок с телефоном и обратным звонком. Мы облегчили шапку, в нашей концепции остались только самые востребованные покупателями элементы.
Сюда же вынесли статьи, советы по выбору и видеообзоры, объединив их в раздел «Журнал» — до этого ссылки сиротливо «висели» в подвале.
Меню и первый экран. В старом варианте меню было развернуто по умолчанию и занимало чуть меньше трети первого экрана — мы устранили эту проблему, переместив кнопку меню в шапку. Кроме того, в старом варианте была странная особенность: по клику на стрелку рядом с меню «Каталог товаров» пользователь переходил на страницу со всеми категориями магазина, а не сворачивал меню.
Убрали с первого экрана акционные товары — они будут находиться ниже. Первый экран стал компактнее и чище.
Слайдер. Типичная проблема всех слайдеров — со временем они становятся лоскутным одеялом (вот таким), начинаю выбиваться из общей стилистики сайта. Чтобы подтянуть эстетику, мы сделали универсальный шаблон для всех слайдов.
Блок товаров. Делаем навигацию с вкладками — такое решение позволяет выводить вдвое больше товаров на один раздел. При этом главная страница остается компактной.
Информационный блок. Раньше здесь был виджет «ВКонтакте», последние новости, баннер, ссылки на магазины и блок с преимуществами. Мы убрали все новости в специальный раздел в шапке, поэтому этот блок тоже стал компактнее — при этом в нём теперь гораздо больше воздуха.
Подвал. Здесь только косметические изменения. Сделали форму подписки на рассылку более явной — в старой редакции она терялась. Также добавили чекбокс согласия с пользовательским соглашением (сегодня без него могут и обвинить в судебном порядке).
Каталог товаров
Что сделали и почему
Сортировщик. Заменили каждый сортировщик выпадающими меню, привели всё к единому виду. Убрали избыточные текстовые подсказки. Стало аккуратнее.
Фильтр. Делаем немного меньше по ширине, в целом к фильтру особых замечаний нет. Также добавили количество товаров в категории — над самим каталогом.
Карточка товара в каталоге
Что сделали и почему
В текущей версии было несколько спорных моментов:
- Пользователь не мог увидеть рейтинг товара, если он акционный, — лейбл «Акция» просто вытеснял рейтинг.
- Количество комментариев и видеообзоров отображалось красным цветом, а количество получаемых бонусов — зеленым. Такое цветовое кодирование создавало ненужную ассоциацию «плохо-хорошо» (как будто у товара отрицательные отзывы).
- В каталоге скидка указывалась в рублях, а на странице товара — в процентах.
- Лейбл скидки был массивным, часто перекрывал изображение товара.
- Иконка бонусов была неочевидна для нового пользователя — при наведении на неё не появлялось всплывающей подсказки.
- Клики на иконки отзывов и видео о товаре вели на страницу товара (не было необходимости делать их интерактивными).
Мы облегчили карточку, оставив только самые важные элементы и немного поработав над композицией. Остальные элементы перенесли непосредственно на страницу товара.
Карточка товара
Что сделали и почему
Карточка. Улучшили композицию и отступы, в результате чего блок стал менее громоздким и в нем появилось больше воздуха.
«Где купить». Проблема текущего интерфейса — при большом количестве пунктов выдачи и способов доставки сайт заметно вытягивается по вертикали. Добавили скроллбар для списка и поместили его сбоку от карты — получилось компактнее.
Товарные рекомендации. Поместили блоки товарных рекомендаций один под другим (раньше их «разрывали» другие блоки страницы). Сделали компактные вкладки сопутствующих товаров — это позволит рекомендовать товары сразу, без перехода в категорию.
Характеристики товара. Сделали блок более вместительным и добавили товарную рекомендацию похожего товара.
Обзоры и статьи. Предложили немного разнообразить контент во вкладке «Видео» — публиковать там не только видеообзоры, но и упоминания в статьях. Вкладку переименовали в «Обзоры».
Корзина и оформление заказа
Что сделали и почему
Корзину реорганизовали полностью: сделали классическую трехшаговую концепцию с постепенным сохранением данных о заказе. Реализовали более компактный и современный интерфейс заполнения данных.
Последний шаг — подтверждение заказа и благодарность за покупку. Здесь же работаем с лояльностью, дарим подарки, предлагаем подписаться на магазин в социальных сетях и установить приложение.
Адаптив
Текущий сайт полностью неадаптивный. Мы предложили один вариант отображения на планшетах, без детальной проработки всех разрешений.
Конечно, любой ecommerce-сайт нельзя просто так взять и перерисовать, потому что, как мы уже сказали, расположение и логика работы каждого блока — это результат многократных тестов. Скорее всего.
С другой стороны, ничто не мешает оптимизировать сам интерфейс — причем без радикальных изменений и шокирования лояльной аудитории, как это в свое время было с новым «Кинопоиском».
© vc.ru
