Анализ страниц сайта

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

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

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

Графика

Нет слов, рисунки забавны. Они играют важную роль, нарушая монотонность длинных текстовых страниц. В то же время, графика захватывает значительную долю полосы пропускания линия связи, соединяющей посетителей вашего сайта с Интернетом. Если изображение слишком велико, то его загрузка может длиться нескончаемо долго, и вы рискуете потерять заказчиков, которые вынуждены томиться, ожидая загрузки изображения. Поэтому в отношении графики следуйте таким правилам:
• Сводите использование графики к минимуму. Помимо проблем с полосой пропускания, есть еще несколько причин соблюдать это правило. Графические изображения могут отвлекать внимание, если их слишком много, или они слишком велики, или анимированы. С точки зрения информатики, они намного крупнее текста, поэтому загрузка графики занимает большее время. Разумеется, пока загружается графика, посетители могут просматривать информацию на сайте. Однако если графика играет важную роль или даже необходима для обсуждения или представления данных, это ожидание крайне раздражает.
• По тем же причинам с осторожностью вставляйте любую анимированную графику. Анимации отвлекают внимание, а поскольку они, фактически, представляют собой несколько изображений в одном, анимации значительно замедляют загрузку.
• Проверяйте дважды все изображения и другие файлы, которые используете на своих страницах. Если файлы некоторых изображений, используемых на страницах сайта, будут отсутствовать в соответствующих каталогах сервера Web, ваш сайт будет выглядеть непрофессионально.

Согласно Якобу Нильсену (Jakob Nielsen), автору статьи «Designing Web Usability and Multimedia and Hypertext: The Internet and Beyond» (Практичность применения, мультимедиа и гипертекст в Web-дизайне: Интернет и за его пределами), современные Web-дизайнеры постоянно допускают десять простых, но критических ошибок. Убедитесь, что вы избежали таких подводных камней:

• Блокирование кнопки Back (Назад) браузера, так, что пользователи не могут вернуться к предыдущей странице своего просмотра. Часто дизайнеры делают это, открывая новое содержимое в отдельном окне с помощью директивы refresh, либо препятствуя кэшированию страницы.

• Открытие нового Web-содержимого в отдельном окне браузера, что служит причиной ошибки, описанной выше.

• Использование необычного пользовательского интерфейса, или его несогласованность со стандартами Web. Согласно Нильсену (Nielsen), недостаточная согласованность приводит к тому, что пользователи начинают думать, что они утратили контроль над просмотром сайта, поскольку они не ожидают необычных действий в ответ на традиционные операции. Например, он указывает на использование переключателей в качестве кнопки, хотя традиционно переключатели используются для выбора параметров.

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

• Отсутствие архивированного содержимого. Удаление старого содержимого приводит к появлению недействующих ссылок и снижает практическую полезность Web сайта. По оценке Нильсена (Nielsen), архивирование содержимого может повысить стоимость поддержки сайта на 10%, однако при этом его практическая полезность возрастает на 50%.

• Перемещение страниц, которое вызывает обрыв ссылок на вашу страницу из других сайтов.

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

• Затрата ресурсов на модные украшения сайта, вместо поддержки практически полезного содержимого.

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

• Содержимое страницы напоминает рекламу. Пользователи Web приучились игнорировать баннеры, всплывающие объявления, назойливые анимации и т.п., и проигнорируют содержимое страниц, напоминающих им один из указанных элементов. Читатели с энтузиазмом откликнулись на статью Нильсена (Nielsen), добавив к списку несколько собственных любимых мозолей:

• Экранные заставки.

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

• Ссылка на файлы, формат которых отличен от HTML- например, PDF и другие форматы документов - без предупреждения пользователей о новом формате содержимого.

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

• Отсутствие контактной информации на каждой странице.

• Плохая работа клавиши Р. ТаЬ I в формах, обычно из-за ссылок между элементами ввода данных.

• Помещение всего содержимого в сложную таблицу, загрузка которой занимает значительное время. Суть дела в том, что браузеры могут не отобразить содержимое таблицы до тех пор, пока не загрузятся все теги таблицы. Более подробно об удобстве и практичности Web-страниц можно узнать на сайте http://www.useit.com.

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

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

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

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

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

