Ошибки юзабилити: Юзабилити ошибки и их влияние на конверсию сайта – Plerdy

Юзабилити ошибки и их влияние на конверсию сайта – Plerdy

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

Не стоит думать, что выявить ошибки юзабилити – это очень просто. Обычно для этого нужно немало времени и сил. Но если оставить их без внимания, то удобство использования сайта будет низким, а соответственно снизится его эффективность и общая конверсия. Даже самая незначительная на первый взгляд проблема может заставить пользователя покинуть ваш сайт во время выполнения задачи. Когда речь о целой совокупности проблем, то они вообще могут сделать выполнение любой задачи на сайте практически невозможной.
Ошибки юзабилити способны повлиять на то, насколько удобно, эффективно и результативно пользователь, попавший на ваш ресурс, проходит свой путь к клиенту. Конечно, проблемы с юзабилити бывают разными, одни решаются достаточно просто, а другие требует особого подхода и внимания. Но, так как именно удобство использования сайта является важнейшей частью успеха вашего онлайн-бизнеса, стоит позаботиться о том, чтобы пользователи смогли в полной мере воспользоваться веб-сайтом.
Мы предлагаем вам список основных ошибок юзабилити, о которых вам стоит знать, прежде, чем запускать продукт. Кроме того благодаря этому списку вы сможете провести качественный аудит существующего ресурса, определяя все проблемы и искореняя их.

Основные ошибки юзабилити

Отсутствие акцентов на заголовки

Возможно вы удивитесь, но заголовки являются самой популярной вещью на любой странице. Согласно исследованиям, они привлекают больше внимания, чем яркие картинки и анимации. Большинство людей принимают решение о том стоит ли оставаться на сайте именно исходя из прочитанного заголовка. Это значит, что у вас есть всего секунда, чтобы привлечь внимание посетителя с помощью заголовка.
Помимо самого наличия заголовка, он должен быть правильно сформулирован. Ваша конверсия будет сведена к минимуму, если ваш заголовок не будет сообщать посетителям, о чем эта страница.
Обратите внимание, что четкие и краткие заголовки должны быть не только на главной, но и на всех важных страницах. Они должны стать трансляцией сообщения, которое вы планируете донести до посетителей, чтобы у них появился повод остаться на сайте.

Длительное время загрузки страниц

Люди очень нетерпеливы, наверное, именно поэтому скорость загрузки сайта является одним из важнейших критериев его корректной работы. Казалось бы, что такое 2 секунды, но именно снижение скорости загрузки страницы на это время приводит к негативному отношению пользователей, соответственно снижению конверсии. Когда речь о трех секундах ожидания, то вы теряете около 40% пользователей.
Кроме того быстрый сайт понадобится и тем, кто хочет, чтобы Google ранжировал его страницы. Это значит, чтобы ваш бизнес попал в высшую лигу, необходимо позаботится о данном пункте.

Типографика и интервалы

Если вы думаете, что этот пункт не важен, то вы можете терять клиентов, даже не понимая причины. Многие исследования читабельности показали, что типографика один из важнейших фактов, влияющих на восприятие текста. Так, важно придерживаться интервалов, что позволяет быстрее читать и проще воспринимать написанное. Пробелы должны быть, как между строками, так и вокруг них.
Важно также учесть цветовые решения. Например, стандартный черный на белом может показаться скучным, но он дает лучшие результаты.

Игнорирование проектирования на основе шаблонов чтения

Важно не только подобрать шрифты и интервалы, учитывая колористику, но и учесть то, как читает пользователь. Многие тесты показали, что большинство людей читают по F-образцу, который больше склоняется к левой стороне экрана. Согласно этому, большую часть своего внимания пользователи концентрируют на левой стороне страницы (около 70% времени).
При этом люди, которые читают справа на лево, концентрируют внимание с точностью до наоборот. Это значит, что люди обычно просматривают сайт относительно шаблонов чтения. Поэтому все важные элементы стоит сосредоточить слева.

Сложная и непонятная навигация

Хотите, чтобы пользователь навсегда покинул ваш веб-ресурс, тогда устройте ему квест с поиском нужной информации и кнопок. Навигация играет крайне важную роль, вы должны смотреть на сайт глазами будущего клиента.
Обратите внимание, что более 70% пользователей переходят по ссылкам, а не используют поиск по сайту. Обычно, поиск открывают только в случае, когда не могут найти необходимый продукт, услугу или информацию. Именно поэтому рассчитывать, что ваши посетители воспользуются поиском, пусть даже очень удобным, не стоит. Лучше убедитесь, что навигация настроена правильно, она ясна и интуитивно понятна. В ней должны содержаться кнопки для переходов к важным частям веб-сайта, но без переборов, чтобы пользователь не запутался. Не стоит использовать элементы, которые вводят пользователя в заблуждение (выделенные кнопки, работающие, как чекбоксы).
Существует также проблема с тупиками, когда на сайте нет подсказок или альтернативных предложений. Обычно, пользователи сразу покидают такой ресурс, а если даже и остаются, то долго странствуют в поисках решения, явно не желая всего наилучшего создателю сайта.

Слишком много текста и перебор с длинной страницы

Конечно, целевая страница всегда содержит больше всего важной информации, ведь именно она призвана «зацепить» посетителя и заставить его остаться у вас. При этом, чем длиннее страница, тем меньше людей на ней останутся. «Стенки текста» редко привлекают людей, именно поэтому важно помнить о пункте, который мы описывали выше и делать «разбивку» контента, не забывая о подзаголовках и интервалах. Благодаря этим приемам, даже длинный текст становится менее пугающим и легким в восприятии, что дает ему шанс быть прочтенным.

Большое количество баннеров и анимации

Увы, но это проблема трети всех веб-ресурсов в сети. Тут речь идет не только о баннерах в чистом виде, но и о различных плашках «Акция», «Скидки», «Подпишись на наш канал» и т.д. Даже назойливое окошко с онлайн-консультациями, где ответа можно ждать около часа, а то и дольше – это то, что отпугивает пользователей.
Когда же речь об анимации, то тут главное правило – не перемудри. Конечно, красивая анимация украшает ресурс и привлекает внимание, но во всем должна быть мера, с чем часто грешат создатели веб-ресурсов. Увлечься и напихать всю страницу, пусть даже красивой, анимацией – это то же самое, что лично отказаться от большего процента клиентов.

Отсутствие оптимизации сайта под разные устройства

Сразу отметим, что речь идет не только об адаптивности под разные браузеры и мобильные версии (о которой уже даже говорить незачем, ведь это давно всем понятно), а именно о разных гаджетах. Далеко не все пользователи обладают современными девайсами. К примеру, на небольшой нетбук, которому пара-тройка лет, с трудом прогрузится современная анимация, сайт будет подвисать. Если пользователя действительно интересует продукт, то он, естественно, останется, но не стоит забывать о конкурентах, у которых этой проблемы может и не быть. Чем лучше ваш сайт работает на разных устройствах, тем выше у вас конверсия.

Нет четкого призыва к действию

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

Некачественный контент и изображения

Сайт, куда забросили низкосортные фото и «кривой» текст, можно сразу списывать со счетов. Невостребованный, неграмотный и непонятный контент – это прямая дорога к низкой конверсии, как и некачественная графика и изображения.
Решить эту проблему достаточно просто – используйте высококачественные картинки и займитесь оптимизацией графики под экраны с большим расширением. Если есть возможность, то наймите фотографа и сделайте съемку продукции, услуг. Это дорого, но очень быстро оправдывает себя.
Когда речь о контенте, то решение также просто – изучите свою ЦА, ее интересы, четко разрабатывая план публикаций, основываясь на данной информации. Не бойтесь разных типов контента, как видео, инфографики, фотоотчеты.

Плохо оформлена корзина и раздел оформление заказа

Можете быть уверенны, что даже, когда пользователь уже готов сделать покупку и добавил товар или услугу в корзину, он все еще может отказаться от сделки из-за плохой оптимизации разделов «Корзина» и «Оформление заказа». Им нужно уделить не меньше внимания, чем главное странице.
Что касается «Корзины», то, во-первых, четко отработайте все возможные вопросы и возражения. Во-вторых, не бойтесь добавлять инструмент cross-sell. Если вы аккуратно и ненавязчиво предложите клиенту дополнительные услуги или товары, то можете заметно улучшить конверсию. И в третьих, помните, о четком призыве к действию, о котором мы уже писали выше.
«Оформление заказа» также должно быть продумано до мелочей. Оптимизируйте форму заказа, проявите особую заботу о пользователе, в виде подпунктов, которые ему могут помочь («Не надо перезванивать мне», «Посылку получит …», «Подготовьте сдачу» и т.п.).

Слишком большой выбор

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

Отсутствие гарантий и отзывов

Пользователи хотят быть уверенны в товаре или услуге, которая их заинтересовала. Им нравится, когда есть отзывы от тех, кто уже успешно воспользовался предложением сайта. Кроме того это дает ощущение безопасности сделки. Для этого откройте возможность делится вашим контентом в социальных сетях, публикуйте отзывы клиентов, проводите исследования и убедите пользователей в отсутствии финансовых рисков, связанных со сделкой.

Пример юзабилити-аудита сайта

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

Версия для ПК

1. На главной странице https://vacuactivus.ru/ в поле Контакты стоит добавить флаги или названия стран, для которых прописаны телефоны. Кнопку связи следует выделить.
   
2. Здесь информация сложно воспринимается, следует использовать более контрастные цвета для контента.
   
   
3. Этот элемент следует сделать меньше, но более контрастным, чтобы он достаточно выделялся, не закрывая контент сайта.
   
4. При появлении поп-ап окна после нажатия на этот элемент, вместе с ним выделяются другие элементы, хотя они не активные во время показа поп-ап окна.
   
5. Текст слишком длинный для кнопки.
   
6. При неправильном введении запроса в Поиск, не подтягивает похожие запросы.
   
7. Все дополнительные материалы для просмотра должны открываться в новом окне. Например: https://vacuactivus.ru/allproducts/cryotherapy-chambers/nitrogen-tanks/
   
   Соответственно и в шапке сайта.
   
8. На странице товаров эту область нужно убрать, а кнопку удалить. https://vacuactivus.ru/allproducts/cryotherapy-chambers/cryotherapy-capsule-active-cryosauna/
   
9. На странице https://vacuactivus.ru/how-does-cryotherapy-works/ среди текста есть большое изображение с англоязычным текстом.
   
10. Нет изображения корзины в шапке сайта.
    
11. Нет кнопок изменение количества товара https://vacuactivus.ru/cart/.
    

Мобильная версия

1. На главной странице не видно текст https://vacuactivus.ru/.
   
2. На страницах значительную часть экрана занимают эти элементы. Нужно, или вообще убрать их (captcha), или, если они необходимы, то уменьшить их (обратный звонок).
   
3. На главной странице текст разного размера.
   
   
4. Область с меню и логотипом сайта должны быть зафиксированы при скролле.
   
5. Пункты меню должны быть ближе к кнопке открытия и закрытия меню.
   
6. Саму область меню стоит сократить — это поможет пользователям проще сориентироваться на сайте и понять его структуру. Также при клике на область без меню — оно закрывается.
   
7. Кнопки социальных сетей здесь без ссылок — при клике на них не происходит переход. Кроме этого стоит поправить кнопку поиска.
   
8. Блок с категориями следует разместить в начале страницы.
   https://vacuactivus.ru/allproducts
   
9. Нужно поправить верстку блока на странице Корзины https://vacuactivus.ru/cart/
   

Выводы

Юзабилити-аудит – это первый шаг к повышению конверсии. Если вы правильно подойдете к нему, то сможете обнаружить все препятствия, которые стоят на пути от пользователя к клиенту. Благодаря ему вы сможете найти наиболее эффективные места вашего веб-ресурса и самые слабые его места, поняв, как пользователь ведет себя, попадая к вам на страницу.
Если говорить по-другому, то такое тестирование дает вам много знаний, открывая новые перспективы для бизнеса. Однако, очень важно подойти к нему правильно, чтобы не наделать еще больше ошибок, чем в начале пути. Именно для этого мы рассказали вам о 13 самых распространенных ошибках, которые могут допустить, как новички, так и настоящие профессионалы. Пройдясь по этим пунктам, вы сможете убедиться, что не повторяете их или обнаружить и устранить проблемы.

8 ошибок юзабилити, которые губят сайт

Sostav.ru при помощи ведущих экспертов рынка продолжает разбирать российские интернет-ресурсы с точки зрения качества их исполнения и удобства использования. Если в прошлый раз мы анализировали сайты госкомпаний и ведомств, то на этот раз рассмотрели типичные ошибки сервисных интернет-ресурсов: онлайн-магазинов, сервисов услуг и т. д.

1. Навязчивые баннеры

Большое количество навязчивых баннеров встречаются на каждом третьем портале и интернет-магазине, уверены эксперты. Под навязчивыми баннерами понимаются не только баннеры как таковые, но и плашки с фразами «подпишись на нас в соцсетях», «скидки!», «рассылка новостей», лезущие из угла назойливые окошки онлайн-консультантов, в которых никто не отвечает по часу. Этим грешат интернет-магазины (особенно одежды), торрент-трекеры и сайты с пиратским контентом, а также популярные развлекательные сайты.

Ольга Круглова, арт-директор компании «ТриЛан»

При заходах на сайты Adme.ru, Babywit.com, баннеры напрочь перекрывают содержимое страницы. То есть, ты еще не осмотрелся на месте, не решил, а по адресу ли попал, а тебе уже тычут в лицо просьбами и предложениями.

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

А в случае cайта агентства элитной недвижимости «Славянский двор», например, плашка с вопросом, который для меня на данный момент неактуален (думаю, любой человек в состоянии сам найти и открыть окно онлайн-консультанта на сайте, когда он действительно потребуется), вообще перекрывает часть важного функционала — фильтра по недвижимости.

2. Отсутствие оптимизации

Разработчики довольно часто забывают о том, что у многих пользователей далеко на самые передовые устройства. Речь, причем, идет именно об устройствах, а не старых браузерах, уточняет Глеб Железин из агентства Nectarin Agency.

Глеб Железин, Head of Production Nectarin

Учитывая необходимость поддержки всех браузеров, разработчикам часто приходится использовать не самые эффективные решения для создания верной, кроссплатформенной анимации. Но небольшой нетбук с трудом переваривает обилие современной анимации: страница подвисает и может вести себя некорректно. Не так страшно, если пользователю очень нужен ваш продукт, он, несмотря на неудобства, останется. Но если он сравнивает с конкурентами? Скорее всего, он просто закроет полуработающий сайт.

Что касается нового сайта «Альфа-Банка» – он красив, но работает очень сомнительно. На нашем, не самом слабом, лэптопе (переносимом персональным компьютере) сайт подергивается, и его работу нельзя назвать плавной. Будем надеяться, что Студия Артемия Лебедева поправит это в будущем.

А вот сайт «Рокетбанка» показывает, как надо сочетать понятный и простой контент с небольшой анимацией. Такой сайт отлично работает на любых устройствах.

3. Элементы сайта, вводящие в заблуждение

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

4. Избыточная анимация

Сама по себе анимация на сайте выглядит очень красиво и создает приятное впечатление, но если переборщить с ее количеством и оптимизацией — не выйдет ничего хорошего, уверены эксперты. Пример избыточной анимации Алексей Шевцов из WebProfy увидел на сайте «Зарулем.рф», а Глеб Железин из Nectarin — на сайте израильской больницы «Ассута». В таких случаях владельцам сайта следует половину анимированных элементов вообще убрать.

«Часто можно встретить ситуацию, когда буквально каждый элемент на странице анимирован. Но за сомнительной красотой скрывается проблема отвлечения пользователя от основного — контента. Так или иначе, пользователь будет отвлекаться на анимацию, и его концентрация на вашем продукте будет ниже», — уверен Железин.

5. Многобукв

Не нужно показывать людям больше информации, чем они в состоянии воспринять, советует Алексей Шевцов. Когда клиент хочет рассказать обо всех своих услугах одновременно, это приводит к тому, что пользователь не в состоянии быстро сориентироваться и принять решение. То есть для того, чтобы сделать ресурс эффективным, следует не перенасыщать. Как это сделали, например, туроператор «Балкан» и сайт об отелях на русском языке TopHotels, а наоборот, ограничивать пользовательский выбор.

Когда информации на сайте слишком много, клиент достигает обратного эффекта: человек видит сразу все, но на деле ничего не различает. Страницу эксперты советуют делать длиной в несколько экранов и не использовать контент-боксы внутри страницы, чтобы к проблеме избыточной информации не добавлять еще и «эффект сюрприза» (до клика не известно, нужен ли пользователю этот контент), как это сделал, к примеру, на своем сайте туроператор Tez Tour.

Алексей Шевцов, арт-директор WebProfy (Kokoc Group)

Важно определить приоритеты. Люди приходят на сайт, чтобы совершить некую последовательность действий. Она должна быть продумана на этапе разработки ресурса. Каждый раз, рисуя user path, конструктор делает предположение о том, какие именно детали могут понадобиться пользователю и именно их расставляет на виду. Не каждое предположение оправдывается, но не делать их совсем — ошибка. Так, сайт туроператора Pac Group предлагает пользователям самостоятельно решать свои проблемы.

Если большой объем информации все же неизбежен, нельзя смешивать разные ее типы. Не стоит применять один и тот же стиль оформления к новостям, акциям и рубрикатору или делить новости на несколько одинаковых на вид категорий. Отделить нужные данные в этом случае становится довольно трудно, как на сайте другого туроператора ICS Group.

Лучше не дублировать инструменты, если можно решить две задачи при помощи одного. Тот же оператор ICS Group предлагает пользователям три (чартеры не в счет) зубодробительных формы там, где мог бы справиться один настраиваемый мастер. Идеальный интерфейс будущего – это черный ящик, воспринимающий запрос в свободной форме.

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

6. Тупиковый сценарий

Отсутствие подсказок и альтернативных предложений — частая ошибка многих сайтов. Пользователь на подобных ресурсах совершенно теряется и, по возможности, тут же уходит к конкурентам. А если такой возможности нет — часами пытается разобраться в навигации и инструментах, посылая проклятья владельцам сайта. Лояльность к бренду при этом падает ниже плинтуса.

Дарья Сушкова, старший проектировщик веб-разработчика DEFA

Неприятная вещь на сайте «Utair»: если выбрать даты, на которые нет рейсов, сервис выдает сообщение об ошибке. При этом мы оказываемся на пустой тупиковой странице без каких-либо подсказок, какие даты стоит выбрать, чтобы рейсы всё-таки нашлись.

Пользователю приходится путем перебора искать дату, когда рейсы всё-таки найдутся. Многие в этот момент просто уйдут с сайта. Важно предлагать альтернативные сценарии: просмотр расписания, выбор из перечня доступных дат и так далее.

Александр Ковальский, руководитель и креативный директор агентства Creative People

