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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть вторая
Пример плохого поиска или плохого запроса? Интернет-магазин Nike
Пример плохого поиска или плохого запроса? Интернет-магазин Nike

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

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

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

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

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

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

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

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

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

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

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

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

Закон Хика

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

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

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

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

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

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

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

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

Пример мега-меню Интернет-магазин Ozon
Пример мега-меню Интернет-магазин 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, если вам нравится. Подписывайтесь, чтобы не пропустить следующую статью.

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

8585
27 комментариев

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

8
Ответить
Автор

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

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

Ответить

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

4
Ответить

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

2
Ответить
Комментарий удалён модератором

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

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

4
Ответить
Автор

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

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

Ответить