Примеры из книги "HTML и CSS. Путь к совершенству"

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

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

Для создания интерфейса мало объявить что «x ведет туда-то». Первейшая цель любого интерфейса — быть удобным для пользователей. Однако простого следования за вкусами толпы еще недостаточно для того, чтобы создать хороший интерфейс.

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

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

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

• Площадь, занимаемая навигационными ссылками или тегами, должна быть по возможности большой. Как минимум для каждого элемента свойству display следует присвоить значение block и добавить дополнительный отступ (см. главу 8). Также рекомендуется добавлять к поисковому окну кнопку подтверждения.

• Следует избегать использования всплывающих меню, выводящих внутренние ссылки, при наведении на них мышки (такие же, как например «Все программы» в меню «Пуск» в Windows), поскольку подобные меню требуют от пользователя очень хорошей моторики, что неудобно для людей с ограниченными возможностями, а подчас и для обычных пользователей. Microsoft применяет подобное меню, для того чтобы сохранить область отображения с целью приведения к наименьшему общему знаменателю аппаратной конфигурации. Так же в Windows реализована поддержка обращения к меню «Пуск» с клавиатуры и возможность помещать ссылки на программы прямо на рабочий стол. Указатели на странице должны быть подобны иконкам на рабочем столе Windows. Они должны быть так же хорошо заметны и информативны.

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

• Делайте пометки и подсказки четкими и ясными. Иначе они рискуют превратиться в так называемую «мистическую навигацию» (термин предложен Винсентом Фландерсом), когда вы знаете, что на другом конце ссылки что-то есть, но вот что там — совершенно непонятно. Переход по такой ссылке чем-то сродни прогулке по неосвещенным аллеям парка глубокой ночью.

• Старайтесь не пользоваться миниатюрными полями input type="text" в поисковых формах. Уменьшенный размер полей приводит к тому, что поисковый запрос хуже читается, что сразу же повышает вероятность ошибки и потратить время впустую. Конечно, не стоит делать эти поля гигантскими, но их размер должен дать возможность пользователю легко прочитывать все, что он туда вводит.

• При отображении текущего документа в навигационном контексте, четко выделяйте его из окружения. Если возможно, удалите элемент a, сохранив его содержание.