Весь современный подход uix/ui строится на том, что мы одинаково хорошо должны отвечать как на глобальные вопросы (куда я попал? как мне это может помочь? и т.д.), так и на частные (когда речь идет о конкретном сценарии формы или кнопки). Чаще всего аудитория разная, потребности разные, но если это не бесхребетный лендинг, а нормальный сайт — ему нужна навигация. Понятная навигация. Звучит слишком просто и банально, но большое количество огромных сайтов спотыкаются именно об этот момент.

Главный грех компании-разработчика до сих пор в моде: спроектировать структуру сайта громоздкой, запутанной, без четких сценариев.

7. Большой выбор продуктов

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

Сайт «Промсвязьбанка» — классический пример сайта с избыточным количеством продуктов. Глеб Железин советует владельцам сайта этот же контент реструктурировать и расположить так, что пользователи смогут удобно сравнить варианты, быстро найдя нужный именно им.

Пример, на который стоит равняться — сайт заграничного VDS-хостинга DicitalОcean, наглядно отражающий один из трендов последних лет — довольно однообразное, но тем не менее эффективное оформление продуктовых страниц или страниц с выбором подписки в виде карточек (их удобно сравнивать).

5 типичных ошибок интернет-магазинов

1. Отсутствие реакции интерфейса на добавление товара в корзину: кнопка уже добавленного товара никак не меняется. Сайт магазинов бытовой техники «Сеть техники» лучший тому пример (должна измениться, как минимум, надпись — «в корзине»). Иногда блок корзины не показывает наличия и количества добавленного в нее товара, как на сайте интернет-магазина техники «Позитроника».

2. Отсутствие функции покупки в один клик, покупки без регистрации, а также форма регистрации и оформления заказа с лишними для его выполнения полями. Издательский дом «Питер» при покупке электронной книги зачем-то требует в обязательном порядке контактный телефон и ФИО.

3. Неадаптивный к опечаткам и вводу в неправильной раскладке поиск, как на сайте интернет-гипермаркета Dostavka.ru.

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

5. Отдельного упоминания по степени «неюзабельности» заслуживают сайты большинства образовательных учреждений, особенно высших, часто имеющих объемную и запутанную структуру (cайт Российского университета дружбы народов, сайт Северного (Арктического) федерального университета имени М.В. Ломоносова и другие) и дошкольных, ввиду перегруженности декором, анимацией, флэшем и прочими «приправами» в котлах ада для дизайнеров (сайт детского сада в г.Белово, сайт московский центр развития личности «Лана»)

Ольга Круглова, арт-директор «ТриЛан».

8. Трудности при поиске и анализе «ошибок»

Важный аспект в работе сервисов, связанных с онлайн-платежами — это корректная обработка ошибок и уведомление пользователей. Например, на сайте авиакомпании «Победа» при оплате билета сервис не сообщает, прошел платеж или нет. На сайте той же авиакомпании, отмечает Дарья Сушкова, старший проектировщик веб-разработчика DEFA, невозможно быстро узнать максимальный размер и вес багажа (меж тем, компания имеет жесткие ограничения на его провоз).

«Для этого, во-первых, нужно переходить на страницу «Правила перевозки», во-вторых, найти на ней нужную информацию не так-то просто. Поиска на странице нет, а все блоки информации спрятаны под «плашками», которые нужно по очереди разворачивать, чтобы либо прочитать содержимое каждого из блоков, либо воспользоваться ctrl+f в браузере. Глобального поиска на сайте также нет», — уточняет Сушкова.

Довольно часто получается так, что плохой с точки зрения юзабилити сайт имеет хороший дизайн и даже получает за него награды. За примерами можно обратиться на специализированный портал о наградах в области дизайна сайта и веб-разработки http://www.awwwards.com, советует Григорий Коченов, креативный директор интерактивного агентства AGIMA.

«Иногда надо долго ходить по сайту, который получил статус «Site of the day», просто чтобы понять, зачем он и про что. Зато графика хорошая и визуально они сделаны идеально. Но смысла мало, или смысл дизайна в самом дизайне, тогда все хорошо, но все равно непонятно», — уточняет Коченов.

Григорий Коченов, креативный директор интерактивного агентства AGIMA

Мне больше нравятся примеры того, как плохой, немодный и несовременный дизайн являются настоящим Дизайном с большой буквы.

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

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

Сайт разнообразного рода электронных объявлений, пользующийся большой популярностью у американских пользователей интернета Graiglist.org — идеальный пример того, как дизайн 90-х живет сейчас и приносит хорошие деньги. И ему не нужен редизайн. Он убьет атмосферу и этот уникальный дух ресурса. И что еще важнее, убьет все пользовательские привычки и сценарии, к которым миллионы человек привыкли почти за 20 лет.

Плохой дизайн — дизайн, где не решается задача. Если вам удобно и вы можете его использовать, можно простить любой внешний вид. Это вторично.

Эксперты сходятся во мнении, что есть и удачные примеры юзабилити сайтов, отвечающие всем выше перечисленным критериям. Среди таких, например, отличились сайты Skyscanner.ru и TuTu.ru, сервисов поиска и сравнения цен авиабилетов, отелей и проката автомобилей. Сайты Skyscanner и TuTu одновременно решают бизнес-задачи и удобны с точки зрения пользователя.

Константин Нефедов, управляющий партнер digital-агентства Далее

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

Если взять, к примеру, процесс выбора и покупки на том же SS, то все основные элементы сразу же вынесены на главную не перегруженную лишним страницу, а покупку уже можно совершить на следующей экране, перейдя по ссылке на партнерский сервис. То же самое в случае и с ТуТу — все нужное сразу под рукой на первом экране, а на втором — уже возможна покупка.

Десять ошибок юзабилити: публикации CASTCOM

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

1. Очень плохо заметная ссылка авторизации на сайте (log-in)

На сайте Backpack, вы сможете найти массу информации о принадлежности и функционале инструмента планирования и управления проектами. Правда,после регистрации на сайте вам придется тщательно поискать ссылку для авторизации, иначе вы просто не сможете воспользоваться этим инструментом.

А для тех кто решил не тратить свое время на поиски – ссылка для авторизации «Log-in» находится по центру страницы в желтом прямоугольнике. Так задуман веб дизайн данного сайта. Правда, не особо хороший вариант её расположения?!

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

2. Всплывающие окна (pop-up) для отображения в них контента

На данный момент практически у всех современных браузеров, таких как Firefox, Safari, Opera и Internet Explorer, есть « штатный блокировщик», который занимается блокировкой всплывающих окон, рекламных баннеров и всего того, что похоже на явную рекламу. Поэтому использовать поп-апы для отображения контента бессмысленно и не разумно.

Adidas все-таки решил воспользоваться данным подходом на своем сайте (ImpossibleStory.com), вследствие чего, большая часть аудитории перестала посещать его. Мало кому нравиться постоянно отключать блокировщика ради просмотра сайта.

3. Замена скроллинга и нового способа реализации меню перемещением элементов при помощи перетягивания курсором мыши

В принципе этот способ перемещения не ошибка, просто он не особенно привычен и обычен для пользователей и веба. В PDF-читалках можно найти наглядный пример применения такой техники перемещения элементов.

На сайте Fichey вы сможете оценить эту веб-ноу-хау технологию. При помощи элемента веб-дизайна Flash она реализована очень красиво и оригинально. Но, к сожалению, из-за особенностей Flash, вы не сможете сделать закладку на конкретную страницу.

4. Неотличимые от обычного контента ссылки

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

Такого как на этом сайте не должно быть ни в коем случае RealPlayer.

5. Неоднозначное восприятие и перенасыщение информацией

Не допускайте в контенте перенасыщение информацией веб-страниц сайта. Примером данной ситуации послужит сайт Overstock.

Тут используются различные стили для ссылок. Если заинтересовало, поугадывайте, где из них ссылка, а где контент, очень похожий на ссылку.

6. Блокировка браузера до тех пор, пока пользователь не выполнит требования предъявляемые на сайте

Есть множество способов представить свой сервис посетителю сайта. И примером одного из самых неприемлемых является сайт Scriblink. На этом сайте вас будет приветствовать окно с требованием внести имя, и как не странно, пока вы этого не сделаете, пользоваться сайтом вы не сможете.

Что самое интересное, ничто не помогает:

• Ни «cancel»

• Ни «ok»

• Ни то, что вы пытаетесь свернуть или развернуть изображение

• Ни клик вне модального окошка

• Окно не закрывается

• Клик по иконке «?» так же не срабатывает

Очень неприятная ситуация сложившаяся всего лишь по той причине что вы чем то заинтересовались…

7. Один слой сайта «наползает» на другой

Эта ошибка встречается очень часто. Зачастую это происходит тогда, когда выпадающее меню «уходит» под другой слой, составляя, таким образом, неудобства для посетителя, который по этой причине не может выбрать нужный ему пункт меню.

Подобной проблемой страдает и Yahoo.com.

8. Динамическая навигация

Очень симпатично и оригинально, не так ли?!

На самом деле это очень неудобно.

9. Выпадающие меню

При помощи выпадающего меню вы сможете освободить пространство на сайте, которое можно использовать для других нужных вам целей. Незаменимая вещь не так ли?

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

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

Примером тому могут послужить 2Advanced и Brita.net.

10. Мигающие изображения

Не секрет что большинство веб-мастеров используют сайты для дохода от рекламных баннеров, и большинство реклам, как правило, анимированные gif или обработанные во Flash. Это естественно отвлекает и мешает пользователю получить максимум информации от контента.

Превосходное издание Digital Web Magazine, допустил эту досадную ошибку, разместив в левом сайдбаре страниц сайта анимированный рекламный блок.

Интересный эксперимент или ошибка будущего?

Dontclick.it ставит интересный эксперимент, в котором предоставляет возможность опробовать новую систему, с помощью которой без кликов, а просто наведением курсора, можно перемещаться по сайтам. Изначально появляется восторг, ощущение чего-то инновационного и по-настоящему неповторимого. Но подумайте хорошо, ведь за этим скрываются и недостатки. Как например открыть ссылку в новой вкладке браузера?

Поэтому, при разработке сайта, думайте, вставая на сторону человека, который будет открывать Ваш сайт, и решение сразу найдется.

Почему снижается конверсия сайтов? Примеры 60 ошибок в дизайне и юзабилити / Хабр

Ошибки в дизайне и юзабилити — это те недочеты, из-за которых посетители критикуют сайт, не хотят ничего покупать, отказываются от подписки и переходят к конкурентам. Чаще всего эти ошибки касаются технических неисправностей, логики, навигации, оформления, маркетинга и контента на сайте.

В этой статье мы рассмотрим примеры основных UX ошибок и выделим шестьдесят распространенных проблем, исправление которых гарантирует рост конверсии.

Если сомневаетесь, что это вам нужно — прочтите историю недовольного Васи. В ней рассказывается, как из-за одной ошибки интернет-магазин лишился постоянного покупателя.

Как Вася выбирал микрофон в интернет магазине с плохим юзабилити

Нашего знакомого зовут Вася. Он начинающий ютубер, которому понадобился микрофон для озвучки видеороликов. Его будущий микрофон должен обладать тремя характеристикам: невысокая цена, чистый звук и востребованность на Авито.

Последний пункт особенно важен, поскольку с озвучкой может не сложится и большую часть вложенных денег наш ютубер не прочь вернуть. Требования сформулированы и Вася отправляется за микрофоном на сайт проверенного интернет-магазина.

За счет продуманной навигации Вася не растерялся и быстро нашел категорию «Микрофоны».

Когда Вася открыл категорию «Микрофоны», то сразу столкнулся с первой проблемой в виде непродуманного рубрикаторного фильтра. Этот фильтр не подходит для новичков, поскольку требует понимания микрофонной тематики. Без этого сложно:

Поскольку в рубрикаторе не было никаких подсказок, Вася отфильтровал товары по назначению и выбрал студийные микрофоны. Логика здесь такая: если студийный — значит качественный. Все остальное второстепенно и непонятно.

В разделе «Микрофоны» Васю встретил сложный фильтр, который новичку правильно не настроить. Если на знаете тему — не сможете выбрать подходящий микрофон.

В рубрике студийных микрофонов Вася расставил товары по возрастанию цены и остановил свой выбор на микрофоне Superlux HO8 за 50 $. Это самый бюджетный вариант из доступных студийных микрофонов и по отзывам покупателей стоит своих денег. То есть то, что нужно для начинающего ютубера. Вася оформляет покупку и уже договорился с заказчиком на озвучку первого видеоролика.

Выбор Васи — микрофон Superlux HO8 стоимостью 50 $.

Вася дожидается посылки, распечатывает свой микрофон, подключаете его к компьютеру и получает отвратительный звук. Все дело в фантомном питании, без которого Superlux HO8 не может полноценно функционировать. Этому моменту в карточке товара уделена одна строка, которую Вася из-за неопытности пропустил.

Источник фантомного питания — это дополнительный элемент, без покупки которого студийный микрофон Superlux HO8 не будет нормально звучать. В карточке товара этот момент прописан одной строкой, которую неподготовленный новичок легко пропустит.

Далее Вася начал самостоятельно собирать информацию о выбранном микрофоне и выяснил следующие нюансы:

1. На сайте этого же интернет-магазина самая дешевая установка фантомного питания ZEEPIN 48V. Она стоит около 37 $ и доступна только по предзаказу. Стоимость более дорогих установок начинается от 65 $.
2. Помимо фантомного питания к микрофону Superlux HO8 нужно приобрести стойку и поп-фильтр. Еще не помещает внешняя звуковая карта и акустический экран для подавления лишних шумов. Все вместе это еще не менее 100 $.
3. Вместо всего перечисленного можно было приобрести бюджетный USB-микрофон, который смог бы удовлетворить потребности начинающего ютубера. Например, за 50 $ можно приобрести Trust GXT 232; а за 85 $ — Blue Microphones Snowball iCE.

Что получилось в итоге: Вася зря выкинул деньги и не пользуется купленным микрофоном, а владелец интернет-магазина потерял постоянного клиента.

Установка фантомного питания ZEEPIN 48V за 37 $.

Чтобы избежать потери клиента, владельцу интернет-магазина стоило посмотреть на свои товары с позиции новичка и сделать ставку на образовательный контент — ко всем сложным продуктам добавить подсказки, полезные статьи или видео. Если бы Вася своевременно узнал о фантомном питании, то не купил ненужный ему товар: он бы перешел на страницу с микрофоном Superlux HO8 → из открывшихся подсказок узнал про фантомное питание → перешел бы на статью, где подробно рассказывается про фантомные установки → изучил материал про разновидности микрофонов → вернулся бы к списку микрофон и выбрал из доступных предложений оптимальный вариант с USB-разъемом. Все бы остались довольны и продолжили сотрудничество. А так обида и уход к конкурентам.

Отсутствие образовательного контента — это одна из многих ошибок, которую допускают владельцы интернет-магазинов. О других проблемах мы поговорим далее.

Техническая часть

Низкая скорость загрузки

Примерно 40% пользователь покинут ваш сайт, если не увидят его исходный вид в первые три секунды. Еще столько же посетителей уйдут сразу после того, как кликнут на какой-то раздел и он снова зависнет. Чтобы этого избежать — нужно постоянно проводить тесты, оптимизировать тяжелые изображения и проверять скорость загрузки шрифтов. Отдельная ситуация с видео — если без них никак, то нужно вкладывать дополнительные средства и думать о поднятии производительной мощности сайта. Если видео можно заменить текстом и изображениями, то лучше так и поступить. Скорость загрузки важнее формата контента.

Долгая загрузка сайта.

В примере показано, что время загрузки сайта составляет 9,83 секунды. Это недопустимый вариант, поскольку редко когда посетители ждут более 3 секунд.

Тяжёлые файлы картинок.

Тяжёлые картинки — это один из ключевых факторов, оказывающих влияние на скорость загрузки сайта. Поэтому если нужно увеличить скорость — в первую очередь займитесь перезаливкой изображений.

Большое количество запросов во время загрузки страницы.

В Amazon провели исследования и посчитали, что если скорость загрузки сайта падает хотя бы на 100 мс, то конверсия продаж сразу снижается на 1%. Чтобы этого не допустить — владельцам сайтам рекомендовано проводить два типа тестов. Первый тест должен проводиться в реальном времени и по нему можно сразу вычислить медленные страницы. Второй тест должен быть периодическим (раз в неделю или месяц) и по его результатам можно исправлять все медленные элементы.

Неработающие или битые ссылки

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

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

Битые ссылки в программном коде.

Постоянный мониторинг — это единственный способ избежать битых и неработающих ссылок. Когда обнаружите неисправность — сразу же займитесь корректировкой программного кода.

При открытии страницы в новом окне.

Ошибка 404

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

Не оптимизированная страница 404

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

Следите за тем, чтобы страница 404 не была скучной и пустой.

Чтобы оптимизировать страницу 404 — придерживайтесь следующих рекомендаций:

1. Кратко опишите, куда попал человек и почему он здесь.
2. Разместите ссылку на главную страницу сайта.
3. Разместите ссылки на популярные разделы сайта.
4. Попросите пользователя сообщить об ошибке администратору сайта.
5. Заморочьтесь с дизайном и сделайте так, чтобы 404 страница была оформлена в том же стиле, что и весь сайт.

Последний совет — не забудьте про юмор. Если пользователь улыбнется, то вы завоюете его расположение и можете рассчитывать на его дальнейшее внимание.

Плохо реализованная горизонтальная прокрутка

Горизонтальная прокрутка — это один из способов просмотра содержимого сайта, когда перемещение по страницам происходит не сверху-вниз (), а вправо-влево (). Проблема горизонтальной прокрутки в том, что ее сложно адаптировать под разные типы устройств — если не выделить бюджет и не проработать каждый элемент программного кода, то сайт будет разваливаться и некорректно работать.

С горизонтальной прокруткой любят работать студии веб-дизайна, которые за счет такого сложного многокомпонентного действия доказывают свою компетенцию. Если ваш бюджет не позволяет заказать индивидуальную верстку под каждый тип современного гаджета, то хорошо проработать сайт не получится. В этом случае горизонтальная прокрутка не для вас и нужно проектировать сайт с классической схемой перемещения — делать вертикальную прокрутку.

Отсутствие адаптивной верстки

В 2019 году больше половины интернет-трафика исходит от пользователей смартфонов и планшетов. В будущем это соотношение может измениться или на смену смартфонам и планшетам придут другие устройства. Адаптивная верстка позволяет не зависеть от этой тенденции и не терять конверсию из-за технологических предпочтений аудитории. То есть адаптивная верстка — это когда сайт может правильно подстроиться под ширину любого экрана и корректно отображаться на компьютерах, планшетах, смартфонах и любых других современных гаджетах.

Сайт без адаптивной верстки.

Если ваш бюджет пока ограничен и вы не можете заказать адаптивную верстку, то выполните частичную адаптацию сайта. Частичная адаптация — это когда вы настраиваете сайт под ширину экрана тех устройств, которыми чаще всего пользуются ваши пользователи. В большинстве случаев это будут все разновидности смартфонов.

Сайт не настроен под сверхчеткие Ultra HD мониторы