• В большинстве случаев фоновая музыка встречается на личных или не профессионально спроектированных страницах, и используемый формат звука- по большей части MIDI - раздражает уже после нескольких минут циклического проигрывания. Сколько раз вы встречали профессиональные коммерческие сайты - исключая, разумеется, специализированные музыкальные сайты - «улучшенные» музыкой или фоновым звуком? Ручаемся, что немного, и тому есть основательная причина - такой сайт не профессионален.

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

Одностроничные сайты

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

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

Анализ пользовательского интерфейса

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

• Какова основная цель вашего сайта? Каким вы хотите его видеть - забавным? Информативным? Интерактивным? Должен ли сайт работать в режиме реального времени?

• Какие типы компьютеров используют посетители сайта? Есть ли среди них устаревшие системы с малыми мониторами и медленными соединениями с Интернетом? Либо они работают на мощных, современных компьютерах, и, следовательно, рассчитывают, что ваш сайт полностью раскроет преимущества их систем?

• Велик ли опыт работы в Web ваших посетителей? Если вы используете карту сайта, то смогут ли они разобраться в ней? Нужно ли приложить к карте сайта текстовые ссылки на разные области сайта?

•Позволяет ли структура страницы легко находить любую нужную информацию?

• Проверена ли страница в различных браузерах и системах?

*Хорошо ли поддерживается выбранный формат каждой системой?

Полосы прокрутки

Убедитесь, что каждая страница требует минимальной прокрутки. Ниже мы обсудим два типа прокрутки: по вертикали и по горизонтали. • Если заставить посетителей прокручивать страницу экран за экраном (вертикальная прокрутка), то они покинут эту страницу и, возможно, этот сайт. Если для просмотра всей страницы нужно прокрутить содержимое более чем на два экрана, то за редким исключением ваши страницы требуют переделки. В целом, вертикальная прокрутка свидетельствует о том, что вы поместили слишком много информации на одну страницу. • Другой тип прокрутки, который можно иногда встретить, это горизонтальная прокрутка. На горизонтальную прокрутку наложено табу, хотя некоторые сайты не придерживаются такой тактики. Горизонтальная прокрутка допустима только в случаях,когда для этого есть особые причины - чаще всего это использование таблиц. Если дизайнер задаст не относительный, а абсолютный размер таблицы, то страница может потребовать прокрутку. Например, вы можете внести следующее изменение в ваш код HTML: Замените этот атрибут (абсолютный размер таблицы): TABLE WIDTH="650" Этим атрибутом (относительный размер таблицы): TABLE WIDTH="75%" • Если задать ширину таблицы атрибутом WIDTH с абсолютным значением, то ширина страницы будет равна указанному числу пикселов. Если же задать ширину таблицы атрибутом WIDTH с относительным значением, то страница будет подстраивать свой размер к отображению в конкретном браузере. Потребовав, чтобы размер таблицы определялся в процентах, а не конкретным числом пикселов, вы избежите «прокручивания вправо», которое может случиться при использовании параметра абсолютного размера. Иногда, по эстетическим соображениям, необходимо устанавливать абсолютный размер страницы, удовлетворяющий наименьшему общему знаменателю. Убедитесь, что страница видима без прокручивания на небольшом мониторе.

Ссылки

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

Контроль ссылок на внешний мир.

Когда вы ссылаетесь на какой-либо объект, находящийся вне вашего сайта, вам, возможно, понадобится открывать эти объекты в новом окне. Иными словами, вы можете создать такую ссылку: <А HREF="http://www.nolongermysite.com" TARGET="_blank">Leave My Site

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

Включение ссылок в текст.

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

• По мнению критиков со всего мира, наши товары лучше всех. «Щелкните здесь!»

• Критики говорят, что наши товары лучше всех! И вот почему.

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

Избегайте мертвых ссылок

