Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть вторая

Вторая из цикла статей. Цель цикла — повысить конверсии и сделать онлайн-шопинг людей удобнее. Мы в Mojo собрали лучшие практики из своего опыта и подкрепили их исследованиями.

На стендапе меня называют Женя Князев, тут тоже. Я — продуктовый дизайнер в Mojo. У нас большая экспертиза в дизайне и неплохая база исследований. Недавние eCommerce проекты вдохновили меня рассказать о дизайне интернет-магазинов.

Рекомендую начать с первой статьи. В ней я рассказываю, почему дизайн — это вообще важно. За сколько секунд пользователь составит впечатление о вашем сайте? Как повлияет впечатление на его последующий опыт? Во второй половине статьи я даю 12 советов, как улучшить его малой кровью.

Сегодня мы поговорим о навигации, поиске и обратной связи.

Как мне выбраться отсюда?

В прошлой статье я рассказал, почему главная страница уже не «главная». Многие пользователи попадут из поисковика в каталог или на страницу продукта.

Если продукт будет «не совсем тот», пользователь должен перейти к нужной странице магазина. Для этого ему нужна удобная навигация.

Почему именно навигация

Навигация популярнее, чем поиск. Вот почему:

  • Пользователи привыкли к алгоритмам Google и «Яндекс». На большинстве сайтов поиск хуже. Ожидания пользователей не оправдываются.
  • Люди не знают, что и как искать. Сформулировать четкий поисковый запрос — отдельная задача. Для этого нужно знать потенциальные характеристики и разбираться в вопросе.
  • Печатать запрос на клавиатуре тяжелее, чем сделать несколько кликов мышкой. Иначе говоря, у печати больше стоимость взаимодействия.

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

Конечно, поиск все ещё нужен. Он важен для пользователей с четко сформулированным запросом.

Пример плохого поиска или плохого запроса? Интернет-магазин Nike

Однако навигация важнее. Давайте разберемся, как сделать её удобной.

Скрытая навигация — игрушка дьявола

Nielson Normann Group в своем исследовании показали, что скрытую навигацию почти в 2 раза сложнее найти на странице. Особенно если мы говорим про веб. Сейчас будут интересные графики:

Использование навигации Nielsen Norman Group

Cкрытое меню используют только в 27% случаев. Явную или комбинированную навигацию почти в два раза чаще: в 48% и 50% случаев. На мобильных устройствах люди использовали скрытую навигацию в 57% случаев, а комбинированную навигацию в 86% случаев — чаще в 1,5 раза.

Среднее время на выполнение задачи. Nielsen Norman Group

Люди были, как минимум, на 39% медленнее, когда навигация была скрыта. На мобильных люди были медленнее на 15%. Скрытая навигация на смартфоне — привычное решение. Этим объясняется меньшее количество времени.

Выводы и советы

  1. Никакой скрытой навигации в десктопной версии. У вас достаточно места. Например, сразу после хэдера.
  2. Если у вас около четырех пунктов меню, то на мобильных тоже сделайте их видимыми. Часть можно скрыть.
  3. Хороший способ — добавить навигацию на главную страницу мобильной версии и в футер.
В мобильной версии большая навигация скрыта в бургер. При этом пользователь может совершить ключевые действия без использования меню на главной странице. Для других страниц есть «хлебные крошки». О них в следующем подзаголовке Один из наших проектов

6 шагов к хорошей навигации

Актуальные и сегодня советы дал Сергей Кулинкович. Я коротко перескажу их:

  1. Организуйте информацию в простую и логичную структуру. Определите вложенность. Проверьте все на логику. Учтите, что ваши пользователи могут думать не как вы.
  2. Сделайте навигацию единой для всего сайта. Меню всегда должно быть в одном месте. Исключения составляют разве что страницы оформления заказа. Об этом позже.
  3. Пользователь должен знать, где он. Помогите ему. Лучший способ — хлебные крошки. Хлебные крошки — навигационная цепочка вида «Главная → Каталог → Товар»
  4. Сделайте навигацию предсказуемой. Помните первую часть и прототипичность? Это все ещё работает. Не изобретайте велосипед и следуйте за Cognitive Fluently.
  5. Убедитесь в контрастности. Человек должен с легкостью находить вашу навигацию. Даже если она не скрыта, это все еще может быть сложной задачей.
  6. Следите за масштабируемостью. Заранее обдумайте планы и сразу оставьте возможность для увеличения или сокращения пунктов навигации.

Закон Хика

Нельзя говорить про навигацию и не упомянуть закон Хика. Мем старый, а про закон говорила еще моя бабка:

Время и усилия, необходимые для принятия решения, увеличиваются с количеством вариантов.

Чересчур много вариантов ведут к «параличу» пользователя, демотивируют его.

Но ведь люди любят выбор! К сожалению, мы хотим больше, чем можем обработать.

Юзабилити этой области обросло мифами со всех сторон. Два самых популярных мы сейчас разберем. Пишите в комментарии, верили ли вы в них?

Семь плюс-минус два и мега-меню

