Кнопки

Кнопка - один и наиболее часто используемых элементов управления на web-странице.

Кнопка может быть системной

или пользовательской

Системные кнопки - обычные кнопки со стандартной реакцией на события.

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

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

Некоторые специалисты по юзабилити считают, что элемент "кнопка" должен выглядеть на странице как кнопка - рамка-тень. Но я думаю, что это не так принципиально. Раньше в Windows-приложениях на инструментальных панелях действительно располагались элементы с внешним видом кнопок, то сейчас их заменили плоские пиктограммы, которые в ряде случаев лучше различимы кнопок, поскольку в них отсутствуют границы. Часто восприятие элемента в качестве кнопки происходит скорее исходя из ее местоположения, нежели из-за ее какой-то определенной формы. Если навигационная и информационная структуры продуманы и четко представлены на странице, то посетителю даже не придется задумываться, что это - кнопка, ссылка или пиктограмма.

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

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

 

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

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

Интересно заметить, посетитель взаимодействует с разными объектами на web-странице с разной степенью доверия. В одних случаях он уверен в результатах этого взаимодействия (случай с классической ссылкой), в других уверен меньше, в-третьих вообще не знает, что произойдет. Если посетитель не уверен, то он может попытаться проверить свои предположения, прилагая дополнительные усилия, например, наведя курсор на объект, чтобы посмотреть, изменился вид курсора, что косвенно свидетельствует о том, что он видит ссылку.

Определить графическую ссылку не так просто, но с кнопкой ситуация должна быть предельно ясной, поскольку кнопка - небольшой по размерам графический элемент, который представляет собой однострочную надпись или пиктограмму в ограниченной области. Чаще всего такая область ограничивается рамкой и (или) тенью. Если нет ограничивающего область элемента, то надпись воспринимается как обычный текст, а пиктограмма заставляет задуматься. Сравните следующие изображения.

Из примера видно, что 1 - непонятный элемент, а 6 - полностью понятный. Для идентификации изображения C 1 по 3 требуют от посетителя произвести дополнительное действие - подвести указатель мыши, чтобы проверить - это активный элемент или нет. 5 отличается от 4 тем, что выпуклость кнопки более заметна, поскольку здесь контраст рамки относительно фона кнопки больше, 6 - практически похож на обычную системную кнопку. С 1 по 3 не похожи на кнопку, поскольку выглядят не как кнопки.

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

Анимация воспринимается посетителями как ссылка достаточно четко.

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

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

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

Давайте посмотрим следующий пример

1 вариант заставляет задуматься, что значит "Поиск"? 2 вариант очевиден - выполнить действие "Найти"? 3 вариант тоже понятен, но заставляет задуматься над непривычным (неудобным) расположением кнопки. Почему неудобно? Потому что мы читаем, пишем и вводим на компьютере текст слева-направо. Поэтому расположение кнопки поиска справа является продолжение привычного движения слева-направо. 4 и 5 вариант - непонятный "креатив в дизайне".

Теперь нужно разобраться с изображением. Посмотрите на пиктограмму слева и справа и скажите, что они обозначают

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