Улучшаем юзабилити сайта

Улучшаем юзабилити сайта

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

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

 

1. Метки форм работают лучше над полем

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

Tumblr имеет простую и элегантную регистрационную форму, которая соответствует рекомендациям.
 

 

2. Пользователи фокусируются на лицах

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

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

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

 

3. Качество дизайна является показателем доверия

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

 

4. Большинство пользователей не прокручивают странницу

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

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

 

5. Синий лучший цвет для ссылки

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

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

 

6. Идеальная ширина формы поиска 27 символов

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

Окно поиска Apple слишком короткое, отрезав запрос "Microsoft Office 2008".

 

По статистике 27% запросов были слишком длинные и не помещались в нее. Расширение формы до 27 символов, будет вмещать 90% запросов.

 

7. Белое пространство улучшает понимание

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

Белое пространство также делает содержание более удобным для чтения. Исследования показали, что использование белого пространства увеличивает понимания почти на 20%. Читателям легче сосредоточиться на процессе.

 

8. Информативные страницы продукта помогут вам выделиться

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

Магазин Apple - хороший пример страницы продукта

 

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

 

9. Большинство пользователей не видят рекламы

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

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

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

 

10. Эффективное тестирование юзабилити

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