Концептуальное проектирование Web-представительства
В результате концептуального проектирования прорабатываются следующие вопросы:
- Структура и состав информации на сайте;
- Способы привлечения внимания клиентов;
- Способы удержания внимания посетителей сайта;
- Способы повторного привлечения на сайт;
- Стиль сайта, общий тон;
- Угол зрения при подаче информации.
Основная цель Web-сайта - превратить посетителей в клиентов, а разовых клиентов - в постоянных. Общие принципы, выдерживаемые для этого при создании и ведении Web-сайта могут быть сформулированы следующим образом:
- для привлечения и удержания клиентов на Web-сайте обязательно надо предоставлять набор бесплатных услуг, не связывая это с предшествовавшей покупкой.
- на Web-сайте должна быть предусмотрена служба новостей и автоматизированного оповещения клиентов о новых изделиях и услугах компании.
- на сайте должна быть представлена более детальная информация о продукции фирмы, чем это принято в аналогичных сайтах.
- обязательна публикация бесплатной справочной информации по ремонту и обслуживанию продаваемых товаров.
- конструкция Web-сайта должна предоставлять клиентам компании возможность осуществлять информационный поиск посредством "дружественного интерфейса", в котором система помощи должна быть доступна на всех этапах работы.
- основной режим работы на сайте должен быть - максимально персонализированный диалог.
- работа сайта должна быть организована таким образом, чтобы у клиентов появилось желание рассказать о нем своим друзьям.
- каждый клиент должен помнить: обратись он к сайту в любой момент, он всегда получит либо товар, либо услугу, либо информацию о возможности их получить на других сайтах.
Web-сайт представляет бизнес. Поэтому, он должен выглядеть так, чтобы заказчикам было максимально удобно работать с ним.
При проработке структуры сайта и состава информации на нем необходимо предусмотреть отсутствие отказов пользователю в предоставлении информации, иначе он уйдет к другим. Поэтому на действующих сайтах не должно быть надписей типа: "Извините, этот раздел находится в проработке".
Сайт должен выглядеть задуманным образом независимо от браузера, его версии, или на какой платформе он работает. Это сложная задача, так как единого стандарта не существует. Различные версии Web-браузеров поддерживают одинаково лишь самые простые конструкции языка HTML.
А это значит, что в Web-сайте, ориентированном на массового клиента, использующего различные типы браузеров, их версии, работающих на разны платформах (UNIX, MS DOS, Windows,...), не должно использоваться сложных конструкций языка HTML, а каждый документ должен быть в основном - текстовым. Можно, правда, создавать Web-сайт в нескольких версиях - под разные браузеры, платформы, ..., и предоставлять пользователю на Home pages возможность выбора версии.
Но обслуживание такого сайта значительно осложнится.
Для привлечения внимания клиента, начиная с первых секунд работы с сайтом, он должен быстро загружаться и содержать актуальную для клиента информацию, представленную в виде интересных для клиента элементов стиля.
Немаловажное значение для удержания внимания клиента представляет процедура просмотра сайта - клиенты должны иметь возможность найти ту информацию, которая их интересует, масимально простым и удобным для них способом. Поэтому просмотр сайта должен быть простым и интуитивно понятным. Если необходимая информация найдена, она должна легко восприниматься. Недопустимы сплошные длинные страницы однообразного текста на нечитаемом фоне.
Текст должен быть структурирован, содержать много заголовков, выделений, оттененных фрагментов, просмотрев которые можно быстро выбрать -что представляет интерес для полного прочтения. Композиция документа, подбор шрифтов и кегля, цвет фрагментов, формат текста -должны способствовать удержанию внимания.
После просмотра сайта у клиента должно возникнуть желание вернуться на него еще раз, и желание рассказать своим знакомым, как там было интересно. О сайте должны заговорить.
Для этого важно, чтобы на сайте содержалась новая, актуальная, достоверная информация. Но этого мало. Сайт должен представлять собой больше, чем обычную брошюру в режиме ON-LINE.
У клиента обязательно должна быть возможность воспользоваться полученной информацией, что-то сделать на ее основе: поиграть, заказать, купить или арендовать...
Информация должна подаваться в интерактивном режиме в виде текста, аудиозаписей, видеороликов. Клиент должен иметь возможность учавствовать в выборе способа представления информации, иметь возможность высказать свое мнение, задать вопрос и получить ответ на него.
Клиент должен видеть, что высказанное им мнение учтено (например, при обновлении сайта).
Большое значение имеет бережное отношение к новичкам, к тем, кто чувствует себя неуверенно в рассматриваемых проблемах. Для них на многих сайтах организуется служба FAQ (часто задаваемых вопросов) с ответами на них администрации сайта или более опытных пользователей.
Чтобы сайт стал интересным для клиентов, он должен содержать комплекс услуг. Если сайт создается с целью бизнеса, то для его завершенности необходимо дать не только каталог предложений фирмы (и необходимую сопутствующую информацию), но и дать возможность посетителю заказать интересующий его товар или услугу, сделать покупку в режиме реального времени.
Обратная связь позволит выяснить, что еще интересно и нужно клиентам.
Успех сайта зависит от того, насколько четко, ясно, сконцентрированно дается информация. Пользователь не должен теряться в догадках о ее смысле.
В мире существует немало сайтов с похожими материалами. Создаваемый сайт должен быть уникальным и авторитетным.
Сайт должен располагать уникальными ресурсами - не только текстов: графические материалы, звуковое сопровождение, позволяют сделать основное сообщение более наглядным и привлекательным.
Авторитетность сайта формируется за счет достоверности информации, ее безошибочности. Публикуемые данные могут иметь разную степень достоверности - посетителя надо информировать о статусе данной информации.
За неофициальную информацию (с предупреждением об этом) держатель сайта ответственности не несет, и посетитель сам решает, верить ей или нет. Основные же документы всегда должны иметь официальный статус, а следовательно - должны быть выверены и абсолютно достоверны.
Для создания привлекательности сайта большое значение имеет грамотное использование гипертекста. На основных окнах (страницах) дается основная информация (например, каталог предложений фирмы), а за счет гипертекстовых ссылок предоставляется дополнительная, сопутствующая информация. Причем, сопутствующая информация может содержаться не обязательно на создаваемом сайте - ссылки можно давать и на сайты-аналоги (но при этом надо учитывать, что такой ссылкой клиент уводится с данного сайта на сайт-аналог).
Однако, такие ссылки должны быть подчинены общей идее - поэтому при разработке сайта после определения целей и аудитории, выбора угла зрения и общего тона, должен быть определен состав информации, и проведено ее структурирование. Именно в процессе структурирования и решается вопрос - надо ли повторять то, что есть на других сайтах, или достаточно сделать ссылки на сайты, содержащие необходимые сведения.
Web-сайт - это электронное средство массовой информации (СМИ), и как и все остальные СМИ, должен иметь свое лицо, свой стиль. Для разработки стиля крупные фирмы привлекают не только специалистов в области компьютерных технологий, но и дизайнеров, стилистов, специалистов по Public Relations, и др.
Стиль сайта характеризуется манерой подачи материала, элементами оформления, принципами использования цвета, звука, графики, анимации.
Манера подачи материала может быть, например, такая:
- сначала о главных темах, затем - подробнее о каждой из них. Многие газеты в начале каждого текста дают резюме - о чем в дальнейшем будет идти речь. Поэтому, читать весь материал не надо -смысл его понятен только из резюме, которое составляется из фраз, вырезанных из дальнейшего текста;
- художественный - в виде рассказа, основной смысл которого содержится только в конце (яркий пример - короткие рассказы А.П.Чехова, например, "Сказка", или "Без заглавия");
-телеграфный стиль - короткие рубленные фразы, только факты,
без дополнительных пояснений.
Элементы оформления включают в себя вид экрана, количество и расположение открытых на нем окон (например, в виде "каскада", "мозаики" или "рабочего стола" с набросанными на него друг на друга листами документов, и т.д.), вид, структура и расположение навигационного меню, способ отображения гиперссылок, соотношение размеров шрифтов заголовков и основного текста, цветовая гамма, количество, расположение и способ активизации мультимедийных элементов, и т.д.
Однажды выработав стиль сайта, необходимо всегда жестко его придерживаться - пользователь быстро привыкает к стилю, не осознавая даже его особенностей, и болезненно воспринимает отклонения от него.
Одними из лучших являются в этом плане сайты фирм IBM и Sylicon Graphics.
Выбор средств создания Web-сайта
Для создания Web-сайта и его эксплуатации необходиы программное обеспечение и технические средства, выбор которых должен обеспечить реализацию целей, стоящих перед Web -представительством.
Разработка структуры сайта. Конструирование Web-страниц.
Каждая Web - страница являетсяя программным модулем, написанным как минимум на языке HTML. Может включать и другие программные модули, которые могут располагаться на той же Web -странице, или в других файлах.
При разработке структуры их взаимосвязь отображается на схеме взаимосвязи программных модулей и информационных файлов.
Гиперссылки аналогичны операторам перехода в программах. Они не являются самостоятельным фигурантом на схемах, а относятся к навигации, т.е. характеризуют способ управления сайтом (типа меню).
Информационная структура сайта отображается в виде схемы, содержащей состав Web - страниц и их связи с используемыми на этих страницах информационными файлами.
Характеристика нормативно-справочной, входной, оперативной и результатной информации при разработке структуры сайта даются в виде таблиц, содержащих реквизиты документов с их характеристиками.
Информационное наполнение Web-страниц.
К моменту начала информационного заполнения Web-сайта состав необходимой информации уже определен, информация
структурирована. Осталось только набрать ее в соответствующих окнах.
Привлекательность сайта, его эффективность в значительной степени зависят от расположения информации на экране, примененных средств выделения, отсутствия ошибок. В процессе информационного заполнения Web-сайта решаются следующие задачи: проектирование формата кадра; выделение таиболее инфоpмaтивных его чaстей; выбор цвета фи выводе изобpaжения та экpaн; применение специтаьных эффектов. Необходимо учитывать особенности отобpaжения текста и чисел та экpaне, применять различные методы конфоля вводимых дaнных.
Поскольку вывод информации можно производить в двух режимах: покадровом, и в режиме скроллинга, необходимо знать их достоинства и недостатки для осознанного использования при информационном заполнении Web-сайта.
Пользовлгель получaет инфоpмaцию, счить^я ее с экрана, поэтому основным элементом системы вывода является фоpмa предъявления информации пользователю (форма выдачи).
На первом этапе создания системы спланировать все подробности, детали каждого выводимого на экран сообщения, невозможно. Но проектирование макетов вывода нужно выполнять по возможности более полно с самых ранних стадий их создания.
Бегущие по экрану строки при выводе больших сообщений создают неудобство для пользователя. Сдвиг (перемотка) изображения утомляет зрение, заставляет фиксировать внимание на отдельных строках вместо более правильной ориентации на экран в целом, не позволяет вернуться к уже прочитанным строкам, создает напряженность в общении из-за необходимости сосредотачиваться на второстепенных деталях общения (например, на стремлении одновременно нажать две клавиши CTRL+s для остановки экрана), отвлекаясь от главного. Поэтому, при выводе больших объемов информации, выдача должна разбиваться на кадры (страницы), содержащие изображение, заполняющее сразу весь экран сверху донизу, с предварительной его очисткой от ненужных, лишних фрагментов старых сообщений.
Разбиение на кадры обеспечивает четкую границу между старым и новым изображением, меньше утомляет глаза, не отвлекает пользователя от решения основной задачи. После вывода кадра программа должна всегда выдержать паузу.
Структура выводимых кадров зависит от их функционального назначения. Весь процесс может быть построен на использовании 8 типов функциональных элементов:
1) элемент вывода информации;
2) элемент ввода информации;
3) элемент контроля и коррекции ввода;
4) элемент управления диалогом;
5) элемент трассировки диалога;
6) элемент объяснения, содержащий ответы на вопросы пользователя типа Как? (это получено), или Почему?;
7) элемент помощи пользователю;
8) элемент обучения работе с системой.
Каждый из перечисленных элементов имеет свои особенности в построении кадров, размещении информации, и др. Последние четыре элемента функционально отличаются от первых, но по форме, по способу использования экрана идентичны им.
Поскольку проектирование кадра - процесс творческий, не следует искусственно подгонять все кадры под одну схему. ^обходимо стараться лишь выдерживать общие рекомендации, сформированные на основе накопленного опыта работы с диалоговыми системами:
1. Основное назначение каждого кадра - приносить пользу: передавать информацию (о результатах работы системы, о введенных пользователем данных, о желательной реакции пользователя, и т.д.). Не следует применять кадры, не приносящие пользы, отвлекающие от основной цели диалога.
2. Если в одном кадре встречается информация различных типов, желательно размещать ее в разных зонах, снабжая каждую зону соответствующим заголовком (иначе трудно будет разобраться в том, что где изображено).
3. Разделение на зоны может быть выполнено по-разному. Например, можно на границе зон провести линии, но можно разделять зоны и пробелами (их количество в этом случае должно быть не меньше двух). Кроме того, зоны можно выделять цветом. При этом не понадобятся разделительные линии, которые занимают место на экране.
Цвета надо подбирать так, чтобы различные зоны имели примерно одинаковую яркость и контрастность, и чтобы на границах зон не образовывались дополнительные цветовые элементы из-за наложения цветов.
4. При проектировании формата кадра необходимо пользоваться матрицей, сделанной на бумаге (пустографку можно приготовить и на компьютере). Строки и столбцы матрицы должны быть пронумерованы - для этого лучше использовать крайний правый столбец и нижнюю строку.
5. Каждый вводимый кадр необходимо помечать, помещая в его верхней части заголовок. Заголовок желательно выделять, чтобы сразу было видно, с какой информацией имеет дело пользователь.
6. Выводимую на экран информацию необходимо разбивать на классы, отводя каждому классу свою зону кадра:
- заголовок кадра желательно помещать в середине верхней строки;
- область данных, предназначенную обычно для выводимого текста, чисел, графиков, желательно располагать в средней части экрана (в его "золотом сечении");
- область ввода, содержащая подсказки ввода и поля - приемники информации, может располагаться в любой части кадра;
- область управления, содержащая меню и подсказки управления, может располагаться в любой части кадра, желательно - наименее информативной;
- область сообщений, содержащая предупреждения, информацию о состоянии программы и др., может располагаться в любой части кадра.
Существует лишь одно обязательное правило: заголовок должен располагаться вверху, а данные - ниже. В остальном кадр проектируется так, чтобы быть удобным пользователю.
7. Если система использует несколько видов кадров, имеющих различные форматы, то при наличии в них однотипных данных, эти данные должны в разных типах кадров располагаться одинаково.
8. В сложных диалоговых системах может появиться необходимость часть информации держать на экране длительное время, тогда как в свободной части экрана информацию менять. В этом случае кадр целесообразно формировать из нескольких форм, каждая из которых занимает лишь часть экрана.
Форма, содержащая постоянную информацию, может быть вызвана на экран в начале программы. Остальные формы будут вызываться в соответствующую часть экрана по мере необходимости.
Этот режим позволяет реализовать на экране т.н. окна.
Наиболее информативные части кадра могут быть выделены различными изобразительными средствами. Так, художникам известно, что различные участки полотна (а в нашем случае - экрана) глаз человека воспринимает по-разному.
Поэтому, наиболее существенные детали всегда помещаются посередине, а менее существенные -сдвигаются ближе к краю.
(Обратите внимание: подсказки, вспомогательные меню и другая вспомогательная информация в большинстве пакетов прикладных программ выводится в самой нижней или самой верхней части экрана. Но в верхней строке меню (подсказка, сообщение) менее заметно, чем в нижней, труднее воспринимается).
Наиболее важные части сообщения можно набрать строчными буквами, вразрядку, оттенить, используя разные цвета, набрать с измененным межстрочным интервалом. Но существуют и специальные средства, позволяющие дополнительно выделять разные части сообщения.
Такие средства позволяют вызвать при выводе изображения на экран специальные эффекты: инверсия, подчеркивание, мигание, измененная яркость, и их различные комбинации.
Для представления информации на экране ПЭВМ требуется, как минимум, два цвета - один основной, и один фоновый. Казалось бы, при информационном наполнении Web-сайта можно воспользоваться любой парой цветов, воспроизводимых оборудованием и различаемых пользователем. Но на самом деле это не так.
Пользователь обычно всю информацию от ЭВМ получает через зрение. И если цвета подобраны неверно, приходится напрягать зрение, в результате чего глаза быстро устают, резко увеличивается количество допускаемых в работе ошибок, значительно снижаются производительность труда и время реакции пользователя.
Для различения выводимых на экран символов (графиков, диаграмм) между цветом символов и цветом фона должен быть контраст. Сильный контраст облегчает чтение.
Высококонтрастное изображение (например, черное на белом или белое на черном) воспринимается легче, чем низкоокнтрастное (например, голубое на синем), но сильный контраст утомляет зрение. Необходимо так же учитывать наличие дальтонизма (ослабленное различение цветов), которое встречается у людей довольно часто.
Кроме того, разработанное для цветного дисплея изображение может оказаться совершенно невоспроизводимым на ЭВМ, имеющей монохромный дисплей, так как некоторые цвета на монохромном дисплее сливаются с фоном, и поэтому невидимы.
Выбор цвета фона и символов не может быть произвольным. Выбор цветов должен производиться с учетом конкретных условий, при этом от человека, создающего систему, требуется не только наличие художественного вкуса, но и развитое чувство меры.
Различных сочетаний цветов фона и знаков много, но среди них есть недопустимые, благодаря чему их арсенал сильно сокращается. Рассмотрим основные принципы выбора цветов.
1) Пары цветов фона и знаков необходимо подбирать экспериментально с учетом конкретных условий. Общая рекомендация -не увлекаться использованием цвета, используя для вывода основной информации лишь два цвета: черный и белый.
Другие цвета рекомендуется использовать лишь как вспомогательное средство, для достижения побочных целей (если главная цель - вывод основной информации, то побочными могут быть: отделение основной информации от дополнительной, поиск на экране необходимой информации (разделение различных видов информации), создание эмоционального фона (например, при большой продолжительности расчетов, когда оператор долго находится в пассивном состоянии), цветовое кодирование информации.
Цветом можно выделять стадию расчетов, применяя яркие, возбуждающие цвета перед окончанием расчетов, чтобы привести оператора в состояние готовности к активной деятельности.
2) Что лучше применять: темные символы на светлом фоне, или светлые - на темном? Практика показывает, что этот выбор необходимо осуществлять с учетом освещенности места, в котором находится дисплей.
Желательно, чтобы оттенок фона (темный или светлый) совпадал с условиями освещения рабочего места: контрастировать с
освещенностью окружающего дисплей фона должна выводимая информация. Поэтому, в темном помещении целесообразно выводимые на экран знаки сделать светлыми на темном фоне.
Глаз приспосабливается к уровню окружающего освещения, и если яркость экрана близка к яркости фона, полезное изображение будет восприниматься лучше.
В светлом помещении легче воспринимаются темные знаки на светлом поле.
3) Цветовой фон играет вспомогательную, а не основную роль.
Некоторые специалисты даже считают, что он ничего не дает,
кроме красоты. Основное назначение фона - обеспечение контраста с несущими информацию знаками.
Такие цвета фона, как красный, фиолетовый, желтый, синий и оранжевый, вступают в конфликт с некоторыми цветами, используемыми для представления информации. Например, если использовать красный и синий цвета или пару: желтый и зеленый, то создается иллюзия тени вдоль границы их соприкосновения.
4) Поскольку чувствительность глаза неодинакова к разным цветам, некоторые из них (такие, как синий, голубой, красный, фиолетовый, коричневый) редко используются для изображения выводимой информации. Их лучше использовать как фон.
5) Наиболее чувствителен глаз к желтому, светло- и темнозеленому цветам. Эти три цвета наиболее близки к цветам монохромных мониторов.
Использование их в качестве основного носителя информации делает программу менее требовательной к используемым техническим средствам - программа одинаково работоспособна и при наличии цветного, и при монохромном дисплее, который все цвета преобразует в оттенки серого.
6) Выработанные практикой наиболее рациональные сочетания цветов (Таблица 5):
|
||||||
| Таблица. 5. Наиболее рациональные сочетания цветов |
8) Определенные сочетания цветов можно использовать для предупреждений (например, о том, что машина находится в состоянии счета, об ошибках, о ситуациях, требующих вмешательства оператора, и т.д.).
9) Если есть хоть тень сомнения в правильности подбора сочетания цветов, такие сочетания лучше отвергнуть. Неквалифицированное владение цветом часто не облегчает, а затрудняет чтение кадра и приводит к быстрому утомлению зрения.
К специальным эффектам, реализуемым в большинстве систем относятся:
- режим инверсии (если основной режим: светлые символы на темном фоне, то режим инверсии - темные символы на светлом фоне);
- режим подчеркивания (когда выводимое в этом режиме на экран сообщение автоматически подчеркивается);
- режим мигания;
- режим повышенной яркости.
В большинстве случаев следует пользоваться режимом нормального отображения информации. В этом случае создается тот фон, с которым контрастируют специальные эффекты. Отличаясь от режима нормального отображения, они будут (или по крайней мере должны) привлекать внимание и выделять выдаваемую информацию.
Использовать специальные эффекты можно не только порознь, но и в различных комбинациях. Но при этом необходимо помнить, что режим отображения сам является информационным кодом, т.е. сам несет некоторую информацию. A пользователю трудно держать в уме больше 5 - 7 различных кодов.
Рекомендации по использованию специальных эффектов:
1) Внимание лучше всего привлекается миганием. Поэтому, режим мигания традиционно используется для сообщений об ошибках, и прочих сообщений, требующих немедленной реакции пользователей.
