Pull to refresh

10 полезных выводов и принципов юзабилити

Web design
Translation
Original author: Dmitry Fadeyev
Каждый согласится, что юзабилити является важным аспектом веб-дизайна. Несмотря на то, работаете ли вы над дизайном сайта портфолио, над он-лайн магазином или веб-приложением, важно сделать страницы удобными и простыми для пользователей. В протяжении последних лет было сделано много исследований о разных аспектах веб-дизайна и дизайна интерфейсов. Результаты этих исследований весьма значимы и помогают нам улучшить качество наших работ. Данная статья содержит 10 полезных выводов и принципов юзабилити, которые помогут вам улучшить впечатления пользователей от ваших сайтов.


Ярлыки полей форм лучше ставить над полями формы


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


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

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

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

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


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


Тепловая карта отслеживания взора при просмотре изображения с ребенком, который смотрит прямо на нас. Исследование сделано Usable World.


А сейчас ребенок смотрит на контент. Обратите внимание на увеличение количества взоров людей на заголовок и текст.

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

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


Были проведены различные исследования для выяснения факторов влияющих на доверие людей к веб-сайту.




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

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

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

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


Исследование Джакоба Нильсена (Jakob Nielsen) о том, сколько пользователей прокручивают страницу (Определение приоритетов в юзабилити сайтов), выявило, что только 23% пользователей прокручивают страницу при своем первом посещении сайта. Это значит, что 77% пользователей не будут прокручивать страницу, они просто просмотрят контент до надобности прокрутки. Более того, процент пользователей, которые будут прокручивать уменьшится при последующих визитах сайта до 16%. Эти данные свидетельствуют о том, насколько важно показать важную информацию в видном месте, особенно на целевых страницах.

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


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

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

Так предоставьте в этой части сайта основные данные:
  1. Имя сайта,
  2. Предложение значимости (тоесть, какие выгоды они получат от его использования),
  3. Навигация по основным частям сайта, которые важны для пользователя.

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

Лучший цвет для ссылок это синий


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


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

Какой цвет должны иметь ссылки? Первое соображение это контраст: ссылки должны быть достаточно темными (или светлыми) чтобы контрастировать с цветом фона. Следующее, они должны отличаться от остального текста на странице, так что не надо делать черные ссылки, когда сам текст на странице черный. И наконец, исследование показало (Ван Шайк (Van Schaik) и Линг (Ling)), что если вы ставите приоритет на юзабилити, то ссылки лучше делать синими. Цвет ссылок браузера по умолчанию это синий, так что люди ожидают увидеть именно этот цвет. Выбор другого цвета отнюдь не проблема, но пользователям потребуется больше времени на нахождение таких ссылок.

Идеальное поле ввода поискового запроса должно быть 27 символов в ширину


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

Исследование показало, что в среднем поля ввода поискового запроса имеют ширину в 18 символов. Судя по данным, 27% поисковых запросов были слишком длинными и не поместились в них. Расширение поля ввода поискового запроса до 27 символов в длину позволит поместить в нем 90% поисковых запросов. Помните, что вы можете ставить ширину не только в пикселях и пунктах, но также и в “em” (относительная единица длины, равная размеру текущего шрифта). Таким образом используйте эту величину для установки ширины поля ввода поискового запроса в 27 символов.


Поле ввода поискового запроса Google является достаточно широкой для длинных поисковых запросов.


Поле ввода поискового запроса Apple слишком короткое, запрос “Microsoft Office 2008.”в нем не поместился.

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

Свободное пространство улучшает понимание


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


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

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

На самом деле, согласно Чаперро (Chaperro), Шайху (Shaikh) и Бейкеру (Baker), макет веб-страницы (включая пробелы, заголовки и отступы) не может заметно повлиять на производительность, однако будет влиять на степень удовлетворенности пользователя.

Эффективное пользовательское тестирование не должно быть обширным


Исследование Якоба Нильсена (Jakob Nielsen) на тему идеального числа тестирующих юзабилити сайта показало, что всего 5 тестирующих пользователей выявят почти 85% всех проблем на вашем сайте, в то время как 15 тестирующих выявят почти все проблемы.


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

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


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


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

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

Большинство пользователей не видит рекламу


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

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


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

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

Tags:юзабилити
Hubs: Web design
Total votes 140: ↑125 and ↓15+110
Views22K