Опыт сайтостроительства

Основы проектирования сайтов
Так уж сложилось у нас в Узбекистане, что созданием сайтов занимаются все, кому не лень было выучить HTML, разобраться с Dreamweaver или FrontPage, перечитать массу статей в Интернете о том, как правильно делать то и это. Что ж, не готовят у нас пока дипломированных специалистов высокого класса по веб-технологиям. Да и кто будет готовить? Некому. Сами разбирались, как разговаривать с заказчиком, как делать сайты, как их потом «раскручивать» в Интернете. И все вроде бы неплохо, но отсутствие систематизированных знаний все равно рано или поздно дает о себе знать.

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

А ведь умение проектировать сайты нужно не только разработчикам, но и заказчикам тех самых сайтов. Иначе заказчикам сложно будет понять: то ли они получили, о чем мечталось и за что платилось. Понятно, что если сам точно не знаешь, чего хочешь, то легко попасть в зависимость от исполнителя, который сам себе и задачу ставит как может, и решает ее точно так же.

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

Предлагаю вам свой опыт почти бесплатно — по стоимости журнала «Компас».
Далее по тексту используются примеры для бизнес-сайтов, но весь изложенный опыт в равной степени применим для любого веб-проекта.

pic

Принципы проектирования сайтов

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

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

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

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

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

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

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

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

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

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

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

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

Список наиболее часто встречаемых излишеств, от которых стоит отказаться ради удобства пользователей, таков:
• Сложные, трудно запоминаемые названия сайтов.
• Использование нестандартных технологий на стороне клиента, избыточная нагрузка на клиента (в данном контексте «клиент» — это браузер, которым пользуются посетители сайта).
• Излишнее использование графики и анимации.
• Перегруз страниц информацией.
• Излишнее количество пунктов в меню (более 6-8).
• Слишком много «воды» в статьях. Статьи плохо структурированы.
• Использование на сайте излишних промежуточных страниц, не несущих существенной информационной нагрузки.
• Нерациональное использование верхней части страниц (много пустого пространства или несущественной информации).

pic

Анализ целей и задач сайта

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

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

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

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

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

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

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

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


Практикум: Постановка задачи для разработки сайта

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

Например:
• Клиенты (постоянные клиенты, потенциальные клиенты)
• Партнеры (имеющиеся партнеры, потенциальные партнеры)
• Специалисты (специалисты неконкурирующих компаний, начинающие специалисты, эксперты)
• Представители СМИ

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

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

Например:
• О компании — Общая информация о компании — Новости компании
• Площадка продаж (электронная витрина) — Информация о товарах — Форма предварительного заказа
• Информация для партнеров — Информация для потенциальных партнеров — Форма предложения о сотрудничестве — Информация для существующих партнеров
• Информация для специалистов — Информационные статьи — Форум
• Контактные данные

4. Определите концепцию дизайна сайта Исходя из корпоративных требований к дизайну и его целевого назначения определите наиболее важные требования к дизайну

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

pic

Проектирование навигационной модели сайта

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

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

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

Как известно, существует 4 типа веб-навигации:

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

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

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

4. Смешанная — сочетает в различных вариантах предыдущие три типа навигации.
Используя все эти типы навигации, нужно помнить о том, что желательным максимальным уровнем вложенности для навигации по сайту являются 4-5 уровней. Это значит, что в идеале посетитель должен увидеть любую страницу сайта всего за 3-4 щелчка мышью.

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

После того как первый вариант навигационной модели сайта будет построен, подвергните ее проверке по приведенному ниже тесту:


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

pic

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

Проектирование информационного наполнения сайта

Планируя сайт, невозможно не уделить внимания его информационному наполнению — контенту (анг. content — содержимое).

Конечно, в тему данной статьи не входит детальное описание методов создания качественного контента.

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

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

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

Краткое резюме

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

На этом этапе для статического сайта постановка задачи заканчивается.
Но для динамического сайта осталось определить функциональность, т.е. сделать опись необходимых функций программной части сайта, составить «Техническое задание» (ТЗ).

Пример:

Название функционала: обратная связь с посетителями сайта

Назначение: сбор администратором сайта информационных сообщений от посетителей сайта.

Функции посетителей: заполнение и отправка формы сообщения, в котором обязательными полями являются: «Имя», «Контактный e-mail» и «Сообщение»;
после успешной отправки сообщения — получение сообщения об успешной отправке сообщения;
после неудачной отправки сообщения — получение сообщения о неудачной отправке сообщения с приглашением заполнить форму повторно;
при попытке отправить форму с незаполненными обязательными для заполнения полями — получение сообщения о том, что не заполнено обязательное для заполнения поле с указанием его наименования.

Функции администратора:

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

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


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

pic

Вместо послесловия

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

Orphus system