«7 плюс-минус 2» — важное правило графического дизайна

Восприятие информации

Тактильный канал во взаимодействии с сайтом пока недоступен. 

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

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

Влияние типа информации на восприятие

На рисунке изображено, какие объекты пользователь сайта заметит сначала, а какие потом.

В порядке воспринимаемости информации правильно расположить разные типы информации так:

Сначала пользователь решает задачи первого уровня — это восприятие количества объектов.

На сайте «Эльдорадо» мы видим, что количество объектов укладывается в наше «волшебное правило» 7±2.

После этого мы предлагаем пользователю решить задачу второго уровня — воспринимать цвета. На этом сайте красно-сиреневый цвет прекрасно справляется с этой задачей. Именно на данном цвете концентрируется вторая порция внимания пользователя.

После решения задачи второго уровня приводим пользователя к решению задачи третьего уровня — воспринимать буквы. И на этом шаге мы читаем надпись о «Новогодней рассрочке».

На этом примере мы наглядно разобрали с вами порядок восприятия «типа информации» пользователями сайта.

Волшебное правило графического дизайна «7±2»

По исследованиям, проведенным Джорджом Миллером, человек может воспринимать число объектов 7 плюс-минус 2.

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

Разберем удачные и неудачные примеры компоновки графических дизайнов сайта.

Удачные примеры веб-дизайна сайта

На сайте «Нетология» число пунктов меню 5. Эта информация читабельна и вполне воспринимаема пользователями.

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

Неудачные примеры веб-дизайна сайта

Неудачным примером компоновки сайта является сайт компании «Техпорт» на рисунке выше. Здесь 10 объектов (ссылок) в служебной навигации. Это перегружает пользователя и не дает воспринимать ему содержимое этих объектов. Вот еще один пример.

Это также неудачная компоновка первого экрана сайта. Верхняя строчка содержит 10 объектов, что сложно воспринимается потребителем.

Выстраивайте интерфейсы правильно! Руководствуясь правилом группировки объектов по 5, 7, и 9 шт., мы упрощаем задачу пользователя по первичной обработке мозгом представленной информации. Помните о правиле 7 ± 2, делайте удобные группировки объектов/элементов и ваши сайты будут удобными!

«Юзабельных» Вам сайтов!

По данной теме рекомендуем почитать статью о правилах по оформлении первого экрана сайта у нас на блоге AskUsers.

Рекомендую также послушать свежий вебинар по созданию удобного интерфейса сайта на нашем канале в YouTube.

До встречи на блоге AskUsers!