В 2019 году большинство сайтов ориентируются на мониторы с двумя типами разрешений: HD и Full HD. В HD-экранах плотность пикселей составляет 1366×768 — это самые бюджетные мониторы, которые постепенно утрачивают свою популярность. В Full HD-экранах плотность пикселей составляет 1920×1080 — это самые популярные мониторы, на разрешение которых ориентируются большинство разработчиков при настройке адаптивного верстки.

Вместе с HD и Full HD-мониторами набирают популярность экраны с Ultra HD-разрешением (4К мониторы). В Ultra HD-экранах плотность пикселей составляет 3840×2160 — это позволяет достигать сверхчеткой картинки с детализированным показом мельчайших деталей на сайте. Также уже можно купить 8К монитор, где плотность пикселей составляет 7680×4320.

Учитывая такую тенденцию можно предположить, что Full HD-стандарт скоро перейдет в бюджетную категорию и самыми популярными будут мониторы с Ultra HD-разрешением. Поэтому важно проводить дополнительный тест и следить за тем, чтобы все элементы сайта корректно отображались на 4К мониторах. Если этого не делать, то по мере перехода пользователей на сверхчувствительные мониторы конверсия вашего сайта будет стабильно снижаться.

Нерабочий поиск на сайте

Поисковик на сайте — это такой инструмент, частота использования которого зависит от формата ресурса: на информационных сайтах применяется нечасто, а в интернет-магазинах может полностью заменить рубрикаторный фильтр. Отсюда вывод: поисковик должен быть и всегда работать корректно. Если этого не будет, то пользователь не сможет быстро найти нужную информацию или товар, покинет сайт, найдет все необходимое у конкурентов и с высокой вероятностью никогда не вернется.

Неправильный приоритет в поисковой выдаче.

Когда будете настраивать поисковик, держите в голове тот нюанс, что некоторые запросы часто вводятся с ошибками. Например, если пользователь будет спешить, то вместо «ноутбук» может ввести «наутбук». Для поисковика на сайте это не должно быть проблемой — он должен правильно распознать запрос и выдавать нужный результат: «наутбук» → «ноутбук» → список нужных моделей.

Ненастроенное автосохранение в корзине заказов

Корзина должна дублировать все пользовательские покупки. Это означает, что если в карточке товара пользователь указал три одеяла, то и в корзине должны отобразиться три одеяла. Проблемы не возникает, если приобретается несколько единиц товара.

Все сильно меняется, если пользователь совершает много покупок. В этом случае отсутствие автосохранения может привести к потере клиента.

Настройте автосохранение в корзине и не заставляйте своих клиентов совершать двойную работу. Иначе вы рискуете остаться без постоянных покупателей.

По умолчанию в корзине товаров стоит «0». Согласно анализу с помощью карты кликов видим, что из-за этого пользователю приходится совершать одно лишнее действие: сначала добавить товар в корзину, а после указать его количество.

Даже если в корзине исправно работает функция автосохранения — проследите за тем, чтобы ваши менеджеры всегда перезванивали клиентам и уточняли заказ. Иногда клиенты по ошибке несколько раз кликают на кнопку «Купить», не проверяют корзину и получают не то количество товара. Это тоже плохо, поэтому лучше перезвонить.

Проблемы с версткой

Сайт всегда должен корректно отображаться во всех браузерах. Если верстка начнет слетать, то сайту будет сложно выполнять запланированное полезное действие и у посетителей сложится мнение о том, что им занимаются непрофессионалы. Представьте, что клиент хочет оформить заказ и из-за слетевшей верстки не может этого сделать. В лучшем случае он перезагрузить страницу и попробует заново, в худшем — перестанет с вами сотрудничать. Такого допускать нельзя.

Пример слетевшей верстки: жмете на форму для заполнения → экран автоматически возвращается в исходное верхнее положение.

Когда экран возвращается в исходное положение, то это отдаляет пользователя от заказа. Если процедура повторится хотя бы раз, вы можете остаться без клиента.

Пример слетевшей верстки: иконки соцсетей налезают на текст страницы.

Если кнопки соцсетей находятся не на своем месте, то это выглядит некрасиво и провоцирует недоверие к владельцам ресурса. Плюс можно по ошибке кликнуть на одну из кнопок и открыть дополнительный сайт. Это раздражает.

Пример слетевшей верстки: некорректное отображение текста в адаптивной версии сайта.

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

Пример слетевшей верстки: хлебные крошки перекрывают заголовок статьи, а текст начинается не под главной картинкой.

Выше мы опубликовали лишь небольшую часть возможных примеров, когда у сайта могут быть проблемы с версткой. Общее в этих примерах одно: они делают сайт некрасивым и неудобно читаемым. Увидите нечто подобное — срочно исправляйте.

Некликабельные кнопки

Кнопка на сайте выполняет функцию договора между владельцем и посетителем сайта. Если этот договор нельзя заключить, то никакой сделки не будет. Поэтому если размещайте кнопку — проверяйте ее кликабельность.

Пример некликабельных кнопок: не работают кнопки «Купить в кредит» и «Купить в 1 клик».

После нажатия кнопки «Купить в кредит» перед пользователем должна появится страница с размером ежемесячных платежей и условиями кредитования. Через менеджера все нюансы выяснять долго, поэтому легче закрыть сайт и все посмотреть у конкурентов. Кнопка «Купить в 1 клик» нужна для постоянных клиентов, которые много покупают и ценят свое время. Если кнопка не будет работать, то такие пользователи сразу найдут замену неудобному сайту.

Пример некликабельных кнопок: не работают фильтры для оценки или окончательного выбора альтернативных цветовых решений.

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

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

Если на сайте есть неработающий рейтинг и система с комментариями, то у посетителей может сложиться мнение, что владелец сайта пренебрегает их мнением. Отсюда формируется недоверие и негативное отношение к ресурсу.

Пример некликабельных кнопок: некликабельный баннер на главной странице.

В примере баннер не только некликабельный, но и составлен без призыва к действию. Чтобы это исправить — достаточно добавить работающие кнопки «Перейти» или «Подробнее».

Некликабельная корзина товаров

Корзина товаров — это привычное место, куда посетители интернет-магазина заходят перед подтверждением заказа. Если значок «Корзина» сделать некликабельным, то многие пользователи не захотят разбираться с непривычным функционалом и совершат покупку в другом месте. Чтобы этого избежать — не экспериментируйте с корзиной товаров и всегда делайте ее значок кликабельным. И еще момент: не используйте вместо слова «Корзина» другие креативные названия. Есть риск, что на «Тележку», «Склад» или «Лукошко» пользователи не кликнут.

Самостоятельный запуск аудио и видеофайлов

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

Иногда автовоспроизведение медиафайлов может быть удачным решением и такой формат иногда практикует даже издательство Forbes. Однако в большинстве случаев это вызывает желание сразу закрыть сайт и никогда к нему не возвращаться. Поэтому мы советуем не рисковать и не мешать пользователю управлять контентом.

Логика

Кнопка «гамбургер» в основной версии сайта

Кнопка «гамбургер» — это три горизонтальные полоски, при нажатии на которые открывается меню сайта. Этот прием придуман для адаптивной верстки и используется для передачи содержимого сайта на гаджетах с узким экраном.

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

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

Сайт без логотипа

Логотип — это привычный атрибут, который располагается в шапке сайта и предназначен для повышения узнаваемости. Обычно логотип используется в паре с фавиконом — небольшим значком, который подсвечивается во вкладке браузера перед названием открытой страницы. Если логотип и фавикон разработаны правильно, то они помогают запомнить сайт и повышают вероятность повторного возвращения. Без этих атрибутов запомнить ваш сайт будет намного сложнее.

Слайдер на главной странице

Стоит учесть, что главную страницу видят 1-5% от всего трафика сайта. Также большинство слайдеров плохо отображаются на мобильных девайсах и сохраняют те же проблемы, что и сайты с горизонтальной версткой. Качественный слайдер делать иногда дорого, а бюджетные варианты сразу портят общее представление о ресурсе: пользователь переходит на сайт → видит неудобный и плохо проработанный слайдер → покидает страницу или начинает изучать страницу с негативным настроем. Чтобы этого избежать — достаточно отказаться от слайдера на главной странице и разложить презентационный материал о сайте с помощью простых дизайнерских решений: текста, графики или видео.

Невыделенные ссылки

Ссылка — это инструмент удержания посетителей на сайте. Пользователь читает понравившуюся статью → видит дополнительную полезную ссылку → кликает по этой ссылке и дальше остается на сайте. Если ссылка будет неудачно обозначена, то пользователю будет не за что зацепиться и после изучения нужной темы он сразу закроет сайт. Чтобы это исправить — нужно делать ссылки заметными.

Чтобы повысить вероятность перехода — можно собрать все рекомендованные ссылки и продублировать их в заключении к статье. Так пользователь точно увидит, что еще почитать по выбранной теме.

Избыточные анимации

Любой мультимедийный файл на странице должен выполнять какую-то полезную функцию: развлекать, рассказывать историю или помогать разобраться с темой. Если анимаций будет слишком много, то страница получится избыточной и ее будет сложно изучить. Также нарушится принцип контраста и все важные анимации смешаются с второстепенными. В итоге пользователь ничего не запомнит или вообще откажется изучить перегруженную страницу.

Не допускайте избыточности и акцентируйте внимания на важных анимациях.

Отвлекающие элементы

Здесь нужно придерживаться того же принципа, что и с избыточными анимациями: если какой-то элемент не работает на полезное действие, то его лучше не публиковать на странице. Исключения допускаются только в таких ситуациях, когда эти элементы представлены в виде какой-то качественной декорации, позволяющей создать приятную атмосферу на сайте. Если с качеством проблема, то отвлекающие элементы лучше не использовать — так будет меньше раздраженных посетителей.

Всплывающие окна без кнопки «Закрыть»

Посетитель сайта — это гость, все действия которого должны носить только добровольный характер. Если добавить на сайт всплывающие окна и спроектировать их без кнопки «Закрыть», то никакого свободного выбора у пользователя не будет. Из-за этого ему гарантированно не понравится ваш сайт и в следующий раз он обязательно выберет конкурирующий ресурс. Поэтому если пользуетесь произвольно всплывающими окнами — обязательно добавляйте к ним крупную кнопку «Закрыть».

Раздражающая капча

Капча — это полезный инструмент, защищающий страницу от наплыва роботов. Поэтому капча должна быть и без нее не обойтись. Проблема возникает тогда, капча неправильно запрограммирована и приравнивает каждого нового посетителя к боту: человек приходит на сайт за интересным в регистрации → вместо изучения контента должен потратить время на ввод бессмысленных для него цифр и букв. Ситуация усугубляется, если капча повреждена или слишком длинная — пользователю легче закрыть страницу, чем заниматься ее раскодированием. Поэтому чтобы не терять аудиторию — делайте капчу компактной, незаметной, редко срабатывающей и способной лучше отличать человека от робота. Норм вариант reCAPTCHA.

Навязчивые pop-up окна

Pop-up окно — это всплывающий баннер, призывающий пользователя совершить какое-то конкретное действие: подписаться на рассылку, оставить номер телефона или перейти по определенной ссылке. Всплывающие окна выполняют рекламную функцию и сильно раздражают в тех ситуациях, когда появляется попап с нецелевым месседжем на странице:

Если делаете pop-up окна — предлагайте в них что-то полезное и настраивайте их так, чтобы пользователь успевал хоть немного изучить содержимое сайта.

Обязательная регистрационная процедура

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

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

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

Сложная регистрационная процедура

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

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

Маскировка поля ввода пароля

Скрытое поле ввода пароля (****) уместно применять в онлайн-банкинге и на тех сайтах, где хранятся деньги или важная пользовательская документация. В этом случае скрытый пароль обязателен и используется в качестве дополнительной защитной меры. Например, если решите воспользоваться онлайн-банкингом в людном кафе, то сможете авторизоваться и не переживать за сохранность аккаунта.

Для всех остальных ситуаций скрытое поле пароля лучше не использовать, поскольку оно усложняет процесс входа в личный кабинет. Если по каким-то причинам рассекретить поле ввода пароля не получается, то позаботьтесь о том, чтобы эту опцию пользователи могли включать и выключать на свое усмотрение.

Навигация

Ненастроенная пагинация

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

При наличии большого количества товаров определенной категории на сайте следует разделить эту категорию на страницы пагинации. Стоит добавить снизу статьи кнопки переключения страниц, сокращенный перечень всех страниц. Часто на страницах пагинации можно встретить дополнительную кнопку отображения всех товаров сразу, здесь необходимо быть очень осторожным и убедиться, что при обновлении списка товаров будет меняться УРЛ-адрес, на который заранее будет проставлен noindex.

Непродуманные сценарии перемещения

Находясь на сайте пользователь всегда должен знать, какие действия он может выполнить и что за этим последует. Как только какой-то момент будет не согласован — начинается путаница и проблемы с конверсией. Чтобы было понятно — разберем этот момент на примере несогласованной покупки товара в один клик:

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

Номер телефона указан, но нет подтверждения, что он доставлен менеджеру.

Для закрепления разберем еще один случай. Программисты некачественно проработали сайт и у пользователей проблемы с карточками товара. В карточках нельзя менять количество единиц товара и нельзя удалять выбранный товар из корзины. Поскольку никаких подсказок нет — пользователь быстро разочаруется и не будет ничего покупать в таком интернет-магазине.

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

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

Нет «хлебных крошек»

«Хлебные крошки» — это система навигации, показывающая цепочку движения пользователя от главной страницы до текущего раздела. «Хлебные крошки» принято отображать в верхней части сайта и с их помощью можно быстро переместиться назад и найти ранее просматриваемый раздел. Смотрели товар 10 — по «хлебным крошкам» можно в один клик переключиться на товар 2.

Помимо навигационной функции «хлебные крошки» влияют на сео-оптимизацию: создают перелинковку между другими страницами и положительно влияют на поведенческий фактор. Поэтому если не будет «хлебных крошек», то пользователям будет неудобно долго изучать сайт и быстро находить понравившиеся разделы.

Навигация на главной странице

«Главная» — это та страница, на которую будет возвращаться пользователь если заблудится на сайте. Если такой страницы нет, то при первых проблемах с навигацией часть посетителей будет уходить с сайта. Чтобы «Главная» страница выполняла больше полезных задач — целесообразно в ее описании добавить основные рубрики или рассказать о всей структуре сайта.

Для интернет-магазина, этот пункт меню можно не использовать.

Отсутствует навигация внутри статей сайта

Для больших статей в блог нужна своя навигация. Чтобы ее подготовить — достаточно выполнить два действия:

1. Установить плагин, который из подзаголовков статьи будет автоматически формировать содержание. Это содержание будет выводится в начале статьи и с его помощью пользователь сможет сразу начать чтение с нужного раздела.
2. Добавить кнопку «Вверх», которая позволит быстро перемещаться из любого раздела назад к содержанию.

Если статья небольшая и помещается в 3-5 экранов прокрутки, то добавлять навигацию не обязательно. Пользователь и так быстро найдет нужный материал.

Формальная навигация

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

Ниже опубликовано меню с неправильным ранжированием категорий: не выделен основной раздел и не структурированы второстепенные категории.

Еще одна распространенная ошибка формальной навигации — дублирование позиций. Это когда в разделе «Аксессуары» можно встретить категорию «Аксессуары». Такие совпадение нужно убирать и не запутывать пользователя.

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

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

Пример товарного каталога без меню верхнего уровня. У пользователей нет возможности в один клик перейти к выбору другой категории.

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

Оформление

Неподходящий дизайн

Дизайн — это визуальный образ, который должен привлекать аудиторию и упрощать взаимодействие с сайтом. Качественный дизайн именно так и работает. Непродуманный, устаревший или слишком креативный дизайн снижает все конверсионные показатели и нуждается в немедленном исправлении.

Пример непрофессионального дизайна. Здесь все смешано в одной куче и залито красным фоном.

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

Пример креативного дизайна, когда система фильтров не воспринимаются как фильтры.

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

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

Качественный дизайн не обязательно должен быть дорогим и громоздким. Если простой минималистичный стиль будет идти в паре с качественными услугами, то и этого будет достаточно для привлечения лояльной аудитории. Будет довольная аудитория → повысятся продажи → появится профессиональный дизайн.

Неудобная текстовая колонка

Текст должен занимать 60-70% ширины страницы. Если сделать узкое поле, то текст вытянется и превратиться в неудобночитаемую вертикальную простыню. Если использовать максимальную ширину, то неудобночитаемая простыня растянется по горизонтали. Полный провал — это когда к растянутому тексту добавляются шрифты с засечками. Думайте о пользователям и не создавайте лишних неудобств.

Непропорциональные изображения

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

Пример слишком высокого изображения в шапке. Чтобы добраться к контенту — нужно скролить страницу. Проблема решается уменьшением высоты шапки на 50-70%.

Часто проблемы с пропорциональностью возникают в адаптивной верстке. Поэтому важно проверить дизайн на как можно большем количестве устройств.

Пример неправильного распределения элементов в мобильной версии сайта. Первое изображение выпадает из каталога и выглядит больше остальных.

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

Несочетаемый текст и фон

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

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

Пример плохо читаемого текста на иллюстрациях.

С особенной осторожностью нужно подходить к экспериментам текста и фона в адаптивной верстке. На мобильных устройствах информацию считать сложнее, поэтому и к подбору цветов нужно подходить с особой тщательностью.

Пример нечитабельного текста в адаптивной верстке.

Если по каким-то причинам классика в виде черного текста и белого фона вам не подходит, помните о таком нюансе: у разных гаджетов разная цветопередача. Если у вас на компьютере все смотрится хорошо, то это не означает, что аналогичная считываемость будет у пользователя с бюджетным смартфоном на Андроиде.

Непроработанный дизайн текста

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

Это скучная текстовая простыня.

Дизайн текста — это не волшебный инструмент увеличения конверсии. Просто с его помощью шансы привлечь большее количество целевой аудитории повышаются.

Задизайненый текст.

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

Креативное использование ссылок в элементах интерфейса

Все ссылки должны быть заметными. Если этого не будет, то пользователю будет сложно перейти на рекомендованную страницу и продлить время пребывания на сайте. Или может случится так, что человек случайно кликнет на спрятанную ссылку и рассердится из-за того, что его заставляют смотреть тот контент, который он не выбирал. Поэтому в интерфейсе не стоит креативить и превращать ссылки в загадку.

Пример нетипичного использования ссылок в текстах и элементах. Иконка не объединена с текстом, поэтому клик по иконке не приведет к переходу на новую страницу.

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

Неудачное цветовое оформление

Цвет — это важная составляющая любого дизайна. Цвет влияет на настроение и делает так, чтобы посетителям сайта было комфортно изучать предлагаемый контент. Если цветовая гамма подобрана неудачно, то даже на качественный контент можно получить множество негативного отклика. И наоборот: если на сайте приятно находиться, то пользователи простят незначительные ошибки.

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

Урок цветовой арифметики.

Если вам не интересно изучать колористику и разбираться с цветовой гаммой — оставьте на сайте белый фон. Этим пользуется Apple и с клиентами все в порядке.

