Что такое бездумное юзабилити
Юзабилити сайта: что такое и как анализировать в 2020 году
Конечно для других товаров или услуг цифра может быть меньшая, но это не означает что там будет легче продать товар.
Команда Plerdy подготовила интересную статью о том, как юзабилити влияет на увеличение конверсии сайта и на примере известного сайта провела юзабилити аудит.
Все рекомендации, что Вы прочитаете в статье сможете с легкостью проверить сами и воплотить в жизнь для улучшения Вашего сайта.
Под юзабилити понимается насколько ваш сайт дружелюбен и удобен по отношению к клиентам. Посетив ваш веб-сайт, пользователь не должен испытывать дискомфорт, тратить много времени на поиск нужной информации иначе это очень плохо кончиться для Вашего бизнеса. Думаете нет?
Ниже в статье мы наводим пример юзабилити аудита и более детально описываем какие проблемы могут возникать в онлайн-ресурсов имеющих плохое юзабилити.
Юзабилити аудит должен содержать в себе проверку следующих элементов сайта отдельно для ПК и мобильной версии сайта:
Новички часто допускают ошибки, наиболее распространены следующие:
В 2020 г. в SEO для вывода сайта в ТОП используются такие приемы как:
Это реальный веб-сайт и его анализ позволит лучше понять, что именно делается при оценке. Внимание уделяется каждой мелочи.
Анализ показывает, что это требование на веб-сайте выполнено, переход на главную осуществляется после нажатия на логотип компании. Решение неплохое, интуитивно понятное, большинство пользователей разберется с этим без дополнительных разъяснений.
10 правил юзабилити. Разбираемся на примерах
С каждым днем все больше услуг, начиная от сферы образования и до медицины, переходят в онлайн. Растет спрос, растет предложение, и конкуренция среди онлайн-площадок также стремится вверх. Грамотное и удобное оформление систем необходимо не только чтобы привлечь пользователей, но и чтобы их удержать.
Совместно с UI/UX дизайнерами Forte Group мы решили разобраться в 10-ти правилах эвристики, на которых зиждется весь User Experience, а значит весь опыт взаимодействия с онлайн-системами.
UX дизайн или User Experience — это любой опыт, который пользователь получает при взаимодействии с объектом. Это может быть как опыт использования приложения, так и дверной ручки.
Чтобы продемонстрировать важность UX, обратимся к статистике от ведущего в мире UX агентства — Intechnic:
— 70% пользователей могут уйти с сайта, если им не понравится дизайн интерфейса;
— 62% из них поделится своим негативным опытом с другими пользователями;
— 79% никогда не вернутся на сайт, если им было трудно его использовать в первый раз.
Чтобы ваш сайт или приложение не превратилось в головоломку, проверьте свой продукт 10 правилами юзабилити. Сформулировал их еще в 90-х годах Якоб Нильсен и назвал правилами эвристики. Не смотря на то, что эти правила были придуманы порядка 30-ти лет назад, они актуальны до сих пор.
Давайте пройдемся по каждому из них отдельно и рассмотрим примеры, где они работают, а где нет. В дальнейшем вы сможете использовать этот список, как чек-лист при создании интерфейса. Погнали!
Пользователь всегда должен понимать, что происходит в данный момент в системе (на сайте, в приложение и тп). Производя какие-то действия, пользователь должен понимать, есть у системы отклик или нет. Интерфейс может реагировать через прелоадеры, сообщать о статусах загрузки, объяснять через прогресс бары, счетчики и тд. Кроме этого, статус может сообщаться через окна успешных действий и ошибках. В общем, все элементы, которые помогают понять пользователю, что система работает. Обратная связь интерфейса должна быть своевременной, осмысленной и простой для понимания, чтобы пользователи знали, что их действия замечены системой.
Например, Facebook был одной из первых компаний, которая сделала мобильное приложение и решила кастомизировать прелоадер, значок загрузки при каждом запуске приложения. Но пользователям это не нравилось, они отправляли жалобы о том, что Facebook стал слишком медленно работать.
Система должна быть очень простой и не превращать взаимодействие с ней в головоломку. Символы внутри системы тоже должны быть простыми и схожими с теми, которые мы используем в реальной жизни.
Система должна быть понятна пользователю не только визуально, но и вербально. Говорите с вашим пользователем на одном языке. Например, на банковских сайтах от слов «лизинг», «факторинг» и «переуступка долга» у пользователя могут разбегаться глаза. Сложные конструкции словно обвиняют в пропуске пар по курсу экономики в университете. В таких случаях иконки становятся более информативными, чем сам текст.
Классный пример можно найти у компании Spotify (музыкальный стриминговый сервис). Когда ты случайно лайкаешь песню, а потом убираешь лайк, внизу выскакивает фраза «Let’s pretend that never happened»(Давай притворимся, что ничего не произошло). Пользователю приятно, так как система дает лаконичный и по-дружески шуточный фидбек.
Действие отмены — самое частое действие, которое совершает пользователь во всех онлайн-системах. Поэтому третье правило звучит так, чтобы любая система предлагала возможность дублировать или отменить последнее совершенное действие.
Это настолько важно, что команда IOS разработала отдельное действие отмены для смартфонов: встряхнуть телефон.
Несмотря на то, что система должна развязывать руки пользователю, до сих пор не все мессенджеры активировали опцию редактирования отправленных сообщений.
Вот еще один неудачный пример, где во время использования сайта магазина одежды, достаточно агрессивно выныривает реклама их мобильного приложения. При просмотре товара, рекламный pop-up закрывает важную кнопку назад. Чтобы вернуться, пользователю нужно искать кнопку назад в браузере и есть вероятность, что после таких игр в кошки-мышки пользователь вообще не вернется на сайт.
Есть стандарты однотипных систем, которых стоит придерживаться. Любые отклонения могут привести пользователей в заблуждение. Будет странно, когда ваши подразделы будут кардинально отличаться от подразделов конкурентов. Пользователь просто не сможет их сравнить.
Все знакомы с навигацией интернет-магазинов: меню слева, сверху разделы и поля для логина и пароля, корзина. Это все стандартизировано. Очень сложно найти интернет-магазин, который кардинально отличается от конкурентов.
Еще пример — меню почтовых агентов. Мы уже привыкли, что первыми в списке всегда будут входящие, а в конце списка будут папки Спам и Корзина.
Плохой пример. На сайте BBC есть секция, где люди оставляют комментарии, за которые можно голосовать. Рейтинги Highest обозначены стрелкой вниз, а Lowest стрелкой вверх, (здесь нет логики). Логичнее сделано на Stackoverflow (сайт вопросов\ответов о программировании).
Лучше использовать интуитивно понятные стандарты, чем изобретать велосипед и пытаться переучивать пользователей.
В дизайне любой системы стоит придерживаться одной цветовой гаммы. В примере ниже указана кнопка «Купить», отрисованная разными цветами. Пользователь сразу начинает сомневаться, одну и туже функцию выполняют эти кнопки или нет.
Если система дает сигнал пользователю, что большая красная кнопка выполняет важные действия, она должна выполнять их во всей системе. Ни зеленая или серая, а красная. Должна прослеживаться однородность системы.
Лучше предупредить о возможности ошибки, чем придумывать красивые и содержательные сообщения о последствиях. Всегда продумывайте сценарии, в которых может возникнуть ошибка, и старайтесь ее предотвратить.
Например, наши гаджеты, которыми мы пользуемся каждый день, предупреждают нас push-уведомлениями, звуковыми сигналами или вибрацией о низком заряде батареи.
Понятно, что ничего не произойдет, если твоя зубная щетка будет разряжена и ты не сможешь почистить зубы. Но, если речь идет о каком-то серьезном оборудовании, где на кону стоит жизнь человека или его здоровье, предупреждающие сигналы очень важны.
Еще пример. При оплате картой онлайн, система сразу подсказывает в полях для заполнения, какую информацию ожидает от пользователя: номер карты, срок действия, имя. Или, когда мы придумываем пароль для регистрации аккаунта, сайт показывает, какие условия для пароля выполнены, а какие нет. Например, в пароле нет заглавной латинской буквы.
Нельзя заставлять пользователя слишком много думать. Всё взаимодействия должны происходить на интуитивном уровне. Например, всем знакомый знак.
А теперь представьте: вы пошли в бар, выпили коктейль, решили сходить в туалет и видите вот такое.
И не понимаете, в какую вам дверь. Это очень креативно, но заставляет пользователя думать. В итоге, он может не найти то, что искал, либо найти, но поздно:)
Ниже еще пример с эскалаторами, как одна мелкая деталь может полностью изменить восприятие пользователя.
Иконки всё чаще заменяют текст и упрощают нам жизнь, но стоит их использовать аккуратно. Ведь метафоры на иконках могут быть не так очевидны.
Если ты сомневаешься, что твоя иконка считывается правильно, лучше используй текст.
Мы никогда не знаем, с каким опытом придет пользователь на наш сайт или приложение, поэтому всегда выигрывают системы, в которых есть ускорители и возможность настраивать действия. Ниже вы найдете поп-ап, у которого есть минимум 4 способа закрытия. Все нашли?
Если система может предоставить пользователю несколько способов совершения одного действия, то пусть сделает это. Если убрать кнопку Close и крестик, то пользователи, у которых не было опыта взаимодействия, с клавишей Esc или с правилом «кликнуть по свободному пространству вокруг поп-апа», растеряются и не сразу смогут закрыть окно.
Еще пример — лайки в инстаграме. Поставить лайк публикации можно не только, кликнув на иконку сердечка, но просто два раза нажав по экрану.
Работа ускорителей хорошо представлена на сайтах покупки билетов. В поле, где вы начинаете вводить желаемое направление маршрута, система сразу начинает вам предлагать варианты на основе уже введенных данных. Если вы ищите маршрут туда-обратно, курсор сам перескакивает из поля туда, в поле обратно, когда вы определяетесь с выбором направления.
Восьмое правило — это эстетика минимализма в дизайне. Чем проще сайт визуально и функционально, тем быстрее пользователь достигнет своей цели на нем. Ниже пример очень перегруженного британского сайта для покупки машин в лизинг.
Обратный пример — поисковик Google. Здесь всё просто, лаконично и интуитивно понятно.
Невозможно избежать ошибок при работе системы. Главное — это правильно объяснить пользователю, почему произошла ошибку и что с этим делать дальше.
Например, при регистрации нового пользователя система подсветит поле ввода, если пользователь с таким именем уже существует. А еще система может предложить варианты свободных имен на основе введенных ранее данных.
Еще пример: сайты для поиска работы. Любой пользователь может опечататься при вводе данных, но система все равно понимает его, обрабатывает запрос и выдает результат. Если бы система не поняла запрос, то поиск не дал бы никаких результатов. Пользователь мог не перепроверить свои действия и уйти с негативным опытом.
Почти 10% пользователей читают справочные материалы или проходят туториал для использования системы. Чаще всего пройти туториал система предлагает при первом скачивании или регистрации. У пользователя должен быть выбор: проходить обучение или нет. Справочные материалы всегда должны быть легко доступны, даже если пользователь при первом визите в систему отказался проходить туториал.
Хороший пример туториал от IOS по использованию мышки. Здесь показывается не только ее функционал, но и как она взаимодействует в интерфейсе. Сам туториал можно включить и выключить.
Для знакомства пользователей с масштабными и сложными сайтами чаще всего используют FAQ или часто задаваемые вопросы.
На этом всё. Надеемся, вы найдете эти советы и примеры полезными и в дальнейшем будете использовать их при работе с системами. Творите:)
Юзабилити
В начале 2000-х годов сайты и первые онлайн-магазины диктовали свою «волю» пользователям: мало кто из разработчиков думал об юзабилити: удобстве, быстроте поиска информации и прочих характеристиках. Ресурс в интернете просто был – кривой, тяжелый, с непонятной навигацией – пользователи заходили. Это работало. С развитием технологий и ростом конкуренции изменилось всё. Теперь во главу угла ставят комфорт посетителя сайта, простоту и отзывчивость ресурса – юзабилити.
Пользователь не будет ждать загрузки страницы 2-3 минуты, не станет разбираться в хитросплетениях меню. Он закроет ресурс – уйдет к конкурентам, которые поработали с юзабилити сайта.
Что такое usability?
Юзабилити – это удобство использования чего либо, в нашем случае ресурса в интернете. В статье мы рассмотрим общие характеристики этого качественного показателя. Юзабилити сайта, онлайн-магазина, Landing Page, подписной страницы имеют некоторые отличия. Однако зная основы можно легко адаптировать стандартные правила под конкретный формат.
Оценивая этот показатель, станьте на место пользователя, спросите себя: насколько удобно и легко пользоваться сайтом. В помощь приведем пять главных характеристик, отвечающих за качество ресурса:
Почему юзабилити важно?
Успешный бизнес в интернете сегодня строится вокруг двух характеристик: полезность и юзабилити. Первая отвечает за удовлетворенность пользователя представленной информацией, вторая – удобство использования сайта.
Уровень юзабилити влияет на конверсионные составляющие сайта. Конверсия в онлайн-бизнесе – это основа эффективности коммерческого проекта. Что происходит на неудобном ресурсе? В 90% случаев посетитель его закрывает, уходит к конкурентам или возвращается в поиск. Любое из этих действий плохо влияет на восприятие сайта ПС и пользователями. Можно вкладывать деньги в SEO или наращивать бюджеты в контекстной рекламе. Всё в пустую, если не проработано юзабилити.
Сложность навигации – это первый фактор, который может испортить весь бизнес в сети. Редкий юзер настроен сегодня покопаться в хитросплетениях меню, почитать инструкцию пользования ресурсом и прочее. Главный постулат электронной коммерции звучит так – если человек не может найти продукцию, он не сможет её купить.
Перечислим несколько принципов юзабилити, которые надо знать:
Как улучшить юзабилити сайта?
В общих чертах улучшение юзабилити сводится к комплексу действий:
Как провести тест юзабилити?
Чтобы улучшать любые характеристики, необходимо сначала определить, что точно делать. Для этого существует аудит юзабилити ресурса. Хорошо, когда можно доверить эту непростую работу специалистам, но при желании провести тест возможно и самостоятельно.
Тестирование имеет четкий алгоритм:
Когда проводить тест юзабилити? Условий множество – проверка старого ресурса, корректировки разрабатываемого проекта, отстройка от конкурентов и другое.
Резюме
Мы изучили, что такое юзабилити. Узнали основные критерии этого параметра эффективности ресурса. Рассмотрели пути улучшения показателей и алгоритм тестирования. Показатель этот крайне важен для бизнеса, поскольку неудобный сайт не принесет пользы посетителям и результат его работы стремиться к нулю.
Юзабилити сайта: что это, анализ, примеры и чек-лист
Реклама, контент-маркетинг, многоэтапные воронки. Какими бы средствами вы не привлекали клиента, рано или поздно он остается один на один с вашим веб-ресурсом. И в этом момент юзабилити сайта определяет, оформит он заказ или закроет страницу.
Вас встречают по одежке. А точнее — по тому, как выглядит ваш сайт и насколько он удобен для пользователей. И порой даже небольшие улучшения юзабилити способны весомо повысить доход.
Например, Nature Air получили ошеломляющий рост конверсии с 3% до 19%, просто разместив кнопку call-to-action рядом с прайсом и продающим текстом. А Underwater увеличили конверсию в три раза, сделав анализ юзабилити и убрав все лишнее с целевой страницы.
Как добиться таких результатов? Прочесть эту статью до конца и внедрить рекомендации
Юзабилити сайта: что это такое
Юзабилити — ( англ. use ability — возможность пользоваться) термин, который означает удобство использования. Простой, удобный и интуитивно понятный для пользователя сайт = сайт с высоким юзабилити.
Как юзабилити влияет на конверсию
Кстати, юзабилити — важный критерий успеха не только сайта, но и любого продукта. К примеру, согласно исследованию Latirman, 58% мужчин, живущих в Великобритании, не пользуются стиральными машинами, потому что считают их слишком сложными. Дизайнер Питер Фабор даже выпустил специальные наклейки, которые помогают мужчинам постирать вещи. 
Инструкция Питера Фабора для стиральной машины, чтобы ей могли пользоваться даже мужчины.
Конверсия и доход бизнеса напрямую зависят от того, насколько просто и удобно человеку совершать покупку. Поэтому так важно регулярно проводить анализ юзабилити сайта и улучшать взаимодействие во всех точках касания с клиентом.
Как провести анализ и улучшить юзабилити сайта
Анализ юзабилити — это тестирование и поиск моментов, которые мешают пользователю комфортно взаимодействовать с ресурсом. Вы анализируете пользовательский опыт (user experience, UX), который человек получает на вашем сайте — и стремитесь сделать его более комфортным.
Какие же элементы сайта важно анализировать и как их улучшить? Давайте разбираться.
Навигация
Структура сайта должна быть максимально простой и предсказуемой. Попадая на сайт, пользователь должен сразу интуитивно понять, куда нужно нажать и что он прочтет на странице, на которую перешел. Грамотно проработанная структура поможет пользователю не «ходить» из раздела в раздел, а быстро узнать все нужное и оформить заказ. 
Пример простой и интуитивно понятной структуры сайта — разработка для наших клиентов GoIT
Если у вашего сайта сложная структура (например, крупный информационный ресурс или интернет-магазин), обязательно используйте «хлебные крошки». Они показывают, как соотносятся между собой страницы сайта и помогают быстро вернуться в любой раздел. 
Хлебные крошки в магазине Цитрус
И если ценовая политика это отдельная тема, то путь оформления заказа — как раз вопрос юзабилити. Только вспомните, как бесит обязательная регистрация, подтверждение через е-мейл, четыре шага «Да, я точно хочу оформить заказ». так и хочется бросить корзину!
Путь от добавления товара в корзину до страницы «Спасибо за заказ» должен быть максимально простым и коротким. В то же время, не стоит утрировать процесс заказа до максимума. Согласно исследованию Джошуа Портера, желание пользователя отказаться от результатов не увеличивается с ростом числа кликов. 
Результаты исследования Джошуа Портера
Фокусируйтесь не на минимальном количестве кликов, а на том, чтобы сделать путь клиента проще. Например, заказывая еду, удобнее полностью оформить заказ онлайн и не общаться с продавцом по телефону. Поэтому Domino’s Pizza автоматически ставит галочку в поле «Не перезванивать для подтверждения заказа». Это освобождает клиента от бесполезного разговора, где он произносит только «Да, правильно» и экономит ресурсы пиццерии.
Согласно Web site design survey, 83% посетителей покидают сайт, если почувствуют, что им приходится слишком долго искать товар. Например, в этом случае клиенту придется отыскивать часы в нужном диапазоне стоимости. 
Неудачная реализация фильтров в магазине часов и ювелирных украшений
А здесь посетитель вынужден вручную считать, на каком ряду он приобретает билет. Снова трата нервов и времени. 
При покупке билетов не видно, какой ряд вы выбираете
Обязательно следите за тем, насколько легко и быстро покупатель может найти желаемый продукт и оформить заказ.
Упрощая поиск товара, вы помогаете пользователю быстрее оформить заказ и тем самым повышаете конверсию. Например, компания Waterfilters.net, добавив опцию поиска по сайту, увеличила конверсию на 11%.
Бытует мнение, что поисковой механизм нужен только крупным ресурсам и интернет-магазинам с тысячами товаров. Однако, поиск может быть полезен и для небольших сайтов: например, если вы ведете блог, читатель может искать материалы на интересную для него тему.
Выделенное поле поиска: строку поиска хорошо видно на странице, ее не нужно выискивать взглядом.
Информация
Многие говорят о том, что люди устали читать лонгриды. Но, согласно отчету аналитической компании Clicktale, длина страницы не влияет на вероятность того, что пользователь прокрутит страницу вниз. 
Сколько же текста готов прочесть потенциальный клиент? Это зависит только от качества вашего контента. Мало кто согласен выискивать суть в «простыне» текста, но гораздо больше людей прочтут грамотную и хорошо структурированную статью.
Проведите аудит всех текстов на вашем сайте — уберите устаревшую и неточную информацию, отследите орфографические ошибки и дайте посетителю все, что ему нужно знать для заказа.
Ваш потенциальный покупатель хочет узнать о товаре\услуге как можно больше: как выглядит, какие у него характеристики, сколько стоит, где используется и чем полезен в решении его проблемы. Помогайте ему в этом.
К чему стоит стремиться: максимальное количество фото, видео, отзывов и информации. Кстати, Розетка дает 100 грн. на бонусный счет за распаковку товара, чтобы будущие покупатели получали как можно больше информации о продукте. 
Некоторые онлайн-магазины выдают информацию о себе так скупо, что самый наивный покупатель поневоле заподозрит неладное. Их «Контакты» — это е-мейл, под которым расположена форма обратной связи. Где находится офис, как туда позвонить — непонятно.
Покажите, что вы готовы к живому общению с клиентами. На каждой странице в заметном месте размещайте телефон, иконки мессенджеров, адрес или другую важную информацию для связи. По возможности добавьте кнопку обратного звонка.
Интерфейс
Распространенная ошибка — уделять много внимания красоте и дизайну сайта, забывая при этом об удобстве пользователей. Так получаются очень красивые, но слишком запутанные сайты, на которых сложно оформить заказ. Словно женские туфли на высоком каблуке, которые годами пылятся в шкафу, такие сайты становятся тупиковой ветвью развития веб-дизайна.
Обратная сторона медали — полное невнимание к дизайну, интерфейс из 90-тых. Если человек попадет на такой сайт, он может подумать, что компания уже давно не работает, и поэтому не обновляла дизайн. 
Дизайн сайта, давно утративший актуальность
Чтобы ваш сайт был приятен глазу пользователя, его интерфейс нужно регулярно обновлять в соответствии с современными тенденциями.
Поисковые алгоритмы не жалуют сайты с низкой скоростью загрузки — и все же такие еще бывают. Согласно Якобу Нильсену, человек согласен ждать загрузки страницы всего 3 секунды. Если каждая ваша страница загружается гораздо дольше, посетителям быстро надоест ждать — быстрее уйти к конкурентам, где страницы грузятся по щелчку пальцев.
Согласно StarCounter, два года назад произошел поворотный момент — количество мобильного трафика впервые превысило десктопный. При этом Cisco прогнозирует, что к 2021 году мобильный трафик превысит показатели 2016 года в семь раз.
Еще одна приятная новость: мобильная аудитория готова совершать покупки максимально быстро. Например, один из самых популярных утренних запросов — «отправка в тот же день».
Сегодня в мобайл-версии ушли все: существуют даже русский Tinkoff-банк и украинский Monobank, которые работают исключительно в приложениях. Поэтому важность адаптивной версии сайта и (если в этом есть надобность) разработки приложения сложно переоценить. Проверьте, логично ли отображается ваш сайт на мобильных устройствах и планшетах и удобно ли им пользоваться даже с маленького экрана.
Самая худшая 404 — та, которая ведет человека в никуда. Страница, которой нет на сайте, должна быть настроена таким образом, чтобы посетитель мог вернуться на главную или сделать другой выбор. Это поможет удержать пользователя на сайте, даже если он ошибся с URL. 
Информативная 404 страница Facebook
Инструменты для анализа юзабилити
Кроме мануального анализа, для аудита юзабилити можно использовать специальные сервисы. Самые популярные среди них — Google Analytics, Яндекс.Метрика, Liveinternet. Все эти инструменты схожи по функционалу: вы можете посмотреть, сколько пользователь находился на сайте и на какие страницы переходил, какой процент пользователей захотел вернуться и т.д.
Также существуют сервисы, способные заранее оценить, насколько привлекателен для пользователя сайт. Для сравнения вкратце рассмотрим Google Аналитику и два сервиса из второй категории.
Google Analytics
Usability Hub
Вашим сервисам дают оценки реальные люди, которые дают комментарии и делают скриншоты. Вы получаете детальные отчеты со статистикой и тепловыми картами.
Feng-GUI
В отличии от предыдущего сервиса, здесь ваш сайт тестируют не реальные люди, а программный алгоритм. Он автоматически и бесплатно генерирует карту внимания посетителей на вашем сайте. Для этого достаточно просто ввести URL и нажать клавишу Analyse. 
Чек-лист юзабилити сайта
И напоследок. Генри Форд сказал:
«Если бы я спросил людей, чего они хотят, они попросили бы более быструю лошадь».
Но Форд вышел за рамки привычного и все мы знаем, к чему это привело. Даже если вам кажется, что ваш сайт прекрасен (как лучшая беговая лошадь), всегда стремитесь к тому, чтобы создать автомобиль.