Как управлять вниманием пользователя

9080f1f045260438c5cab6f3b4977690.jpg

Привет, Хабр! Меня зовут Света, я — руководитель направления Friflex design. Мы занимаемся разработкой мобильных приложений и веб-сервисов.

Я очень люблю интерфейсы, которые удерживают внимание пользователей, как лазерная указка — кота. В этой статье расскажу, каким законам подчиняется внимание пользователей, и как их использовать на практике.  

Что такое внимание

Внимание — это фокусировка органов восприятия на объекте, процессе или информации в определенный момент времени. Оно может быть произвольным или непроизвольным.

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

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

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

Каким законам подчиняется внимание

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

Эффект Зейгарник

Вы замечали, что незавершенные задачи легче запомнить, чем выполненные? Это не «дамоклов меч», а эффект Зейгарник.

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

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

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

aaeda21f5bbc2d2cd30dcd58ad730e82.gif

Закон Хика

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

В дизайне суть закона Хика сводится к простой формуле. Чем больше вариантов, то есть разделов, полей и кнопок, тем больше времени понадобится пользователю, чтобы принять решение.

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

4189fb395e59f66693e7431064e2a2c0.gif

Закон Фиттса

Замечали, что кнопка «В корзину» обычно большая и заметная? Это закон Фиттса в действии. Американский психолог Пол Фиттс, который его сформулировал, ни о каких кнопках, целевых действиях и пользовательском опыте не думал. Его больше занимал дизайн кабин самолетов.

Фиттс выяснил, что время, необходимое для перемещения указателя (например, ракеты или курсора мышки) к цели, зависит от ее размера, а еще от того, как далеко она находится.

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

6e2bb6e4d74b8e2a3b07b66320632623.png

Закон Якоба Нильсена

Однажды разработчики попросили «короля юзабилити» Якоба Нильсена поделиться главным правилом хорошего пользовательского опыта. А он им ответил: «Вы — не пользователи. Вы слишком умны».

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

Например, пользователи привыкли, что в карточке товара в приложении есть изображение, цена, характеристики, параметры и кнопка «В корзину».

007b6b297699cd5de33ce7fa610d4623.png

Эффект фон Ресторфф

В тридцатых годах психолог Хедвиг фон Ресторфф исследовала, как структура материала влияет на его запоминаемость. Она проводила эксперименты: показывала людям карточки со списками, где все объекты были похожими, а один отличался. Например, в списке могло быть девять слогов и одна цифра.

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

Представьте, что ваша задача — обратить внимание пользователя на товары со скидкой. Можно сделать это, как на сайте «Детского мира». У каждого товара — большой бейдж «Промо», дополнительный бейдж «Кибердни», цена выделена ярким и жирным начертанием. Внимание пользователя распыляется на все объекты, потому что ни один из них не выделяется.

cf28eec99d29b13c930f08b43afe4672.png

А можно, как Lamoda, учитывать эффект фон Ресторфф. На сайте платформы только у двух товаров есть красный бейдж со скидкой и выделена цена. Такой товар в каталоге пользователи, скорее всего, запомнят лучше тех, что расположены рядом.

9a14ff0f1cad78a835b8c70a4cd48ebb.png

Эффекты фон Ресторфф и Зейгарник, законы Хика, Фиттса, Якоба Нильсена — только часть правил, которые позволяют выделить важные элементы, облегчить восприятие информации и повысить уверенность пользователя. 

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

В следующей статье расскажу, как работает эстетика, недосказанность и диаграмма Гутенберга. А пока почитайте, как выбрать способ визуализации данных или как дизайнеру работать с нейросетью Midjourney.

.

© Habrahabr.ru