GN1404: Основные принципы дизайна web-сайтов

Электронная версия курса

2019 © Бизнес-информатика

Сгенерировано для пользователя Фандорин Эраст Петрович

Выходные сведения

Этот документ является автоматически сгенерированной печатной версией электронного курса Бизнес-информатика

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

https://it.rfei.ru/course/~QPKR

Данная электронная книга сгенерирована системой EduTerra.pro в соответствии со спецификацией EPUB 3.0.1.

Получив данную печатную версию, Вы со своей стороны обязуетесь:

использовать предоставленные Вам ресурсы только лично;

не обращаться к помощи третьих лиц или технических средств для улучшения результатов взаимодействий;

использовать ресурсы системы исключительно в образовательных целях;

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

Документ автоматически сгенерирован 03 сентября 2019, 10:06:21

Подготовлено для двусторонней печати на бумаге формата A4.

Информация о курсе

Английское название

GN1404 — 100 Things Every Designer Needs to Know About People

Код курса

Курс читается в бизнес-школе информационных технологий РФЭИ: код GN1404 — “Основные принципы дизайна”

О курсе

Этот курс даст вам возможность создать понятный и привлекательный дизайн для веб-сайта, программы, товара или бренда, со знанием того, что влияет на выбор человека.

Описание

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

Требования

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

Польза

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

Цели и намерения

Курс предоставляет ответы на следующие вопросы:

Как люди думают?

Как они принимают решения?

Что заставляет человека нажать кнопку или купить что-нибудь?

Как заставить людей сделать то, что вы хотите?

Рекомендованная литература

К. Элам Графический дизайн. Принцип сетки Питер СПб, 120 стр., 2014 г.

Дж. Эдсон Уроки дизайна от Apple. Семь принципов создания безумно замечательных товаров, услуг и процессов Эксмо, 240 стр., 2013 г.

Лидвелл У., Холден К., Батлер Дж. Универсальные принципы дизайна Питер СПб, 272 стр., 2012 г.

К. Элам Геометрия дизайна Пропорции и композиции Питер СПб, 112 стр., 2011 г.

Р. Овчинникова Дизайн в рекламе Юнити-Дана, 271 стр., 2010 г.

С. Сидоров Психология дизайна и рекламы Секреты PR-технологии Современная школа, 256 стр., 2007 г.

Прахалад К. К., Кришнан М. С. Пространство бизнес-инноваций. Создание ценности совместно с потребителем, 264 стр., 2012

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

Создаете ли вы веб-сайт, медицинское оборудование или любой другой продукт — ваша целевая аудитория состоит из людей, достойных хорошего дизайна.

И ваша прямая обязанность хорошо знать свою целевую аудиторию.

Как люди думают? Как они принимают решения? Что заставляет человека нажать кнопку или купить что-нибудь? Как заставить людей сделать то, что вы хотите?

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

И вы действительно сможете улучшить дизайн — потому, что большая часть тяжелой работы уже проведена, и результаты ее представлены в данном курсе.

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

Итак, перед вами: 100 главных принципов дизайна — или 100 вещей, которые вам необходимо знать о людях.

Раздел 1. Как человек видит

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

Можно с полным основанием сказать, что мозг «видит».

Принцип 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. Эти линии на самом деле одинаковой длины

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

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

Зрительная зона коры головного мозга собирает всю информацию воедино

Согласно Джону Медина (John Medina, 2009), лучи света проходят через зрачок, хрусталик и стекловидное тело, попадают точно на сетчатку и образуют на ней четкие изображения предметов. Чувствительные к свету клетки глаза преобразуют свет в электрические сигналы и в виде отдельных треков посылают эти сигналы к особо чутким нервным окончаниям. Одни треки содержат информацию о тенях, другие — информацию о движении и т. д. Двенадцать таких треков отправляются затем в зрительную зону коры головного мозга. Различные участки коры реагируют на эту информацию и обрабатывают ее. Например, одна область реагирует только на линии под углом 40°, другая — на цвет, третья — на движение, а четвертая — на границы. В конечном итоге все эти данные укладываются в два трека: один определяет движение (движется ли объект?), а другой — местоположение (как расположен объект по отношению ко мне?).

