О компании     Как оплатить?     А в кредит можно?     А привезете?     А как вас найти?     А у меня сломалось...      
 
 
Компьютерный интернет-магазин
Товаров: 0
Сумма: 0
Курс (нал): 62.00
Безнал: 64.50
(499) 700-00-40
ICQ12325772 ICQ21969923  
 
 
 
 
 
 
 
 
Trade-In

Кредит

Подарки выбери себе сам

 
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дата публикации: 26-07-2017

Ещё новости


  19.10.2022  Вышел Node.js 19.0

  27.08.2022  Процессор Qualcomm, голосовое управление, Android 11: это не смартфон, а новые очки дополненной реальности

Эта модель рассчитана на корпоративное применение. В компании Vuzix представил новую модель очков дополненной реальности Blade 2. Её также позиционируют как систему для медиков, инженеров и других специалистов,...

  26.08.2022  Один из крупнейших в мире операторов грузовых беспилотников появится в России до конца года. На первом этапе доставку грузов до 100 кг будут осуществлять 35 дронов, в следующем году - уже 65

Первые полеты беспилотников, которые будут доставлять посылки и грузы массой до 100 кг на дальние расстояния, запланированы на осень. Одна из крупнейших в мире беспилотных грузовых авиакомпаний с флотом...

  26.08.2022  Народные GeForce RTX 4060 и RTX 4060 Ti будут работать на частоте свыше 2,6 ГГц. Производительность RTX 4060 Ti окажется на уровне RTX 3080

Согласно данным информатора, старшая модель набирает около 8600 баллов, средняя частота ее GPU — около 2,6 ГГц, а потребление энергии при этом составляет 270–280 Вт. Инсайдер опубликовал результаты...

  27.08.2022  Intel, а уже не так уж и плохо. Свежий тест видеокарты Arc A380 в огромном числе игр показал, насколько серьёзны проблемы с совместимостью

Причём были взяты аж 50 игр, вышедших в период с 1999 по 2022 год. Наши коллеги с ресурса PC Games Hardware решили протестировать видеокарту Intel Arc A380, но не с точки зрения производительности, а с...



Все новости
 
 
  © 2003-2024 Ноутбуки и компьютеры
Все права защищены