46 принципов улучшения юзабилити сайта

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

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

Зачем соблюдать принципы юзабилити сайтов?

Продажи

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

Трафик сайта

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

Как провести usability аудит?

Для проверки юзабилити сайта последовательно идите от совета к совету и проверяйте свой сайт на предмет его реализации. Если у Вас нет формы поиска (совет №1) — добавьте, если есть, переходите к следующему.

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

Форма поиска

На всех сайтах, где присутствовала форма поиска, она была использована в ходе проведения теста юзабилити. При это только в 33% случаев пользователи получали релевантные результаты (для примера в глобальных поисковых системах этот процент составляет – 56). Тем не менее, если на сайте более 100 страниц, то обязательно рекомендуется использование функции поиска.

1. Размещать поиск рекомендуется в верхнем правом углу на всех страницах сайта в одном месте.
2. С помощью ссылки можно перейти на конкретную страницу, а с помощью кнопки активизируется выполнение определенной команды.
3. Поле поиска должно быть длинной в 27 символов, чтобы удовлетворить 90% пользователей.
4. Расширенного поиска (с параметрами) по возможности лучше избегать. На странице результатов поиска поле поиска должно располагаться над результатами и должно содержать поисковый запрос.
5. Под результатами поиска можно поместить ссылку для активизации расширенного поиска.

Навигация и структура информации

1. Когда пользователи не в состоянии найти нужную информацию, они склонны предполагать, что на этом сайте вообще ее нет. Поэтому они бросают сайт и тем самым увеличивают показатель отказов. Поэтому ответ на запрос пользователя должен быть в пределах первого экрана.
2. Соответствие структуры сайта ожидания пользователей. Дизайн делается для удобства пользователей, а не для владельцев сайта. При создании структуры лендинга или многостраничного сайта с осторожностью подходите к ориентации на внутреннюю структуру компании, торговые марки или свои процессы, пользователи могут либо не знать их, либо не знать их особенностей.
3. Последовательность и непротиворечивость – фундаментальные принципы навигации. Элементы навигации не должны постоянно меняться на разных страницах.
4. Навигация: ничего лишнего. Избегайте создания красивых и необычных элементов навигации, сохраните творческий потенциал для области контента. Скрытые элементы навигации тоже приводят к затруднениям в работе пользователей.
5. Устраняем беспорядок и избегаем избыточности. Дублирующийся ссылки усложняют сайт, если же необходимо увеличить посещаемость отдельных страниц, то лучше иным образом привлечь к ним внимание.
6. Ссылки и названия категорий: не повторяйтесь. Присваивайте понятные названия активным ссылкам, делайте их короткими и вместо ссылок типа «подробнее» лучше написать, что именно подробнее. Названия моделей автомобилей многим, например ни о чем не говорят, поэтому не стоит в соответствии с ними называть категории.
7. Вертикальные раскрывающиеся меню. Чем длиннее список меню, тем сложнее им управлять.
8. Многоуровневые меню: чем меньше, тем лучше. Не более 2-х уровней.
9. Активные элементы. Любая дверь, к которой прилагаются таблички «на себя» или «от себя», является неудачно спроектированной дверью. Также не стоит оформлять элементы, по которым нельзя щелкать в виде подчеркнутого текста, синего текста, элементов похожих на кнопки.
10. Обеспечение простого и очевидного доступа к главным/важным страницам. Вынесите их в меню или используйте хлебные крошки.

Оформление текста

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

1. Рекомендуемые размеры шрифтов: для общей аудитории и молодежи – 10-12, для пожилых и детей – 12-14.
2. Использовать относительные величины em для размера шрифта, чтобы его можно было масштабировать.
3. Поскольку в шрифтах с засечками присутствуют мелкие детали, они лучше подходят для высококачественной полиграфии, т.е. печати книг и журналов. При сомнениях используйте шрифт Verdana.
4. На сайте следует использовать ограниченное количество шрифтов и их цветов. При использовании букв разных регистров текст читается легче.
5. Наиболее приемлемым и удобным для чтения остается черный текст на белом фоне. Черный фон создает эффект размытости краев букв. Темный фон или фон смежного с текстом цвета снижает контрастность. Яркие цвета фона создают эффект дрожания текста на экране.
6. 8% мужского населения и 0,5% женщин страдают дальтонизмом в разной степени.
7. Пользователи негативно относятся к изменяющемуся и мигающему тексту, на бегущие строки не обращают внимания, ее невозможно контролировать и она ассоциируется с рекламой.

