Google проанализировал свыше 1000 сайтов и показал на что такое хорошо и что такое плохо. Я как только это увидел, сразу начал писать этот пост. Думаю, что будет очень полезно изучить их данные. Естественно все переведено через гугл переводчик иначе это бы заняло слишком много времени, но смысл от этого не потерялся. Можете в принципе перейте на их сайт и почитать все самостоятельно или вернуться сюда и прочитать все на 1 странице. Итак, что мы имеем? 60 параметров юзабилити! Над сколькими работаешь ты?
Дизайн страницы — Все страницы должны соответствовать внешнему виду, ощущению, цвету и логотипу бренда.
Хорошие примеры: использовал свои фирменные цвета в тексте, заголовке и некоторых кнопках. Storebrand использует свои фирменные цвета в оформлении сайта и тексте. Booking.com использует один и тот же набор цветов на своем сайте, чтобы восприятие бренда было стабильным .
Deep linking — Из результатов поисковой системы пользователи отправляются на самую релевантную страницу, а не на главную. lastminute.com поле поиска автоматически заполняется городом местоположения пользователя, что ускоряет заполнение формы поиска. Крутой инсайд! Да?
Последовательный опыт — бренд одинаков для мобильных и настольных сайтов. Адаптивный веб-сайт Bank Norwegian предоставляет пользователям удобный опыт работы независимо от устройства, на котором они работают. Booking.com использует одни и те же элементы дизайна, цвета, информационную архитектуру и содержимое страниц между настольным и мобильным устройствами. // Данный пункт дополняет 1. Просто установить плагин мобильной версии на WordPress никак не настроев его — не есть хорошо. Не должно быть разницы мобильная это версия или десктоп — функционал должен быть доступен всегда.
Нет новых вкладок — Ссылки никогда не открывают новые вкладки браузера. // Так часто любят делать наши крутые «сеошники» для накрутки ПФ. Думаю, что тоже самое относится и к внешним ссылкам. Примечательно слово «никогда».
Цитата гугла: мы оценили на сайте lastminute.com, мы не встретили никаких новых вкладок. Вместо этого lastminute.com выбирает расширенные ссылки, чтобы показать дополнительный контент в контексте путешествия пользователя.
Призыв к действию — Основной призыв к действиям должен находиться рядом с продуктом, быть очень заметным
Пример: У Namshi основной призыв к действию привязан к нижней части экрана. Таким образом, когда пользователи прокручивают содержимое страницы вниз, призыв к действию всегда остается виден. Финансовые сайты обязаны предоставлять весь контент, который может потребоваться пользователю для полной информации. Booking.com является выдающимся примером. Он отображается по всей ширине страницы, что облегчает работу как левшам, так и правшам. // Как вам такое? Теперь надо думать о левшах!
Достоверные отзывы — Если есть отзывы пользователей, они должны быть достоверными и их можно легко найти.
Пример: Coolblue — для того, чтобы потенциальные покупатели могли быстро и легко читать рецензии, рецензентам рекомендуется добавлять конкретные плюсы и минусы. Отзывы также можно комментировать или голосовать.
Разборчивые этикетки — Все ярлыки и заголовки понятны и легко читаются.
Пример: Argos использует четкую маркировку, которая достаточно велика, чтобы ее могли прочитать на расстоянии или люди с плохим зрением. Текст также хорошо контрастирует с фоном и вокруг него много пустого пространства. Allianz использует четкую иерархию по размеру и пространству вокруг заголовков и меток. Текст легко читается и хорошо структурирован.
Достаточно времени — После того, как пользователи выберут «Купить» или «Оформить заказ», время сеанса не истечет как минимум на 30 минут. // Без комментариев. Хотя... я бы лучше добавил как минимум сутки.
Видимый поиск. Поле поиска находится выше всех страниц. Если он находится за значком поиска, он расширяется без загрузки новой страницы.
Google: Помощь пользователям в поиске того, что они ищут, с большей вероятностью приведет к конверсии. // Т. е. поиск это не тупо техническая хрень и все такое — работая над поиском на сайте ты помогаешь пользователям.
Результаты поиска. Результаты поиска легко сканируются (глазами) для поиска конкретной информации.
Пример: Результаты Coolblue следуют заданному шаблону с единообразным содержимым, что облегчает их сканирование и сравнение параметров. // И приводится пример поиска SD-карт, где выводитя характеристика карт. Т. е. нужно не просто выводить название продукта, но и его характеристики, чтобы не нужно было заходить на каждый отдельный товар и смотреть его характеристики — это отмечает гугл.
Данные о наличии — Когда товара нет в наличии, это сразу указывается. Где это уместно, доступные размеры четко указаны.
Масштабируемые изображения — Все изображения продукта должны быть масштабируемыми без пикселизации.
Доступ к аккаунту — Пользователи могут легко начать создавать аккаунт через любую страницу сайта.
Пример: В любой момент на веб-сайте Marks and Spencer пользователи могут нажать на меню, чтобы показать вход в систему или регистрацию.
Высокое качество изображения — Вся графика, видео и изображения, используемые на сайте, высокого качества.
Альбомная ориентация — Мобильный дизайн позволяет пользователям просматривать изображения и видео в альбомной ориентации, где это необходимо.
Пример: Когда пользователи переключаются в альбомную ориентацию на веб-сайте Argos, они остаются в той же точке на странице, и изображения или видео увеличиваются в соответствии с доступным дополнительным пространством.
Релевантные результаты — Самые релевантные результаты поиска всегда появляются первыми.
Нет всплывающих окон — нет незапрошенных всплывающих окон или рекламных вставок.
Примечание google: Всплывающие окна мешают покупкам и могут раздражать пользователей. чат поддержки инициируется пользователем и может быть легко снова закрыт одним нажатием. // Никаких нахер всплывающих чатов поддержки!!!
Показывать активность — Когда пользователи ждут, продемонстрируйте активность, чтобы убедить их, что сайт не упал.
Гугл: страница продукта Superbalist запускается практически мгновенно, но она все еще показывает рамку для изображения, пока не будет готова к загрузке. Это особенно полезно при медленных соединениях, потому что у пользователей создается впечатление, что что-то происходит. Страница на Etstur загружается постепенно, как только элементы становятся доступными, и пользователю показывают каркасную структуру, пока не прибудет каждый элемент.
Незагроможденные страницы — Целевые страницы не перегружены, с чистым и хорошо разнесенным контентом.
marksandspencer.com имеют много контента, чтобы показать на этой странице. Но вместо того, чтобы заполнять экран изображениями, они использовали много пустого пространства, чтобы визуально не перегружать пользователей. Простой белый фон также помогает. Allianz чтобы не перегружать пользователей, использует изображения, списки и «жирный шрифт», чтобы разбить текст на управляемые блоки.
Смахиваемые изображения — Там, где используются несколько изображений, пользователи могут видеть, сколько их, и легко перемещаться между ними.
Пример: morhipo использует цветные точки, чтобы указать, сколько изображений доступно и какое из них просматривается прямо сейчас. Пользователи могут также провести пальцем влево или вправо, чтобы увидеть другие изображения.
Легко сравнить — Сведения о продукте следуют заданному шаблону, чтобы пользователи могли легко сравнивать.
Большой палец — Сенсорные кнопки и поля достаточно большие для больших пальцев.
Безопасный сайт — Все страницы должны обслуживаться по протоколу HTTPS, а не только (PII).
Фильтры — Фильтрация доступна и заметна.
Пример: на morhipo фильтр является наиболее заметным элементом на странице результатов поиска. Сортировка также возможна, но не так важна.
Нет скрытых затрат — Как можно раньше, цены должны включать все неизбежные расходы. Например, доставку.
Пример: Coolblue не скрывает их стоимость доставки. Пока пользователь все еще в корзине, он может видеть все варианты доставки и сколько стоит каждый из них. Это снижает вероятность неприятных сюрпризов в дальнейшем.
Положение прокрутки — Веб-сайт запоминает прокручиваемые пользователем позиции страницы при переходе на страницу результатов поиска или списка товаров.
Пример: На веб-сайте debijenkorf.nl, когда пользователи переходят со страницы категории на страницу продукта и обратно, они всегда возвращаются на одну и ту же позицию. Пользователям не нужно прокручивать содержимое, которое они уже видели.
Формы полей — Метки полей и поля ввода являются парными, видимыми одновременно и выровненными по левому краю. Метки также располагаются над полем.
Пример: Morhipo следует всем лучшим практикам для форм. Поля выровнены по левому краю с меткой выше и содержат краткое описание, которое исчезает, когда пользователи начинают печатать.
Автозаполнение — Автозаполнение предлагает наиболее популярные поисковые запросы, но пользователи имеют возможность их игнорировать.
Пример: Набор текста на мобильном телефоне может быть неудобной и подверженной ошибкам задачей. При использовании автозаполнения morhipo увеличивает вероятность того, что пользователи получат управляемые и релевантные результаты. Это позволяет пользователям тратить больше своего ограниченного времени, сосредотачиваясь на покупках, а не на улучшении поиска.
Ключевая информация — Ключевую информацию легко найти и четко отобразить. Например. Доставка; политика возврата; размер продукта, цвет, посадка и т. д.
Пример: Чтобы помочь пользователям принимать решения, Superbalist обеспечивает, чтобы наиболее важная информация располагалась рядом с основной кнопкой «Призыв к действию» «Добавить в корзину».
Необязательные поля — Необязательные поля четко обозначены как таковые.
Пример: Namshi использует звездочки для обозначения полей, которые должны быть заполнены. Отсутствие звездочки означает, что поле является необязательным — и это четко разъясняется пользователям.
Сохраненные данные — В формах пользователи могут перемещаться вперед и назад, не теряя информацию, которую они уже ввели. Например. оформить заказ.
Объяснение полей формы — Требования к форме поля четко объяснены.
Пример: Чтобы обеспечить пользователей точной информацией, NetOnNet объясняет, почему они ее запрашивают. Например, адрес электронной почты необходим, потому что именно туда будет отправлено подтверждение заказа.
Карусели — Каруселей, как правило, избегают, но они приемлемы, если все сделано хорошо и в меру.
Пример: На lastminute.com контент на более длинных страницах складывается, а не показывается в каруселях. Это облегчает работу пользователей и повышает вероятность просмотра контента. // Т. е. если у вас карусель в десктоп версии, в мобильной версии они все таки должна разделяться на отдельные элементы, которые можно привычным способом скролить вниз, а не вправо.
Упрощенные платежи — Упрощенный платеж предлагается через корзину (например, PayPal, Google Pay). Или сканирование карты / автозаполнение доступно при оформлении заказа.
Пример: Сторонние поставщики платежей уже имеют данные для выставления счетов и адреса доставки, поэтому Millets предлагает платежи PayPal непосредственно из корзины, что значительно упрощает конвертацию для их пользователей.
Progress bar — Если форма распределена по многим страницам/этапам, прогресс должен указываться на каждом этапе.
Пример: Даже если в вашей воронке конверсии всего несколько шагов, все равно полезно дать пользователям представление о том, где они находятся. У Namshi есть трехступенчатый процесс с названиями для каждого.
Карантин — После того, как процесс конверсии начинается, нужно чтобы небыло никаких ненужных элементов или кнопок, которые перенесли бы пользователей в другое место.
Пример: Как только пользователь входит в воронку конверсии, все ссылки в верхнем и нижнем колонтитулах сайта Namshi удаляются. Единственный способ покинуть воронку — закончить её или нажать на логотип, чтобы вернуться на главную страницу.
Количество результатов — При применении фильтров пользователи получают четкое указание количества оставшихся результатов.
Пример: Чтобы пользователи не могли отфильтровать результаты до нуля, де Бийенкорф сообщает пользователям, сколько результатов осталось при каждом выборе фильтра, и это число отображается на кнопке, используемой для его применения. // Тоже самое использует DNS-Shop.ru
Видимая цена — Текущая окончательная цена четко указана во всей воронке конверсии.
Пример: morhipo показывает пользователям полную разбивку цен.
Типы клавиатуры — Соответствующая клавиатура для типа поля.
Argos использует наиболее подходящую клавиатуру на основе информации, которую должны вводить его пользователи. // Если нужно ввести номер карты, то показывается цифровая.
Автозаполнение — Автозаполнение поддерживается для всех полей формы.
Пример: Все поля marksandspencer.com помечены правильно, поэтому пользователи, которые сохранили свои данные в своем браузере, могут заполнить форму легко и одним нажатием. // Я думаю вы сталкивались с таким — выбираешь своем ФИО и автоматом заполняется адрес доставки, который ты уже вбивал ранее на других сайтах.
Кликабельные номера — Пользователи могут коснуться телефонного номера, чтобы набрать его.
Принцип дефицита — Когда продукты распродаются, уровни запасов отображаются в режиме реального времени.
Пример: Информируя пользователей о низком уровне товарных запасов, morhipo создает ощущение срочности и способствует большему количеству конверсий. Запасы уровней предоставляются для каждого размера.
Загрузить больше результатов — В конце результатов поиска или страниц категорий имеется очень заметная кнопка типа «Далее» или «Загрузить еще».
Пример: В нижней части каждой страницы результатов поиска morhipo дает четкие указания относительно количества оставшихся страниц, а также кнопки для перехода на следующую страницу или предыдущую страницу.
Условия бесплатной доставки — Там, где это применимо, пользователям следует сообщить, сколько еще им нужно потратить, чтобы получить бесплатную доставку.
Пример: Superbalist предлагает бесплатную доставку всем пользователям, тратящим R450 и более. Всякий раз, когда пользователи приближаются к этой сумме, им говорят, сколько им нужно потратить, чтобы пройти квалификацию, что помогает увеличить размеры корзины.
Несколько фильтров — Несколько фильтров могут быть использованы одновременно, без перезагрузки. При необходимости, в пределах одной категории тоже.
Пример: Flipkart.com позволяет пользователям фильтровать результаты поиска по нескольким категориям одновременно и даже по нескольким параметрам в одной категории. Таким образом, пользователи могут легко сузить свои результаты поиска и найти то, что они ищут.
Гостевая касса — Пользователи могут покупать без необходимости создания учетной записи.
// Привет, Формула М2 ;) // Не берите во внимание, это так, личное.
Предлагаемый контент — В адресных формах система делает предложения на основе почтового индекса пользователя или региональна.
Пример: На веб-сайте marksandspencer.com пользователям просто нужно ввести свой почтовый индекс, а остальная часть их адреса будет получена и введена для них, что экономит время и усилия. // Крутая штука. Но можно поступить еще по другому — по адресу показывать индекс. Меня уже задолбало каждый раз гуглить индекс после ввода адреса проживания.
Нет результатов поиска — Если нет подходящих результатов поиска, пользователям предлагается руководство или помощь.
Пример: Если пользователь не получает результатов на сайте Coolblue, ему снова предоставляется окно поиска вместе с указаниями по улучшению поиска. Есть также ссылки на обслуживание клиентов и навигацию.
Рекомендательная система — Предоставляются подсказки Upsell, такие как «завершить внешний вид» (например, ремень с брюками, затирка с плиткой).
Пример: Отличный способ увеличить размеры корзины, помогая пользователям, — рекомендовать дополнительные продукты в комплекте. Coolblue делает это хорошо.
Следующие шаги — Пользователям предлагаются следующие шаги внизу каждой страницы результатов поиска. Например. «Вернуться наверх», «Фильтр» и т. д.
Пример: Чтобы облегчить пользователям процесс уточнения поиска при прокрутке длинных страниц с результатами поиска, Coolblue встроил свои функции фильтрации в заголовок. Пользователи могут фильтровать свои результаты в любой момент.
Обратная связь в реальном времени — Любые ошибки, сделанные в формах, четко обозначены, а необходимые действия показаны в режиме реального времени.
Пример: Argos уведомляет пользователей о том, что они покидают поле, содержащее неполную или неправильную информацию, а затем предоставляет четкие инструкции о том, как это исправить. В качестве дополнительного бонуса они также дают положительный отзыв, когда каждое поле заполнено правильно (зеленый значок).
Сменные изображения — Там, где это полезно и уместно, изображения могут менять цвета и т. д.
Пример: На некоторых страницах продукта Coolblue пользователи могут выбирать между несколькими цветами. Когда цвет меняется, изображение автоматически обновляется — это действительно помогает пользователям принимать решения о покупке.
Масштабируемые изображения — Все изображения продукта должны быть масштабируемыми без пикселизации.
Пример: выбор продуктов онлайн без возможности их физического осмотра может быть пугающим. morhipo позволяет пользователям увеличивать изображения, не влияя на качество и не создавая пикселизацию. Они также предоставляют много изображений для каждого продукта.
Даты доставки — Варианты доставки должны быть указаны с точки зрения даты прибытия, а не количество дней.
Пример: Если вы заказываете что-то у morhipo, они предоставляют диапазон дат, когда он прибудет. Для пользователей это гораздо более интуитивно, чем сказать, что оно придет через определенное количество дней.
Искать снова — После запуска поиска пользователи могут изменить условие поиска или даже полностью удалить его. Например с помощью кнопки «х» в поле.
Пример: Пользователи сайта Coolblue могут легко уточнить свой поиск или начать новый поиск в поле поиска. Поле поиска присутствует на странице результатов и заполняется последним поисковым термином, который можно легко удалить, используя «X» справа.
Поделиться — Пользователи могут легко поделиться вашим продуктом, услугой или предложением через копируемый URL или кнопку «Поделиться».
Пример: Coolblue имеет структуру URL, которая позволяет пользователям легко копировать и делиться страница.
Объяснение преимуществ — Преимущества четко объяснены.
Пример: Когда вы просите пользователей зарегистрироваться на вашем сайте, полезно сообщить им, что они получат взамен. marksandspencer.com делают большую работу, кратко разъясняя преимущества регистрации.
Список пожеланий гостей — Продукты могут быть добавлены в избранное и сохранены в списке желаний гостей (не зарегенных юзеров).
Пример: Пользователи могут «добавлять в избранное» предметы на сайте Coolblue, нажав символ сердца рядом с основным призывом к действию. Они также могут поделиться своим списком пожеланий, и им предлагается войти в систему или создать учетную запись, чтобы сохранить их список.
Орфография
Пример: При обнаружении орфографической ошибки на сайте Argos предоставляются наиболее релевантные результаты поиска. Argos также сообщает пользователям об опечатках и показывает, какой термин они считают нужным. // Если юзер ввел слово с ошибкой вы должны знать об этом и сообщить ему. И вывести конечно же правильные результаты поиска без ошибок.
Сохраненные поиски — Предыдущие поиски автоматически сохраняются даже для пользователей, у которых нет учетной записи.
Иконки объяснят
Пример: marksandspencer.com используют икончи, чтобы помочь покупателям найти то, что они ищут. Они также используют текст для описания этих значков, поскольку не все пользователи знают, что они имеют в виду.