От перегруженности к функциональности: концепт редизайна интернет-магазина «220 Вольт» Статьи редакции
Новое видение интерфейса сайта от дизайн-команды ADN Digital Studio.
Руководитель компании по разработке Павел Занин рассказал о том, как команда проанализировала сайт онлайн-ритейлера «220 вольт», нашла несколько проблем и предложила свои варианты интерфейса.
Первая проблема: текущий интерфейс всё ещё ориентирован на мониторы с небольшим разрешением (1024х768). Такое искусственное ограничение привносит визуальную сумятицу, «слепляет» блоки друг с другом и в целом уменьшает полезную область: на картинке выше поле поиска, меню, слайдер и акционные товары умещаются на одном прямоугольнике размером 960 на 520 пикселей, элементам на превью товара тоже тесно.
Вторая проблема — навигация. Местами на сайте странная логика и неудобное или неочевидное управление. Третья проблема — отсутствие какой бы то ни было адаптивности.
Мы попробовали сделать сайт чуть более современным, функциональным и удобным.
Главная страница
Что сделали и почему
Шапка. Шапка сайта выглядела перегруженной, сетка использовалась нерационально. Много места занимали минорные элементы — иконки социальных сетей, блок с телефоном и обратным звонком. Мы облегчили шапку, в нашей концепции остались только самые востребованные покупателями элементы.
Сюда же вынесли статьи, советы по выбору и видеообзоры, объединив их в раздел «Журнал» — до этого ссылки сиротливо «висели» в подвале.
Меню и первый экран. В старом варианте меню было развернуто по умолчанию и занимало чуть меньше трети первого экрана — мы устранили эту проблему, переместив кнопку меню в шапку. Кроме того, в старом варианте была странная особенность: по клику на стрелку рядом с меню «Каталог товаров» пользователь переходил на страницу со всеми категориями магазина, а не сворачивал меню.
Убрали с первого экрана акционные товары — они будут находиться ниже. Первый экран стал компактнее и чище.
Слайдер. Типичная проблема всех слайдеров — со временем они становятся лоскутным одеялом (вот таким), начинаю выбиваться из общей стилистики сайта. Чтобы подтянуть эстетику, мы сделали универсальный шаблон для всех слайдов.
Блок товаров. Делаем навигацию с вкладками — такое решение позволяет выводить вдвое больше товаров на один раздел. При этом главная страница остается компактной.
Информационный блок. Раньше здесь был виджет «ВКонтакте», последние новости, баннер, ссылки на магазины и блок с преимуществами. Мы убрали все новости в специальный раздел в шапке, поэтому этот блок тоже стал компактнее — при этом в нём теперь гораздо больше воздуха.
Подвал. Здесь только косметические изменения. Сделали форму подписки на рассылку более явной — в старой редакции она терялась. Также добавили чекбокс согласия с пользовательским соглашением (сегодня без него могут и обвинить в судебном порядке).
Каталог товаров
Что сделали и почему
Сортировщик. Заменили каждый сортировщик выпадающими меню, привели всё к единому виду. Убрали избыточные текстовые подсказки. Стало аккуратнее.
Фильтр. Делаем немного меньше по ширине, в целом к фильтру особых замечаний нет. Также добавили количество товаров в категории — над самим каталогом.
Карточка товара в каталоге
Что сделали и почему
В текущей версии было несколько спорных моментов:
- Пользователь не мог увидеть рейтинг товара, если он акционный, — лейбл «Акция» просто вытеснял рейтинг.
- Количество комментариев и видеообзоров отображалось красным цветом, а количество получаемых бонусов — зеленым. Такое цветовое кодирование создавало ненужную ассоциацию «плохо-хорошо» (как будто у товара отрицательные отзывы).
- В каталоге скидка указывалась в рублях, а на странице товара — в процентах.
- Лейбл скидки был массивным, часто перекрывал изображение товара.
- Иконка бонусов была неочевидна для нового пользователя — при наведении на неё не появлялось всплывающей подсказки.
- Клики на иконки отзывов и видео о товаре вели на страницу товара (не было необходимости делать их интерактивными).
Мы облегчили карточку, оставив только самые важные элементы и немного поработав над композицией. Остальные элементы перенесли непосредственно на страницу товара.
Карточка товара
Что сделали и почему
Карточка. Улучшили композицию и отступы, в результате чего блок стал менее громоздким и в нем появилось больше воздуха.
«Где купить». Проблема текущего интерфейса — при большом количестве пунктов выдачи и способов доставки сайт заметно вытягивается по вертикали. Добавили скроллбар для списка и поместили его сбоку от карты — получилось компактнее.
Товарные рекомендации. Поместили блоки товарных рекомендаций один под другим (раньше их «разрывали» другие блоки страницы). Сделали компактные вкладки сопутствующих товаров — это позволит рекомендовать товары сразу, без перехода в категорию.
Характеристики товара. Сделали блок более вместительным и добавили товарную рекомендацию похожего товара.
Обзоры и статьи. Предложили немного разнообразить контент во вкладке «Видео» — публиковать там не только видеообзоры, но и упоминания в статьях. Вкладку переименовали в «Обзоры».
Корзина и оформление заказа
Что сделали и почему
Корзину реорганизовали полностью: сделали классическую трехшаговую концепцию с постепенным сохранением данных о заказе. Реализовали более компактный и современный интерфейс заполнения данных.
Последний шаг — подтверждение заказа и благодарность за покупку. Здесь же работаем с лояльностью, дарим подарки, предлагаем подписаться на магазин в социальных сетях и установить приложение.
Адаптив
Текущий сайт полностью неадаптивный. Мы предложили один вариант отображения на планшетах, без детальной проработки всех разрешений.
Конечно, любой ecommerce-сайт нельзя просто так взять и перерисовать, потому что, как мы уже сказали, расположение и логика работы каждого блока — это результат многократных тестов. Скорее всего.
С другой стороны, ничто не мешает оптимизировать сам интерфейс — причем без радикальных изменений и шокирования лояльной аудитории, как это в свое время было с новым «Кинопоиском».
Лол, Сразу понятно что ребята не думаю ни о продажах ни о Seo ни о функциональности, лепят дизайн ради дизайна)))
Почему?
Потому что шапка потеряла информативность важных элементов, потому что главная потеряла важные элементы, потому что после фразы - "Много места занимали минорные элементы" хочется начать рыдать...
Самая большая проблема этих людей в том что они думают что правы, но правы скорее всего владельцы магазина, которые с помощью не сильно модного дизайна добились чтобы сайт приносил деньги, и это главное для любого интернет магазина!
Ну и пусть вспомнят слова Джони Айва - "дизайн это не про то как мы смотрим на что то, а про то как мы этим пользуемся".
Даниил, говорите про сэо, а у самого сайт без адаптива:thinking:
Сергей, и что?
И что толку от этого я не пойму? Как-то продажи увеличились? Вы реально из продукта, который имеет свой стиль и коммуникацию сделали безликое массовое решение. Я перестал читать обоснования действий со слов "шапка перегружена". Бл, это Ваше личное мнение. В шапке все стоит как надо и она имеет куда больше важных особенностей для взаимодействия с клиентом чем Ваше "свободное" решение. Вместо того чтобы просто освежить визуализацию некоторых элементов, Вы, по своему личному мнению, бахнули все глобально. Это звездец. И еще не факт что не станет хуже после всех Ваших реально спорных нововведений.
Абсолютно согласен с тем, что из продукта с узнаваемым собственным стилем сделали типичный интернет-магазин на Битриксе. Отдельно доставило урезание размеров логотипа в шапке.
Четко!
Забыли написать на сколько упали конверсия и продажи.
Стало хуже.
Был нормальный дизайн с кучей функций.
Стало больше гребаного смузи-пустого пространства и ничерта не добавилось полезного.
"смузи-пустого пространства" хорошо сказано)
А каталог вообще куда дели?
Это не редизайн, это суходрочка.
Надо статистику показывать до/после редизайна. А то многих пользователей отпугивает "современное" оформление в виде лендосов.
В деталях не смотрел, но сразу видно, в общих чертах старый дизайн был более ярким и запоминающимся. А превратился в обычного клона.
В целом неплохо, но все равно как-то слишком флэтого и современно стало для целевой аудитории данного сайта. Согласен, что шапка и подвал какими-то безликими стали. Вообщем А/Б тест в студию, уверен категорию людей 40+ такое решение по началу отпугнёт, более молодые может и не увидят разницы
Кто по вашему целевая аудитория этого сайта?
по логике, основная ЦА это семейные мужчины 35-45 лет со средним достатком, приобретают для собственных нужд (квартира, дача) второстепенная скорее всего частные строители и DIY-щики (для хобби)
Коллеги, спасибо за комментарии, особенно конструктивные. Думаю нужно дать некоторые пояснения.
Этот концепт - наш внутренний эксперимент. Задача. Взять реально действующий интернет магазин, найти с нашей точки зрения проблемные места в юзабилити. Не меняя общей структуры кардинально, предложить современное дизайн-решение, которое позволит сделать сайт понятнее в плане восприятия.
Ни о какой статистики ДО и ПОСЛЕ говорить не можем (нет её и не будет), но наша точка зрения на все действия с дизайном есть в статье выше. С ней можно согласиться, можно выразить эмоциональное негодование или выступить с предложением по улучшению.
Ну как, как можно говорить об ошибках юзабилити без статистики? Вы можете не меняя ничего кардинально мелочами уронить продажи в разы.
Называйте все своими именами - задача была показать, что вы существуете, у вас есть дизайнеры и они умеют скетч.
Пффф...концепт редизайна интернет-магазина без данных статистики и нормальной аналитики пользовательского пути. Вы стреляете себе в ногу.
Хотите конструктива? Вы заплатили за PR студии, при этом взяли как кейс интернет-магазин, причем специфичного, все-таки это 220 вольт, а не магазин модной одежды, тут другая аудитория и требования. Например, зачем вы убрали юр лиц из шапки? Может у 220 на них приходится значительный объем продаж, а вы взяли и грохнули ссылку на раздел с видного места и таких вопросов вагон.
Вы хотели проиллюстрировать ваш подход в данной статье, чтобы показать, вашу экспертизу, а получилось наоборот. Изменения , которые вы делаете, это вкусовщина ваших дизайнеров. Соглашусь с комментариями про смузи-дизайн.
это же обычный шаблон.
Такое ощущение что это какая-то тендерная история, которую приткнули ради PR.
Ответственно заявляю, что это не так. Тендер на редизайн этого сайта не объявлялся(во всяком случае нам о нем известно не было).
Удивляют комментарии некоторых людей. Обычный шаблонный 10-ти летней давности шаблон дизайна вдруг стал иконой и уникальным фир стилем магазина. Сайты все похожи один на другой, плюс минус.
Про тестирование и анализ продаж это верно сказано, любое изменение и гипотезу надо проверять статистикой и показателями, в Т.ч. денежными.
Парадигма меняется, и в будущем все сайты будут воздушными и свободными.
По SEO сайт убили под корень.
Расскажите почему, очень интересно.
Комментарий удален модератором
Комментарий удален модератором
Просто ужас
Комментарий удален модератором
смуззи-дизайн
гомобородачи
*saved to dictionary
Комментарий удален модератором
Комментарий удален модератором
Комментарий удален модератором
Раз! И нет новостей на главной, раз, и не видно категорий на первом экране. Почему? хз, так захотелось
Комментарий удален модератором
Комментарий удален модератором
Пролистал статью, редизайн на первый взгляд понравился и по картинкам и по описанию. После прочтения комментариев решил посмотреть что вообще к чему там.
Открыл действующий сайт (впервые) и могу сказать, что он более чем адекватный и актуальный. Выглядит прилично (хотя фон под дерево, мне явно не нравится), удобный, понятный. Особенно классно, что категории не скрыты.
Да, конечно стоит немного "причесать", ибо некоторые элементы слишком халтурно встроены, смешанно расставлены и можно от некоторых кнопок избавится. Но в целом действующий сайт достойный.
Неожиданно приятно что улучшая визуально не сломали структуру и навигацию как это обычно бывает в рунете. Молодцы.
Хороший чистый редизайн. Однако решение с каталогом на главной сомнительное - уверен что через него идёт очень большой поток посетителей. В общем-то там можно нормально сделать, чтобы он всегда висел на главной