Как писать тексты для сайта

Ранее мы публиковали подробную статью про написание текстов на заказ. Здесь выделим основные принципы юзабилити для текстов.

1. При первом взгляде на страницу должно быть ясно, чем занимается компания или о чем пойдет речь в информационной статье.
2. Наиболее важная фраза на странице должна присутствовать в первых двух строках текста, выводы должны быть в начале.
3. Заголовки, ссылки, выделенный жирным текст должны нести самодостаточный смысл, не привязанный к контексту страницы. У пользователей нет времени на изучение этого контекста.
4. Сокращения, аббревиатуры, сленг, юмор, клише, фразеологизмы, специализированная терминология – зло.
5. Списки используйте при наличии минимум четырех элементов. Выделяйте важные слова в списках. Используйте однотипное строение фраз.
6. Короткие абзацы, никаких сплошных блоков текста. 5 предложений в абзаце.

Информация о товаре

1. Чтобы продать продукт в Сети, необходимо предоставить всестороннюю информацию о нем, которая позволит покупателю сделать уверенный выбор.
2. Фотография, описание, цена – мегаважны. Используйте ПО для качественной обработки фотографий. Цена должна быть в списке товаров и на странице товара.
3. Ориентировочные цены лучше, чем их отсутствие. Указывайте и рекомендуемые цены от производителя.
4. Скрытые платежи следует показывать как можно быстрее.
5. Детальная информация о товаре, фотографии, вопросы и ответы, обзоры пользователей и экспертов, возможные неполадки и их устранение, аксессуары и запасные части, информация о производителе, купоны на скидки. Чем подробнее Вы расскажете о товаре, тем лучше.
6. Меньше значит больше. Пользователи не любят слишком широкий выбор.

Прочие элементы веб-страницы

1. Не допускать эффекта законченности страницы, если у нее есть продолжение.
2. Размещать более важную информацию на первом экране страницы.
3. Пользователь не будет возражать против переходов с одной страницы на другую до тех пор, пока подобные переходы приближают его к заветной цели.
4. Группировка схожих элементов. Четкая организация элементов. Связанные между собой элементы должны находиться рядом друг с другом.
5. Наличие достаточного количества пустого пространства вокруг важных блоков информации привлекает внимание посетителей сайта, не вызывая напряжения и усталости зрения.

Баланс технологий и опыта использования сайта

1. Применение мультимедийных элементов на сайте может заставить заскучать кого угодно, если пользователю приходится просто созерцать, а не принимать участие в интерактивном взаимодействии. Особенно это касается подростков, они любят действовать на сайтах, а не созерцать и долго думать.
2. Простота и точность индикаторов загрузки.
3. Калькуляторы на сайте. Это отличный инструмент, чтобы облегчить жить пользователя, но он не должен быть слишком сложным.
4. Пользователи не любят устанавливать программы, их обновлять, не понимают терминов HTML, Кбит/с, 480p и так далее.
5. Зачем создавать новые элементы, если пользователи предпочитают традиционные? Они не любят прикладывать больших усилий, чем те, которые требовались от них ранее.
6. Пользователи часто не замечают нужных элементов интерфейса, выполненных в нестандартной манере.
7. Двигающиеся и попискивающие элементы лучше оставить для маленьких детей. Посетителей могут порадовать некоторые интересные эффекты, но это свойственно только новым элементам. Как только они наскучат пользователям, последние сразу же утратят к ним какой-либо интерес и захотят, чтобы они им больше не надоедали.
8. Прибегать к мультимедийным технологиям следует только в том случае, если они упрощают использование Web-сайта.

Заключение

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

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