logo
logo_text
mail
arrow Назад

Всё, что нужно знать о дизайне e-commerce в 2021. Часть 2. Как сделать удобно пользователю и управлять его вниманием.

Это вторая часть большой телеги про дизайн интернет-магазинов от STIK Pro. В первой мы говорили о роли дизайна. В этой расскажем о том, куда будут смотреть пользователи и какие дизайнерские приёмы применить, чтобы они смотрели туда, куда вам нужно. 
Как сделать хорошо 

Как в идеале работает дизайн — рассказывали в предыдущей статье. Этот раздел поможет точнее представить идеал и подскажет, как его достичь (ну или хотя бы приблизиться). 
Не проиграть битву за первое впечатление

Бизнесу дизайн нужен, чтобы показать продукт, пользователю — чтобы составить об этом продукте впечатление. В половине случаев оно формируется именно благодаря дизайну. И происходит это за полсекунды: ровно столько времени есть у сайта, чтобы понравиться пользователю или оттолкнуть его. В 2012 Google подтвердил это число, добавив, что некоторые аспекты люди оценивают за 17 миллисекунд. Юикс юиксом, а привлекательность визуала недооценивать нельзя.

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

«Непривлекательный сайт, несмотря на высокое юзабилити, не привлекает интереса пользователей и даёт низкую удовлетворенность».
— Барбара Чапарро, доктор психологии, профессор

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

Вывод очевиден: угодить пользователю дизайном — единственный шанс удержать его внимание.
Не считать главную главным

Предыдущий пункт как будто шепчет: сделай классную главную, иначе всё провалится. 

Не слушайте этот шёпот. По исследованию Джерри МакГоверна, посещаемость главных падает с 2003 года, и в 2014 тренд продолжался. Пользователи заходят в интернет-магазины через поиск конкретного товара, соцсети и скрытые каналы коммуникации. Такие условия превращают главную страницу в имиджевый разворот, задача которого — сформировать образ бренда, донести миссию, рассказать об акциях и новостях. 

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

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

Думайте о логике и структуре. Карточка товара, оформленная красивее полярного паспорта, не поможет пользователю купить продукт. Зато поможет простая на вид, но с данными о наличии в магазинах, параметрами доставки, подпиской на размер, оценками других пользователей и блоками «похожие товары» и «вам может понравиться». 
Заботьтесь о покупателе и его времени. Длина сессии не так важна, как конверсия и средний чек. Покупатель вероятнее вернётся или задержится на сайте после лёгкой и приятной покупки, чем после того, как потратит час на поиск нужной вещи. Вот несколько примеров заботы:
Интуитивная группировка товаров в каталоге и подборках. 
Поиск и удобные фильтры: по моделям, категориям и другим параметрам, на которые опираются покупатели. 
Ссылки для перехода в другие разделы на пустых страницах.
Доступность информации: сделайте отдельную страницу о способах оплаты и условиях доставки. Показывайте, сколько времени займёт какой тип доставки, и сразу указывайте цены. Если пользователь забирает заказ через самовывоз, дайте знать, в каких точках товар в наличии и по какому графику эти точки работают. Хотите быть идеалом — покажите на карте и дайте контакты. 
Доступность поддержки: разместите виджет онлайн-консультанта и кнопку перехода к контактам на каждой странице. Если поддержка будет оперативная и чуткая, получите +100 к лояльности. 
Делайте больше, чем пользователь ждёт. При оформлении заказа выводите баннер со скидкой за дополнение корзины на 500 рублей, давайте промокоды просто так или за полезное действие. Подсказывайте, что выбрать и как получить, опираясь на данные этого и других покупателей. 
Чем сделать хорошо

В этом разделе трансформируем законы мышления человека в законы продуманного дизайна с опорой на психофизиологию. Рассказываем о конкретных фишках, которые влияют на восприятие. 

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

UI делает удобное красивым с помощью прототипичности: благодаря схожему дизайну интернет-магазинов пользователю проще в них ориентироваться. Он ждёт знакомых разделов, иконок и сеток. Поэтому начнём с инструмента, который погружает пользователя в знакомую среду и помогает понять бренд и продукты. 
1. Аффордансы

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

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

Аффордансы — указатели, по которым идёт пользователь. Поэтому их корректнее воспринимать как цельный метод, чем как отдельный инструмент. Но важно не переборщить, чтобы фокус не потерялся в иконках и символах. Подробнее о них написано здесь. 
2. Группировка

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

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

Каждый элемент соотносится с фоном, и этими отношениями управляет дизайнер. Яркие и чёткие объекты замечают в первую очередь, поэтому размывать или делать прозрачнее второстепенное — хорошая идея. 

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

Остались два очевидных инструмента: контраст и больший размер главных объектов.
4. Память и внимание

Мозг в первую очередь фиксирует геометрические формы и цвета. На втором месте цифры, на третьем — текст. 

Этот факт объясняет, почему числительные лучше прописывать цифрами, чем словами, и выделять графически. А ещё — помогает строить информационную иерархию. 

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

Пользователь последует за цветом, если цвет контрастен фону и объединяет близкие по смыслу элементы, расположенные не рядом. 

С текстом всё сложнее: его трудно сконцентрироваться и запомнить, когда объекты вокруг больше, ярче, привлекательнее — тянут внимание на себя. Чтобы сделать текст читабельнее, нужны настройки:  
абзацы не больше 5–6 строк
интерлиньяж х2 между абзацами
высота строки — 17-20 пикселей
35-95 символов в строке.
5. Единицы дружелюбия

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

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

Анимация и микровзаимодействия — отклики интерфейса на движение курсора. Делают сайт живым и реагирующим, дают ощущение контроля и игры одновременно. UX уровня advanced, который полюбят и запомнят.  
6. Тренды

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

Часть трендов меняется от года к году, ещё часть — держится дольше. 

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

Это работает: 81% потребителей выбирают бренды, которым доверяют. Знакомясь с продуктом через интернет, они не могут физически оценить его. Основным источником информации становится бренд — и то, что он сам говорит о продукте. Здесь на помощь и приходит сторителлинг — последовательность шагов пользователя при взаимодействии с продуктом, позиционирование и акценты в образе компании. Без дизайна впечатляюще показать эти вещи довольно трудно. 

Среди более скоротечных трендов — интерфейсное бунтарство вроде асимметричной вёрстки и технологичность: 3D-модели, интеграция AR- и VR-решений. 

Эти тренды логичны: 
потребители выбирают похожие на себя, человечные бренды
сайты пытаются поймать баланс между ненавязчивостью дизайна и запоминающейся картинкой 
чтобы запомниться, нужно удивить: к технологичным решениям и талантливому 3D покупатели в рунете ещё не привыкли.

Выводы 

UI и UX равны: первый заботится о том, чтобы пользователь не ушёл с сайта и запомнил его, второй — о том, чтобы пользователю понравилось и захотелось вернуться. 
Не стоит бросать все силы на главную: часто пользователь добирается до неё после карточки товара или страницы каталога.
Уважение, которого ждёт пользователь — это не “Вы” с большой буквы. Это забота: о его времени — с помощью продуманной логики и структуры сайта, доступности информации; о нём самом — с помощью приятных необязательных бонусов, которых он не ждёт. 
Для заботливого UI тоже есть инструменты: аффордансы и разные виды группировки, выделение объектов из среды, игра со вниманием и особенностями работы человеческой памяти, единицы дружелюбия и тренды. 

В следующей статье раскроем лица авторов: расскажем, как вся эта теория работает на практике, со слов дизайнеров digital-агентства STIK. 
 

Светлана Бурхина
Автор статьи