Это вторая часть большой телеги про дизайн интернет-магазинов от STIK. В первой мы говорили о роли дизайна. В этой расскажем о том, куда будут смотреть пользователи и какие дизайнерские приёмы применить, чтобы они смотрели туда, куда вам нужно.
Как сделать хорошо
Как в идеале работает дизайн — рассказывали в предыдущей статье. Этот раздел поможет точнее представить идеал и подскажет, как его достичь (ну или хотя бы приблизиться).
Не проиграть битву за первое впечатление
Бизнесу дизайн нужен, чтобы показать продукт, пользователю — чтобы составить об этом продукте впечатление. В половине случаев оно формируется именно благодаря дизайну. И происходит это за полсекунды: ровно столько времени есть у сайта, чтобы понравиться пользователю или оттолкнуть его. В 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.
