100 главных принципов дизайна

Сьюзан Уэйншенк

100 главных принципов дизайна

Authorized translation from the English language edition, entitled 100 THINGS EVERY DESIGNER NEEDS TO KNOW ABOUT PEOPLE, 2nd Edition by SUSAN WEINSCHENK, published by Pearson Education, Inc, publishing as New Riders.

© 2020 Pearson Education, Inc.

© 2020 by Susan Weinschenk

© Перевод на русский язык ООО Издательство «Питер», 2021

© Издание на русском языке, оформление ООО Издательство «Питер», 2021

© Серия «Современный дизайн», 2021

Психология дизайна

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

Я выбрала свои любимые теории, концепции и исследования и объединила их с опытом, накопленным за многие годы разработки технологических интерфейсов. Сейчас вы держите результат моих трудов: 100 концепций, которые, как я считаю, вам нужно знать о людях. Примечание ко второму изданию: когда я писала книгу, то, конечно, надеялась, что она будет популярной у широкого круга читателей. Но я не знала, как отреагируют на нее читатели. Положительная реакция на книгу стала для меня сюрпризом. Первое издание было переведено на несколько языков и использовалось во многих университетах в качестве учебного пособия, а люди показывали мне свои потрепанные экземпляры с пометками, стикерами и раскрашенным маркерами текстом. С тех пор как вышло первое издание, прошло несколько лет, и большая часть материала выдержала испытание временем. Однако появились некоторые новые исследования, поэтому я решила, что пришло время второго издания. Я обновила и подкорректировала пояснения, формулировки и рисунки, чтобы книга оставалась актуальной. Большое спасибо всем моим читателям за поддержку.

Сьюзан Уэйншенк, доктор философии,Эдгар, штат Висконсин,июнь 2020

От издательства

