Веб-дизайн - Дизайн страницы

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

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

Неподвижные области экрана

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

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

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

Как правило, содержательная информация должна занимать, по крайней мере половину страницы, лучше всего, если под нее отведено до 80% пространства страницы. Элементы навигации не должны занимать больше 20% пространства страницы. Тем не менее, эти пропорции могут меняться для начальных страниц и промежуточных страниц навигации. С точки зрения улучшения эксплуатационных характеристик, оптимальным решением был бы отказ от рекламы. Если реклама вам действительно нужна, то лучше расположить ее в верхней части страницы, вместе с элементами навигации, уменьшая тем самым долю, занимаемую элементами навигации на странице.

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

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