Web-элементы управления

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

С точки зрения получаемого результата при взаимодействии с командными (см. далее) элементами управления на web-странице могут быть двух видов: навигационные и функциональные.

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

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

Рис. 1. Навигационные и функциональные web-элементы.

Вместо "Ссылка графическая" указаны "Кнопка графическая" и "Ярлыки", т.е. элементы управления одной и той же природы (в данном случае - графические ссылки) относятся к разным по результату действию элементам. Обратите внимание на то, что в Web ярлыки используются как командный элемент управления, а в Windows - элемент выбора.

Рис. 2. Навигационные (слева) и функциональная (справа) ссылки

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

Пример 1. Сайт состоит из трех страниц - "Главная", "О компании" и "Контакты", но на страницах "О компании" и "Контакты" есть ссылка только на страницу "Главная", то есть, прямой переход между этими страницами отсутствует.

Рис. 3. Трёхстраничный сайт.

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

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

Пример 2. Теперь давайте несколько изменим предыдущий пример.

Рис. 4. Трёхстраничный сайт.

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

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

Давайте теперь рассмотрим системные и пользовательские элементы управления, особенности их использования и восприятия.

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

Все элементы управления на web-странице можно разделить на:

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

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

Рис. 5

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

Рис. 6

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

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

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

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

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