Веб-дизайн - Удобочитаемость

Удобочитаемость

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

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

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

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

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

И НАКОНЕЦ, НЕ СЛЕДУЕТ НАБИРАТЬ ТЕКСТ ПРОПИСНЫМИ БУКВАМИ. ЧТЕНИЕ ТАКОГО ТЕКСТА ВЫПОЛНЯЕТСЯ ПРИМЕРНО НА 10% МЕДЛЕННЕЕ. ЧЕМ ТЕКСТА, НАБРАННОГО С ИСПОЛЬЗОВАНИЕМ СТРОЧНЫХ БУКВ, ПОСКОЛЬКУ ВОСПРИЯТИЕ СИМВОЛОВ, ИМЕЮЩИХ ОДИНАКОВУЮ ВЫСОТУ, НЕСКОЛЬКО ЗАТРУДНЕНО. ЭТОГО СЛЕДУЕТ ИЗБЕГАТЬ.

Веб-дизайн - Написание заголовков

Написание заголовков

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

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

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

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

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

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

Веб-дизайн - Названия страниц

Названия страниц

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

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

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

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

И наконец, названия должны быть приспособлены для беглого ознакомления. С этой целью следует помещать наиболее информативные фразы в начало названия, причем предпочтительнее всего начинать название со слова, которое с наибольшей вероятностью будет отражать потребности потенциального посетителя. Весьма часто встречается ошибка, когда в качестве названия используются такие фразы, как «Добро пожаловать на узел ААА». Гораздо лучшим вариантом было бы использование в качестве названия просто «ААА». Названия не обязательно должны представлять собой законченные грамматические структуры - скорее они должны быть выдержаны в духе рекламных слоганов.

Веб-дизайн - Разработка информационного наполнения

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

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

Создание текстов

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

При создании текстов нужно придерживаться трех основных рекомендаций:

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

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

Кратность

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

Веб-дизайн - Ссылки

Ссылки на ваш сайт

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

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

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

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

Ссылки на подписку и регистрацию

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

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

Рекламные ссылки

Реклама - особый источник входящих ссылок, потому как вы контролируете ссылки сами, если платите за рекламу. Я рекомендую в рекламном сообщении помещать ссылки на бесплатные страницы (продолжающие мысль, начатую в рекламе), а не ссылку на главную страницу сайта.
Исследования рекламы в Интернете показали, что около 20-30% пользователей, которые щелкают по рекламному баннеру, сразу же нажимают кнопку « Назад», как только понимают, что попали на корпоративную страницу. Я удивился только тому, что эти цифры не больше. В конце концов, если пользователи попадают на вашу главную страницу, остается надеяться только на их собственные способности в поиске ценной информации, которая имеет отношение к причине, заставившей их щелкнуть по баннеру. Учитывая, что на большинстве сайтов навигация очень сложна, это не самая лучшая идея.

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

Что касается самого рекламного баннера, то он должен разрабатываться как гиперссылка. То есть он должен ясно давать понять пользователям, что они смогут найти на странице, на которую он приведет, и зачем пользователям надо туда идти. Слишком много баннеров просто кричат: «Посмотрите на меня!», надоедая при этом анимацией. Такие баннеры не вызывают желания щелкнуть по ним, поскольку никакой значимой информации, кроме как «Щелкните здесь!», они не содержат.

Веб-дизайн - Графический дизайн страницы

Графический дизайн

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

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

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

Последнее различие между двумя интерфейсами скорее организационное и историческое, нежели техническое. Когда речь идет о графическом интерфейсе пользователя, мы можем вспомнить множество исследований, проведенных в крупных компаниях по-настоящему грамотными специалистами, наподобие Брюса Тогнацини (Bruce Tog-nazzini) в Apple и целой команды мастеров в Xerox PARC. В результате плохие идеи были отвергнуты, а хорошие - воплощены в виде общих принципов еще задолго до того, как графический интерфейс стал доступен среднему пользователю. Интернет же, напротив, развивается прямо по ходу нашего с вами разговора, все эксперименты проводятся непосредственно внутри него (а не в лаборатории с включенной видеозаписью), а нам с вами уготована почетная роль подопытных кроликов.

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

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

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

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

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

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

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

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

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

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