Задача: создать сайт с подробным каталогом книг и возможностью оформить и забронировать заказ.

Интерфейс

«Структура сайта продумана так, будто пользователь оказывается в оффлайн магазине книг: уже на главной странице последовательность крупных блоков с популярными сейчас книгами и бестселлерами, с новинками и тематическими подборками экспертов вовлекает посетителя в процесс покупки. Первое знакомство с текущим ассортиментом сразу с главного экрана помогает освоиться на сайте и продолжить поиски нужной книги», — рассказывает Алексей Болотов, UX-аналитик проекта. 

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

Тщательная группировка по разделам в несколько ступеней позволяет сузить круг для выбора нужной книги - полезная функция для тех, кто ищет не конкретную книгу, а тематическую литературу. Фильтры, кроме типовых «цена-издательство», меняются и детализируются от категории к категории. К примеру, литература для ЕГЭ делится по предметам, а детская — по возрасту.

2. Строка поиска

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

3. Корзина

«Отложить» книгу в корзину — то есть забронировать для вывоза из ближайшего магазина — легко прямо с главной страницы сайта.

4. Подборки книг

«Тематические подборки, как и любые наборы, боксы, списки, — излюбленное решение для помощи в выборе товаров в интернет-магазине. Подобный познавательный и развлекательный формат контента ненавязчиво предлагает выбрать конкретные товары из заранее сформулированной тематики. В долгосрочной перспективе такое решение поможет сайту занимать топовые позиции в целевых запросах пользователей, которых интересуют определенные подборки литературы или сопутствующих товаров», — комментирует руководитель проекта Дмитрий Чирков.

5. Скидки

Пользователю достаточно ввести номер дисконтной карты, чтобы проверить текущий размер скидки. Также в разделе «Дисконтная карта» можно узнать о способах получения карты лояльности. Один из них — установка мобильного приложения магазина, которое после регистрации предоставляет виртуальную скидку.

6. Отзывы

В карточке товара пользователи оставляют и читают отзывы — понятная еще со школы система от 1 до 5 и краткий комментарий помогут сориентироваться при выборе между несколькими аналогичными книгами.

1. Цвета

За основу цветового решения взят насыщенный фирменный синий, который мы использовали для контрастного выделения целевых кнопок и разделов. 

2. Разделы товаров

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

3. Разделы сайта

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