Вот что редизайн животворящий делает!

Суть

Проанализировав статистику расходов на рекламу и уровень конверсии двух разработанных нами сайтов с приблизительно одинаковым товарным рядом заметили интересную особенность: на сайте с более современным дизайном уровень конверсии был примерно в полтора раза выше, чем на втором со староватым дизайном, но большим возрастом и большей посещаемостью! Клиент не пожалел денег и заказал нашей компании обновление дизайна (он же "редизайн"). Благо, на нашем движке редизайн является делом техники, никакой потери информации (как то потеря ссылочной ЧПУ-массы, характеристик товаров или фотографий) произойти не может.

Как мы решали задачу

Мы подошли к вопросу с двух сторон: творческой и практической. С одной стороны, было принято решение сделать максимально "незагромождённый" дизайн, с другой стороны, решено было использовать всё богатство доступных в нашем движке функций, как то аналоги товаров, новинки, акции и т.п.
Хочется немного подробнее обсудить принятые на проекте визуальные решения.
К нашему сожалению, несмотря на то, что технологии идут вперёд, устройства отображения стремятся не только к максимализации чёткости отображения и увеличению разрешения экранов, но также и к миниатюризации самих устройств. Также клиент стремился сохранить "атмосферу" существующего сайта, цветовую палитру, размещение некоторых блоков. Потому было принято решение сохранить фиксированный дизайн для разрешения 1024х768, которое подходит нетбукам и планшетам, что несколько сузило полёт нашей фантазии.
Формат главного меню решено было использовать горизонтальный, не столько потому, что это "самое лучшее решение" (с этой трактовкой мы не согласны, и amazon с ebay'ем тому яркое подтверждение), но оно удовлетворяет объёму наполнения категориями современных интернет-магазинов, и, что намного более важно, такой формат меню сейчас принят в большинстве украинских магазинов, а это добавляет клиентам лёгкости в восприятии информации и её поиске, к чему мы, собственно, и стремимся.
Высота подпунктов главного меню автоматически подбирается в зависимости от высоты окна браузера, это значит, что на большом мониторе пункты меню будут разнесены с большими интервалами, что позволяет придать некоторое ощущение свободного пространства, "воздуха" в дизайне. Но если Вы используете портативное устройство, и высота окна браузера будет ограничена, то подпункты разместятся более компактно и всё поместится на вашем устройстве.
Вся вспомогательная (телефоны, баннеры, подсказки) и управляющая (фильтры) информация была размещена в одном левом столбце. Это позволило максимально эффективно использовать основную информационную зону сайта под "плиточное" заполнение каталога товаров и оставить такой вариант заполнения основным. Так помещается одновременно большее количество товаров (24) и при этом не "торчит" узкий столбец самой важной информации, как это происходит, например, на Розетке со "списочным" представлением каталога по-умолчанию и 16ю товарами в длинной "колбасе" по-центру.
По нашим наблюдениям, поиск по товарам конкретной товарной категории сейчас задействован крайне редко, его применяют в основном для того, чтобы найти конкретную модель. Вместо этого в категориях товаров активно используют механизм фильтров. Чтобы разместить максимально возможное количество карточек на страницу с фиксированным дизайном мы убираем всю ненужную информацию о товаре из карточки товара в каталоге.
NB! Даже показ нескольких характеристик товаров в карточках товара в каталоге несёт клиенту избыточную информацию, а особенно там не стоит показывать всякие повторяющиеся глупости вроде "доставка за пределы Киевской области осуществляется после внесения 20% предоплаты". Про доставку стоит упоминать либо в отдельном блоке доставки, либо в момент покупки, либо на отдельной странице товара, где места много, а заполнять его не всегда есть чем.
Тем не менее, если посетитель пожелает увидеть краткую сводку характеристик о товаре прямо в каталоге без перехода на страницу товара, то он легко сможет это сделать наведя мышкой на карточку конкретного товара, информация отобразится во всплывающем блоке.
Само по себе расположение фильтров в левом столбце традиционно увеличивает высоту этого столбца сверх всяких рамок приличия. Поэтому мы применили несколько подходов, чтобы минимизировать ущерб от этого решения. Во-первых, самый важный (и самый "высокий") фильтр по брэндам товаров было решено отделить от основного блока фильтров и разместить его горизонтально непосредственно над карточками товаров. Во-вторых, значения фильтров были собраны в группы фильтров и расположены в порядке убывания их важности. И наконец, группы умеют "сворачиваться" но по-умолчанию самые важные группы фильтров выводятся развёрнутыми. Эти решения позволили сделать использование фильтров максимально комфортным для посетителей.
Очень удачным оказались некоторые функции нашего движка, которым редко находилось применение в повседневной жизни, такие как полная конвертация размеров фотографий всего каталога товаров под новый дизайн из максимального размера в меньший, перегруппировка категорий товаров, и другие.
Также оказались востребованными функции учёта заказов, остатков, одношаговой регистрации и доступа в кабинет для клиентов, доступные в данной версии магазина. Это позволит провести активную интеграцию магазина с системой 1С, в которой ведётся учёт у клиента.

Немного цифр

После обновления снизился показатель отказов с 73% до 59% в период активной контекстной рекламной компании, и с 60% до 53% при отсутствии контекстной рекламы. Что удивительно, при этом практически не изменилось среднее время пребывания посетителя на сайте. Вероятно, это связано с упрощением механизма поиска товаров и повышением удобства сайта, посетитель успевает быстрее решить свою задачу.