Что, как, зачем, куда: принципы компоновки элементов интернет-магазина

Размещение элементов по модульной сетке

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

Пример использования модульной сетки при проектировании интерфейса интернет-магазина

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

Принцип группировки

Часто говорится, что интернет-магазин должен быть интуитивно понятен посетителям. Но как этого достичь? Один из рабочих методов упрощения восприятия сайта называется принципом группировки.

Суть — объединение схожей информации на странице в отдельные группы. Каждая группа должна логически и визуально отделяться от остальных.

Неправильная группировка на примере интернет-гипермаркета E-dostavka:

Ссылки на товарные категории слеплены в один блок с информацией о доставке. Визуально все четыре столбца выглядят абсолютно одинаково. Подзаголовок «Служба доставки» не воспринимается как маркер для выделения столбца в отдельную группу.

В этом же магазине мы можем найти пример хорошей группировки:

Подкатегории в выпадающем меню разбиты на отдельные блоки. Информация легко читается и воспринимается, благодаря логичной группировке ссылок в меню.

Еще несколько рекомендаций, которые основаны на логике и пользовательском опыте, однако также помогут грамотно скомпоновать элементы на странице:

Если товары отображаются миниатюрами, то рабочая область каталога может быть разделена сеткой, чтобы посетитель сразу понимал, где заканчивается карточка одного товара и начинается карточка другого.

Кнопку заказа звонка можно разместить рядом с номером телефона.

Длинный каталог стоит разбить на несколько общих категорий.

Статьи для SEO можно отделить от общих новостей компании.

В карточке товара можно разграничить неизменяемые характеристики товара и те, которые покупатель может выбрать самостоятельно.

Все полезное на виду

Интернет-магазины можно разделить на 3 типа.

1. Свалка

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

2. Подполье

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

3. Все полезное на виду

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

Удачный пример компоновки и реализации принципа «Все полезное на виду»:

3 правила — не умеешь, не нарушай!

1. Принцип однородности

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

Вот пример того, как внешний вид меню меняется в зависимости от страницы, на которую перешел пользователь:

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

2 Принцип мостовых перил

Очень простое правило, про которое часто забывают: защитите пользователя от тех действий, которые он не может или не должен совершить. Менее корректное название — «защита от дурака». Например, если картинка не кликабельна, она не должна выделяться как активный элемент при наведении.

Чемпион по несоблюдению этого правила — формы для заказа или оставления контактов. В наиболее удобной форме, кнопка «Отправить» вообще не будет активна до тех пор, пока пользователь не заполнит корректно все данные. Но как минимум, обязательно реализуйте верификацию e-mail и номера телефона. Иначе посетителю либо придется заполнять форму несколько раз, либо он вообще отправит неверную информацию и забудет о вашем сайте.

Пример хорошей реализации — кнопка отправки формы неактивна до тех пор, пока пользователь не заполнит все данные:

Еще один пример хорошей реализации от Яндекса:

Если пользователь вводит недоступный для регистрации логин — система автоматически об этом сообщает и предлагает альтернативные варианты.

Пример плохой реализации:

Поля формы заполнены неверно, но догадаться об этом можно, только когда нажмешь ссылку «Зарегистрироваться», а затем:

И форму нужно заполнять заново.

Сюда же относятся ситуации, когда по случайному клику вдруг открывается страница из старой версии сайта, разваливается верстка или вылетает ошибка.

Контент определяет дизайн

Нельзя проектировать сайт без понимания, что на нем будет размещено. Компоновку блоков и элементов должны определять… непосредственно блоки и элементы. Можно не знать какой именно текст будет в блоке, какое видео или таблица будет вставлена в финальную версию сайта. Но нужно знать, что на странице будет текст, видео и таблица.

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

• Компонуйте элементы модулями, как кубики лего. При необходимости их будет несложно убрать или изменить.
• Учитывайте масштабируемость. Хорошие сайты имеют тенденцию увеличиваться: обрастать новым контентом, разделами и функциями.
• Закладывайте не точные значение, а диапазоны: не 5 характеристик, а от 2 до 8, не 4 фотографии, а от 0 до 6, не 2 абзаца с описанием, а 1-4 и так далее.

В веб-дизайне нет догм и жестких правил. Несоблюдение какой-то рекомендации вовсе не означает, что сайт плох или не будет продавать.

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