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

Смотрите в каталоге
Электроника

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

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

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

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

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

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

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

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

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

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

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

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

  • Если товары отображаются миниатюрами, то рабочая область каталога может быть разделена сеткой, чтобы посетитель сразу понимал, где заканчивается карточка одного товара и начинается карточка другого;
  • Кнопку заказа звонка можно разместить рядом с номером телефона;
  • Длинный каталог стоит разбить на несколько общих категорий;
  • Статьи для SEO можно отделить от общих новостей компании;
  • В карточке товара можно разграничить неизменяемые характеристики товара и те, которые покупатель может выбрать самостоятельно.

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

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

1. Свалка

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

2. Подполье

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Компании и сервисы: Media Markt, Техносила, AskUsers
Автор: Денис Нарижный

Подписаться на новости

Читайте также

27 ноября 2017 / Комментарии

Как Customer Experience изменил бизнес-процессы маркетплейса Goods

В результате нескольких месяцев проектирования «М.Видео» пришлось скорректировать бизнес-процессы под Customer Experience, другими словами, чтобы платформа стала удобнее для покупателя. Попробуем разобраться почему.

далее →

16 ноября 2017 / Комментарии

И еще 11 мифов юзабилити

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

далее →

19 октября 2017 / Комментарии

4 вопроса о поиске в интернет-магазине, ответы на которые меняют всё

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

далее →

12 июля 2017 / Комментарии

Пять объединяющих особенностей тысячи самых успешных посадочных страниц современности

Crayon, разведплатформа для маркетологов, отслеживает тысячи сайтов и страниц различных компаний, работающих на локальных и глобальных рынках. Особое внимание специалисты Crayon уделяют посадочным страницам, которых в современном вебе великое множество. Проанализировав 1000 самых успешных лендингов последнего времени, они выделили 5 особенностей, которые объединяют эти посадочные страницы и, вероятно, в немалой степени способствуют их высокой эффективности.

далее →

25 мая 2017 / Комментарии

Когнитивные особенности проектирования интерфейсов

Расположенные рядом объекты воспринимаются пользователем как связанные — именно так звучит теория близости. Наряду с другими поведенческими паттернами этот принцип позволяет проектировать удобные, понятные и логичные интерфейсы.
Эксперты сервиса AskUsers разобрались, что это значит, как работает и каким образом скомпоновать элементы интерфейса так, чтобы они соответствовали принципам теории.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook