Главная страница

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

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

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


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

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

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

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

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

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

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

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


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


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


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


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


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


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

1. Свалка

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

2. Подполье

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

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


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

printsip vse poleznoe na vidu.png
Удачный пример реализации принципа «Все полезное на виду»

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

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

Одинаковые элементы должны быть оформлены одинаково на всех страницах сайта. Самые простые примеры — заголовки, хлебные крошки, формы, карточки товаров одной категории.
Вот пример того, как внешний вид меню меняется в зависимости от страницы, на которую перешел пользователь:
printsip odnorodnosti.png
printsip odnorodnosti1.png
printsip odnorodnosti2.png
Прикладного смысла в этом нет — неожиданная и ничем не оправданная смена дизайна только сбивает пользователя при переходе на другую страницу сайта.

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

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

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

Пример хорошей реализации — кнопка отправки формы неактивна до тех пор, пока пользователь не заполнит все данные:knopka otpravki formyi.png
Еще один пример хорошей реализации от Яндекса:printsip mostovyih peril.png
Если пользователь вводит недоступный для регистрации логин — система автоматически об этом сообщает и предлагает альтернативные варианты.

Пример плохой реализации:printsip mostovyih peril1.png
Поля формы заполнены неверно, но догадаться об этом можно, только когда нажмешь ссылку «Зарегистрироваться». Затем —oshibka registratsii.png
И форму нужно заполнять заново.
Сюда же относятся ситуации, когда по случайному клику вдруг открывается страница из старой версии сайта, разваливается верстка или вылетает ошибка.

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


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

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

  • Учитывайте масштабируемость. Хорошие сайты имеют тенденцию увеличиваться: обрастать новым контентом, разделами и функциями.

  • Закладывайте не точные значение, а диапазоны: не 5 характеристик, а от 2 до 8, не 4 фотографии, а от 0 до 6, не 2 абзаца с описанием, а 1-4 и так далее.
komponovka internet-magazina.png
В веб-дизайне нет догм и жестких правил. Несоблюдение какой-то рекомендации вовсе не означает, что сайт плох или не будет продавать.

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

Подпишитесь на обновления, чтобы быть в курсе!

Оцените статью:

( 9 оценок, средняя: 3.86 из 5 )

Новые кейсы и лайфхаки еще впереди. Подпишитесь на обновления, и узнавайте все первыми. Это бесплатно!

Адрес подписки уже существует. Пожалуйста укажите другой адрес.

Указать другой

На ваш почтовый адрес отправлено письмо для подтверждения подписки.

Если вы ещё не являетесь пользователем AskUsers,
но хотите улучшить свой сайт, то просто зарегистрируйтесь.

Хочу попробовать