Чрезмерное количество рекламы

Современные пользователи просматривают сайты с внутренним антирадаром, позволяющим игнорировать опубликованные рекламные предложения. Из-за этого статья с одним и десятью рекламными баннерами будут давать примерно одинаковый эффект. При этом статья с одним рекламным баннером не будет раздражать, поскольку она в ненавязчивой форме рассказывает о какой-то полезной услуге. Статья с десятью баннерами вызывает отвращения и чувство того, что автор всеми силами пытается впарить читателю рекламируемый продукт. Поэтому если хотите меньше критики, давайте честную рекламу и дозируете ее количество.

Непроработанный призыв к действию

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

Пример баннера со слабым призывом к действию.

Если призыва к действию не будет, то часть аудитории не решится на покупку или перенесет ее на другой раз. Это ваша недоработка, которую легко исправить.

Пример слабого призыва к действию. Нет четкого предложение ни в кнопке, ни в баннере, ни в тексте.

Часто не слабый призыв к действию встречается в форме подписки. Пользователи редко используется такую форму, даже если ее разместить на самое видное место.

Пример слабого призыва в подписной форме.

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

Пример поврежденного призыва в адаптивной версии сайта.

Призыв к действию хорошо работают только в паре с картинкой баннера. Одно без другого дает слабый эффект и часто остается незамеченным.

Пример баннера без призыва к действию и понятного предложения.

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

Некачественные изображения

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

Пример некачественной фотографии товара.

Чтобы быстро поднять качество изображений — купите портативный китайский куб для предметной съемки (фотобокс). Это недорогой аксессуар, который придаст всем изображениям вашего интернет-магазина фирменности.

Отсутствие или переизбыток иллюстраций

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

Плохо сверстанные кнопки соцсетей

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

Пример неправильно оформленных кнопок социальных сетей с устаревшим виджетом instagram.

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

Маркетинг

Нет четкого главного предложения сайта

Главное предложение сайта — это та тематика, на которой специализируется ваш ресурс. Это главное предложение пользователь должен считать в первые три секунды пребывания на сайте. Продаете подержанную технику Apple — располагайте на главной странице каталог с доступными гаджетами, а на других страницах делайте блог или публикуйте новости. Наоборот делать нежелательно, поскольку от этого теряется четкость главного предложения сайта. Если главное предложение будет неочевидным, то часть пользователей не будет ни в чем разбираться и отправиться за покупками к конкурентам.

Отсутствие гарантий

Гарантия — это признак того, что продавец уверен в товаре и может ручаться за его качество. Возьмем два интернет-магазина, в которых MacBook Air 2018 года продается за 1900 $. Первый магазин работает без гарантий, а во втором срок гарантийного периода составляет 12 месяцев. При таких условиях большинство пользователей совершать покупку во втором интернет-магазине.

MacBook Air 2018 года — это пример товара, который во всех интернет-магазинах будет продаваться примерно по одной цене. Выиграет в конкуренции сайт с лучшей гарантией.

Если вы продаете одноразовые или скоропортящиеся товары, то скорее всего выдать на них гарантию не получится. В этом случае вам ничто не мешает придумать равноценную замену. Например, в бизнес по продаже цветов можно внедрить бесплатную доставку или накопительную систему скидок для постоянных клиентов.

Сложные товары продаются без подсказок

Если вы предлагаете любой технологичный товар, который по устройству сложнее чебурека, то на сайте нужны подсказки. В подсказки нужно выносить все понятия, с которыми даже в теории у пользователя могут возникнуть сложности. Вспоминайте Васю из начала статьи, который ничего не знал про фантомное питание и из-за отсутствия подсказок интернет-магазин потерял постоянного покупателя. Если сомневаетесь, ставить подсказку или нет — ставьте. Для тех кто разбирается в теме это не повредит, а заинтересованных новичков выручит.

Онлайн-чат без менеджера

Продажа любого товара связана с нюансами, которые нельзя раскрыть с помощью запрограммированного чат-бота, имеющего раздавать ответы на частые вопросы. Об этих нюансах должен рассказывать живой человек — менеджер. Если у кого-то из пользователей возникнет вопрос и у вас на сайте не будет живого консультанта, то практически всегда заказ будет оставлен в том месте, где этот консультант работает. Кроме того, когда менеджер вживую общается с заинтересованным пользователем, то у него есть возможность увеличивать средний чек за счет рекомендации сопутствующих товаров. Работает на каждом четвертом покупателе.

Нет информации о количестве доступного товара

Представьте такую ситуацию: крупная IT-компания открывает новый офис и покупает в него сорок 2К мониторов Dell P2418D. Представитель IT-компании переходит на сайт интернет-магазина → оформляет заказ → получает накладную с указанием точного срока доставки и отталкиваясь от этого срока объявляет сотрудникам о дате начала работы в новом офисе.

Если компании нужно сорок 2К мониторов Dell P2418D, то им важно знать, могут ли они купить такое количество товара в одном месте. Обычно оптовая покупка обходиться дешевле.

На следующий день менеджер интернет-магазина начинает собирать заказ и выясняется, что указанного количества мониторов на складе нет: нужно сорок штук, а есть только десять. Менеджер перезванивает заказчику и объявляет о проблеме. Представитель IT-компании отменяет заказ, поскольку у него есть корпоративным стандарт, правилами которого разрешается использовать только указанный тип мониторов. Кроме того, вышедшим раньше срока сотрудникам придется платить неустойку за каждый день, когда они выходят на работу и не могут выполнять свои обязанности из-за отсутствия монитора.

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

Нет данных о доставке и способах оплаты

Тарифы перевозчиков вместе с комиссией платежных сервисом могут прибавить к первоначальной стоимости заказа до 15%: выбрали товар на 100 $ → получили к оплате 115 $. Из-за этого важно прописывать все службы доставки и все платежные системы, которые поддерживает интернет-магазин:

1. Если выбор большой, то пользователь сможет подобрать оптимальный тариф и время доставки. Можно переплатить и получить товар быстрее или наоборот — дольше подождать и сэкономить.
2. Если выбора нет или он ограничен, то пользователь заранее будет знать о комиссии и не будет предъявлять претензии во время получения товара.

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

Нет письма подтверждения

Пользователи нередко теряют информацию о заказе, а перевозчики не всегда своевременно предупреждают об его поступлении. Из-за этого возможны случаи, когда владелец интернет-магазина будет терять клиентов и впустую платить за транспортные расходы перевозчиков. Чтобы этого избежать — достаточно каждый заказ дублировать на электронную почту. Тогда не будет повода для споров.

Контент

Проблемы с грамматикой

Любой текстовый материал должен публиковаться без ошибок и опечаток. Если за этим не следить, то это может отразиться на имидже и пользовательском доверии к ресурсу. Логика здесь такая: если у владельцев сайта нет времени проверить свои тексты, то где они найдут время на качественное исполнение клиентских заказов.

Здесь стоит сделать важное примечание: от опечаток не застраховано даже крупное издательство, где каждое предложение перепроверяется армией корректоров. Поэтому грамматические ошибки неизбежны и для решения этой проблемы нужно выполнять две задачи: по несколько раз перепроверять контент перед публикацией и следить за отзывами, где пользователи будут критиковать ваш материал за неграмотную подачу. Увидели критику в отзывах — поблагодарите комментатора и отредактируйте текст.

Неактуальная информация

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

Если расценки и информацию о себе не обновлять, то у клиентов формируется неправильное ожидание: рассчитывали заказать визитки за 100 $, а минимальная цена еще полгода назад выросла до 200 $. Это раздражает, вызывает недоверие и становится стимулом для того, чтобы никогда не пользоваться услугами компании.

Если по каким-то причинам быстро обновить информацию не получается — на время закройте страницу с неактуальными данными и на ее месте опубликуйте контакты менеджера. Пусть менеджер общается с клиентами и дает устные консультации.

Некачественный текстовый контент в блоге

Блог — это инструмент, который должен работать на общее полезное действие сайта. Поэтому любой контент, который не помогает это полезное действие выполнять, будет считаться некачественным. Например, если сайт посвящен продаже газонокосилок, то и блог должен быть посвящен продаже газонокосилок: клиент приходит на сайт → сомневается в выборе той или иной модели газонокосилки → переходит в блог и читает обзоры → получает необходимые ответы → делает заказ или обращается за консультацией. Это качественный контент.

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

Отсутствие обязательных страниц «О нас» и «Контакты»

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

Чтобы сделать полезную страницу «О нас» — подготовьте ответы на следующие вопросы: кто вы, какая у вас глобальная миссия, чем занимаетесь и за какую работу не беретесь, в чем ваша фишка, в каких нестандартных случаях можете помочь и какими наградами можете подтвердить свою квалификацию.

Страница «Контакты» — это то место, куда куда будут приходить все пользователи, желающие сделать заказ или уточнить информацию на сайте. Если у них не будет возможности этого сделать, то они просто найдут все ответы у конкурентов.

Слишком длинное страница товара и/или категории

Если вы готовите материал для блога, то здесь нет никаких ограничений по объему и длине странице. Пишите столько столько, сколько нужно. Главное, чтобы статья получилась полезной для читателя. Когда речь идет о странице с предложением о покупке товара, то длинный формат страницы здесь не уместен: пользователи устают, не доскроливают страницу, теряют интерес и ничего не покупают. В итоге остаются только те пользователи, которые купили бы этот товар и без описания.

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

Исключением являются все ситуации, когда продается сложный многокомпонентный товар, каждая часть которого нуждается в подробном объяснении. В этом случае страницу можно перегружать информацией и делать любой длины.

Есть страница, но нет описания товара

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

Отсутствие описания на странице карточки товара.

В некоторых случаях все текстовое описание допускается заменить видеообзорами. Однако даже при наличии видео добавлять хотя краткое перечисление основных характеристик нужно: пользователь посмотрим видеообзор → по текстовому описанию пройдется по основным моментам → примет решение о покупке. Без текстовой шпаргалки принять решение сложнее.

Непродуманная структура карточки товаров

Карточка товара — это одна из страниц интернет-магазина, рассказывающая обо всех характеристиках продаваемого товара. Продуманная карточка товара состоит из двух версий: краткой и расширенной. В краткой карточке перечисляются только самые популярные и важные характеристики, на основе которых пользователи выбирают товар. В расширенной карточке указываются все технические данные, касающиеся рассматриваемого товара.

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

Отсутствие заголовков и подзаголовков

Заголовки и подзаголовки выполняют сразу несколько важных функций: они рассказывают о чем текст и где в этом тексте находится нужная информация.

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

Непродуманные названия заголовков и подзаголовков

В интернете большинство текстов считываются по диагонали, а основными точками для считывания выступают заголовки и подзаголовки. Если их не продумать и не заставить рассказывать какую-то историю, то можно быстро потерять посетителей.

Если у читателя нет веской причины изучать ваш контент, то без продуманных заголовков и подзаголовков делать он этого не будет: всегда легче закрыть страницу, чем разбираться в ее содержимом. Поэтому во время проектирования статьей всегда думайте о диагональном чтении.

Маскировка полезного контента

Если после диагонально чтения пользователь решил изучить вашу статью, то в первую очередь он обратит внимание на первый абзац. В этом абзаце должны быть опубликована основная идея всей статьи. Если этого не будет, то значительная часть пользователей уйдет и не будет смотреть оставшийся текст.

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

Игнорирование списков

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

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

Что дальше

Шаг №1.

Скачайте чек-лист с перечисленными ошибками в дизайне и юзабилити.

Шаг №2. Проверьте свой сайт и отметьте все моменты, которые нуждаются в улучшении.

Шаг №3. Устраните отмеченные проблемы и замерьте конверсию сайта.

А с какими ошибками в дизайне и юзабилити сталкиваетесь лично вы? Делитесь опытом в комментариях.

Автор: Андрей Чорный, CEO Plerdy.com

5 самых распространенных ошибок юзабилити сайтов

Ошибки в юзабилити – это основная причина того, что ваши потенциальные клиенты так и не становятся реальными. Чтобы устранить эти ошибки необходимо создать схему по которой пользователи проследуют и совершат конверсионное действие.

В этой статье мы разберем 5 основных ошибок, которые мешают быть сайту удобным для пользователей. И покажем решения как сделать, чтобы ваш потенциальный клиент как можно скорее был готов нажать кнопку «заказать».

Воспользуйтесь этими рекомендациями, чтобы избежать ошибок юзабилити

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

Выявлено 5 самых распространённых ошибок в юзабилити, которые не следует допускать

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

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

ОШИБКА 1: НЕУДОБНЫЕ МНОГОУРОВНЕВЫЕ МЕНЮ

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

Предлагаем вам глубже изучить эту предметную область, не пропустите наш новый материал

Перейти к статье

РЕШЕНИЯ как исправить проблему непопадания в нужный пункт:

1. Реализовать меню следующим образом: при наведении мышки «выезжает» полностью весь раздел. Так как это, одна прямоугольная область, то пользователю менее сложно не попасть на нужный пункт и выйти за рамки меню. В такой этой реализации есть еще одно очевидное преимущество – это видимость одновременно всех пунктов.
2. Если всплывшее меню на вашем сайте активно в течение некоторого промежутка времени, это время активности можно увеличить. В этом случае, вы дадите пользователю больше времени, и он успеет выбрать в меню нужный пункт.

ОШИБКА 2: НЕПОНЯТНЫЕ ЗАПУТАННЫЕ КАТЕГОРИИ

Одна из очень распространённых проблем, которую показывает анализ юзабилити, с которой встречаются посетители сайтов с многоуровневыми каталогами и большим количеством страниц – это не очевидная разбивка на категории.

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

Если вы хотите глубже изучить этот вопрос, предлагаем вашему вниманию публикацию

Перейти к статье

РЕШЕНИЯ как сделать категоризацию понятной для большинства пользователей:

1. Наилучший способ – это протестировать. Попросить несколько пользователей найти на сайте определённый товар или нужную информацию, не используя поиск по сайту. Количество тестирований с разными пользователями проводить столько раз, пока не будет найден самый быстрый путь нахождения искомого.
2. Можно воспользоваться при создании и изменении структуры сайта такими полезными сервисами, как TreeJack и OptimalSort . Первый помогает в тестировании выбранного варианта категоризации и показывает, насколько успешно вам удалось справиться с задачей. Второй лучше всего использовать на стадии планирования, он реализован как способ сортировки карточек.

Юзабилити сайта — практические рекомендации

Вам нужен хороший современный сайт и выбираете исполнителя?

Тогда не теряйте время, напишите нам прямо сейчас!

Оставить заявку

ОШИБКА 3: ОТСУТСТВИЕ ИЛИ НЕКОРРЕКТНАЯ РАБОТА ПОИСКА НА САЙТЕ

Поиск по сайту – очень важный элемент юзабилити сайта. Однако многие пренебрегают им. Около 10% пользователей постоянно пользуются поиском. Даже если внутренний поиск на сайте есть, часто с ним связаны следующие четыре проблемы:

1. Поиск не учитывает морфологию языка, опечатки и дефисы
2. Поле для ввода поискового запроса не достаточно велико
3. В результатах поиска выдается информация не связанная с искомой
4. 4В результатах поиска отсутствует сортировка по важности.

РЕШЕНИЯ: как улучшить выдачу результатов внутреннего поиска

1. Для исправления, сначала необходимо протестировать, как работает ваш поиск. Результаты дадут вам картину того, что получают ваши пользователи.
2. Затем используйте сервис «Яндекс.Поиск для сайта» — он решит проблему опечаток и учёта морфологии.
3. Далее необходимо поменять критерии сортировки и настроить вывод первыми более релевантных ответов. Таким образом, проблема выдачи релевантных ответов будет решена. 

ОШИБКА 4: ВНЕШНИЙ ВИД ССЫЛОК НА СТРАНИЦАХ САЙТА

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

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

РЕШЕНИЯ: как визуализировать ссылки чтобы повысить их распознаваемость

1. Делайте текст ссылки цветным и используйте подчёркивание
2. Не используйте подчёркивание, если текст не является ссылкой
3. Применяйте для ссылок разные цвета: один цвет для тех страниц, на которых посетитель уже был и другой цвет – для тех страниц, на которых ещё не был
4. Не используйте эффекты при наведении мышки на ссылку, чтобы не вводить в заблуждение
5. Не используйте для текста ссылок шрифт меньшего размера, чем остальной текст

ОШИБКА 5: СКУЧНЫЙ КОНТЕНТ

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

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

РЕШЕНИЯ: как сделать сайт интересным

Начинать нужно с тестирования нового web сайта на фокус-группе. Возможно, это не просто организовать, однако понаблюдать за реакцией намного ценнее, чем это может показаться. Перемены тона голоса, мимика и пр. скажут вам гораздо больше, чем любой веб-аналитик:

• какой текст вызывает недоверие;
• чего не хватает при описании продукта;
• какая фотография неудачна;
• где нарушена логический переход к совершению нужного действия;
• какие элементы в навигации сбивают с толку;
• какие эмоции вызывает посадочная страница у пользователя;

Даже если вы только начали свой бизнес в Интернете, и пока не можете заказать аудит юзабилити сайта и полномасштабное тестирование. У вас всегда есть возможность попросить нескольких своих знакомых с еще «не замыленным» взглядом «прогуляться» по сайту, дать ему свою оценку и выполнить то или другое целевое действие.

Если вам нужно сделать сайт, который будет продавать, но остались вопросы, позвоните нам чтобы получить консультацию, или заполните форму, чтобы заказать сайт. Желаем успеха и процветания вашему бизнесу!

26.09.2021

← Поделиться с друзьями !

Как проверить юзабилити сайта — чек-лист

Объясняем, как неудобный для пользователей сайт может влиять на бизнес-показатели компании и с помощью каких сервисов можно найти и исправить ошибки юзабилити.

Юзабилити сайта (usability — удобство использования) — это оценка удобства работы пользователей с сайтом. Посетителю должно быть понятно, как найти нужную информацию, как не запутаться в страницах и как выполнить целевые действия — оставить заявку, позвонить и купить нужный продукт или услугу.

Заказать аудит юзабилити

Зачем проверять юзабилити сайта

На неудобном, сложном сайте с долгой загрузкой сложно сделать заказ. Пользователь скорее уйдёт, чем будет разбираться, куда нажимать, чтобы посмотреть товар, оформить заказ или узнать контакты компании. Согласно исследованию Intechnic, 70% пользователей откажутся от покупки, если им не понравился сайт.

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

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

Чек-лист юзабилити сайта

Технические параметры юзабилити

1. Скорость загрузки. Google провёл исследование: если страница грузится до 5 секунд, вероятность отказа повышается на 90%. Пользователи не хотят ждать и закрывают вкладку. Картинки, анимация, видео увеличивают вес сайта — используйте их в меру. Сайт должен грузиться 1-2 секунды.

Сайт Roistat грузится 1,7 секунды, по данным PageSpeed Insights

