Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть вторая
Вторая из цикла статей. Цель цикла — повысить конверсии и сделать онлайн-шопинг людей удобнее. Мы в 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-х категорий:
- автозапчасти;
- одежда, обувь, аксессуары;
- товары для дома и ремонта;
- электроника и техника.
Один вывод показался мне интересными и для дизайна:
Совет
Добавьте номер телефона на видное место в хэдере и футере. Сделайте форму с предложением перезвонить визуально заметной.
Заключение
Третья статья из цикла снова в следующий понедельник. Я посвящу её каталогу. Если у вас есть вопросы или темы, которые вы хотите увидеть, предлагайте в комментариях.
Если вы только что решили прочитать первую, то вот она.
Нам очень важно получать обратную связь от вас: пишите комментарии и ставьте +1, если вам нравится. Подписывайтесь, чтобы не пропустить следующую статью.
Спасибо за прочтение :)
Спасибо за отличную статью. Рад появлению адекватных ux-дизайнеров на vc.
Спасибо, Руслан! Надеюсь, что следующие статьи вас тоже порадуют :)
Можете подписаться на нас, если хотите. А то статьи из цикла то в маркетинге, то в дизайне оказываются :)
спасибо, очень полезно! Жду про каталог.
Пацаны, молодцы! Хорошая статья!
Комментарий удален модератором
Если вы пользуетесь кнопочным телефоном, который выполняет функцию телефона - это не значит что все остальные телефоны говно. Это значит, что в данном конкретном случае интерфейс и функционал охватывает все необходимое. Когда мы говорим о новых магазинах и/или развивающихся - там любые мелочи в UI важны. Запустите сейчас такой же магазин с 0 и вы вряд ли выйдите на окупаемость. Вы теоретик и тролль, не более того )
Предвкушая ваши замечания про телефоны - соц сетями, банками и прочими нужными вещами можно пользоваться и через браузер на допотопных устройствах. Но вот почему то, они канули в лету 😁
Илья, вы планируете под каждой статьёй из цикла приводить этот пример?)
В ветке комментариев под первой частью мы уже обсуждали этот вопрос. С тех пор ничего не изменилось.
Комментарий удален модератором
Могу только пожелать вам удачи в отрицании всех исследований. Видимо, это заговор всемирного дизайнерского правительства :)
Pleer.ru — мутный сайт с купленными отзывами и обманными схемами. Гуглится на раз. Продолжайте писать комментарии, они привлекают больше внимания к статьям :)
Можешь к плеер ру еще добавить amazon, который имеет мега-худший дизайн, но приносит миллиарды $
Данил, если у вас нет возможности вернуться в 1995 год и развить огромный и прочный бренд, то не советую делать дизайн как у Amazon.
Комментарий удален модератором
На фирменных худи нашей компании есть твит Джошуа Бревера:
Честно говорят вот тут ожидал ссылку на кайфовое стильное худи, а не на сайт вашей компании
Исправляемся :)
+100500 хочу ещё 😊
Cпасибо! Теперь, когда вышли все части, добавьте, пожалуйста, ссылки на следующие части, а то приходится искать в вашем профиле)
Приятно, что вам нравится :)
К сожалению, первые части мы редактировать уже не можем. Я всегда добавляю ссылки на предыдущие части в новой статье. Такая ссылка есть и в этой статье, и в третьей.
Прикреплю ссылку на случай, если вы её пропустили:
Всё ок, кроме: "Маркетологи интернет-магазинов не имеют представления об источниках переходов на сайт и качестве 80% входящих обращений." - это откуда?
Цитата с сайта-источника, который выложил исследование 🤷♂️
Мне кажется, что проблема исследуемых ИМ в том, что они лишь придатки оффлайна. Пока лпры будут продолжать мыслить категориями что digital это блажь, а чтобы ИМ получить бюджет нужно сначала рассчитать ROI (ШТА?!) - так и будет.
Не думаете, что закрытие офлайн-точек уже подстегнуло переосмысление?
Общаясь с представителями этого бизнеса - нет, не вижу. Напротив почти все уверены, что все вернется как было (с)
Печально. В таком случае, у нас только один выход сейчас. Распространять среди клиентов и читателей позицию, которую считаем верной.
угу.
Далеко не у всех, онлайн придаток, у некоторых уже наоборот, оффлайн, это как доп.витрина. Речь об крупном сетевом игроке.
Такие изменения мне кажутся естественным течением вещей. А о каком крупном игроке говорите именно вы? Если это не секрет, конечно :)
Только после этой статьи осознала, насколько же меня раздражают выключенные кнопки как пользователя. Я столько раз сталкивалась с проблемой, что не понимала, что я делаю не так и почему тыкаю в экран, а ничего не происходит. Спасибо большое за статью!
Спасибо! Очень интересно и полезно 👍
+1
Очень классная статья! Я бы еще ко всему этому добавила и пару UX тестов, особенно для навигации это супер практика. Я недавно начала это делать, когда поняла, что в моем ecommerce проблемы с меню и названиями категорий. Если тут вдруг есть еще кто-то с такой же проблемой советую сортировку карточек, например. Мне лично очень помогло, инфу брала отсюда