10 Советов по улучшению юзабилити сайта

Posted on by riasevastopol

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

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

1. Забудьте «правило трех кликов»

В собственной книге Taking Your Talent to the Web (2001) Джеффри Зельдман (Jeffrey Zeldman), узнаваемая личность в мире веб-дизайна, выдвинул идею о том, что «правило трех кликов оказывает помощь создавать веб-сайты, владеющие интуитивной и логичной иерархической структурой». Другими словами, в случае если для того, чтобы получить доступ к искомому куску контента, пользователю нужно совершить больше трех кликов, он начинает испытывать фрустрацию, по причине того, что это требует большое количество упрочнений и воспринимается как трата времени.

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

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

В соответствии с изучению, совершённому английским веб-дизайнером Джошуа Портером (Joshua Porter), пользователи, не нашедшие искомый контент по окончании трех кликов, не склонны заканчивать поиски. Более того, на протяжении изучения кое-какие испытуемые совершили до 25 кликов.

процент числа и Взаимосвязь кликов выполненных заданий в случаях успеха (светло синий) и провала (рыжее)

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

  • Примеры юзабилити интерфейса пользователя

2. Не забывайте про F-паттерн

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

Теплокарта просмотра страниц сайта Якоба Нильсена

Eyetools, совместно с двумя маркетинговыми компаниями, Did-It и Enquiro, совершила похожее изучение. В нем участвовали 50 испытуемых, каждого из которых просили ознакомиться с результатами поиска Гугл. В итоге взор всех 50 испытуемых чаще концентрировался на верхнем левом углу, и тепловая карта имела F-образную форму.

Теплокарта просмотра страницы результатов Гугл

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

Это определенно делает текст более читабельным при стремительном просмотре.

  • 7 уроков из практики семь дней

3. Скорость загрузки имеет значение

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

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

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

Связь между задержкой в загрузке страницы в мс и трансформацией следующих показателей (слева направо): 1) число неповторимых запросов на 1 пользователя (%); 2) число модификаций запросов (%); 3) прибыль на 1 пользователя (%); 4) неспециализированное число кликов (%); 5) удовлетворенность пользователей (%); 6) время на совершение клика (мс).

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

К счастью, существует множество инструментов, помогающих повысить работы страниц и скорость загрузки, к примеру, такие как Page Speed от Гугл либо YSlow от Яху.

  • Как устранить негативный эффект продолжительной загрузки при помощи прогресс-индикаторов?

4. Сделайте текст более читабельным

Узнаваемый юзабилити-эксперт Якоб Нильсен совершил изучение, в котором он изучал изюминке восприятия текста визитёрами собственного сайта, и оказалось, что люди редко просматривают онлайн-контент, находящийся у них перед глазами. Визитёры среднестатистической веб-страницы (ок. 593 слов) просматривают 20—28% текста.

При предстоящем повышении количества текста данный показатель неспешно значительно уменьшается впредь до 10%.

Связь между числом слов на странице и большой долей этого числа (в %), которую способен прочесть пользователь (при скорости чтения 250 слов в 60 секунд)

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

  • Размер имеет значение, либо Протяженность текста на посадочной странице

5. Не зацикливайтесь на «линии сгиба»

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

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

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

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

Кроме того напротив: движимые любопытством, пользователи, которым выше «линии сгиба» было представлено не хватает информации, еще больше склонны скролить вниз. Эксперт компании CX Partners Джо Лич (Joe Leech) кроме этого совершил изучение на эту тему.

Тепловые карты двух страниц. То, что часть информации представлена ниже «линии сгиба» (слева), побуждает пользователей скролить вниз и более детально изучать материалы

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

  • Как вынудить пользователей прокрутить лендинг пейдж до конца?

6. Ответственный контент — в левую часть страницы

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

Итог: 69% испытуемых продолжительнее задерживали собственный взор на левой части страницы, чем на правой.

Часть времени, уделяемая просмотру каждой территории страницы в зависимости от удаленности данной территории (в пикселях) от левого края экрана

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

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

  • 4 совета по оптимизации конверсии целевых страниц посредством тепловых карт

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

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

Применять шрифт serif либо sans-serif? Средний кегль либо большой? А что по поводу расстояния между буквами и строками?

И как шрифт обязан контрастировать с фоном?

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

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

Влияние наличия полей: 1) на скорость чтения; 2) на степень усвоения текста. (Слева — с полями; справа — без полей).

  • О важности пробелов

8. Дело в мелочах

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

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

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

И это ошибочный подход.

Одна малый на вид мелочь может выяснить отличие между успешным и совсем провальным ресурсом. Дизайнер пользовательских интерфейсов Джаре Спул (Jared Spool) приводит как пример этому один из случаев из собственной практики, в то время, когда удаление одной-единственной кнопки, которая озадачивала многих пользователей в ходе оформления заказа, в первоначальный же месяц стало причиной увеличению продаж на 45%. В следствии лишь за первый год прирост выручки составил $300 000 000.

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

Списания средств с вашей карты не случилось. Прошу вас, перейдите в корзину и постарайтесь опять». (We re sorry, we ve had a problem processing your order. Your card hasn t been charged yet.

Please click checkout to try again.) Культурно, кратко и одновременно с этим информативно.

В следствии ежемесячное число оформленных заказов возросло на 0,5%, что выразилось в дополнительных 25 000 000 фунтов выручки в год.

Информативное сообщение вместо стандартного «неточности 404»

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

  • 7 уроков оптимизации юзабилити сайтов на базе 200 000 тестов

9. Поиск не должен являться компенсацией неудобного меню

Заходя на ресурс, любой ожидает заметить эргономичное меню навигации, кроме того в тех случаях, в то время, когда сайт владеет хорошим функционалом поиска. Так, навигация легко обязана быть прекрасно структурированной и эргономичной в применении. Американский дизайнер Джерри Мак-Гаверн (Gerry McGovern) совершил изучение, по итогам которого 70% испытуемых для нахождения нужного контента предпочли кликать на ссылки, вместо того дабы применять поиск.

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

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

  • Как оптимизировать навигацию вебмагазинов, либо 7 раз отмерь

10. Домашняя страница теряет значимость

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

Еще одно изучение, совершённое Джерри Мак-Гаверном, продемонстрировало тенденцию понижения числа просмотров домашних страниц: в 2003 г. число просмотров основной страницы одного большого интернет-ресурса составляло 39% от общего числа просмотров, а в 2010 г. данный показатель снизился до 2%. По итогам подобного изучения процент просмотров основной страницы другого сайта во время с 2008 по 2010 гг. уменьшился с 10% до 5% соответственно.

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

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

По данным: infiniteconversions.com, image source Peter Alfred Hess

Случайные статьи:

Анализ юзабилити сайта.🌟Анализ сайта рекламного агентства💰 Советы для увеличения конверсии сайта


Подборка похожих статей:

riasevastopol

More Posts