2. География и язык. Если сайт работает в нескольких регионах или странах, стоит добавить переключатель языков и создать поддомены, например, site.msk.ru или site.spb.ru. Это поможет привлечь целевой трафик и улучшить ранжирование в поиске. Если есть офисы в разных городах, указывайте контакты отдела из города лида, а не только адрес столичного офиса.

3. Адаптивность. Пользователи заходят на сайты с мобильных устройств всё чаще. По данным исследования медиапотребления в России 2020 году от компании Deloitte, 92% россиян выходят в интернет через смартфоны. Проверьте, как выглядит сайт на смартфонах и планшетах: не съехала ли вёрстка, не потерялись ли важные элементы и СТА, учтено ли удобство для пользователя мобильного устройства.

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

4. Фавикон и сниппет. Фавикон — маленький логотип, который выделяет сайт в поисковой выдаче. По нему проще найти вкладку с ресурсом в браузере. Настройте сниппет — это блок с описанием сайта в поисковой выдаче. Укажите важные разделы, чтобы пользователь сразу переходил, куда ему интересно.

Фавикон и сниппет Roistat

5. Страница 404. Эта страница об ошибке — пользователю говорят, что запрашиваемая страница не найдена. Добавьте на неё строку поиска и ссылки, которые ведут на главную страницу, разделы сайта и контакты.

Страница 404 блога Roistat

Изменения дизайна для юзабилити

1. Восприятие цвета. Учитывайте пользовательский опыт, чтобы улучшать юзабилити сайта. Если человек привык, что красный означает ошибку, серый — неактивное поле, а зелёный — что он правильно заполнил форму, не нужно использовать другие цвета. Вы только запутаете пользователя.

На сайте Республики красным выделили незаполненные поля, а кнопку сделали полупрозрачной — она пока недоступна

2. Без нагромождения. Гигантские блоки с картинками, текстом и видео перегружают дизайн. Нужно приложить усилие, чтобы во всём разобраться. Это плохо — контент нужно структурировать.

3. Кликабельные элементы. Выделяйте всё, на что посетитель может нажать. Пользователь должен отличать кнопки, баннеры и ссылки от остальных блоков.

4. Паттерны сканирования. Пользователи привыкли «читать» сайты слева направо или по модели F — когда взгляд скользит по странице как по контурам этой буквы. Кнопки, СТА, заголовки, поиск располагайте удобно для быстрого чтения.

Навигация и интерфейс для юзабилити сайта

1. Однозначный СТА. Кнопка должна побуждать пользователя к действию — купить, заказать, добавить в корзину. Используйте инфинитивы и чёткие, однозначные формулировки.

CTA на сайте Roistat

2. Оформление ссылок. Подчёркивайте ссылки и выделяйте синим. Настройте курсор, чтобы при наведении на кликабельный элемент он менялся на иконку-курсор в виде руки.

3. Поиск и «хлебные крошки». Поместите поиск на видное место в верхней части страницы. Не забудьте про «хлебные крошки» — это путь по разделам до конкретного товара. Он поможет вернуться в любой раздел.

На сайте Лабиринта однозначный СТА (добавить в корзину), ссылки выделили синим цветом и пунктиром, добавили «хлебные крошки»

4. Информация в текстах. Всю важную информацию публикуйте текстом, а на не картинках. Возможно, пользователь захочет скопировать адрес, телефон или название товара, чтобы поискать в браузере отзывы или отправить знакомым в мессенджере. Дайте ему такую возможность. Не используйте на сайте защиту текста от копирования.

5. Подробные контакты. Указывайте адрес, телефон, время работы, соцсети — всё, что поможет пользователю связаться с вами. Если офисов несколько, расположите их на карте, чтобы было легко найти ближайший. Добавьте фильтры поиска — по адресу, по метро.

В МТС позаботились о клиентах — указали адрес и время работы конкретного салона, сообщили, какие услуги в нём можно получить, дали адреса салонов по соседству

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

Подсказки в форме регистрации Roistat

7. Онлайн-консультант. Добавьте чат-бота, который ответит на типовые вопросы пользователя. Для нетиповых вопросов добавьте возможность перевода обращения на оператора, укажите время ожидания. Иконка онлайн-консультанта должны быть заметной. Плохо, когда она пульсирует или перемещается по странице — это может отвлекать и даже раздражать пользователя.

8. Форма обратной связи. Если консультанты не могут ответить, когда пользователь находится на сайте, например, в ночное время, предложите посетителю оставить контакты для связи. У Roistat есть инструмент Ловец Лидов — с его помощью можно собрать контакты тех, кто хочет покинуть сайт, и тех, кто долго находится на одной странице.

Ловец Лидов от Roistat. Можно настроить, чтобы форма обратной связи появлялась через какое-то время после открытия страницы

Рассказали в блоге: как получать больше заявок с помощью Ловца Лидов.

Оптимизация работы с товаром для юзабилити сайта

1. Страница товара. У товаров должно быть чёткое, подробное название, заметная цена и подробное описание:

• если нет возможности указать стоимость, напишите, почему так. Расскажите, от каких факторов зависит цена, и укажите нижний порог стоимости — например, от 1 000 ₽;
• подробно распишите характеристики продукта, добавьте несколько реалистичных фотографий с разных ракурсов;
• укажите, сколько осталось в наличии и в каких магазинах;
• сообщите, когда товар можно забрать, какие есть способы доставки и сколько времени они могут занять.

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

У Леруа Мерлен крупным шрифтом прописали название товара и цену, в карточке можно посмотреть наличие товара в магазинах, даты для самовывоза и доставки

2. Фильтры. Иногда пользователь знает, по каким характеристикам искать товар. Помогите ему, добавив фильтры. Например, он ищет ноутбук — укажите в фильтрах диапазон цен, размер оперативной памяти, видеокарту, тип процессора и другие параметры.

3. Популярные товары. Пользователи могут и сами сортировать результаты поиска, например, по стоимости и оценке покупателей. Но по умолчанию поставьте сортировку по популярности — это поможет посетителю выбрать то, что покупает большинство.

4. Корзина. Настройте анимацию, когда пользователь добавляет товар в корзину — изменится кнопка, подпрыгнет значок с корзиной, рядом с ним появится цифра (по числу товаров в корзине). Добавление в корзину означает, что лид почти решился на покупку. Не отвлекайте его предложениями, каталогами, рекламой. В корзине он должен увидеть выбранный товар и кнопку, чтобы сделать заказ.

OZON указывает размер скидки и итоговую цену. Предупредили, что товар доставят уже завтра, и напомнили о варианте купить в рассрочку

5. Оплата. С ней нужно быть осторожным — клиенты напрягаются из-за неоднозначных формулировок. Укажите только самое главное: способ и время оплаты (например, при получении или онлайн), добавьте кнопку «Оплатить». Сообщите, что заказ оформлен, оплата прошла успешно. Если произойдёт ошибка, расскажите, что нужно делать — добавьте телефон для звонков или иконку онлайн-консультанта.

6. Доставка. Ещё одна страница с минимумом полей. Добавьте ввод адреса по местоположению пользователя. Если пользователь заполнил форму доставки один раз, настройте автозаполнение для следующих заказов.

Аудит юзабилити сайта от специалистов Roistat

Оценка юзабилити — достаточно трудоёмкий процесс. Нужно понять слабые места сайта, собрать данные об эффективности — какая конверсия в заявки и какая в продажи, отследить, как пользователи взаимодействуют с сайтом, а также узнать, как делают сайты конкуренты.

Чтобы продажи росли, а клиенты не уходили, нужно быть мощнее конкурентов и учитывать потребности аудитории. Если у вас нельзя оформить покупку в один клик, а на другом сайте давно стоит Apple Pay, ваша конверсия в покупку наверняка ниже, чем у конкурентов.

Веб-аналитики Roistat упростят процесс проверки юзабилити сайта и заберут аудит на себя. Не нужно регистрироваться в различных сервисах, покупать подписки, выгружать данные и собирать их в единый отчёт. Специалисты проведут анализ юзабилити сайта по всем сервисам, соберут отчёт по ошибкам, подскажут, как их исправить.

Заказать услугу аудита юзабилити сайта

Заказать

Чек-лист юзабилити сайта у специалистов Roistat в рамках аудита:

1. Аналитика данных. Изучат данные сквозной и веб-аналитики по всей воронке продаж, найдут возможности для повышения конверсии и причины отказа от покупки. Пример: вы разместили небольшой баннер с акцией на покупку самокатов в середине сайта — рядом с разделом про самокаты. Но кликов собрали мало. Вебвизор Яндекс.Метрики показывает, что пользователи пропускают сам баннер и просто кликают на раздел самокатов. Поэтому посетители видят все модели, а не только те, на которые установлена скидка.
2. Аналитика аудитории. Помогут точнее определить, кто ваши покупатели и как они оценивают ваш сайт. Например, B2B-бизнесу стоить разместить на сайте Онлайн-чат, чтобы менеджеры по продажам сразу могли рассчитывать стоимость покупки для пользователей.
3. Аналитика конкурентов. Оценят сайты конкурентов: с помощью каких технических параметров и элементов дизайна улучшить юзабилити, получать больше продаж, а каких избегать, чтобы не получить отток лидов. Пример: конкуренты добавили чат-бота, который быстро отвечает на базовые вопросы о продукте. Пользователи могут уточнить детали и перейти к покупке. Компании также стоит провести подобное изменение на сайте.

Заказать аудит юзабилити

Рассказали в блоге: как услуга юзабилити-аудита от Roistat поможет сделать сайт удобным для посетителей.

Итоговые рекомендации по проверке юзабилити сайта

1. Формируйте насмотренность. Изучайте примеры других сайтов и посадочных страниц в своей отрасли.
2. Сравнивайте себя с конкурентами, а не с сайтами, которые понравились. Нет смысла делать сайт как у креативного агентства, если вы продаёте товары для спорта.
3. Тестируйте изменения. Создавайте разные страницы, проводите А/Б тестирования определяйте и выбирайте страницы с лучшими показателями конверсии и продаж. Объяснили, что такое А/Б тестирование и как оно помогает увеличивать продажи.
4. Мыслите как пользователь. Учитывайте его опыт, отслеживайте путь клиента от входа на сайт до покупки, а также попробуйте сами этот путь пройти.

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

10 ошибок юзабилити-тестов, которые должен знать каждый маркетолог

Юзабилити-тест — это процедура оценки вашего продукта или решения со стороны его удобства использования. В то время как испытуемые решают поставленные перед ними задачи с помощью веб-интерфейса, исследователи ведут наблюдение за процессом и делают выводы, насколько цифровой продукт (лендинг пейдж/сайт интернет-магазина/SaaS-платформа) удобен или неудобен для покупателей и почему.

Несмотря на большое число вопросов, возникающих у менее опытных интернет-маркетологов, в данной статье мы не будем рассматривать методологию проведения этих юзабилити-тестов. Эту информацию вы можете почерпнуть в таких материалах как Введение в юзабилити и Как протестировать юзабилити landing page?

Этот же пост посвящен тому, для чего специалисты и интернет-бизнесмены проводят юзабилити-тесты. Сотня проанализированных тестов ресурса Usability Hub (сервис позволяет как проводить собственные юзабилити-тесты, так и принимать участие в проектах других людей) позволяет сделать весьма неординарные выводы и выявить ряд неутешительных тенденций.

1. Маркетологи тестируют цветовые решения своего сайта

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

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

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

Вопрос о цвете больше относится к тому типу вопросов, которые позволяют очертить границы бренда, идентифицировать его. Например, «Соответствует ли цветовое решение тематике сайта? Соответствует ли цветовое решение сайта тем эмоциям, которые вызывает продукт или услуга?».

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

В конце концов проверка эффективности цвета — это часть сплит-тестов, но отнюдь не прерогатива юзабилити-тестов.

2. Маркетологи создают слишком сложные юзабилити-тесты

Задание: вы ищете пару голубых джинсов Levi’s Men’s Straight Fit 514. Куда вы кликните, чтобы найти их?

На самом деле, предлагаемое задание очень корректно, поскольку даст организаторам четкое представление о том, как сориентируется пользователь на странице интернет-магазина и куда в итоге кликнет.

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

3. Тест логотипов

Задание: какой логотип вы выберете?

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

Помимо этого, к выбору логотипа следует подходит более осмысленно, ведь это неотъемлемая часть визуального представления бренда. Результат же подобного теста будет всего лишь суммой мнений, если сами опрашиваемые не будут иметь представления о том, чем, собственно, компания занимается, каковы ее цели и ценности.

К примеру, данный тест предлагает на выбор 2 логотипа, но поскольку участники теста почти ничем не связаны с этой компанией (и не имеют ни малейшего представления о ее философии), то их выбор будет основан на субъективных предпочтениях, а не каких-то более значимых критериях.

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

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

Выбор должен быть принят совместно с руководителями компании, ее персоналом, партнерами и постоянным клиентами. Только они могут иметь наиболее полное понимание того, что из себя представляет бренд, и точно отразить его ценности в логотипе.

4. Компании создают дизайн логотипа с помощью юзабилити-тестов

Разработка логотипа с привлечением случайных людей (не вашей целевой аудитории) всерьез подвергает опасности ваш бренд.

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

Гораздо эффективнее поступить так: самостоятельно разработать несколько вариантов логотипов и представить их на обсуждении небольшой, но репрезентативной группе потенциальных покупателей, чтобы понять их реакцию. Насколько мы понимаем, это и должно волновать бизнес.

5. Маркетологи должны выбирать то, что лучше для бизнеса

Задание: после оплаты в интернет-магазине, вам предлагают оставить свой отзыв в специальной форме. Какую из них вы предпочтете?

Перед вами 2 варианта форм, которые собирают отзывы покупателей о качестве интеракции с интернет-магазином. Первая форма довольно лаконична, вторая предлагает покупателям оценить качество услуг по нескольким критериям: качество, сервис, удобство и т. д.

Разумеется, вы можете подвергнуть юзабилити-тесту и этот элемент, и, скорее всего, ваш выбор падет на первый вариант, поскольку он лаконичнее и не обременяет посетителя лишней когнитивной нагрузкой. Однако в данном случае мы упускаем из виду один существенный момент, а именно то, для чего данная форма предназначена.

Представьте себе ситуацию: некая компания оптимизирует свою маркетинговую деятельность ради увеличения прибыли и для этого проводит анализ клиентских отзывов. Но от них будет мало проку, если эти отзывы не будут конкретизированы и не содержательны. Общие ответы «Да, устраивает» и «Нет, не устраивает», в принципе ничего нового не дадут, а потому и окажутся бесполезными.

Юзабилити-тест позволяет оценить тот или иной элемент вашей лидогенерирующей цепи на предмет его удобства для использования, его логики. Однако те элементы, предназначение которых выходит за рамки пользовательских, должны оцениваться по иным критериям. В данном случае исследуемый критерий — полнота собираемых сведений.

6. Тестирование практически идентичных вариантов

Вы видите разницу?

Левая колонка окрашена в серый цвет. На варианте справа серый цвет левой колонки распространяется и на горизонтальное подменю. Разница не столь очевидна, а потому и весь смысл теста оказывается потерянным.

Юзабилити-тест, как правило, предполагает большие отличия и неочевидные для участника теста действия.

7. Юзабилити- вместо сплит-теста

На рисунке выше изображены 3 оффера, каждый из которых отличается от других только призывами к действию. Чтобы выбрать самый эффективный, хватило бы и обычного сплит-теста.

Сплит-тест (точнее, его A/B/C/D/n-разновидность) позволяет вам протестировать сразу несколько вариантов лендинга и выбрать лучший. К тому же сплит-тест легко провести на реальных покупателях, и это даст куда более надежные результаты.

8. Маркетологи не владеют знаниями корректной настройки юзабилити-тестов

Задание: Которая из лид-форм более удобна для восприятия?

Во-первых, моделирование реальной ситуации — один из ключевых моментов любого юзабилити-теста, поскольку дает участнику теста понимание контекста. Вы можете сказать: «Представьте, что вы выбираете пару голубых джинсов в предлагаемом интернет-магазине».

Во-вторых, пользователь должен знать, что от него требуется. Для пятисекундного теста характерны вопросы о виде деятельности компании и т. д. Например, «Как вы считаете, какие продукты и услуги предлагает компания?».

Для клик-теста пользователей просят найти определенную информацию (или область на сайте) и кликнуть на том месте страницы, на той ссылке, которая позволит получить эту информацию. Например, «Откройте вкладку с мужской верхней одеждой».

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

9. Тестирование заголовков

Задание: прочитайте заголовки. Выберите лучший.

Огромное количество тестов посвящено заголовкам статей, но юзабилити-тест на сервисе Usability Hub не самый лучший вариант. Оценить за 5 секунд более чем 2 заголовка уже трудно, а потому и результаты теста окажутся скорее всего смазанными.

Лучше поступить иначе.

Если вы тестируете заголовок для рекламной кампании в Google или Яндекс, то просто создайте несколько кампаний и посмотрите, какая из них привлечет больше трафика.

Если вы тестируете заголовок на лендинге, то запустите классический сплит-тест.

10. Тест доменных имен

Неожиданно, но так и есть.

Заключение

Примерно один из трех проанализированных тестов имел какое-либо внутреннее противоречие или ошибку. Чтобы избежать ошибок, убедитесь в понимании того, что вы тестируете, и что контрольная группа релевантна вашим запросам.

Юзабилити-тесты — это отличный инструмент оптимизации конверсии и продаж, поэтому используйте его, чтобы выявить существующие проблемы в вашем продукте или услуге, и поднять ваш бизнес на новый уровень.

На рынке России корректно работающих юбилити-платформ для SMB сектора все еще нет, но скорее всего, это лишь вопрос времени.

Высоких вам конверсий!

По материалам blog.kissmetrics.com, Image source Mike Fiechtner 

10-08-2014

7 распространенных ошибок юзабилити в веб-дизайне

Любой успешный веб-дизайнер знает, насколько важно идти в ногу с тенденциями и лучшими практиками в отрасли. Между такими вещами, как использование аутентичных изображений и видео, использование минимализма, где это уместно, и всем, что между ними, существует множество стандартов и рекомендаций, которые следует учитывать при разработке для Интернета.

Но что легко упустить, так это фактор удобства использования. Хотя нам всем нужны сайты, которые поражают воображение и производят впечатление, мы все же хотим (и нуждаемся) в том, чтобы они работали хорошо.Но это не редкость:

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

1. Крошечные интерактивные области

Решение: Сделайте кнопки крупнее.

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

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

2.КОМПЛЕКСНАЯ НАВИГАЦИЯ

РЕШЕНИЕ: ВИТРИНА ОСНОВНЫЕ.

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

* PRO-TIP: Подумайте о двух основных действиях, которые вы хотите, чтобы посетители вашего сайта совершали при посещении вашего сайта. Какими бы ни были основные действия, которые вы хотите, чтобы люди совершали, дайте им возможность совершать это действие, поместив страницы с информацией об этом в основную навигацию. Кто-то из них совершит покупку? Поместите «Магазин» в главную навигатор. Кто-то из них хочет на что-нибудь подписаться? Поместите туда же раздел «Зарегистрироваться». Чтобы заставить их взглянуть на ваше портфолио работ? Также вставьте вкладку «Наша работа».

