100 главных принципов дизайна - Сьюзан Уэйншенк

Рис. 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. Примеры стереохроматизма

Выводы

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