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

4 мин.
26619
Команда AskUsers
Команда AskUsers
14 января 2016 • 4 мин.
Содержание

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

Заказать юзабилити-аудит сайта CTA-баннер.png

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

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

user.jpg

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

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

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

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

vospriimchivost.jpg

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

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

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

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

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

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

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

sem_plus_dva.jpg

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

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

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

netolegija.png

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

texnosila.png

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

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

techport.jpg

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

bosch.png

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

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

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

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

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

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

Понравилась статья? Жмите лайк или подписывайтесь на рассылку.

А также поделитесь статьей с друзьями в соцсетях.

Команда AskUsers
Команда AskUsers
Популярные статьи