С чего начинаются сайты? Наши сайты начинаются с идеи. Идея – это консистенция всех желаний и требований заказчика, рассматриваемая через призму наших возможностей.
Для чего компания – наш заказчик - решила создать сайт? Конечно, основным побудительным аспектом являлась прибыль компании, дальше идут имиджевые цели, поддержка клиентов и прочее.
Что мы можем предложить для реализации указанных целей? Мы можем предложить сайт с функциональным и ярким дизайном, хорошим содержим и удобной навигацией. Так же наши сайты отличает великолепная система администрирования, которая значительно упрощает и автоматизирует работу администратора.
Прежде чем преступить к планированию сайта, мы скрупулёзно знакомимся с деятельностью компании заказчика, с предыдущими рекламными акциями заказчика, анализируем конкурентов – собираем о клиенте и его заказчиках максимальную информацию. Как серьёзное рекламное агентство, работающее не только для сиюминутных целей, но и на перспективу, мы очень аккуратны в выполнении заказов, поэтому информационная подготовка стоит у нас на очень высоком уровне.
Планирование
Планирование сайта предполагает планирование 3-х основных элементов: дизайна, навигации, содержимого.
Начали мы с последнего аспекта – содержимого: прежде всего с заказчиком было оговорено, что он желает видеть на сайте, так же были даны консультации по поводу того, что традиционно присутствует на сайтах компаний. В результате совместной работы был очерчен круг материалов, которые должны присутствовать на сайте.
Заметим, что сайт – полноценный сайт в сети Интернет – имеет двоякую нагрузку – рекламную и информационную, причём последняя, ввиду особенностей Интернета как медианосителя, имеет превалирующее значение. Тем самым на сайте должен присутствовать максимально возможный объём информации о продуктах и компании, однако в то же время этот объем, должен быть встроен так, что б быть удобным для прочтения и восприятия и эффективно работать на продажи.
Далее началась работа над навигацией - мы разбили ранее отобранные материалы на основные группы, которые в будущем должны стать отдельными разделами сайта.
После выделения отдельных разделов, параллельно с работой над дизайном сайта началась работа над контентом – содержим сайта: графикой и текстом.
Относительно текста: основной объём текста был подготовлен самим заказчиком.
Относительно графики: хорошему сайту должны соответствовать отличные графические составляющие – как элементы интерфейса, так и прочие изображения.
Дизайн начинается с разработки шаблона (шаблонов) сайта. Зная, из каких разделов будет состоять сайт, нам необходимо разместить необходимые поля на плоскости с параметрами разрешения мониторов.
Преимуществами такой схемы являются: традиционность и в тоже время возможность вкрапления некоторых новаторских идей. Несомненно, для нас самым важным было удобство посетителей сайта, логичность в последовательности ссылок на разделы, последовательность, которая нацеливает посетителя на покупку. Отметим, что в размещении полей сайта участвовали специалисты по работе с клиентами, следующие в потребительской психологии.
Далее переходим к цветовой гамме сайта
Сегодня много говорится о подборе цветов их количестве. В данном вопросе мы решили подойти не совсем стандартно: на сайте будет более чем 3 цвета, при этом сайт будет выглядеть очень гармонично.
Почему эти цвета, а ни иные? На самом деле, мы проигрывали разные варианты: от оттенков зелёного, до градаций желтого с вкраплениями синего, однако выбранный вариант сочли самым подходящим: он не блеклый и не слишком «кричащий» - как раз такой, какой требуется для подобного сайта.
Наконец, интерфейс сайта. Для достижения поставленных целей, интерфейс должен быть деловым, динамичным, без излишеств. Однако, всё не так просто, учитывая, профиль деятельности заказчика, интерфейс должен обладать ещё и некой богемностью и, конечно, должно быть то, что называют «изюминкой». Так же, не мало важно и то, что интерфейс должен быть лёгким.
Далее необходимыми стали элементы, придающие сайту динамичность, современный облик – мы имеем ввиду falsh-анимацию. Специалисты-аниматоры подготовили около 10 анимационных роликов, которые должны «оживить» сайт, из предложенных вариантов ответственные за проект выбрали лишь несколько самых адекватных и уместных.
Создание
Итак, у нас имеется: интерфейс, навигация, зачатки контента, flash-ролики. Пора всё сверстать в одно целое, причём для каждого раздела в отдельности. В результате вёрстки мы получили следующие макеты страниц сайта:
Титульная страница: эта страница несёт особую нагрузку, поэтому, коснёмся её особенностей подробнее:
Титульная страница – первое, что встречает человек, попадая на сайт. Именно она несет максимальную имиджевую нагрузку. Это «витрина», которая должна приковывать взгляд посетителя. Собственно титульная страница – это ответ на вопрос посетителя: «С чего начать?». Эта страница несет основную эмоциональную нагрузку, причём в данном случае мы работали на то, что бы создать положительные эмоции у тех, кто будет смотреть сайт.
Нельзя не отметить, что титульная страница эффективна в смысле донесения информации – эта страница читается полностью каждым посетителем сайта. Тут же заметим, что эта страница является, как правило, наиболее посещаемой пользователями – уж она-то просматривается каждым посетителем сайта (исключения в большинстве случаев несущественны).
Исходя из выше названного мы определили для себя три «НЕТ»: Эта страница не должна быть перегруженной информацией. Титульная страница не должна быть просто красивой «заставкой». Эта страница не должна быть тривиальной.
Собирая макет титульной страницы, мы воспользовались рядом общеизвестных критериев для такого рода страниц:
Страница должна иметь оригинальное дизайн - решение.
Эта страница должна содержать красочную flash заставку, подчеркивающую имидж компании.
Она должна нести достаточную (но не чрезмерную) информационную нагрузку.
Так же титульная страница должна предоставлять хорошо продуманную и удобную навигацию по всему сайту, заставлять посетителя делать правильные и последовательные переходы по разделам сайта.
После создания шаблона самой сложной – главной – страницы сайта, работа пошла с макетами страниц остальных разделов, давайте рассмотрим некоторые из страниц и выделим ряд характерных для них черт.
Страница «О компании» - страница полностью имиджевая – на неё заходят, что бы познакомиться с компанией вне тех предложений, которые эта компания делает, поэтому эта страница должна показывать компанию в наиболее благоприятной сфере, что достигается сочетанием соответствующего дизайна в избранном для сайта стиле и соответствующего содержания – в виде текста и графики.
Страница «Наши работы» - портфолио заказчика. Каждую из представленных здесь работ необходимо показать в привлекательной манере, отражая те или иные преимущества предложения компании.
Нельзя не заметить, что мы каждую страницу, выполняя в едином стиле, делали особенной, подчёркивая её функциональное назначение.
автор: 21.3.2007 Юрий Шиляев (Минск)
Я могу припомнить на удивление мало материалов, посвященных проектированию сайтов и программ на русском языке, написанных русскоязычными авторами. Этому способствует и преимущественно экспортно-ориентированная разработка (оффшор) и отсутствие массового опыта создания информационных продуктов в нашей стране.
Надеюсь, что эта статья пригодится тем разработчикам и IT-менеджерам, кто ощутил перед собой проблему составления качественных документов на разработку сайта. Документов, которые кроме испорченной бумаги были бы хоть чем-то полезны.
Вводная
Зачем составлять техническое задание (ТЗ) на сайт?
Какую бы методику разработки вы не использовали, и какого бы размера ни был ваш сайт, вы в любом случае столкнетесь с вопросом: “А когда мы будем заканчивать работу, то как мы поймем, что мы ее действительно закончили?” В разработке как ПО, так и любого сайта частая проблема — никто не видит конечной точки. С одной стороны можно сказать, что конечным видением проекта должен обладать проектный менеджер. Но если конечный продукт совпадет с образом менеджера, но не совпадет с ожиданиями клиента? А если за время проекта меняется 3 менеджера?
Следствие закона Паркинсона “девяносто-девяносто”:
Первые 90% кода отнимают 90% времени разработки. Оставшиеся 10% кода отнимают вторые 90% времени разработки.
Из книги А.Купера “Психбольница в руках пациентов”.
ТЗ это не просто список требований, это документ. Если договор регулирует процесс организационных и финансовых взаимоотношений, то ТЗ регулирует процесс разработки и конечный результат.
В этом случае не имеет никакого значения большой разрабатывается сайт или малый. Проблема рассогласования ожиданий может возникнуть в независимости от объема затраченных средств, вот только последствия могут быть разными.
О чем эта статья.
Эта статья о том, что может пригодиться в процессе написания ТЗ на сайт, а также что будет уж точно сделать желательно. Но эта статья не о том, как надо писать проектную документацию. В конечном итоге главная задача проектировщика не написать классный документ, а спроектировать сайт. Хороший документ лишь отражение подхода и уважения ко всем участникам разработки.
Добавлю ограничения.
Всегда когда я говорю о написании ТЗ, то имею в виду, конечно же, каскадную методику разработки. В случае других вариантов (например, экстремальное программирование) составляются другие документы и часто по другим принципам. Это — раз.
Стоит разделять ТЗ для малых и больших сайтов. Это — два. Различия маленьких и больших проектов заключаются не в объеме документа на выходе, а в процессе их разработки. Если у вас всего 4 человека в проектной группе, все давно знают друг друга, то можно предполагать отсутствие формализма. Если же разработкой занимаются несколько “отделов”, а проектная команда состоит из более 10-ка (до бесконечности) сотрудников, то управлять этой ордой может только процесс. Процесс рождает формализацию, а формализм накладывает свой отпечаток на формат документации.
По сути, толщина документов зависит от сложности процесса в больше степени, нежели от размеров проекта.
Мы будем следовать самому сложному пути.
ТЗ отвечает на вопросы
ТЗ изначально создается для нескольких участников разработки:
Разработчики проекта (дизайнеры и программисты).
Проект-менеджер.
Клиент.
Бюрократы (они могут не участвовать в проекте, но на них тоже надо рассчитывать).
Оглядываясь на приведенные группы участников можно предположить, что ТЗ в первую очередь должно отвечать на их вопросы. В идеале вся предпроектная документация в каскадном методе создается так, чтобы снять вопросы в процессе разработки.
Итак, на какие вопросы отвечает ТЗ.
Для кого создается сайт и для чего?
Сайт создается для Заказчика и для его клиентов. Это основанные пользователи будущего проекта.
Наилучшим вариантом будет, если в Техническом задании вы опишите всех пользователей сайта, как внутренних, так и внешних. Это описание может включать в себя маркетинговые, демографические, социальные данные, цели и задачи потенциальных пользователей, их требования к будущему сайту.
Как будут решены задачи заказчика и пользователей?
Собственно если не ответить на этот вопрос, то написание ТЗ можно признать бумагомарательством. Это основной и значимый вопрос. Ему может быть посвящена отдельная статья, поэтому останавливаться на нем подробном пока не будем.
Как будет проходить создание проекта?
Как я уже писал выше, ТЗ (а может и отдельный документ) иногда описывает процесс разработки проекта. Это совершенно необходимо, если принять во внимание, что сайт может разрабатываться по отличной от принятой в компании методики разработки, которая как правило не описывается ни одним документом. Можно сколько угодно долго мучить себя мечтами о стандартизации по ISO, но что показать дотошному заказчику?
По ГОСТу предусмотрен отдельный раздел “Этапы разработки системы”. В таком разделе можно не слишком подробно описать процесс и установить майлстоуны.
Что будет приниматься на выходе?
ТЗ начинает разработку и ставит в ней точку.
В идеале вы должны пройтись по всем пунктам ТЗ вместе с заказчиком, свериться с полученной системой и спустя неделю сказать: “Уф-ф. Вроде все сделали”.
“ТЗ является средством верификации выполненных работ.” — такая фраза записана во введении многих моих ТЗ.
Что требуется для дальнейшего запуска проекта?
Это вопрос, на который по-хорошему должен получить ответ заказчик. Это уже консалтинг, но в части случаев его необходимо провести в процессе проектирования. Необходимо спланировать количество рабочих мест, требуемое программное и аппаратное обеспечение и т.п.
Из чего состоит ТЗ
У меня ушел целый час на принятие решения: описывать состав ТЗ в виде конкретной четкой структуры или просто рассказать о том, что должно там быть. Вспомнив все свои ТЗ, я пришел к выводу, что структура этого документа так часто менялась в зависимости от целого ряда факторов, что четкое указание структуры будет напоминать плохой совет по выбору костюма. Представьте, что вам советуют что-то надеть на вечер, даже не осведомившись, куда вы направляетесь.
Общая информация
Первая часть ТЗ содержит введение и общую информацию о документе и проекте в целом. Введение надо написать один раз и на всю жизнь. Как правило, там пишутся настолько абстрактные фразы, что в каждом новом проекте надо лишь подправить пару слов.
Общая информация включает в себя:
Информацию о заказчике и исполнителе.
Обязательно указание ответственных лиц с каждой стороны. Указываются документы, на основании которых производится разработка. Как правило, подобным документом является договор. Статус текущего документа и конфиденциальность.
Назначение проекта.
Указывается: для чего будет использоваться полученный продукт.
Цели создания и задачи, которые должен решить ресурс.
С одной стороны это довольно короткий раздел, но по важности проработки он занимает первое место. Если цели и задачи поставлены нечетко и неизмеримо, то может быть довольно сложно им следовать.
Описание аудитории проекта.
Критично важная информация для разработки хороших и правильных сайтов. Ясно, что информацию об аудитории не только надо правильно собирать, но еще важнее это уметь этой информацией пользоваться.
Описание аудитории должно содержать не только информацию, которую так любят маркетологи (демография, потребности, сегментирование и т.п.), но также информация, которая пригодится дизайнерам и проектировщикам: какие задачи решает пользователь, какие его цели в работе с сайтом, что его привлекает. Алан Купер рекомендует описывать аудиторию сайта не в виде безликой массы, а выделять персонажи — описывать собирательный образ конкретных людей.
Термины и определения.
В большом документе вы сможете употребить огромное количество терминов и сленговых выражений, которые редко понимают специалисты по маркетингу или крупные руководители. Они могут читать этот документ, поэтому лучше предусмотреть для них список определений. Я не тешу себя надеждой, что этот список хоть раз в жизни был прочтен, но зато я могу всегда сослаться на него.
Вводная общая часть документа содержит информацию о том, с чего мы начинали при проектировании. Конечно, в процессе анкетирования специалистов заказчика информации накапливается на порядок больше, но читать ее никому не интересно.
Эта информация собирается в рамки проекта.
Рамки проекта
Если подальше отойти от своего дома и, обернувшись, взглянуть на него, то издали вы не сможете различить детали строения. Вы можете подсчитать окна, но не разберете из какого они материала, вы можете любоваться архитектурой (”любоваться”, конечно, можно не каждым домом), но сможете только догадываться о принципах его строительства, вам не будут видны внутренности квартир или нацарапанное слово на входной двери.
Рамки проекта примерно то же самое. Прочитав эту главу каждый должен представлять, что будет получено в процессе разработки, но абсолютно не вдаваясь в детали. Вы пишите, что на сайте будет работать “регистрация пользователей”, но не пишите, как конкретно она будет устроена, или какие поля должен будет заполнить пользователь.
Рамочный уровень проектирования в любом случае проходит любой проект, поэтому записать его будет не лишним. Кроме того, большие шефы как со стороны разработчиков, так и стороны заказчика очень не любят долго читать, но любят быть в курсе всего что происходит. Этот раздел надо написать в том числе и для них.
Рамки проекта пишутся в виде сценариев работы пользователей с сайтом и описывают общую функциональность и интеракции с интерфейсом.
Информационная архитектура и интерфейс
Раздел посвященный информационной архитектуре (ИА) сайтов не стандартизируется ни одним известным стандартом (автору такие пока не знакомы). Но любой, кто разрабатывал сайты, понимает, что ИА это чуть ли не главное, что нужно знать для разработки сайта. ИА определят как будет выглядеть и работать сайт с пользователями.
Для описания ИА потребуется описывать сверху вниз:
Структуру сайта. Это так называемые высокоуровневые прототипы.
Шаблоны страниц. Низкоуровневые прототипы, описывающие непосредственно интерфейс сайта.
Опись контента. Табличное описание содержания каждой страницы сайта.
Структура сайта
Карта сайта выполняется графическим способом в одной из известных нотаций: Visio или Garrett. Я советую именно рисовать карту сайта, потому как в этом случае полученная структура получается наиболее наглядной и удобной в дальнейшем использовании. С одной стороны может показаться, что в виде списка написать карту сайта будет куда проще, но когда вы сами задумаетесь над связями различных областей сайта между собой, вы волей неволей начнете чиркать квадратики на бумаге.
О том, как можно рисовать структуру сайта с помощью нотаций, используя Visio, написаны целые статьи, поэтому останавливаться на этом не будем. Статьи написаны, правда, на английском, но вы легко сможете воспользоваться ими.
Не забывайте присваивать номер каждой отдельной странице карты сайта. Это потребуется на этапе описания контента.
Полезные советы при рисовании карты сайта:
Не жалейте места. Старайтесь располагать блоки так, чтобы они были отделены друг от друга. Это поможет читабельности карты.
Не мельчите. Прочитать текст, напечатанный 4 кеглем, в принципе можно, но это уже причина для ненависти.
Выравнивайте “квадратики” страниц относительно друг друга, выстраивая в линии. Это улучшит восприятие уровней вложенности страниц.
Не пересекайте линии. Старайтесь избегать большого количества пересечений линий связей. Если они пересекаются, то должны “перескакивать” одна над другой. Кто занимался черчением функциональных схем в университете, меня поймет.
Подписывайте карту. Подпишите саму карту, а также отдельные блоки. Это позволит меньше путаться в дальнейшем.
Почаще сохраняйте файл. Банально, но надо просто помнить об этом. Не стоит лишний раз вспоминать родственников разработчиков программы Visio, в сущности, они ни в чем не виноваты.
Пример карты сайта.
Карту сайта я обычно помещаю в раздел “Приложения”. Как правило, она на столько большая, что поместить ее посреди ТЗ становится не реально.
Шаблоны страниц
На уровне карты сайта каждая страница представляет для нас только “квадратик” на листе бумаги. Для дизайнера, верстальщика и программиста этого недостаточно, чтобы разработать сайт. Надо еще знать наличие и расположение блоков информации и функций на страницах сайта. Поэтому мы переходим к шаблонам сайта. В идеале каждый квадратик должен быть детализирован до схемы каждой отдельной страницы. Это прототипирование сайта. Использование прототипирования зависит от принятой схемы работы в компании-разработчике, но стоит признать, что это становится для заказчика крайне недешево.
Для упрощения выделяют ряд шаблонов интерфейса сайта, которые описываются вслед за картой сайта.
Описание шаблонов состоит из 3х частей:
Перечень шаблонов. Выявляются основные типы страниц и описывается их использование.
Типовой шаблон. Основные блоки. Описываются основные блоки страниц с целью уменьшить повторяемость информации.
Описание каждого шаблона согласно перечня. Шаблоны отрисовываются в любом графическом пакете (Adobe Illustrator, Adobe InDesign, MS Visio и др.), а затем дополняются кратким описанием.
Оговорка: шаблоны интерфейса сайта не надо путать с шаблонами в программной системе, на которой будет работать сайт. Шаблоны интерфейса описывают количество типовых страниц, достаточное для дизайна сайта.
Пример разворота из ТЗ с описанием шаблона интерфейса (вайрфрейма).
Описание контента
Самая долгая и нудная часть работы. Описание контента должно включать в себя перечень всех страниц сайта с точным указанием размещаемого на каждой странице текста, картинок и т.п. Также там указывается какой шаблон используется для данной страницы (см. выше). Я рекомендую использовать для этого таблицу.
Далеко не всегда на момент написания ТЗ можно с уверенностью знать какой будет контент на сайте: точное количество информационных страниц, размещение графической информации, поэтому не думайте, что в данном разделе приводится самое точное описание. Часто это не так. Но если вы опишите требуемый контент на данном этапе, то далее проект-менеджер на его основе сможет составить план поставки контента и оценить объем внесения этой информации на сайт. У клиента же всегда перед глазами будет перечень того, что ему потребуется подготовить и отредактировать.
Хорошее описание контента залог спланированной работы на этапе запуска сайта и внесения информации.
Функционал
Описание функционала сайта в техническом задании один из ключевых разделов. В особенности это касается сайтов с большим процентом программных работ: электронная коммерция, онлайн-сервисы и т.п.
Хороший пример описания функционала дает ГОСТ. Рекомендую держаться стандарта при описании функционала разрабатываемого в рамках сайта программ. Должны быть описаны: общая система, общие функциональности подсистем и модулей, взаимосвязь подсистем и модулей между собой и, наконец, перечисление всех функций модулей с более или менее подробным описанием их работы. Для каждого модуля должны быть расписаны объекты, которые создаются или используются в работе программы.
Можно также описывать структуру базы данных, предварительные алгоритмы работы, но само по себе техническое задание этого не требует. По ГОСТу подобные подробности должны описывать в дальнейших документах: эскизный и технический проекты.
Иногда при разработке крупных сайтов приходится долго посидеть, чтобы описать весь функционал внешней и внутренней части сайта. Некоторые разработчики против такой детализации. Они считают, что функционал надо описывать поверхностно, чтобы “клиенту было понятно”. Полная ерунда! По опыту могу сказать, что лишней детализации не бывает. В случае проблем в проекте менеджеры проекта с обоих сторон становятся редкостными буквоедами! Они вычитывают ТЗ вдоль и поперек стараясь доказать свою правоту. Поэтому если функционал в ТЗ прописан общими словами клиент все равно заставит сделать то, что ему надо.
Требования
Отдельный раздел должен быть посвящен требованиям к проекту или проекта к окружению. Требования, которые могут быть описаны в техническом задании на сайт:
Технические требования к системе;
Требования к персоналу;
Требования к надежности;
Требования к эргономике и технической эстетике;
Требования к защите информации от НСД;
Требования по сохранности информации при авариях;
Требования к видам обеспечения;
Требования к программным средствам;
Требования к информационному обеспечению;
Требования к техническим средствам;
Может быть также ряд специфических требований.
Все требования необходимо четко формулировать и стараться не забыть ничего из аспектов разработки вашего проекта.
Конечно, в небольших проектах нет необходимости прописывать все приведенные выше требования. Так, например, часто персонала в веб-сайте вообще нет, поэтому такие разделы пропускают.
Прочее
В процессе ведения проектов вы можете заметить, что возникают ситуации, выходящие за рамки технического задания. Возможно, вы что-то упустили, или возникла нештатная ситуация, которую вы ранее не могли предусмотреть. Все это поможет вам в дальнейшем развивать документ, привнося в него новую информацию, которая поможет использовать его в коммуникациях с заказчиком и разрешать проблемы.
Что дальше?
ТЗ составлено, подписано и поступило в работу. Что дальше? Заканчивается ли работа с ним на этом этапе? Нет.
Проект далеко не всегда идет по заранее запланированному пути. Мы стараемся что-то улучшить, изменить, часто меняются требования заказчика. Техническое задание это документ, а не скрижали. С изменением требований к проекту должно меняться и техническое задание. Обычно это делается дополнительными документами со списком изменений. Естественно, они составляются только в том случае если это действительно необходимо, на практике встречается редко.
Также вы должны быть готовы, что в процессе глубокого изучения ТЗ всеми участниками разработки в процессе работы над проектом будут найдены ошибки. Количество ошибок в большом документе прямо пропорционально его объему и обратно пропорционально времени, затраченному на его написание. Т.к. времени постоянно не хватает, следует ожидать, что ошибки в ТЗ будут возникать.
В сухом остатке
Эту статью я написал больше года назад. Прошло довольно много времени, а я за это время не написал ни одного большого ТЗ. Но, перечитав представленную информацию, согласился со всем, что здесь написано. Итак хорошее ТЗ на сайт должно содержать в себе:
Общую информацию о документе и его составителях;
Цели и задачи сайта;
Описание пользователей сайта, их цели и задачи;
Рамки проекта;
Информационная архитектура (ИА) сайта: карта сайта, шаблоны, описание интерфейса;
Описание контента сайта;
Описание функционала сайта;
Описание процесса и майлстоунов, если требуется;
Перечень всевозможных требований при разработке сайта и верификации полученной работы.
Надеюсь, что информация будет полезна широкому кругу читателей.