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

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

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

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

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

Информационное наполнение Web-страниц.

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

Пользователь получает информацию, считывая ее с экрана, поэтому основным элементом системы вывода является форма предъявления информации пользователю (форма выдачи).

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

Бегущие по экрану строки при выводе больших сообщений создают неудобство для пользователя. Сдвиг (перемотка) изображения утомляет зрение, заставляет фиксировать внимание на отдельных строках вместо более правильной ориентации на экран в целом, не позволяет вернуться к уже прочитанным строкам, создает напряженность в общении из-за необходимости сосредотачиваться на второстепенных деталях общения (например, на стремлении одновременно нажать две клавиши СТЯЬ+б для остановки экрана), отвлекаясь от главного. Поэтому, при выводе больших объемов информации, выдача должна разбиваться на кадры (страницы), содержащие изображение, заполняющее сразу весь экран сверху донизу, с предварительной его очисткой от ненужных, лишних фрагментов "старых" сообщений. Разбиение на кадры обеспечивает четкую границу между старым и новым изображением, меньше утомляет глаза, не отвлекает пользователя от решения основной задачи. После вывода кадра программа должна всегда выдержать паузу.

Структура выводимых кадров зависит от их функционального назначения. Весь процесс может быть построен на использовании 8 типов функциональных элементов:

1) элемент вывода информации;

2) элемент ввода информации;

3) элемент контроля и коррекции ввода;

4) элемент управления диалогом;

5) элемент трассировки диалога;

6) элемент объяснения, содержащий ответы на вопросы пользователя типа "Как?" (это получено), или "Почему?";

7) элемент помощи пользователю;

8) элемент обучения работе с системой.

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

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

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

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

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

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

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

6. Выводимую на экран информацию необходимо разбивать на классы, отводя каждому классу свою зону кадра:

- заголовок кадра желательно помещать в середине верхней строки;

- область данных, предназначенную обычно для выводимого текста, чисел, графиков, желательно располагать в средней части экрана (в его “золотом сечении”);

- область ввода, содержащая подсказки ввода и поля - приемники информации, может располагаться в любой части кадра;

- область управления, содержащая меню и подсказки управления, может располагаться в любой части кадра, желательно - наименее информативной;

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

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

7. Если система использует несколько видов кадров, имеющих различные форматы, то при наличии в них однотипных данных, эти данные должны в разных типах кадров располагаться одинаково.

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

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

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

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

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

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

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

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

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

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

2) Что лучше применять: темные символы на светлом фоне, или светлые - на темном? Практика показывает, что этот выбор необходимо осуществлять с учетом освещенности места, в котором находится дисплей.

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

В светлом помещении легче воспринимаются темные знаки на светлом поле.

3) Цветовой фон играет вспомогательную, а не основную роль.

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

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

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

Таблица. 5. Наиболее рациональные сочетания цветов 7) Различные сочетания цветов можно использовать в разных частях программ, чтобы помочь пользователю лучше в них ориентироваться - это так называемое “цветовое кодирование” информации.

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

9) Если есть хоть тень сомнения в правильности подбора сочетания цветов, такие сочетания лучше отвергнуть. Неквалифицированное владение цветом часто не облегчает, а затрудняет чтение кадра и приводит к быстрому утомлению зрения.

К специальным эффектам, реализуемым в большинстве систем относятся:

- режим инверсии (если основной режим: светлые символы на темном фоне, то режим инверсии - темные символы на светлом фоне);

- режим подчеркивания (когда выводимое в этом режиме на экран сообщение автоматически подчеркивается);

- режим мигания;

- режим повышенной яркости.

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

Использовать специальные эффекты можно не только порознь, но и в различных комбинациях. Но при этом необходимо помнить, что режим отображения сам является информационным кодом, т.е. сам несет некоторую информацию. А пользователю трудно держать в уме больше 5 - 7 различных кодов.

Рекомендации по использованию специальных эффектов:

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

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

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

4) Режим повышенной яркости по силе действия находится на втором месте после мигания. При неумелом использовании он так же может отвлекать внимание пользователя от других частей сообщения.

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

5) Режим подчеркивания необходимо использовать для выделения отдельных слов или фрагментов выводимого текста.

6) В печатном тексте подчеркивание и яркость имеют то же значение, что и при выводе на экран. Инверсия соответствует курсиву. Мигание не имеет общепринятого аналога.

⇐Выбор средств создания web-сайта | Интернет-технологий для бизнеса | Особенности отобpaжения текста и чисел да экpaне.⇒