Выводы:

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

Ваши предположения о том, что люди видят на веб-странице, возможно, совсем не соответствует тому, что они действительно видят.

Вы можете убедить людей видеть вещи определенным образом.

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

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

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

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

Адам Ларсон и Лестер Лощки (Adam Larson, Lester Loschky) показывали зрителям обыкновенные картинки, например фотографии кухни или гостиной. На некоторых изображениях была вырезана внешняя часть, а на других — центральная. Картинки демонстрировались очень короткое время и через специальный серый фильтр, чтобы их трудно было разглядеть (см. рис. 2.1–2.2). Затем участникам исследования предлагалось рассказать, что же они видели.
Ларсон и Лощки обнаружили, что при отсутствии центральной часть изображения люди все же могли отличить кухню от гостиной. Но если отсутствовала периферическая часть, «подопытные» ничего не могли сказать о помещении. В процессе эксперимента исследователи вырезали различные по величине фрагменты фотографий и пришли к выводу, что центральное зрение в основном отвечает за распознавание отдельных объектов, но общий смысл картины схватывается периферическим зрением.

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

Рис. 2.2 Фото с изображением периферии
в эксперименте Ларсона и Лощки

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

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

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

Выводы:

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

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

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

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

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

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

Нейроны реагируют на определенные формы

В 1959 году Дэвид Хьюбел (David Hubel) и Торстен Визель (Torsten Wiesel) показали, что одни клетки зрительной коры головного мозга реагируют только на горизонтальные линии, вторые — только на вертикальные, третьи реагируют только на края, четвертые — только на определенные углы.

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

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

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

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

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

Выводы:

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

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

Двумерные элементы предпочтительнее трехмерных. Глаза передают информацию мозгу в виде двумерных объектов. Трехмерное представление на экране может существенно замедлить узнавание и понимание.

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

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

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

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

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

Мы отслеживаем направление взгляда

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

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

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

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

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

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

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

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

Выводы:

Посетители веб-страниц распознают лица и реагируют на них быстрее, чем на что-либо другое (по крайней мере, те, кто не страдает аутизмом).

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

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

Принцип 5. "Перспективные" объекты

Если вы попросите кого-нибудь нарисовать чашку кофе, то, скорее всего, вы получите что-то похожее на рис. 5.1.

Рис. 5.1 Как мы “видим” объекты у себя в голове

Стивен Палмер (Stephen Palmer), путешествуя по всему миру, просил нарисовать чашку кофе. Примеры этих рисунков показаны на рис. 5.2.

Рис. 5.2 Вот так большинство людей рисуют чашку кофе

Обратите внимание на углы и перспективу. Несколько чашек нарисованы стоящими прямо, но большинство — с соблюдением законов перспективы, как если бы на чашки мы смотрели сверху и под небольшим углом. Такое видение соответствует канонической перспективе. Очень немногие нарисуют чашку кофе так, как это показано на рис. 5.3, — вид сверху.

Рис. 5.3 Большинство людей так чашку не изобразят

Я бы так не нарисовал, скажете вы, но... почему бы и нет? И правда, чаще всего люди рассматривают чашку кофе именно в этой перспективе, но нужно заметить, что подобные исследования не ограничились чашками кофе, и люди быстрее всего распознавали объекты именно в канонической перспективе, даже если встречались с этими объектами не особенно часто.

В ходе исследований людей просили опознать различных животных, например маленькую собачку или кошку. Каноническая перспектива всегда побеждала, хотя чаще всего мы смотрим на кошек или на маленьких собак сверху вниз, с высоты своего роста, а не чуть-чуть сверху (конечно, если вам не приходится доставать животное из-под стола).

Оказывается, распознавание объектов с позиции канонической перспективы — это универсальная человеческая черта.

Выводы:

Люди распознают рисунки или объекты быстрее и запоминают их лучше, если они представлены в канонической перспективе.

Если на веб-сайте или веб-страничке вы планируете использовать значки или пиктограммы, рисуйте их в канонической перспективе.

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

На что люди обращают внимание в первую очередь, разглядывая картинку на экране компьютера? А на что смотрят потом?

Это зависит от того, чем они занимаются и чего ожидают. Если человек в силу воспитания и образования читает текст слева направо, он будет точно так же «сканировать» экран — слева направо. Если он читает справа налево, то наоборот. Однако лишь немногие начинают просмотр с верхнего угла (левого или правого). Поскольку люди пребывают в абсолютной уверенности, что на страничке любого сайта есть вещи не важные и не нужные для решения непосредственной задачи (такие, как логотипы, пустые места, панели навигации, реклама и т. д. (рис. 6.1), в большинстве случаев они уделяют внимание центру экрана и игнорируют края.

Рис. 6.1 Мы игнорируем информацию, размещенную по краям экрана, и устремляемся к значимой информации

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

У каждого человека существуют стереотипы того, что и где он хочет видеть

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

При возникновении затруднений поле зрения сужается

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

Выводы:

Размещайте важную информацию (или объекты, к которым вы хотите при- влечь внимание) в верхней трети экрана или в центре.

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

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

Принцип 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.7 кнопка представляет собой просто текст, расположенный в цветном прямоугольнике.

Рис. 7.6 Использование теней делает
эту форму похожей на кнопку

Рис. 7.7 Кнопки, утратившие свои сигналы

Рис. 7.8 Вначале Times Reader не подает
побудительного сигнала

Рис. 7.9 При перемещении курсора по странице
возникает побудительный сигнал

Гиперссылки утрачивают побудительные возможности

В наше время стал уже привычным следующий побудительный сигнал: синий подчеркнутый текст означает гиперссылку, и если щелкнуть на нем, то окажешься на другой странице. Однако в последнее время гиперссылки утратили свою характерную особенность, и единственным побудительным сигналом является подсветка, возникающая при наведении курсора. На рис. 7.8 и 7.9 представлена страница New York Times Reader до и после того, как на нее навели курсор. Чтобы заметить этот сигнал, потребуется дополнительное внимание. Если вы просматриваете страничку на своем iPad, все эти сигналы останутся незамеченными из-за использования технологии мультитач. Как только вы коснетесь пальцем экрана, вы перейдете по ссылке.

Выводы:

Если вы занимаетесь веб-дизайном, думайте о побудительных сигналах. Подавая людям сигналы о том, что они могут сделать с данным объектом, вы повышаете вероятность того, что они совершат это действие.

Используйте тени, чтобы выделить объект, когда он выбран или активен.

Избегайте некорректных побудительных сигналов.

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

Принцип 8. Человек может не обратить внимания на изменения в поле его зрения

Как украсть внимание

Если вы еще не видели «Горилла видео», вы немедленно должны это посмотреть. Запустите тест прямо сейчас, иначе своими рассуждениями мы можем испортить эффект от этого видео.

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

В своей книге «Невидимая горилла» Кристофер Чабрис и Дэниэл Симонс (Christopher Chabris, Daniel Simons, The Invisible Gorilla) описывают дополнительные исследования, которые проводились с применением оборудования, отслеживающего направление взгляда человека. Если говорить точнее, отслеживается центральное (оно же фовеальное) зрение. Периферическое зрение не отслеживается. Слежение за взглядом осуществлялось во время просмотра видео с мячиками и гориллой и показало, что каждый, кто смотрел видео, «видел» гориллу, то есть его взгляд фиксировал наличие гориллы, но только 50% осознали, что они видели гориллу. Чабрис и Симонс провели множество исследований этого явления и пришли к заключению, что если ваше внимание сосредоточено на чем-то одном и вы не ожидаете каких-либо изменений, то вы легко можете не заметить их появления.

Слежение за взглядом может вводить в заблуждение

Слежение за взглядом — технология, которая позволяет регистрировать на что, в каком порядке и как долго смотрит субъект. Одно из преимуществ использования данной технологии состоит в отсутствии необходимости полагаться на рассказы людей о том, на что они смотрят. Вместо этого вы можете получить объективные данные. Но данные, полученные в результате отслеживания взгляда, могут вводить в заблуждение в силу множества причин.

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

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

Ранние исследования этой технологии, проведенные Альфредом Ярбусом (Alfred Yarbus), показали, что то, на что люди смотрят, зависит от тех вопросов, которые им задают во время просмотра. Таким образом, легко исказить данные слежения за взглядом в зависимости от инструкций, которые вы даете до или во время эксперимента.

Выводы:

Не стоит надеяться, что люди увидят объект на вашей веб-страничке только потому, что он там есть, особенно если вы вносите только одно изменение. Пользователи могут даже не заметить, что они смотрят на измененный экран.

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

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

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

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

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

Рис. 9.1 Вы можете предположить, что эта фотография относится к тексту слева, поскольку они расположены рядом, а мы читаем слева направо.
Но в данном примере изображение на самом деле относится к тексту под ним — и это может сбить с толку

Выводы

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

Прежде чем использовать линии или прямоугольники, чтобы отделить элементы или сгруппировать их, поэкспериментируйте с количеством свободного пространства между ними. Иногда достаточно просто изменить объем свободного пространства, чтобы тем самым снизить визуальный шум на странице.

Оставляйте больше свободного пространства между теми элементами, которые не связаны между собой, и меньше — между связанными элементами. Многие веб-странички построены без учета этого принципа, хотя, на наш взгляд, это противоречит здравому смыслу.

Принцип 10. Красный и синий цвета рядом — удар по глазам

При размещении фигур или текста различного цвета на каком-либо фоне глубина линий может выглядеть по-разному. Один цвет может «выпирать», тогда как другой казаться «заглубленным».

Такой эффект называется стереохроматизм.

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

Выводы

Старайтесь не располагать рядом картинки или надписи синего и красного или зеленого и красного цвета.

Не размещайте синий или зеленый текст на красном фоне, а также красный или зеленый текст на синем фоне.

Принцип 11. Девять процентов мужчин и полпроцента женщин — дальтоники

Термин «дальтонизм» (цветовая слепота) часто понимают неправильно. Считается, что большинство дальтоников видит мир в черно-белой гамме, но на самом деле речь идет всего лишь о частичной цветовой слепоте, в результате которой людям сложно видеть различия между некоторыми цветами. В большинстве случаев дальтонизм обусловлен наследственностью, хотя иногда он может возникать в результате болезни или травмы. Большинство генов, отвечающих за восприятие цвета, расположено на X-хромосоме. Так как у мужчин только одна X-хромосома, а у женщин их две, у мужчин чаще возникают проблемы с восприятием цвета.

Существует множество различных видов дальтонизма, но наиболее общим случаем является трудность в различении красного, желтого и зеленого цвета. Это так называемый «красно-зеленый» дальтонизм. Другие формы, как, например, проблемы с восприятием синего и желтого, или тот случай, когда все воспринимается как серое, очень редки.

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

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

Используйте специальные веб-сайты, чтобы проверить, как будут выглядеть изоражения с вашего веб-сайта для дальтоников

Существует несколько сайтов, с помощью которых можно проверить, как будут выглядеть картинки с вашего веб-сайта для дальтоников. Здесь мы рекомендуем следующий сайт www.vischeck.com

Зачастую дальтоники лучше видят камуфляжную маскировку

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

Выводы:

Проверьте ваши картинки и веб-странички с помощью сайт www.vischeck.com

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

При создании схемы цветового кодирования подбирайте цвета, различаемые всеми, например оттенки коричневого и желтого. Избегайте красного, зеленого и синего.

Принцип 12. Значение цвета зависит от культуры и истории

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

Наконец кто-то, обладающий особо зычным голосом, спросил: «Что, черт возьми, происходит на западе?» «Что вы имеете в виду? — не понял вице-президент. — Ничего не происходит. У них прекрасные квартальные показатели». Как выяснилось, для бухгалтеров и финансистов красный — цвет негатива. Он означает потерю денег. Выступающий должен был объяснить, что красный был выбран чисто случайно.

Цветам присуще ассоциативное восприятие и определенная информационная нагрузка: например, красный означает «влезть в долги» или впутаться в финансовые неприятности или же он может означать сигнал опасности или знак «стоп». Зеленый означает прибыль или «проходите». Не следует забывать об информации, которую могут нести цвета. Для различных групп людей цвета могут имеет различные значения.

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

Некоторые цвета «мультикультурны» (золотой, например, символизирует успех и высокое качество), но большая часть цветов в каждой культуре несет собственную информационную нагрузку. Например, в Соединенных Штатах белый символизирует чистоту и в белое одеваются невесты, тогда как в Индии белый — цвет траура и похорон. Счастье может ассоциироваться с белым, зеленым, желтым или красным, в зависимости от того, в какой части света вы находитесь.

Дэвид Маккендлесс (David McCandless) на InformationIsBeautiful.net разместил цветовое колесо, которое показывает, как различные цвета воспринимаются в различных культурах.

Цвета и настроение

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

Выводы:

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

Выберите несколько главных культур или стран, для которых будет предназначаться ваш дизайн, и проверьте корректность использования цветов по цветовой карте культур на InformationIsBeautiful.net.

Проверка знаний. Раздел 1

Варианты заданий

Задание 1

Отметьте функции периферического зрения.

дает возможность видеть вещи под тем углом, который непривычен глазу

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

используется, чтобы различать детали

позволяет различать форму и цвет рассматриваемых предметов

Задание 2

В чем заключается явление слепоты невнимания?

нарушение функционирования зрительного аппарата

концентрация внимания на более мелких объектах

упущение из виду больших изменений, происходящих в поле зрения человека

Задание 3

Какую ошибку допустил автор этой картинки:

эффект стереохроматизма

неправильное сочетание форм

Задание 4

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

Как называются эти фигуры?

геоны

образ

нейроны

Задание 5

Какое явление демонстрирует следующий рисунок?

треугольник Канижа

иллюзия Франца Мюллера-Лайера

дальтонизм

Задание 6

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

форма

тени

цвет текста/подчеркивание

форма/надпись

тени

цвет текста/подчеркивание

форма

тени

цвет текста/подчеркивание

форма

тени

цвет текста/подчеркивание

форма

тени

цвет текста/подчеркивание

Перейти к выполнению заданий

Раздел 2. Как человек читает

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

Но как мы читаем? И что дизайнеры знают о чтении?

Принцип 13. Миф о том, что прописные буквы трудно читать

Вы, возможно, слышали о том, что слова, состоящие из одних прописных букв, читать труднее, чем слова со смешанным составом букв (прописные и строчные) или слова, состоящие только из строчных букв. Кроме того, вы, возможно, даже слышали о неких исследованиях британских ученых, показавших, что «разница в трудности их восприятия составляет от 14 до 20%».

Это объяснялось тем, что при чтении мы узнаем формы слов и групп слов. Слова со смешанным составом или слова, состоящие только из строчных букв, имеют однозначно идентифицируемую форму. А все слова, состоящие только из заглавных букв, имеют одинаковую форму — прямоугольник определенного размера — поэтому, теоретически, их труднее различать (рис. 13.1).

Рис. 13.1 Теория формы слова

Это объяснение звучит вполне правдоподобно, но на самом деле это не так. Исследования, убедительно доказывающие, что форма помогает идентифицировать слова точнее или быстрее, никогда не проводились. Американский психолог Джеймс Кеттелл (James Cattell) впервые выдвинул это предположение в 1886 году. В то время существовали некоторые данные, говорящие в пользу этой идеи, но в более поздних работах Кеннет Паап (Kenneth Paap) и Кейт Райнер (Keith Rayner) показали, что на самом деле во время чтения происходит распознавание букв. И только потом, на основе букв, мы распознаем слово. Давайте рассмотрим подробнее, как мы читаем.

Чтение не является непрерывным процессом

При чтении кажется, что наш взгляд непрерывно перемещается по строчкам на странице, но на самом деле наши глаза движутся быстрыми скачками с короткими паузами между ними. Скачки называют саккадами (за один прыжок считывается от 7 до 9 букв), а паузы между ними называются фиксациями (продолжительность их около 250 миллисекунд). Во время саккады мы ничего не видим, то есть фактически слепы, но саккада происходит настолько быстро, что мы не успеваем это осознать. Большую часть времени взгляд не меняет направление, но на краткий промежуток времени (10–15%) взгляд возвращается назад, чтобы перечитать буквы или слова.

На рис. 13.2 показан пример саккады и фиксации. Черные точки изображают фиксации, а кривые линии между ними — саккады.

Рис. 13.2 Примеры саккады и фиксации

Во время чтения работает периферическое зрение

Саккада охватывает от 7 до 9 букв, но наше восприятие в действительности распространяется на вдвое большее число букв. В 1996 году Кеннет Гудман (Kenneth Goodman) обнаружил, что при чтении мы используем периферическое зрение, чтобы «увидеть» следующий кусок текста. Мы заглядываем вперед приблизительно на 15 букв, просматривая символы слева направо (если мы читаем слева направо), но каждый раз происходит отскок назад, и мы перечитываем группы букв. Несмотря на наше «упреждающее» чтение следующих 15 букв, точное значение мы получаем только для части символов этого диапазона. Мы улавливаем семантическое значение букв с первой по седьмую, а с восьмой по пятнадцатую только распознаем.

Чтение партитур ничем не отличается от чтения текста: те же саккады, фиксации и «упреждающее» чтение следующих 15 символов.

Действительно ли прописные буквы читать труднее?

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

В наше время текст, состоящий только из прописных букв, воспринимается как «кричащий» или требующий дополнительного внимания (рис. 13.3 ).

Рис. 13.3 Заглавные буквы воспринимаются как «кричащие», но их чтение не вызывает затруднений

Кевин Ларсон (Kevin Larson) написал замечательную статью, подытоживающую исследования текстов, состоящих из заглавных букв, и смешанных текстов - The Science of Word Recognition

Выводы:

Тексты, состоящие только из заглавных букв, воспринимаются как «кричащие» и для человеческого глаза выглядят непривычно, так что пользуйтесь заглавными буквами аккуратно.

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

Принцип 14. Чтение и понимание — это не одно и то же

Если вы биолог или биохимик, то разобраться в следующем тексте для вас не составит особого труда:

Образовавшийся в результате окислительного декарбоксилирования пирувата в митохондриях ацетил-КоА вступает в цикл Кребса. Начинается цикл с присоединения ацетил-КоА к оксалоацетату и образования цитрата. Затем цитрат путем ряда дегидрирований и двух декарбоксилирований теряет два углеродных атома и снова превращается в оксалоацетат.

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

Можно оценить удобочитаемость вашего текста

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

Формула удобочитаемости Флеша:

206.835−1.015(слов в документепредложений в документе)−84.6(слогов в документеслов в документе)

Вы можете прочитать этот абзац?

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

Во время чтения мы не занимаемся точным отождествлением букв и слов; мы интерпретируем их позднее. Мы предугадываем, что будет дальше. Чем больше вы знаете, тем легче предугадывать и интерпретировать.

В некоторые программы для работы с текстами включена возможность вычисления оценки удобочитаемости по формуле Флеша — Кинсайда. Кроме того, можно использовать следующий метод оценки уровня удобочитаемости отдельного фрагмента Readability index calculator.

Не забывайте о заголовках

Прочитайте следующий абзац:

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

О чем этот абзац? Понять трудно. Но что если поместить тот же самый абзац под заголовком?

Как использовать новую стиральную машину

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

Удобочитаемость абзаца не улучшилась, но, по крайней мере, стало понятно, о чем он.

При обработке слов задействуются различные отделы мозга

Слова обрабатываются в различных отделах головного мозга в зависимости от того, какие действия с ними мы производим. Разглядывание или пассивное чтение слов, слушание, проговаривание, создание текста — все эти виды вербальной активности задействуют различные части мозга, как показано на рис. 14.1.

Рис. 14.1 Слова обрабатываются различными участками мозга

То, что вы запоминаете, зависит от вашей точки зрения

В исследовании Андерсона и Пичерта (Anderson, Pichert) испытуемые читали рассказ о доме и его внутреннем убранстве. Одной группе было предложено прочитать рассказ с точки зрения покупателя дома, а другой — с точки зрения грабителя. Информация, которую люди запомнили, различалась в зависимости от точки зрения.

Выводы:

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

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

Снабдите текст значимыми заголовками. Это очень важно для дальнейшего восприятия текста.

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

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

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

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

Люди распознают буквы, сверяясь с образами

Каким образом мы распознаем во всех символах на рис. 15.1 букву А?

Рис. 15.1 Мы распознаем множество вариантов начертания буквы

Мы не храним в памяти все варианты начертания буквы А. Вместо этого в мозге формируется образ буквы А. Когда мы видим нечто подобное, наш мозг узнает этот образ. (См. обсуждение геонов в разделе «Как человек видит», чтобы получить больше информации о том, как мы распознаем формы).

Дизайнеры используют разные шрифты для того, чтобы создать настроение, произвести впечатление или вызвать ассоциации. Некоторые семейства шрифтов связываются в нашем представлении с определенной исторической эпохой (Old style или Modern), тогда как другие передают эмоциональный настрой. Однако с точки зрения удобочитаемости выбор шрифта не имеет значения, если только шрифт не содержит такого количества завитушек, что трудно распознать буквы.

Избыточное количество декоративных элементов затрудняет распознавание образов.

На рис. 15.2 показаны различные декоративные шрифты. Первый шрифт относительно легок для чтения; каждый последующий шрифт становится все более сложным. Мозгу трудно распознавать образы букв в сложных шрифтах._

Рис. 15.2 Некоторые декоративные шрифты легко читаются , тогда как чтение других вызывает трудности

Если вас интересуют исследования, касающиеся шрифтов, оформления текстов и удобочитаемости, посетите блог Алекса Пула

От восприятия шрифта зависит понимание текста

В ходе эксперимента Хьюнджин Сонг и Норберт Шварц (Hyunjin Song, Norbert Schwarz) давали участникам письменные инструкции о том, как выполнять физическое упражнение. Если инструкции были написаны легким для чтения шрифтом (например, Arial), «подопытные» считали, что а выполнение этого упражнения уйдет около восьми минут и что оно не очень сложное. Они даже высказывали желание включить это упражнение в свою ежедневную тренировку. Но если инструкции были написаны более декоративным шрифтом (например, Brush Script MT Italic), они оценивали время выполнения как вдвое большее — 15 минут, а также считали это упражнение трудным для выполнения (рис. 15.3) и большого желания включать его в свою тренировочную программу не выказывали.

Рис. 15.3 Использование неудобочитаемого шрифта негативно отражалось на мнении о легкости упражнения

Выводы:

Не существует разницы в удобочитаемости между шрифтами с засечками и без засечек.

Необычный и чрезмерно декоративный шрифт может мешать распознаванию образов и уменьшать скорость чтения.

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

Принцип 16. Размер имеет значение

Это в первую очередь касается шрифтов. Шрифт должен быть достаточно крупным, чтобы его можно было читать без напряжения. И это относится не только к пожилым читателям, которым необходим шрифт покрупнее, — молодым людям также не нравится иметь дело со слишком маленькими буковками.

Почему некоторые шрифты кажутся крупнее по сравнению с другими, хотя они имеют один и тот же размер? Это связано с x-высотой.

x-высота — высота строчных букв без выносных элементов в данном семействе шрифтов.

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

Рис. 16.1 Так вычисляется размер шрифта и x-высота

Некоторые новые семейства шрифтов, такие как Tahoma и Verdana, имеют большую x-высоту, так что их легко читать с экрана. На рис. 16.2 приведены примеры шрифтов, имеющих одинаковый размер кегля, но разную x-высоту.

Рис. 16.2 Шрифты с большей x-высотой кажутся крупнее

Выводы:

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

Используйте для экрана шрифт с большой x-высотой, так как он кажется крупнее.

Принцип 17. Сложнее читать текст на экране, чем на бумаге

Электронные чернила, электронная бумага (еlectronic ink, electronic paper) — технологии, использующиеся в современных устройствах для чтения электронных книг (букридеров) и создающие эффект бумажной страницы.

Не следует приравнивать чтение текстов с экрана (компьютера, наладонника или «читалки») к чтению на бумажном носителе. Когда вы читаете текст с экрана, изображение нестабильно — оно постоянно обновляется, а экран излучает свет. Текст на бумаге стабилен (не обновляется), и вместо излучения экрана вы видите только отраженный бумагой свет. Обновление изображения и излучение света экраном вызывают усталость глаз. Электронные чернила создают эффект текста, написанного на бумаге. Они отражают свет, а текст не так часто обновляется.

Чтобы облегчить восприятие текста на экране, убедитесь, что шрифт достаточно крупный и контрастный. На рис. 17.1 показана лучшая комбинация: черный текст на белом фоне.

Рис. 17.1 Черный текст на белом фоне наиболее прост для восприятия

Выводы:

Для текста на экране используйте более крупный кегль. Это поможет снизить напряжение глаз.

Разбивайте текст на фрагменты. Используйте списки, короткие абзацы и иллюстрации.

Обеспечьте достаточный контраст между фоном и текстом. Черный текст на белом фоне воспринимается легче всего.

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

Принцип 18. Человек быстрее читает длинные строчки, но предпочитает короткие

Вы когда-нибудь задумывались о ширине текстовой колонки на экране? Должна ли это быть широкая колонка со 100 символами в строке? Или узкая колонка с 50 символами? Или что-то среднее? Ответ зависит от того, что вы предпочитаете: скорость восприятия информации или привлекательность.

Целью опытов Мэри Дайсон (Mary Dyson) было определение того, какая длина строки предпочтительнее. Ее исследования показывают, что 100 символов на строке — оптимальная длина для максимальной скорости чтения; но мы предпочитаем короткие строки или же строки средней длины (от 45 до 73 символов на строке). На рис. 18.1 показаны примеры коротких и длинных строк.

Рис. 18.1 Длина строк, скорость чтения и предпочтения читателей, www.nytimes.com

Длинные строки легче читаются, потому что реже прерывается поток саккад и фиксаций

Каждый раз в конце строки прерывается последовательность движений глаз — саккад и фиксаций. Короткие строчки дают большее число таких прерываний по отношению к общей длине текста.

Исследования показали, что широкие текстовые колонки мы читаем быстрее, нежели узкие, но при этом предпочитаем несколько узких колонок, как это показано на рис. 18.2.

Рис. 18.2 Люди читают быстрее одну широкую колонку, но отдают предпочтение нескольким узким

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

Выводы:

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

Используйте длинные строки (100 символов в строке), если важна скорость чтения.

Используйте короткие строки (от 45 до 72 символов в строке), если скорость чтения менее критична.

Для многостраничных статей лучше использовать множество колонок с небольшой длиной строки (45 символов на строке).

Проверка знаний. Раздел 2

Варианты заданий

Задание 1

Рассмотрите следующие характеристики:

A)

шрифт

размер шрифта

Данные свойства оказывают большое влияние на

удобочитаемость текста

понимание текста

Б)

когнитивные рамки горовящего

заголовок текста

Данные свойства оказывают большое влияние на

удобочитаемость текста

понимание текста

Задание 2

С какой целью используется формула Флеша?

вычислить количество слов в документе

оценить легкость чтения

исправить грамматические ошибки в тексте

Задание 3

Прочитайте следующий текст

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

Какое свойство человеческого ума демонстрирует прочтение этого текста?

воображение

предугадывание

отождествление

Перейти к выполнению заданий