Рис. 7.1. Дверная ручка приглашает взяться за нее и потянуть вниз

На рис. 7.2 показана ручка, форма которой приглашает взяться за нее и тянуть на себя, но надпись «Толкать» показывает, что дверь этим способом открыть не удастся. Такое явление известно как некорректный побудительный сигнал.

Рис. 7.2. Над ручкой двери написано «Толкать», в то время как ее форма предполагает, что нужно тянуть

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

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

Рис. 7.3. Кнопки на физических устройствах отбрасывают тени, которые побуждают вас нажать на них

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

Рис. 7.4. Эта кнопка выглядит нажатой, но переверните книгу и посмотрите, что получится

Эти визуальные сигналы – вещь тонкая, но очень важная. Многие кнопки на веб-сайтах подают такие сигналы, как, например, кнопка, показанная на рис. 7.5, но в последнее время дизайнеры веб-сайтов перестали придавать значение подобным мелочам. На рис. 7.6 кнопка представляет собой просто текст, расположенный в цветном прямоугольнике.

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

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

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

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

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

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

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

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

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