Задача:
Результат:
Переработкой интерфейса и дизайна удалось не только увеличить число продаж интернет-магазина — число отказов на сайте упало на 60%(!), но сделать сайт более интересным для потенциальных клиентов — время пребывания на сайте увеличилось на 34%, а глубина просмотра на 22%.
![Ключевой экран любого интернет-магазина — каталог товаров: идеальный баланс между возможностями поиска и информацией по каждому товару](https://userhouse.ru/i/project/result/images/Market_Krasok_result_1_uh.jpg)
Ключевой экран любого интернет-магазина — каталог товаров: идеальный баланс между возможностями поиска и информацией по каждому товару
![Страница товара — пример филигранной работы по упорядочиванию большого объема информации и расставлении акцентов — о товаре сказано очень много, при этом страница не выглядит перегруженной и легко читается](https://userhouse.ru/i/project/result/images/Market_Krasok_result2_2_uh.jpg)
Страница товара — пример филигранной работы по упорядочиванию большого объема информации и расставлении акцентов — о товаре сказано очень много, при этом страница не выглядит перегруженной и легко читается
![Оформление заказа продолжает заложенную концепцию «чисто, просто и понятно»](https://userhouse.ru/i/project/result/images/Market_Krasok_result_3_uh.jpg)
Оформление заказа продолжает заложенную концепцию «чисто, просто и понятно»
Процесс:
Были выделены те параметры сортировки, которые помогут покупателю подобрать наиболее подходящую краску: популярность, цена за литр, примерная цена за квадратный метр, и укрывистость — важный параметр, который описывает, сколько краски необходимо для полного закрашивания поверхности. Чем выше укрывистость, тем меньше расход краски.
![](/i/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82_%D0%BA%D1%80%D0%B0%D1%81%D0%BE%D0%BA/2.png)
Карточка товара, несмотря на свою компактность, содержит много полезной информации: цену в интернете и в магазине (для того, чтобы покупатель оценил выгоду онлайн-покупок), цену за популярный объем и за литр краски, возможность ознакомиться с ценой за краску в другой таре и приобрести ее по более низкой цене за литр.
Кроме того, по умолчанию отображаются два важных параметра: тип краски и ее светоотражающая способность. В некоторых случаях покупателю может потребоваться ознакомиться с более подробной информацией о краске для того, чтобы сделать выбор. Тогда он может развернуть описание и увидеть подробные свойства каждой краски в каталоге, и этом ему не придется для этого переходить на страницу каждого товара:
![](/i/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82_%D0%BA%D1%80%D0%B0%D1%81%D0%BE%D0%BA/3.png)
Для удобства пользования фильтром, выбранные параметры фильтра дублируются сверху от каталога со списком подходящих под условия фильтра товаров:
![](/i/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82_%D0%BA%D1%80%D0%B0%D1%81%D0%BE%D0%BA/4.png)
В предыдущей версии сайта каждый объем одной и той же краски был представлен отдельным товаром в каталоге, что засоряло каталог большим количеством дублирующей информации и затрудняло выбор нужного объема. Мы сделали удобные переключатели объема, доступные как на карточке товара в каталоге, так и на странице товара. Доступны ссылки на дополнительные сервисы, которые могут пригодиться покупателям: расчет необходимого количества краски на площадь и подбор цвета краски. Пиктограммами выделены основные свойства краски, есть функция заказа в 1 клик и информация о доставке, которая меняется в зависимости от времени, в которое покупатель попал на страницу:
![](/i/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82_%D0%BA%D1%80%D0%B0%D1%81%D0%BE%D0%BA/5.png)
На сайте продаются не только краски, но и материалы с фиксированным набором цветов, для этого предусмотрен отдельный элемент выбора цвета из списка, который позволяет увидеть цену за любой цвет и объем, и выбрать подходящий продукт.
![](/i/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82_%D0%BA%D1%80%D0%B0%D1%81%D0%BE%D0%BA/6.png)
Для начала оформления заказа необходимо ввести e-mail, чтобы иметь возможность напоминать покупателю о брошенной корзине в случае, если он не заполнит все необходимые поля на следующем шаге. Ели не хочется ничего вводить — можно нажать «оформить заказ по телефону» и дождаться звонка оператора.
![](/i/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82_%D0%BA%D1%80%D0%B0%D1%81%D0%BE%D0%BA/7.png)
Если пользователь не авторизован, но уже покупал на сайте, то после ввода e-mail ему показывается привественное сообщение с предложением войти в систему, либо оформить заказ по телефону, если он забыл пароль и ему не хочется его восстановливать. В этом случае заказ оформит оператор, с учетом возможных скидок, и привяжет заказ к профилю клиента.
Поделиться в соцсетях
Другие проекты по проектированию интерфейсов
![Mail.ru Group](https://userhouse.ru/i/client/logos/_Mail_2_hr.png)
![Ultima](https://userhouse.ru/i/client/logos/_Ultima_2_hr.png)
![Happy Bottle](https://userhouse.ru/i/client/logos/_hb_2.png)
![Yota](https://userhouse.ru/i/client/logos/_Yota_2_hr.png)
![Forex Club](https://userhouse.ru/i/client/logos/_ForexClub_2_hr.png)
![ILP Agency](https://userhouse.ru/i/client/logos/_ILP_2_1_hr.png)
![VVP Group](https://userhouse.ru/i/client/logos/_VVP_2_1_hr.png)
![ТрансКонтейнер](https://userhouse.ru/i/client/logos/_TK_2_hr.png)
![Резонит](https://userhouse.ru/i/client/logos/_Rezonit_2_hr1.png)