Первое впечатление второй раз произвести невозможно. А на чём оно обычно основывается? Конечно, на внешнем виде объекта, в нашем случае — сайта. Только после оценки качества веб-ресурса с точки зрения дизайна пользователь обратит внимание на функциональность и ассортимент.
Как правильно оформить интернет-магазин, чтобы он с первых мгновений убедил посетителя о необходимости сделать покупку? Подробности в нашей статье.
Содержание:
- Главные правила оформления сайта
- Дизайн и юзабилити
- Каким должен быть дизайн интернет-магазина
- Выводы
Главные правила оформления сайта
1. Пропорции и зонирование
Два классические правила в изобразительном искусстве — Правило Золотого сечения и Правило третей — работают и при оформлении страниц веб-ресурса.
Правило Золотого сечения имеет прямое отношение к числовым рядам Фибоначчи, в которых каждое следующее число равно сумме двух предыдущих. Соотношение витков спирали Золотого сечения считается по той же формуле. Сохраняя это соотношение при размещении элементов на странице сайта, можно добиться идеального для восприятия мозгом человека баланса заполнения.
Правило третей предписывает разделять видимую область на 9 равных блоков — по 3 блока в 3 рядах. Расположенные на пересечении разделяющих блоки линий элементы человеческий глаз замечает в первую очередь и выделяет среди остального пространства.
2. Цвета
Цвета не должны раздражать, но при этом выделяться относительно фона. Кроме того, цветовое оформление обязательно должно ассоциироваться с:
- брендовыми цветами компании;
- особенностями продукции;
- предпочтениями целевой аудитории.
Так, было бы странным использовать розовые и лазурные оттенки в оформлении интернет-магазина автомобильных шин.
Кое-что нужно знать и про количество цветов для дизайна интернет-магазина и другого типа сайтов. Лучше использовать не более 3-х основных цветов, иначе информацию сложно воспринимать. При этом эти цвета можно сочетать и использовать их оттенки.
3. Высокое качество изображений
Фотографии, инфографика и другие графические объекты требуют особого внимания. Относительно их важно соблюдать несколько правил:
- высокое качество: чёткость линий, цветопередача, баланс цвета — всё должно быть на высоте;
- оптимизация размера файла — минимальный возможный вес при сохранении высокого качества изображения;
- тематическое соответствие с миссией и продукцией компании;
- логическая оправданность: не нужно загружать страницы картинками не по теме;
- уникальность.
Не рекомендуется публиковать на сайте изображения с других сайтов, поскольку они могут быть защищены авторским правом. Если нет возможности самостоятельно организовывать фотосессию товаров, можно обратиться к производителю или поставщику. Обычно они готовы предоставить необходимые медиа-материалы для публикации. Для создания баннеров и картинок в статьях допустимо использовать бесплатные и платные фотостоки.
4. Анимация и интерактив
Как оформить сайт интернет-магазина так, чтобы максимально эффективно влиять на внимание и выбор пользователей? Во многих случаях справиться с этой задачей помогает анимация и интерактивные элементы. Главные требования к ней:
- качество — изображения и текст должны хорошо читаться и выделяться, цвета не раздражать;
- полезность — информация должна цеплять пользователей, быть интересна и давать какие-то преимущества;
- актуальность;
- понятная логика размещения;
- простота для пользователей — от каждой промежуточной цели посетителя должен отделять 1 клик;
- дозированность — чрезмерное количество анимационных и интерактивных элементов отвлекает и мешает, а также выглядит дёшево.
Подвижные элементы страницы привлекают внимание, если их немного — не более 1-2. С их помощью можно выстроить целевой путь, который при правильном подходе будут проходить посетители сайта.
5. Брендирование
Лучший ответ на вопрос о том, как оформить сайт интернет-магазина или другой веб-ресурс, чтобы повысить степень доверия пользователей — создать территорию собственного бренда.
Единый стиль страниц, корпоративные цвета и шрифты, логотип и наличие иной атрибутики, связанной с продавцов, вызывают больше доверия. Постоянный отсыл к компании, в том числе с помощью дизайнерских решений, выглядит как авторская подпись. Это успокаивает и вселяет большую уверенность в честности, серьёзности, профессионализме и ответственности владельцев проекта.
Дизайн и юзабилити
Эти две составляющие сайта настолько тесно переплетаются, что их часто невозможно отделить друг от друга. Дизайн не просто должен работать на улучшение юзабилити, он, по сути, является его неотъемлемой частью. Поэтому говоря о качестве дизайна, мы, в первую очередь, подразумеваем удобство пользователя, и лишь потом — эстетику.
Ценность концепции UI-дизайна состоит как раз в том, что она предполагает реализацию эргономичности пользовательского интерфейса с помощью визуализации. Сюда входят не только чисто художественные инструменты, но и:
- понятная структура сайта,
- логичное выстраивание последовательности действий пользователей для совершения какого-либо действия или достижения определённой цели,
- удобное расположение элементов страницы — форм, различных блоков данных и т. д.;
- соответствие дизайна и функциональности элементов и проч.
Кроме непосредственно дизайнерских решений, для повышения комфорта пользователя тщательно настраивается навигация, используются теги, поиск, фильтрация, сортировка и другие инструменты.
Каким должен быть дизайн интернет-магазина
В сайте интернет-магазина всё должно быть не столько прекрасным, сколько продающим. Эту главную задачу призван решать и дизайн. Он, среди прочего, также является инструментом продаж и, при грамотном подходе, весьма эффективным. Разберём основные типы страниц коммерческого веб-ресурса и нюансы их оформления.
Главная страница
Стартовая страница «главная» не только по названию, но и по существу. Именно попав на эту страницу, пользователь принимает решение, стоит ему продолжать знакомство с предложением или нет. Цена ошибок при оформлении главной страницы — закрытое окно и уход потенциального клиента к конкурентам.
Основные требования к наполнению:
- стандартное расположение элементов (например, меню в шапке или в закрепленной левой панели), позволяющее пользователю быстро сориентироваться и сразу найти навигационные кнопки;
- возможность мгновенного перехода на главную из любой страницы сайта с помощью клика на лого, которое всегда на виду;
- главное предложение — УТП, акционный баннер, рекламный слайдер — необходимо располагать в верхней части страницы по центру, на самом видном месте;
- ссылка на раздел «Контакты» и кнопки связи с менеджерами всегда должны быть перед глазами и доступны из любой точки сайта;
- ссылка на раздел «О компании» должна занимать одно из первых мест в меню и быть на виду;
- витрина (продающий блок) занимает центр страницы и демонстрирует разделы, популярные товары или основные акции магазина.
Главная страница должна быть выдержана в стиле, который импонирует целевой аудитории магазина. Это касается оформления сайта в целом, но для стартовой страницы является необходимым требованием.
Нет необходимости делать из главной многофункциональную страницу. Она, как обложка книги или журнала, должна с первой секунды привлекать внимание, интересовать отдельными элементами и давать понять, что всё самое интересное для пользователя находится на страницах данного сайта.
Карточки товаров
Страницы, посвящённые отдельно взятым товарам и содержащие их изображение, описание, другую информацию, помогающую посетителям сделать единственно правильный выбор.
Ключевые элементы:
- иллюстрации — фотографии с разных ракурсов, схемы, графики — в достаточном количестве, качественные, позволяющие рассмотреть предмет максимально подробно;
- видео (обзоры, инструкции) — в хорошем качестве, но оптимизированные по размеру;
- текстовый блок с описанием лучше расположить под медиа-объектами:
- подробные общие характеристики продукции (описание размеров, состав, функциональность) лучше всего оформить в виде списка;
- описательный текст рекомендуется размещать под списком характеристик;
- цена — заметная и понятная;
- кнопка «Купить» располагается на видном месте, её назначение понятно — пользователь должен иметь возможность найти её и произвести целевое действие в любой момент.
Информация в карточках товаров не должна вызывать никаких вопросов. Её наполнение должно снимать возражения, для этого нужны и подробное описание, и числовые данные, и достойная визуализация.
Корзина
Финишная прямая при оформлении заказа должна снимать все сомнения перед выполнением главного действия посетителя интернет-магазина.
Нюансы дизайна корзины:
- кнопка перехода в корзину:
- располагается там, где пользователь будет искать её в первую очередь — обычно правый верхний угол каждой страницы;
- по внешнему виду не вызывает сомнений, что это переход в корзину — обычно выглядит как корзинка в магазинах, тележка или пакет для товаров;
- отображает количество положенных в корзину позиций на текущий момент и/или их общую стоимость;
- страница «Корзина»:
- видны наименование, количество, цена и стоимость всех выбранных товаров;
- имеется уменьшенное фото приобретаемой продукции;
- ссылки на страницу выбранных товаров по их названию и фото;
- полная информация об общей стоимости заказа, включая доставку и иные возможные нюансы.
У пользователя будет больше желания кликнуть по кнопке «Оформить», если перед этим у него не останется никаких вопросов и сомнений.
Кнопки действий (call-to-action)
Правильно оформленные и расположенные активные кнопки мотивируют к совершению целевого действия.
Нюансы оформления:
- расположение на видном, удобном и привычном месте;
- размер — кнопка должна быть заметна, но при этом не перекрывать другие элементы страницы, а являться её неотъемлемой частью;
- цвет — чёткое выделяется на фоне, при этом не выпадает из общей стилистики сайта;
- понятное назначение, для чего могут быть использованы специальные символы или иконки (трубка, корзина, магазинная тележка и т. д.);
- текст — указание на назначение кнопки или мотивирующий призыв — крупный и понятный, не вызывающий вопросов.
Выводы
Создавая дизайн своего интернет-магазина, важно понимать, что он является инструментом продаж. Его задача — не удивить или поразить, а привлечь, повысить степень доверия, снять возражения и убедить в совершении главного целевого действия — покупки.
При оформлении сайта используйте знание собственной целевой аудитории, проверенные художественные и маркетинговые приёмы, а также современные тенденции в IT. Всё это позволит пользователям совершать покупки с комфортом.
