Оффтоп Vladislava Rakhmanova
6 974

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

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

В закладки

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

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

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

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

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

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

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

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

Старый вариант
Наш вариант

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

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

Старый вариант
Наш вариант

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

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

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

Старый вариант
Наш вариант

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

Старый вариант
Наш вариант

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

Старый вариант
Наш вариант

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

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

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

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

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

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

Старый вариант
Наш вариант

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

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

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

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

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

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

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

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

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

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

Старый вариант
Наш вариант

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

Старый вариант
Наш вариант

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

Наш вариант

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

Старый вариант
Наш вариант

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

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

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

Адаптив

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

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

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

#Интерфейсы

Статьи по теме
«Это провал»
{ "author_name": "Vladislava Rakhmanova", "author_type": "editor", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 32, "likes": 27, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 25425, "is_wide": false, "is_ugc": false, "date": "Wed, 26 Jul 2017 14:00:43 +0300" }
{ "id": 25425, "author_id": 75278, "diff_limit": 1000, "urls": {"diff":"\/comments\/25425\/get","add":"\/comments\/25425\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/25425"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

32 комментария 32 комм.

Популярные

По порядку

Написать комментарий...
23

Лол, Сразу понятно что ребята не думаю ни о продажах ни о Seo ни о функциональности, лепят дизайн ради дизайна)))

Ответить
0

Почему?

Ответить
4

Потому что шапка потеряла информативность важных элементов, потому что главная потеряла важные элементы, потому что после фразы - "Много места занимали минорные элементы" хочется начать рыдать...
Самая большая проблема этих людей в том что они думают что правы, но правы скорее всего владельцы магазина, которые с помощью не сильно модного дизайна добились чтобы сайт приносил деньги, и это главное для любого интернет магазина!
Ну и пусть вспомнят слова Джони Айва - "дизайн это не про то как мы смотрим на что то, а про то как мы этим пользуемся".

Ответить
0

Даниил, говорите про сэо, а у самого сайт без адаптива:thinking:

Ответить
1

Сергей, и что?

Ответить
16

И что толку от этого я не пойму? Как-то продажи увеличились? Вы реально из продукта, который имеет свой стиль и коммуникацию сделали безликое массовое решение. Я перестал читать обоснования действий со слов "шапка перегружена". Бл, это Ваше личное мнение. В шапке все стоит как надо и она имеет куда больше важных особенностей для взаимодействия с клиентом чем Ваше "свободное" решение. Вместо того чтобы просто освежить визуализацию некоторых элементов, Вы, по своему личному мнению, бахнули все глобально. Это звездец. И еще не факт что не станет хуже после всех Ваших реально спорных нововведений.

Ответить
4

Абсолютно согласен с тем, что из продукта с узнаваемым собственным стилем сделали типичный интернет-магазин на Битриксе. Отдельно доставило урезание размеров логотипа в шапке.

Ответить
13

Забыли написать на сколько упали конверсия и продажи.

Ответить
10

Стало хуже.
Был нормальный дизайн с кучей функций.
Стало больше гребаного смузи-пустого пространства и ничерта не добавилось полезного.

Ответить
4

"смузи-пустого пространства" хорошо сказано)

Ответить
6

А каталог вообще куда дели?
Это не редизайн, это суходрочка.

Ответить
5

Надо статистику показывать до/после редизайна. А то многих пользователей отпугивает "современное" оформление в виде лендосов.

Ответить
5

В деталях не смотрел, но сразу видно, в общих чертах старый дизайн был более ярким и запоминающимся. А превратился в обычного клона.

Ответить
4

В целом неплохо, но все равно как-то слишком флэтого и современно стало для целевой аудитории данного сайта. Согласен, что шапка и подвал какими-то безликими стали. Вообщем А/Б тест в студию, уверен категорию людей 40+ такое решение по началу отпугнёт, более молодые может и не увидят разницы

Ответить
0

целевой аудитории данного сайта

Кто по вашему целевая аудитория этого сайта?

