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

Вы когда-нибудь задумывались, почему клиенты всегда предпочитают логотипы с изгибами, а не более смелые современные логотипы с нестандартными углами? Обращали внимание на то, что ваши любимые смартфоны, планшеты и ноутбуки обычно имеют скругленные углы? Что особенного в этих изгибах и скругленных углах?

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

Есть ли изгибы у дивана?

Моше Бар руководит лабораторией когнитивной нейробиологии в общеклинической больнице штата Массачусетс. Его группа использовала изображения конкретных и абстрактных объектов, чтобы выяснить, предпочитают ли люди изогнутые формы. В одном из первых исследований в 2006 году (Bar & Neta, 2006)[2] Бар и Мэйтал Нета показывали участникам эксперимента 140 пар объектов. Это были как изображения конкретных вещей, например часов или диванов (объекты группы A на рис. 1.1), так и абстрактные формы (объекты группы B), а также предметы, одновременно обладавшие изгибами и острыми краями (объекты группы C). Последние фигурировали в качестве точки отсчета.

Рис. 1.1. Изображения, которые использовал Моше Бар (https://faculty.biu.ac.il/~barlab/)

Объекты с изогнутыми формами получали более высокие оценки. Согласно теории Бара и Неты от изображений с острыми углами исходило ощущение угрозы.

Имеет ли значение баланс?

Пол Сильвия и Кристофер Барона (Silvia & Barona, 2009) решили проверить, насколько сбалансированность объектов влияет на выбор (рис. 1.2; рис. 1.3). Оказалось, что вне зависимости от степени баланса участники эксперимента все равно предпочитали изогнутые формы.

Рис. 1.2. Пример сбалансированного изображения

Рис. 1.3. Пример несбалансированного изображения

А как обстоит дело со сложными формами? Сильвия и Барона использовали в эксперименте сложные заостренные формы (рис. 1.4) и аналогичные формы со слегка скругленными краями (рис. 1.5).

Рис. 1.4. Сложная заостренная форма

Рис. 1.5. Сложная форма со слегка скругленными краями

И снова участники эксперимента предпочли второй вариант.

Хельмут Ледер, Пабло Тинио и Бар (Leder, Tinio & Bar, 2011) проверяли, срабатывает ли данное предпочтение в случае «положительных» (именинных пирогов и плюшевых мишек) и «отрицательных» объектов (бритвенных лезвий и пауков). Результат? Люди предпочли плавные формы в объектах, которые оставляли положительное или нейтральное впечатление, а вот для объектов, оставляющих негативное впечатление, данное предпочтение не сохранилось.

Примечание. Фирмы Nike, Apple, Pepsi, Coca-Cola и десятки других всемирно известных брендов используют в своих логотипах одну или несколько кривых, так что можно утверждать, что они хорошо изучили принципы дизайна.

Изгибы стимулируют мозг

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

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

Рис. 1.6. Сравнение изогнутых и округлых форм с более вытянутыми

Выводы

• Люди предпочитают изгибы.

• Создавая логотип, добавляйте в него изогнутые формы.

• Создавая на экране цветовое пространство, подумайте об использовании «галочки» или искривленной формы.

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

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

Покажи свою ДНК

Симметричные лица люди считают более привлекательными. Теоретически данное предпочтение связано с эволюционной целесообразностью выбора партнера с наилучшей ДНК. Рисунки 2.1 и 2.2 демонстрируют фотографии людей с различной степенью зеркальной симметрии. В первом случае мы видим относительно асимметричное лицо, а во втором – симметричное.

Рис. 2.1. Пример асимметричного лица

Рис. 2.2. Пример симметричного лица

Стивен Гангестад (Gangestad, 2010) из Университета Нью-Мексико занимался исследованиями симметрии и обнаружил, что как мужчины, так и женщины находят людей с симметричными лицами более привлекательными. Причем эта закономерность применима не только к лицам: тела также могут быть более или менее симметричными.

Чем же людей так привлекает симметрия? Гангестад утверждает, что, возможно, причина этого кроется в таком явлении, как «окислительный стресс». В период внутриутробного развития дети подвергаются воздействию свободных радикалов, которые могут вызвать повреждения ДНК. Это и называется окислительным стрессом. Чем сильнее выражен данный стресс, тем больше асимметрия лица и/или тела. С точки зрения эволюции люди бессознательно ищут партнеров без повреждений ДНК. Симметричные черты указывают на меньшую степень повреждений у конкретной особи. Дополнительные исследования показали, что в крови мужчин с более высоким рейтингом привлекательности обнаружилось меньше маркеров окислительного стресса.

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

Если же нужно использовать изображение конкретного человека, оцените степень симметрии его лица и тела. В случае симметричного лица допустимы фотографии анфас. Если же лицевая или телесная симметрия недостаточна, возьмите снимки в профиль.

Способ измерения симметрии

Для определения степени симметричности лица воспользуйтесь линейкой и описанной ниже техникой.

Обратите внимание на вертикальную линию, идущую по центру лица на рис. 2.3, и шесть пересекающих ее горизонтальных линий (помеченных как D1, D2, D3, D4, D5 и D6).

Рис. 2.3. Лицо с нарисованными осями симметрии

Измерьте расстояние от левого края линии D1 до центральной оси.

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

Произведите аналогичные измерения для линий D2, D3, D4, D5 и D6. Не имеет значения, какие отрезки окажутся больше. Все записанные числа должны быть положительными.

Сложите все полученные значения.

Теперь проделайте то же самое с рис. 2.4.

Рис. 2.4. Другое лицо с нарисованными осями симметрии

Чем больше итоговая сумма, тем выше асимметрия лица. Сумма, равная 0, соответствует идеально симметричному лицу.

Восприятие симметрии мужчинами и женщинами

Мужчины предпочитают симметрию в телах, лицах и во всех прочих объектах, включая предметы повседневного обихода, абстрактные формы, искусство и природу. Но исследования, проведенные Кэтрин Шеперд и Моше Баром (Shepherd & Bar, 2011), показали, что женщины тоже предпочитают симметричные лица и тела, в остальных случаях симметрия не играет для них столь важной роли, как для мужчин.

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

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

Почему люди предпочитают симметрию в объектах?

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

Есть ли достоинства у асимметрии?

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

Рисунок 2.5 демонстрирует пример веб-страницы с асимметричным дизайном, в то время как на рис. 2.6 мы видим более симметричный вариант компоновки.

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

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

Рис. 2.5. Асимметричный дизайн

Рис. 2.6. Относительно симметричный дизайн

Выводы

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

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

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

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

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

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

Бывают люди, у которых одна или несколько колбочек активируются с нарушением – это приводит к различным формам цветовой слепоты, или дальтонизма. Такие люди могут не различать определенные цвета, например красный и зеленый. Корректная работа колбочек только двух типов позволяет видеть примерно 100², или 10 000 цветов. Если же функционируют только колбочки одного типа, человек различает примерно 100 цветов.

Цветовое зрение определяется X-хромосомой. Мужчины обладают одной такой хромосомой, в то время как у женщин их две. Именно поэтому среди мужчин больше дальтоников, чем среди женщин.

Удивительное открытие

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

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

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

Она вновь всплыла только в 1980-х годах, когда к аналогичным выводам пришли Джон Моллон и Габриэла Джордан, изучавшие цветовое зрение у обезьян. Так как цветовая слепота у мужчин является достаточно распространенным явлением (ею страдают 9 % популяции), Моллон и Джордан установили, что примерно 12 % женщин обладают колбочками четвертого типа. Таких людей назвали «тетрахроматами». Они могут видеть до 100 в четвертой степени, то есть до 100 миллионов цветов.

Настоящие тетрахроматы – редкость

К удивлению Габриэлы Джордан, найти женщину-тетрахромата, которая смогла бы пройти отборочный тест, было крайне сложно. Оказалось, что даже тетрахроматы далеко не всегда в состоянии различать все цвета. В основном они показали результаты такие же, как и люди с тремя видами колбочек. Возможно, причина этого состоит в том, что тетрахроматы живут в мире трихроматов. Их окружают объекты, созданные людьми, видящими всего 1 миллион цветов, а не 100, а значит, у тетрахроматов попросту нет возможности научиться различать дополнительные цвета.

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

Примечание. Дополнительные сведения о Кончетте Антико можно узнать на сайте BBC http://www.bbc.com/russian/science/2014/09/140930_vert_fut_women_with_supervision.

Проба на тетрахроматию

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

Выводы

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

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

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

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

Существует ли многозадачность?

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

Но многозадачность центрального и периферического зрения – совсем другое дело. Для органов зрения многозадачность возможна.

Виды зрения

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

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

Глаз берет сразу множество визуальных проб

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

Процессом управляет периферическое зрение

Казимир Людвиг, Дж. Рис-Дэвис и Мигель Экштейн (Ludwig, Davies & Eckstein, 2014) показали, что именно периферическое зрение – то, что мы им видим, и то, как эта информация обрабатывается в мозге, – указывает центральному зрению точку следующей фокусировки. По большей части этот процесс протекает бессознательно. Люди осознают и обрабатывают информацию, которую получают от центрального зрения, но практически не обращают внимания на происходящее в поле периферийного зрения, хотя именно последнее определяет, куда переместится взгляд в следующий момент.

Два типа зрения лучше, чем один

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

Проектные решения не должны базироваться на окулографии

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

Уделяйте внимание периферическому зрению

Так как периферическое зрение определяет следующую точку фокусировки центрального, важно уделять внимание тому, что́ люди зацепят боковым зрением, разглядывая различные фрагменты страницы. Периферические области – это не пространство, которое никто никогда не увидит, и поэтому пустыми их оставлять нельзя. Сейчас приняты адаптивные варианты дизайна, допускающие просмотр на мониторах различных размеров и на различных устройствах (больших экранах, портативных компьютерах, планшетах, смартфонах). Многие дизайнеры предпочитают использовать только центральную часть экрана, оставляя сбоку ничем не заполненные поля. Таким способом проще всего получить страницу, корректно отображающуюся на разных устройствах, но при этом вы не предоставляете никакой информации периферическому зрению. Рисунок 4.1 демонстрирует сайт ресторана, на котором это зрение задействовано полностью, привлекая внимание и помогая посетителям понять, какой именно теме посвящен данный сайт.

Рис. 4.1. Сайт, на котором в полной мере задействуется периферическое зрение

Выводы

• Не стоит принимать проектные решения на основе данных, полученных путем отслеживания движения глаз.

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

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

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

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

Тест, изучающий реакцию на испуганные лица

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

Люди крайне восприимчивы к эмоциям окружающих, особенно если это такие эмоции, как удивление или страх.

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

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

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

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

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

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

Создавайте дизайн, помня о страхе и об опасности

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

Выводы

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

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

Давайте снова представим, что вы утром в воскресенье сидите перед компьютером и ищете информацию в интернете. Если в произвольный момент времени спросить, что вы видите центральным зрением, вы, скорее всего, с легкостью ответите. Например: «Я смотрю на страницу с английским текстом, читаю артикль „The“ и вижу, что прописная T представляет собой вертикальную линию с более короткой горизонтальной линией сверху».

Но сможете ли вы так же детально описать, что именно видит ваше периферическое зрение, пока центральным зрением вы читаете артикль «The»? Сформулировать ответ на этот вопрос куда сложнее. Периферическое зрение размывается к краям, и попавшие в поле видимости объекты не так отчетливо распознаются, соответственно, их уже не так просто описать.

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

Размытость периферического зрения

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

Как периферическое зрение выиграло на конкурсе проектов

В 2013 году в Бостоне был объявлен конкурс на новый вариант карты общественного транспорта. Розенхольц взяла исходный и новый варианты и прогнала их через программу для получения переходных изображений.

Рисунок 6.1 демонстрирует карту метро до переделки. Кружком обведена станция Kendall/MIT на красной линии – именно здесь находится Массачусетский технологический институт, где работает Рут.

Рис. 6.1. Карта бостонского метро, исходный вариант

Рис. 6.2. «Переходная» компьютерная модель исходной карты метро, включающая в себя область, наблюдаемую периферическим зрением

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

Конкурс на новый вариант карты выиграл московский дизайнер Михаил Квиришвили. Его карта показана на рис. 6.3. Я снова пометила кружком станцию Kendall.

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

Когда меньше значит больше

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

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

Проектирование для обоих зрительных состояний

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

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

Рис. 6.3. Победивший в конкурсе вариант карты. (Фото любезно предоставлено Михаилом Квиришвили, https://www.flickr.com/photos/10247460@N03/)

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

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

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

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

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

Выводы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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