Ваши замечания, предложения, вопросы отправляйте по адресу [e-mail] (издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.

Как человек видит

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

1. То, что мы видим, отличается от той информации, которую получает наш мозг

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

Что «говорят» вам глаза? Вы видите на заднем плане черный контур треугольника, на который сверху наложен белый перевернутый треугольник. Но это совсем не то, что присутствует на рисунке на самом деле, не так ли? В действительности там только линии и частично закрашенные круги. Ваш мозг «создает» перевернутый белый треугольник из пустого пространства, поскольку это именно то, что вы ожидаете увидеть. Иллюзия называется треугольником Канижа по имени итальянского физиолога Гаэтано Канижа (Gaetano Kanizsa), который продемонстрировал этот эффект в 1955 году. Теперь посмотрите на рис. 1.2, который создает подобную иллюзию прямоугольника.

Рис. 1.1. Вы видите треугольники, но на самом деле их нет

Рис. 1.2. Пример прямоугольника Канижа

Мозг использует стереотипы

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

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

Рис. 1.3. Цвет и формы могут влиять на то, что люди видят

Если вы хотите что-то разглядеть в темноте, не смотрите прямо на этот предмет

Глаз содержит 7 миллионов колбочек (клеток сетчатки глаза), обеспечивающих зрительное восприятие всей палитры цветов в дневное время, и 125 миллионов палочек (клеток сетчатки глаза), обеспечивающих сумеречное и ночное зрение. Колбочки находятся в области сетчатки (центральное поле зрения), а палочки равномерно распределены на сетчатке. Так что если при слабом освещении вы хотите что-то разглядеть, не смотрите прямо на этот предмет.

Оптические иллюзии – причина ошибок

Оптические иллюзии является примером того, как мозг интерпретирует то, что видят глаза. Например, на рис. 1.4 левая линия кажется длиннее, чем правая, хотя они на самом деле одинаковы. Этот эффект назван в честь Франца Мюллера-Лайера (Franz Muller-Lyer), который создал его в 1889 году, и является одним из старейших примеров оптической иллюзии.

Рис. 1.4. Эти линии на самом деле одинаковой длины

Картинка, которую мы видим, плоская, а не объемная

Световые лучи попадают в глаз через роговицу и хрусталик. Хрусталик (являющийся линзой) фокусирует изображение на сетчатке. На сетчатке получается всегда двухмерная картинка, даже если наблюдаемый объект трехмерный. Это изображение посылается в зрительную зону коры головного мозга, где и происходит распознавание образов, например: «О, я знаю, что это такое – это дверь». Именно в коре головного мозга двухмерное изображение преобразует в трехмерное.

Выводы

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

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

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

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

Почему мигание изображения так раздражает

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

Адам Ларсон и Лестер Лощки (Adam Larson, Lester Loschky, 2009) провели исследование центрального и периферического зрения; еще больше исследований Лощки проводил в 2019 году. Они показывали зрителям обыкновенные картинки, например фотографии кухни или гостиной, городские пейзажи или горы. На некоторых изображениях была скрыта часть объектов, находящихся с краю, а на других – в центре (рис. 2.1). Затем участников исследования просили рассказать, что же они видели.

Рис. 2.1. Фото с изображением центральной части в эксперименте Ларсона и Лощки

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

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

Наши предки выжили благодаря периферическому зрению

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

Дополнительные исследования подтверждают эту концепцию. Дмитрий Бэйле (Dimitri Bayle, 2009) размещал изображения опасных объектов или в центральном, или в периферическом поле зрения субъекта. Затем он измерял, сколько времени потребуется мозжечковой миндалине (той части мозга, которая отвечает за эмоциональное восприятие опасных образов), чтобы среагировать. Когда опасный объект появлялся в центральном поле, этот процесс занимал от 140 до 190 мс, когда же он появлялся в периферическом поле зрения, требовалось только 80 мс для того, чтобы миндалина отреагировала.

Выводы

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

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

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

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

3. Люди отождествляют объекты с узнаваемыми образами

Узнаваемые образы помогают быстро распознать сенсорные сигналы, поступающие каждую секунду. Ваши глаза и мозг настроены на то, чтобы создавать образы, даже если на самом деле таковые отсутствуют. На рис. 3.1 вы вначале увидите четыре пары пятен, и только потом восемь отдельных пятен. Пробел или его отсутствие интерпретируется как образ.

Рис. 3.1. Ваш мозг хочет видеть образы

Теория геонов

За прошедшие годы было создано множество различных теорий о том, каким образом мы видим и распознаем объекты. Одна из ранних теорий провозглашала, что мозг является хранилищем, в котором находятся миллионы «образцов» объектов, и когда мы видим объект, то сопоставляем его с содержащимися в памяти «образцами» до тех пор, пока не обнаруживается схожий элемент. Но недавние исследования наводят на мысль, что мы находим знакомые основные формы во всем, что видим, и используем эти основные формы, называемые геометрическими иконками (геонами), для распознавания объектов. Ирвин Бидерман (Irving Biederman) выдвинул теорию геонов в 1985 году (рис. 3.2). Предполагается, что существует 24 распознаваемые базовые формы; из них формируются блоки для построения всех объектов, которые мы видим и идентифицируем.

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

Рис. 3.2. Некоторые примеры геонов Бидермана

Выводы

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

• Если вы хотите, чтобы люди узнавали объект (например, иконку), используйте простые геометрические формы. Это облегчает распознавание базовых геонов и таким образом дает возможность быстрее и легче узнавать объект.

4. За узнавание лиц отвечает особая часть мозга

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

Хотя зрительная кора огромна и задействует значительные ресурсы мозга, существует специальный участок головного мозга за пределами зрительной коры, единственной функцией которого является узнавание лиц. Идентифицированная Нэнси Канвишер (1997) веретенообразная извилина мозга (fusiform face area, FFA) позволяет воспринимать лица «в обход» обычных интерпретирующих каналов и помогает узнавать их быстрее, чем прочие объекты. Эта извилина расположена вблизи миндалины мозжечка, являющейся эмоциональным центром мозга.

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

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

У людей с аутизмом для распознавания лиц не задействуется веретенообразная извилина

Исследования Карен Пирс (Karen Pierce, 2001) показали, что люди с аутизмом не используют веретенообразную извилину для распознавания лиц. Вместо этого у них задействуются другие, обычные участки мозга и зрительной коры, которые в нормальных случаях используются для распознавания и интерпретации объектов, а не лиц.

Мы смотрим туда же, куда глядит лицо на изображении

Исследования движений глазного яблока показывают, что если глаза на картинке смотрят не на нас, а на объект, изображенный на вебстранице (рис. 4.1), мы также переводим взгляд на этот объект.

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

Рис. 4.1. Мы смотрим туда, куда смотрит человек на картинке

Новорожденные предпочитают смотреть на лица

Исследования Катрин Мондлох и других ученых (Catherine Mondloch, 1999) показали, что новорожденные, возраст которых менее часа, обращают внимание на объекты, напоминающие лица. Похоже, что восприимчивость веретенообразной извилины к лицам является врожденной.

Именно по глазам люди решают, кто или что является живым

Кристин Лузер и Т. Ветли (Christine Looser, T. Wheatley, 2010) брали фотографии людей и видоизменяли их, последовательно доводя до лица неодушевленного манекена. Предметом исследования было то, в какой момент последовательной трансформации лица субъект решит, что картинка больше не является изображением живого человека. На рис. 4.2 показаны примеры таких картинок. Исследования показали, что опрашиваемые переставали считать субъект на картинке живым после того, как изменения достигали 75 %. Также было обнаружено, что люди, чтобы решить, является ли изображение живым человеком, в основном обращают внимание на глаза.

Рис. 4.2. Пример преобразования Лузер и Ветли от лица человека к лицу манекена

Выводы

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

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

• Если лицо на веб-странице смотрит на объявление или на продукт, посетитель также стремится взглянуть на этот продукт. Однако, посмотрев на него, он совершенно не обязательно уделит ему особое внимание. Это просто означает, что он туда посмотрит.

5. За обработку простых визуальных функций отвечает особая часть мозга

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

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

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

А может и несколько параметров сразу

Исследования Хьюбела и Визеля проводились на протяжении 60 лет. Однако недавнее исследование Гарга (2019) показывает возможность существования нейронов, которые обрабатывают два параметра одновременно: цвет и ориентацию. То есть визуальная информация обрабатывается небольшими битами, по одному или, может быть, по два параметра за раз.

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

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

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

Рис. 5.2. Если все круги разного цвета, не выделяется ни один круг

Зрительная кора более активна, когда работает воображение

Зрительная кора работает активнее в том случае, когда вы что-либо представляете, а не когда вы в действительности воспринимаете объект (Solso, 2005). Когда мы даем волю нашему воображению, возбуждение происходит на том же самом участке зрительной коры, но активность выше. Объясняется это работой, которую приходится производить зрительной коре в том случае, когда стимул непосредственно не присутствует.

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

Выводы

• Если вы хотите быстро привлечь внимание, помните, что лучше меньше, да лучше.

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

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

6. В основе просмотра изображений лежит опыт и ожидания

На что люди обращают внимание в первую очередь, разглядывая картинку на экране компьютера или на странице? А на что смотрят потом? Это зависит от того, чем они занимаются и чего ожидают. Если человек в силу воспитания и образования читает текст слева направо, он будет точно так же «сканировать» экран – слева направо. Если он читает справа налево, то наоборот.

Однако лишь немногие начинают просмотр с верхнего угла (левого или правого). Поскольку люди пребывают в абсолютной уверенности, что на страничке любого сайта есть вещи не важные и не нужные для решения непосредственной задачи (такие как логотипы, пустые места), в большинстве случаев они уделяют внимание центру экрана в поиске значимой информации, на расстоянии примерно 30 % от края и столько же сверху. На рис. 6.1 строка меню и ссылка для начала работы с сайтом Medicare подтянуты и опущены примерно на 30 % сверху и по краям, и именно здесь большинство людей начнут искать важную информацию.

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

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

У каждого человека есть представления о том, что и где он хочет видеть

У большинства людей есть внутреннее представление (ментальная модель) того, как должны располагаться элементы на компьютерном экране или на странице, и о том, что собой должны представлять веб-сайты, которыми они пользуются. Человек разглядывает экран, опираясь на эти ментальные модели. Например, если пользователь часто совершает покупки на Amazon и использует поле поиска, он, скорее всего, будет искать его в привычном месте и смотреть именно туда.