Главная страница

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

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

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

Тактильный канал во взаимодействии с сайтом пока недоступен.
taktilnyy_kanal.jpg
Взаимодействие с сайтами происходит через визуальный и аудиальные каналы.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!

Подпишитесь на обновления, чтобы быть в курсе!

Оцените статью:

( 10 оценок, средняя: 4.06 из 5 )

Новые кейсы и лайфхаки еще впереди. Подпишитесь на обновления, и узнавайте все первыми. Это бесплатно!

Адрес подписки уже существует. Пожалуйста укажите другой адрес.

Указать другой

На ваш почтовый адрес отправлено письмо для подтверждения подписки.

Если вы ещё не являетесь пользователем AskUsers,
но хотите улучшить свой сайт, то просто зарегистрируйтесь.

Хочу попробовать
Блог
Для заказчиков
Для асессоров
Каталог разработчиков
О сервисе
Партнерская программа
Пресса
Контакты
Сделано с  StudioF1  в Студии F1

AskUsers.ru © Copyright 2015 г.

Регистрация
Буду проводить исследования
Буду тестировать сайты
Необходим для подтверждения регистрации и восстановления пароля

Если у вас уже есть аккаунт, воспользуйтесь формой входа

Восcтановления пароля

Если вы забыли пароль, введите ваш E-Mail.
Контрольная строка для смены пароля, а также ваши регистрационные данные, будут высланы вам по E-Mail.



Если у вас уже есть аккаунт, воспользуйтесь формой входа

Войти в личный кабинет
Забыли свой пароль?

Если у вас ещё нет аккаунта, зарегистрируйтесь прямо сейчас