Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть вторая
Вторая из цикла статей. Цель цикла — повысить конверсии и сделать онлайн-шопинг людей удобнее. Мы в Mojo собрали лучшие практики из своего опыта и подкрепили их исследованиями.
На стендапе меня называют Женя Князев, тут тоже. Я — продуктовый дизайнер в Mojo. У нас большая экспертиза в дизайне и неплохая база исследований. Недавние eCommerce проекты вдохновили меня рассказать о дизайне интернет-магазинов.
Рекомендую начать с первой статьи. В ней я рассказываю, почему дизайн — это вообще важно. За сколько секунд пользователь составит впечатление о вашем сайте? Как повлияет впечатление на его последующий опыт? Во второй половине статьи я даю 12 советов, как улучшить его малой кровью.
Сегодня мы поговорим о навигации, поиске и обратной связи.
Как мне выбраться отсюда?
В прошлой статье я рассказал, почему главная страница уже не «главная». Многие пользователи попадут из поисковика в каталог или на страницу продукта.
Если продукт будет «не совсем тот», пользователь должен перейти к нужной странице магазина. Для этого ему нужна удобная навигация.
Почему именно навигация
Навигация популярнее, чем поиск. Вот почему:
- Пользователи привыкли к алгоритмам Google и «Яндекс». На большинстве сайтов поиск хуже. Ожидания пользователей не оправдываются.
- Люди не знают, что и как искать. Сформулировать четкий поисковый запрос — отдельная задача. Для этого нужно знать потенциальные характеристики и разбираться в вопросе.
- Печатать запрос на клавиатуре тяжелее, чем сделать несколько кликов мышкой. Иначе говоря, у печати больше стоимость взаимодействия.
Стоимость взаимодействия — сумма физических и когнитивных усилий, которые нужно приложить, чтобы добиться цели.
Конечно, поиск все ещё нужен. Он важен для пользователей с четко сформулированным запросом.
Однако навигация важнее. Давайте разберемся, как сделать её удобной.
Скрытая навигация — игрушка дьявола
Nielson Normann Group в своем исследовании показали, что скрытую навигацию почти в 2 раза сложнее найти на странице. Особенно если мы говорим про веб. Сейчас будут интересные графики:
Cкрытое меню используют только в 27% случаев. Явную или комбинированную навигацию почти в два раза чаще: в 48% и 50% случаев. На мобильных устройствах люди использовали скрытую навигацию в 57% случаев, а комбинированную навигацию в 86% случаев — чаще в 1,5 раза.
Люди были, как минимум, на 39% медленнее, когда навигация была скрыта. На мобильных люди были медленнее на 15%. Скрытая навигация на смартфоне — привычное решение. Этим объясняется меньшее количество времени.
Выводы и советы
- Никакой скрытой навигации в десктопной версии. У вас достаточно места. Например, сразу после хэдера.
- Если у вас около четырех пунктов меню, то на мобильных тоже сделайте их видимыми. Часть можно скрыть.
- Хороший способ — добавить навигацию на главную страницу мобильной версии и в футер.
6 шагов к хорошей навигации
Актуальные и сегодня советы дал Сергей Кулинкович. Я коротко перескажу их:
- Организуйте информацию в простую и логичную структуру. Определите вложенность. Проверьте все на логику. Учтите, что ваши пользователи могут думать не как вы.
- Сделайте навигацию единой для всего сайта. Меню всегда должно быть в одном месте. Исключения составляют разве что страницы оформления заказа. Об этом позже.
- Пользователь должен знать, где он. Помогите ему. Лучший способ — хлебные крошки. Хлебные крошки — навигационная цепочка вида «Главная → Каталог → Товар»
- Сделайте навигацию предсказуемой. Помните первую часть и прототипичность? Это все ещё работает. Не изобретайте велосипед и следуйте за Cognitive Fluently.
- Убедитесь в контрастности. Человек должен с легкостью находить вашу навигацию. Даже если она не скрыта, это все еще может быть сложной задачей.
- Следите за масштабируемостью. Заранее обдумайте планы и сразу оставьте возможность для увеличения или сокращения пунктов навигации.
Закон Хика
Нельзя говорить про навигацию и не упомянуть закон Хика. Мем старый, а про закон говорила еще моя бабка:
Время и усилия, необходимые для принятия решения, увеличиваются с количеством вариантов.
Чересчур много вариантов ведут к «параличу» пользователя, демотивируют его.
Но ведь люди любят выбор! К сожалению, мы хотим больше, чем можем обработать.
Юзабилити этой области обросло мифами со всех сторон. Два самых популярных мы сейчас разберем. Пишите в комментарии, верили ли вы в них?
Семь плюс-минус два и мега-меню
Джон Миллер утверждает, что ваша кратковременная память может хранить только 7± 2 элемента. Мы не будем с этим спорить. Пользователь не пытается запомнить все пункты меню.
Он использует то, что экране. Спокойно делайте и больше 9 пунктов в своей навигации. Используйте даже мега-меню, с ними все окей.
Большие прямоугольные меню с группами товаров в навигации позволяют исключить прокрутку. Используйте типографику, значки и всплывающие подсказки для фидбека.
Ну и просто для укрепления веры в человечество: наша память может удерживать 7± 2 блока элементов. Их называют «чанками». Больше читайте в исследовании NNG.
Три клика
А лучше один. Если это возможно. Если нет, то не парьтесь. Никто не сможет задизайнить абсолютно все задачи в три клика в 2020 году:
- количество кликов зависит от сложности задачи, а не только от дизайна;
- не все клики одинаково воспринимаются пользователем;
- дело далеко не только в кликах.
Юзабилити-тестирования показали: количество кликов не влияет ни на удовлетворённость, ни на успех.
Вместо того, чтобы считать клики
- убедитесь, что все слова в навигации понятны ЦА, вежливы и удобны для сканирования глазом;
добавьте хлебные крошки, если ещё этого не сделали;
- замените скрытую навигацию и выпадающие списки на мега-меню.
Не только меню
Кроме меню, в навигации используются дополнительные ссылки и кнопки. Ссылки, обычно, используют для разделов, кнопки для действий.
Ссылки
С ссылками все просто. Они цветные, внизу подчеркивание. Неактивные ссылки = текст. Делать неактивные ссылки не нужно. Если они необходимы, то подумайте, лучшее ли решение вы используете?
Не делайте неактивные ссылки.
Кнопки
С кнопками все интереснее. Один из самых полных гайдов я нашел на UX-Collective. Возьмем его за основу и немного дополним:
- Кнопки должны выглядеть как кнопки. Иначе теряется прототипичность.
- Хорошие кнопки дают пользователю фидбек. Для этого нужно показать разные их состояния: по наведению, по нажатию, в процессе.
Я считаю, что автор статьи косячит с выключенными кнопками. Их просто не нужно делать. Тема холиварная, но вот здесь собраны все аргументы. Буду рад подискутировать в комментариях, если найдете контраргумент к каждому из них
- Вторичные и первичные кнопки должны быть в одном стиле. Не путайте пользователя.
- В кнопках нужно соблюдать визуальную иерархию. На большинстве страниц должен быть только один Call To Action (CTA).
- Кнопки должны быть достаточно крупными. Особенно для мобильных версий. 10×10 мм — минимальный размер кнопки. В пикселях размера нет, потому что масштаб меняется от экрана к экрану. В гайдлайнах Material Design предлагают 48 × 48 dp. До ретины гайдлайны Apple говорили о минимальном размере 44 × 44 px.
- Заголовок кнопки должен быть понятным, призывать или объяснять действие.
- Порядок кнопок «OK» и «Cancel» неважен. Подробнее снова у NNG. Если есть действие, на которое вы хотите намекнуть — сделайте его кнопку первичной.
Итоги про навигацию
- Не стоит делать скрытую навигацию. Пользователям сложно её искать. На десктопе достаточно места, чтобы сделать большое, полное и понятное меню.
- На мобилке стоит использовать комбинированную навигацию. Поддерживайте пользователя. Ему тяжело.
- Ставьте меню в привычное место — верхнюю часть экрана. Убедитесь, что меню выглядит кликабельным и выделяется на фоне контента.
- Хлебные крошки помогут пользователю понять, где он. Они и для SEO полезны.
- Закон Хика работает.
- Правило 7± 2 работает для того, что нам надо запоминать. Навигацию мы не запоминаем.
- Три клика — нереально для большого проекта и это нормально. Снижать количество кликов тоже хорошо. Помните, что клики бывают разные. Вместо подсчета кликов лучше проверить свою навигацию по пунктам списка NNG и по статье Кулинковича
Звонят и звонят
На фирменных худи нашей компании есть твит Джошуа Бревера:
Сократ говорил «Познай себя». Я говорю «Познай своих пользователей». И знаешь что? Они не думают, так же как и ты.
В 2020 веке все предпочитают мессенджеры. С этим только одна проблема. Это неправда. В 2018 году аналитики компании Callibri провели исследование. Изучили 100 крупнейших интернет-магазинов России по версии Data Insight.
Сравнивали маркетинговые сервисы, способы и скорость обратной связи всех вместе и внутри каждой из 4-х категорий:
- автозапчасти;
- одежда, обувь, аксессуары;
- товары для дома и ремонта;
- электроника и техника.
Один вывод показался мне интересными и для дизайна:
Подавляющая масса «теплых» посетителей сайта по-прежнему звонят, а не пишут. Маркетологи интернет-магазинов не имеют представления об источниках переходов на сайт и качестве 80% входящих обращений.
Совет
Добавьте номер телефона на видное место в хэдере и футере. Сделайте форму с предложением перезвонить визуально заметной.
Заключение
Третья статья из цикла снова в следующий понедельник. Я посвящу её каталогу. Если у вас есть вопросы или темы, которые вы хотите увидеть, предлагайте в комментариях.
Если вы только что решили прочитать первую, то вот она.
Нам очень важно получать обратную связь от вас: пишите комментарии и ставьте +1, если вам нравится. Подписывайтесь, чтобы не пропустить следующую статью.
Спасибо за прочтение :)
Спасибо за отличную статью. Рад появлению адекватных ux-дизайнеров на vc.
Спасибо, Руслан! Надеюсь, что следующие статьи вас тоже порадуют :)
Можете подписаться на нас, если хотите. А то статьи из цикла то в маркетинге, то в дизайне оказываются :)
спасибо, очень полезно! Жду про каталог.
Пацаны, молодцы! Хорошая статья!
Если вы пользуетесь кнопочным телефоном, который выполняет функцию телефона - это не значит что все остальные телефоны говно. Это значит, что в данном конкретном случае интерфейс и функционал охватывает все необходимое. Когда мы говорим о новых магазинах и/или развивающихся - там любые мелочи в UI важны. Запустите сейчас такой же магазин с 0 и вы вряд ли выйдите на окупаемость. Вы теоретик и тролль, не более того )
Предвкушая ваши замечания про телефоны - соц сетями, банками и прочими нужными вещами можно пользоваться и через браузер на допотопных устройствах. Но вот почему то, они канули в лету 😁
Илья, вы планируете под каждой статьёй из цикла приводить этот пример?)
В ветке комментариев под первой частью мы уже обсуждали этот вопрос. С тех пор ничего не изменилось.