3. ИЗБЫТОЧНАЯ ИЛИ НЕОРГАНИЗИРОВАННАЯ ИНФОРМАЦИЯ

РЕШЕНИЕ: обрезать жир.

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

И хотя я на 110% согласен с Рэндом Фишкиным в его недавнем видео Whiteboard Friday — «Идеальная длина сообщения в блоге и частота публикации — B? !! $ # ÷ x» — я также считаю, что существует такая вещь, как слишком много контента, и если кто-то скажет нам, что точное количество слов зависит от отрасли или имеющейся информации, нам легко подумать: «Ну, мой контент очень ценен и требует подробного объяснения, так что это нормально, если много текста / изображений на моем сайте и в блоге.«Нам легко думать, что мы исключение из правил. Но реальность такова: касается пользователей, а не эго .

Независимо от того, состоит ли ваш контент из 500 или 500 миллионов слов, мы должны думать о пользователях и ценности, которые им дает наш контент. Это особенно актуально для мобильных устройств, где работать с недвижимостью еще меньше. Итак, да — не пытайтесь подогнать или заполнить свой контент до необходимого количества слов, но также знайте, что читатели (включая вас и меня) по-прежнему имеют ограниченный объем внимания и нуждаются в скиммируемом контенте … Белка!

Сотрудник блоггера GDD Эмили Мэлоун делится тем же советом по устранению беспорядка в своем недавнем блоге: 10 рекомендаций по оптимизации коэффициента конверсии для начинающих (проверьте это — хорошее чтение!).

4. ПЛОХАЯ ТИПОГРАФИЯ

РЕШЕНИЕ: Выберите шрифт, который легко просматривать.

В качестве дополнения к последнему пункту, ваш контент должен быть легко потребляемым, чтобы привлечь внимание читателей. Он должен быть хорошо организован и легко просматриваемым.

Что делает контент недоступным для сканирования? Ну, во-первых, плохая типографика. Ничто не отвлекает посетителей быстрее, чем необходимость напрягать глаза или увеличивать масштаб, чтобы просмотреть ваш контент из-за плохого шрифта.Если ваша типографика слишком отвлекает или не соответствует дизайну веб-сайта, скорее всего, показатель отказов будет выше.

Кроме того, если ваш текст не имеет четко различимых размеров между разделами (например, основной заголовок, подзаголовок, основной текст и т. Д.), Вы наверняка потеряете посетителей так же быстро, как и получили их — даже если вы выбрали отличный шрифт, подходящий для вашего бренда.

5. ДЛИННЫЕ ФОРМЫ

РЕШЕНИЕ: Спрашивайте только то, что требуется от ваших потенциальных клиентов.

Никто не любит заполнять формы, особенно если от вас требуют слишком многого. А если вы их неправильно отформатируете, это может стать решающим фактором между достижением или невыполнением ваших целей по конверсии.

Если у вас есть контент, который вы хотите разместить на целевой странице, обязательно спрашивайте только то, что вам нужно, чтобы потенциальные клиенты не теряли интерес. Как объясняет Памела Воган в своей статье «Маркетинг HubSpot», вам нужно найти «золотую середину» поля формы — баланс между тем, сколько информации абсолютно необходимо, и сколько информации эти потенциальные клиенты действительно готовы предоставить в начальной форме.

* PRO-TIP: При создании форм рассмотрите два основных вопроса: 1) насколько ценным является контент, который вы предлагаете, и 2) какая информация необходима для привлечения квалифицированного лида? Если предложение — это то, что они могут легко найти в другом месте, они, скорее всего, не захотят передавать кучу личной информации, если она вообще есть. Более того, вам нужно убедиться, что вы действительно можете использовать данные, которые вы собираете. Чаще всего наличие полей формы для имени и адреса электронной почты (а также, в зависимости от формы, окна сообщения) более чем достаточно, чтобы начать сбор ценной информации о ваших потенциальных клиентах.

6. БЕЗОПАСНЫЙ ДИЗАЙН

РЕШЕНИЕ: дизайн для любого устройства.

Хотя адаптивный дизайн сегодня становится все более стандартом для дизайна веб-сайтов, некоторые из них все еще упускают из виду важные элементы этого типа цифрового взаимодействия.

Это означает многое. Для начала рассмотрим очевидное — дизайн. Но помимо этого, вам нужно рассмотреть другие элементы, такие как сокращение основных элементов навигации до только самого необходимого.Это также означает обеспечение правильного изменения размера фотографий, особенно на гораздо меньшем экране (который для телефонов и планшетов часто отображается вертикально, а не горизонтально). Это даже означает вырезание второстепенной копии, чтобы посетители не пролистывали бесконечную цепочку контента только для того, чтобы добраться до CTA внизу.

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

7. НЕДОСТАТОЧНАЯ (ИЛИ НЕ СУЩЕСТВУЮЩАЯ) ФУНКЦИОНАЛЬНОСТЬ ПОИСКА

РЕШЕНИЕ: Если у вас много контента, добавьте хорошую функцию поиска.

Если ваш веб-сайт достаточно насыщен контентом и вы не пользуетесь надлежащими функциями поиска, то вы упускаете его (как и ваши посетители)!

Если вы хотите максимально упростить конверсию посетителей (что вы и делаете), то вы должны расширить возможности своих посетителей, проложив для них четкий путь для выполнения действия, которое вы хотите, чтобы они предприняли.

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

---

Хотите узнать больше о том, как спланировать следующий редизайн вашего веб-сайта?

Посмотрите, как подход Designzillas оказал влияние в Интернете, просмотрев наши тематические исследования ниже.

6 честных и ценных советов от UX-дизайнера

В этой статье вы можете узнать больше о:

• Опыт UX-дизайнера в постоянно меняющемся проекте
• Менее известный взгляд на ошибки юзабилити
• 6 советов по изменению рабочего процесса, чтобы избежать плохого юзабилити и низкой конверсии веб-сайта

Несколько месяцев назад я читал о том, как избежать ошибок юзабилити при проектировании интернет-магазина.Через несколько дней я снова и снова находил одни и те же старые статьи. Очевидно, все они намеренно собрали одни и те же ошибки: следует упомянуть часто возникающие ошибки, которых легко избежать.

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

Неэффективность сортировки ошибок юзабилити

Выявление ошибки юзабилити может занять много времени. Это отрицательно и отрицательно сказывается на эффективности, эффективности и удобстве. Небольшая проблема может вызвать у пользователя неприятные ощущения при выполнении задачи. Массивный может сделать невозможным даже выполнение задачи. В этой статье я расскажу о них как о неправильных вариантах дизайна.

Ошибки юзабилити влияют на то, насколько удобно, эффективно и результативно пользователь проходит путь.

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

Создание групп или перечисление наиболее часто создаваемых не обеспечивает эффективного решения. Почему? UX-дизайн постоянно меняется и имеет множество переменных. Подумайте, как изменилось то, как мы взаимодействуем с интерфейсами за последние два десятилетия.

Мы перешли от мониторов к маленьким мобильным экранам, а планшеты и умные часы с круглыми экранами расширили палитру. И это рассматривает только одну переменную в более сложном уравнении.

Тем не менее, ни одно правило или принцип не действует вечно в постоянно меняющейся области дизайна. Это означает, что поиск и сортировка наиболее частых ошибок дает лишь временное решение. Это может сработать, но ненадолго. Чтобы подготовиться ко всему в далеком и туманном будущем UX-дизайна, посмотрите на свой рабочий процесс, чтобы найти окончательный ответ.

Как улучшить рабочий процесс с учетом ошибок юзабилити Несколько лет назад никто не моргнул при разработке функции тележки, доступной при смахивании вверх от нижней части экрана. В 2017 году появился iPhone X. С тех пор большинство пользователей использовали этот жест для перехода на домашний экран. Источник: support.apple.com

1. Интегрируйте осведомленность в свой рабочий процесс

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

По прошествии всех этих лет вся концепция в моем сознании перевернулась. Игнорируя текущие модели поведения пользователей и технологические изменения, вы просто не подвергнете себя риску серьезных ошибок в дизайне. Вы также упустите все другие возможности сделать свой дизайн действительно полезным.

2. Получить справочную информацию

Хорошо, вы составляете карту поведения ваших будущих пользователей, но вы должны довести это до конца.Хорошим началом будет проведение исследовательских интервью как методика. Задавая вопросы и обнаруживая мотивы, стоящие за болевыми точками и желаниями, вы получаете идеальный материал для работы: справочную информацию.

Это становится золотой жилой при разработке интерфейса. Огромный объем данных, которые он производит, может показаться устрашающим. Вам может быть трудно организовать или работать, но скрытые возможности всегда кроются внутри.

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

3. Разберитесь со своими предубеждениями

Я разрабатывал приложение для доставки еды и хотел поэкспериментировать с положением кнопки, которая приведет вас к полному списку ресторанов.Я перепробовал множество вариантов в нескольких тестах, но не обратил особого внимания, потому что у пользователя было несколько других способов сделать это. Хотя следующие тесты прошли успешно (чтобы испытуемый мог выполнить задания), опыт все равно не удовлетворил. Выяснить, почему они сделали крепкий орешек, если они не могли определить проблему (в любом случае, это не их работа).

Несколько дней спустя я наблюдал, как моя девушка заказывает еду на совершенно не связанном с этим сайте. Я заметил, как она старательно избегает заранее определенных категорий и рекомендуемых ресторанов.Она сказала, что они выглядели как реклама. Она считала домашнюю страницу контролируемой средой, поэтому перешла к списку ресторанов, где могла сортировать и фильтровать их, не чувствуя себя контролируемой. В этом был ключ к моему проекту: контроль. Я пропустил это во время тестов из-за моего предубеждения относительно того, как пользователи должны использовать приложение.

Самый простой способ принять рискованное дизайнерское решение? Не обращайте внимания на то, как пользователи настольных и мобильных устройств хотят, чтобы использовал ваш продукт.Создать для пользователей и не говорить им, как они должны думать, всегда проще. Отображение того, как ваша целевая аудитория ожидает взаимодействия с вашим продуктом, поможет вам создать интуитивно понятный интерфейс, при этом просто избегая критических ошибок. Это способствует хорошей торговле.

4. Примите свои ошибки

Дизайнеры проявляют себя так же человечно, как и пользователи, для которых они проектируют. Как бы тяжело это ни было, мы должны смириться с этим фактом. Эта крошечная ошибка не дает мне покоя и по сей день.Примите свои ошибки, особенно вы перфекционисты. Мы просто не можем постоянно работать на все сто процентов.

Более того, там мы не можем избежать меньших проблем с юзабилити, и никто не может проектировать без их появления. Они просто составляют часть процесса. Конечно, использование различных проверенных практик или (в данном случае) изменение рабочего процесса помогает избежать критических проблем. Но мы, скорее всего, не сможем справиться с неудобствами, связанными с удовлетворением. Поскольку мы воспринимаем мир по-разному, мы по-разному ожидаем результатов и поведения.

5. Поймите свои ошибки и используйте их

Проанализируйте, что пошло не так и почему. Понимание причины неудачного выбора дизайна приносит нам гораздо больше, чем сама ошибка. Это возвращает нас к «неэффективности» простой сортировки ошибок юзабилити. Если вы в первую очередь можете понять, почему вы сделали ошибку, вы сможете избежать повторения такой же ошибки в будущем, независимо от платформы или аудитории.

Отслеживание своих ошибок может привести вас к привычке (или, наоборот, к ее отсутствию) в рабочем процессе, что впоследствии вызовет множество проблем.В моем случае проектирование с использованием предположений привело к множеству мелких проблем с удобством использования. В свою очередь, они значительно повлияли на общий пользовательский опыт. Итак, я пишу эту статью. Рассмотрение своих ошибок как побочного продукта вашей работы может помочь улучшить методы и избавиться от легко устраняемых проблем.

6. Подтвердите свои изменения

Ошибки искоренения сами по себе еще не исправят. Подобно проектированию и тестированию, реконструкция рабочего процесса также требует проверки.Мы можем сделать это только с помощью различных методов наблюдения. Вы можете решить, отправлять ли клиенту простое электронное письмо, создать полноценную анкету или даже провести еще один раунд тестирования. Выбор наиболее эффективного способа получения актуальной информации о вашей работе зависит от вашего проекта / клиента.

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

Заключение и резюме

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

1. Интегрируйте осведомленность в свой рабочий процесс: Знайте текущие модели поведения пользователей и технологические изменения.
2. Получите справочную информацию: Найдите реальный способ узнать больше о мотивации выбора и предпочтений.
3. Разберитесь со своими предубеждениями: Будьте готовы узнавать что-то новое и следить за новыми перспективами.
4. Примите свои ошибки: Дизайнеры оценивают так же человечно, как и пользователи, для которых они разрабатывают; ошибки не делают вас менее уязвимыми.
5. Поймите свои ошибки и используйте их: Поймите причину неудачного выбора дизайна; это приносит гораздо больше, чем сама ошибка.
6. Подтвердите свои изменения: Реконструкция рабочего процесса требует проверки для определения эффективности.

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

Продолжить обучение с UX studio

Хотите узнать больше о дизайне, ориентированном на пользователя, и изучить основные принципы нашего проверенного процесса бережливого взаимодействия с пользователем? Взгляните на нашу книгу о дизайне продуктов, написанную нашим генеральным директором Дэвидом Пастором.

Если вам нужна помощь в разработке продуктов или обучение членов команды для перехода на новый уровень удобства использования, не стесняйтесь обращаться к нам в UX studio. Команда увлеченных, увлеченных профессионалов, мы предоставляем услуги, начиная от UX-консалтинга до UX-тренингов и обзоров, и, конечно же, предоставляем безупречный дизайн.

6 ошибок, связанных с удобством использования веб-сайта, которых должен избегать каждый разработчик , эксперты по конверсии и дизайнеры UX.

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

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

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

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

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

В чем заключается ошибка юзабилити?

Ловушка для удобства использования — это что-нибудь на веб-сайте, которое вызывает у посетителей трудности или плохой опыт использования вашего сайта. Вне зависимости от того, является ли оно незначительным или важным, этот « что-нибудь» может повлиять на то, как пользователи взаимодействуют с вашим сайтом, а временами он может заставить их покинуть сайт, не достигнув целей конверсии сайта.

Павел Манахов дал такое приятное определение проблемы юзабилити:

“ Набор негативных явлений, таких как неспособность пользователя достичь своей цели, неэффективное взаимодействие и / или неудовлетворенность пользователя, вызванные комбинацией пользователей факторы дизайна интерфейса и факторы контекста использования ».

В одном из недавних блогов Халида, Хватит путать удобство использования с конверсией , он указывает, что в настоящее время люди путают удобство использования с конверсией.Затем он переходит к определению различных уровней элементов, которые могут повлиять на восприятие ваших посетителей при взаимодействии с вашим сайтом:

• Ошибки сайта
• Функциональность сайта
• Эмоциональные сообщения
• Социальные сообщения

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

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

В большинстве случаев, если посетитель не может найти на вашем сайте то, что он ищет, скорее всего, он направится на сайт конкурента.

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

1. Непонимание принципов юзабилити и преобразования

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

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

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

Обычно мы разбиваем элементы конверсии на две категории: факторы, ориентированные на веб-сайт и факторы, ориентированные на посетителей. Факторы, ориентированные на Интернет — доверие и уверенность, FUD, стимулы и вовлеченность — относятся к информации, представленной на сайте, тогда как факторы, ориентированные на посетителя, относятся к мировоззрению посетителя и характеру покупки.

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

Говоря о преимуществах внедрения практик UX в команду разработчиков, Хизер Шокни, разработчик и наставник UX, говорит:

« Я считаю, что очень важно научить разработчиков инструментам UX. Любой, кто работает над проектом, всегда должен думать о пользователе.Именно они могут создать продукт или сломать его. Конечная цель у всех обычно одна — выпустить успешный продукт, которым будут пользоваться пользователи. Навыки UX помогают убедиться в этом. ”

2. Сосредоточение внимания на техническом развитии, не думая о клиенте

Это не более чем фольклор (который следует отбросить) думать, что разработчики должны только сосредотачиваться на технической стороне вещей в Интернете процесс развития. Да, это может быть основной задачей разработчика, но все ли они должны обдумывать?

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

Успешные проекты начинаются с того, что каждый, кто участвует в конкретном проекте, должен учитывать мотивацию и эмоции конечных пользователей. Процесс начинается с проведения исследования пользователей. Как только результаты будут у нас на кончиках пальцев, все, кто участвует в этом проекте, должны знать о результате. Это помогает убедиться, что вся команда находится на одной волне и что все работают для достижения одной цели.

Например, скажем, команда UX проводит интервью с клиентами определенного клиента.Исследователи также должны будут информировать разработчиков о мотивах и эмоциях, которыми движут клиенты.

Как только команда разработчиков узнает о незавершенных делах , которые должен реализовать сайт, команде необходимо будет найти баланс между потребностями пользователей и бизнес-целями. В этом контексте бизнес должен относиться ко времени, которое им отведено для завершения проекта.

3. Длительное время загрузки

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

Короче говоря, медленная загрузка веб-сайтов может стоить вам больше продаж и трафика.

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

• 16% снижению удовлетворенности клиентов
• 11% меньшему количеству просмотров страниц
• 7% потере конверсий

Это не только во время операции было счет каждой секунды — Amazon на самом деле говорит, что теряет 1 доллар.6 миллиардов продаж каждый год из-за задержки загрузки в одну секунду.

Теперь, когда вы знаете, насколько важна скорость вашего сайта, так как быстро должен загружаться сайт?

Согласно исследованию, проведенному MachMetrics в 2018 году, большинству веб-сайтов требуется от 8 до 11 секунд для загрузки, а согласно исследованию, проведенному Google, большинству мобильных сайтов для полной загрузки требуется 15 секунд.

Но это не критерий, идеальное время загрузки веб-сайта на компьютере должно составлять от 2–5 секунд до 3 секунд или меньше на мобильных устройствах.Да, это действительно возможно, говорит Мале Охе из Google:

« 2 секунды — это порог приемлемости веб-сайта электронной коммерции. В Google мы стремимся к показателю менее чем за полсекунды ».

4. Не ломать произвольные разрозненные области

В индустрии программного обеспечения существует убеждение, что разработчики, дизайнеры и копирайтеры должны оставаться на своих отдельных участках в процессе разработки продукта. Это означает, что разработчики должны сосредоточиться на техническом аспекте; дизайнерам от внешнего вида и эстетики продукта; а копирайтеры должны беспокоиться только о копии.

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

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

Есть так много людей, которые разработали веб-сайты, которые не только конвертируют, но и восхищают и вдохновляют — и для этого им пришлось разобщиться и работать бок о бок с дизайнерами и копирайтерами от начала до конца проекта. .

5. Сложные требования безопасности

