20.01.2019 12:26

Презентация современного дизайна интернет магазина

Презентация современного дизайна интернет магазина

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

Открытая галерея фотографий товара

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

Быстрый просмотр

Модальные окна

Модальные (всплывающие) окна позволяют получить быстрый доступ к информации без перехода на другую страницу. Помимо стандартной всплывающей галереи изображений товара в модальном окне открывается корзина (достаточно положить туда товар), блок авторизации на сайте и самое главное - блок просмотра товара. Теперь просматривать товары после применения фильтрации стало еще удобнее - в списке отфильтрованных товаров кликните по быстрому просмотру (иконка глаза), и в появившемся окне появится вся информация о товаре и кнопки перехода к следующему/предыдущему товару.

Быстрый просмотр

Наличие комплектаций (вариантов) товара

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

Быстрый просмотр

Текст на баннерах

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

Быстрый просмотр

Варианты вывода изображений категорий

В дизайне есть два варианта вывода изображений категорий товаров:

  1. Современный. Фото заполняет всю область блока категорий. Для этого варианта нужны фото без белого фона или окаймления.
  2. Классический. Если фото категорий выполнены в стиле иконки и имеют белый фон. В этом случае изображение не должно обрезаться и выходить за рамки блока.

Установить это можно в настройках темы. На демонстрации на главной странице у категории "Archos" изображение в виде иконки. После изменения настроек оно не обрезается.

Быстрый просмотр

Компактный список товаров

Чтобы не заставлять клиента скролить страницу мы используем компактный вид товаров блоками, на котором элементы взаимодействия с товаром появляются только при наведении на товар. Это позволило уменьшить высоту товара почти на 30% и позволило разгрузить интерфейс от лишних элементов. Рейтинг и ссылка на отзывы выводятся только когда они есть у товара. Также в зависимости от самого длинного названия товара блоки автоматически расширяются, сохраняя выравнивание.

Быстрый просмотр

Подгрузка товаров Lazy loading

Это динамическая подгрузка товаров на странице категорий, которая может работать в двух режимах: автоматическом (подгружает товары при прокрутке вниз, активен по умолчанию) и полуавтоматическом (для показа нужно кликнуть на кнопку "Показать еще").

Быстрый просмотр

Мобильная версия

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

Быстрый просмотр

Общие наработки

  • При прокрутке вниз происходит фиксация меню (при наличии свободного пространства), что дает быстрый доступ к самым важным элементам - каталогу, поиску и кнопкам личного кабинета, сравнения, избранного и корзины. Функция отключается в настройках на случай большого количества основных категорий;
  • Возможность растянуть сайт на всю ширину в настройках темы;
  • Добавлена возможность указывать мини-иконки категорий для меню (см. инструкцию);
  • Для "захвата" неопытного пользователя при клике по корзине появляется модальное окно корзины с предложением оформить заказ либо продолжить покупки;
  • Возможность изменения контактов в шапке и футере через настройки темы (см. инструкцию ниже). Номер телефона выводится если у вас отсутствует модуль филиалов или данные филиалов не заполнены;

Страница категории товаров

  • Добавлена возможность быстрого просмотра товара в модальном окне без перехода на страницу товара (иконка глаза в правом верхнем углу). Это позволяет избежать сброс настроек фильтра товаров;
  • При прокрутке вниз происходит фиксация фильтров;
  • Добавлена возможность вывода фото для подкатегорий, смотрите категорию "Электроника" на демо (при отсутствии выводится только текст);
  • Рейтинг и количество комментариев отображаются только когда они есть у товара;
  • Дополнительный вид блоков товаров - краткий список без изображений (Можно отключить в настройках темы);
  • Вид списка товаров изменяется без перезагрузки страницы;
  • При отображении блоков товаров в виде списка выводится начало описания если краткое отсутствует (его редко заполняют);
  • Для повышения компактности блоков товаров иконки действий (в корзину, в избранное и т.п.) появляются только при наведении на блок товара. На маленьких устройствах иконки видны всегда;

Страница товара

  • Расширена микроразметка товаров;
  • Добавлена возможность выбрать область для вывода характеристик: в отдельной вкладке (по умолчанию, но это нужно только когда есть очень длинное описание), перед описанием, после описания и справа от фото товара (под названием);
  • На мобильных устройствах кнопки "Купить" и "Купить в один клик" фиксируются в нижней части и всегда доступны.