Лекция 3 Подготовка сайта
На подготовку сайта обычно требуется не меньше времени и усилий, чем на непосредственную работу над ним.
К подготовке относятся действия, которые нужно предпринять, прежде чем написать первую строчку HTML-кода - от выбора вида и стиля до разработки содержания.
Создание сайта любой сложности невозможно без отслеживания множества аспектов. Лучшие образцы представляют собой искусную комбинацию технологии, дизайна и практичности.
Подобное невозможно получить за одни выходные, ведь в основе таких сайтов лежит тщательное планирование и долгая подготовительная работа.
Информационный дизайн и архитектура сайта
Информационной архитектурой называется разбиение содержимого сайта на компоненты, поддерживающие различные техники пользовательского доступа (случайный просмотр, непосредственный поиск и т. п.). Как легко догадаться, информационная архитектура тесно связана с системой навигации сайта. Вряд ли возможно разработать одно без другого.
Формирование информационной архитектуры представляет собой двухступенчатый процесс.
Сначала всю информацию, которую предполагается выложить на сайт, нужно разбить на категории. Вы должны решить, сколько разделов и подразделов вам потребуется. Затем возникает вопрос, как содержимое сайта будет распределено по этим разделам и как единицы информации (отдельные веб-страницы) будут связаны со страницами, относящимися как к той же самой, так и к другим категориям. Можно утверждать, что это одна из самых сложных задач, возникающих при разработке сайта. Способы систематизации информации во многом зависят от того, в какой культурной среде воспитывался тот или иной человек. В результате вопрос, что же следует считать хорошо организованной информацией, во многом субъективен. Разработчику приходится решать различные проблемы - от устранения двусмысленностей (люди могут по-разному воспринимать одни и те же слова или термины) до различных взглядов на систему организации информации.
Впрочем, способ систематизации информации, как и многие другие аспекты веб-дизайна, во многом зависит от аудитории сайта. Разработчик должен представить себя на месте потенциального посетителя и спрогнозировать, какая же информационная структура наилучшим образом будет удовлетворять нуждам пользователей. В некоторых случаях этот процесс является крайне сложным, но без него не обойтись.
Выбрав способ организации информации, необходимо формализовать структуру будущего сайта, нарисовав диаграмму. Примеры таких диаграмм показаны на слайде.
Не стоит воспринимать диаграммы как наглядную демонстрацию ссылок между различными страницами сайта. Они всего лишь представляют иерархическую связь различных разделов и подразделов, а также отдельных страниц.
Зачем же тогда нужны эти диаграммы? Во-первых, они наглядно демонстрируют структуру сайта коллегам, которые могут вместе с вами работать над проектом, а также клиентам и начальству. Кроме того, подобная копия архитектуры сайта может потребоваться вам в процессе работы.
Разработка визуальной метафоры
Понятие визуальной метафоры не так-то просто объяснить на словах, но при корректном использовании она легко интерпретируется на уровне подсознания. Эта метафора универсально применяется ко всему проекту и усиливает действие хорошо знакомых вам визуальных элементов (изображений, элементов интерфейса, значков, цветовой схемы или шрифтов), подчеркивая тематику сайта.
Соответственно, для сайта, рекламирующего новый голливудский фильм, потребуется совершенно иная визуальная метафора, нежели для сайта фирмы, предоставляющей дизайнерские услуги.
Эффективная визуальная метафора требует серьезных раздумий и свободного воображения. Вы должны сесть и как следует подумать, какие цвета, шрифты, изображения, значки и расположение элементов интерфейса позволят подчеркнуть направленность вашего сайта.
Допустим, вы собираетесь создать онлайновое сообщество, ориентированное на маленьких детей.
Значит, имеет смысл подумать о жирных шрифтах, ярких цветах и мультипликационных элементах интерфейса. В то же самое время, визуальная метафора для сайта, посвященного фильму, должна четко ассоциироваться с этим фильмом и воспроизводить его атмосферу.
Замечательным примером подобного подхода может послужить сайт фильма «Планета обезьян»
К сожалению, четких и строгих правил создания визуальной метафоры просто не существует.
Осмысление компоновки сайта и его дизайна с помощью раскадровок
Одним из наиболее важных шагов в подготовительной бумажной и мыслительной работе является создание раскадровок. Эта идея была позаимствована из киноиндустрии.
В общем случае раскадровки представляют собой последнюю стадию предварительной подготовки и позволяют полностью визуализировать дизайн будущего сайта. С их помощью вы получаете возможность увидеть, как взаимодействуют друг с другом выбранные вами цвета, как соотносятся друг с другом элементы интерфейса, как реализована система навигации, как выглядит визуальная метафора и насколько оптимально представлено содержимое сайта. Раскадровки дают способ выявить потенциальные проблемы с дизайном, которые могут стать помехой на стадии написания HTML-кода.
Кроме того, они являются замечательным наглядным пособием для реализации различных дизайнерских проектов и поиска визуальных творческих идей.
Примеры раскадровок показаны на слайде.
Как несложно заметить, для их создания не существует канонов. Когда вам приходят в голову какие-то идеи, набросать их можно даже на салфетке.
Каким бы образом ни была создана раскадровка, она должна наглядно иллюстрировать придуманный вами дизайн и не допускать двусмысленностей.
Создать раскадровку можно даже на экранной копии пустого окна браузера. Это замечательный способ презентации для клиентов.
Проектирование эффективных веб-страниц
Любой веб-сайт состоит из набора связанных друг с другом страниц. Соответственно, при его разработке особое внимание нужно уделять входящим в него страницам, точнее тому, насколько они сливаются в единое целое.
При попытках создать дизайн, ориентированный на пользователя, вы не раз столкнетесь проблемой «ожидания пользователя основанное на личном опыте» Почему же ожидание, основанное на опыте, настолько важно? Рассмотрим пример из жизни.
Каждый день автомобилисты останавливаются на красный сигнал светофора, а на зеленый продолжают движение.
Что произойдет, если в один прекрасный день вместо зеленого света загорится синий? Будут ли автомобилисты растеряны? Вполне вероятно. Будут ли они сидеть и думать, что же им делать дальше? Скорее всего. Внезапное изменение привычного шаблона (установленного на базе предшествующего опыта) приводит к формированию нового поведения, что может потребовать некоторого времени. То же самое касается дизайна веб-страниц.
Если пользователь привык к определенному способу навигации, загрузки данных и т. п., а вы предложите ему другой, он может просто уйти с вашего сайта.
Рассмотрим ключевые характеристики создания хорошо оформленных и удобных веб-страниц - минимизацию времени отклика, написание текстов для Интернета и создание полезных ссылок.
Минимизация времени отклика
Одной из фундаментальных проблем, возникающих при конструировании веб-страниц, является минимизация времени отклика, то есть времени полной загрузки страницы после щелчка на ссылке или ввода URL-адреса.
Несмотря на необходимость компромисса между дизайном сайта и временем отклика, в качестве руководства к действию имеет смысл выбрать принцип «чем быстрее, тем лучше». К сожалению, несмотря на рост скорости Интернет-соединений и увеличение числа пользователей, имеющих доступ к высокоскоростному Интернету, в ближайшем будущем мы вряд ли получим возможность мгновенной загрузки веб-страниц. Даже при самом быстром соединении загрузка страницы занимает какое-то время. Поэтому желательно поставить перед собой цель минимизировать это время до 5-8 секунд. В противном случае велика вероятность, что пользователю надоест ждать и он покинет ваш сайт.
Недостаточно минимизировать время отклика. Важно сделать так, чтобы оно было практически одним и тем же при каждой загрузке страницы. Для пользователя важно соответствие его ожиданиям, а не только фактическое время загрузки.
Если ответ системы на одно и то же действие будет, то быстрым, то медленным, пользователь не будет знать, чего ему ожидать, и не сможет скорректировать свое поведение для оптимизации работы с системой.
Человек, предполагающий, что страница загрузится быстро, будет разочарован, если этого не произойдет.
В критических случаях постоянно колеблющееся время загрузки может привести пользователя к мысли о наличии проблем с веб-страницей, браузером или даже собственным компьютером.
Предположим, что при посещении сайта загрузка первых пяти-шести страниц занимает положенные 6 секунд. Но седьмая страница уже не загружается за это время. Мало того, ее содержимое не появляется и через 25 секунд. Можно предположить, что эта страница «весит» достаточно много и, соответственно, требует большего времени загрузки.
Но пользователь не может знать этого наверняка. В итоге он будет сидеть, нервно барабаня пальцами по столу и гадая, не завис ли у него браузер. Он может даже настолько разочароваться, что закроет вашу страницу и уйдет на другой сайт. Именно по этой причине желательна минимальная разница во времени загрузки различных страниц сайта.
Существует, однако, фактор, из-за которого время загрузки страницы становится совершенно неконтролируемой величиной. Ведь оно определяется самым слабым соединением в цепи между сервером и браузером. В результате время загрузки страницы определяется не только ее размером, но и пропускной способностью канала связи, скоростью соединения с Интернетом, а также скоростью работы браузера и компьютера.
Пропускной способностью называется количество данных, передаваемое через канал связи за единицу времени (секунду, минуту и т. д.) Существуют различные способы установки соединения с Интернетом - от модема до цифровой абонентской линии (DSL - Digital Subscriber Line). Каждый из них характеризуется своей пропускной способностью, которая может варьироваться от крайне низких до достаточно высоких значений. Пропускная способность измеряется в килобитах в секунду (Kbps, Кбит/с). Для большинства стандартных модемов она находится в диапазоне от 14,4 до 56 Кбит/с, в то время как высокоскоростные соединения (например, кабельные модемы, DLS или линии И) имеют пропускную способность в диапазоне от 64 до 1500 Кбит/с и выше. Соединение с Интернетом можно представить в виде трубы, по которой идет перекачка данных. Чем шире эта труба, тем больше информации можно скачать за единицу времени.
Как же с учетом всего вышеперечисленного минимизировать время загрузки страницы? Вот несколько полезных инструкций:
Старайтесь максимально уменьшить размер создаваемых страниц, разумеется, с учетом содержимого страницы и ее дизайна. При этом важно понимать, что не существует «идеального» размера, под который нужно подгонять страницы. Вес страницы во многом зависит от ее целевой аудитории. Например, если вы знаете, что большинство потенциальных посетителей вашего сайта имеют быстрый Интернет, можно смело использовать средства информации, требующие более широкой полосы пропускания. Однако если ваш сайт ориентирован на людей, пользующихся медленным соединением, желательно как можно тщательнее оптимизировать его размер.
Если одна из страниц сайта намного тяжелее остальных, имеет смысл снабдить посетителей информацией о скорости ее загрузки. Если в HTML-файлах встречаются изображения большого размера, вместо них нужно вставить уменьшенные копии.
Постоянно тестируйте свои страницы. Таким способом можно получить представление о проблемах, возникающих при работе в различных браузерах и на различных платформах. Кроме того, это позволяет оценить скорость загрузки страниц при различных скоростях соединения.
Написание текстов для Интернета
Несмотря на то, что Всемирная паутина становится все более визуальной средой, одним из наиболее важных типов содержимого веб-страниц по-прежнему остается текстовая информация. Но вы должны понимать, что среда накладывает свой отпечаток на содержание, поэтому процесс написания текста для размещения в Интернете достаточно уникален.
Люди читают веб-страницы совсем не так, как книги - слева направо и сверху вниз. Обычно посетители хаотично ищут интересную информацию. Кроме того, опыт показывает, что читать текст с экрана сложнее, чем напечатанный на бумаге, что приводит к снижению скорости чтения примерно на 25 %. Эти два фактора следует учитывать в процессе написания материалов для сайта. Вы не сможете обойтись простым копированием отпечатанного документа и вставкой на страницу содержимого буфера. Нужно хорошо продумать структуру текста и искусно расположить его на странице с учетом двух вышеизложенных требований.
Создание текста, доступного для беглого просмотра
Так как посетители сайта испытывают определенное неудобство при чтении текста с экрана, они предпочитают избегать больших объемов текста. Такие тексты пробегаются глазами, из них вычленяются ключевые слова, предложения и параграфы, которые интересуют конкретного посетителя. Вся прочая информация просто игнорируется.
В результате желательно оформить текст таким образом, чтобы сделать возможным быстрый просмотр. Как это сделать? Вот несколько рекомендаций:
- Используйте для оформления заголовки различных уровней. Заголовки позволяют быстро найти интересующую посетителей часть текста.
Вложенные заголовки также облегчают процесс поиска нужной информации.
- Используйте значимые заголовки. Пользователь должен понимать, какой теме посвящена информация того или иного раздела, не читая основной текст.
Что именно считать бессмысленным заголовком? Вот один из моих любимых примеров, подсмотренный в одной из газет: «Собака укусила человека, а он укусил ее в ответ. Дополнительная информация на стр. А8». Что бы это могло значить? Заголовок не имеет никакого смысла, читателю нужно искать страницу А8, чтобы узнать, интересна ли ему эта история. Если бы автор использовал значащий заголовок («Укушенный собакой человек выступает за закон об обязательном применении ошейников»), читатель сразу мог бы понять, интересна ли ему эта статья или нет.
Визуально выделяйте ключевые слова, меняя цвет используемого шрифта, а также применяя полужирный шрифт и курсив.
Создание разборчивого текста
Как уже упоминалось, читать текст с экрана сложней, чем текст, напечатанный на бумаге. Поэтому не стоит еще более усложнять задачу, намеренно уменьшая его читабельность. Помните, что все усилия, направленные на создание элегантного дизайна, минимизацию времени загрузки страниц и интересное наполнение сайта, будут напрасны, если посетители не смогут прочитать текст. Вот основные правила написания разборчивого текста.
- Выбирайте для текста и фона контрастные цвета. Оптимальным вариантом является черный цвет на белом фоне (так называемый позитивный текст) или
наоборот (негативный текст) (рис. 1.7). Хуже всего цветовые схемы низкой контрастности, например розовый текст на красном фоне, который практически невозможно прочитать.
Хотя негативный текст имеет достаточно высокую контрастность, прибегать к инвертированной цветовой схеме следует весьма осторожно, так как она тоже уменьшает читабельность текста.
- Используйте однородный фон или, в крайнем случае, фон с мало различимым рисунком.
Величина шрифта должна быть такой, чтобы текст мог легко прочитать даже человек со слабым зрением. Мелкие шрифты оставьте для сносок и примечаний.
Убедитесь, что ваш текст статичен. Движущийся, мигающий или меняющийся в размерах шрифта текст очень сложно читать.
Почти во всех случаях текст имеет смысл выровнять по левому краю. В этом случае его проще всего просматривать.
Любой ценой избегайте текста, написанного прописными буквами. Он читается примерно на 10 % медленней текста, написанного с использованием как строчных, так и прописных букв.
Переходы по ссылкам: разработка интуитивно понятной навигации
Не требует доказательств утверждение, что разработка интуитивной и удобной системы навигации является одной из самых важных, если не первоочередных задач при создании сайта.
Посетители все время перемещаются в пространстве от одной страницы к другой в поисках нужной информации. Можно спорить о том, знает ли пользователь или нет, что именно ему требуется. Но вы должны поставить себя на его место и понять, чего он захочет от вашего сайта, а затем придумать самый простой способ переправить его на страницу с нужными сведениями. Если не дать посетителям возможности легко и быстро перейти со страницы, на которой они находятся, на страницу, которая им требуется, они уйдут на другой сайт. Вряд ли вы об этом мечтаете.
Было бы наивно полагать, что система навигации сводится к набору кнопок и ссылок. Лучшие образцы представляют собой искусную комбинацию самых разных элементов: немного дизайна, толику информационной архитектуры и огромный пласт психологии.
Будьте последовательны
Мы уже говорили о том, что в основе одного из способов, которым люди определяют мир вокруг себя и свое с ним взаимодействие, лежит последовательность и предсказуемость событий. Если система навигации работает корректно, посетители начинают бессознательно полагаться на нее. Но для того чтобы это произошло, данная система должна быть последовательной. Это означает, что на всех страницах сайта, меню должно располагаться на одном и том же месте, а также сохранять свой вид и содержание. Кроме того, интерфейс, содержащий навигационные элементы, обязан также по возможности оставаться неизменным.
Одна из помех для создания последовательной и предсказуемой системы перемещения по сайту связана с глубоким взаимодействием между элементами навигации и дизайном интерфейса. Часто в процессе погружения в сайт достигается некая точка, начиная с которой система навигации дает сбой. Подобное явление объясняется недостатком предусмотрительности автора сайта. Дизайнеры обычно прилагают максимальные усилия к разработке наилучшей схемы навигации для наиболее посещаемых разделов. Но по мере погружения количество информации на экране увеличивается, и дизайнер тратит все меньше времени на проверку корректности работы системы навигации. Лучше всего оформленные сайты демонстрируют пирамидальное распределение информации. На верхних уровнях располагаются сведения, не занимающие значительного пространства. По мере же погружения в глубь сайта появляется все более специализированная информация и количество экранного пространства уменьшается.
Именно в такие моменты частенько начинается хаос, и о последовательности и предсказуемости можно забыть. Чтобы справиться с дополнительной информацией, дизайнер добавляет новые навигационные элементы (меню, кнопки и т. п.), а в некоторых случаях даже меняет существующую систему навигации, которая замечательно работала на верхних уровнях сайта.
Чтобы окончательно не запутаться, при разработке системы навигации учитывайте всю структуру сайта. Помните, что потраченное на этом этапе время будет с лихвой компенсировано в будущем. Так как посетителю скорее всего потребуется информация, расположенная в глубине сайта, задайте себе вопрос, будет ли ему там так же удобно перемещаться по разделам, как и на верхних уровнях. Если ответ на этот вопрос будет отрицательным, можете начинать все сначала.
Помните о том, что Интернет представляет собой нелинейную среду. Пользователи не всегда приходят на ваш сайт через его главную страницу. Именно поэтому так важна последовательная схема навигации.Сделайте систему навигации понятной для посетителя
Любой сайт предлагает посетителям некую информацию. И для огромных интернет-магазинов, и для сайтов различных институтов, и для персональных страниц самым главным является их содержание. При этом посетители должны иметь возможность быстрого поиска нужной информации. Другими словами, следует избегать слишком сложных для понимания систем навигации.
Вот основные принципы, которых желательно придерживаться при разработке навигации вашего сайта. Во-первых, как уже упоминалось, система навигации должна быть последовательной. Если в какой-то момент вы меняете принцип перемещения по сайту и посетителю приходится подстраиваться под новые условия, значит, система навигации не продумана. Во-вторых, соответствующие элементы интерфейса (ярлыки, кнопки и т. п.) должны четко ассоциироваться с разделом, переходом к которому они управляют. Нет ничего хуже набора кнопок с бессмысленными названиями. Не стоит оснащать свой сайт непонятной системой навигации, в которой сложно разобраться.
Используйте визуальные средства
Так как Интернет является визуальной средой, эффективная система навигации должна представлять собой набор наглядных сообщений. В данном случае я говорю не только о кнопках. Интеграция визуальных средств в навигационную схему требует широкого (а в некоторых случаях и крайне утонченного) мышления.
Цвет
Проще всего предоставить посетителям быстрый и наглядный метод идентификации их местонахождения с помощью цвета. Часто крупные сайты используют систему навигации, цвет которой меняется в зависимости от того, в каком разделе или подразделе находится посетитель. Это весьма эффективная техника, которая при корректном применении предоставляет посетителю понятную опознавательную систему. Существуют различные возможности увеличения эффективности навигации с помощью цвета. Можно менять цвет фона различных страниц, а можно действовать тоньше — выделяя цветом определенные элементы интерфейса, например кнопки, баннеры или заголовки. Но у подобной методики есть и узкие места:
Не стоит использовать новый цвет для каждого подраздела. Выберите определенную палитру и назначайте эти цвета разделам верхнего уровня. Например, если для раздела «Обо мне» персонального сайта был взят светло-рыжий цвет,этим же цветом имеет смысл оформить и подразделы «Мои любимые фильмы», «Моя семья» и «Моя любимая музыка», входящие в раздел «Обо мне». Выбирайте цвета с учетом визуальной метафоры.
Использование имен собственных
Последовательное и четкое использование собственных имен также позволяет посетителям понять, где они находятся. Природа Всемирной паутины такова, что пользователи обычно быстро переходят с одного сайта на другой щелчками мыши. Когда они добираются до вашего сайта, нужно, чтобы они сразу поняли, куда попали. Это проще всего сделать с помощью правильно размещенного логотипа
Цепочная навигация
На крупных сайтах, содержащих множество информации, можно легко заблудиться. Посетители не могут понять, где именно находятся и где были несколькими щелчками ранее. Один из наиболее простых и элегантных способов борьбы с этим явлением — цепочная навигация иными словами- хлебные крошки
Цепочная навигация обычно представляет собой горизонтальную строчку гиперссылок, указывающую позицию этой страницы по отношению к общей информационной архитектуре сайта. Например, на персональном сайте это может выглядеть следующим образом:
Главная страница ► Обо мне ► Любимые фильмы
Каждый пункт этой строчки является гиперссылкой, ведущей в соответствующий раздел или подраздел.
Ярлыки
Разработчики сайтов часто пренебрегают использованием ярлыков, дающих посетителям представление о странице, на которую они попали. В данном случае речь идет о группе понятий, связанных с той или иной тематикой страниц. Например, рассмотрим раздел, в котором представлены фотографии, рисунки и скульптуры автора сайта. Вместо ссылки или кнопки с надписью «Все, что я когда-либо создал на пленке, на холсте или из глины» достаточно будет одного слова «Галерея».
Используя ярлыки, важно помнить о культурных различиях. Если, к примеру, среднестатистический пользователь из Северной Америки легко определит, какой раздел сайта скрывается за словом Ноmе, пользователю из Египта, Чехии или Малайзии оно ничего не скажет.
При создании ярлыков следует избегать терминологии, принятой в узком кругу.
Визуальный словарь: элементы навигации
Еще одним замечательным способом, позволяющим посетителям сайта сориентироваться в пространстве, является использование визуального словаря. Существуют три различных подхода к созданию элементов навигации (кнопок, меню и т. п.). Некоторые предпочитают применять значки или картинки, в то время как другие отдают должное полностью текстовой навигации. Третьи же, которых я считаю наиболее рациональными, совмещают оба подхода.
Решив обойтись исключительно визуальной системой навигации, вы столкнетесь с серьезными препятствиями. Дело в том, что в Интернете нет общепринятого визуального словаря. Поэтому непонятно, к примеру, как должна выглядеть кнопка, ведущая с главной страницы в раздел «Обо мне». Возможности тут практически безграничны. Проблема становится особенно острой, когда автор сайта использует символику, непонятную для посетителей.
В результате им придется довольствоваться набором непонятных значков для перемещения по сайту. Единственным решением этой проблемы является применение альтернативной текстовой навигации. Если каждой кнопке соответствует некий текст, поясняющий посетителю, куда же эта кнопка ведет, вы сможете использовать любые значки, подходящие под выбранную визуальную метафору.
Различные способы переходов по сайту
У людей бывают самые разные привычки. Они по-разному водят машины, им нравятся различные фильмы и разная музыка, они по-разному говорят, предпочитают разные блюда и, что важней всего в данном случае, по-разному перемещаются по Интернету.
Некоторым нравится бесцельно бродить, пока они не найдут что-то интересное, другие предпочитают как можно быстрее найти нужную информацию. Некоторые пользуются новейшими браузерами и работают с быстрыми компьютерами и скоростными Интернет-соединениями, в то время как другим вполне достаточно старого браузера и старенького компьютера с модемом.
Есть даже пользователи, предпочитающие текстовые браузеры или программы экранного доступа. Надеюсь, вы уже поняли, к чему я клоню? Только от вас зависит, какие из этих пользователей станут посетителями вашего сайта.
Чтобы гарантировать доступность вашего детища для широкой публики, требуется система навигации, поддерживающая множество различных стилей работы с Интернетом. Например, желательно создать облегченную версию сайта для тех, кто использует модемное соединение. Можно также воспользоваться набором различных инструментов, таких как функция поиска, карта сайта, а также традиционные текстовые меню и значки, давая посетителю возможность выбрать наиболее удобную для него систему навигации.