Джон Миллер утверждает, что ваша кратковременная память может хранить только 7± 2 элемента. Мы не будем с этим спорить. Пользователь не пытается запомнить все пункты меню.

Он использует то, что экране. Спокойно делайте и больше 9 пунктов в своей навигации. Используйте даже мега-меню, с ними все окей.

Пример мега-меню Интернет-магазин Ozon

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

Ну и просто для укрепления веры в человечество: наша память может удерживать 7± 2 блока элементов. Их называют «чанками». Больше читайте в исследовании NNG.

Три клика

А лучше один. Если это возможно. Если нет, то не парьтесь. Никто не сможет задизайнить абсолютно все задачи в три клика в 2020 году:

  • количество кликов зависит от сложности задачи, а не только от дизайна;
  • не все клики одинаково воспринимаются пользователем;
  • дело далеко не только в кликах.

Вместо того, чтобы считать клики

  • убедитесь, что все слова в навигации понятны ЦА, вежливы и удобны для сканирования глазом;
  • добавьте хлебные крошки, если ещё этого не сделали;

  • замените скрытую навигацию и выпадающие списки на мега-меню.

Не только меню

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

Ссылки

С ссылками все просто. Они цветные, внизу подчеркивание. Неактивные ссылки = текст. Делать неактивные ссылки не нужно. Если они необходимы, то подумайте, лучшее ли решение вы используете?

Не делайте неактивные ссылки.

Кнопки

С кнопками все интереснее. Один из самых полных гайдов я нашел на UX-Collective. Возьмем его за основу и немного дополним:

  1. Кнопки должны выглядеть как кнопки. Иначе теряется прототипичность.
  2. Хорошие кнопки дают пользователю фидбек. Для этого нужно показать разные их состояния: по наведению, по нажатию, в процессе.
  3. Я считаю, что автор статьи косячит с выключенными кнопками. Их просто не нужно делать. Тема холиварная, но вот здесь собраны все аргументы. Буду рад подискутировать в комментариях, если найдете контраргумент к каждому из них

  4. Вторичные и первичные кнопки должны быть в одном стиле. Не путайте пользователя.
  5. В кнопках нужно соблюдать визуальную иерархию. На большинстве страниц должен быть только один Call To Action (CTA).
  6. Кнопки должны быть достаточно крупными. Особенно для мобильных версий. 10×10 мм — минимальный размер кнопки. В пикселях размера нет, потому что масштаб меняется от экрана к экрану. В гайдлайнах Material Design предлагают 48 × 48 dp. До ретины гайдлайны Apple говорили о минимальном размере 44 × 44 px.
  7. Заголовок кнопки должен быть понятным, призывать или объяснять действие.
  8. Порядок кнопок «OK» и «Cancel» неважен. Подробнее снова у NNG. Если есть действие, на которое вы хотите намекнуть — сделайте его кнопку первичной.
Кнопка «Перейти в корзину» подсвечена, так как это предпочтительное поведение. При этом неважно слева бы я её поставил или справа Один из наших проектов

Итоги про навигацию

  1. Не стоит делать скрытую навигацию. Пользователям сложно её искать. На десктопе достаточно места, чтобы сделать большое, полное и понятное меню.
  2. На мобилке стоит использовать комбинированную навигацию. Поддерживайте пользователя. Ему тяжело.
  3. Ставьте меню в привычное место — верхнюю часть экрана. Убедитесь, что меню выглядит кликабельным и выделяется на фоне контента.
  4. Хлебные крошки помогут пользователю понять, где он. Они и для SEO полезны.
  5. Закон Хика работает.
  6. Правило 7± 2 работает для того, что нам надо запоминать. Навигацию мы не запоминаем.
  7. Три клика — нереально для большого проекта и это нормально. Снижать количество кликов тоже хорошо. Помните, что клики бывают разные. Вместо подсчета кликов лучше проверить свою навигацию по пунктам списка NNG и по статье Кулинковича

Звонят и звонят

На фирменных худи нашей компании есть твит Джошуа Бревера:

Сократ говорил «Познай себя». Я говорю «Познай своих пользователей». И знаешь что? Они не думают, так же как и ты.

Josh Brewer, сооснователь и исполнительный директор Abstract

В 2020 веке все предпочитают мессенджеры. С этим только одна проблема. Это неправда. В 2018 году аналитики компании Callibri провели исследование. Изучили 100 крупнейших интернет-магазинов России по версии Data Insight.

Сравнивали маркетинговые сервисы, способы и скорость обратной связи всех вместе и внутри каждой из 4-х категорий:

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

Один вывод показался мне интересными и для дизайна:

Подавляющая масса «теплых» посетителей сайта по-прежнему звонят, а не пишут. Маркетологи интернет-магазинов не имеют представления об источниках переходов на сайт и качестве 80% входящих обращений.

Совет

Добавьте номер телефона на видное место в хэдере и футере. Сделайте форму с предложением перезвонить визуально заметной.

Заключение