Разработчики (и дизайнеры) считают, что безопасный пароль должен выглядеть сложным.Я уверен, что я не единственный, кто сталкивался с веб-сайтом, который требовал, чтобы у меня был пароль для входа, содержащий: как минимум восемь разных символов, одну заглавную букву, одну цифру и символ.

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

Да, я понимаю, что проверки учетных записей важны, но они не должны усложнять пользователям вход в систему. Хорошим примером веб-сайта со сложными проверками безопасности может быть следующий веб-сайт:

На этом веб-сайте, вопрос проверки безопасности сложен до такой степени, что вам действительно нужно вытащить калькулятор, чтобы ответить на него. Такой уровень безопасности совершенно неприемлем, если вы не хотите направлять пользователей на сайт конкурента.Элементы безопасности на сайте должны больше основываться на здравом смысле, и они не должны ограничивать свободу кого-либо из ваших пользователей.

Вместо того, чтобы просить пользователей выполнить сложные требования безопасности, разработчики могут просто ограничить количество попыток ввода пароля (точно так же, как это делает Apple в своих продуктах) или, возможно, разрешить пользователям входить в систему через другие платформы, такие как Google или социальные сети.

6. «

Двигайся быстро и ломай вещи » менталитет

Фраза « двигайся быстро и ломай» была придумана основателем Facebook Марком Цукербергом с целью информирования внутреннего процесса проектирования и управления.Эта идея фокусируется на скорости без особого внимания к качеству. Проще говоря, все дело в гонках, чтобы продукты попали в руки потребителей как можно быстрее, независимо от качества продукта.

Разные разработчики из разных компаний живут этой фразой и по сей день, и она стала костылем, который они используют, чтобы исправить ошибки юзабилити, которые они совершают на сайте. Вы слышали, как они говорят: «, мы были заняты кодом, и мы хотели, чтобы он был готов как можно скорее, поэтому мы не обнаружили ошибки .

Но, честно говоря, все изменилось, и даже сам Цукерберг с тех пор осознал это и пересмотрел свое заявление о том, что быстро двигается со стабильной инфраструктурой. Это просто означает, что от разработчиков по-прежнему требуется быстро доставлять продукт, но они должны постоянно поддерживать надежное взаимодействие с пользователем. Нет выбора между скоростью и качеством.

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

7. Бонус: создание идеального теста

Самые хорошие разработчиков программистов хотят писать идеальный код. Они хотят убедиться, что их код эффективен. Существует большая разница между написанием кода тестирования AB и написанием кода, готового к производству. Да, готовый к работе код должен быть эффективным, хорошо написанным и хорошо документированным. Код тестирования AB не обязательно! Код тестирования AB служит определенной цели. В основном он фокусируется на изменении пользовательского интерфейса сайта для проверки гипотезы.Цель состоит в том, чтобы увидеть, как посетители реагируют на определенные изменения на сайте. Как бы я ни ненавидел это слово, код тестирования AB «взламывает» сайт, чтобы судить о поведении посетителей.

Техническая группа одного из наших клиентов хотела проверять код для каждого теста AB, потому что они были осторожны при выпуске чего-либо в производство. Но код тестирования AB — это временный код. Он не должен находиться в вашей производственной среде более нескольких недель. Если тест дает положительные результаты, техническая группа должна сесть и написать готовый к работе код для развертывания на сайте.Единственное предостережение — ваш код тестирования AB не должен: : 1. он не должен приводить к появлению новых ошибок на сайте, 2. он не должен ухудшать время загрузки сайта.

Заключение

При работе с сайтом необходимо учитывать и оптимизировать множество элементов, чтобы пользователи не сталкивались с проблемами при использовании веб-сайта. Игнорирование вышеперечисленных проблем может нанести ущерб вашим коэффициентам конверсии, пользовательскому опыту и общему успеху вашего бизнеса. Знаете ли вы о каких-либо подводных камнях юзабилити, о которых следует знать разработчикам? Мы хотели бы услышать ваше мнение в разделе комментариев ниже!

10 эвристик юзабилити для дизайна пользовательского интерфейса

Загрузите бесплатный плакат с 10 эвристиками юзабилити Якоба внизу этой статьи.

# 1: Видимость состояния системы

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

Когда пользователи знают текущее состояние системы, они узнают результат своих предыдущих взаимодействий и определяют следующие шаги. Предсказуемые взаимодействия создают доверие как к продукту, так и к бренду.

Пример эвристики юзабилити № 1:
Индикаторы «Вы здесь» на картах торговых центров должны показывать людям, где они сейчас находятся, чтобы помочь им понять, куда двигаться дальше.

Советы

• Четко сообщайте пользователям о состоянии системы — никакие действия с последствиями для пользователей не должны предприниматься без их уведомления.
• Предоставьте отзыв пользователю как можно быстрее (в идеале — немедленно).
• Укрепляйте доверие через открытое и постоянное общение.

Узнать больше

# 2: соответствие системы и реального мира

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

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

Когда элементы управления дизайном следуют реальным соглашениям и соответствуют желаемым результатам (так называемое естественное отображение), пользователям легче изучить и запомнить, как работает интерфейс.Это помогает создать интуитивно понятный опыт.

Пример эвристики удобства использования # 2:
Когда элементы управления плитой соответствуют расположению нагревательных элементов, пользователи могут быстро понять, какой элемент управления соответствует тому, какой нагревательный элемент.

Советы

• Убедитесь, что пользователи понимают значение, не ища определения слова.
• Никогда не предполагайте, что ваше понимание слов или понятий будет соответствовать пониманию ваших пользователей.
• Исследование пользователей поможет вам раскрыть знакомую терминологию ваших пользователей, а также их ментальные модели вокруг важных понятий.

Узнать больше

# 3: Контроль и свобода пользователя

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

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

Пример эвристики юзабилити # 3:
Цифровые пространства нуждаются в быстрых «аварийных выходах», как и физические пространства.

Советы

• Поддержка Отменить и Повторить .
• Укажите четкий способ выхода из текущего взаимодействия, например кнопку Отменить .
• Убедитесь, что выход четко обозначен и доступен для обнаружения.

Узнать больше

# 4: Последовательность и стандарты

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

Закон Якоба гласит, что люди проводят большую часть своего времени с использованием цифровых продуктов , отличных от ваших . Опыт использования этих других продуктов оправдывает их ожидания. Неспособность поддерживать последовательность может увеличить когнитивную нагрузку пользователей, заставляя их узнавать что-то новое.

Пример эвристики юзабилити # 4:
Стойки регистрации обычно расположены в передней части отелей. Эта последовательность соответствует ожиданиям клиентов.

# 5: Предотвращение ошибок

Хорошие сообщения об ошибках важны, но лучший дизайн в первую очередь тщательно предотвращает возникновение проблем. Либо устраните условия, подверженные ошибкам, либо проверьте их и предоставьте пользователям вариант подтверждения, прежде чем они совершат действие.

Есть два типа ошибок: промахи и ошибки. Промахи — это неосознанные ошибки, вызванные невниманием. Ошибки — это сознательные ошибки, основанные на несоответствии ментальной модели пользователя и дизайна.

Пример эвристики юзабилити # 5:
Поручни на извилистых горных дорогах предотвращают падение водителей со скал.

Советы

• Расставьте приоритеты в своих усилиях: сначала предотвратите дорогостоящие ошибки, а затем небольшие разочарования.
• Избегайте ошибок, предоставляя полезные ограничения и хорошие значения по умолчанию.
• Предотвратите ошибки, удалив нагрузку на память, поддерживая отмену и предупреждая пользователей.

Узнать больше

# 6: Узнавать, а не вспоминать

Минимизируйте нагрузку на память пользователя, сделав видимыми элементы, действия и параметры. Пользователь не должен запоминать информацию из одной части интерфейса в другую. Информация, необходимая для использования дизайна (например,грамм. метки полей или пункты меню) должны быть видимыми или легко извлекаемыми при необходимости.

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

Пример эвристики юзабилити # 6:
Большинству людей легче узнать столицы стран, чем запоминать их. Люди с большей вероятностью ответят на вопрос Является ли Лиссабон столицей Португалии? , а не Какая столица Португалии?

Советы

• Позвольте людям распознавать информацию в интерфейсе, а не запоминать («вспоминать») ее.
• Предлагайте помощь в контексте, вместо того, чтобы давать пользователям длинное руководство для запоминания.
• Уменьшите объем информации, которую пользователи должны запомнить.

Узнать больше

# 7: Гибкость и эффективность использования

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

Гибкие процессы могут выполняться по-разному, поэтому люди могут выбрать тот, который им подходит.

Пример эвристики юзабилити # 7:
Обычные маршруты указаны на картах, но местные жители, более осведомленные о местности, могут воспользоваться сокращенными путями.

Советы

• Предоставляйте ускорители, такие как сочетания клавиш и сенсорные жесты.
• Обеспечьте персонализацию, адаптируя контент и функции для отдельных пользователей.
• Разрешить настройку, чтобы пользователи могли выбирать, как они хотят работать с продуктом.

Узнать больше

# 8: Эстетичный и минималистичный дизайн

Интерфейсы не должны содержать ненужную или редко необходимую информацию. Каждая дополнительная единица информации в интерфейсе конкурирует с соответствующими единицами информации и снижает их относительную видимость.

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

Пример эвристики юзабилити # 8:
У богато украшенного чайника может быть слишком много декоративных элементов, мешающих удобству использования, например неудобная ручка или сопло, которое трудно мыть.

# 9: Помогите пользователям распознать, диагностировать и исправить ошибки

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

Эти сообщения об ошибках также должны быть представлены с визуальной обработкой, которая поможет пользователям их заметить и распознать.

Пример эвристики юзабилити # 9:
Знаки неправильного пути на дороге напоминают водителям о том, что они движутся в неправильном направлении, и просят их остановиться.

Советы

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

Узнать больше

# 10: Справка и документация

Лучше, если система не нуждается в дополнительных пояснениях. Однако может потребоваться предоставить документацию, чтобы помочь пользователям понять, как выполнять свои задачи.

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

Пример эвристики юзабилити # 10:
Информационные киоски в аэропортах легко узнаваемы и мгновенно решают проблемы клиентов.

Советы

• Убедитесь, что справочную документацию легко найти.
• По возможности представляйте документацию в контексте именно в тот момент, когда она требуется пользователю.
• Перечислите конкретные шаги, которые необходимо выполнить.

Узнать больше

Записка Якоба

Изначально я разработал эвристику для эвристической оценки в сотрудничестве с Рольфом Молихом в 1990 году [Molich and Nielsen 1990; Нильсен и Молич 1990].Четыре года спустя я усовершенствовал эвристику на основе факторного анализа 249 проблем юзабилити [Nielsen 1994a], чтобы получить набор эвристик с максимальной объяснительной силой, в результате чего был получен этот пересмотренный набор эвристик [Nielsen 1994b].

В 2020 году мы обновили эту статью, добавив дополнительные объяснения, примеры и ссылки по теме. Хотя мы немного уточнили язык определений, сама эвристика 10 остается актуальной и неизменной с 1994 года. Когда что-то остается верным в течение 26 лет, это, вероятно, будет применяться и к будущим поколениям пользовательских интерфейсов.

10 бесплатных эвристических плакатов

