Веб-дизайн - Рисунки и фотографии

Рисунки и фотографии

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

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

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

Уменьшение размера изображения

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

К сожалению, при изменении масштаба изображения уменьшаются настолько, что могут становиться абсолютно неразборчивыми. Применение кадрировки (обрезки краев изображения) позволяет сохранить детализацию на исходном уровне, однако при этом утрачивается определенная часть содержащейся в изображении информации. Оптимальным выходом в данной ситуации может стать совместное использование обоих указанных методов. Например, для получения уменьшенного образца, размер которого составляет 10% от размера исходного изображения, вначале следует обрезать изображение до 32% относительно исходного размера, а затем уменьшить его масштаб до 32% от размера версии после кадрировки. Размер полученного в результате этого варианта изображения составляет 0,32 хО,32=0,1 от исходного.

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

Два традиционных способа уменьшения размера изображения предполагают его кадрировку (рисунок слева) или масштабирование (рисунок справа).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кратность

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