100 главных принципов дизайна - стр. 10
3. Ранние исследования этой технологии, проведенные Альфредом Ярбусом (Alfred Yarbus, 1967), показали: то, на что люди смотрят, зависит от тех вопросов, которые им задают во время просмотра. Таким образом, легко исказить данные слежения за взглядом в зависимости от инструкций, которые вы даете до или во время эксперимента.
• Не стоит надеяться, что люди увидят объект на вашей веб-страничке или на экране только потому, что он там есть. Особенно если вы обновляете экран и вносите одно изменение: например, на экране появляется сообщение о неправильном вводе данных в поле формы. Пользователи могут даже не заметить, что они смотрят на измененный экран.
• Если вы хотите быть уверенными, что люди заметят изменения в видимых полях, добавьте визуальные (например, мигание) или звуковые сигналы (например, гудок).
• Будьте осторожны с интерпретацией данных слежения за взглядом. Не придавайте им слишком большого значения и не берите их за основу для дизайнерских решений.
9. Считается, что объекты, расположенные рядом, связаны между собой
Если два элемента расположены рядом (например, текст и фото), предполагается, что они взаимосвязаны. Эта предполагаемая связь сильнее, если элементы расположены слева или справа.
На рис. 9.1 расстояние между столбцами аналогично расстоянию между строками, поэтому определить, к каким заголовками относятся фотографии, достаточно сложно. Поскольку логическое соединение слева направо сильнее, чем соединение сверху вниз, а также поскольку какие-либо другие визуальные подсказки отсутствуют, большинство людей предположит, что заголовок слева соответствует картинке справа. Это не тот случай, который затрудняет использование страницы.
Рис. 9.1. Вам сложно соотнести изображение с его заголовком
• Если вы хотите, чтобы элементы воспринимались как связанные друг с другом, располагайте их слева или справа.
• Прежде чем использовать линии или прямоугольники, чтобы отделить элементы или сгруппировать их, поэкспериментируйте с количеством свободного пространства между ними. Иногда достаточно просто изменить количество пустого пространства и тем самым снизить визуальный шум на странице.
• Оставляйте больше свободного пространства между теми элементами, которые не связаны между собой, и меньше пространства между связанными элементами. Многие веб-странички и конфигурации экрана построены без учета этого принципа, хотя, на мой взгляд, это противоречит здравому смыслу.
10. Сочетание красного и синего – плохая комбинация
При размещении фигур или текста различных цветов на каком-либо фоне глубина линий может выглядеть по-разному. Один цвет может «выпирать», тогда как другой казаться «заглубленным». Такой эффект называется стереохроматизмом. Ярким примером его является размещение рядом красного и синего цветов, но им также грешат и другие сочетания, например красного и зеленого. Подобные комбинации с трудом воспринимаются при чтении и даже просто при взгляде на них. На рис. 10.1 показано несколько примеров стереохроматизма.
Рис. 10.1. Примеры стереохроматизма
• Старайтесь не располагать рядом картинки или надписи синего и красного или зеленого и красного цветов.
• Не размещайте синий или зеленый текст на красном фоне, а также красный или зеленый текст на синем фоне.