Вы должны периодически просматривать страницы и отыскивать в них оборванные ссылки. Оборванные ссылки впустую отнимают время у ваших посетителей и создают впечатление, что сайт обслуживается небрежно и редко. Помните также, что когда вы перестраиваете сайт, ссылки на ваши страницы из внешних сайтов будут по прежнему показывать на вашу первоначальную страницу. Всегда удаляйте ссылку, либо перенаправляйте ее с исходной страницы в новое местоположение. Это надо сделать не только для главной страницы, но и для всех страниц сайта, поскольку большинство людей будут заходить на конкретные страницы сайта. И если ваши потенциальные посетители, щелкнув на ссылке, увидят страницу с сообщением 404 File Not Found (404 Файл не найден), можете считать их потерянными. Однако если у вас есть возможность установить собственную страницу 404 File Not Found (404 Файл не найден) (это та страница, которую выводит Web-сервер, когда не способен открыть запрошенную страницу), то обязательно сделайте это. С помощью этой страницы вы сможете перенаправлять посетителей на главные области сайта, уменьшая вероятность окончательного ухода посетителя.

Цвета

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

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

Насколько эффективны фреймы?

Используя фреймы, вы должны строго следовать этикету. Фреймы открывают такие возможности манипулирования страницами, которые недоступны для таблиц, но они же могут вызывать некоторые опасения у посетителей. Если вы используете ссылки на внешние сайты, вы должны, ради любезности, использовать параметр TARGET со значе- нием top. Это заставляет ссылку открываться в вашем главном фрейме, то есть, по суще- ству, отбрасывать ваши фреймы. Многие люди считают фреймы злом, поскольку создатели сайтов, использующие фреймы, обычно не соблюдают нормы этикета. Некоторые браузеры не поддерживают фреймы, поэтому их пользователи иногда будут открывать пустые страницы, поскольку Web- дизайнер пренебрег тегом NOFRAMES. Кроме того, страницы с фреймами невозможно пометить закладкой, поскольку закладка будет ссылаться только на заданные по умолчанию страницы для воспроизведения фреймов. Наконец, некоторые браузеры не способны печатать страницы с фреймами. В некоторых случаях, когда дизайнер страницы не учел сужение области просмотра (или использование мониторов с малыми экранами), фреймы могут затруднять навигацию и даже мешать просмотру информации. В Web очень важно обеспечить просмотр всех страниц с фреймами в любом возможном браузере и в любой системе. Попросите других людей просмотреть и оценить эти страницы. Возможно, вас поразит число людей, которые не могут толком рассмотреть ваше детище.

Конструкция страниц

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

Пользовательский интерфейс.

 Как вы взаимодействуете с посетителями вашего Web-сайта?

Какой формат вы используете для передачи/приема информации и удержания посетителей на своем сайте?

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

Какие типы UI следует принимать во внимание?

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

Карта ссылок

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

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

Фреймы

Фреймы, подобно картам ссылок, коварные создания. Они могут обеспечить прекрасную навигацию по сайту, а могут и доставлять головную боль обслуживающему персоналу, запутавшемуся в своих фреймах, либо даже возможным заказчикам, браузеры которых не поддерживают фреймы.
Как поступить Web-дизайнеру?
Если вы решите использовать фреймы в конструкции страницы, соблюдайте осторожность. Вставляя ссылку на объект вне вашего сайта, используйте параметр TARGET со значениями _top или _blank. Это гарантирует загрузку новой страницы вне фреймов. Возможно, у вас есть причины удерживать посетителей в ваших фреймах, но имейте в виду, что для хорошего обслуживания потребителей сайт должен быть дружественным к посетителю, а блокирование посетителей во фреймах, несомненно, рассматривается как объявление войны. Еще раз напоминаем, не все заказчики используют новейшие версии браузеров Internet Explorer или Netscape в системах Windows или Macintosh, а некоторые браузеры даже не поддерживают фреймы. Поэтому, чтобы не терять заказчиков, используйте тег

Эстетичность

Что определяет эстетичность Web-страницы?

