Назад к блогу

Психофизиологические аспекты создания сайтов

29.12.2015
3660

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

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

Закон сохранения энергии в основе построения интерфейса

Около 25-30% энергии организм расходует на содержание нервной системы. Чем меньше времени мозг работает в интенсивном режиме, тем экономичней его содержание. (Наука и жизнь, Энергетический подход к эволюции мозга)

В целях уменьшения времени интенсивной работы, организм идёт по пути меньшего сопротивления или вовсе избегает решение проблемы.

20-01-2016_01.png

Упрощайте и структурируйте

Обнаруженная американским учёным-психологом Джорджем Миллером закономерность, названная «Кошелёк Миллера» или «Магическое число семь плюс-минус два», состоит в том, что кратковременная человеческая память не может запомнить и повторить более 7 ± 2 элементов.

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

20-01-2016_02.png

Когнитивная карта памяти

Ориентироваться в пространстве, полагаясь не на органы чувств, а на внутреннее представление о пространстве, помогает «когнитивная карта» или «внутренний GPS». Внутреннюю систему координат формируют открытые в результате исследования головного мозга grid-нейроны («координатные нейроны», «нейроны координатной сетки»).

Теория «внутреннего GPS» работает как в пространстве города, так и на поверхности экрана. Подчинение интерфейса какому-либо геометрическому закону делает взаимодействие с сайтом более эффективным, ведь в таком случае мозг пользуется знакомыми схемами.

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

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

20-01-2016_03.png

Научите любить читать — фокус на типографику

Длинные строки в описании заставляют нас водить по экрану не только взглядом, но и совершать движение головой. Как мы выяснили выше, наш организм защищается от дополнительного расходования энергии, а значит шанс, что такой текст будет прочитан, ничтожно мал. Результаты исследования Якоба Нильсена подтверждает это: всего 28% пользователей читают текст на сайте компаний, а длинные тексты и вовсе пролистывают.

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

20-01-2016_04.png

Модель восприятия контента

Замечали ли вы, как чаще всего мы изучаем новости в СМИ: сначала смотрим картинку, потом читаем заголовок, если не понятно — подзаголовок, затем первую строку абзаца, аналогичным образом оцениваем последующие и в случае интереса возвращаемся и дочитываем новость целиком. Схема передвижения взгляда — слева направо, вниз, снова слева на право, снова вниз и т.д.

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

20-01-2016_05.png

На языке графики

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

Использование пиктограмм (иконок) в тексте помогает воспринимать и фильтровать информацию. Многие из них идентифицируются в доли секунды подобно автомобильным знакам на дорогах. Для новых пиктограмм используйте пояснения.

Выделяйте важное среди прочего

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

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

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

20-01-2016_06.png

Call-to-action

Вам удалось захватить внимание пользователя? Подведите его к совершению целевого действия с помощью call-to-action — элементов призыва к действию. Их эффективность зависит от формы, содержания, цвета. Человек чётко должен понимать, куда надо кликнуть и с какой целью.

Интерактив

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

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

20-01-2016_07.png


Понравилась статья? Расскажи друзьям ;)
Как правильно реализовать оформление заказа с использованием "аккордеона"
  • e-commerce
26.01.2017
Специалисты Baymard Institute определили ключевые моменты в правильной реализации оформления заказа, в котором используется такой элемент дизайна, как...
7 причин задуматься о разработке адаптивного сайта
15.12.2015

До сих пор считаете адаптивную верстку сайта лишней тратой денег? Оставлять без внимания такую огромную часть целевой аудитории – большое упущение....