[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "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", "tablet" ], "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", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "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-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Vladislava Rakhmanova", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 40, "likes": 27, "favorites": 19, "is_advertisement": false, "section_name": "default", "id": "25425" }
Vladislava Rakhmanova
6 726

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

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

Поделиться

В избранное

В избранном

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наш вариант

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

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

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

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

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

Адаптив

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

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

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

#Интерфейсы

Статьи по теме
«Это провал»
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления