Принципы и правила юзабилити сайта для мастеров веб-дизайна

Принципы и правила юзабилити сайта для мастеров веб-дизайна

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

Принципы и правила юзабилити сайта для мастеров веб-дизайна

Принципы юзабилити интерфейсов

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

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

Принцип 1. Навигация. Горизонтальное и вертикальное меню.

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

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

Принцип 2. Отсутствие ошибок.

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

Принципы и правила юзабилити сайта для мастеров веб-дизайна

Принцип 3. Правильное оформление шапки сайта.

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

Принцип 4. Свободное пространство.

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

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

Принцип 5. Качественный текст.

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

наличие заголовков и подзаголовков;

выделение ключевых слов и важной информации (жирным шрифтом, сносками, маркерами и т. д.);

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

использование нумерованных и маркированных списков;

разбивка текста на абзацы, состоящие из 3-4 предложений.

Принципы и правила юзабилити сайта для мастеров веб-дизайна

Принцип 6. Поиск по сайту.

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

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

Принцип 7. Скорость загрузки.

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

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

Для проверки и анализа скорости веб-ресурса существует множество инструментов: Google PageSpeed Insights, Pingdom Tools, WhichLoadFaster Web Page Performance Test, GTmetrix, Load Impact, Monitis Tools, PR-CY и т. д.

Действует ли правило трех кликов?

Одно из самых известных правил юзабилити сайта звучит так: пользователь должен найти всю необходимую ему информацию за три клика мышью. Простая и понятная навигация — это, конечно, хорошо. Но если ваш веб-ресурс имеет сложную структуру с множеством категорий и подкатегорий, то забудьте вы об этом правиле «трех кликов»; лучше переключите свое внимание на обеспечение интуитивности и логичной упорядоченности системы.

Принципы и правила юзабилити сайта для мастеров веб-дизайна

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

Помните про F- и Z-паттерны

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

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

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree