SOCIAL
PROJECT
  • главная
  • блог
  • Использование психофизиологии в графических интерфейсах
Использование психофизиологии в графических интерфейсах

Использование психофизиологии в графических интерфейсах

  • 0 комментариев
  • 170 просмотров
  • 0 репостов
  • 0 лайков
  • 0

Хороший интерфейс никогда не получится без знаний психологии. Это аксиома, подтвержденная тысячами неудобных программ и непродуманных сайтов. Но вот какие знания позволят нам делать отличные интерфейсы, максимально удобные для пользователей?

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

Мы рассмотрим физиологические аспекты поведения пользователей при взаимодействии с ними.

Начнем с того, всем нам для решения задач визуально комфортно воспринимать определенное число объектов.

По мнению ученого-психолога Джорджа Миллера, человеческая кратковременная память просто не может запомнить и повторить более 7 +/- 2 объектов. Если их больше – все, вы будете стремиться избежать решения такой задачи. Либо сведете его к более простым действиям.

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

Посмотрите, как надо. Элементов меню всего 5 на первом сайте и 7 - на втором. Правила соблюдены, все четко, понятно и лаконично.

И теперь сравните с этим вариантов - количество объектов даже сосчитать трудно. Так делать не надо.

Кстати, лучше всего мы запоминаем:

  1. Цифры
  2. Цвета
  3. Текст
  4. Геометрические формы
  5. Абстрактные формы

Именно в такой иерархии.

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

То есть, выстраивая в интерфейсах объекты согласно определенным геометрическим законам, мы упрощаем пользователям задачу. Им нет нужды активировать другие зоны мозга для распознавания объектов по цвету или форме.

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

Еще немного данных

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

При слабой группировке мы группируем объекты по косвенным признакам, при этом отмечая, что, вероятно, съехала верстка или дизайнер схалтурил.

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

Сложные объекты

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

Как это использовать?

Направьте внимание пользователя на более сложную форму, убрав менее сложные объекты на задний план. То есть ваш пользователь вначале сфокусируется на сложном объекте, а затем, если ему потребуются уточнения – переключится на «подсказки».

Эффективные способы выделить сложный объект – расфокус заднего плана, а также затемнение – с его помощью дальние объекты выглядят более туманными, придавая контраста переднему объекту.

И еще, старайтесь следовать правилу: один экран – одно основное действие. Не распыляйте внимание пользователя и не сбивайте его с толку. Вы всегда можете добавить второстепенные действия – но они должны иметь меньший визуальный вес или показываться после достижения основного действия.


Лицо человека всегда привлекает внимание

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

Маленькая хитрость – если в дизайне вы хотите сделать акцент на каком-то блоке или предложении, «поверните» вашего героя так, чтобы он смотрел на этот блок/предложение. Направление взгляда решает многое. Разместите фото девушки возле кнопки «Купить» - будет одна конверсия, взгляд девушки устремлен на кнопку – конверсия выше. Она смотрит и указывает рукой – эффективность еще выше.

Цветовые контрасты

Контраст цвета очень хорошо привлекает внимание, так как «раздражает» сетчатку.

Используйте контрастный цвет в интерфейсе, когда хотите выделить основное действие.

Но! Не играйте с обратным контрастом (когда среди контрастных элементов используется один «бледный», не контрастный). Яркие цвета – сильный раздражитель для глаз, долго смотреть на них попросту неприятно.

Контрастный размер

Контраст размера обычно используют, чтобы обратить на объект внимание или подчеркнуть его важность. Мы как бы управляем вниманием пользователя – делаем большую кнопку «Заказать» и поменьше – «хочу получить консультацию…».

Но! Не применяйте законы психофизиологии во вред пользователю. Например, предложение подписаться на рассылку во всплывающем окне. Кнопка «Подписаться» большая и яркая, а вот кнопочку «Нет, спасибо» еще надо поискать. Серая и невыделенная, она незаметна пользователю и ему приходится напрячься для ее поиска. Конечно, метод рабочий, но он направлен на коммерческую выгоду, а не на удобство пользователя. И использовать его или нет – моральный выбор дизайнера.

Немного о типографике

Также контраст размера используется в типографике для создания иерархии.

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

Поэтому не бойтесь выделять заголовки, делая их максимально контрастными.

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

Как правильно подать материал?

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

Если вы хотите 100% донести информацию до пользователей, используйте журналистский прием – самую важную информацию подавайте вначале – в заголовке и в лиде, а совсем уж детали описывайте в теле текста.

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


Вам понравилась статья? Поставьте оценку для рейтинга:

Комментарии (0)

Хотите оставить комментарий?

Получите консультацию
удобным для Вас способом!

Ответим в течении минуты!