Очевидно, мы должны снова обратиться к аудитории, для которой предназначена эта страница. Например, то, что понравится детям, взрослым людям может прийтись не по вкусу. Вот некоторые ключевые вопросы, которые следует обдумать:
• Есть ли на странице свободное место, или она сплошь загромождена цветом, текстом и изображениями?
• Приятно ли глядеть на эту страницу, или она не вызывает никаких чувств?
• Разумеется, значительная прокрутка страницы нежелательна, но стоит ли ради ее исключения уплотнять содержимое в небольшой области страницы? Может быть, лучше разделить информацию?
• Насколько привлекателен дизайн страницы, захотят ли посетители просмотреть ее целиком? Или же все содержимое сконцентрировано в одной области?
• Есть ли на странице ссылки? Гармонируют ли цвета ссылок с выбранной цветовой схемой? Не мешают ли подчеркнутые ссылки просмотру?
• Удобочитаем ли шрифт? Размер шрифта должен быть достаточно велик, чтобы прочитать его мог любой посетитель, но и не настолько большим, чтобы удлинить страницу сверх меры. Кроме того, шрифты должны поддерживаться всеми браузерами, и их мог читать любой посетитель (помните, что сеть Web интернациональна).

Интерактивные возможности

Способность к интерактивности, т.е. к обратной связи с аудиторией в режиме реального времени - это лучшее, что есть в бурно растущей сети Web. Деловые сайты не имеют права пренебрегать теми выгодами, которые несут такие технологии, как формы, сценарии, элементы ActiveX, апплеты Java и т.д. Если ваша страница позволяет пользователям общаться с вами и друг с другом, то посещаемость сайта начнет расти. Но опять же, все хорошо в меру. Если вы перестараетесь с интерактивностью, сайт утратит свою привлекательность, поскольку станет слишком сложным или бесполезным. Хорошее практическое правило состоит в том, что на одной странице допустимо использовать только один, самое большее, два, инструмента интерактивного взаимодействия. Это сводит к минимуму активность на каждой странице, и ваш пользователь не будет отвлекаться от содержимого. Еще одна потенциальная ловушка, связанная с интерактивными страницами, заключается в замедлении загрузки. Сценарии, апплеты, предварительная обработка страниц и так далее, могут значительно удлинить загрузку вашей страницы. Вряд ли вашим пользователям понравится ожидать загрузки всей страницы из-за какого-то апплета, который может быть даже бесполезным для содержимого страницы. Какого рода интерактивные средства вы можете использовать? Мы предлагаем вам список потенциально возможных родов деятельности, которые могут заинтересовать вашу аудиторию:

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

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

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

Доска объявлений

Может по совместительству использоваться как гостевая книга.

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

• Дискуссии дают возможность получать отзывы посетителей о вашем сайте, а заодно и советы по его улучшению.

Конструирование страницы

Если вы еще не создали свой сайт, либо задумали его перестройку, анализ дизайна стра ницы можно начать с вычерчивания страницы на листе бумаги. Такой чертеж позволит вам уяснить, какую страницу вы планируете создать, и с этого момента создание прототипа страницы будет детской забавой (особенно если для проектирования использовать некоторые дополнительные средства редакторов HTML). Более того, рисунок страницы помогает обнаружить всевозможные ловушки еще до того, как вы затратите время на создание страниц и заполнение их содержимым. Что мы имеем в виду под вычерчиванием? Вы можете оценить размер графических изображений и объем текста, которые можно включить в страницу, и так далее. На этом этапе вы можете даже применить к тексту цвета и убе- диться, что ваш сайт не войдет в число тех сайтов, которые «лучше всего смотрятся в солнцезащитных очках».

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

Включение контактной информации

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

Проблемы авторских прав

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

Анализ сайтов конкурентов

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

• Просмотрите общую структуру страниц. Привлекательна ли эта страница, побуждает ли она просмотреть все содержимое или только конкретные области, оставляя в тени другие важные элементы?

• Какого рода интерактивные средства предоставляют эти сайты (если предоставляют вообще)?

• Эффективна ли графика страниц? Если да, то какого она рода и как часто используется?

• Есть ли на странице что-нибудь такое, что отвлекает посетителя от содержимого? Нет ли там такого, что послужит вам примером эффективного использования дизайна страниц?

• Каково время загрузки страницы?

• Есть ли на каждой странице контактная информация? Если да, то какого рода эта информация, каков ее формат (адреса электронной почты, сценарий, форма)?

• Можете ли вы за несколько секунд легко найти информацию, нужную вам на этой странице?

