В дизайне интерфейсов внимание пользователя ценится, как нефть на Ближнем Востоке. Что выбрать, чтобы пользователь задержал свое внимание на вашем интерфейсе: сложные градиенты или рисованные элементы? Анимацию или минимализм? А может, все вместе?
Вместе с руководителем дизайн-направления в компании Friflex Светланой Моторкиной разбираемся, каким законам подчиняется внимание пользователя.
Что такое внимание
Внимание — это фокусировка органов восприятия на объекте, процессе или информации в определенный момент времени. Оно может быть произвольным или непроизвольным.
Когда мы не очень стараемся на чем-то сосредоточиться, работает непроизвольное внимание. Например, в интерфейсе наш взгляд машинально приковывается к яркому баннеру.
Когда мы сознательно фокусируемся на объекте, процессе или информации, включается произвольное внимание. Например, вы читаете книгу в библиотеке. Вокруг может быть много стимулов: шум, движение других людей, яркие обложки. Но если вы сосредоточились на тексте, ваш мозг их игнорирует.
Все хотят, чтобы интерфейс цифрового продукта не только привлекал внимание пользователя, но и удерживал его. В идеальном сценарии пользователь ведет себя в приложении по предсказуемому сценарию: легко переходит с экрана на экран, сразу находит все кнопки и не пропускает важную информацию. Но как этого добиться?
Каким законам подчиняется внимание
Хорошие новости: ученые уже много лет исследуют внимание и успели сформулировать немало теорий, законов и принципов, по которым оно работает. Они вам помогут.
Эффект Зейгарник
Вы замечали, что незавершенные задачи легче запомнить, чем выполненные? Это не «дамоклов меч», а эффект Зейгарник.
Блюма Зейгарник — советский психолог. Она обнаружила закономерность: люди запоминают прерванные действия лучше завершенных. Зейгарник связывала это с тем, что во время решения задачи возникает эмоциональное напряжение. Оно не получает разрядки, когда действие не завершается. И задача надежнее отпечатывается в памяти.
Представьте, что вы не успели закрыть задачу на работе, но очень хотели. По пути домой она нет-нет, но всплывает в памяти. Вы думаете о своем, но задачу никак не можете выкинуть из головы. Это и есть эффект Зейгарник.
В цифровых продуктах эффект Зейгарник встречается на странице оформления заказа. Чтобы мотивировать пользователя завершить действие, это действие разбивается на несколько шагов.
Закон Хика
В семидесятых британский психолог Эдмунд Хик исследовал, как время принятия решений зависит от количества вариантов выбора. Вместе со своим коллегой Рэйем Хайманом он провел несколько экспериментов, но никакого закона не сформулировал. Зато потом это сделали другие ученые и назвали закон в его честь.
В дизайне суть закона Хика сводится к простой формуле. Чем больше вариантов, то есть разделов, полей и кнопок, тем больше времени понадобится пользователю, чтобы принять решение.
Например, чтобы найти ближайший магазин, пользователю нужно выбрать город. Если города будут хаотично разбросаны по экрану, на это уйдет много времени. Делим города на группы по алфавиту — и дело идет гораздо быстрее.
Закон Фиттса
Замечали, что кнопка «В корзину» обычно большая и заметная? Это закон Фиттса в действии. Американский психолог Пол Фиттс, который его сформулировал, ни о каких кнопках, целевых действиях и пользовательском опыте не думал. Его больше занимал дизайн кабин самолетов.
Фиттс выяснил, что время, необходимое для перемещения указателя (например, ракеты или курсора мышки) к цели, зависит от ее размера, а еще от того, как далеко она находится.
Проще говоря, чем заметнее и крупнее элемент, тем проще с ним взаимодействовать: нажимать, проводить пальцем или брать в руку. Чем ближе элемент, тем быстрее это взаимодействие может случиться.
Закон Якоба Нильсена
Однажды разработчики попросили «короля юзабилити» Якоба Нильсена поделиться главным правилом хорошего пользовательского опыта. А он им ответил: «Вы — не пользователи. Вы слишком умны».
Закон Нильсена говорит, что пользователям нравится все знакомое. Другими словами, их ожидания от вашего цифрового продукта будут основаны на их опыте с другими цифровыми продуктами. Поэтому соблюдать стандартные паттерны бывает хорошей идеей.
Например, пользователи привыкли, что в карточке товара в приложении есть изображение, цена, характеристики, параметры и кнопка «В корзину».
Эффект фон Ресторфф
В тридцатых годах психолог Хедвиг фон Ресторфф исследовала, как структура материала влияет на его запоминаемость. Она проводила эксперименты: показывала людям карточки со списками, где все объекты были похожими, а один отличался. Например, в списке могло быть девять слогов и одна цифра.
Как вы могли уже догадаться, отличающиеся объекты запоминались гораздо лучше. В дизайне интерфейсов эффект фон Ресторфф, также известный как эффект изоляции, работает точно так же.
Представьте, что ваша задача — обратить внимание пользователя на товары со скидкой. Можно сделать это, как на сайте «Детского мира». У каждого товара — большой бейдж «Промо», дополнительный бейдж «Кибердни», цена выделена ярким и жирным начертанием. Внимание пользователя распыляется на все объекты, потому что ни один из них не выделяется.
А можно, как Lamoda, учитывать эффект фон Ресторфф. На сайте платформы только у двух товаров есть красный бейдж со скидкой и выделена цена. Такой товар в каталоге пользователи, скорее всего, запомнят лучше тех, что расположены рядом.
Эффекты фон Ресторфф и Зейгарник, законы Хика, Фиттса, Якоба Нильсена — только часть правил, которые позволяют выделить важные элементы, облегчить восприятие информации и повысить уверенность пользователя. В следующей статье мы расскажем, как работает эстетика, недосказанность и диаграмма Гутенберга.
А пока вы можете почитать нашу статью про моушн-дизайн в интерфейсах на VC.