Загрузите бесплатный плакат Якоба «10 эвристик юзабилити» внизу этой статьи в разделе Загрузки . Вы можете скачать итоговый плакат в 3-х размерах: полный плакат, A4 и Letter. Вы также можете загрузить полный набор из 11 плакатов (10 эвристик юзабилити и итоговый плакат.

Загрузите и распечатайте наши бесплатные плакаты с эвристикой юзабилити. Повесьте их дома, в офисе или подарите коллеге.

См. Также

Примеры

Контрольные списки и инструкции

Список литературы

• Молич Р.и Нильсен Дж. (1990). Улучшение диалога между человеком и компьютером, Коммуникации ACM 33, 3 (март), 338-348.
• Нильсен Дж. И Молич Р. (1990). Эвристическая оценка пользовательских интерфейсов, Учеб. ACM CHI’90 Conf. (Сиэтл, Вашингтон, 1–5 апреля), 249–256.
• Nielsen, J. (1994a). Повышение объяснительной силы эвристики юзабилити. Proc. ACM CHI’94 Conf. (Бостон, Массачусетс, 24–28 апреля), 152–158.
• Nielsen, J. (1994b). Эвристическая оценка. В Nielsen, J., and Mack, R.L. (Eds.), Методы проверки юзабилити, John Wiley & Sons, Нью-Йорк, штат Нью-Йорк.

Многие люди спрашивают, могут ли они использовать эту эвристику в своей работе. Да, но, пожалуйста, укажите Якоба Нильсена и укажите адрес этой страницы [nngroup.com/articles/ten-usability-heuristics] или процитируйте статью выше [Nielsen 1994a]. Если вы хотите распечатать копии этой страницы или воспроизвести контент в Интернете, пожалуйста, ознакомьтесь с нашей информацией об авторских правах для получения подробной информации. Авторские права © Якоба Нильсена. ISSN 1548-5552

Предотвращение ошибок пользователя: предотвращение сознательных ошибок

Человек может ошибаться, и ошибки возникают, когда люди взаимодействуют с пользовательскими интерфейсами.По словам Дона Нормана, есть две категории пользовательских ошибок: оплошности и ошибки. Ошибки возникают, когда пользователь находится на автопилоте и совершает неправильные действия для достижения разумной цели. Мы подробно обсуждаем поскальзывания и предотвращение скольжения в первой статье этой серии. В этой статье мы остановимся на ошибках .

Ошибки возникают, когда пользователь разработал некорректную мысленную модель интерфейса и формулирует цель, которая не соответствует ситуации. Например, многие детские онлайн-игры начинаются с короткого видеоурока или видеорекламы другой игры; в нашем пользовательском тестировании с детьми мы заметили, что, когда видео слишком похоже на настоящую игру, дети испытывают искушение взаимодействовать с ним, думая, что они уже могут начать играть.В этой ситуации пользователи формируют и выполняют несоответствующую цель, в основном потому, что они неправильно интерпретируют то, что они видят на веб-сайте (а именно, они думают, что видео — это настоящая игра). Хороший дизайн должен помочь предотвратить такое несоответствие между ожиданиями пользователя и интерфейсом.

Два залива

При работе с такой системой, как веб-сайт или приложение, пользователи начинают с какой-то цели и на основе своей ментальной модели системы формируют план действий для достижения этой цели.Затем они принимают меры и проверяют, что их действия привели к желаемым результатам. В своей книге Дизайн повседневных вещей , Дон Норман называет этот процесс преодолением Залива исполнения («Как мне работать с этим инструментом для достижения моей цели?») И Залива оценки («Это сработало так, как я хотел?»).

Множество пользовательских ошибок (но не промахов) происходит, когда пользователи не получают достаточной помощи в преодолении этих двух пропастей, а ментальная модель проектировщиков и интерпретация того, как должна работать система, не соответствуют ментальным моделям пользователей.В таких ситуациях пользователи либо формируют неверный план действий, либо плохо понимают, как состояние системы изменилось в результате их действий. В то время как предотвращение оплошностей часто сводится к простой проверке и наложению ограничений, предотвращение ошибок предполагает понимание ментальных моделей пользователей и их ожиданий, а также принуждение ваших дизайнеров к их соответствию. Не заблуждайтесь, полагая, что пользователи в конечном итоге изучат ментальные модели ваших дизайнеров; хотя это может иметь место в редких ситуациях, когда пользователи вынуждены использовать систему регулярно, когда большинство приложений и веб-сайтов, ориентированных на потребителя, пользователи просто переходят на другой сайт, вместо того, чтобы беспокоиться о том, чтобы изучить сложный.

Сбор данных пользователя

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

Соблюдайте правила проектирования

Использование стандартных соглашений по проектированию помогает пользователям преодолеть залив оценки и залив исполнения, а также понять, какие действия они могут предпринять. Это подтверждается Законом Якоба , , который гласит, что «пользователи проводят большую часть своего времени на других веб-сайтах.«Каждый пользователь, который взаимодействует с вашим веб-сайтом или приложением, был обучен тысячами других дизайнеров ожидать, что общие интерактивные элементы будут выглядеть и работать определенным образом, и когда ваш веб-сайт отклоняется от этих соглашений, могут возникнуть условия, подверженные ошибкам.

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

Общение по средствам

Помимо использования условных обозначений, которые пользователи могут распознать из предыдущего опыта, есть еще один способ сделать элементы управления понятными (и, таким образом, помочь пользователям преодолеть пропасть выполнения) — это сообщить в проекте, как его можно использовать. Например, пользователи привыкли к нажатым кнопкам, которые выглядят так, как будто они имеют небольшую тень снаружи. Этот эффект заставляет кнопку выглядеть так, как будто она поднимается из страницы, и вы можете нажать на нее.И наоборот, поля формы также имеют прямоугольную форму, но имеют небольшую тень внутри формы, указывающую на то, что они пусты и могут быть заполнены.

Этот атрибут дизайна, который указывает, как его можно использовать, часто называют обозначением объекта . Атрибут сам по себе является способом , с помощью которого можно взаимодействовать с объектом (кнопки можно нажимать, поля формы могут содержать вводимые данные), а визуальные подсказки, которые сообщают об этом пользователю, известны как означающие аффорданс.Если нет четкого обозначения, которое сообщает об аффордансе, пользователи могут не понимать, как использовать элемент управления, и совершать ошибки.

Polarr — популярный фоторедактор для iOS. Правые элементы управления редактированием ( Temp , Tint и т. Д.) Требуют, чтобы вы коснулись поля, а затем смахнули влево или вправо, чтобы изменить числовое значение этого параметра. Однако элементы управления не указывают, как пользователи должны взаимодействовать с ними, поэтому новички могут случайно установить неправильные значения для этих элементов управления несколько раз, прежде чем научатся правильно с ними взаимодействовать.Присутствует дополнительная сложность взаимодействия: поскольку элементы управления находятся в дальней правой части дисплея, вы можете легко уменьшить параметры, проведя пальцем влево, но вы быстро исчерпаете горизонтальное пространство, чтобы провести пальцем вправо и увеличить значение.

Результаты предварительного просмотра

Иногда пользователи даже не подозревают, что они собираются инициировать действие, которое приводит к изменениям, которые очень масштабны и трудно поддаются проверке. Пользователи вполне могут захотеть пересмотреть свои цели, как только у них будет возможность сравнить эффект действия со своей целью; Preview Функции дают возможность преодолеть Залив Оценки, не допуская ошибок.

Хорошим примером является рендеринг специальных эффектов в программном обеспечении для редактирования видео, когда редактирование, выполняемое системой в фоновом режиме, может занять 5 или 10 минут, а компьютер в основном не отвечает, пока он работает. В этом случае, даже если пользователи не потеряли свою работу навсегда, если результат оказался не тем, что они искали, они потеряли довольно много времени и, возможно, также терпения. По возможности предлагайте предварительный просмотр, который пользователи могут проверить, чтобы убедиться, что они получат то, что хотят.Это помогает избежать ошибок, отнимающих много времени, прежде чем они будут сделаны.

В iOS 8 есть опция специальных возможностей, которая позволяет пользователям с ослабленным зрением увеличивать масштаб дисплея, чтобы значки и текст были больше. Применение масштабирования требует перезапуска телефона, что является тяжеловесным действием , которое займет некоторое время, поэтому iOS показывает предварительный просмотр того, как все будет выглядеть, прежде чем вы решите применить это изменение. Этот полезный предварительный просмотр позволяет оценить, действительно ли ваша цель — увеличить изображение.

Предотвращение ошибок и промахов

Некоторые стратегии предотвращения ошибок работают как с оплошностями, так и с ошибками. Ниже приведены хорошие общие рекомендации по снижению вероятности (и серьезности) всех типов ошибок.

Удаление бремени памяти

Всякий раз, когда пользователям необходимо хранить большой объем информации в своей краткосрочной памяти во время работы над задачей, они уязвимы для промахов, когда они могут повторить шаги или не выполнить задачу. Провалы в памяти также могут привести к ошибкам, когда пользователи забывают ранее принятые решения и повторяют процесс с разными результатами.Хорошая стратегия предотвращения обоих этих типов ошибок — уменьшить нагрузку на память пользователей.

По возможности удаляйте условия, при которых пользователи должны хранить информацию в своей собственной памяти при переходе от одного шага к другому в сложных многоступенчатых процедурах. Вместо этого старайтесь отображать контекстную информацию, необходимую пользователям для выполнения задачи. Помните, что пользователи часто отвлекаются, многозадачны или не полностью сосредоточены на веб-сайте или приложении, которое они используют. Хороший подход — представить, что ваши пользователи могут быть прерваны телефонным звонком после каждого шага многоступенчатого процесса.Вы хотите показать всю информацию, необходимую пользователям для возобновления выполнения своих задач после того, как они были прерваны на несколько минут.

Hipmunk обеспечивает быстрый просмотр контекстной информации, необходимой для возобновления процесса выбора полета, даже после прерывания. На этом втором этапе процесса бронирования четко отображаются даты поездки, аэропорты, о которых идет речь, тот факт, что был выбран самый дешевый тариф для вылета, и что пользователь должен выбрать обратный рейс.Даже пользователи, которые в течение некоторого времени были отвлечены, могли легко возобновить этот процесс, случайно не отклонившись от своих первоначальных требований и не планируя этот полет, или не пытаясь повторить уже выполненные шаги.

Подтвердить перед разрушающими действиями

Дизайнеры обычно сосредотачиваются на пользовательских задачах, связанных с творчеством. Но удаление также должно быть простым. Помните, когда пользователи удаляют элемент, они уничтожают то, на создание чего потребовались определенные усилия. Прежде чем завершить удаление объекта этой тяжелой работы, убедитесь, что пользователь действительно имел в виду Удалить , показывая пользователям диалоговое окно подтверждения.

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

Новое приложение «Фото» от Apple использует обычное диалоговое окно, чтобы убедиться, что пользователь действительно намеревался удалить эти фотографии недавнего похода, и указывает, что объем действия — выделенные 24 фотографии. Более того, кнопка для подтверждения действия удаления четко обозначена как Удалить , а не как обычная кнопка Подтвердить .

Однако важно осторожно использовать диалоговые окна подтверждения, поскольку они прерывают рабочий процесс пользователей и по своей сути замедляют их. Если в диалоговом окне подтверждения спрашивается: «Вы действительно хотите это сделать?» После каждого решения многие пользователи не будут тратить время на повторную проверку того, допустили ли они ошибку, прежде чем инстинктивно нажать выделенную кнопку Подтвердить . Как ни странно, дизайн, предназначенный для предотвращения ошибок, на самом деле может на увеличить их на , поскольку пользователь начинает спешить, чтобы противодействовать неэффективности постоянного подтверждения.Как и в знаменитой басне Эзопа «Мальчик, который плакал Волк», пользовательский интерфейс может в несколько раз превратиться в «Компьютер, который плакал, подтверждай». В обоих случаях люди перестанут обращать внимание на ложные срабатывания сигнализации к тому моменту, когда появится что-то важное, о чем нужно плакать. Не используйте диалоговые окна подтверждения в качестве единственного метода предотвращения ошибок, применяйте их осторожно с другими методами, обсуждаемыми в этой статье, чтобы максимизировать их полезность и ограничить их неэффективность.

Поддержка отмены

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

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

Gmail предлагает приятную контекстную функцию Отменить для деструктивных действий, таких как случайное удаление 92 писем.Эта функция оказалась настолько полезной, что Gmail теперь также сделал ее доступной при отправке электронных писем, позволяя отменить доставку электронного письма в течение 30 секунд после нажатия Отправить .

Предупреждать перед ошибкой

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

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

Сводка

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

Номер ссылки

Дон Норман. Дизайн повседневных вещей , Basic Books 2013.

Пятая эвристика юзабилити Якоба Нильсена для дизайна пользовательского интерфейса | Мелисса Веласкес

Предотвращение ошибок. Изображение Steve Buissinne с сайта Pixabay

Хотите сделать хороший дизайн еще лучше? Этого можно добиться, проведя тщательную эвристическую оценку. Добро пожаловать в пятую часть серии статей о 10 общих принципах дизайна взаимодействия Якоба Нильсена. В этой статье основное внимание будет уделено пятому принципу — предотвращению ошибок. Если вы пропустили четвертый, не стесняйтесь проверить его здесь!

Фото: www.designmodo.com

Принцип № 5 Предотвращение ошибок

«Даже лучше, чем хорошие сообщения об ошибках, — это тщательный дизайн, который в первую очередь предотвращает возникновение проблемы.Либо устраните условия, подверженные ошибкам, либо проверьте их и предоставьте пользователям вариант подтверждения, прежде чем они совершат действие ».

Кто виноват, если пользователь заблудился или совершил ошибку при взаимодействии с продуктом? Необходимо различать ошибку пользователя и ошибку дизайна . Часто ошибки связаны с дефектным дизайном. При хорошем дизайне пользователю должно быть непросто сделать ошибку. Менее тщательно разработанные продукты полагаются на сообщения об ошибках, но независимо от того, насколько четким и понятным является сообщение об ошибке, лучший дизайн всегда направлен на предотвращение ошибок пользователя с самого начала.В своей книге The Design of Everyday Things Дон Норман упоминает два распространенных типа пользовательских ошибок , о которых дизайнеры должны знать. Ошибки, совершаемые неосознанно, и ошибки, совершаемые сознательно.

Как обсуждалось в моей статье о четвертой эвристике согласованности и стандартов, пользователи часто работают на автопилоте. Это во многих случаях приводит к гладкому результату, но бывают случаи, когда автопилот ведет нас неверным путем. Вы когда-нибудь катались и, будучи чем-то озабоченным, свернули не туда, потому что привыкли делать это каждый день, когда едете? Точно так же пользователи могут случайно сделать неправильный шаг или ввести неточную информацию, особенно когда они чувствуют себя уверенно.Даже опытные пользователи подвержены этим ошибкам, потому что из-за их знакомства с продуктом они часто работают на ненадежном автопилоте. Эти ошибки верны. ошибки пользователя , потому что именно пользователь ошибся. Однако дизайнеры могут помочь пользователю избежать этих бессознательных ошибок, следуя некоторым общим рекомендациям, предложенным Нейлсеном.

«Пользователи часто отвлекаются от выполняемой задачи, поэтому предотвращайте бессознательные ошибки, предлагая предложения, используя ограничения и проявляя гибкость.”

Предложения

Предложения пользователю могут уберечь его от случайной ошибки. Например, если пользователь взаимодействует с полем поиска Google, Google предложит пользователю предложения и даже обнаружит орфографические ошибки или опечатки.

Фото: www.google.com

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

Фотография предоставлена: приложение Uber

Ограничения

Предоставьте полезные ограничения, чтобы пользователи не могли сделать выбор, не имеющий никакого смысла в данных обстоятельствах.Одним из примеров этого может быть запрет на использование буквенных символов в поле номера телефона, поскольку пользователь может случайно нажать на букву.

Значения по умолчанию

Предоставьте пользователю подходящие значения по умолчанию, которые дают ему или ей разумные значения для конкретной задачи. Хорошие настройки по умолчанию помогут пользователю избежать ошибки, потому что им будет предоставлен контекст для работы. Приложение FidelityAgent ONE, используемое некоторыми риэлторами® для расчета стоимости транзакции с недвижимостью, содержит предварительно заполненные значения для наиболее распространенных транзакций покупки и продажи дома.Эти значения служат руководством для агента, но их можно легко изменить.

Фотография предоставлена: приложение FidelityAgent ONE

Форматирование

Упростите работу для пользователя, отформатировав поля ввода, чтобы их было легко проверить. Подумайте о карте социального страхования или кредитной карте. Наличие пробелов или тире между числами облегчает их чтение. По этой причине пользователю будет полезно, если цифры будут сгруппированы в отдельные поля при вводе номера кредитной карты. В таком случае курсор должен автоматически заполнять следующее поле после того, как выделенное количество чисел израсходовано в поле перед ним.Это позволит пользователю вводить текст естественно и не соответствовать одному конкретному формату.

Чтобы решить текущие проблемы, люди часто полагаются на ментальные модели, основанные на прошлом опыте. Например, когда ребенок плачет, цель отца — успокоить его. Если ребенок впервые испытывает боль при прорезывании зубов, а отец меняет мокрый подгузник, она продолжит плакать. Если он попытается ее накормить, она может немного поесть, но снова заплачет, потому что он не дошел до корня проблемы.Папа неправильно понял проблему, в результате чего была совершена ошибка, когда он пытался достичь своей цели — успокоить свою дочь.

Изображение Бена Керкса с сайта Pixabay

Ошибки, основанные на неполной или неверной информации, возникают, когда пользователи неправильно понимают, какие задачи необходимо выполнить для достижения цели. Даже если они выполнят действия безупречно, эти действия приведут к ошибке. В отличие от промахов, которые неосознаваемы, пользователи сознательны, хотя и дезинформированы, но при этом совершают ошибки.

Хороший дизайн должен помочь предотвратить такое несоответствие между ожиданиями пользователя и системой.Дон Норман называет это преодолением разрыва между заливом оценки (понимание состояния системы) и заливом исполнения (принятие мер для достижения конкретной цели). Многие ошибки могут быть связаны с тем, что пользователь не получил достаточной помощи в соединении двух заливов. Системы должны разрабатываться с учетом ментальных моделей пользователей. В противном случае пользователи будут стремиться к другому продукту, который лучше понимает их мыслительный процесс.

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

Чтобы предотвратить ошибки, пользователям следует дать возможность проверять свою работу перед ее отправкой. Для сайтов электронной коммерции крайне важно предоставить пользователю экран подтверждения при размещении заказа, чтобы избежать нежелательных ошибок при покупках.

Фотография предоставлена: www.ironempireclothing.com

Аналогичным образом пользователям должно быть предоставлено диалоговое окно подтверждения, когда это уместно, что может помешать им совершить безвозвратную ошибку, например, навсегда удалить файл или видео. Чтобы предотвратить возможную ошибку, Facebook дважды проверяет пользователя перед окончательным удалением беседы из Messenger.

Фото: приложение Facebook Messenger

Другие способы предотвращения ошибок — поддержка отмены, следование стандартным шаблонам проектирования и предупреждение пользователей перед ошибками. LinkedIn предоставляет пользователям ограничение в 300 символов при добавлении примечания к приглашению. Вместо того, чтобы ждать, пока пользователь напишет длинное сообщение, которое приведет к ошибке отправки, пользователям дается обратный отсчет символов по мере их ввода, чтобы они не набирали слишком много для начала.

Фотография предоставлена: www.linkedin.com

Часто то, что называют ошибкой пользователя , более уместно отнести к ошибке в дизайне.Хороший дизайн с самого начала направлен на предотвращение ошибок пользователя. Крайне важно понимать ментальные модели пользователей, чтобы создать дизайн, наилучшим образом отвечающий их потребностям. Этого можно достичь только путем тщательного и тщательного исследования и тестирования пользователей. Два типа ошибок, на которые следует обратить внимание при разработке или улучшении продукта, — это промахи и ошибки. Ошибки — это распространенные бессознательные ошибки, которые случаются, когда пользователи не полностью уделяют внимание поставленной задаче. Предотвратить эти типы ошибок можно, направляя пользователя с помощью предложений, ограничений, значений по умолчанию и форматирования.Ошибки — это сознательные ошибки, которые совершают пользователи, потому что они отрабатывают несовместимую ментальную модель продукта. Они дезинформированы о том, как на самом деле работает система. Пользователям должна быть предоставлена ​​возможность просматривать свою работу и получать уведомления, когда их действия переходят в возможно безотзывное состояние, например, при удалении цепочки сообщений. Хороший дизайн также предотвращает ошибки, следуя стандартам в шаблонах проектирования и поддерживая отмену. Лучшие дизайны всегда ставят ментальные модели пользователей выше, чем модели дизайнеров.Для улучшения любого дизайна, тестирования, тестирования, тестирования и поиска способов предотвращения возникновения пользовательских ошибок . Это создаст лучший продукт и значительно улучшит его пользовательский опыт.

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

UX Collective жертвует 1 доллар США за каждую статью, опубликованную на нашей платформе. Эта история внесена в UX Para Minas Pretas (UX For Black Women), бразильскую организацию, деятельность которой направлена ​​на продвижение равенства черных женщин в технологической индустрии посредством инициатив действий, расширения прав и возможностей и обмена знаниями.Молчание против системного расизма — недопустимый вариант. Создайте сообщество дизайнеров, в которое вы верите.

10 ошибок юзабилити, которых следует избегать

Приходилось ли вам когда-нибудь читать книгу с действительно маленьким шрифтом? Усилить зрение до предела, с трудом подбирать слова, прежде чем неизбежно закроет раздражающий текст, чтобы никогда не открывать его снова. Такое же чувство испытывает пользователь, который сталкивается с продуктом или веб-сайтом с плохим юзабилити.

Вот список наиболее распространенных ошибок дизайнеров, из-за которых вы можете потерять клиентов.

Ошибки формы информации

1. Заставить пользователя слишком много думать

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

Facebook — хороший тому пример. На одном этапе дизайнеры создали форму, позволяющую пользователям попросить друга удалить определенную фотографию. Однако эта функция была непопулярной, так как только 20 процентов пользователей дошли до последнего шага отправки сообщения.Это неудивительно, ведь было сложно подобрать правильные слова, чтобы вежливо объяснить другу, почему вы хотите, чтобы он удалил опубликованное ими изображение.

Позже Facebook изобрел лучший способ помочь пользователям справиться с этой неловкой ситуацией. Ведущий дизайнер Facebook Маргарет Гулд Стюарт говорит, что проблема была решена путем предоставления заранее определенного сообщения, которое автоматически генерируется, когда пользователь отмечает изображение как неудобное. Как только Facebook начал предлагать готовый текст, количество отправленных форм выросло на три — до 60 процентов.

Хорошее правило дизайна — думать о пользователе там, где это возможно, и создавать для него готовые сообщения. Наша команда проверила это на себе. Некоторое время назад контактная форма на нашем сайте была слишком сложной. После того, как студия упростила его до «Привет, я хочу с тобой связаться», количество ссылок значительно выросло.

2. Запрос дополнительной информации

Клиент, который долгое время добавлял товары в корзину, будет недоволен тем, что ему придется тратить еще больше времени на то, чтобы рассказать о себе больше.Еще раз ввести номер кредитной карты, третий раз написать адрес — у клиента просто не хватает на это терпения.

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

Большинство интернет-магазинов знают, как решить эту проблему.Мое любимое решение предложил pethouse.ua, где нет необходимости указывать какие-либо дополнительные данные, кроме вашего номера телефона. Детали ваших предыдущих заказов хранятся в базе данных, и менеджер перезвонит вам, чтобы подтвердить адрес.

3. Отсутствие гибкого ввода данных

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

Клиент должен попробовать несколько вариантов, чтобы угадать правильный.

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

Хорошая форма помогает вам ввести необходимые данные или принимает любые или предоставленные способы записи телефонных номеров и дат — с использованием пробелов, косых черт, тире или точек.

Хотя сегодня люди проводят много времени в Интернете, они не хотят тратить его на заполнение формы. Все, что им нужно, — это возможность быстро решить проблему и вернуться к тому, чем они занимались.

Ошибки интерфейса

4. Отсутствие обратной связи с пользователями

Если в интерфейсе есть кнопка, которая выглядит активной, ее нужно использовать. Продемонстрируйте действие пользователя и предоставьте обратную связь, независимо от того, было оно успешным или нет.

Раздражает «Ведро» (сборник снимков) известного сайта дизайнеров Dribbble. Когда дизайнер пытается добавить снимок в Bucket, ничего не происходит, поскольку он или она не выбрали конкретную корзину.В то же время кнопка «Готово» во всплывающем окне светится розовым цветом как активная, что заставляет дизайнера думать, что нужно нажать на нее. В интерфейсе нет обратной связи, чтобы показать, что кадр был добавлен не случайно. Проверить это на работе можно здесь.

5. Нарушение мелкой моторики пользователя

Закон

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

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

Еще один пример плохого дизайна — крошечные иконки для работы с основным текстом на сайте craft.io.

Они слишком маленькие и расположены далеко от текста, что очень раздражает пользователя.

6. Слишком много кликов

Продуманный дизайн экономит клики пользователя.Если действие можно выполнить с меньшим количеством кликов пользователя — уменьшите их, особенно часто повторяющиеся действия в интерфейсе.

7. Интерфейсы, которые необходимо расшифровать

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

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

И эта кнопка очень похожа на стандартный значок копирования, но фактически переключает вид со списка на карточку.

8. Заставить пользователя угадать ошибку

Если что-то пойдет не так, например, у человека недостаточно средств на кредитной карте или отсутствуют некоторые данные, интерфейс должен сообщить об этом пользователю.Превращать пользователя в Шерлока, чтобы выяснить причины ошибки — не лучшая идея для хорошего дизайна.

Этические ошибки

9. Уловка пользователя с автопилотом

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

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

Есть несколько положительных примеров функции отписки, но они действительно редки.

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

Большая яркая кнопка для получения годовой подписки побуждает пользователя нажать на нее, и многие так и делают. При этом сервис скрывает сообщение о том, что вы не можете отменить такую ​​подписку, и оно автоматически переносится без предупреждения. Каждый пользователь хотел бы узнать об этих условиях перед подпиской.

10. Слишком много всплывающих окон

Бесконечная реклама — очевидная неприятность — слишком много подсказок и других отвлекающих элементов, которые якобы помогают пользователю и не так прозрачны.Что ж, они должны быть ясны, поскольку слишком много давить на пользователя — это способ кого-то перегрузить.

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

---

Об авторе
Елена Галицкая — соучредитель и руководитель отдела дизайна в Báchoo, молодой отмеченной наградами команде, специализирующейся на веб-дизайне и разработке приложений.Они выполнили более 60 проектов и выиграли несколько наград за лучший дизайн мобильных приложений, лучший визуальный дизайн и лучшее приложение для повышения производительности.