Одностраничные сайты 

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

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

Анализ пользовательского интерфейса

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

• Какова основная цель вашего сайта? Каким вы хотите его видеть - забавным? Информативным? Интерактивным? Должен ли сайт работать в режиме реального времени?

• Какие типы компьютеров используют посетители сайта? Есть ли среди них устаревшие системы с малыми мониторами и медленными соединениями с Интернетом? Либо они работают на мощных, современных компьютерах, и, следовательно, рассчитывают, что ваш сайт полностью раскроет преимущества их систем?

• Велик ли опыт работы в Web ваших посетителей? Если вы используете карту сайта, то смогут ли они разобраться в ней? Нужно ли приложить к карте сайта текстовые ссылки на разные области сайта?

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

Инструментарий для разработки

До недавнего времени текст Web-страниц на языке HTML писали в обычных текстовых редакторах. Простейшим средством и сейчас остается Notepad («Блокнот») — стандартная программа Windows. Современные системы для создания Web-страниц можно разделить на два типа. К группе визуальных, или WYSIWYG-редакторов (What You See is What You Get — что видите, то и получаете) относятся те, в которых Web-страницы сразу представляются наглядно, по мере перетаскивания на них форм, ссылок, ввода текста, а формирование кода происходит «за кадром». Они ориентированы на рядовых пользователей. Подобно Microsoft Word, в окне формируется сама страница, на которой нужным шрифтом печатается текст необходимого размера, перетаскиваются кнопки, располагаются и масштабируются картинки. В данном случае для создания Web-страниц знание HTML фактически не нужно, поскольку редактор автоматически переводит страницу в коды. Уже упомянутый Word, в частности, позволяет преобразовывать набранные документы в Web-страницы.
Профессиональные дизайнеры редко пользуются услугами подобных систем, поскольку «смотреть без слез на творчество таких редакторов невозможно». Результирующие коды громоздкие, избыточные, трудночитаемые и часто малоэффективные. Однако подобные программы могут с успехом использовать те, кому необходимо сверстать несколько страниц, не углубляясь в тонкости кода. Среди таких редакторов:
» Front Page(http://www.microsoft.com/frontpage/, в состав Internet Explorer входит усеченная версия — Front Page Express);
» DreamWeaver (http: //www.macromedia.com/software/dreamweaver/); » Composer в составе Netscape Communicator;
» WSC'sAmaya; » HomeSite (http: //www.allaire.com/);
» HTML Pad (http://www.book.ru/snk/),и многие другие, которые появляются сейчас, как грибы после дождя.
Редакторы второго типа — текстовые, в которых непосредственно редактируется код. Для работы в них необходимо знание языка HTML. Смотря на код, вы не сможете представить, как будет выглядеть будущая страница. Чтобы такое представление получить, по мере написания ее нужно периодически загружать в браузер. Кроме уже упоминавшегося Notepad, для написания кода подойдет и универсальный редактор из Visual Studio, специализированные редакторы Visual HTML Workshop, HotDog и т.д. За качество страницы здесь отвечает сам дизайнер, а редакторы отличаются лишь набором вспомогательных функций, позволяющих выделять цветом команды, задавать шаблоны страниц, быстрее расставлять ссылки, открывать одновременно несколько файлов и т.п. Созданную страницу необходимо разместить на сервере своего Интернет-провайдера или на том сервере, который предоставляет вам такую возможность. Личные страницы, например, можно располагать бесплатно на сервере www.geocities .com. Если вы знакомы с FTP-сервисом, то можете воспользоваться любой программой FTP-клиентом*. К ним относятся FAR, Windows Commander, ftp.exe (входит в комплект стандартных программ Windows и находится в директории windows или аналогичной). Специализироваными программами для разработки Web-страниц, внимательно изучите меню. Очень часто в них можно обнаружить функцию для пересылки (online-публикации) Web-страниц на сервер. Особенно удобны подобные программы при регулярном обновлении сайта, поскольку многие операции автоматизированы. Если вы планируете размещать на своих страницах рисунки, то для этого необходим один из графических редакторов, который может создавать файлы для Web-страниц (обычно в форматах GIF,JPG, PNG, поддерживаемых самим браузером).