АНАТОМИЯ САЙТА – ДЛЯ ДИЛЕТАНТОВ

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

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

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

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

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

АНАТОМИЯ ВЕБ-СТРАНИЦЫ

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

1) Функциональная часть. Это то, ради чего страница вообще была создана. Например, если речь идёт о "Яндексе", функциональная часть страницы - это поле для ввода запроса, кнопка "Найти" и список результатов поиска. Для страницы калькулятора ссуд на банковском сайте функциональной частью является собственно калькулятор + краткая инструкция по работе с ним. Для страницы со статьёй на сайте журнала - текст статьи. Для страницы товара в интернет-магазине - описание товара, ярлычок с ценой и кнопка "Заказать". И т.д. и т.п. Страница без функциональной части - это "пустышка", не имеющая права на жизнь.

Иногда помимо основной функции у страницы есть также функция второстепенная. Например, страница на сайте магазина может не только описывать товар, но и рекомендовать другие товары, страница "Яндекса" помимо результатов поиска показывает ещё и платную рекламу - это тоже функциональная часть страницы.

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

2) Описательная часть. Это текст (или сочетание текста и картинок), объясняющая посетителю страницы, куда, собственно, он попал. Якоб Нильсен, один из теоретиков веб-дизайна, писал: "Веб-сайт подобен дому с тысячью дверей: главный вход - это лишь один из множества способов попасть внутрь сайта". Посетитель часто заходит сразу внутрь Вашего сайта, минуя главную страницу. Поэтому каждая (sic!) страница сайта должна быть устроена так, чтобы посетитель понял, куда он попал и что он тут может найти (прочитать, сделать). Для этого может использоваться шапка страницы, её заголовок и/или текст в начале страницы.

• Для тех, кто занимается сайтостроительством, добавлю, что тэг "title" и мета-тэг "description" также относятся к описательной части страницы

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

Что касается размещения на странице - описательная часть должна быть на виду. Это должно быть если не первое, то максимум второе, на что упадёт взгляд посетителя страницы. Однако она не должна занимать слишком много места - грубо говоря, табличка с названием картины и именем автора не должна быть больше и ярче самой картины J

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

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

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

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

Однако не всё, что сделано "для красоты", на самом деле нужно на странице. Дизайн сайта (а тем более коммерческого) должен преследовать две основные цели:

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

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

Вчера вечером в пресс-центре "Выборы-2003", созданном при агентстве "Росбалт", состоялся круглый стол под названием "Пенсионная реформа: шаг вперед или два шага назад?". Участники мероприятия разошлись в ответах на этот вопрос. Разобраться в деталях дискуссии попыталась журналистка Кира Лебедева. В результате проведения начатой правительством России пенсионной реформы пенсия граждан РФ будет состоять из трех частей: базовой (она одинакова для всех), страховой (зависит от стажа работника) и накопительной (сейчас это 2% от фонда оплаты труда). Поводом для организации круглого стола послужило начало рассылки Пенсионным фондом России (ПФР) всем работающим гражданам страны извещений о состоянии их личного пенсионного счета.

Вчера вечером в пресс-центре «Выборы-2003», созданном при агентстве «Росбалт», состоялся круглый стол под названием «Пенсионная реформа: шаг вперед или два шага назад?». Участники мероприятия разошлись в ответах на этот вопрос. Разобраться в деталях дискуссии попыталась журналистка Кира Лебедева. В результате проведения начатой правительством России пенсионной реформы пенсия граждан РФ будет состоять из трех частей: базовой (она одинакова для всех), страховой (зависит от стажа работника) накопительной (сейчас это 2% от фонда оплаты труда) Поводом для организации круглого стола послужило начало рассылки Пенсионным фондом России (ПФР) всем работающим гражданам страны извещений о состоянии их личного пенсионного счета.

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

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

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

5) Мусор. Всё, что не относится ни к одной из предыдущих категорий, является мусором и лишь захламляет страницу. Мусор мешает посетителям, отвлекает их от важных для Вас вещей. К тому же избыток мусора на страницах замедляет их загрузку и делает их "малосъедобными" для поисковых машин. Поэтому от него надо безжалостно избавляться.

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

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

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

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

ОТ ТЕОРИИ К ПРАКТИКЕ

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

• В этом Вам может помочь программа url2bmp, которую можно бесплатно скачать отсюда (это её "родной" сайт) или отсюда

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

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

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

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

А это значит - более эффективным и более прибыльным.

Об авторе: Александр Левитас (a-l@kursy.ru), разработчик сайтов с 12-летним опытом, оказывает услуги в области аудита и оптимизации коммерческих сайтов, а также ведёт рассылку «Почему Ваш бизнес-сайт не работает?», в которой разбирает проблемы бизнес-сайтов, принадлежащих подписчикам рассылки.