100 новых главных принципов дизайна. Как удержать внимание

Рис. 6.4. Компьютерная модель, включающая в себя взгляд периферическим зрением на новый вариант карты метро

Неожиданный совет для больших экранов

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

Но на взаимное влияние размера и визуальной детализации можно посмотреть с другой стороны. Центральное зрение захватывает лишь маленький участок большого экрана. Основную его часть рассматривает периферическое зрение. На меньшем экране фрагмент в поле центрального зрения увеличивается относительно захватываемой боковым зрением части. В наши дни размеры смартфонов увеличились. В случае большого смартфона вполне вероятна ситуация, когда экран рассматривается одновременно центральным и периферическим зрением, но даже тогда поле центрального зрения будет доходить до 75 %. Экран же относительно небольшого смартфона попадет в это поле почти целиком. Я уж не говорю о миниатюрных устройствах, таких как умные часы.

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

Выводы

• Что бы вы ни проектировали – отдельное изображение, инфографику или веб-страницу, – учитывайте не только центральное, но и периферическое зрение.

• Так как периферическое зрение видит размытую картинку, упрощайте дизайн ближе к внешним краям.

• Проект для маленького экрана (например, смартфона) можно сделать более детализированным.

• Для большого экрана (например, для настольного компьютера) дизайн можно сделать более простым и менее детализированным.

7

Влияние эмоций и направленного взгляда

Возьмем фотографию человека, смотрящего на какой-то товар, как показано на рис. 7.1.

Рис. 7.1. Человек, смотрящий на товар

Устремите ли вы свой взгляд на тот объект, который рассматривает человек на картинке? Ответ на этот вопрос будет положительным. Но есть ряд неочевидных в первый момент деталей.

Как влияет направление взгляда

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

В 2012 году Джованни Галфано провел исследование (Galfano, 2012), подтвердившее корректность этих примеров, но вместе с тем добавившее интересную деталь. Участников исследования предупреждали, что на экране слева или справа будет появляться некая форма. В этот момент требовалось как можно быстрее нажать клавишу «Пробел».

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

Во второй версии исследования роль такого персонажа играла направленная влево или вправо стрелка.

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

Разве этот эксперимент не доказывает, что мы следим за направлением чужого взгляда или стрелки? Разумеется, доказывает, но есть нюанс…

Разве взгляд и действие – это одно и то же?

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

Научные исследования данного вопроса практически отсутствуют, но специалист компании Conversion Voodoo (www.conversionvoodoo.com) Джон Коррелл провел ряд A/Б-тестирований для моделей, заставляющих людей предпринимать действия. (Аспирантам и студентам магистратуры стоит иметь в виду, что на эту тему можно написать статью для солидного научного журнала.)

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

На всех изображениях лицо модели имело счастливый вид, но на некоторых изображениях оно было более живым и восхищенным, чем на остальных.

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

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

Рис. 7.2. Базовое изображение из эксперимента Джона Коррелла

Рис. 7.3. Изображения, использованные в эксперименте

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

Выводы

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

• Хотя люди и начинают смотреть в ту же сторону, что и персонаж на фото, вероятность совершения нужных вам действий выше, если на лице персонажа отражаются бурные эмоции.

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