100 главных принципов дизайна
100 главных принципов дизайна
Сьюзан Уэйншенк
Современный дизайн
Цель любого дизайна – получение отклика. Мы хотим, чтобы человек что-то купил, прочитал или сделал. Разработка дизайна без понимания причин того или иного поведения людей похоже на блуждание по незнакомому городу без карты: движение будет хаотично, запутанно и неэффективно. Эта книга является симбиозом науки и практики, который необходим каждому дизайнеру.
Если вы хотите создать интуитивно понятный и привлекательный дизайн веб-сайта, программы или продукта, то должны знать, что лежит в основе психологии поведения людей.
Призовите на помощь психологию и науку о поведении:
• Как захватить и удержать внимание?
• Какое зрение важнее – центральное или периферическое?
• Как люди принимают решения?
• Какова оптимальная длина текста?
• Чем одни шрифты лучше других?
Вы узнаете и другие секреты, которые помогут в разработке дизайна. Он станет лучше, потому что Сьюзан уже проделала за вас всю тяжелую работу.
В формате PDF A4 сохранен издательский макет.
Сьюзан Уэйншенк
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
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства 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 и использует поле поиска, он, скорее всего, будет искать его в привычном месте и смотреть именно туда.
При возникновении затруднений поле зрения сужается
Если на экране появляется сообщение об ошибке или другая непредвиденная информация мешает решить поставленную задачу, пользователь перестает обращать внимание на другие части экрана и фокусируется на проблемной области. Мы будем обсуждать это подробнее в главе «Человеку свойственно ошибаться».
Выводы
• Размещайте важную информацию (или объекты, к которым вы хотите привлечь внимание) на расстоянии примерно 30 % от верхнего и левого края (или правого, если пользователи читают справа налево).
• Старайтесь не размещать любую важную информацию на краях экрана, так как центральным зрением люди туда обычно не смотрят.
• Оставьте края для периферийного зрения; они могут включать изображения с эмоциями или все, что составило бы «суть» картины, например логотипы, брендинг и меню навигации.
• Продумайте дизайн экрана или странички таким образом, чтобы целевая аудитория могла перемещать взгляд в соответствии с привычным способом чтения. «Перескакивание» по экрану от объекта к объекту может утомить пользователя.
7. Сигналы, говорящие о том, что делать с объектом
На вашем жизненном пути наверняка встречалась дверная ручка, которая работала не так, как можно было ожидать. Казалось, что этот дизайнерский изыск надо повернуть, а на самом деле на него надо было нажать. В реальном мире объекты сообщают нам о том, как мы можем или должны взаимодействовать с ними. Например, своим размером и формой дверная ручка приглашает вас взяться за нее и повернуть. Ручка чашки говорит о том, что сквозь нее надо просунуть пальцы. Ручка портфеля предлагает обхватить ее ладонью. Если какая-то вещь подает сигнал, который оказывается неверным, вы чувствуете справедливое раздражение. Такие сигналы называются побудительными (аффорданс).
Джеймс Гибсон (James Gibson) выдвинул концепцию побудительных сигналов в 1979 году. Он описал их как побудительные причины действия в окружающем мире. В 1979 году Дон Норман (Don Norman) в своей книге «Дизайн простых вещей» («The Design of Everyday Things») несколько изменил концепцию побудительных сигналов. Он опирался на идею воспринимаемых возможностей: если вы хотите, чтобы люди как-то взаимодействовали с объектом, будь то объект в реальной жизни или на компьютерном экране, следует убедиться, что не будет проблем с восприятием, описанием и интерпретированием смысла и назначения этого объекта.
При решении некой задачи, например открывании двери или выкладывании книги на веб-сайте, автоматически, по большей части бессознательно, человек ищет подходящие инструменты и объекты, которые могут в этом помочь. Если вы разрабатываете средства для решения задачи, убедитесь, что вспомогательные объекты легко увидеть и найти и они подают ясные побудительные сигналы.
Посмотрите на ручку двери на рис. 7.1. Ее форма такова, что хочется взяться за нее и потянуть вниз. Если она работает именно таким образом, можно сказать, что дверная ручка сконструирована правильно и подает ясно воспринимаемые побудительные сигналы.
Рис. 7.1. Дверная ручка приглашает взяться за нее и потянуть вниз
Вы наверняка встречали дверную ручку, которая имеет форму, позволяющую вам взяться за нее и потянуть, но тем не менее на ней указано «НАЖМИТЕ». Когда сигнал объекта не соответствует его функции, вам приходится добавлять не всегда логичные пояснения, чтобы люди понимали, как взаимодействовать с объектом. Если объект подает сигналы, которые идут вразрез с тем, как он работает на самом деле, это называется ложным аффордансом.
Побудительные сигналы на экране компьютера
При проектировании приложения или веб-сайта подумайте о тех побудительных сигналах, которые будут посылать объекты на экране. Например, случалось ли вам задуматься над тем, что заставляет людей щелкнуть на кнопке? Тень от кнопки и является тем сигналом, который ясно говорит о том, что ее можно нажать и что нажатие и есть тот способ, который заставляет кнопку работать.
На рис. 7.2 показана кнопка на пульте дистанционного управления. Форма и тени подают сигналы, которые побуждают вас нажать на кнопку, чтобы привести в действие механизм.
Рис. 7.2. У кнопок на физических устройствах есть тень, именно поэтому вам хочется на них нажать
На экране также можно создать изображение таких теней. На рис. 7.3 тени различных цветов, расположенные по периметру, создают иллюзию нажатой кнопки. Теперь переверните книгу, поменяв местами верх и низ, и посмотрите на ту же кнопку. Теперь уже не кажется, что кнопка нажата, а тени подают сигнал о необходимости нажать ее.
Рис. 7.3. Эта кнопка выглядит нажатой, но переверните книгу и посмотрите, что получится
Эти визуальные сигналы – вещь тонкая, но очень важная. Многие кнопки подают такие сигналы, как, например, кнопка, показанная на рис. 7.4, но в последнее время дизайнеры веб-сайтов перестали придавать значение подобным мелочам. На рис. 7.5 кнопка представляет собой просто текст, расположенный в цветном прямоугольнике.
А если кто-то использует сенсорный экран или планшет вместо мыши или трекпада, то кнопка может не иметь никаких визуальных подсказок, например курсора в виде стрелки или руки с указательным пальцем.
Рис. 7.4. Использование теней делает этот прямоугольник похожим на кнопку
Рис. 7.5. Кнопки, утратившие свои сигналы
Гиперссылки утрачивают побудительные возможности
В наше время стал уже привычным следующий побудительный сигнал: синий подчеркнутый текст означает гиперссылку, и если щелкнуть на нем, то окажешься на другой странице или сайте. Однако в последнее время гиперссылки утратили свою характерную особенность, и единственным побудительным сигналом является подсветка, возникающая при наведении курсора.
На рис. 7.6 показана страница, на которой нет подсказок того, куда можно щелкнуть. (Вам нужно навести курсор, чтобы узнать, что является кликабельным.) Чтобы увидеть ссылки, вы должны перемещаться по странице с помощью курсора.
Рис. 7.6. Неизвестно, какие окна являются кликабельными
Выводы
• Если вы занимаетесь веб-дизайном, думайте о побудительных сигналах. Подавая людям сигналы о том, что они могут сделать с данным объектом, вы повышаете вероятность того, что они совершат это действие.
• Используйте тени, чтобы подчеркнуть, когда объект выбран или активен.
• Избегайте некорректных побудительных сигналов.
8. Человек может не обратить внимания на изменения в его поле зрения
Как украсть внимание
Если вы еще не видели «Горилла видео», вы немедленно должны это посмотреть. Пройдите по ссылке www.blog.theteamw.com/2009/10/25/100-things-you-shouldknow-about-people-1-inattention-blindness/. Запустите тест сейчас, иначе своими рассуждениями я испорчу эффект от этого видео.
«Горилла видео» служит примером проявления так называемой слепоты невнимания или слепоты к изменениям. Идея состоит в том, что люди часто упускают из виду большие изменения, происходящие в их поле зрения. Это утверждение было доказано в ходе ряда экспериментов, хотя вариант с мячиками и гориллой наиболее известен. (Видео с некоторыми другими экспериментами можно найти в моем блоге по вышеуказанному адресу.)
В своей книге «Невидимая горилла» Кристофер Чабрис и Дэниэл Симонс (Christopher Chabris, Daniel Simons, The Invisible Gorilla, 2010) описывают дополнительные исследования, которые проводились с применением оборудования, отслеживающим направление взгляда человека. Если говорить точнее, отслеживается центральное (оно же фовеальное) зрение. Периферическое зрение не отслеживается. Слежение за взглядом осуществлялось во время просмотра видео с мячиками и гориллой и показало, что каждый, кто смотрел видео, «видел» гориллу, то есть его взгляд фиксировал наличие гориллы, но только 50 % осознавали, что они видели гориллу. Чабрис и Симонс провели множество исследований этого явления и пришли к заключению, что если ваше внимание сосредоточено на чем-то одном и вы не ожидаете каких-либо изменений, то вы легко можете не заметить их появления.
Слежение за взглядом может вводить в заблуждение
Слежение за взглядом – технология, которая позволяет регистрировать, на что, в каком порядке и как долго смотрит субъект, включая то, смотрит ли он на экран монитора, страницу сайта или окружающую его среду. Одно из преимуществ использования данной технологии состоит в отсутствии необходимости полагаться на рассказы людей о том, на что они смотрят. Вместо этого вы можете получить объективные данные. Но данные, полученные в результате отслеживания взгляда, могут вводить в заблуждение в силу множества причин.
1. Как мы уже обсуждали в этом разделе, слежение за взглядом сообщает нам о том, на какой конкретный предмет или объект на экране смотрит пользователь, но это вовсе не означает, что он обращает на него внимание.
2. Исследования периферийного зрения, упомянутые в этой главе, свидетельствуют о том, что периферическое зрение по меньшей мере так же важно, как и центральное. Слежение за взглядом касается только центрального зрения.
3. Ранние исследования этой технологии, проведенные Альфредом Ярбусом (Alfred Yarbus, 1967), показали: то, на что люди смотрят, зависит от тех вопросов, которые им задают во время просмотра. Таким образом, легко исказить данные слежения за взглядом в зависимости от инструкций, которые вы даете до или во время эксперимента.
Выводы
• Не стоит надеяться, что люди увидят объект на вашей веб-страничке или на экране только потому, что он там есть. Особенно если вы обновляете экран и вносите одно изменение: например, на экране появляется сообщение о неправильном вводе данных в поле формы. Пользователи могут даже не заметить, что они смотрят на измененный экран.
• Если вы хотите быть уверенными, что люди заметят изменения в видимых полях, добавьте визуальные (например, мигание) или звуковые сигналы (например, гудок).
• Будьте осторожны с интерпретацией данных слежения за взглядом. Не придавайте им слишком большого значения и не берите их за основу для дизайнерских решений.
9. Считается, что объекты, расположенные рядом, связаны между собой
Если два элемента расположены рядом (например, текст и фото), предполагается, что они взаимосвязаны. Эта предполагаемая связь сильнее, если элементы расположены слева или справа.
На рис. 9.1 расстояние между столбцами аналогично расстоянию между строками, поэтому определить, к каким заголовками относятся фотографии, достаточно сложно. Поскольку логическое соединение слева направо сильнее, чем соединение сверху вниз, а также поскольку какие-либо другие визуальные подсказки отсутствуют, большинство людей предположит, что заголовок слева соответствует картинке справа. Это не тот случай, который затрудняет использование страницы.
Рис. 9.1. Вам сложно соотнести изображение с его заголовком
Выводы
• Если вы хотите, чтобы элементы воспринимались как связанные друг с другом, располагайте их слева или справа.
• Прежде чем использовать линии или прямоугольники, чтобы отделить элементы или сгруппировать их, поэкспериментируйте с количеством свободного пространства между ними. Иногда достаточно просто изменить количество пустого пространства и тем самым снизить визуальный шум на странице.
• Оставляйте больше свободного пространства между теми элементами, которые не связаны между собой, и меньше пространства между связанными элементами. Многие веб-странички и конфигурации экрана построены без учета этого принципа, хотя, на мой взгляд, это противоречит здравому смыслу.
10. Сочетание красного и синего – плохая комбинация
При размещении фигур или текста различных цветов на каком-либо фоне глубина линий может выглядеть по-разному. Один цвет может «выпирать», тогда как другой казаться «заглубленным». Такой эффект называется стереохроматизмом. Ярким примером его является размещение рядом красного и синего цветов, но им также грешат и другие сочетания, например красного и зеленого. Подобные комбинации с трудом воспринимаются при чтении и даже просто при взгляде на них. На рис. 10.1 показано несколько примеров стереохроматизма.
Рис. 10.1. Примеры стереохроматизма
Выводы
• Старайтесь не располагать рядом картинки или надписи синего и красного или зеленого и красного цветов.
• Не размещайте синий или зеленый текст на красном фоне, а также красный или зеленый текст на синем фоне.
11. Девять процентов мужчин и полпроцента женщин – дальтоники
Термин «дальтонизм» (цветовая слепота) часто понимают неправильно. Считается, что большинство дальтоников видит мир в черно-белой гамме, на самом деле речь идет всего лишь о частичной цветовой слепоте, в результате которой людям сложно видеть различия между некоторыми цветами. В большинстве случаев дальтонизм обусловлен наследственностью, хотя иногда он может возникать в результате болезни или травмы. Большинство генов, отвечающих за восприятие цвета, расположено на X-хромосоме. Так как у мужчин только одна X-хромосома, а у женщин их две, у мужчин чаще возникают проблемы с восприятием цвета.
Существует множество различных видов дальтонизма, но наиболее общим случаем является трудность в различении красного, желтого и зеленого цветов. Это так называемый «красно-зеленый» дальтонизм. Другие формы, как, например, проблемы с восприятием синего и желтого или тот случай, когда все воспринимается как серое, очень редки.
Проектируя веб-сайт или веб-страничку и используя цвета для особых обозначений, применяйте дополнительную схему кодирования, например совмещайте цвет и толщину линий, с тем чтобы дальтоники могли расшифровать этот код без цветовой кодировки.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию (https://www.litres.ru/suzan-ueynshenk/100-glavnyh-principov-dizayna/) на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.
Сьюзан Уэйншенк
Современный дизайн
Цель любого дизайна – получение отклика. Мы хотим, чтобы человек что-то купил, прочитал или сделал. Разработка дизайна без понимания причин того или иного поведения людей похоже на блуждание по незнакомому городу без карты: движение будет хаотично, запутанно и неэффективно. Эта книга является симбиозом науки и практики, который необходим каждому дизайнеру.
Если вы хотите создать интуитивно понятный и привлекательный дизайн веб-сайта, программы или продукта, то должны знать, что лежит в основе психологии поведения людей.
Призовите на помощь психологию и науку о поведении:
• Как захватить и удержать внимание?
• Какое зрение важнее – центральное или периферическое?
• Как люди принимают решения?
• Какова оптимальная длина текста?
• Чем одни шрифты лучше других?
Вы узнаете и другие секреты, которые помогут в разработке дизайна. Он станет лучше, потому что Сьюзан уже проделала за вас всю тяжелую работу.
В формате PDF A4 сохранен издательский макет.
Сьюзан Уэйншенк
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
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства 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 и использует поле поиска, он, скорее всего, будет искать его в привычном месте и смотреть именно туда.
При возникновении затруднений поле зрения сужается
Если на экране появляется сообщение об ошибке или другая непредвиденная информация мешает решить поставленную задачу, пользователь перестает обращать внимание на другие части экрана и фокусируется на проблемной области. Мы будем обсуждать это подробнее в главе «Человеку свойственно ошибаться».
Выводы
• Размещайте важную информацию (или объекты, к которым вы хотите привлечь внимание) на расстоянии примерно 30 % от верхнего и левого края (или правого, если пользователи читают справа налево).
• Старайтесь не размещать любую важную информацию на краях экрана, так как центральным зрением люди туда обычно не смотрят.
• Оставьте края для периферийного зрения; они могут включать изображения с эмоциями или все, что составило бы «суть» картины, например логотипы, брендинг и меню навигации.
• Продумайте дизайн экрана или странички таким образом, чтобы целевая аудитория могла перемещать взгляд в соответствии с привычным способом чтения. «Перескакивание» по экрану от объекта к объекту может утомить пользователя.
7. Сигналы, говорящие о том, что делать с объектом
На вашем жизненном пути наверняка встречалась дверная ручка, которая работала не так, как можно было ожидать. Казалось, что этот дизайнерский изыск надо повернуть, а на самом деле на него надо было нажать. В реальном мире объекты сообщают нам о том, как мы можем или должны взаимодействовать с ними. Например, своим размером и формой дверная ручка приглашает вас взяться за нее и повернуть. Ручка чашки говорит о том, что сквозь нее надо просунуть пальцы. Ручка портфеля предлагает обхватить ее ладонью. Если какая-то вещь подает сигнал, который оказывается неверным, вы чувствуете справедливое раздражение. Такие сигналы называются побудительными (аффорданс).
Джеймс Гибсон (James Gibson) выдвинул концепцию побудительных сигналов в 1979 году. Он описал их как побудительные причины действия в окружающем мире. В 1979 году Дон Норман (Don Norman) в своей книге «Дизайн простых вещей» («The Design of Everyday Things») несколько изменил концепцию побудительных сигналов. Он опирался на идею воспринимаемых возможностей: если вы хотите, чтобы люди как-то взаимодействовали с объектом, будь то объект в реальной жизни или на компьютерном экране, следует убедиться, что не будет проблем с восприятием, описанием и интерпретированием смысла и назначения этого объекта.
При решении некой задачи, например открывании двери или выкладывании книги на веб-сайте, автоматически, по большей части бессознательно, человек ищет подходящие инструменты и объекты, которые могут в этом помочь. Если вы разрабатываете средства для решения задачи, убедитесь, что вспомогательные объекты легко увидеть и найти и они подают ясные побудительные сигналы.
Посмотрите на ручку двери на рис. 7.1. Ее форма такова, что хочется взяться за нее и потянуть вниз. Если она работает именно таким образом, можно сказать, что дверная ручка сконструирована правильно и подает ясно воспринимаемые побудительные сигналы.
Рис. 7.1. Дверная ручка приглашает взяться за нее и потянуть вниз
Вы наверняка встречали дверную ручку, которая имеет форму, позволяющую вам взяться за нее и потянуть, но тем не менее на ней указано «НАЖМИТЕ». Когда сигнал объекта не соответствует его функции, вам приходится добавлять не всегда логичные пояснения, чтобы люди понимали, как взаимодействовать с объектом. Если объект подает сигналы, которые идут вразрез с тем, как он работает на самом деле, это называется ложным аффордансом.
Побудительные сигналы на экране компьютера
При проектировании приложения или веб-сайта подумайте о тех побудительных сигналах, которые будут посылать объекты на экране. Например, случалось ли вам задуматься над тем, что заставляет людей щелкнуть на кнопке? Тень от кнопки и является тем сигналом, который ясно говорит о том, что ее можно нажать и что нажатие и есть тот способ, который заставляет кнопку работать.
На рис. 7.2 показана кнопка на пульте дистанционного управления. Форма и тени подают сигналы, которые побуждают вас нажать на кнопку, чтобы привести в действие механизм.
Рис. 7.2. У кнопок на физических устройствах есть тень, именно поэтому вам хочется на них нажать
На экране также можно создать изображение таких теней. На рис. 7.3 тени различных цветов, расположенные по периметру, создают иллюзию нажатой кнопки. Теперь переверните книгу, поменяв местами верх и низ, и посмотрите на ту же кнопку. Теперь уже не кажется, что кнопка нажата, а тени подают сигнал о необходимости нажать ее.
Рис. 7.3. Эта кнопка выглядит нажатой, но переверните книгу и посмотрите, что получится
Эти визуальные сигналы – вещь тонкая, но очень важная. Многие кнопки подают такие сигналы, как, например, кнопка, показанная на рис. 7.4, но в последнее время дизайнеры веб-сайтов перестали придавать значение подобным мелочам. На рис. 7.5 кнопка представляет собой просто текст, расположенный в цветном прямоугольнике.
А если кто-то использует сенсорный экран или планшет вместо мыши или трекпада, то кнопка может не иметь никаких визуальных подсказок, например курсора в виде стрелки или руки с указательным пальцем.
Рис. 7.4. Использование теней делает этот прямоугольник похожим на кнопку
Рис. 7.5. Кнопки, утратившие свои сигналы
Гиперссылки утрачивают побудительные возможности
В наше время стал уже привычным следующий побудительный сигнал: синий подчеркнутый текст означает гиперссылку, и если щелкнуть на нем, то окажешься на другой странице или сайте. Однако в последнее время гиперссылки утратили свою характерную особенность, и единственным побудительным сигналом является подсветка, возникающая при наведении курсора.
На рис. 7.6 показана страница, на которой нет подсказок того, куда можно щелкнуть. (Вам нужно навести курсор, чтобы узнать, что является кликабельным.) Чтобы увидеть ссылки, вы должны перемещаться по странице с помощью курсора.
Рис. 7.6. Неизвестно, какие окна являются кликабельными
Выводы
• Если вы занимаетесь веб-дизайном, думайте о побудительных сигналах. Подавая людям сигналы о том, что они могут сделать с данным объектом, вы повышаете вероятность того, что они совершат это действие.
• Используйте тени, чтобы подчеркнуть, когда объект выбран или активен.
• Избегайте некорректных побудительных сигналов.
8. Человек может не обратить внимания на изменения в его поле зрения
Как украсть внимание
Если вы еще не видели «Горилла видео», вы немедленно должны это посмотреть. Пройдите по ссылке www.blog.theteamw.com/2009/10/25/100-things-you-shouldknow-about-people-1-inattention-blindness/. Запустите тест сейчас, иначе своими рассуждениями я испорчу эффект от этого видео.
«Горилла видео» служит примером проявления так называемой слепоты невнимания или слепоты к изменениям. Идея состоит в том, что люди часто упускают из виду большие изменения, происходящие в их поле зрения. Это утверждение было доказано в ходе ряда экспериментов, хотя вариант с мячиками и гориллой наиболее известен. (Видео с некоторыми другими экспериментами можно найти в моем блоге по вышеуказанному адресу.)
В своей книге «Невидимая горилла» Кристофер Чабрис и Дэниэл Симонс (Christopher Chabris, Daniel Simons, The Invisible Gorilla, 2010) описывают дополнительные исследования, которые проводились с применением оборудования, отслеживающим направление взгляда человека. Если говорить точнее, отслеживается центральное (оно же фовеальное) зрение. Периферическое зрение не отслеживается. Слежение за взглядом осуществлялось во время просмотра видео с мячиками и гориллой и показало, что каждый, кто смотрел видео, «видел» гориллу, то есть его взгляд фиксировал наличие гориллы, но только 50 % осознавали, что они видели гориллу. Чабрис и Симонс провели множество исследований этого явления и пришли к заключению, что если ваше внимание сосредоточено на чем-то одном и вы не ожидаете каких-либо изменений, то вы легко можете не заметить их появления.
Слежение за взглядом может вводить в заблуждение
Слежение за взглядом – технология, которая позволяет регистрировать, на что, в каком порядке и как долго смотрит субъект, включая то, смотрит ли он на экран монитора, страницу сайта или окружающую его среду. Одно из преимуществ использования данной технологии состоит в отсутствии необходимости полагаться на рассказы людей о том, на что они смотрят. Вместо этого вы можете получить объективные данные. Но данные, полученные в результате отслеживания взгляда, могут вводить в заблуждение в силу множества причин.
1. Как мы уже обсуждали в этом разделе, слежение за взглядом сообщает нам о том, на какой конкретный предмет или объект на экране смотрит пользователь, но это вовсе не означает, что он обращает на него внимание.
2. Исследования периферийного зрения, упомянутые в этой главе, свидетельствуют о том, что периферическое зрение по меньшей мере так же важно, как и центральное. Слежение за взглядом касается только центрального зрения.
3. Ранние исследования этой технологии, проведенные Альфредом Ярбусом (Alfred Yarbus, 1967), показали: то, на что люди смотрят, зависит от тех вопросов, которые им задают во время просмотра. Таким образом, легко исказить данные слежения за взглядом в зависимости от инструкций, которые вы даете до или во время эксперимента.
Выводы
• Не стоит надеяться, что люди увидят объект на вашей веб-страничке или на экране только потому, что он там есть. Особенно если вы обновляете экран и вносите одно изменение: например, на экране появляется сообщение о неправильном вводе данных в поле формы. Пользователи могут даже не заметить, что они смотрят на измененный экран.
• Если вы хотите быть уверенными, что люди заметят изменения в видимых полях, добавьте визуальные (например, мигание) или звуковые сигналы (например, гудок).
• Будьте осторожны с интерпретацией данных слежения за взглядом. Не придавайте им слишком большого значения и не берите их за основу для дизайнерских решений.
9. Считается, что объекты, расположенные рядом, связаны между собой
Если два элемента расположены рядом (например, текст и фото), предполагается, что они взаимосвязаны. Эта предполагаемая связь сильнее, если элементы расположены слева или справа.
На рис. 9.1 расстояние между столбцами аналогично расстоянию между строками, поэтому определить, к каким заголовками относятся фотографии, достаточно сложно. Поскольку логическое соединение слева направо сильнее, чем соединение сверху вниз, а также поскольку какие-либо другие визуальные подсказки отсутствуют, большинство людей предположит, что заголовок слева соответствует картинке справа. Это не тот случай, который затрудняет использование страницы.
Рис. 9.1. Вам сложно соотнести изображение с его заголовком
Выводы
• Если вы хотите, чтобы элементы воспринимались как связанные друг с другом, располагайте их слева или справа.
• Прежде чем использовать линии или прямоугольники, чтобы отделить элементы или сгруппировать их, поэкспериментируйте с количеством свободного пространства между ними. Иногда достаточно просто изменить количество пустого пространства и тем самым снизить визуальный шум на странице.
• Оставляйте больше свободного пространства между теми элементами, которые не связаны между собой, и меньше пространства между связанными элементами. Многие веб-странички и конфигурации экрана построены без учета этого принципа, хотя, на мой взгляд, это противоречит здравому смыслу.
10. Сочетание красного и синего – плохая комбинация
При размещении фигур или текста различных цветов на каком-либо фоне глубина линий может выглядеть по-разному. Один цвет может «выпирать», тогда как другой казаться «заглубленным». Такой эффект называется стереохроматизмом. Ярким примером его является размещение рядом красного и синего цветов, но им также грешат и другие сочетания, например красного и зеленого. Подобные комбинации с трудом воспринимаются при чтении и даже просто при взгляде на них. На рис. 10.1 показано несколько примеров стереохроматизма.
Рис. 10.1. Примеры стереохроматизма
Выводы
• Старайтесь не располагать рядом картинки или надписи синего и красного или зеленого и красного цветов.
• Не размещайте синий или зеленый текст на красном фоне, а также красный или зеленый текст на синем фоне.
11. Девять процентов мужчин и полпроцента женщин – дальтоники
Термин «дальтонизм» (цветовая слепота) часто понимают неправильно. Считается, что большинство дальтоников видит мир в черно-белой гамме, на самом деле речь идет всего лишь о частичной цветовой слепоте, в результате которой людям сложно видеть различия между некоторыми цветами. В большинстве случаев дальтонизм обусловлен наследственностью, хотя иногда он может возникать в результате болезни или травмы. Большинство генов, отвечающих за восприятие цвета, расположено на X-хромосоме. Так как у мужчин только одна X-хромосома, а у женщин их две, у мужчин чаще возникают проблемы с восприятием цвета.
Существует множество различных видов дальтонизма, но наиболее общим случаем является трудность в различении красного, желтого и зеленого цветов. Это так называемый «красно-зеленый» дальтонизм. Другие формы, как, например, проблемы с восприятием синего и желтого или тот случай, когда все воспринимается как серое, очень редки.
Проектируя веб-сайт или веб-страничку и используя цвета для особых обозначений, применяйте дополнительную схему кодирования, например совмещайте цвет и толщину линий, с тем чтобы дальтоники могли расшифровать этот код без цветовой кодировки.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию (https://www.litres.ru/suzan-ueynshenk/100-glavnyh-principov-dizayna/) на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.
Сьюзан Уэйншенк
Тип: электронная книга
Жанр: Привлечение клиентов
Язык: на русском языке
Издательство: Питер
Дата публикации: 27.05.2024
Отзывы: Пока нет Добавить отзыв
О книге: Цель любого дизайна – получение отклика. Мы хотим, чтобы человек что-то купил, прочитал или сделал. Разработка дизайна без понимания причин того или иного поведения людей похоже на блуждание по незнакомому городу без карты: движение будет хаотично, запутанно и неэффективно. Эта книга является симбиозом науки и практики, который необходим каждому дизайнеру.