Веб-дизайн - Главная страница в сравнении с внутренними

Главная страница в сравнении с внутренними

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

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

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

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

Ссылки вглубь сайта

Заставлять пользователей входить на сайт только через главную страницу — ошибочная стратегия. Так называемые «ссылки вглубь» deep linking позволяют другим сайтам направлять пользователя в конкретную точку, представляющую интерес именно для него. Каждый сайт - словно дом с тысячей дверей: есть масса возможностей попасть внутрь. Весьма гостеприимное место, не так ли?

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

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

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

Главная страница

Главная (или домашняя) страница - это флагман сайта, и ее дизайн должен отличаться от дизайна всех остальных страниц. Конечно, первая и остальные страницы должны быть выдержаны в одном стиле, но есть и различия. Например, на главной странице не должно быть кнопки «На главную» (Ноте), так как не очень-то приятно нажимать на кнопку для того, чтобы попасть на ту же самую страницу. Также на главной странице обычно представлен более крупный логотип компании, ее название и название сайта. Первая непосредственная цель любой главной страницы - ответить на вопросы: «Где я нахожусь?» и «Что делает этот сайт? » - и оба они требуют прямого указания полного имени. Ответы не должны быть представлены в форме устрашающих официальных формулировок, которые можно встретить на чрезмерно бюрократичных сайтах. Лучше, если и по дизайну будет понятно, какой цели может служить этот сайт для нового пользователя.
Для нового пользователя, вероятно, самая важная функция первой страницы - это ответ на вопрос «Что же этот сайт делает?», а для большинства остальных первая страница - отправная точка для навигации по сайту. Обычно эта задача выполняется в виде списка разделов верхнего уровня иерархии, но особенности информационной архитектуры могут потребовать организовать входы верхнего уровня и по-другому.

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

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

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

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

Разработка сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кратность

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