Третья статья из цикла снова в следующий понедельник. Я посвящу её каталогу. Если у вас есть вопросы или темы, которые вы хотите увидеть, предлагайте в комментариях.

Если вы только что решили прочитать первую, то вот она.

Нам очень важно получать обратную связь от вас: пишите комментарии и ставьте +1, если вам нравится. Подписывайтесь, чтобы не пропустить следующую статью.

Спасибо за прочтение :)

0
27 комментариев
Написать комментарий...
Ruslan Kokin

Спасибо за отличную статью. Рад появлению адекватных ux-дизайнеров на vc.

Ответить
Развернуть ветку
Antro
Автор

Спасибо, Руслан! Надеюсь, что следующие статьи вас тоже порадуют :) 

Можете подписаться на нас, если хотите. А то статьи из цикла то в маркетинге, то в дизайне оказываются :)

Ответить
Развернуть ветку
Da Apricot

спасибо, очень полезно! Жду про каталог.

Ответить
Развернуть ветку
Millsey

Пацаны, молодцы! Хорошая статья! 

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Millsey

Если вы пользуетесь кнопочным телефоном, который выполняет функцию телефона - это не значит что все остальные телефоны говно. Это значит, что в данном конкретном случае интерфейс и функционал охватывает все необходимое. Когда мы говорим о новых магазинах и/или развивающихся - там любые мелочи в UI важны. Запустите сейчас такой же магазин с 0 и вы вряд ли выйдите на окупаемость. Вы теоретик и тролль, не более того )

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

Ответить
Развернуть ветку
Antro
Автор

Илья, вы планируете под каждой статьёй из цикла приводить этот пример?)

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Antro
Автор

Могу только пожелать вам удачи в отрицании всех исследований. Видимо, это заговор всемирного дизайнерского правительства :)

Pleer.ru — мутный сайт с купленными отзывами и обманными схемами. Гуглится на раз. Продолжайте писать комментарии, они привлекают больше внимания к статьям :)

Ответить
Развернуть ветку
Danil Shashkov

Можешь к плеер ру еще добавить amazon, который имеет мега-худший дизайн, но приносит миллиарды $

Ответить
Развернуть ветку
Antro
Автор

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Oleg Dubovitskiy

На фирменных худи нашей компании есть твит Джошуа Бревера:

Честно говорят вот тут ожидал ссылку на кайфовое стильное худи, а не на сайт вашей компании

Ответить
Развернуть ветку
Antro
Автор

Исправляемся :)

Ответить
Развернуть ветку
Влад Берг

+100500 хочу ещё 😊

Ответить
Развернуть ветку
nurba

Cпасибо! Теперь, когда вышли все части, добавьте, пожалуйста, ссылки на следующие части, а то приходится искать в вашем профиле)

Ответить
Развернуть ветку
Antro
Автор

Приятно, что вам нравится :)

К сожалению, первые части мы редактировать уже не можем. Я всегда добавляю ссылки на предыдущие части в новой статье. Такая ссылка есть и в этой статье, и в третьей.

Прикреплю ссылку на случай, если вы её пропустили:

Ответить
Развернуть ветку
Alex Normalny

Всё ок, кроме: "Маркетологи интернет-магазинов не имеют представления об источниках переходов на сайт и качестве 80% входящих обращений." - это откуда?

Ответить
Развернуть ветку
Antro
Автор

Цитата с сайта-источника, который выложил исследование  🤷‍♂️

Ответить
Развернуть ветку
Alex Normalny

Мне кажется, что проблема исследуемых ИМ в том, что они лишь придатки оффлайна. Пока лпры будут продолжать мыслить категориями что digital это блажь, а чтобы ИМ получить бюджет нужно сначала рассчитать ROI (ШТА?!) - так и будет.

Ответить
Развернуть ветку
Antro
Автор

Не думаете, что закрытие офлайн-точек уже подстегнуло переосмысление?

Ответить
Развернуть ветку
Alex Normalny

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

Ответить
Развернуть ветку
Antro
Автор

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

Ответить
Развернуть ветку
Alex Normalny

угу. 

Ответить
Развернуть ветку
Pavel Voronkov

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

Ответить
Развернуть ветку
Antro
Автор

Такие изменения мне кажутся естественным течением вещей. А о каком крупном игроке говорите именно вы? Если это не секрет, конечно :)

Ответить
Развернуть ветку
Полина Щекина

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

Ответить
Развернуть ветку
Елена Назимко

Спасибо! Очень интересно и полезно 👍

Ответить
Развернуть ветку
Айсулуу Аманкулова

+1

Ответить
Развернуть ветку
Marzipanina

Очень классная статья! Я бы еще ко всему этому добавила и пару UX тестов, особенно для навигации это супер практика. Я недавно начала это делать, когда поняла, что в моем ecommerce проблемы с меню и названиями категорий. Если тут вдруг есть еще кто-то с такой же проблемой советую сортировку карточек, например. Мне лично очень помогло, инфу брала отсюда 

Ответить
Развернуть ветку
24 комментария
Раскрывать всегда