Ответить
0

по логике, основная ЦА это семейные мужчины 35-45 лет со средним достатком, приобретают для собственных нужд (квартира, дача) второстепенная скорее всего частные строители и DIY-щики (для хобби)

Ответить
1

Коллеги, спасибо за комментарии, особенно конструктивные. Думаю нужно дать некоторые пояснения.

Этот концепт - наш внутренний эксперимент. Задача. Взять реально действующий интернет магазин, найти с нашей точки зрения проблемные места в юзабилити. Не меняя общей структуры кардинально, предложить современное дизайн-решение, которое позволит сделать сайт понятнее в плане восприятия.

Ни о какой статистики ДО и ПОСЛЕ говорить не можем (нет её и не будет), но наша точка зрения на все действия с дизайном есть в статье выше. С ней можно согласиться, можно выразить эмоциональное негодование или выступить с предложением по улучшению.

Ответить
5

Ну как, как можно говорить об ошибках юзабилити без статистики? Вы можете не меняя ничего кардинально мелочами уронить продажи в разы.

Называйте все своими именами - задача была показать, что вы существуете, у вас есть дизайнеры и они умеют скетч.

Ответить
3

Пффф...концепт редизайна интернет-магазина без данных статистики и нормальной аналитики пользовательского пути. Вы стреляете себе в ногу.

Хотите конструктива? Вы заплатили за PR студии, при этом взяли как кейс интернет-магазин, причем специфичного, все-таки это 220 вольт, а не магазин модной одежды, тут другая аудитория и требования. Например, зачем вы убрали юр лиц из шапки? Может у 220 на них приходится значительный объем продаж, а вы взяли и грохнули ссылку на раздел с видного места и таких вопросов вагон.

Вы хотели проиллюстрировать ваш подход в данной статье, чтобы показать, вашу экспертизу, а получилось наоборот. Изменения , которые вы делаете, это вкусовщина ваших дизайнеров. Соглашусь с комментариями про смузи-дизайн.

Ответить
3

это же обычный шаблон.

Ответить
2

Такое ощущение что это какая-то тендерная история, которую приткнули ради PR.

Ответить
1

Ответственно заявляю, что это не так. Тендер на редизайн этого сайта не объявлялся(во всяком случае нам о нем известно не было).

Ответить
2

Удивляют комментарии некоторых людей. Обычный шаблонный 10-ти летней давности шаблон дизайна вдруг стал иконой и уникальным фир стилем магазина. Сайты все похожи один на другой, плюс минус.

Про тестирование и анализ продаж это верно сказано, любое изменение и гипотезу надо проверять статистикой и показателями, в Т.ч. денежными.

Парадигма меняется, и в будущем все сайты будут воздушными и свободными.

Ответить
2

По SEO сайт убили под корень.

Ответить
0

Расскажите почему, очень интересно.

Ответить

Комментарий удален

Комментарий удален

1

Просто ужас

Ответить

Комментарий удален

1

смуззи-дизайн
гомобородачи
*saved to dictionary

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

0

Раз! И нет новостей на главной, раз, и не видно категорий на первом экране. Почему? хз, так захотелось

Ответить

Комментарий удален

Комментарий удален

–1

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

Открыл действующий сайт (впервые) и могу сказать, что он более чем адекватный и актуальный. Выглядит прилично (хотя фон под дерево, мне явно не нравится), удобный, понятный. Особенно классно, что категории не скрыты.

Да, конечно стоит немного "причесать", ибо некоторые элементы слишком халтурно встроены, смешанно расставлены и можно от некоторых кнопок избавится. Но в целом действующий сайт достойный.

Ответить
–1

Неожиданно приятно что улучшая визуально не сломали структуру и навигацию как это обычно бывает в рунете. Молодцы.

Ответить
–3

Хороший чистый редизайн. Однако решение с каталогом на главной сомнительное - уверен что через него идёт очень большой поток посетителей. В общем-то там можно нормально сделать, чтобы он всегда висел на главной

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления