You are on page 1of 357

http://openlib.org.

ua/

http://openlib.org.ua/

Келли Гото и Эмили Котлер

Веб-редизайн: книга Келли Гото и Эмили Котлер
Перевод Г. Нифонтовой
Главный редактор
Зав. редакцией
Научный редактор
Редактор
Художник
Корректор
Верстка

А. Галунов
Н, Макарова
А. Михайлов
Н. Макарова
В. Тренда
С. Беляева
Н. Гриценко

Гото К. и Котлер Э.
Веб-редизайн: книга Келли Гото и Эмили Котлер. - Пер. с англ. - СПб: СимволПлюс, 2003. - 376 с: цв. ил.
ISBN

5-93286-040-5

Описываемая в книге технология, именуемая Базовым процессом, представляет
собой четкую последовательность действий, применимую к любым веб-проектам вновь создаваемым или перепроектируемым, от простых до самых сложных.
Базовый процесс универсален - он не зависит ни от типа, ни от концептуальной
направленности сайта. Эта книга поможет многим - от бывалого профи до новичка. Специалист с опытом, вероятно, подстроит Базовый процесс под свой проект,
а для новичков эта книга - прекрасное место для старта.
ISBN 5-93286-040-5
ISBN 0-7357-1062-7 (англ)
© Издательство Символ-Плюс, 2003
Authorized translation from the English language edition, entitled WEB REDESIGN: WORKFLOW THAT
WORKS, 1" Edition, 0735710627 by GOTO, KELLY; COTLER, EMILY, published by Pearson Education,
Inc., publishing as New Riders, Copyright © 2002 by KELLY GOTO and EMILY COTLER.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from Pearson Education, Inc. RUSSIAN language edition published by SYMBOL-PLUS
PUBLISHING, Copyright © 2003.
Авторизованный перевод с издания на английском языке, озаглавленного WEB REDESIGN: WORKFLOW THAT WORKS, 1* Edition, 0735710627 by GOTO, KELLY; COTLER, EMILY, опубликованного
Pearson Education, Inc. (New Riders), Copyright © 2002 КЕЛЛИ ГОТО и ЭМИЛИ КОТЛЕР.
Все права защищены. Никакая часть этой книги не может быть воспроизведена или передана в любой
форме или любыми средствами, электронными или механическими, включая фотокопирование, магнитную запись или любую информационно-поисковую систему, без разрешения Pearson Education, Inc.
Издание нерусском языке опубликовано издательством «Символ-Плюс», © 2003.
Издательство «Символ-Плюс». 193148, Санкт-Петербург, ул. Пинегина, 4,
тел. (812) 324-5353, edit@symbol.ru. Лицензия ЛП N 000054 от 25.12.98.
Налоговая льгота - общероссийский классификатор продукции
ОК 005-93, том 2; 953000 - книги и брошюры.
Подписано в печать 08.01.2003. Формат 70x90 У16. Печать офсетная.
Объем 23,5 печ. л. Тираж 3000 экз. Заказ N 667
Отпечатано с диапозитивов в Академической типографии «Наука» РАН
199034, Санкт-Петербург, 9 линия, 12.

http://openlib.org.ua/

Оглавление

Об авторах
Вступление Джеффри Вина
Предисловие
Введение
Глава 1. Ключи к успешному редизайну
Почему именно эта книга и именно сейчас?
Представляем технологию, которая работает

9
12
14
15
25
26
27

Глава 2. Один процесс, подходящий для всех
Фаза 1: Определение проекта
Выяснение
Уточнение: Определение окончательных целей
Планирование
Фаза 2: Разработка структуры сайта
С точки зрения контента
С точки зрения сайта
С точки зрения страницы
Фаза 3: Визуальное оформление и тестирование
Создание
Выверка
Переход к производству
Фаза 4: Производство и контроль качества (QA)
Подготовка
Компоновка
Тестирование
Фаза 5: Запуск и сопровождение
Передача сайта
Запуск
Сопровождение
Резюме

35
40
40
42
43
46
46
48
48
50
50
52
52
53
54
55
57
58
59
60
61
63

Глава 3. Фаза 1: Определение проекта
Сбор информации
Опрос клиента
Эксплуатационный опрос
Изучение аудитории
Определение технических требований

67
70
70
76
78
79

http://openlib.org.ua/

Оглавление
Понимание возможностей аудитории
Анализ возможностей аудитории
Определение технических потребностей
Анализ отрасли
Резюме этапа выяснения
Определение окончательных целей
Подготовка креативного брифа
Создание плана проекта
Детали и уточнения
Составление бюджета
Понимание концепции разбухания проекта
Распределение бюджета: что и как оценивать
Отслеживание времени
Составление графиков работ
Обзорный график работ
Подробный график работ с компонентами, подлежащими сдаче
Формирование проектной группы
Организация демонстрационной площадки
Планирование юзер-тестинга
Разработка плана юзер-тестинга
Что такое онлайновый опрос?
Что такое проверка с помощью фокус-групп?
Что такое юзабилити-тестирование?
Начало работ над проектом
Резюме фазы 1
Глава 4. Фаза 2: Разработка структуры сайта
Определение тематики контента
Аудит существующего контента
Структурирование контента
Создание плана поставки контента
Создание карты сайта
Пересмотр текущей организации сайта
Определение структуры сайта
Установка соглашений об именовании
Организационные наименования
Наименования HTML
Создание макета
Содержимое макета
Обеспечение навигации
Именование и маркировка
Определение основных маршрутов пользователей
Пользовательские сценарии
Резюме фазы 2

,

82
83
86
90
91
92
93
96
97
99
100
101
104
108
110
110
114
114
120
120
120
121
121
122
123
129
134
135
138
138
141
144
145
146
148
149
149
150
153
153
157
159
164

http://openlib.org.ua/

Оглавление
Глава 5. Фаза 3: Визуальное оформление и тестирование

169

Начало творческого процесса
Разработка разумного дизайна
Анализ целей сайта
Разработка концепций
Проектирование для пользователя
Представление дизайна и получение одобрения
Выверка переходов и функциональности
HTML-протосайт
Проверка функциональности
Создание графических шаблонов
Создание руководства по стилю оформления
Установка стандартов
Резюме фазы 3

172
172
173
174
177
182
190
190
192
193
196
197
198

Глава 6. Фаза 4: Производство и контроль качества
Оценка состояния проекта
Составление рекомендаций
Запланированный масштаб сталкивается с реальностью
Пересмотр возможностей аудитории
Проверка состояния контента
Проверка состояния дизайна
Уточнение плана интеграции с внутренним интерфейсом
Формирование файловой структуры
Файловая структура и масштабируемость
Разрезание на части и оптимизация
Создание шаблонов и страниц HTML
Применение облегченных сценариев
Заполнение страниц
Невидимое содержимое
Интеграция с внутренними разработками
Понимание важности контроля качества (QA)
Создание плана контроля качества (QA)
Упрощенный/неформальный контроль качества
Полуформальный контроль качества
Формальный контроль качества
Расстановка приоритетов и устранение ошибок
Заключительная проверка
Резюме фазы 4

203
205
206
207
214
214
216
217
217
219
220
222
224
228
229
231
231
233
236
238
238
239
240
242

Глава 7. Фаза 5: Запуск и сопровождение
Передача сайта
Завершение создания руководства по стилю оформления сайта
Создание пакета передачи

247
249
250
254

http://openlib.org.ua/

8

Оглавление
Отслеживание документации
Проведение заключительной встречи
Планирование инструктажей по сопровождению сайта
Возрождение
Подготовка плана анонсирования
Регистрация в поисковых системах
Запуск сайта
Эксплуатационная поддержка сайта
Оценка возможностей группы сопровождения
Внутренние и внешние группы сопровождения
Разработка плана эксплуатационной поддержки
Оценка успешности сайта
Укрепление безопасности сайта
Резюме фазы 5

255
256
256
257
258
259
264
268
269
270
272
274
276
277

Глава 8. Юзабилити-тестирование
Понимание юзабилити
Начало работы
Юзабилити и редизайн
Когда тестировать
Затраты на тестирование
Проведение юзабилити-тестов: четырехэтапный процесс
Этап 1: План и подготовка
Этап 2: Подбор участников
Этап 3: Проведение сеанса
Этап 4: Анализ данных и составление рекомендаций
Резюме главы

283
285
288
288
288
290
290
292
295
301
305
307

Глава 9. Анализ конкуренции
311
Формальный анализ отрасли и неформальный анализ особенностей.... 313
Как стать опытным пользователем в отрасли клиента
315
Проведение анализа
316
Этап 1: Определение процесса
316
Этап 2: Составление перечня особенностей
324
Этап 3: Проведение анализа и тестирования
328
Этап 4: Создание итогового отчета
330
Резюме главы
334
Учебные примеры

335

Алфавитный указатель

361

http://openlib.org.ua/

В настоящее время она совершила большой прыжок в своей карьере и перешла в Waxcreative Design (www.Об авторах UTli Келли Гото (Kelly Goto) .com) . в качестве креативного директора. она всегда имеет много предложений по работе в печати и в Интернете. а также много менее известных. оживляющим сухие темы и приносящим успех страницам журнала. включая агентство по заказу билетов Artist Booking International в Лос-Анджелесе. фирму технических писателей Pomegranate Consulting в Денвере и фотоагентство Kira Stewart Photography в Сиэтле. когда инструментом дизайнеров был PageMaker версии 1. Paramount Television. Когда Келли не привязана к своему ноутбуку. на занятиях и в перерывах. Занимаясь дизайном с конца 1980-х (помните ручное выравнивание и вывод пленок?). будучи отмеченным наградами креативным директором сайта Idea Integration (www. где она не проверяет свою электронную почту. Келли успешно управляла редизайном многих сайтов . возглавляя gotomedia. но процветающих компаний.онлайновый консультационный центр по проблемам пользовательской среды и дизайна средств взаимодействия.пользующийся успехом лектор и преподаватель в области веб-разработок. ее можно найти в странах третьего мира.ua/ . включая Warner Bros.графический дизайнер. Online. (www. Ранее. дизайнера и продюсера для многих значительных заказчиков. Работая главным образом над небольшими сайтами для отдельных творческих личностей и малых предприятий.org.com) в Окленде. В числе ее клиентов есть именитые авторы статей в «Нью-Йорк Тайме» Джулия Квинн (Julia Quinn) и Сьюзен Андерсен (Susan Andersen). информационного дизайна и пользовательской среды.waxcreative. inc. В настоящее время.0?) Келли работала в качестве креативного директора.gotomedia. ются сноубординг и горы штата Колорадо. Macromedia Corporation и Sony Pictures. веб-дизайнер. Adobe Corporation.от индивидуальных до сайтов корпоративного уровня. Келли удается обсуждать сложные разделы технологии в доступной и даже увлекательной форме. Эмили известна своим легким и ясным стилем. журналист и писатель-романист. Келли продолжает развивать новые методы совместной работы в области цифровых масс-медиа.idea. В области коммерческого дизайна начиная с конца 1980-х (помните. Калифорния. Калифорния http://openlib.com). Ее доклады и лекции вызывают неизменный интерес на конференциях и в кулуарах. National Geographic Online. Эмили Котлер (Emily Co tier) . Эмили специализируется на создании (или редизайне) недорогих эффективных сайтов. Окленд. Ее любимыми способаЭмили и Келли в усердной работе ми отвлечения от киберпространства являнад завершением этой книги. май 2001. Постоянный автор публикаций в Publish Magazine с 1998 года.

несмотря на нашу постоянную занятость и обязательное включение слова «книга» в каждый разговор.его беспримерная редакторская помощь. Благодарим оформителей нашей книги . ..каждый из них превзошел самого себя. за организацию «содержательных конференций» и предоставление места для обсуждения вопросов. Благодарим издательскую группу New Riders . верстальщика и дизайнера (он поработал над каждой страницей). голосом разума и критическим рецензентом на протяжении всего процесса создания книги . Мы обязаны многим талантливым личностям и должны выразить много благодарностей. ставших предметом этой книги. особенно Стива Бробака (Steve Broback). а также невообразимая точность сделали эту книгу лучше (это еще слабо сказано!). Дэвида Дуиера (David Dwyer).Стива Вейсса (Steve Weiss). Джима Хейда (Jim Heid) и Тоби Малина (Tobi Malina).Рени Фрисби (Renee Frisbie).ua/ . Линду Бамп (Linda Bump). разносторонних экспертов в области производства и технологических процессов. действительно вдохновленных). Благодарим Чэда Кэссирера (Chad Kassirer) и Скана Долана (Scan Dolan). Криса Нельсона (Chris Nelson). за его удивительную скорость в работе и внимание к мельчайшим деталям. фотографу. Благодарим сотрудников Thunder Lizard Productions.. в частности Мелиссу Рейен (Melissa Reyen). которые продолжали любить нас и поддерживать шутками. неописуемое великодушие и работоспособность. истощенных авторов. которыми мы (иногда) становились. внимание к мелочам и неизменное понимание. Если бы к ее написанию имели отношение только Келли и Эмили.за энтузиазм. это заняло бы по крайней мере вдвое больше времени и не дало бы столь же богатого информационного материала. за потраченное ими время на рассмотрение материалов и за очень ценные советы. Мы благодарны также Дебу Шерману (Deb Sherman).. Одри Дойл (Audrey Doyle). которому удалось запечатлеть реальных.. Дженнифер Еберхардт (Jennifer Eberhardt). Эллен Бутчарт (Ellen Butchart). особенно Эрика Торна (Eric Tarn) за его неизменную лояль- http://openlib. Спасибо нашим семьям (особенно Брайану) и нашим друзьям. Джейка МакФарланда (Jake McFarland) и вообще всех . который являлся богом грамматики. когда она была занята только книгой. и Даррена «Дага» Марзорати (Darren «Dag» Marzorati) с Серен Ховес (Serena Howeth). Уила Круза (Wil Cruz). за воодушевление и поддержку и за терпеливое ожидание Эмили в течение года. снова. а не вечно спешащих. Благодарим Стива Котлера (Steve Cotler). ходячим тезаурусом. Благодарим также Кима Скотта (Kim Scott). дизайнеров обложки (вдохновленных. проявленные при оформлении и издании этой книги. вдохновленных работой над книгой Эмили и Келли. разработчика макета. и простите нас за асоциальное поведение.Благодарности Мы не одни создавали эту книгу. Благодарим сотрудников офиса Idea Intergation в Сан-Франциско (бывший Red Eye Digital Media). Благодарим персонал «Publish Magazine».org.

Аби Котлера (Abi Cotler) и всех заказчиков Waxcreative. Сьюзен Эшер (Susan Asher). Благодарим компании и коллег. а также Лей Дункан (Leigh Duncan). Крейгу Дрейку (Craig Drake). Эрику Уорду (Eric Ward). обучение и поддержку. И моим маме и папе за годы моего воспитания. внесшим свой вклад в эту книгу: Джеффри Вину (Jeffrey Veen) за его проникновенное вступление. Лесли Финней (Leslie Phinпеу). Полли Брэгг (Polly Bragg) и Биллу Брауну (Bill Brown).ность и поддержку. Джулию Розелли (Julie Rozelle).главным образом за то.org. и Waxcreative Design. Благодарим Шерил Хамптон (Sheryl Hampton) и Лайзу Лопак (Lisa Lopuck) за дружеское партнерство и продолжительную поддержку. inc. Стиву и Джейн. Werkhaus Design. Линде Вейнман (Lynda Weinman) и бесподобному Джеффри Зелдману (Jeffrey Zeldman) (которого зовут также Theda Вага). которые поддерживали во мне веру в то. Кайену Нассири (Kian Nassiri). Посвящения Моим учителям. Кейт Лаукс (Kate Laux). Эунис Мойл (Eunice Moyle). gotomedia. Idea Integration в Хьюстоне. Дэвиду Сигелу (David Siegel). Джиму Хейду (Jim Heid). Алексу Ире (Alex Yra). Келли Гото Моим родителям. Томаса Чанга (Thomas Chung) и Джулию Боудл (Julie Bowdle). Джудит Коллин (Judyth Collin). что я потрудилась уже достаточно и можно немного просто пожить. Эмили Котлер http://openlib. особенно когда я упорно трудилась без особых успехов. Эмили благодарна Келли. Особую благодарность выражаем Серен Ховес (Serena Howeth). Дона Эшера (Don Asher). которые предоставили материалы для этой книги: Phinney/Bischoff Design. Jakob Nielsen). вдохновившим меня. .ua/ . что мы не убили друг друга в азарте работы и вернулись к нормальной жизни хорошими друзьями. которого мне посчастливилось встретить и который напоминал мне.. Спасибо . Благодарим группу поддержки в Waxcreative Design: Брайана Коглей (Brian Cogley). Ани Фио (Ani Phyo). а также Кевина Чавари (Kevin Chavaree). доктору Якобу Нильсену (Dr.. Idea Integration в Сан-Франциско. которые согласилась на некоторую задержку в исполнении их заказов в период создания этого опуса.всем рецензентам.Генриетте Дэвис (Henrietta Davis). Алона Саланта (Alon Salant). Благодарим также Эрика Отта (Eric Ott) и Дайану Смедлей (Diana Smedley) за сотрудничество и постоянные обновления. Кроме того. Кейт Гомолл (Kate Gomoll).огромное спасибо . что я могу добиться чего-то в жизни. а Келли благодарна Эмили . Рэйчел Кальман (Rachel Kalman) и всему штату дизайнеров Idea за поддержку и понимание длительного отсутствия их креативного директора. И Брайану.

com. включая легкость. а вовсе не представлял новую экономику. означают эти иконки?». новое средство массовой информации. HTML был набором от силы двух дюжин тегов. как только пересекаешь ее. таблицы. «Ну и что же. и отделились от нашей материнской компании в надежде сформировать совершенно новую информационную среду.работа по поддержанию и дальнейшему развитию сайта. еще в начале возникновения Сети. Но тогда мы стояли перед реальной проблемой . чрезвычайно расширяя возможности http://openlib. что эта новая информационная среда ставит целый ряд новых проблем. как наши первые немногочисленные пользователи посещали на- ше создание. фреймы. и она даже еще не отпраздновала своего первого дня рождения. представлявшей из себя в то время набор протоколов и стандартов. снова и снова . все. «Почему все работает так медленно?» Со временем стало очевидным. Хотя между реальным забегом и виртуальным присутствием в Сети есть и существенная разница.нужно было как-то реагировать на все эти замечания. Программа Mosaic была почти единственным броузером. приходится уже на следующий день начинать все с начала. В одно прекрасное утро в 9 часов мы включили систему. Тем не менее. никто не знал об информационных архитекторах. При такой неопределенности мы делали то. Когда я впервые пришел в журнал Wired. можно назвать редизайном.все это еще только задумывалось. Позже. И опять работа . спрашивается. Той осенью мы сформировали один из первых коммерческих сайтов в Сети. что наше оформление и интерфейсы могут по-разному выглядеть для разных пользователей. что ни один из нас тогда не понимал. HotWired. мне сразу посчастливилось сотрудничать с самыми удивительными людьми. что каждый делал бы в подобной ситуации: мы изобретали нечто по мере необходимости. Похоже.снова. Наша цель была скромной: сделать из новой среды. и мы внезапно поняли.Вступление Джеффри Вина Можно сказать. В Сети финишная черта призрачна. что мы делаем. Netscape. Вот так начался наш первый редизайн. Построение веб-сайта во многом сродни участию в марафонском забеге. Вскоре после запуска нашего сайта Netscape выпустила свой первый броузер. по мере совершенствования броузеров. каскадные таблицы стилей . что в своей карьере я кое-что сделал в области редизайна. каждая следующая версия открывала новые технологические горизонты. Никто не слышал термина «е-коммерция». с которой пользователи могут присылать свои отзывы . Работаете. что мы тогда делали. Пользователи писали: «Я не могу ничего найти!». Internet Explorer. следует признаться.org. открыли бутылку шампанского и наблюдали. так и отрицательные.как положительные. работаете и наконец в день запуска пересекаете финишную черту. По мере роста трафика мы просто разбухали от гордости. А затем стала прибывать электронная почта. JavaScript.ua/ . Первую пару лет мы провели в работе над нашим сайтом. Мы быстро наняли кого-то для сортировки почты и переадресации ее соответствующим специалистам. которых я когда-либо встречал. Шел 1994 год. используемым всеми. а термин «дот ком» был частью имени домена.

org. автор публикаций и консультант по пользовательской среде. какая она есть сейчас. Сан-Франциско Известный в интернет-сообществе с 1987 г. Я желаю вам всяческих успехов в редизайне веб-сайтов.. графического дизайна и технологии с точки зрения интересов пользователя. чтобы Сеть стала такой. Но многое еще необходимо сделать. Джеффри Вин (www. Мы оптимизировали свой сайт. я чувствую уверенность. А с такой книгой . Как ответственный за интерфейс в Wired Digital он руководил оформлением сайтов HotWired. Я бы многое тогда отдал.veen. Электронные претензии все же продолжали прибывать. в конечном счете. чтобы иметь что-нибудь. По мере развития HotWired мы добавляли новые сайты (например. что у нас не было никакого руководства при выполнении этих работ. Каждый редизайн сайта HotWired. поисковую систему HotBot. Мы проделали большую работу. что Сеть может становиться только лучше. легкой для чтения и с конкретными примерами типовых проектов. New Riders. И мы делали это. Сейчас легко задаваться вопросом: «Что. если бы?» Но видя сегодня миллионы сайтов. проходящих через множество этапов редизайна. Wired News и других. мы поняли очевидное веб-сайты могут и должны соответствовать изменениям в технологиях и возникающим благодаря им новым возможностям. необходимость модернизации определяется не этим. что они предлагают. на каком он был прежде.удобной в использовании.ua/ . Джеффри Вин (Jeffrey Veen). наподобие этой книги. Или. а также с полезными профессиональными советами это случится намного быстрее. http://openlib.этой новой среды. 4 мая 2001.com) популярный в международном масштабе лектор. если бы мы имели продуманную и выверенную стратегию развития наших интерфейсов. и пусть все отклики ваших пользователей будут только положительными.com представлял собой значительный скачок от того уровня. Он специализируется на интеграции содержания. скорее. предлагающей возможность уменьшить те огорчения и отчаяние. Мы тратили время на анализ новых технологий и того. каждый из которых обеспечивал уникальный и совершенно иной пользовательский опыт. которых привлекал Wired. Все бы складывалось иначе. Это взгляд в прошлое. 2001. В конце концов. Позже мы зарегистрировались на крупном веб-портале Lycos. Изменения вызываются ответами на два простых вопроса: чего хотят наши пользователи и как мы можем им это обеспечить. Но. При таких значительных изменениях в Сети приходилось перестраивать наш сайт снова и снова. автор книги «The Art & Science of Web Design». а не только узкий круг тех специалистов в технологически сложной области. Мне жаль. ею стал весь мир. чтобы сделать его более легким в использовании и быстрее загружаемым. которые неизбежны при непрерывном экспериментировании. Wired News и ряд других). и наша потенциальная аудитория резко возросла и стала сравнима с телевизионной. поисковой системы HotBot.

возникшей благодаря участию Келли в ежегодных конференциях Thunder Lizard (www. С 1997 г. оттачивался и стал таким.com) Эмили Котлер (emily@waxcreative. Келли поняла. Прочитав статью Эмили. Она была слишком грандиозна для одного человека. Эмили.собрала вопросы управления и технологий Сети.ua/ . Поскольку тенденции рынка сместились от реинжениринга к редизайну веб-сайтов.org. Дуэт Келли и Эмили возник за кофе с рогаликами. что нашла того. Этот процесс дробился. что этого было недостаточно. изменялся. кто может помочь ей превратить идею в книгу. Келли Гото (kelly@gotomedia. вопрос о книге был задан снова. но ясно. Келли активно выступает на этих конференциях с докладами о технологии веб-дизайна на всех ее стадиях. информационного дизайна и юзабилити сайтов под общий зонтик актуальной темы редизайна веб-сайтов. Но идея оставалась лишь идеей. и в 1999 г. относящиеся к этой области.истинный плод совместных усилий . Вот тогда родилась идея: редизайн веб-сайтов. индустриальном периодическом журнале. что редизайн веб-сайтов является сейчас подходящей темой для книги. каким представлен здесь сегодня. для которого она писала несколько лет.com) Лето 2001 http://openlib.thunderlizard. взяла у нее интервью для статьи в Publish Magazine. посетившая один из докладов Келли на технологической сессии Thunder Lizard. стала очевидной необходимость осветить моменты.com). Концепции этой книги развивались и были прямым результатом методологии процесса. И на каждой конференции задавался вопрос: «Когда вы собираетесь написать книгу?» Материалы лекций Келли в PDF-формате всегда широко и свободно распространялись. Эта книга .Предисловие Мы не вдруг решили. обновлялся.

Введение Технология проекта . http://openlib.org.ua/ .это запланированная последовательность выполняемых действий.

опросные листы. Но у кого есть на это время? http://openlib. прочитать эту книгу от начала до конца. .org. Это процесс. которая действительно работает. показывающим. Авторы будут рады откликам читателей по поводу рекомендуемых инструментов.Как работать с этой книгой Эта книга . Авторы не предлагают эту методологию как непреложный закон.не «чайники» (и эта книга не для «чайников»).это запланированная последовательность выполняемых действий. высеченный на камне. Как организована эта книга Лучше всего было бы. называемый «Базовым процессом» (Core Process). когда стоит прямо следовать предлагаемым советам. в реальных проектах. Здесь предложены таблицы контрольных проверок. они сами решат.средства. а когда что-то в них изменить.com). и описываемый здесь процесс. которые помогут в работе над проектом начиная с момента планирования до запуска и дальнейшей эксплуатационной поддержки. который шаг за шагом решает намеченные задачи. Эта книга является путеводителем. от начала до конца. Многие из обсуждаемых инструментов можно загрузить с сопутствующего этой книге веб-сайта (www. Эти инструментальные средства.web-redesign. Наши читатели . которыми можно воспользоваться сегодня. прямо сейчас в вашем текущем проекте.ua/ . Основной акцент сделан на технологию. Инструментарий В эту книгу включены инструменты . применены и усовершенствованы .руководство по методологии развития веб-проектов с учетом дополнительных и специфических потребностей в ре дизайне сайтов.это технология. В книге описывается именно процесс. на опыте которых она оттачивалась. Технология проекта (workflow of a project) . были проверены. план редизайна веб-проекта. приступая к очередному проекту. рабочие таблицы и формы. На ее страницах в доступной и пригодной для практического использования форме представлен полный. как сделать это без лишней суеты и лишних затрат. Она основана на личном опыте и квалификации авторов книги и была проверена и применена в реальном мире. как и сам Базовый процесс. здесь нет излишних проповедей и наставлений.

Б о л ь ш и н с т в о читателей. Целенаправленный и организованный подход к любому проекту сэкономит время. один и тот же.заказчиков и исполнителей проекта . Отдельными вставками в к н и г у включены советы и дополнительная и н ф о р м а ц и я по теме. Некотор ы е с в е д е н и я м е с т а м и п о в т о р я ю т с я . подробно обс у ж д а е м ы х в главах 3 .Введение У ч и т ы в а я занятость читателей. а г л а в ы . и авторы старались. о з н а к о м я т с я с обзором (глава 2). деньги и уменьшит головную боль в ходе его реализации. единственным вебмастером фирмы или владельцем компании. относящуюся к редизайну. чтобы все использовали одну и ту же терминологию и понимали шаги. даже если ваш проект рассчитан на еще меньший (или больший) бюджет. в к л ю ч а я п р и в е д е н н ы е в конце к а ж д о й г л а в ы т а б л и ц ы к о н т р о л ь н ы х проверок. чтобы ч и т а т е л и не упустили что-то важное. . Кто вы? Являетесь ли вы дизайнером. Когда мы говорим «базовый». Авторы стремились обеспечить для всех . Это с д е л а н о . конечно. прочитают осн о в н ы е г л а в ы и посмотрят рекомендуемые и н с т р у м е н т ы . кто имеет к этому отношение. приступив к ф а к т и ч е с к о м у выполнению своего проекта. которые. которые помогут вам следить за п р а в и л ь н о с т ь ю работ. с бюджетом в 10 тысяч или в 100 тысяч долларов. а фокусируйтесь на Базовом процессе.7 . При разработке нового сайта П Р О С Т О игнорируйте информацию. поискать в ней что-то конкретное и л и читать подробно. чтобы ее м о ж н о было читать с любого места или с начала. потому что многие читают книгу по темам. Кроме того. которые необходимо предпринять в любом веб-проекте. помогут о п т и м и з и р о вать в а ш у работу по редизайну. в зависимости от н а л и ч и я времени и р а с п о л а г а е м ы х средств. к н и г а построена так. принимающих решения. мы и имеем в виду базовый.д л я подробных и н с т р у к ц и й . мы действительно имеем в виду любой проект . В т а к о м случае. Независимо от типа модернизируемого сайта или направленности конкретного проекта Базовый процесс. Б а з о в ы й процесс состоит из п я т и ф а з . пытающимся перевести присутствие компании в Сети на новый уровень. во в р е м я работы над проектом воспользуйтесь п р е д л о ж е н н ы м и инструментами. 17 На заметку Помимо редизайна эта книга поможет и в изначальной разработке веб-сайта. Базовый процесс все равно будет полезен. На самом деле.общую систему рекомендаций. используйте обзор д л я общей справк и .ua/ . по существу. а не последовательно. Предлагаемые методы и инструменты легко модифицируются и обеспечивают надежную технологию и в этом случае. вероятно.эта http://openlib. Говоря о «любом проекте».рационализировать процесс редизайна сайта для каждого. Б а з о в ы й процесс с н а б ж е н набором д о п о л н и т е л ь н ы х шагов (в главах 8 и 9). Для кого эта книга? Цель этой книги .редизайн или изначальную разработку сайта. отложить в любой момент и л и просто просмотреть.org. а не только для организаторов проекта и ключевых фигур. И.

Это не обязательно руководитель внутреннего веб-отдела. вы . Если вы приступаете к выполнению своего первого веб-проекта (от уровня «Это тот шанс. это разросшаяся университетская система. найдет что-то полезное в этой книге. Результат? Полная неразбериха и необходимость отслеживать многое в обратном порядке». но не диаметрально противоположные. всеобъемлющий термин. а также и в некоторых других. применим во всех этих случаях.прекрасное место для старта. определяющий содержание сайта.это компания. собственно.от бывалого профи до новичка. кто уже имеют существенный опыт. заключившая с вами контракт. играющий какую-то организационную роль или ответственный за тот или иной аспект перезапуска веб-сайта.. концепцию и. описанный в этой книге. включающая кого-то из маркетинга. Если ваша компания является дизайнерской фирмой или компанией веб-разработчиком. К какому типу относится ваша компания? Является ли ваша компания небольшой или среднего размера фирмой по разработке веб-сайтов или же это огромная компания с целым отделом.) Таким образом. Для компаний. утверждающий проект. Эта книга поможет многим .18 Введение книга для вас. Для новичков эта книга . имеющих собственных разработчиков. то клиент будет внешним . .org. да к тому же дату запуска сайта не сдвинуть»). полагая. Те. Это действительно такая технология. который я давно ждал» до «А что же.небольшая корпорация с собственным отделом веб-разработок или компания среднего размера. Для компании веб-разработчика и для собственного интранет-отдела термин «клиент» имеет разные значения. что наиболее важно. Это довольно обычная работа с клиентом. в которой «один процесс подходит для всех». . Эта книга . («Мы начали сразу с визуального проектирования. прямо здесь они найдут весь процесс целиком.эта книга для вас. Это может быть сотрудник (или группа). нужно делать?»). в которой каждый факультет преследует собственные цели. кто хоть однажды прошел через кошмар реализации какой-либо технологии и хочет избежать этих кошмаров в будущем.для каждого (дизайнера и недизайнера). http://openlib.несколько навязчивый. это может быть группа. что веб-проект работал неэффективно («Мой клиент принес мне содержимое сайта с пятинедельным опозданием. Кто является клиентом? В этой книге «клиент» . ответственным за интранет? Возможно. что справимся с навигацией и содержимым сайта на этой стадии. вероятно. заключающая контракт с внешней проектной фирмой. клиент является внутренним..ua/ . Если когда-нибудь вы огорчались из-за того. А может быть. Базовый процесс. принимая руководство веб-сайтом вашей компании или формируя для этого специальный новый отдел.эта книга для вас. каждый. настроят под себя Базовый процесс на предмет соответствия собственному проекту и существующим процессам.

так как пренебрежение формальностями способствует недоделкам. читатели обеспечиваются примерами опросных листов. Управление внутренними проектами . * Эта книга . чем в случае внешнего клиента. В книге есть места.в частности презентация сделанных этапов обычно менее формально. совсем иная технология. возможности е-коммерции. где отдельно оговариваются ситуации при работе внутренних разработчиков с внутренним клиентом или при работе фирмы веб-разработчика/ дизайнера с внешним клиентом по контракту. этот Базовый процесс является технологией редизайна сайта.тот. знайте и учитывайте. С целью создания базовой (хоть и всесторонней) книги нам неизбежно пришлось опустить некоторые аспекты веб-разработки. Здесь организация и взаимодействие приобретают даже более важное значение. и о ней здесь просто не говорится (может быть. Даже если вы сами являетесь собственным клиентом. в особенности. В этой книге «клиент» упоминается часто.не техническое руководство Эта книга не является пошаговой инструкцией для внутренней реализации. динамически обновляемое содержимое и так далее. на ее Базовом процессе. Другие клиенты могут иногда испытывать ваше терпение и истощать бюджет проекта. то вам требуется дополнительная. В данном случае работа с клиентом . пару заместителей и. предложениями и советами .org. кто же шеф-повар и даже каков рецепт. Если вашему сайту требуется внутренняя база данных. о ней будет рассказано в следующей книге). это нередко случается и при внешних клиентах. Здесь указаны также моменты Базового про- http://openlib. Под этим всегда подразумевается . что с клиентом необходимо работать. С некоторыми клиентами очень удобно работать .все это нацелено на то. которые должны быть ясны и понятны. чтобы помочь в определении всех технических потребностей конкретного веб-сайта и в оценке реалистичности предстоящей реконструкции с учетом располагаемых средств. Кроме того. Эта книга фокусируется на технологии и.ua/ . чтобы читатели смогли оценить границы собственного проекта. которые не ориентированы непосредственно на управление проектом и его технологию.и в случае внешнего и в случае внутреннего клиента . Правда. которые могут привести к провалу. Зачастую в работе над внутренним проектом занято слишком много поваров и не очень ясно.они организованны и быстро реагируют. Эта книга. возможно. генерального директора.дело не такое простое. параллельная схема проекта.Введение 19 кого-то из производственного сектора. какой клиент будет в вашем случае. В книге предлагается обзор технических соображений. кто ставит задачу. Только вы можете знать. Для развития внутренней структуры сайта требуется собственная. Чем не является эта книга Ни одна книга не может быть обо всем и для всех. предоставляет средства и утверждает дизайн.

производителями HTML или другими специалистами.не детальное руководство по дизайну Здесь освещается технология редизайна веб-сайта.com. вам все время придется контактировать с вашей технической группой . Hayden Books.web-redesign. Можно сказать определенно .org. Пособиями по разработке и созданию сайта могут служить книги Джеффри Вина (Jeffrey Veen) «The Art & Science of Web Design».20 Введение цесса. Эта книга . В книге дан беглый обзор управления креативными этапами проекта. Дополнительные рекомендации и ссылки можно найти на www. 2001 и Джеффри Зельдмана (Jeffrey Zeldman) «Taking Your Talent To The Web». 1999.ua/ . . где пересекаются технологии внешнего и внутреннего интерфейсов и где руководители этих двух процессов должны согласовывать свои действия.и ввиду особой важности мы повторяем это в нескольких местах. существенно или нет для проекта наличие внутреннего интерфейса. 1997. New Riders. В качестве пособия по графическому дизайну мы рекомендуем книгу Линды Вейнман (Lynda Weinman) «Designing Web Graphics. И конечно. New Riders. http://openlib. не потерявшая своей значимости за эти годы. а не специфика собственно дизайна. 3». New Riders. это означает постоянное достать-сходить на протяжении всего процесса редизайна проекта. 2001 или классическая книга Дэвида Сигела (David Siegel) «Creating Killer Web Sites».что независимо от конкретных технических требований и от того.

Кроме того. Идея создания сопутствующего книге сайта не нова. в этой книге освещается технология. а также содержатся рекомендации и ссылки. веб-сайт . http://openlib. Безусловно.Пер.net) Якоб Нильсен «Веб-дизайн: книга Якоба Нильсена».не руководство по юзабилити-тестированию Опять же.com.web-design. www. не окажется ли он среди лучших. который доступен и который можно действительно использовать. есть раздел. Пошаговое руководство вы найдете в книге Джеффри Рубина (Jeffrey Rubin) «Handbook of Usability Testing».web-redesign. Наоборот. конечно. 2000 г. это дополнительное приложение. Инструкции для презентации своего сайта вы найдете на www. которые можно загрузить. 3a дополнительной информацией обращайтесь на сайт www.org. обновляются сведения об авторах (где и чем мы занимаемся) и. www. Некоторые подробности обсуждаются в главе 8. мы будем анализировать примеры редизайна различных сайтов . а чтобы показать. Глубокое философское обсуждение этой темы дано в книге Якоба Нильсена (Jakob Neilson) «Designing Web 1 Usability». На данном сайте представлены инструменты. Мы приглашаем всех сообщить URL своего переделанного сайта и посмотреть..это ресурс. на www. Это ресурс. John Wiley & Sons.web-design.web-redesign. Кроме обеспечения всеми инструментальными средствами. 1994.СПб: СимволПлюс.не из соперничества.web-redesign.com. Мы очень-очень сильно уверены в его значимости. кто модернизирует свой сайт и с какой целью. обсуждаемыми в книге. посвященный опечаткам и задержкам в издании. Читатели могут использовать эти инструменты как свои собственные.ua/ . (www.web-redesign. с англ. 1999. Когда в книге речь идет об инструментах. Веб-сайт не заменяет книгу. Inc.com содержатся ссылки на связанные с данной тематикой источники информации. New Riders. здесь довольно часто говорится о юзабилити-тестировании.com В отличие от сопроводительного компакт-диска.com.com хостинг предоставлен Compass Communications. . но главным образом они касаются подхода к управлению проектом и технологии. который можно обновлять.ccom. всегда уточняется возможность их загрузки с www.21 Введение Эта книга .

ПОЗДНЕЕ И ЕЩЕ ПОЗДНЕЕ] Прошел через несколько этапов.ua/ . пока развился от пилотного проекта в значимый коммерческий веб-сайт.com Директор по дизайну (редизайн): Проектная группа: Внутренняя Директор по дизайну (первоначальный Арт-директор (редизайн): дизайн): Джонатан Таттл (Jonathan Tuttle) Руководитель проекта (первоначальный Эллисон Аппен (Allyson Appen) Шеннон Миллер (Shannon Miller) Руководитель проекта (редизайн): Алиса Коэн Рейтер (Alissa Cohen Reiter) дизайн): Джон Стросс (John Stross) ПРЕДЫДУЩИЙ BABYCENTER.org.babycenter.22 Учебный пример Baby Center Клиент: Baby Center URL: www.COM [ПРЕЖНИЙ. Каждый редизайн основывался на оценке интересов потребителей. (1997-1999) http://openlib.

включая эффективное использование персонализации. включающее рост персонализации и представление содержания. стр. 338-339 http://openlib. (2000) Результат: Наличие собственных специалистов обеспечивает быстрое реагирование на интересы пользователей и непрерывное усовершенствование. который сохранил несколько удачных элементов прежнего сайта. Главная задача компании состояла в создании в Интернете наиболее полного информационного ресурса для будущих и молодых родителей. См.com специализируется на информации о беременности. младенчестве и раннем детстве.org. цветную вклейку.23 Учебный пример BabyCenter.ua/ . СОВРЕМЕННЫЙ BABYCENTER [ПЕРЕПРОЕКТИРОВАННЫЙ] Ввел членство с известной системой сообщений и ссылками. Перепроектированный сайт стал практичнее в использовании благодаря более простому дизайну. а также о товарах для мам и младенцев.

В том числе и для редизайна.org.ua/ . поэтому избирайте проверенный путь. http://openlib. Устраняйте недочеты и не упускайте из виду посетителей сайта .это главный ориентир.Ключи к успешному редизайну Успешный редизайн сайта позволяет избежать прежних ошибок.

что приходится масштабировать..не союзник. как и каким образом это сделать. посещение которых особенно важно для компании. вы не уверены. и пользователи не попадают на страницы. что работало ..вчера. Чтобы одержать верх над конкурентами и оставаться на ведущих позициях. Команды веб-разработчиков. которые осознали необходимость присутствия в Сети в последние два. вероятно. подобные нашим).прижаты к стенке. Есть много веских оснований для редизайна. перепроектирование и реконструкцию того. вы. когда приобрели свою компанию... Время . Вам нужна система управления контентом.. и теперь информация на обоих сайтах не соответствует действительности. главным образом (как с учетом волны реконструкций. branding) . необходимо производить переоценку. успеть заключить контракт с дизайнерской. Вы хотите перенести сайт на собственную территорию. Вы хотите обновить оформление сайта с помощью Flash или других средств. теперь .... ред. то есть до момента полного обновления. что следует делать дальше. фирмой (или с лучшей дизайнерской фирмой) или даже сформировать внутренний отдел веб-разработок . Мало того.ua/ . Возможно. Несмотря на частую неопределенность в экономике..только бы не отстать... Ваш брендинг1 никак не отражен. занятые новыми или перепроектируемыми сайтами. так и давления экономических условий) стремятся к тому. Вы унаследовали старый. чтобы расширить сферу услуг. Давление может быть поразительным.org.Примеч. но требуется еще и спешить с этим. чтобы не отстать от конкурентов. науч.Ключи к успешному редизайну Почему именно эта книга и именно сейчас? Присмотритесь к Сети. Почему именно эта книга и именно сейчас? Потому что она необходима... Каков процесс? Брендинг (от англ. Компании. практически неэффективный брошюроподобный сайт... чтобы их проекты продержались от шести до девяти месяцев. шесть лет. На вашем сайте непорядок с навигацией. наращивать и увеличивать активность в Интернете. Сколько из регулярно посещаемых вами сайтов изменили свой облик за последние год или два? Несколько? Да. Некоторыми общими целями редизайна являются следующие: «проделать это именно в данный период».или по крайней мере казалось работающим . раздумываете.. бизнес и Сеть переплетены.. мы это тоже заметили. Если что-либо из перечисленного применимо к вам (а это лишь некоторые из множества примеров).увы .продвижение торговой марки. Вы никогда и не ставили брендинг на первое место.. подобные вашей (и клиенты. http://openlib. В ближайшие 12 месяцев значительной перестройке подвергнется огромное количество веб-сайтов. три. . Ваша компания объединилась с другой. Вам потребовались возможности е-коммерции. «переопределить направленность присутствия в Сети» или «сравняться с конкурентами».

и этими инструментами можно воспользоваться немедленно. промышленным технологическим планом. Просто нужна стратегия. Назовите это планом. Но это не так.является сейчас как нельзя более своевременным. которые не производят веб-сайт за веб-сайтом. . не имеющих твердой методологии на местах.org.На нашей конференции по веб-дизайну Келли окружила целая толпа после ее докладов по технологии. и мы ими поделимся. можете назвать библией . уже проверены и оказались успешными. Почему именно эта книга и именно сейчас? Введение цельной веб-технологии . Эта отлаженная схема действий дополнена инструментальными средствами. плохо продуманные цели и сроки. Вы можете сказать. потому что так оно и есть.или редизайн. в большинстве своем продолжают повторно изобретать колесо . или как управляющие. настраивали. снова использовали и так далее .сказал Джим Хейд (Jim Heid).мы предпочитаем называть это технологией. но Келли показывает. или в обоих качествах. Звучит. каждая из которых озабочена необходимостью редизайна сайта. Возьмите методологию Келли. или неуспех. Она станет более умной. http://openlib. которые мы использовали. которая работает.это единственный путь. и ваши конкуренты могут просто обойти вас на виртуальных милях. Эта книга поможет. даже вас. . направленной на редизайн . что каждый дизайнер проходит через кошмары реализации проектов. понятным. Думайте. как тщательное планирование и организация позволяют держать все под контролем». небрежно составленный бюджет.каждая со своим индивидуальным проектом редизайна. Можно надеяться на это. Сеть будет и дальше изменять все правила. которая работает Множество факторов может вызвать неудачу или задержку проекта: непредвиденные технические проблемы. станет более приспособленной к нуждам пользователей. назовите путеводителем. У нас есть некоторые серьезные соображения. Предлагаемые инструменты всегда применимы. предложит больше сервисов. Это вовсе не требует стольких усилий. как коварная игра.или как дизайнеры.для дизайна и редизайна веб-сайтов. Да.Ключи к успешному редизайну 27 Процесс должен существовать. прямо сегодня. или для небольших и средних фирм. Сеть никого не ждет. председатель конференции Thunder Lizard. ее выступления всегда имеют очень высокий рейтинг. . неорганизованность клиента. особенно для внутренних разработчиков. что Сеть будет развиваться и дальше. После существенной отработки на многих проектах редизайна веб-сайтов родилась технология. Решением является эта книга. Многие сталкивались с этим . Нужен план. которая работает. Эта книга является четким.в частности. Компании во всем мире. прежде чем действовать. надежная технология редизайна сайта. добавьте сотрудничество с Эмили и получите эту книгу. На что можно рассчитывать однозначно. так это на то. Но сейчас . «Дизайнеры крайне нуждаются в руководстве по технологии процесса».ua/ . Представляем технологию. Между тем.

ua/ . Ориентируйтесь на потребность. планирование. аудиторию. особенно жалобы. представленные в этой главе. проверка своих предположений. Для определения конкретных проблем проведите юзабилититестирование.Примеч. а также по разработке приложений и внутреннего интерфейса).ДЕСЯТЬ ЭФФЕКТИВНЫХ СОВЕТОВ ДЛЯ УСПЕШНОГО РВДИЗАЙНА. Что в настоящее время работает на вашем сайте и что требуется изменить при редизайне? Проанализируйте звонки и письма посетителей. Сформулируйте цели. ред. СОВЕТ 6 СОВЕТ 7 Своевременно консультируйтесь с техническими специалистами Не пренебрегайте юзабилититестированием В ходе процесса своевременно консультируйтесь с техническими специалистами (по HTML. Со временем на опыте редизайна ряда проектов стала очевидной важность нескольких факторов: общение с клиентом. Мы опробовали эту минифилософию на ведущих сайтах и на новичках. Смогут ли посетители использовать обновленный сайт? Наблюдайте и анализируйте. Технические специалисты помогут правильно спланировать проект и разобраться. В ходе работ проведите юзабилити-тестирование текущего и модифицированного сайтов. как кто-то пытается воспользоваться вашим сайтом. анализ текущего сайта и так далее. науч. Этот перечень ни в коем случае нельзя считать исчерпывающим. content) . а затем делайте практические выводы из этих наблюдений. Это поможет сэкономить время и избежать головных болей в разгаре работ. Осознайте. пока делаете это. Десять советов. что необходимо иметь в виду по мере продвижения по фазам процесса. контент2. что является технологически выполнимым на каждом этапе.это событие.28 Глава 1 ДЕСЯТЬ ЭФФЕКТИВНЫХ СОВЕТОВ ДЛЯ УСПЕШНОГО РЕДИЗАЙНА Процессы развиваются. что нужен не только более привлекательный интерфейс. Определите проблемы в этой области и постарайтесь справиться с ними при редизайне.(зд. Ничто не дает более ясной оценки. При редизайне не забывайте о пользователях. Что явилось результатом? Предлагаемый перечень факторов. а затем добивайтесь их осуществления. СОВЕТ 1 СОВЕТ 2 Думайте. чем наблюдение за тем.org. технологию. наполнение сайта.) содержимое. Все это будет обсуждаться здесь и на последующих страницах. Планируйте планирование. Контент (от англ. Логичная технология поможет охватить все главное. информация на сайте. возможность масштабирования. а не просто угадывайте их. это скорее полезный минимум того. промышленное позиционирование. Это общая ошибка. охватывают многие аспекты: планирование. . . И держите все под контролем. Редизайн . масштабируемость и другие. что считаете себя отставшими от времени. юзабилити. которые непременно необходимо учитывать здесь должны звучать литавры. прежде чем действовать Определите цели и задачи редизайна Не воздвигайте новый сайт просто потому. http://openlib.

org. чем ваш сайт отличается от конкурирующих. Разрабатывайте для пользователей. терпели провал из-за неправильного представления и ошибочных предположений. Выясните. но и позволяет сразу оценить введенные изменения и исправить неудачные моменты. Привлекайте к процессу редизайна базу своих текущих пользователей. Оцените. корректировать. Знайте своих пользователей. как они работают. Прилагайте все необходимые усилия. а не для инвесторов СОВЕТ 8 СОВЕТ 9 СОВЕТ 10 Осознайте значимость своевременной поставки контента Четко представляйте желаемые результаты Продумайте все в целом. начав с красивого старта. заранее объявите. Не ошибитесь. который будет регулярно обновлять контент: собирать информацию. Каждый выпускаемый на сайте документ должен ясно отображать ваши цели. работающая над одной и той же страницей. http://openlib. Не пытайтесь сделать все сразу. что вся команда. Поставка контента . Специально привлеките со стороны клиента заинтересованного человека. беря в расчет не ту аудиторию.29 Ключи к успешному редизайну СОВЕТ 3 СОВЕТ 4 СОВЕТ 5 Анализируйте свою конкуренцию Привлекайте вашу текущую аудиторию Объективно рассмотрите свою отрасль. пользуется одной и той же терминологией. писать и своевременно передавать ее. почему и когда ваш сайт будет реконструироваться. Сравните их возможности и услуги. Не умаляйте значимости планирования в работе с контентом сайта. Посмотрите на сайты конкурентов. Нередко проекты. так можно свести себя с ума. Вводите изменения поэтапно. сосредоточьтесь на этапах Взаимодействие играет ключевую роль. Убедитесь. чтобы потребности аудитории были совместимы с вашими деловыми целями. что именно работает.ua/ . Очень часто аспектами юзабилити сайта жертвуют в угоду требованиям рекламодателей или инвесторов. Не отпугивайте их внезапными изменениями.один из главных аспектов почти всех проектов редизайна веб-сайтов. фактически опробовав сайты конкурентов и свой собственный. Это не только делает планы ввода обновлений более реалистичными. Если веб-сайт неудобен для использования. ваше присутствие в Сети рискует потерпеть неудачу.

хорошая стратегия редизайна рассматривает обоснованную технологию. информационными. Разумеется. вторичную аудиторию (группу наиболее важных заказчиков) и третичную аудиторию (остальных посетителей сайта). это должно быть подкреплено фактами. Однако независимо от множества аспектов первостепенная задача . http://openlib. привлечении и убеждении клиентов.ua/ . Во время редизайна можно и разориться. Она должна синхронизировать и оптимизировать все усилия. напрасным расходам и частичному или даже полному провалу. деловую модель. С этого начинается хорошая стратегия редизайна.подойти к проекту с одной центральной позиции: с перспективы посетителя. обучении.наиболее важный аспект для успешной стратегии редизайна и для организованного проекта. надежный процесс.это разработка четкого плана действий. чтобы повысить возможности сайта в информировании. Для этого полезно выделить из аудитории сайта несколько категорий пользователей: первичную аудиторию (круг наиболее частых пользователей). Разработка такой перспективы .org. так как в этом случае требуется четкая система приоритетов вкупе с моделями поведения и потребностями посетителей. стратегия . Говоря проще. стратегия веб-редизайна включает создание органичного плана по улучшению существующего веб-сайта с целью повышения качества обслуживания заказчиков и достижения желаемых результатов бизнеса. для чего они перепроектируют свое вебпредставительство . . структуру контента и позиционирование бренда в Сети. а также в продаже им товаров или услуг. но многие компании считают деление пользователей на категории проблемой. Быстрые изменения в бизнесе и технологиях требуют постоянного контроля над ведомственными. Однако определив эти основные моменты. производственными. Таким образом. Как ни странно. но чтобы привести к успеху. это нередко случается даже с крупными предпринимателями. Сказанное кажется несложным. надежный мост между текущим и будущим состояниями.Глава 1 30 Лей Дункан (Leigh Duncan) об определении проблем и стратегии редизайна Когда компании не могут ясно выразить. проектными и другими сторонами деловой активности.их усилия часто приводят к необходимости переделок. анализом и всесторонней стратегией. Хотя порой они совершенно правильно «нутром чувствуют» необходимость редизайна. Эта перспектива требует от всех участников процесса редизайна отстраниться от исключительно деловых соображений и согласованно учесть потребности посетителей.как это изменит их деятельность и ее результаты.

Ключи к успешному редизайну
намного проще спланировать сайт, основанный на взвешенных потребностях
аудитории и детальных деловых предпосылках. Кроме того, становится намного легче справиться с другими стратегическими задачами, например с такими,
как:
• Обзор бизнес-плана
• Оценка текущего состояния
• Видение будущего состояния
• Проверка и тестирование аудиторией
• Планирование контента и сервисов
• Креативный бриф3/стратегия дизайна
• Технический подход к реализации
• Маркетинг и бизнес-планирование
Эти задачи хоть и не являются исчерпывающими, но выявляют некоторые по-

31
следующие стратегические шаги в редизайне и показывают, как учет интересов
посетителей создает основу для практической оценки производственных, технических и проектных проблем. Когда
эта основа создана, любой организатор
редизайна веб-сайта будет чувствовать
больше уверенности в успехе проекта.
Лей Дункан, ветеран этой отрасли с 10летним стажем (с недавнего времени
заведует е-коммерцией в KPMG Consulting) и глубокими знаниями е-коммерции на разных платформах, консультировала по стратегии е-бизнеса и маркетинга, дизайну и управлению контентом клиентов мирового уровня,
включая Target Corporation, Proctor &
Gamble, Chevron, 1-800-FLOWERS и America Online.

Креативный бриф (от англ. creative - творческий и brief - краткий) - изначально, в
рекламе: документ, составленный со слов клиента, в сжатом виде содержащий в
себе техническое задание креативному отделу агенства, на основании которого он
(отдел) создает творческую концепцию будущей рекламной кампании. Применительно к редизайну КБ - краткое техническое задание, содержащее в себе базовую
концепцию, стратегию и позиционирование будущего сайта. — Примеч. науч. ред.

http://openlib.org.ua/

32

Учебный пример

Smug
Клиент: Smug
URL: www.smug.com
Проектная группа: fearless.net, Нью-Йорк
Издатель: Лесли Гарполд (Leslie Harpold)
Бюджет: Ноль долларов и два одобрения

ПРЕДЫДУЩИЙ

SMUG.COM [ПРЕЖНИЙ] использовал иконки для выделения различных категорий рассказов и произведений. Ряд простых ссылок адресовал к заархивированным в хронологическом порядке материалам.

SMUG.COM [ПРЕЖНИЙ] ОБЪЯВЛЕНИЕ О НОВОМ SMUG.COM [ПЕРЕПРОЕКТИРУЕМОМ] - это
юмористическое объявление представляло веб-сайт
несколько месяцев во время его редизайна. Предлагался вход на существующий сайт или возможность оставить электронное сообщение для тех, кто желает получить уведомление о запуске обновленного сайта.

http://openlib.org.ua/

Учебный пример

33

Smug - это давно существующий некоммерческий
юмористический журнал, издаваемый ежемесячно редактором-дизайнером Лесли Харполдом. Запущенный в
1996 г., сайт берет свое начало из печатавшейся в конце
1980-х - начале 1990-х годов серии «Сделай сам». За
эти годы Smug опубликовал в Сети ряд интереснейших
опусов.

СОВРЕМЕННЫЙ

SMUG.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] отказался от графики в пользу упрощения благодаря недавно
созданному инструменту для управления контентом.
Цель редизайна - облегчение процесса поддержания
сайта как интерактивного журнала, перешедшего с ежемесячного обновления на обновление дважды в месяц.
Результат: Хорошо отлаженное обновление.

См. цветную вклейку, стр. 340-341

2 Зак. 667

http://openlib.org.ua/

Один процесс,
подходящий для всех

2

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

http://openlib.org.ua/

36

Глава 2

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

http://openlib.org.ua/

Один процесс, подходящий для всех

37

http://openlib.org.ua/

38

Глава 2

http://openlib.org.ua/

сложные функциональные возможности или ничего. которую может взять на вооружение и адаптировать для своих нужд любая команда веб-разработчиков. Это один процесс . то при адаптации Базового процесса стоит включить и эти шаги. Базовой процесс предусматривает все необходимые шаги. никакие объяснения. В этой главе в форме обзора представлен один процесс. Flash или HTML. но с особым акцентом на специфические особенности редизайна веб-сайтов. кроме динамической смены графики на JavaScript (rollovers).популярный на западе вид методического материала для студентов. Все проекты требуется реализовать. . главу 9 «Анализ конкуренции»). что также можно сделать (дополнительно) и чего следует остерегаться. редизайн сайта или создание абсолютно нового веб-представительства. Кроме того. Базовым процессом могут воспользоваться группы любых типов и компании всех видов с различными бюджетами. Эти сведения даются далее в соответствующих главах.юзабилити-тестирование сайта (см.org. Если позволяют время и деньги. Для каждого требуется организация контента и планирование структуры. Примеч. конспективно излагающего какую-либо книгу в виде ее краткого обзора.ua/ . подходящий для всех. В книге описано.состоящий из пяти последовательных фаз. а также другая полезCliff Notes . ред. применимых ко всем проектам. http://openlib. Все нуждаются в запуске. Такие брошюры имеют яркую черно-желтую расцветку и выполнены в едином формате. Там обсуждаются инструменты и схемы.. Далее в этой главе представлена версия Базового процесса в виде обзора на ма1 нер Cliff Notes. Все сайты. авторы настоятельно рекомендуют два дополнительных процесса . науч. Все до единого. подходящий для всех Один процесс. Это набор основных шагов.Базовый процесс. Однако не забывайте наставления школьных учителей: «Не полагайтесь только на один обзор!» Здесь не приводятся никакие подробности. Все веб-проекты должны быть тщательно распланированы и охарактеризованы. почему и как.Один процесс. у всех сайтов есть общие требования к построению.. главу 8 «Юзабилити-тестирование») и анализ конкуренции (см. Всем необходим эстетический дизайн. подходящий для всех Это единая всесторонняя технология. что должно быть сделано (обязательно).

лишь краткий обзор. в частности знание аудитории. так что на месте с учетом конкретных условий следует производить необходимые модификации. можно сказать.от бюджета до нужд поддержки.ua/ . Работа. закладываются основы всего процесса редизайна. Безусловно. Выяснение Потратьте как можно больше времени на выяснение текущего состояния компании. Проанализируйте теку- http://openlib. играют важную роль на каждом этапе процесса.самая большая фаза Базового процесса. и каждый готовый компонент. В фазе1. Она только знакомит с Базовым процессом. проделанная в этот период. который будет создан. ответы можно найти в книге) и накопится много данных . При определении масштаба проекта следует принимать во внимание все . Многие аспекты этой фазы в той или иной мере воздействуют на все последующие стадии работ. чтобы получить в конце ожидаемые результаты. данная глава . каждый проект уникален. Фаза 1 .org. Собирайте информацию и задавайте вопросы. Побольше узнайте об аудитории сайта. необходимой для осмысления масштабов проекта и подготовки к началу работ. и каждая группа и бюджет имеют разные запросы и возможности. которое будет предпринято. Фаза 1: Определение проекта Первая фаза Базового процесса включает все. В то время как последующие главы детализированы. определяет весь проект . а некоторые. В первые моменты появится множество вопросов (успокойтесь. ее сайта и формулирование проекта его обновления. отражающиеся на специфике проекта. что касается сбора и анализа информации. Независимо от размера или масштаба проекта всегда требуется планирование. которые необходимо использовать.Глава 2 40 ная информация.данных.каждое действие.

Создайте профиль пользователя. или ведомость клиентских технических требований (Client Spec Sheet). к каким типам сайтов они могут обращаться.ua/ . ВЫЯСНЕНИЕ > > > > > Распространение/сбор/анализ опросов Сбор имеющихся у клиента материалов Изучение аудитории Выяснение технических возможностей аудитории Выяснение потребностей внутреннего программирования > Распространение/сбор/анализ опросов Собирайте информацию. а также вторичную аудиторию. Собранные данные позволят понять аудиторию и задачи сайта. Оба опроса полностью приведены в этой книге. ежегодные отчеты. Ведомость клиентских технических требований — производственный элемент. Ознакомьтесь с текущими маркетинговыми материалами и вникните в общий маркетинговый план. Осмотрите территорию и оборудование клиента. кто посещает сайт. > Выяснение технических возможностей аудитории Узнав о пользователях. так и в оффлайновом аспекте. Опросный лист клиента (Client Survey) и эксплуатационный опросный лист (Maintenance Survey) должны быть вручены клиенту в начале работ по проекту. чтобы составить представление о том. > Сбор имеющихся у клиента материалов Запросите материалы: брошюры. Возможности аудитории определяют такие данные. плагины. > Изучение аудитории сайта Используйте данные. которые помогут клиенту сформулировать ожидаемые результаты.Один процесс.com. с какой целью и какие задачи выполняет на сайте. как платформа. а также могут быть загружены с www.org. что может понадобиться создание таких профилей для нескольких целевых групп. выясните.web-redesign. полученные из клиентского опроса. Постарайтесь понять стратегию сайта и ее значение для его посетителей. образцы продукции и так далее. сопутствующие данные. магазины и/или существующий сайт. Выявите целевую. Часть ее вклю- http://openlib. Расширенный опрос. быстродействие связи. типы языков программирования. Войдите в роль квалифицированного пользователя на сайте клиента. подходящий для всех 41 щий сайт и сравните его с конкурирующими как в онлайновом. Это четкие и всесторонние анкетные опросы. следует вручить клиенту вскоре после начала работы над проектом. Имейте в виду.

не успеете осознать.org. в главе 9.отрасль клиента. готовым к сдаче компонентам и процессам поможет сохранить проект в рамках намеченных целей. Медленное.ua/ . каким он был определен вначале.com. изменение внешнего оформления сайта и так далее. Тут требуется войти в роль квалифицированного пользователя из круга заказчиков клиента. Подробнее о разбухании проекта см.в онлайновом и оффлайновом аспекте . выполните там различные операции. чтобы быть в курсе состояния дел его конкурентов.com. позвоните в службы по работе с заказчиками и выясните. Мелочи добавляются и добавляются. Сформулируйте основные цели редизайна. неизбежное разбухание проекта . до чего-то заметно большего . кому это необходимо.от того. сокращение звонков в службы поддержки. Определение термина «внутренний» в контексте этой книги дано во «Введении». Расширенный технический опросный лист можно загрузить с www. имея информацию. а что неудачно реализовано в обслуживании. Являясь достаточно простым инструментом. как это произойдет. Подробное описание расширенного процесса см. улучшение навигации по сайту. http://openlib. в описании фазы 1. Разбухание проекта неуловимо. > Выяснение потребностей внутреннего программирования Это необязательный шаг — только для тех. На совещании по поводу начала работ над проектом охарактеризуйте проблему разбухания клиенту и всему составу проектной группы и объясните. расширенный технический опросный лист (Expanded Tech Check) предлагает клиенту несколько вопросов. Уточнение: Определение окончательных целей Теперь. а полностью ее можно загрузить с ivww. что удачно. включая ответ на вопрос: «Для чего потребовалось изменить сайт?» Этими целями могут быть необходимость увеличения трафика. то проект нуждается во внутреннем программировании и должна применяться дополнительная технология.случается почти с каждым проектом.42 Будьте готовы к разбуханию проекта Вникните в концепцию разбухания проекта (Scope Creep) и подумайте. Глава 2 чена в обсуждение фазы 4. Посетите побольше сайтов.web~redesign. Берегитесь на вид незначительных просьб клиента о мелких добавках к проекту. что составление аккуратных таблиц по заданиям.web~redesign. Если на любой из них дан положительный ответ. > Анализ отрасли Проанализируйте . необходимо извлечь из нее самую суть сайта и определить его задачи. как это на нем отразится. упрощение процесса продаж.

Хотя бюджет обычно зависит от того. так как он определяет объем. Воспользуйтесь счетчиком бюджета (budget tracker) . что касается каждого отдельного аспекта проекта. комплектование проектной группы и многое другое. а проектная группа руководствуется им в своей работе. когда цели сайта определены. можно приступить к составлению графика конкретных действий по редизайну. подготавливаемые на этой стадии. ПЛАНИРОВАНИЕ > > > > > > > > Составление бюджета Установка средств отслеживания времени работы Составление графиков работ Формирование проектной группы Организация демонстрационной площадки Планирование юзер-тестинга Компоновка плана проекта Начало работ по проекту > Составление бюджета Из всех административных задач самой первой.org. Этот документ еще раз определяет целевую аудиторию. Составьте реальное представление о ресурсах. является составление бюджета.сводка всех оформительских и концептуальных задач. естественно. цели пользователей на сайте и стратегию взаимодействия с ними. фактические расходы основаны на времени работы над проектом.Один процесс. графики.инструментом. который поможет контролиро- http://openlib. чем располагает клиент. подлежащие сдаче компоненты проекта. допустимые границы затрат и осуществимость проекта. Документы. Их можно загрузить с www.com. Креативный бриф утверждается клиентом. подходящий для всех 43 УТОЧНЕНИЕ: ОПРЕДЕЛЕНИЕ ОКОНЧАТЕЛЬНЫХ ЦЕЛЕЙ > Подготовка креативного брифа > Подготовка креативного брифа Креативный бриф проекта . Теперь.ua/ . станут компонентами плана проекта. распределении времени и определите готовые. При подготовке креативного брифа воспользуйтесь предлагаемыми рабочими таблицами. Планирование Здесь хватает административных задач: бюджет. Он также обрисовывает предлагаемый стиль и общий облик сайта после редизайна.web-redesign.

так и детальный график (где отражено все: и сроки готовности отдельных компонентов. При распределении индивидуальных ролей помните. в описании фазы 1. которые следят за временем и обычно знают. кто не отслеживает время. > Установка средств отслеживания времени работы Выберите надежный способ отслеживания времени. а затем в детальном графике . На всем протяжении работы над проектом поддерживайте взаимодействие со всеми членами группы.прибыльны. и сроки платежей) вызывают чувство срочности. . Этот инструмент можно найти в описании фазы 1 или загрузить с www. Глава 2 вать и отслеживать бюджетные траты. http://openlib. предложенные в книге (они представлены в описании фазы 1). Для этой цели существует много средств . Сравнивайте фактические затраты времени с запланированными. При регулярной оценке затраченного времени легче заметить. Найдите способ. В качестве образцов можно использовать графики работ. занятого работой над проектом.день за днем. удобный для вас. Это важно как для фирм-разработчиков. Подробнее об отслеживании времени см. поэтому четко очертите круг обязанностей для каждого из них. Основные задачи процесса проектирования перечислены при описании фазы 1. это помогает проанализировать доходность и позволяет оценить время работы над проектом каждого сотрудника группы (и его долю в бюджете проекта). Те же.удачных и неудачных. который позволяет вам и клиенту видеть перспективу).44 Отслеживайте затраченное время В общем случае организации. и даты сдачи-приемки.org.или неприбыльны или просто удачливы. и непременно пользуйтесь им.com. так и для внутренних отделов разработок.ua/ . и затем тщательно и точно считайте рабочие часы. что сотрудникам придется выполнять множество разноплановых задач. Установите способ отслеживания времени. занятого работой над проектом. когда проект выходит за свои рамки. > Формирование проектной группы Укомплектуйте проектную группу. > Составление графиков работ Назначенный срок сдачи обычно стимулирует сотрудников. Пара способов отслеживания времени предлагается в описании фазы 1. Обозначьте сроки в двух местах: сначала в общем плане работ. как складывается их бюджет и как он используется. .web-redesign. Как общий план работ (общий взгляд на проект.

кто со стороны клиента имеет право подписи. чем его подпись на документе. но. Существует много проверенных способов обратной связи (фокус группы. В описании фазы 1 предложены образцы некоторых компонентов плана проекта. Будет ли это сайт клиента или отдельный сайт для проекта. Для каждого проекта создайте отдельный каталог (или заведите отдельную папку для бумаг). бюджета или графика работ.Один процесс. чтобы избежать недоразумений. имеющие отношение к тематике проекта. графики работ. Более подробные сведения на эту тему см. Для работы проектной группы создайте отдельную площадку без доступа к ней клиента. креативный бриф. подходящий для всех > Организация демонстрационной площадки Демонстрационная площадка играет роль центрального пункта координации работ. предъявляемых к конкретному проекту. чтобы помещать туда все подписанные документы: контракты. > Компоновка плана проекта Требования к документации изменяются от проекта к проекту. что оно показывает. что они лишь думают по этому поводу. > Начало работ по проекту Общее собрание . Форма представления может быть различной. чаще всего это зависит от формальных требований. утвержденную карту сайта. брифы.хороший старт работ над проектом. В описании фазы 1 предложены различные формы юзер-тестинга.org. исходную заявку и последующие изменения. в какой форме организовать юзер-тестинг проекта. Выясните. > Планирование юзер-тестинга Подумайте. Одобрения по электронной почте хороши как предварительное согласие. интерактивные анкеты и так далее). как и общее количество страниц. Эта клиентская демонстрационная площадка всегда должна отражать текущее состояние работ. это должен быть конкретный URL для размещения и просмотра текущих материалов по проекту. техническую документацию и другие материалы. то протоколируйте это и заверяйте подписью клиента. Порой клиенты очень забывчивы. В этом случае хорошо помогает вежливое напоминание о подписанных ими документах и утвержденных ими сроках сдачи работ. в главе 8. Есть надежное практическое правило: если обсуждение касается размера проекта. о не то. но юзабилити-тестирование сайта отличает именно то. должна быть удобной в эксплуатации и обеспечивать легкий переход от одних материалов к другим. Подробный план проекта содержит бюджет. как пользователи на самом деле используют сайт. стиль визуального оформления и так далее. всегда добивайтесь подписанного документа: просите прислать подписанную копию по факсу. Познакомьте клиента с проектной группой и собранными на стадии выяснения материалами http://openlib. в описании фазы 1. Более подробно о документации см.ua/ . 45 Скрепляйте все изменения подписью клиента Ничто не делает клиента более ответственным.

Контент и структура сайта взаимозависимы: нельзя создать одно. . не продумав другое. но разработка надежной. Да. определяющей.org. Создается ли сайт для новой компании или перепроектируется имеющийся сайт.это неважно: логическая структура необходима любому веб-сайту. чтобы пользователи сайта могли найти ее легко и быстро. что касается его содержимого и информационной стратегии. Разработка структуры сайта включает все. определяет процесс структурирования. С точки зрения контента Без хорошего. как должна быть организована информация. Фаза 2: Разработка структуры сайта С фазы 2 начинается практическая работа над проектом.Глава 2 46 (если они собраны). Четко обсудите способы взаимодействия и запланируйте еженедельные встречи или сеансы конференц-связи на весь период работы. которым организован контент. охарактеризуйте ожидаемые результаты и установите рамки проекта. хорошо продуманной схемы заложит основу для всего остального. С ТОЧКИ ЗРЕНИЯ КОНТЕНТА > > > > Определение тематики и организация контента Анализ существующего контента Структурирование контента Создание плана поставки контента http://openlib. идет ли речь о бюджете в 5 тысяч или в 250 тысяч долларов. производимое сайтом. а способ.ua/ . информативного содержания никакой сайт не станет неотразимым. клиента прежде всего заботит внешнее оформление и впечатление. включая и визуальный дизайн. Разбивка и классификация страниц напрямую определяются содержимым сайта.

и будьте готовы расплачиваться за это. исправленных и новых. Опыт показывает. http://openlib.org. Проанализируйте все имеющиеся материалы: тексты. Необязательно иметь всю информацию абсолютно готовой . Начните организацию контента концептуально и оцените это с точки зрения посетителей сайта. Для дальнейшей организации контента используйте простую. выверенной. > Структурирование контента 47 Боритесь с задержкой поставки контента Задержки с поставкой контента самая частая причина неукладывания в. Второй способ заключается в СОЗДАНИИ ПЛАНА П0СТАВКИ КОНТЕНТА. но проектная группа должна быть осведомлена обо всех поступающих материалах. чем из прежнего контента можно воспользоваться в новом проекте. который будет контролировать весь процесс поставки контента. Можно надеяться. в описании фазы 2. Это прекрасная и необходимая возможность выяснить.ua/ . что эту структуру определит клиент. схемы. рисунки. Чем это объясняется? Сама задача пополнения информационных ресурсов обычно явно недооценивается. включая и новые материалы. Сведения по каким темам пользователи сочтут уместными на данном сайте? Назначьте или наймите кого-то специально для управления контентом. Это специальный график. рисунки и другие необходимые элементы. Более подробно о контенте сайта см. придется дискутировать по ее поводу. полученной. > Аудит существующего контента Не соблазняйтесь идеей использования старого контента только потому. мультимедийные компоненты и так далее. а что должно быть исключено.написанной. предпочтительно на клиентской стороне. но такой план должен помочь.существующих. в котором намечены реальные сроки поставки материалов по мере их готовности. что с контентом всегда бывают задержки. всем знакомую иерархическую структуру с нумерацией разделов римскими цифрами. Это проверено.Один процесс. подходящий для всех > Определение тематики и организация контента Тематика содержимого должна быть продумана как можно раньше. что это доступнее и проще. Назначаются ответственные за тексты. сроки. Определите разделы контента. вероятно. хотя. Один из способов борьбы с задержками поставки контента — специально НАНЯТЬ КОНТЕНТ-МЕНВДКЕРА: человека. Устанавливаются сроки платежей. > Создание плана поставки контента В плане поставки контента уточняются сроки поставки информационных материалов .

удобный для всей проектной группы. можно тщательно просмотреть все . очерчивает контент.важный аспект при его структурировании.org. Если в карту сайта вносятся изменения. Определив тематику содержимого и создав карту сайта. что верно расставили акценты для редизайна.должны именоваться в согласованной. обсуждаемая в этой книге. Она используется вместе с иерархической структурой контента (но не вместо нее).разделы это или страницы . Так же как для строительства любого здания необходимо иметь чертежи. и придерживайтесь его. > Пересмотр текущей организации сайта Создавая карту сайта. а также к плану поставки контента. оцените организацию текущего сайта с точки зрения пользователя. а затем запланированную новую карту. а модифицированная карта доведена до сведения всех заинтересованных лиц. С ТОЧКИ ЗРЕНИЯ САЙТА I > Создание карты сайта I > Пересмотр текущей организации сайта I > Установка соглашений об именовании > Создание карты сайта Карта сайта отражает предполагаемые ссылки и основную навигацию по сайту. чтобы сделать навигацию по сайту более интуитивной? Проанализируйте карту текущего сайта. структура сайта тоже должна быть сначала отражена в эскизах.страницу за страницей. Убедитесь.48 Глава 2 С точки зрения сайта Возможность представлять весь модернизируемый сайт в целом . С точки зрения страницы Структурирование сайта с точки зрения страниц во многом подобно работе с архивными документами. поэтому сами выберите способ. Для этого не существует отраслевых стандартов. Сравните их.основу для проектирования. которые затем преобразуются в карту сайта . Для полного порядка в документации приложите соглашения об именовании к карте сайта. Что можно изменить. Выяснив. Карта сайта. что и http://openlib. организацию сайта и некоторые функциональные возможности. единообразной манере. они должны быть незамедлительно утверждены клиентом. но не заменяет технические или конструктивные схемы. > Установка соглашений об именовании Все файлы .ua/ .

org. Единообразие в этом вопросе очень важно.Один процесс. чтобы он был выразительным и максимально удобным для пользователя. как будет выглядеть их положение. можно оценить. заполняли формы. выясните маршруты этих задач и сформируйте макеты для каждой страницы на каждом маршруте. в описании фазы 2. Можно использовать кнопки. входили в систему. подходящий для всех 49 на какой странице находится. какие подсказки (значки и/или текст) будут использованы для подписи заголовков. Но если посещение сайта пользователями включает подобные действия. как вернуться в то место. > Определение основных маршрутов пользователей Если для данного сайта не требуется. изобразив на бумаге все элементы страницы. чтобы создать ощущение пространственного расположения объектов. Кроме того. см. можно лучше представить. первичная и вторичная навигации. что получится в итоге. сопоставляя макеты страниц друг с другом (интерактивные макеты). делали покупки). должно быть согласованным на всем сайте. При редизайне следует учитывать тенденцию пользователей полагаться на привычные навыки навигации по прежнему сайту. Примеры различных навигационных моделей обсуждаются при описании фазы 2. С ТОЧКИ ЗРЕНИЯ СТРАНИЦЫ > Создание макета j > Обеспечение навигации > Именование и маркировка > Создание макета Макет . > Именование и маркировка Наименование кнопок и пиктограмм. Прежде чем приступить к дизайну. в котором намечено содержимое. На данной стадии работ определите. С помощью этих взаимосвязанных макетов можно проверить расположение страниц и оценить правиль- http://openlib. Полезный перечень того. > Обеспечение навигации Навигация дает пользователям доступ к содержимому сайта. ссылки и графику. а также некоторые функциональные возможности.это чисто информационный (без всякого дизайна) каркас. помогая посетителям сориентироваться: где они находятся в данный момент. чтобы пользователи фактически выполняли какие-то задачи (например. можно пропустить этот шаг. включая стиль формулировок. куда им нужно переместиться. легче представить организованный контент таким образом.ua/ . где они были. а также как страницы взаимодействуют друг с другом. маркировки и навигации. что следует включать в макеты.

это первое. На этой стадии создаются все элементы дизайна сайта в соответствии со стилем подачи информации и общей концепцией. Создание Непросто удержать баланс между творческими устремлениями и техническими ограничениями. После этого дизайн сайта утверждается. они могут подтвердить разработанную навигацию и организацию контента.org. приступив к фазе 3. проектировщики наконец становятся творческими людьми. как он выглядит. Еще не оценив. Визуальный дизайн . который отвечает потребностям пользователей и который можно гладко преобразовать в HTML. Разработка визуального оформления любого сайта . доводится до совершенства и тестируется. с чем сталкивается пользователь. так называемый протосайт (ргоtosite). Создав прототип сайта. так и в виде снимков экрана см.создать полноценный интерактивный дизайн.Глава 2 50 ность пути. Визуальный дизайн и его тестирование (путем создания протосайта или при помощи прямой проверки функциональности) преследуют одну и ту же цель для любых сайтов . посетители видят.захватывающий процесс и.ua/ . его оформление и восприятие. удобен ли сайт. это еще учитывание требований и интересов пользователей на разных http://openlib. графический интерфейс . Они проверяют реализуемость функциональности и разные допущения. Фаза 3: Визуальное оформление и тестирование Визуальный облик сайта. Примеры реального маршрута пользователей как на макетах. сформулированными в креативном брифе проекта. Дизайнеры производства также начинают работу на этой стадии.это не только создание привлекательного интерфейса. в описании фазы 2.

каково работать с клиентом. но сайт использовать неудобно. нажимайте на ссылки и загружайте файлы делайте то. в описании фазы 3. Подробнее о разумном дизайне см. пиктограммами и эскизами. даже если это очень круто. Даже если дизайн неотразим. это не разумный дизайн. Проанализируйте цели сайта и технические требования. пока он не утвержден. http://openlib.ua/ . Если клиент настаивает на разработке направления. предъявите ему дополнительный счет. а не потворствуйте чьим-либо авторским амбициям. Дизайнеры экспериментируют с цветами и расположением объектов. сдерживайте энтузиазм клиента и избегайте «синдрома бесконечного улучшения». Производственная группа также включается в эту работу. Если что-то ущемляет интересы пользователя. разместить баннерную рекламу или даже удовлетворить личные причуды управляющего компанией клиента. то его оформление неудачно. не заявленного первоначально в креативном брифе. еще раз ознакомьтесь с аудиторией. 51 Используйте разумный дизайн Разумный дизайн направлен на пользовательскую среду и возможности посетителя. Одобрение дизайна клиентом обязательно получите в письменной форме. который несколько раз меняет требования к дизайну. а не на амбиции дизайнера. которые функционируют и отвечают всем целям сайта.Один процесс. СОЗДАНИЕ S > Анализ целей сайта | > Разработка концепций | > Представление дизайна и получение одобрения > Анализ целей сайта Визуальный дизайн не должен выполняться независимо. Четко определите ожидаемые результаты. а не сражайтесь с ним.это функциональность и быстрая загрузка. Совершенствуйте дизайн. каждый раз чем-то улучшая предыдущий вариант. Войдите в роль пользователя. Ориентируйте дизайн на аудиторию. перед представлением клиенту все концепции должны быть опробованы разработчиками на предмет их реализуемости. что делают пользователи. желание применить Flash. Разумный дизайн . Внедряйте информационный дизайн. Он нацелен на опыт пользователя. > Представление дизайна и получение одобрения Представьте себе. Перечитайте креативный бриф. > Разработка концепций Концептуальный мозговой штурм заключается в придумывании визуальных решений. Как осуществить разумный дизайн? Просто.org. Перемещайтесь по сайту. подходящий для всех уровнях.

Такой «протосайт» даст возможность исследовать содержимое. таких как всплывающие окна. В некоторых случаях этот протосайт и становится фактическим сайтом. Установите. его необходимо перенести на множество страниц. а затем каждую из этих страниц подготовить к оптимизации и производству HTML. Не проделав этого. как вы планировали. разработанных в фазе 2. может ли кто-нибудь действительно пройти по сайту так. DHTML. выпадающие меню и фреймы. включая «облегченные» сценарии. навигацию и положение страниц. Подключите дизайнеров производства к проверке всех аспектов — от начальных эскизов до презентационных для гарантии того. рискованно переходить к производству HTML. в котором есть только гиперссылки.org. Другими словами.52 Глава 2 Выверка При работе над визуальным дизайном найдите время на выверку содержимого. а также других возможностей. переходов страниц. Переход к производству После того как внешний дизайн доведен до блеска и одобрен клиентом. осмысленно ли работает информационная модель. ПЕРЕХОД К ПРОИЗВОДСТВУ > Создание графических шаблонов > Создание руководства по стилю оформления http://openlib.ua/ . Это уменьшит риск возникновения серьезных проблем во время производства. что все в порядке. ВЫВЕРКА > Создание протосайта > Проверка функциональности > Создание протосайта На данном этапе производственной группе лучше начать с HTML. > Проверка функциональности Перед окончательной формализацией дизайна выполните дополнительное тестирование на нескольких броузерах и платформах всех специальных эффектов. навигации и предложенной функциональности.

Эти файлы показывают всю функциональность. и включают вместо содержимого заполнители. http://openlib. то есть в них есть вся информация. что поможет группе поддержки сохранить единообразие дизайна. с различными шрифтовыми наборами и установками по умолчанию. элементы дизайна и создание HTML и/или Flash в полноценный сайт. вне него и при проходе над ним (так называемые состояния on/ off /over). ред. цветов.Примеч. в различных операционных системах. которая необходима для перенесения визуального дизайна в HTML. Фаза 4: Производство и контроль качества (QA) В фазе 4 все наработки по отдельным направлениям собираются воедино. подходящий для всех 53 > Создание графических шаблонов Переход от опробованного и одобренного макета к окончательному производству осуществляется с помощью графических шаблонов. Оно устанавливает стандарты для шрифтов.ua/ . в том числе состояния конкретного элемента страницы с положением указателя мыши на нем. удовлетворяет ли сайт всем предъявляемым требованиям. Таблица рекомендуемых компонентов для руководства по стилю оформления наряду с наглядным примером приводится в описании фазы 3. Опробуйте гибкость HTML. . В фазе 4 рассматривается необходимость внутреннего программирования. Оцените. науч. > Создание руководства по стилю оформления Превосходным пособием для дальнейшей работы по созданию страниц.2 Произведите Под гибкостью HTML (HTML fluidity) подразумевается правильность отображения закодированного HTML различными броузерами на разных мониторах. заголовков и многих других элементов оформления. Производство объединяет содержимое.Один процесс.org. На этом этапе также производится проверка качества (QA) сайта. их оформлению и поддержанию будет руководство по стилю оформления (Design Style Guide).

расставьте приоритеты их устранения и исправьте их. маркировку и весь облик сайта. как начинается изготовление сайта. наиболее ценна. Глава 2 проверку качества (QA). а в идеале . Результаты такой проверки видны сразу. Ведомость клиентских технических требований (Client Spec Sheet) .org. Выполняя неформальное тестирование в ходе всего процесса разработки. технологии и файловой структуры должны быть приняты на ранних стадиях Базового процесса. http://openlib. полученная при юзабилити-тестировании сайта. Запуск сайта приближается. а полностью его можно загрузить с www.ua/ . задолго до того.это опросный лист для главного технического специалиста клиента. можно попутно проверять свои предположения и принимать соответствующие решения. Выявите ошибки. в главе 8. и их трудно оспорить. какие маршруты он выбирает.54 Проводите юзабилити-тестирование Из всех форм откликов пользователей информация.web-redesign. проверьте положение дел с контентом и подготовьтесь к стадии фактической компоновки сайта. именование. убедитесь. ПОДГОТОВКА | > Определение основополагающих принципов I > Оценка состояния проекта I > Формирование файловой структуры > Определение основополагающих принципов Конкретные решения по поводу броузера. Просмотрите техническую спецификацию аудитории.в самом начале работы над проектом. Его ответы обеспечивают проектную группу всеми необходимыми параметрами для определения основополагающих принципов проектирования. Подготовка Перед началом фактической компоновки сайта уделите время уточнению первоначальных целей и контекста проекта. Частично он приведен в описании фазы 4. платформы. потому что она отражает не ваши абстрактные размышления о возможных действиях пользователей на сайте. таким образом совершенствуя информационное проектирование сайта. навигацию. как фактически действует пользователь. Подробнее о тестировании см. Ведомость клиентских технических требований .com. что готовы все необходимые графические шаблоны. Изучите отклики пользователей и отреагируйте на замечания. как находит информацию и как вообще взаимодействует с данным веб-сайтом. а то.детализированный опросник. Вводите юзабилити-тестирование в процесс разработки.

особенно группе производственных дизайнеров. каким образом файлы будут именоваться. что структура прежних каталогов не в полном порядке. > Формирование файловой структуры Произведите чистку. КОМПОНОВКА | > Разбиение на части и оптимизация графики 1 > Создание HTML-шаблонов и страниц > Внедрение облегченных сценариев I > Заполнение страниц 1 > Введение сложных функциональных возможностей I > Разбиение на части и оптимизация графики Преобразование графических файлов в HTML-страницы требует навыков. Задача в том. бюджета. Если же остались недочеты. если были ошибки в предварительных оценках.и JPG-файлы. Не исключено. По ходу дела оценивайте полученные результаты и сразу устраняйте проблемы.org. которые превратятся в http://openlib. возможно. Стремитесь к единообразию стиля. На данном этапе перед началом фактического формирования сайта самое время пересмотреть ресурсы и.ua/ . или нарезают. он может стать дорогостоящим. этот процесс может протекать вполне гладко. Принимая оптимальные для проекта соглашения об именовании и организации работ. На этом этапе дизайнеры производства фактически разбивают. графические шаблоны на отдельные GIF. Даже для динамических сайтов следует принимать во внимание статические страницы. Перед началом сборки сайта уточните. Сколько часов запланировано в бюджете и сколько уже потрачено? Сравните первоначальные предположения с действительным состоянием. учитывайте аспекты последующей поддержки сайта и его масштабируемости. Компоновка Производство HTML начинается всерьез. сохраняться и архивироваться. тематики и ожидаемых результатов. чтобы закодировать каждую HTML-страницу только однажды. возникли дополнительные требования или проявились непредвиденные технические сбои. Оцените проект с точки зрения затрат времени. придерживаться стандартов языка. При производстве HTML чрезвычайно важно. а все детали уточнены. подходящий для всех 55 > Оценка состояния проекта Работа над разными аспектами проекта протекает неравномерно.Один процесс. запросить увеличение бюджета. Если все проблемы решены.

который также является глобальным. Не преуменьшайте время. Контент уже должен быть готов. анимацию и динамически изменяемую графику (rollovers) и которые заполнят HTML-шаблоны и страницы. что вы прекрасно можете закодировать и сами с помощью JavaScript или DHTML. вы не можете заполнять страницы. Это еще раз подчеркивает необходимость соглашения об именовании. Избегайте этого. используйте стандартные цвета и закрашенные ячейки таблиц.и статические и динамические . этот этап явится началом фактического производства HTML. http://openlib.org. включающего ALT-. как динамическая смена графики. если вообще не забывается.ua/ . устанавливайте реальные сроки и твердо придерживайтесь их. необходимое для поставки контента. что создает эффект домино. МЕГАи TITLE-теги. используется для создания всего остального сайта. где возможно торможение. а также формируется невидимый контент. > Заполнение отдельных страниц Если контент еще не подготовлен.56 Включайте невидимое содержимое При формировании отдельных страниц и их заполнении добавьте к ним невидимое содержимое (информацию о глобальных для сайта переменных внесите при формировании HTML-шаблонов). выпадающие меню. Эта мастер-страница. должны быть реализованы в HTML-шаблонах (или на отдельной странице.начинаются с HTML-шаблона. если эффект предназначен только для данной страницы) и проверены. Где возможно. но не исключены задержки с ним. Вставка невидимого содержимого. > Создание HTML-шаблонов и страниц Все сайты . всплывающие окна и фреймы. Стремитесь к минимизации объема страницы. > Внедрение «облегченных» сценариев Под «облегченным» сценарием имеется в виду то. Такие эффекты. Глава 2 обыкновенную графику (flat graphics). Это этап Базового процесса. который часто добавляет дополнительные временные и денежные расходы по сравнению с запланированными. но чаще всего его формируют сами дизайнеры производства. часто оставляется до самых последних этапов изготовления сайта. Некоторые компоненты невидимого содержимого поставляются клиентом. или набор страниц. Если сайт будет выстроен из статических HTML-страниц. формы. На этой стадии кодируются «облегченные» сценарии для глобальных элементов сайта.

Теперь. Проверка качества — это исчерпывающая проверка работы сайта. которые могут составить основу плана контроля качества. сформулированных в фазе 1. времени.org.это совсем другая область. Если для проверки качества http://openlib. Тестирование Сайт сформирован. Будет ли это тестирование формальным или неформальным. На предыдущих стадиях производились отдельные проверки. Здесь просто указывается. Применение внутреннего программирования и приложений . В описании фазы 4 приведен вполне приемлемый список элементов. платформам и техническим требованиям. или после запуска). оборудование и ожидаемые результаты. .Один процесс. вам понадобится книга более технической направленности. теперь следует удостовериться. Уровень тестирования зависит от бюджета.существуют инструментальные средства. ТЕСТИРОВАНИЕ > Создание плана контроля качества > Проверка качества > Расстановка приоритетов и устранение ошибок > Заключительное тестирование > Создание плана контроля качества При любом тестировании . пришло время проверить его в целом.ua/ . на каком этапе требуется введение таких разработок: именно на данном этапе. в конце стадии компоновки сайта в фазе 4. направленная на выявление ошибок и достижение первоначальных целей. по специальному плану или просто путем запуска сайта. которые помогут осуществить проверку качества. Главная цель контроля качества состоит в выявлении ошибок. графики задач. ресурсы и фирмы экспертного уровня. В нем перечисляются ресурсы. а также приводится схема отслеживания и устранения ошибок. а затем бета-тестирование. если есть доступ к серверу. План контроля качества определяет методологию тестирования сайта по отношению к разным броузерам. подходящий для всех 57 > Введение сложных функциональных возможностей Если проект включает внутренние программные разработки. > Проверка качества Тестирование качества должно проводиться в несколько этапов. когда сайт сформирован. причем желательно на текущем сервере (до запуска сайта. которая в данной книге не освещается. Сначала выполняется внутреннее тестирование (иногда называемое альфа-тестированием). что он работает. полуформальном или полном .неформальном.следует составить план. ресурсов и квалификации тестеров.

Удостоверьтесь также. а кроме того. перед перемещением сайта на постоянный сервер следует провести заключительное тестирование дизайна. Устранение ошибок . качества производственных работ и функциональности. что клиент расписался в приемке сайта. Расставьте приоритеты.задача группы по производству сайта.org. Тем не менее. которые должны быть продуманы до. Примите поздравления! Запуск сайта . контента. но это еще не конец работ. Данная стадия охватывает аспекты. она только определит ошибки. Фаза 5: Запуск и сопровождение Достижение этой стадии означает начало функционирования обновленного сайта. проконтролируйте устранение ошибок и перепроверьте исправленное до окончательного запуска сайта. > Заключительное тестирование Запуск Сайт готов к жизни. доступные для онлайновой загрузки. Заключительное тестирование подробно обсуждается в конце описания фазы 4. во время и после выхода сайта в жизнь.очень существенный этап. > Расстановка приоритетов и устранение ошибок Организация способа отслеживания ошибок.ua/ . http://openlib. В описании фазы 4 приведен список возможных ошибок. в помощь внутренним группам по проверке качества предложены полезные инструменты. расстановки приоритетов и устранения обнаруженных дефектов сделает процесс тестирования более гладким. Она касается подбирания «хвостов» и красивой упаковки проекта перед переходом сайта в следующую фазу его существования: постоянного сопровождения. Работы по его проверке и устранению недочетов на демонстрационной площадке (или скрытом URL) завершены.58 Глава 2 имеется отдельная формальная группа тестирования.

всю информацию. имеющие отношение к изменениям масштаба проекта. необходимую для передачи от дизайнеров производства группе сопровождения. подходящий для всех 59 Фаза 5 — это этап. Хотя здесь. производство и обновление сайта.org. которая будет осуществлять текущий дизайн. > Разбор и архивирование документации Все документы (электронные и на бумаге). а также подтверждения клиента следует сохра- http://openlib. в описании фазы 5. Переход сайта из состояния разработки в состояние текущей поддержки обычно определяется его запуском. Перечень рекомендуемых материалов для пакета передачи сайта см. а эксплуатацию сайта. его постоянную поддержку обеспечивает другая. Передача сайта В большинстве случаев работы по проектированию и формированию сайта выполняет одна группа.Один процесс. В это время одна группа заканчивает все разработки и передает все материалы и файлы другой.ua/ . бюджету. сформированному в фазе 3. в обзоре. на котором действия будут различными в ситуациях с внутренними проектными группами и внешними фирмами веб-разработчиков. > Создание пакета передачи Все необходимые материалы по разработке и эксплуатационной поддержке сайта должны быть собраны в пакет документов для передачи клиенту и группе сопровождения. атрибуты и определения графических элементов . в описании фазы 5 обязанности этих двух типов проектных групп тщательно раграничены. ПЕРЕДАНА САЙТА I > | > I > I > I > • Завершение руководства по стилю оформления Создание пакета передачи Разбор и архивирование документации Проведение заключительной встречи Планирование инструктажей по сопровождению сайта I > Завершение руководства по стилю оформления После запуска сайта к руководству по стилю оформления (Style Guide). Эта часть руководства по стилю оформления (Production Style Guide) должна включать коды HTML-тегов. Перечень рекомендуемых компонентов для этой части руководства наряду с наглядным примером приведен в описании фазы 5. добавляются необходимые дополнительные рекомендации по производству. эта разница не обсуждается.

и он открыт для пользователей. Скорее всего на этот момент еще остаются некоторые недочеты.org. предложения. позволит лучше оценить достоинства сайтов. Хотя фактический запуск . Для крупных сайтов и при наличии собственных групп веб-дизайнеров в фирме эксплуатационная поддержка может включать дополнительные фазы разработки приложений. требующие гораздо больше времени и ресурсов.в действительности не более чем еще один этап в жизни проекта. > Планирование инструктажей по сопровождению сайта Группе сопровождения сайта почти всегда необходим некоторый тренинг. но сайту уже дано «добро». которые будут устраняться. Цель такой встречи . http://openlib. их сервис и удобство использования. но потребуют и больших расходов. Неформальный анализ. > Проведение заключительной встречи Каждый проект способствует накоплению опыта. Отсортируйте и организуйте хранение необходимых материалов. Дальнейшие уточняющие исследования и анализ их результатов обеспечат более глубокое понимание клиента и его отрасли. Бумажные копии первоначального контракта. он вводит некоторые аспекты. включенными в руководства по стилю оформления и изготовления сайта. выполненный с точки зрения пользователя. Заключительная встреча даст возможность еще раз собрать вместе представителей обеих сторон для конструктивного обсуждения проекта. Запуск С завершением контроля качества и достижением стабильной работы можно анонсировать действующий сайт в Сети. Подробнее о проведении анализа конкуренции см. систем управления контентом. нить. в главе 9. план проекта и другая соответствующая документация должны быть зарегистрированы и заархивированы. давая более квалифицированную оценку. Изучите основные особенности и юзабилити конкурирующих сайтов. Анализ конкуренции должен быть частью стадии выяснения независимо от уровня подхода. Рекомендуемый для архивирования перечень документов можно найти в описании фазы 5. Обычно он обеспечивается конкретными рекомендациями.Глава 2 60 Проводите анализ конкуренции Анализ вашей отрасли и конкуренции в ней поможет лучше оценить рейтинг сайта.ua/ . а также повторные перезапуски сайта.выявить положительные моменты работы над проектом и учесть на будущее проявившиеся недостатки.

Как часто будет обновляться сайт? Ежедневно? Ежемесячно? Как будут архивироваться материалы? Кто будет отвечать за текущую поддержку сайта? Насколько находчив этот человек? В начале проекта (на этапе планирования) вы заполняли эксплуатационный опрос (Maintenance Survey). эффективно помогающий создавать теги ключевых слов (keywords) и заголовков (title). переоценить и перейти к совсем другой технологии . Желательно. Сайт оживает. чтобы учесть возможность решения предстартовых проблем. чтобы она заблаговременно уведомила о редизайне сайта существующую аудиторию. Кроме того. не забывайте еще до начала основной рекламной кампании информировать аудиторию о степени готовности и предполагаемых сроках запуска. Примите поздравления! Запланируйте запуск сайта на не самые оживленные часы. чтобы сохранить ее и поддержать с ней обратную связь. чтобы убедиться. Используйте в фазе 5 специальный инструмент МЕТА Data Creation Tool.org. > Регистрация в поисковых системах Даже если ваш сайт уже зарегистрирован в поисковых системах.эксплуатационной поддержке. На случай возникновения серьезных проблем обеспечьте возможность временного отката к прежнему состоянию. теперь пришло время все оценить. что на месте имеется команда для создания контента. На период перехода от прежнего сайта к обновленному заведите временную начальную страницу. Крупные сайты могут производить запуск нового сайта поэтапно. Сопровождение Убедитесь. > Запуск сайта Поверните ключ.обычно внутренней или внешней маркетинговой группой. не пропустите в фазе 5 описание четырех верных способов скрыться от поисковых машин.ua/ . так как ввод и тестирование могут занимать по несколько часов в течение нескольких дней. Будучи поглощенными работой над обновлением сайта.Один процесс. что вы эти способы не используете. запланируйте повторную регистрацию после запуска обновленного сайта. подходящий для всех 61 ЗАПУСК j > Подготовка плана анонсирования | > Регистрация в поисковых системах | > Запуск сайта > Подготовка плана анонсирования План анонсирования формируется задолго до запуска сайта . производства HTML и выполнения любых необходимых изменений в визуальном дизайне. http://openlib.

> Оценка успешности сайта Теперь. которые будут модифицироваться ежедневно. еженедельно.очень специфическая область.ua/ . Создайте электронную таблицу или официальный план.62 Глава 2 СОПРОВОЖДЕНИЕ > > > > Оценка возможностей группы сопровождения Разработка плана эксплуатационной поддержки Оценка успешности сайта Укрепление безопасности сайта > Оценка возможностей группы сопровождения Лица. пришло время оценить результаты. http://openlib. уточняющий разделы и контент. недостаточно квалифицированна или слишком многочисленна. > Разработка плана эксплуатационной поддержки Определите частоту и детали текущих обновлений сайта. должны иметь достаточно высокий уровень навыков текущей поддержки модернизированного сайта. намеченных при его редизайне? Увеличился ли объем продаж? Снизилось ли число звонков заказчиков в технические службы? Наличие откликов пользователей по поводу качественных и количественных изменений. Установите сроки регулярной проверки сайта для выяснения его соответствия стандартам. приведенным в руководстве по стилю оформления. а также степень удовлетворенности заказчиков помогут оценить успех модернизации сайта. но в фазе 5 представлен возможный план мероприятий по обеспечению безопасности. ответственные за обновление сайта. если команда недоукомплектована. и она не обсуждается здесь глубоко. когда сайт работает. Команда вебразработчиков должна оценить способность группы сопровождения справиться со стоящими перед ней задачами. Действительно ли новый сайт достиг целей. этот план поможет защититься от них.org. > Укрепление безопасности сайта Безопасность сайта . Хакеры не дремлют. ежемесячно и ежеквартально. Проинформируйте клиента.

а затем уже вникнуть в него глубже.org. подходящий для всех 63 Резюме В данном обзоре предложена общая панорама технологии редизайна веб-сайта. http://openlib. понимать. эта глава . а в самом начале. Наконец. что еще предстоит сделать. К страницам этой главы можно обратиться при формировании бюджета. что облегчает представление их в хронологической последовательности.Один процесс.своеобразное резюме.ua/ . выделяя средства на каждую задачу в каждой фазе согласно отведенному на нее времени. Благодаря этому читатели могут ознакомиться с Базовым процессом. Очень полезно. которая дает возможность представить весь Базовой процесс от начала до конца. Возможность на любом этапе процесса хорошо осознавать следующие несколько шагов облегчает контроль за ходом работ и позволяет не потерять ориентиры. только помещенное не в конце книги. особенно в фазе 1. При составлении графика работ этот обзор позволяет видеть все предстоящие шаги размещенными на одном листе бумаги. Такой подход представляется авторам книги более целесообразным.

COM [ПРЕЖНИЙ] был корпоративным.« currant mod*) utflfrtd by th TURB0STAFF. Мэнни Фритас (Manny Frietas) Сан-Франциско Группа сопровождения (обновление Креативный директор: Келли Гото (Kelly Goto) модифицированного сайта): Арт-директор: Серен Ховес (Serena Howeth) штатные сотрудники LiquidMedium ПРЕДЫДУЩИЙ bud li a communyti that brniqs tog«b«r sutfn i q frim» «kh thes* com of xtmfii-tiy И 1 1 И М . This will c r a t t t * mtrktrxpict in which both *Mch«na« »«furns *ni Id**». Настало время изменить и ее брендинг и весь облик сайта.com Ответственный за производство: Проектная группа (редизайн): Idea Integration.ua/ . r«-4tfinina tt. устаревшим и уже не отражавшим цели компании.64 Учебный пример LiquidMedium Клиент: LiquidMedium Дизайнер: Кайен Нассири (Kian Nassiri) URL: www.liquidmedium. http://openlib.org.

цветную вклейку. (2000 г. 667 http://openlib. (2001 г. СОВРЕМЕННЫЙ LIQUIDMEDIUM.ua/ . 342-343 3 За к.) Результат: Более очевидная навигация и заметные успехи при заключении контрактов с партнерами. См. сайт приобрел новый контент и новые разделы.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] имеет новый логотип. Через шесть месяцев он стал совсем другим. Выглядит современно и регулярно обновляется. Перейдя на внутреннее сопровождение. но не окостеневший.Учебный пример 65 UquidMedium специализируется на организации всего процесса обеспечения человеческими ресурсами .org. все еще корпоративный.COM [ОБНОВЛЕННЫЙ] медленно развился в новый сайт. новый облик и новый брендинг.от соурсинга и подбора персонала до найма и управления кадрами.) LIQUIDMEDIUM. стр.

Фаза 1: Определение проекта Масштаб проекта: область проекта. а также общий размер. ограниченная со всех сторон определенными рамками. http://openlib. планы. включая бюджет.org. технические потребности.ua/ . креативное видение.

но часто игнорируемых аспектов на подготовительном этапе разработки любого веб-проекта. предназначенных для того. Здесь представлена технология. и мы стараемся не делать неверных предположений. и ваш клиент) можете иметь общее представление о задачах проекта. здесь встретится много потенциально полезной информации.) Имейте в виду. что в данной главе очерчены задачи. необходимые для определения проекта. сроков и. и тогда работа начнется без особых волнений. А так как приходится углубляться и в детали.. Она не дает готового рецепта.не исключение. задач. Здесь предложено много удобных инструментов. http://openlib. бюджета.. конечно.один из наиболее важных. С чего же начать? С другой стороны. Она нацелена на развитие методов коммуникации. (Не упустите этот момент: знание аудитории . Так много предстоит сделать. аудитории. Эта глава поможет провести все подготовительные работы и составить планы. Первая часть этой первой фазы процесса связана с подготовкой фронта работ и сбором информации.Фаза 1: Определение проекта Любое дело может поначалу навеять страх. чтобы помочь вам и вашему клиенту собрать необходимую информацию для определения целей.ua/ . и редизайн веб-проекта . вы (а возможно.org. а не подробный бизнес-план.

который может иметь несколько значений. Цель этой документации .для формирования креативного брифа. На этапах уточнения и планирования собранная информация служит для подготовки документации по проекту: на первом этапе . какой этап на очереди и каков срок его выполнения. Здесь имеется в виду упрощенный процесс выяснения. С помощью серии опросов.Фаза1: Определение проекта 69 Первая фаза Базового процесса разбита на три этапа: выяснение. графиков работ. На стадии выяснения собирается информация и ставится много вопросов. приемлемый для различных проектов и финансов. как она распределяется по отдельным задачам и сколько времени требуется на решение каждой из них? • Кто входит в состав проектной группы и каковы их обязанности? • Что требуется от клиента? • Какие конкретно компоненты проекта подлежат сдаче и в какие сроки? • Каким образом сайт будет проверен на соответствие потребностям пользователей? • Каковы долгосрочные перспективы развития сайта? В конце первой фазы (определение проекта) все собранные и подготовленные материалы распространяются среди членов проектной группы и представителей клиента на совещании по поводу начала работ над проектом.для составления бюджета. обсуждений и исследований этап выяснения позволяет понять три важные вещи: цель пребывания клиента в Сети. Выяснение может иметь отдельный бюджет (часто выражаемый пятизначными числами) и план. http://openlib. Выяснение (или обнаружение.org. а на последнем . плана тестирований и распределения обязанностей в группе.это общий отраслевой термин.ua/ . Ответы на них послужат рекомендациями почти для всех последующих стадий. Целью такого совещания является обмен мнениями для выработки единого представления о целях и задачах. аудиторию сайта с ее потребностями и онлайновые возможности. раскрытие) . уточнение и планирование. чтобы никому не пришлось гадать. а также сетевые аспекты отрасли клиента и его конкурентов. а также единой терминологии на период работы над проектом.четко и ясно определить для клиента и всей проектной группы следующие моменты: • Каковы пожелания и цели клиента? Какой план предлагается для их достижения? • Какова общая стоимость проекта.

с чего следует начинать работу над любым веб-проектом. прежний облик сайта и представить. Задавая клиентам правильные вопросы. Запросите как можно больше информации по этому поводу. http://openlib. Они не знатоки Сети и не веб-эксперты. Опрос клиента. можно побудить их взглянуть на редизайн их сайта другими глазами. Во время анализа иногда требуется уточнить что-нибудь у клиента — по телефону или по олектронной почте. мыслительный этап работ.это довольно простая задача: раздать опросные листы. что возможно. Однако имейте в виду. и в этом помогут опросные листы.com. во время которого члены проектной группы должны войти в роль пользователей сайта и в максимально возможной степени понять целевую аудиторию. Выяснение может занять одну неделю или много недель .ua/ . поэтому представленная им информация может уже не соответствовать реальности. Независимо от этого выяснение следует начинать с опроса клиента (Client Survey).это теоретический.70 ВЫЯСНЕНИЕ > Сбор информации > Изучение аудитории > Анализ отрасли Глава 3 Сбор информации Выяснение . и это поможет им понять необходимость ставить развитие веб-сайта на один уровень с важными задачами их бизнеса. по поводу проекта. к сожалению. Постарайтесь получить ответы клиента как можно скорее. зависит от бюджета и от подхода. . клиента. Опрос клиента Клиенты обычно преследуют исключительно деловые цели и. отрасль компании. часто недооценивают потребности сайта. Раздача опросных листов — это первое. что бизнес-модельклиента могла измениться за год. Запрашивайте имеющиеся материалы Клиент может иметь выполненные исследования целевой аудитории и рынка.org. его отрасли и потенциальной аудитории сайта.это. который можно загрузить с www. Для начала необходима информация. каким он должен стать в результате редизайна. Это понятно. собрать ответы и проанализировать их. Следует выяснить все. естественно. Работу по выяснению может выполнять один человек или целый отряд исследователей.web-redesign. Требуются ответы на множество вопросов.

в главе 9 «Анализ конкуренции». а наличие нескольких мнений откроет более широкую перспективу. могли бы помочь персоналу клиента выработать единые цели.Фаза1: Определение проекта Порекомендуйте представителю клиента передать опросный лист всем ключевым фигурам в компании. Все проекты отличаются объемом. масштабом и направленностью. а добавить более детальные. Опрос клиента предназначен для получения подробной.и нужно — подстроить под специфику компании и сферу ее деятельности. Подробнее о юзабилити-тестировании см. выясните. Однако учтите. возможно. Используя его как основу. иначе не сможете получить даже основные сведения. в главе 8 «Юзабилити-тестирование». особенно при определении целей http://openlib. служит многим целям. Задача клиента — раздать опросные листы. собранные при проверке юзабилити текущего сайта или на некоторых сайтах конкурентов. К нему придется обращаться регулярно. что в компании клиента имеются серьезные разногласия или дезорганизация. принимающим решения. это обычно плохой признак. что отзывы посетителей. а затем на основании полученных ответов заполнить обобщенный опросный лист для предоставления его проектной группе. 71 Согласование целей Когда ключевые фигуры в компании клиента имеют разные мнения в отношении целей редизайна. Если разработчики внутренние и хорошо знают компанию и отрасль. Однако не ошеломляйте клиента излишним количеством вопросов. чтобы понять конкретные цели проекта. Подгонка опросного листа Опросный лист клиента можно . Для проектной группы очень важно иметь только один лист с ответами клиента. требуется ли дополнительная информация. вероятно. можно убрать некоторые общие вопросы. не могут заменить наличие четко взвешенных бизнес-целей.ua/ . хоть они и невероятно проницательны. опрос клиента и его анализ будут полностью возложены на нее. но базовой информации. проанализированный один раз. Клиент должен выработать и предоставить единые общие цели. Фактически руководитель внутренней проектной группы может самостоятельно заполнить опросный лист. тогда. что работает и что не работает. что данные.org. В зависимости от источника спорных мнений. Анализ опроса клиента Опрос клиента. указывающий на то. необходимой для общего редизайна веб-сайта. об анализе конкуренции . так как в противном случае можно получить несколько разных мнений по одному поводу. Реальные пользователи ясно показывают. Во многих организациях таких лиц несколько. Если проект выполняет внутренняя группа разработчиков.

Какую основную проблему вы надеетесь решить с помощью редизайна сайта? Как вы собираетесь оценивать успешность решения? 4. Отличается ли это от впечатления. должно заполнить свой экземпляр опроса. Считаете ли вы текущий сайт удобным для пользователей? Почему? 2. По каким главным причинам целевой пользователь выбирает продукцию и/или услуги вашей компании (цена. Опишите типичного пользователя вашего сайта. Каковы основные причины редизайна сайта (новая бизнес-модель. послужат фундаментом для успешного создания веб-сайта. которые могут изменить график (например. выставка или ежегодный отчет)? 4. еженедельно и ежемесячно? Как вы оцениваете частоту посещений? Ожидаете ли вы увеличение посещаемости сайта после реконструкции и насколько? Впечатление 1. морально или технически устаревший сайт. осведомленность в маркетинге/брендинге. составьте несколько профилей. Какова основная цель посещения вашего сайта (сделать покупки. включите любые отчеты или сведения по этому поводу. найти информацию)? 3. Какие недостатки есть у текущего сайта и какие три вещи вы бы изменили сегодня. контента. Опросный лист с обобщенными ответами клиента должен быть отправлен по электронной почте руководителю проектной группы. творческий. Каковы главные онлайновые цели вашего бизнеса на модернизированном сайте? Каковы вторичные цели? (Примерами могут быть увеличение продаж. будь это возможно? 4. должность. какое впечатление должен производить на пользователя новый сайт. Как часто он работает в режиме онлайн и для чего вообще использует Сеть? Каков его возраст и чем он зарабатывает себе на жизнь? (Составьте как можно более подробный профиль вашего целевого пользователя.) Пожалуйста. общего облика сайта. Проводилось ли вами юзабилити-тестирование и имеются ли отзывы пользователей о текущем сайте? Как давно? Пожалуйста. Определен ли уже порядок финансирования данного проекта? Можно ли разбить проект на этапы. чтобы согласовать бюджетные и временные ограничения? Текущий сайт 1. а также специфику его посланий.) 2. Каждое ключевое лицо. Как много людей (насколько вам известно) посещает ваш сайт ежедневно.72 Глава 3 Ответы. укажите имя. привлечение другой аудитории)? 2. снижение количества обращений посетителей в технические службы.ua/ . Какая существующая в компании стратегия (и онлайновая и вне Сети) отвечает новым бизнес-целям? Аудитория/желаемые действия 1. например: престижный. 5. кратко и четко ответить на все поставленные вопросы и добавить в конце опроса любые дополнительные замечания или комментарии. адрес электронной почты и номер телефона. Насколько важно сохранить текущий облик сайта. передовой. дружественный. Какую дату запуска нового сайта вы намечаете? Существуют ли какие-либо внешние обстоятельства. Этот опрос поможет выявить и сформулировать цели редизайна сайта. его восприятия и функциональности. обсудите как долгосрочные. его логотип. Используйте несколько прилагательных. ОПРОС КЛИЕНТА Общая информация 1. Какие конкретные разделы текущего сайта вы считаете удачными? Чем они хороши? 3. Напишите название компании и текущий (или будущий) URL 2. производимого текущим сайтом? http://openlib. брендинг? Причины редизайна 1. PR-кампания. аудитории. Кто является основным контактным лицом от организации и кто имеет право подписи документов по проекту? Пожалуйста. сервис. так и краткосрочные цели. чтобы описать. данные клиентом. вступить в члены сообщества. прогрессивный.org. корпоративный. забавный. принимающее решение относительно модернизации веб-сайта. Если необходимо. качество)? 4. 3. 3. расширение услуг.

4.web-redesign. пожалуйста. Возникнут ли другие специфические потребности в программировании (в частности. 5.). опишите подробнее. подробно. будете ли вы формировать контент собственными силами или с помощью внешних поставщиков? 2. которые вам нравятся. Возникнет ли потребность в защищенных транзакциях (электронная коммерция)? Производятся ли в настоящее время онлайновые транзакции? Пожалуйста. DHTML. Требуются ли сайту возможности базы данных (динамическое генерирование контента. Опишите вкратце маркетинговые планы на ближайший период (в частности. навигация. соглашения об именовании и т. JavaScript. опишите это подробно. 4. Real Audio) вы хотели бы использовать в новом сайте? Что это должно дать пользователям? Опишите. 3.com 2. Имеется ли или разрабатывается ли маркетинговая стратегия в отношении модифицируемого сайта? Если да. Каким образом большинство людей узнаёт о существовании вашего текущего сайта? Какие методы распространения вашего URL уже использует компания? 2. 4. кто отвечает за одобрение контента (содержимого сайта) и проверено ли оно? Если нет. Какие специфические технологии (Flash. опишите подробно. персонализация/вход в систему)? Имеется ли уже у вас база данных? Пожалуйста.org. персонализация или поисковые возможности)? Пожалуйста. Какова базовая структура контента и как она организована? Собираетесь ли вы полностью реорганизовать текущий сайт или только расширить его? 3. поисковые возможности. включая конкретную информацию о существующем программном обеспечении. 4. цветовое решение. Собираетесь ли вы обновлять модифицированный сайт? Как часто? Кто отвечает за обновление и поставку контента? Дополнительные замечания/комментарии Пожалуйста. Опишите визуальные элементы или части контента вашего текущего сайта. Что конкретно нравится вам на этих сайтах? Контент 1. опишите подробно. Как в настоящее время ваша компания представлена в оффлайне? Хотите ли вы использовать тот же имидж и на сайте? 3. что ваша текущая аудитория выделяет вас среди конкурентов? Перечислите URL конкурентов.73 Фаза1: Определение проекта Этот опрос можно загрузить с www. Будет ли контент нового сайта (наряду с функциональными возможностями и навигацией) только расширяться или полностью видоизменяться по сравнению с текущим сайтом? Имеете ли вы карту текущего сайта? Есть ли у вас карта или предварительные наброски для будущего сайта? Технология 1. напишите все. Перечислите URL любых сайтов. которые должны быть использованы (логотип. или маркетинговые материалы. д. пожалуйста.ua/ . на время редизайна сайта и на 12 месяцев после его запуска)? 3. http://openlib. Маркетинг/обновление 1. то каков его источник. Будет ли новый сайт использовать существующий контент текущего сайта? Если да. Какую платформу и какой броузер вы предполагаете использовать (если знаете)? 2. что считаете необходимым добавить. Чем ваша компания отличается от конкурентов? Считаете ли вы.

концепций и идей: • Цели сайта. 1 Хороший клиент обладает некоторыми из следу- I ющих качеств: • Целеустремленный: ориентируется на общую картину 1 • В опросном листе дает четкие и подробные ответы кто находит время подробно и содержательно ответить на вопросы. а не является их источником • сайта и составлении графиков работ. задумывались о создании сайта. уменьшение количества обращений посетителей в технические службы. графика работ и бюджета Не знает. Необоснованно требовательным. это делает их более ответственными. А от клиентов. В своих предстоящих проектах используйте опрос клиента и как интервьюирующий. увеличение трафика или объема продаж)? Какие еще цели будут достигнуты (например. Каковы цели редизайна сайта? Какая главная проблема бизнеса будет при этом решена (например. нереалистичным.74 Глава 3 Многим приходилось иметь дело с кошмарным клиентом. Если есть выбор. Поскольку клиенты должны заполнить и возвратить опросный лист. принимающими решёния • Не находит времени заполнить опросный лист • Малый бюджет. и как отсеивающий инструмент. Анализ опроса клиента внесет ясность в целый ряд моментов. Те. если он: • Выражает требования в манере «вынь да положь» с нереалистичными запросами к срокам выполнения 1 • Не спорит по поводу сроков сдачи. нереальный крайний срок [ • • Необязательный. не может принять решение. но хочет. обладающих целым рядом плохих качеств (см. повышение удобства сайта для пользователей)? http://openlib. Это необязательно кошмарный клиент. Они предоставят полезную для проекта информацию и будут хорошими клиентами. что реальный будет создаваться позже • Не имеет права подписи и одобрения или не сводит вас с лицами. скупым. но будьте настороже.. Можно сказать. ниже). непостижимым. что это плацдарм проекта. чтобы это было «круто» • Просит создать демонстрационный сайт. капризным.ua/ . каким должен быть контент..org. бюджета и наиважнейшего креативного брифа. говорит. часто меняет мнение С целью «экономии денег» хочет сам прорабртать творческие аспекты | • ) • 1 • Предоставляет заявку на предложения (RFP) или ясно обрисовывает цели и масштаб проекта Понимает веб-среду и имеет представление о процессе разработки Имеет право подписи и одобрения Отвечает на запросы по электронной почте и по телефону | • Понимает работу в команде | • Вовремя предоставляет контент [ • Помогает решать проблемы. иногда лучше просто отказаться. не реагирует своевременно на звонки или электронную почту • • Нерешительный. анализируйте и разумно выбирайте проекты и клиентов. вероятно.

Как представляет себе клиент будущие обновления сайта? Как часто и в каком объеме они будут производиться? Дополнительные данные на этот счет обеспечит эксплуатационный опрос. чтобы написать креативный бриф.org. Ниже приведен ряд типовых вопросов: Если продвижение сайта входит в число основных задач редизайна. как часто они совершают онлайновые покупки. задайте следующие вопросы: 1.ua/ . атмосферы. и объясните почему. творческие задумки. http://openlib. Что именно должен отражать логотип компании? Какую эмоциональную реакцию он должен вызывать у заказчиков? 2. возраст. которые вам нравятся. • Масштаб. Какие цвета и изображения лучше передают индивидуальность и атмосферу вашей компании? 4. планы. сделать обзор на вступительной встрече и будет служить своеобразной памяткой во время последующих фаз развития сайта.и оффлайне ? Способствуют ли они увеличению трафика? 2. Это поможет создать креативный бриф. Будет ли в эмблему включен слоган? Что он должен отражать? 1. быстродействие связи. Какие способы распространения своего URL за пределы организации вы используете в настоящее время . насколько это возможно на данном этапе)? Без знания этого нельзя составить бюджет. Перечислите или приложите образцы эмблем. Каковы ваши кратко-.и долгосрочные планы в отношении увеличения трафика и повышения известности вашего сайта? • Аудитория. Каковы демографический и пользовательский профили? Демографический профиль учитывает род занятий. технические потребности и общий объем (определенные настолько четко. Чем вы стимулируете повторные посещения вашего сайта? И как вы можете стимулировать у текущих пользователей желание рассказать о вашем сайте другим? 3.в он. В пользовательском профиле к демографическим данным добавляются реальное имя и персональные данные. предпочитаемый ими броузер и место их проживания. • Аспекты редизайна. Каковы цели и задачи редизайна? Составьте четкое представление о разнице между текущим и новым сайтами в отношении их юзабилити. Какого настроя и производимого сайтом впечатления желает добиться клиент? Каким должен выглядеть сайт? Изощренным? Спокойным? Забавным? Надежным? Заслуживающим доверия? Недорогим? Все это нужно четко представлять. • Атмосфера. узнайте у клиента текущее состояние дел в отношении брендинга. включая бюджет.Фаза 1: Определение проекта 75 Если при редизайне сайта будет полностью меняться представление образа компании. средне. пол. частоту работы и интересы в Сети (какие сайты посещают пользователи и почему. • Эксплуатационная поддержка. 3. Каковы границы проекта по всем аспектам. производимого впечатления и цели. насколько хорошо они ориентируются в Сети). Сюда же относятся тип их компьютеров.

Тем не менее. Помощь клиента важна. Однако будьте бдительны.это хороший тактический ход.все эти вопросы следует прояснить как можно раньше по одной простой причине: от этого зависит планирование всего проекта. они осознают свою значимость в редизайне. которая следует за фазой 1: Определение проекта. Когда клиенты подключены к работе. контента. http://openlib. технических потребностей. но его необходимо рассмотреть на фазе 2: Разработка структуры сайта. временного графика. Кто занимается проектом? Подготовьте контактную информацию и со стороны проектной группы. целевой аудитории и предназначения сайта. Эксплуатационный опрос Может показаться преждевременным говорить об эксплуатационной поддержке сайта на столь раннем этапе процесса редизайна. базовой структуры. графика работ. у разработчиков больше шансов вовремя получить необходимые сведения и материалы. ведь впереди еще и опрос по поводу технических возможностей пользователей). становятся более доступными и больше помогают. Имейте в виду. включая структуру и организацию сайта. что эксплуатационный опрос (доступный для загрузки с www. когда клиент чувствует себя подключенным к проекту. можно заранее (еще в ходе редизайна сайта) планировать потребности сопровождения. стиля оформления сайта. Принимая их во внимание с самого начала проекта. Осведомленность и сотрудничество при работе в команде всегда лучше. чем помогают. Там должны быть указаны имена.org. но некоторые из них при этом скорее мешают. структуру каталогов и файлов. Кто будет сопровождать сайт. чем противостояние. Своевременно обновляйте этот список и сохраняйте его на защищенной паролем клиентской демонстрационной площадке (обсуждаемой позже в этой главе).web-redesign. а руководителю проекта следует использовать результаты этого опроса в работе. и стороны клиента. Клиент должен ответить на вопросы как можно подробнее. Глава 3 • Контакты. а также зачастую сложную задачу управления контентом. как часто клиент планирует производить обновления.com) необязательно заполнять и анализировать до начала проекта. номера телефонов и факсов и почтовые адреса (для поставок и счетов).76 Подключайте клиента Активно сотрудничайте с клиентом при формулировании проекта: составлении бюджета. какой уровень роста запланирован на первый год после запуска . . Эксплуатационная поддержка связана со многими аспектами.ua/ . и клиент может даже проигнорировать второй детальный опрос (однако надо надеяться. что это не случится. адреса электронной почты.

Кратко. продукты компании. Кто отвечает за изменение графики на сайте? Будет ли он использовать имеющиеся шаблоны при внесении изменений или добавлений? Каков уровень его квалификации в графическом дизайне? Формирование контента 1. фотографии. Автоматизирован ли процесс смены контента на главной странице сайта (автоматическое обновление изображений или текста при каждом посещении сайта пользователем. напишите об этом подробнее. чтобы гарантировать сохранение при этом его качества? 3. ЭКСПЛУАТАЦИОННЫЙ ОПРОС Общая информация 1. например. 4. (Полный рабочий день? Часть времени? Эпизодически?) 3. индивидуальные обязанности каждого ее сотрудника и их занятость. Как часто будут добавляться новые разделы или темы? Будут ли они основаны на общем шаблоне сайта или будут независимыми? Производственная квалификация 1. новости. Какие навыки необходимы для обновления сайта (базовые знания HTML. Опишите состав эксплуатационной группы. генерирование произвольной цитаты или изменение даты)? Реклама 1. Каким образом пользователь будет знать об очередном обновлении сайта? Будет ли обновление сайта автоматически сопровождаться рассылкой анонса по электронной почте или другими вариантами объявлений? 2.org. Каким образом будет обновляться сайт? Вы будете вручную вводить контент в HTML-файлы? Вы будете использовать систему управления контентом для его динамического обновления (полезно.web-redesign. обзоры) и как часто (например. пожалуйста. Кто отвечает за формирование контента для сайта? Будет ли он уделять созданию контента часть времени или все время? 2.Ф а з а 1 : Определение проекта 77 Этот опрос разработан с целью помочь вам определиться с задачами эксплуатационной поддержки сайта после его запуска.ua/ . умение писать сценарии)? 2. Кто отвечает за поисковый механизм и за введение и обновление ключевых слов? Как часто будут пересматриваться ключевые слова и МЕТАтеги? Этот опрос доступен для загрузки с www. Кто утверждает изменения в облике сайта. ежемесячно. для управления каталогами в е-коммерции или текстовыми базами данных)? В случае использования системы управления контентом. ежедневно.com http://openlib. Кто отвечает за техническую сторону эксплуатационной поддержки сайта и каков уровень его квалификации? Какой опыт он имеет? Потребуется ли его стажировать? 5. но ясно ответьте на следующие вопросы и отправьте заполненный опросный лист по электронной почте руководителю проектной группы. Какие разделы перепроектированного сайта будут обновляться (например. ежеквартально. ежегодно)? 2. гороскопы. еженедельно.

по крайней мере. так и ряд фактических пользователей.78 " Глава 3 Изучение аудитории Сеть существует для пользователей.это студент университета в возрасте от 18 до 22 лет. Если есть необходимые данные. возраст. поэтому необходимо создать несколько общих профилей. цифровых видеодисков и подарков. чтобы получить реальное представление о целевой аудитории. почему и какие задачи там выполняет. Но так как умозрительные размышления здесь не помогут. а компьютер в общежитии . Для этого требуется опросить как клиента. Его типичными задачами на сайте являются поиск авторов. На основе демографических данных создайте общий профиль пользователя. Для начала используйте опрос клиента. Он зарегистрирован на сайте. как часто они делают онлайновые покупки. настоятельно рекомендуется сформировать несколько детальных. 3. быстродействие связи. возможности. который будет использован в креативном брифе в качестве профиля аудитории. предпочитаемые ими броузеры и места их проживания. следует изучить аудиторию. кто посещает сайт.для личной переписки. Он очень хорошо ориентируется в Сети и регулярно (2 или 3 раза в месяц) делает онлайновые покупки книг.1). частоту работы и интересы в Сети (какие сайты они посещают и почему. пол. Результаты окупят затраченные усилия.org. работающий в Сети ежедневно. Типичное демографическое описание пользователей включает род занятий. В это описание также входит тип их компьютеров. из которого можно получить общее представление о том. имеет имя пользователя и пароль и может делать покупки быстро и легко». компакт-дисков. чаще всего используя библиотечные компьютеры для учебных задач. индивидуальных профилей (рис. Он имеет высокоскоростной доступ в Интернет из общежития и из библиотеки. названий и товаров для совершения покупок. http://openlib. Вот пример общего профиля пользователя: «Типичный пользователь . выполняемые им на сайте. включающая обычные задачи.ua/ . насколько хорошо ориентируются в Сети). желания и специфические особенности пользователей вам следует знать? Все (или. Большинство сайтов посещает несколько четко различающихся категорий пользователей. Какие потребности. Имейте в виду. что может потребоваться создание профилей для нескольких целевых групп (при многочисленной аудитории создайте отдельные профили пользователей). как можно больше). Это должна быть краткая справка о каждом типе пользователей.

1. в которых ожидания клиента не отвечают реальности (рис. называемый также «образом персоны». У Пэйдж свой дом. помните. 3. творческий потенциал и время Определение технических требований Какие технологические новинки потребуются для редизайна? Это. 3. а также усиление безопасности. Только внешний редизайн сайта.org. но она собирается скоро перейти на DSL У нее компьютер Mac G3. Если сайту необходима внутренняя база данных. что у них приемлемые цены. У Пэйдж есть модем 56 К. Пэйдж самостоятельно изучает поведение собак и методы их дрессировки. что эта книга не является пошаговой инструкцией для внутренних программных разработок. катается на велосипеде в горах и играет с Рути. может быть настолько детален. возможности е-коммерции. что это экономит время. даже если он имеет обширный масштаб. бесспорно. который предусматривает еще и динамический контент. Клиенты очень часто хотят иметь все — нужное и ненужное. похожие на склады. которые вызывают у нее приятные эстетические чувства. Рис.Фаза 1: Определение проекта 79 Пэйдж Мак-Кормик Пэйдж Мак-Кормик . Она делает много покупок в Сети и находит. хотя она признает. Поскольку желания клиента могут быть неосуществимыми (и довольно часто). Этот образец профиля дает подробное описание типичного пользователя. Анализ необходимых технологий (внутренних и для внешнего интерфейса) позволит выявить аспекты. хотя иногда доставка бывает не на высоте. Пожалуйста. что не рассматривается в этой книге. но Рути сразу потрошит их и ест наполнитель. обустраивая его и занимаясь садоводством. а значит. Информация о том. Она любит маленькие магазинчики для животных. параллельный проект. Пэйдж очень ценит ежемесячную автоматическую поставку продуктов питания для собаки. совсем не представляя связанные с этим затраты. динамический контент и так далее. насколько позволяют ваши сведения. и ненавидит огромные зоомагазины типа PetClub. Ей нравится жить рядом с лесопарком. как каждое выбранное решение отразится на масштабе. http://openlib. руководитель проекта должен удостовериться. Она перестала покупать мягкие игрушки: они очень симпатичные. Она ведет очень насыщенный и активный образ жизни. так как это дает прекрасную возможность для Руги побегать за белками. она со своей собакой Руги живет на северо-западе Портленда около лесопарка.2). что клиент понимает не только основные принципы редизайна веб-сайта. штат Орегон. и она считает себя большим знатоком компьютеров. тогда требуется дополнительный. один из наиболее существенных моментов в фазе 1: Определение проекта. Ей 35 лет. дана во введении.ua/ . Такой документ. художник и инструктор лиги Little League Track для девочек в Портленде. Пэйдж Мак-Кормик (Paige McCormick) Пэйдж очень любит свою собаку и балует ее. она проводит много времени. очень отличается от проекта. Свободное время Пэйдж проводит на открытом воздухе: делает пробежки.преподаватель искусств в начальной школе. и на бюджете проекта. но также и то.

их желаниях помогут группе разработчиков принимать важные и стратегические решения. 3. Всегда бывают разногласия по поводу того.org. Хотя эта информация полезна для общего планирования производства и маркетинга. Охарактеризуйте свою аудиторию. а затем опросить по крайней мере по одному человеку из каждой категории. При наличии альтернативных решений дизайнеры воспользуются данными пользовательских профилей. потребуется ли Пэйдж текущая функциональность или будет ли Пэйдж уходить с сайта по рекламному баннеру.1). Они фокусируются на обсуждении тенденций и секторов рынка. Однако если уделить время и выяснить. Но часто не хватает времени даже на минимальное исследование. Однако для работы дизайнеров и веб-разработчиков требуются как раз эти подробности. его хобби. создают абстрактное представление о людях. Обычно компании опрашивают фокусные группы или исследуют состояние рынка. Я не говорю. аргументы изменятся от «я бы этого никогда не делал» или «моей маме это не понравится» до аргументов. потребности и желания пользователей. напишите очерк о реальном пользователе . учтут в работе над проектом. Иногда проектные http://openlib. как должен выглядеть и работать новый или модернизируемый продукт. что более важно. что не следует проводить традиционные исследования. какие категории пользователей относятся к целевой группе. что реальные люди постоянно удивляются неожиданным вещам. которые описывают цели. но не содержат никаких подробностей об отдельных потре- бителях. Результатом таких исследований являются краткие резюме. например Пэйдж (рис.80 Глава 3 Кейт Гомолл (Kate Gomoll) о профилировании пользователей Дизайнеры и разработчики во время проектирования должны иметь в виду реальных людей. предпочтениями в товарах.с его фотографиями. Проектировщики прочтут это и. которые составляет большинство отделов исследований рынка. причудами. выраженные в процентах и тенденциях.ua/ . опрашивая фокусные группы и делая обзоры. она недостаточно специфична для дизайнеров производства и веб-разработчиков. любимыми питомцами и описанием образа жизни. их неудовлетворенности. которые могут делать и высказывать другие реальные люди. Резюме. учитывающих интересы конкретных пользователей. Телевидение оказалось таким успешным именно потому. чтобы узнать о потенциальных потребителях своих товаров. Члены проектной группы будут задумываться. Конкретные детали о мотивации пользователей. если можно. чтобы сделать разумный выбор. можно получить очень полезные пользовательские профили. Но когда имеется профиль реальных посетителей.

Вы увидите. 1990 и «The Macintosh Human Interface Guidelines».com).Фаза 1: Определение проекта группы проводят базовое профилирование . WebTV. Потом переработайте их.gomolldesign. http://openlib. только если их станут читать. создайте профили для многих потенциальных пользователей. Если позволяет время и бюджет. чем любая фантазия. Обзоры Кейт о пользовательской среде вошли в книги «The Art of Human Computer Interface Design». 1992. в течение многих лет она преподает дизайн с учетом интересов пользователя на семинарах UCLA Extension. чтобы написать привлекательный комментарий. сформировав лишь несколько собирательных образов.президент Gomoll Research & Design. а не гипотетических. Кейт преподает методы изучения пользователей на международных конференциях и семинарах. Addison-Wesley. Последними клиентами компании были DirecTV. станут краткими описаниями категорий потребителей. уделите время. также называемые «образами персон». использующих ваш продукт. Секрет успешного профилирования пользователей заключается в использовании сведений о реальных людях. запоминающимся. Addison-Wesley. надуманных историй. их окружени е. олицетворяющих собой разные 81 категории пользователей. Кейт Гомолл . что действительность более удивительна и принесет больше открытий. Кроме того.org. сделайте каждого человека. Используйте сведения. специализирующейся на дизайне пользовательской среды.даже когда оно не предусмотрено в бюджете . Hewlett-Packard. чтобы описать каждого человека как личность. что разработчикам необходимы эти данные! Они не могут хорошо выполнить свою работу. Charles Schwab. Internet Appliance Network и Compaq. что им не нравится • Наблюдения • Модели способов использования изделий • Неудовлетворенность вашим или подобными изделиями • Пожелания в отношении изделия Поскольку эти профили полезны. Inc. До открытия своей консультативной компании Кейт работала разработчиком интерфейсов в Advanced Technology Group фирмы Apple Computer. Какие сведения следует включить в пользовательские профили? • Основные демографические данные • Очерки о типичном дне жизни • Фотографии людей. Эти конфигурации. собранные у пользователей.ua/ .просто потому. не зная конкретные сведения о потенциальных пользователях. (www. их инструменты • Предпочтения и сведения о том. которого вы профилируете. консультативной компании. Признанный в стране эксперт в области разработки и юзабилити интерфейса программного обеспечения.

org.82 Глава 3 Рис. то следует делать расчет на пользователей со старыми технологиями и с низкими требованиями к быстродействию.выяснить технические возможности этой аудитории.2. 3. чем пользователи с каналом Т1 и новейшими броузерами. Узнав об истинных затратах и сроках. Эти пользователи не менее ценны для клиента.«все. уточнить масштаб проекта. Такой клиент рассчитывает на аудиторию. которая поддерживает все прогрессивные технологии (полноценный Flash. Задача проектной группы . клиент стремится показать самые новейшие технологии. Результат . новейшие броузеры и так далее). вероятно. соответственно. Высокая или низкая пропускная способность? Большинство клиентов обычно знает. Ориентируясь на пользователей с хорошей связью. у кого есть компьютер. не заботясь о тех. кому они недоступны.потеря потенциального заказчика. а затем. Высокие требования разочаровали бы обладателей медленных модемов и. Если ваша целевая аудитория . используют для просмотра старые броузеры и все еще работают с медленными модемами. и еще некоторые». Многие веб-пользователи имеют мониторы с маленьким экраном. они обычно корректируют свои технические пожелания Понимание возможностей аудитории Это сводится к вопросу: кого клиент готов оставить без внимания? Некоторые сайты стремятся быть доступными для любых пользователей. в какой категории пользователей они заинтересованы. Это обычно эксперимен- http://openlib. заставили бы их прерывать загрузку страницы. Клиенты часто слабо представляют фактическую стоимость различных технологий.ua/ .

Один и тот же сайт.5) отвечает этим требованиям: при загрузке Flash-сайта также предлагается и его HTML-версия. начните определять. Этим сайтам не требуются никакие специальные технологии или плагины. Сайт трилогии кинофильма «Властелин Колец» (рис. Сколько процентов ваших пользо- http://openlib. Примером может служить веб-сайт www. Некоторые сайты (например. но они хотят иметь и несколько более прогрессивные технологии. Большинство компаний стремится привлекать целевую аудиторию с широким кругом интересов ту.Фаза1: Определение проекта тальные и передовые (с точки зрения дизайна) сайты. который быстро загружается у «пользователей с высокой пропускной способностью». а именно: скорость связи.com (рис. и они нормально работают и с небольшими экранами мониторов. подобные сайту Altoids Too Hot (рис.org. соответствующий их оснащенности. Решите. 3. Многие оснащенные новейшими технологиями и программами машины приобретаются людьми с очень небольшим онлайновым опытом. что многие новички попадают в Сеть через высокоскоростные сети компаний. речь идет о пользователях с самыми последними версиями броузеров. Анализ возможностей аудитории Поняв.macromedia. Поэтому.amazon. больше уже не учитываются модемы со скоростью 14. 83 Пропускная способность? В этой книге подразумевается довольно узкое значение термина «пропускная способность» (bandwidth).4 и почти не учитываются 28.8 нужно поднимать планку). где DSL недоступен).3).профессионал в использовании Сети. 3. которые могут поддерживать высокоскоростную загрузку (то есть о пользователях с каналом Т1 или DSL на сравнительно новых машинах). который автоматически направляет пользователей на сайт. то есть время загрузки страниц. и со старыми броузерами. будет загружаться медленно у пользователей с модемами и на машинах более чем двухлетней давности.4). когда говорится о «пользователе с высокой пропускной способностью» (high-bandwidth user). которые способны оценить и ценят красивые сайты. которые должны быть доступны для всех (включая многообещающий рынок беспроводных технологий) и везде (даже там. плагины и тому подобное. а включают анализатор броузера. которая включает пользователей и с модемами.com) даже не отдают выбор на откуп пользователям. Помните также. Это подавляющее большинство пользователей . что пользователь . Эти компании не хотят терять технически слабо оснащенных пользователей. Сайты. Высокая пропускная способность канала необязательно означает то. и с более быстродействующими каналами связи. каковы ее технические возможности. версия броузера. чтобы привлечь пользователей. на какую часть аудитории следует ориентироваться и какую можно не принимать в расчет.так называемый массовый рынок.ua/ . www. должны ориентироваться на низкоскоростную аудиторию. что из себя представляет аудитория сайта. 3. Такие сайты загружаются быстро даже через модемы (правда.

Низкая скорость связи: www.com загружается мгновенно при DSLподключении.ua/ . но его загрузка пользователями модемов занимает минуту.amazon.toohot. Он доступен даже пользователям с броузером версии 3. 3.org.3. Высокая скорость связи: www. 3.0 http://openlib.com загружается мгновенно даже модемами и не содержит никаких особых функциональных возможностей. Там сплошная анимация Рис.84 Глава 3 Puc.4.

Догадки такого рода хороши. На данном этапе цель состоит в выяснении технических возможностей целевой аудитории.com и www.lordoftherings. в которые должны укладываться все разработки. что позволит установить пределы. кому Flash недоступен.которые помогают сопоставлять демографические и статистические данные. все они имеют как минимум канал Т1».com. включая объем загрузки. Для тех.) Выяснение этих сведений — непростая задача.ua/ . К счастью. скорость модема и совместимость броузера. . 3. На главной странице www. на странице есть ссылка: *VISIT THE NON-FLASH SITE* (*Посетите сайт без использования Flash*) вателей все еще связываются через модем? Сколько процентов имеют 17-дюймовые мониторы и можно ли пожертвовать владельцами 15-дюймовых мониторов? Какой процент вашей аудитории загрузил самую последнюю версию Flash? С броузером какого уровня работает большинство пользователей? Какой максимальный объем загрузки страниц будет для них еще удобен? (Заботит ли это клиента? Возможно. но оба сайта предоставляют только платные услуги. и нет.hitbox. возможно.5. если целью сайта является только присутствие в Сети.www. Чтобы удовлетворить требования пользователей с различной скоростью доступа.специалисты из СанФранциско. Клиент предлагает потоковые http://openlib. в случае редизайна существующего сайта можно воспользоваться статистикой из журналов сервера. обычно создаются две версии сайта. только если демографический состав пользователей так конкретен. Есть два ресурса .net пользователям с низкоскоростным доступом предоставляется выбор между долгой загрузкой Flash-сайта или быстрым доступом к HTML-сайту.Фаза 1: Определение проекта 85 Рис. Обычно используют общепринятые предположения типа: «Наша основная аудитория .statmarket. которые. тоже нуждаются в корректировке. Эти пределы должны соответствовать пожеланиям клиента.org. Вероятно. Как насчет данных в Сети? Немногие из них являются достоверными или достаточно свежими.

86 Раньше привлекайте вашего технического специалиста Независимо от сложности проекта . .это документ. Поскольку спецификация представляет собой техническую схему сайта. необходимо для очень крупных веб-сайтов (для небольших сайтов можно подготовить менее подробную версию). Это означает. Данный шаг гарантирует применение единой терминологии и обеспечивает одинаковое понимание планов развития сайта. то обязательно следует подготовить техническую спецификацию. так как данный этап . требует ознакомления с ним и подписи всех ответственных лиц проектной группы и ответственных представителей клиента. чем гиперссылка.org. даст лучшие результаты. запланированные для любых функциональных возможностей . В зависимости от вашей квалификации вы можете доверить эти переговоры главным специалистам обеих сторон.ua/ . Техническая спецификация (Tech Spec) Создание письменного документа. если таковые имеются. Но поскольку наша методология. Техническая спецификация . следует ли отдельно привлекать особые технологии для внутренних разработок. может не разбираться в таких вопросах.и кто бы ни читал ее.web-redesign. детально объясняющего функционирование задуманного сайта. Базовый процесс.com. О них здесь просто упоминается. называемый технической спецификацией. что представитель клиента. http://openlib. Техническая спецификация должна отразить все технологии.базы данных или других сложных транзакций. которые применимы ко всем проектам редизайна веб-сайтов (а всем сайтам нужен внешний интерфейс и только некоторые требуют внутренних разработок). Глава 3 видеоролики в формате QuickTime для пользователей с модемами? Это неприемлемо. которая требует чего-то более сложного. с которым вы контактируете. доступный для загрузки на www. сосредотачивается только на тех моментах. Этот документ.один из моментов взаимодействия между внутренними технологиями и внешним интерфейсом.каждую мельчайшую деталь взаимодействия с пользователем. он должен получить полное представление о запланированном сайте.уже на данном этапе следует привлечь к работе технических экспертов. В любом случае . обсуждение расширенных технических аспектов сведено здесь к минимуму. После заполнения этой простой анкеты будет понятно. Имейте в виду. Определение технических потребностей Используйте расширенный технический опросный лист (Expanded Tech Check).для проектной группы полезно иметь заполненный расширенный технический опросный лист. особенно при определении проекта. Своевременное подключение технического персонала. поможет решать проблемы по ходу дела и даже избежать их. Опрос технических специалистов клиента. что если сайт имеет существующую развитую внутреннюю структуру или внутренние разработки уже запланированы и будут встроены во внешний интерфейс перепроектируемого сайта.при редизайне только внешнего интерфейса или одновременно и внешнего и внутреннего .будет ли это сайт с простым внешним интерфейсом или технический монстр . к которому обе команды обращаются в ходе работы над проектом. она должна включать буквально все . вероятно. чтобы определить потребность во внутреннем программировании.

ua/ . http://openlib.com.web-redesign.Фаза 1: Определение проекта 87 Опросный лист доступен для загрузки на www.org.

88 Глава 3 Лесли Финней (Leslie Phinney) о брендинге и этапе выяснения Бренд1 по-прежнему продолжает оставаться очень модным словом. все то. остается одинаково важным независимо от информационной среды. или предпринять необходимые шаги для разработки бренда.его имидж. ред. но знание всех сильных сторон бренда. если он уже имеет яркую индивидуальность. фокусируясь на его приложении к Сети. решившей изменить свое присутствие в Сети.ua/ . но даже в этом случае ни одна компания .как с новым. усиленное эффектами дизайна. Идеи из Сети воспринимаются даже быстрее. От Nike до Intel все. Для компании. . В самых общих чертах брендинг . какими они были 10 лет назад. фирмы. сферу применения и цену. что необходимо конечному пользователю.торговая марка товара. В силу этого основной зада- Бренд (от англ. brand) . http://openlib. ее отношение к Интернету и ее онлайновые привычки. становится короче. Бренд отражает в легко узнаваемой и интересной форме главные особенности изделия или услуги . Короче говоря. за который товар или услуга должны произвести эффект. Маркетинговые проблемы и стратегии не так уж отличаются от того. чем из рекламных роликов. Далекую от простой случайности силу брендинга признали дизайнеры и годами помогают формировать его. так и с уже признанным брендом — не может позволить себе проделать реконструкцию без некоторой предварительной подготовки.Примеч.это наука и искусство определения и позиционирования именно того. Брендинг в Сети подчиняется тем же самым основным правилам с добавлением к ним понимания конкретных потребностей сайта и обращения к намного более широкой аудитории. науч. наиболее важная задача относительно брендинга не поколебать значимость существующего бренда. только и говорят о важности брендинга. поэтому промежуток времени. Исследование этих критериев может быть более легкой задачей для уже признанного бренда.org. Разве что потребители имеют теперь больший выбор. Важно принимать во внимание целевую аудиторию: используемые ею технологии. что отличает изделие или услугу данной компании. кажется.

включая и разработку брендов компаний. http://openlib. агентство или консультант по связям с общественностью. Будь это дизайнерская фирма. следует привлечь какого-либо творческого партнера. Около семи лет назад. и теперь она разрабатывает и создает для клиентов более дюжины динамических сайтов в год. чего он стоит сейчас и каков его дальнейший потенциал. Необходимо найти способ представления информации о вашем изделии или услуге и вопло- 89 тить это в достоверный. занявшейся онлайновым дизайном.org. Фирма постоянно совершенствовала свои возможности в этом направлении.Фаза 1: Определение проекта чей действительно является тщательное продумывание индивидуальности бренда.ua/ . новаторский бренд. так и с международными клиентами при совместной разработке их маркетинговой стратегии. который может объективно оценить создаваемый бренд и увидеть. которые готовы произвести множество шикарных вариантов после единственного телефонного разговора с вашим маркетинговым отделом. когда Интернет стал реальностью. его достоинств и отличительных особенностей.com) на протяжении 20 лет имела дело как с северо-западными. Лесли Финней из дизайнерской фирмы Phinneyi'Bischoff Design House в Сиэтле (www.pbdh. PBDH была одной из первых фирм Сиэтла. а затем уже можно позволить великолепной команде дизайнеров воплотить этот образ. Остерегайтесь партнеров.

90

Глава 3

Анализ отрасли
Некоторые проекты имеют прекрасную возможность использовать собственные
маркетинговые группы или уже имеют контракт на разработку на стороне. Эти
исследователи проводят исчерпывающий анализ рынка и аудитории и глубокое исследование конкуренции. Такой анализ очень хорош, но это редкость для
большинства проектов, в которых бюджет является определяющим критерием. Однако независимо от уровня бюджета уделите время изучению конкуренКОНТРОЛЬНЫЙ СПИСОК ЗАДАЧ ЭТАПА ВЫЯСНЕНИЯ
Для уверенности в том, что собрана вся необходимая
информация и можно переходить к следующему этапу, воспользуйтесь этим списком и убедитесь, что рассмотрены все аспекты компании, ее сферы деятельности и аудитории.
1 .Компания/клиент
• Раздать опрос всем ключевым лицам, принимающим решение, и согласовать основные ожидаемые результаты, понимание целевой аудитории, желательный стиль и так далее.
• Собрать имеющуюся в компании информацию:
маркетинговые материалы, исследования, другие печатные материалы и отчеты.
• Продолжить опросы по электронной почте или
по телефону и определить причины редизайна
сайта (текущие проблемы, возможные решения
и конкретные цели редизайна).
2. Отрасль
• Изучить отрасль клиента - в он- и оффлайновом аспекте. Использовать обычные методы сбора информации (библиотеки, поиск в Интернете, телефонные книги), а также платные исследования (Jupiter Research, Gartner и так далее),
если позволяет бюджет.
• Изучить публикации по данной отрасли: материалы телеконференций, организации, почтовые
рассылки, Белые страницы и так далее.
З.Стратегия/Маркетин г/Бренди нг
• Собрать информацию о текущих и планируемых
маркетинговых и рекламных ходах (реклама в
Сети и вне Сети: размещение, стратегия).
• Понять маркетинговую стратегию и реальные цели - краткосрочные и долгосрочные. (Ближай-

шей целью может быть привлечение новых заказчиков, а долгосрочной целью - создание единого бренда, признанного во всем мире.)
• Понять стратегию брендинга, впечатление, идею/
атмосферу и подход (текущие и желательные).
4.Текущий сайт
D Произвести юзабилити-тестирование и проанализировать текущий сайт. Определить, что в нем
удачно, а что не работает (навигация, контент,
функциональность).
• Собрать имеющиеся количественные данные.
Использовать регистрационные журналы сервера и маркетинговые материалы о том, каковы
текущие преимущественные типы покупок и границы трафика.
• Собрать качественные данные. Использовать отзывы посетителей и данные технических служб:
что нравится и не нравится посетителям в текущем сайте? Какие разделы являются успешными и почему?
• Собрать технические/функциональные спецификации. Получить общее представление о функционировании текущего сайта и задействованных технологиях.
• Провести ревизию контента. Что уместно и не
уместно на сайте? Насколько эффективно текущий контент отвечает всем целям сайта?
5. Конкуренция
• Определить основных и вторичных конкурентов онлайновых и вне Сети (из исследований клиента и проектной группы).
• Провести формальный или неформальный анализ конкурентоспособности (см. главу 9).

http://openlib.org.ua/

Фаза 1: Определение проекта

91

тов и сферы деятельности компании. Рассмотрите возможности текущего сайта
и оцените особенности конкурирующих сайтов. Что в них удачно? Что нет? Все
это окажет существенную помощь в изучении вашей аудитории. Такая информация позволит лучше подготовиться к редизайну успешного веб-сайта.
Можно ограничиться лишь поверхностным анализом, но настоятельно рекомендуется на фазе 1 провести анализ конкурентоспособности. Детальное обсуждение методологии этого процесса см. в главе 9.

Резюме этапа выяснения
• Выяснить основные отличительные особенности каждого конкурирующего сайта и/или ком- |
пании.
6. Аудитория
• Определить первичную целевую аудиторию (из I
исследований компании и из опроса клиента).
• Собрать демографическую информацию о це- |
левой аудитории (род занятий, пол, доход, он- I
и оффлайновые привычки, скорость связи, ис- I
пользуемые броузер и платформа).
• Создать профиль пользователя и пользовательских задач (отражающие образ жизни, рабочее и домашнее окружение, уровень доходов, 1
род занятий, использование Интернета и типич- 1
ные задачи, выполняемые на сайте клиента).
D Создать пользовательские сценарии (конкретные ситуации для целевого пользователя при
совершении онлайновой сделки или выполнении других операций).
7. Товары/услуги
I
• Ознакомиться с товарами или услугами, предлагаемыми компанией.
• Понять особенности покупок: факторы, способствующие тому, что посетитель становится
реальным покупателем или зарегистрированным клиентом.
П Определить эффективность обслуживания за- I
казчиков. Удовлетворительное оно или нет?
8. Другое
• Изучить любые дополнительные аспекты, соответствующие вашему клиенту или его отрасли, - I
все, что способствует лучшему пониманию I
предстоящих задач.

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

http://openlib.org.ua/

92

Глава 3

УТОЧНЕНИЕ
>
>

Определение окончательных
целей
Подготовка креативного
брифа

Определение
окончательных целей
«Что является целью этого редизайна?» «Почему
нужно модернизировать сайт?» «Какие возможности появятся у нового сайта, которых нет у существующего? » На все эти вопросы вам нужно дать ответ. Однако не слишком увлекайтесь. Еще не время
искать ответ на вопрос: «Как мы собираемся перепроектировать сайт?» Это вы будете продумывать
при формировании плана проекта. Пока же требуется осмыслить конкретные цели. Проанализируйте опрос клиента. Какие цели перечислил клиент?
Конкретны ли они? Не упоминались ли дополнительные цели при последующих контактах с клиентом? Добавьте их и создайте полный список целей.
Ниже приводятся некоторые возможные цели клиентов:
• Увеличить трафик
• Увеличить объем продаж
• Продвинуть на рынок новый продукт
• Сделать сайт динамическим, с управляемым
контентом
• Сократить количество звонков заказчиков
в технические службы
• Создать интуитивную навигацию
• Упростить просмотр и покупку товаров
• Создать масштабируемую структуру
для будущего роста
Однако что это за цели, если не будет способа оценить, достигнуты ли они? Как клиент определит,
отвечает ли сайт после запуска заявленным целям? Возьмите список целей и рассортируйте их
по приоритетам на первичные, вторичные и третичные. Продумайте способы, с помощью которых
можно оценить, были ли эти цели достигнуты после запуска (например, статистический рост совершенных покупок). Чтобы определить успешность

http://openlib.org.ua/

Фаза1: Определение проекта

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

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

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

http://openlib.org.ua/

94

Глава 3

Рис. 3.6. Образец креативного брифа

http://openlib.org.ua/

Фаза1: Определение проекта

95

РАБОЧИЙ ЛИСТ КРЕАТИВНОГО БРИФА
Ответы на вопросы этого рабочего листа помогут эффективно сформировать креативный бриф. Часть ответов можно найти в информации, собранной на этапе выяснения (опрос клиента, исследования, обсуждения).
Резюме проекта: Представляет общие сведения
о проекте: цели и относящиеся к делу предпосылки
по редизайну сайта. Это должна быть расширенная
формулировка проекта в целом.
1. В чем заключается проект? Кратко приведите относящиеся к делу предпосылки.
2. Какова главная цель нового сайта?
3. Каковы вторичные цели?
4. Каковы долгосрочные цели?
Профиль аудитории: Профиль целевой аудитории.
Приведите достаточно подробные сведения, дающие
хорошее представление об аудитории. Включите некоторые демографические данные. Задача этого раздела - показать, кому адресован сайт. Что интересует этих людей? Что они делают в Сети ежедневно?
1. Кто составляет целевую аудиторию? Выберите типичного пользователя и подробно опишите его.
Включите род занятий, возрастной диапазон, пол,
частоту пребывания в Сети, интересы в Сети и любую другую относящуюся к делу информацию. Если необходимо, создайте несколько профилей.
2. Какие типичные задачи будет выполнять пользователь на новом сайте? (Например: регистрация,
вход, поиск информации, покупка конкретных товаров, подписка, запросы на получение дополнительной информации.)
Восприятие/Стиль/Основные принципы: Как
должна реагировать целевая аудитория на ваше новое интерактивное представительство?
1. Какое впечатление на целевую аудиторию производит компания и текущий веб-сайт?

2. Какого впечатления мы хотим добиться?
3. Как поможет в этом новый веб-сайт, достигнет ли
он этой цели?
4. Какими прилагательными можно описать впечатление, которое должны производить на целевую
аудиторию веб-сайт и компания?
5. Какое зрительное впечатление должен производить сайт?
Стратегия подачи информации: Как мы будем
убеждать целевую аудиторию?
1. Какую основную идею требуется донести до целевой аудитории? (Например, рентабельный, безопасный, надежный, эффективный.)
2. Каким образом будет внушаться эта идея? (Например, эффективным подбором материалов направленного содержания или специальным предложением на начальной странице.)
3. Охарактеризуйте стадии развития (если они есть),
ведущие к достижению целей.
4. Как будет оцениваться успешность перепроектированного сайта?
Конкурентоспособность и позиционирование:
Чем компания отличается от конкурентов и какие факторы сделают ее более успешной?
1. Чем компания или облик ее сайта отличается от
конкурентов?
2. Что особенно выделяет компанию среди конкурентов?
3. Какие элементы текущего сайта являются успешными и почему?
Основная идея: Придумайте слово или короткую
фразу, которая адекватно опишет перепроектированный сайт.

Этот рабочий лист доступен для загрузки на www.web-redesign.com.

http://openlib.org.ua/

96

Глава 3

ПЛАНИРОВАНИЕ
>
>
>
>

Создание плана проекта
Составление бюджета
Составление графиков работ
Формирование проектной
группы
> Организация демонстрационной площадки
> Планирование юзер-тестинга

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

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

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

1_

http://openlib.org.ua/

включите перечень деталей и уточнений (рис. уточните те моменты. • Этот проект рассчитан на срок выполнения 11 недель. например планы работ). которые клиент может неправильно понимать или произвольно изменять. что клиент одобрил и подписал план проекта. Он представляется клиенту наряду с юридическим контрактом и первоначальным счетом. Основная цель списка деталей и уточнений оградить проектную группу. С момента подписи клиентом плана проекта или предложения (что бы вы ни представляли) можно начинать отсчет времени. прежде всего. 667 http://openlib. которые часто могут трактоваться по-разному (другими словами. как подпись на документе. 3. поэтому тщательно перечислите все необходимые детали. ближе к месту для подписей (где клиент точно обратит внимание). К перечню деталей и уточнений можно добавить такие пункты: • Данный сайт будет содержать от 20 до 25 страниц.ua/ . Детали и уточнения В конце плана проекта. 4 Зак. Ничто не накладывает такую ответственность.7). Удостоверьтесь. Список деталей и уточнений должен быть кратким и должен оговаривать конкретные аспекты. Одобрением плана проекта клиент подтверждает свое понимание того.org. План проекта . какие действия будут предприняты проектной группой от его имени. от споров с клиентом по поводу масштаба проекта в виде простого и читаемого списка пунктов.Фаза 1: Определение проекта 97 • Распределение бюджета • Креативный бриф • Сведения о целевой аудитории • Профили пользователей • Технические возможности аудитории • План юзер-тестинга • Детали и уточнения • Место для подписей (ОЧЕНЬ ВАЖНО) План проекта защищает как проектную группу. Он разъясняет все аспекты и формирует стартовый плацдарм для начала работ. так и клиента. После официального утверждения проекта любые добавления к этому документу приведут к дополнительному финансированию.готовый компонент.

Используйте этот типовой список деталей и уточнений как образец. Задержка с поставкой контента прямо отразится на бюджете и сроках исполнения. Старайтесь представить все как можно нагляднее. соответственно переработанной <фирма-веб-разработчик> при создании архитектуры сайта. 3. Измените его в соответствии с потребностями конкретного проекта. добавление дополнительных возможностей). но не заплатит за это дополнительно. Или если из-за необязательности клиента поставка контента задержится на три недели. • • • Производство сайта включает создание и оптимизацию всех файлов/изображений и HTML-кода объемом до < > страниц. Чем более детально будут оговорены различные аспекты. Детали и уточнения • Данный проект включает разработку концепции. указанные в письменной форме в документах проекта.и аудиоматериалы предоставляются в цифровом формате. • Структура и иерархия сайта будут основаны на предоставленной клиентом информации. Учтите.org.E. Рис.ua/ .98 Глава 3 • Все затраты на фотографии/иллюстрации возлагаются на клиента и не включены в бюджет. • Клиент обеспечивает все текстовое содержание (контент) в электронном формате на диске. готовом для использования в онлайне. Он составляется для большей ясности и служит только как рекомендация http://openlib. задержки в поставке контента. а также в виде выверенных печатных копий. проект не будет выполняться после <дата>. что хотя список деталей и уточнений может быть включен в контракт (и стать частью юридического соглашения). Поскольку проектная группа располагает временем только в предопределенных границах. Видео. После согласования всех требований к сайту могут понадобиться дополнительные затраты на разработку приложений и другие потребности в программировании. Факторы.7. Сайт создается для работы на сервере UNIX или NT и будет доступен для PC и Мае с броузерами Netscape 3. тем более защищенной будет проектная группа (это особенно важно для внешних групп веб-разработчиков). 3. влияющие на объем и график работ (например. Данный сайт содержит сценарии. что сразу предусматривалось создание 40 страниц. которые включают только динамическое изменение графики на JavaScript. Производство и графики работ зависят от поставки всего контента в точно установленные сроки.0+ и I. Данный проект распланирован и оценен в расчете на 10-недельный срок работ начиная с <дата>. В этом случае. Представленный бюджет основан на существующей информации. если в разгаре работ по проекту клиент захочет добавить 15 страниц. проектная группа будет иметь основание для увеличения бюджета. он не сможет доказать.0+. что затянет работы или приведет к необходимости сверхурочных работ. дизайн и макет. могут соответственно потребовать увеличение бюджета. производство и программирование для <клиент/проект> веб-сайта. сам по себе он не является юридическим документом. Получение любого/всех прав на использование готовых работ ответственность клиента.

технологии и программирование внутреннего интерфейса. сколько времени и усилий можно отвести на каждый конкретный этап.30% после одобрения предложения или плана проекта.org. чем думается на первый взгляд. слова «в зависимости от бюджета» диктуют. Хотя конкретные проекты зависят от опыта группы.важнейший фактор для того. может реализоваться в гораздо более эффективный редизайн сайта. распределенный с умом. Вопросы оплаты должны быть согласованы до начала работ. накладные расходы и побочные издержки. И имейте в виду. Будьте более реалистичны. запланированный диапазон или сумма. если опустить детали. Проверено на опыте: любая задача требует больше времени. распределение по срокам и ожидаемые результаты. Реалистичность бюджета №1: Оценивайте все что возможно Большинство компаний оценивает все что возможно. Таким образом. отслеживание времени . Да. которое займет выполнение каждой фазы и задачи. 30% после одобрения стиля и дизайна сайта. пожеланий клиента и текущей конъюнктуры рынка. границы и выполнимость проекта. так как это определяет объем. а остальное . по группам или просто угадыванием (не рекомендуется). Реалистичность бюджета №2: Он сводится к срокам исполнения Распределять бюджет можно по задачам. необходимо учитывать и следующие аспекты: доступность и ресурсы.Фаза1: Определение проекта 99 Составление бюджета Когда предъявлять счет? Оценка стоимости работ по редизайну веб-сайта может быть особенно проблематичной. чем неумело распределенный бюджет в 80 000 долларов. Четко оговорите. Бюджет проекта определяет его фактический размер. можно выписать счет на круглую сумму в 50 000 долларов и все равно потерять деньги. учитывая множество побочных факторов и неизбежную тенденцию к разбуханию проекта.ua/ . подстраховывайтесь.после сдачи проекта. Типичная схема . что при необходимости все дополнительные затраты будут ясно обоснованы и одобрены на любой фазе разработки и что дополнительное финансирование будет добавлено к заключительному счету. а также документирование.и не сумеете покрыть даже собственные накладные расходы. чтобы уложиться в рамки бюджета. — особенно руководство проектом. все сводится к одному: к затраченному времени. Недооцените что-либо . что бюджет в 25 000 долларов. Независимо от выбранной методологии и вида представленного бюджета (будь это фиксированная сумма. основанная на затраченном времени и использованных материалах). http://openlib. Распределение бюджета одна из первых административных задач. Необходим опыт и умение правильно рассчитать время.

В этом случае руководитель проекта должен четко контролировать масштаб проекта. Благодаря этому. Надбавка к расчетной стоимости Введите поправку к расчетной стоимости работ. Однозначно оговорите в списке деталей и уточнений или в плане проекта. Тщательно контролируйте время работ и все вносимые клиентом изменения. что работы идут в соответствии с намеченным планом. Клиент присылает по электронной почте просьбу внести пустяковые поправки? Клиент пишет по 10 раз в день вместо того. чтобы обобщить сразу все замечания? Или еще хуже — клиент обращается со своими предложениями. что следует проявлять твердость в отношении требуемых клиентом «незначительных» поправок и в отслеживании времени для гарантии того. а не к руководителю проекта? Происходят ли поставка контента. как различные графики и планы сдачи этапных работ помогают удержать проект в намеченных рамках. оплата телефонов. Мелочи аккумулируются.это медленное. Глава 3 Понимание концепции разбухания проекта Разбухание проекта . Стандартная надбавка составляет от 10 до 20%.какие поправки находятся в пределах бюджета и что выходит за его рамки. спросите себя и свою команду. а иногда на неприятную необходимость тратиться на юристов. От 50 до 100% надбавки к стоимости часто уходит на такие накладные расходы. почему это произошло.ua/ . можно и не заметить. Это означает. Некоторые задержки предусматриваются. Разбухание проекта неуловимо. чтобы уложиться в отпущенный бюджет. На вступительной встрече познакомьте и клиента и проектную группу с концепцией разбухания проекта и объясните. или на более пессимистичной ноте по крайней мере быть в курсе.100 Возможные проблемы с фиксированной стоимостью Многие клиенты требуют установления фиксированной стоимости работ. четко продуманного проекта веб-сайта в неуправляемый кошмар.org. чтобы учесть непредвиденные обстоятельства и накладные расходы. но неизбежное перерастание ясного. как аренда. ему можно указать на эти документы. Четко определите этапы сдачи работ. что это уже случилось. что вы работаете себе в убыток или с гораздо меньшей прибылью. инструкциями и/или поправками напрямую к разработчику и дизайнеру. административные задачи. но руководитель проекта должен добиться от клиента ясного и четкого определения . что инициируемые клиентом изменения должны оплачиваться дополнительно. необходимые обсуждения и одобрение. Незначительные с виду поправки и незапланированное длительное согласование различных вопросов с клиентом приводит к росту затрат и отставанию от сроков. в случае когда клиент страдает избирательными провалами в памяти. а также утверждение документов в назначенные сроки или все затягивается? Перечисленные факторы способствуют разбуханию проекта. Заметив перерасход запланированного бюджета. http://openlib.

иллюстрирующую типичное распределение времени для трех проектов разного объема. начните все организованно и продолжайте в том же духе. каким бы превосходным ни было ее исполнение. многостраничный отчет. фазовое представление своего проекта. Необязательно подшивать в папку и сохранять там всю электронную почту. Для каждого проекта создайте отдельный каталог (или папку для бумаг) и храните там всю подписанную документацию: контракты. Значимость каждого документа зависит от четкости изложения. Можно предложить некоторые критерии. брифы. можно разбить его на недели в электронной таблице (рис. Избегайте перемешивания файлов и потери документов. касающиеся бюджета. так и для поддержания вашей репутации. Однако иногда большая часть документов важна. планы и графики работ важны как для работы над проектом. Сделайте это своим главным принципом. Сохраняйте их также и в электронном варианте. http://openlib. а не обязательно от шикарного оформления. как сообщения электронной почты. Все формы. каждый из которых основан на выполнении пятифазного Базового процесса. См. Будьте максимально объективны: может ли проект быть выполнен раньше намеченной даты запуска сайта? Произведите отсчет от даты запуска. запрашивайте подпись через факс.сохраните ее. но всегда добивайтесь получения подписанного документа. Получив такое концептуальное. дополненный многоцветными глянцевыми иллюстрациями и отформатированный по высшему разряду. но прежде всего это зависит от вашей способности должным образом оценить размеры проекта (насколько велика работа в действительности?) и взаимодействия с клиентом (сколько времени займут обсуждения и согласования?). Документы (большинство) могут быть краткими.Фаза 1: Определение проекта 101 Можно произвести потрясающий редизайн сайта.9). одобренные карты сайта. Документация Существует хорошее эмпирическое правило: если клиент подписал бумагу . Может оказаться. первоначальное предложение и его последующие редакции. особенно если у вас капризный клиент или неслаженная группа. Одобрения по электронной почте хороши для начала. диаграмму (рис. Обратите внимание на то. вряд ли вы получите удовлетворение от невыгодной работы. Распределение бюджета: что и как оценивать Оценка стоимости проекта требует навыков.org. Избегайте разбухания проекта. какая часть ресурсов отводится на общее руководство проектом. 3. Сколько часов отводится каждой задаче? Кто входит в проектную группу? Какие работы будут сдаваться поэтапно? Прогнозируйте реалистичные сроки. как отпечатанный. отказов и особенно просьб об изменениях. что следует увеличить ресурсы и обсудить с клиентом необходимость дополнительного финансирования. чтобы защитить себя в дальнейшем. но следует распечатывать и иметь под рукой все сообщения. которые помогут прогнозированию. а затем используйте математику. размера проекта.8). но если при этом превышен бюджет и нет возможности оправдать перерасход. или официозными. брифы.ua/ . 3. варианты визуального оформления и так далее. Начнем с главного: определите свои временные рамки и ресурсы. необходимые для достижения цели.

каждый конкретный проект отличается объемом работ. 3. ожидаемыми результатами и отчетными этапами http://openlib.8.org. Это только пример.ua/ .102 Глава 3 Рис. масштабом. Образец распределения времени для трех проектов разного объема.

ua/ .org.Фаза 1: Определение проекта 103 http://openlib.

org. 3. и постоянно контролируйте общее вре- http://openlib. являются прибыльными. и затем старательно и четко используйте его. Эту таблицу можно также использовать для еженедельного сравнения потраченного времени с запланированным. либо просто удачливы. что вся команда еженедельно представляет точные данные (это повышает ответственность сотрудников). Это как дважды два. (Бланк можно загрузить с www. Это единственный способ узнать.Рис. с помощью которого будете отслеживать время работы над проектом.) Как правило.ua/ . авторы надеются.5 долларов в час или 50. Удостоверьтесь. (Правда. Выберите метод. что читатели найдут здесь и другие полезные советы. которые отслеживают время и поэтому всегда знают состояние своего бюджета и как он используется.) Отслеживание времени Если вы запомните только что-то одно из этой книги. кто не следит за временем. Этот счетчик бюджетного времени . чего стоят ваши труды . Отслеживание времени важно и для специализированных фирм и для внутренних проектных отделов. в которой для каждого вида работ установлена почасовая стоимость и затраченное время. организации. а также подсчитан общий итог занятого времени за каждую неделю.com.довольно простая электронная таблица Microsoft Excel.9. практикующих почасовые расценки.web-redesign. то пусть это будет совет ОТСЛЕЖИВАТЬ ВРЕМЯ. На данном примере показана типичная восьминедельная разбивка для небольшой внутренней проектной группы. но особенно для фирм. Те же. либо неприбыльны.

отстают ли или опережают его Puc. Timeslice (рис. Любое фактическое время. сравнивая его с запланированным распределением времени (рис. чтобы держать под контролем масштаб проекта и правильность распределения времени. окажется съеденным впустую.10.org. Такой отчет ничего не даст. позволяет регистрировать время в больших и маленьких периодах.asdsoft. Используйте любые действующие системы отслеживания времени. и делает сортировку очень легкой http://openlib. приращение ответов на электронную почту (не учитывая.11). Следите за временем еженедельно. например.com) позволяет отслеживать время.Фаза1: Определение проекта 105 мя работы всей группы. если сотрудники не в курсе реального состояния работ .в рамках ли они проектного плана. потраченному и оставшемуся.ua/ . 3. Однако если эти же задачи были одобрены. 3. что ответы Рис. Timeslice (www.11. лишь щелкнув мышкой. запланированному в бюджете. Каждую неделю составляйте короткий отчет по времени. то они могут быть предъявлены клиенту для дополнительной оплаты.10). которые не были отражены в бюджете. особенно если это происходит из-за разбухания проекта. 3. Знание потраченного проектного времени очень существенно для контроля бюджета и размера проекта. 3. должным образом введены в рамки проекта и аккуратно отслежены по временным затратам. Информируйте группу о результатах. потраченное на задачи. Следует как можно раньше уведомить клиента о выходе за рамки бюджета.

Примеч. а также определяющий характер иллюстрации. необходимому конкретным ролям в группе. . из чего складывается общая стоимость проекта. написание статей.web-redesign.Глава 3 106 Зачастую при наличии опытной и слаженной команды более эффективно оценивать необходимое время в расчете на членов группы.org. а не по времени.главное. создание сценариев радио. Копирайтер . (Например: «Кейт справится с информационным дизайном на сайте такого размера и сложности приблизительно за 40 часов».писатель) первоначально .слоган. чтобы клиенту было понятно.) Можно использовать и тот и другой метод . Сейчас в обязанности копирайтеров входит также придумывание названий для новых брэндов. http://openlib. сору .(от англ. Бланки расчетов можно загрузить с www.)Такой метод лучше подходит для фирм. от 30 до 40 часов».материал для текста и writer . науч. (Например: «В этом проекте на информационный дизайн уйдет.и телевизионных роликов. ред. заголовок и сам текст. В других же случаях проще оценивать проект по отдельным задачам. создающий текстовую часть рекламы в газетах . текстов рекламных брошюр.ua/ . вероятно. специализирующихся на вебпроектировании.com.сотрудник рекламного агентства. буклетов и листовок.

условны и не соответствуют реалиям никакого из рынков.ua/ .org.Фаза1: Определение проекта 107 Ставки. http://openlib. приведенные здесь.

http://openlib. а значит отодвигают и окончательную дату поставки. Клиент сам может отказаться от новых планов или согласится на официальное изменение в проекте. отметив как «бесплатное». стоит объяснить это клиенту. задерживая свои ответы. в форме календаря. к концу дня мы представим отдельный план и бюджет». которые не предусмотрены в первоначальной формулировке проекта. к тому же. а также может сортировать данные по разным клиентам. все равно стоит оформить его по правилам. От этого зависит результат проекта. Возможно. Речь идет не о явных просьбах об изменениях в проекте. можно улыбнуться и уверенно ответить: «Нет проблем. Составление графиков работ Для проекта нужен график его выполнения. Оно действует. как звонок будильника: «Пора начинать. насколько эффективен такой подход против разбухания проекта. Форма для дополнительного финансирования . К задаче календарного планирования можно подойти с двух сторон. фиксированные предельные сроки стимулируют людей. делая упор на стремление вовремя достичь цели. В любом случае аккуратно придерживайтесь выбранного вами метода. Цели ясны. в котором перечислите также этапы завершения компонентов работы и сроки их сдачи-приемки.Глава 3 108 на электронную почту свидетельствуют о разбухании проекта). и иметь соответствующий документ.ua/ .удобный способ задокументировать изменения в масштабе проекта (рис. Одно следует из другого. Распределение заданий подстегивает каждого. Многие клиенты не понимают. Такое объяснение должно быть нормально оценено. в котором хронологически представлена методология работы. сообщения по электронной почте или в виде еженедельника. Даже если изменение не требует дополнительных ассигнований. Когда клиент напрямую просит ввести дополнительную возможность или раздел. Изменения. Существует много способов хронологически распределить предстоящие работы: в виде списков с отметкой о выполнении. они тормозят запланированные работы.org. Таблицы учета времени на бумаге также хороши. что. каждый подход дает свою перспективу. Плюс к этому график проектных работ должен еще подчеркивать степень их срочности. Стремитесь к четкому изложению заданий. Удивительно. что можно интерпретировать по-разному. Пропущенные сроки имеют эффект домино. проектам и задачам. но они не очень точны.14). 3. если у вас несколько клиентов или несколько задач. Представьте на одобрение клиента оба графика. инициализируемые клиентом Разбухание проекта неуловимо. а затем сформируйте детальный план на каждый день. Не оставляйте в них ничего. Сначала создайте обзорный план работ. Формы для дополнительного финансирования служат поправками к одобренному бюджету. задачи определены».

web-redesign. Используйте эту форму для дополнительного финансирования как образец при создании своей формы http://openlib.ua/ .com. Рис.org.Фаза 1: Определение проекта 109 Эту форму можно загрузить с www.14. 3.

подлежащие сдаче. В качестве образца см. Для небольших проектов обзорный и подробный графики работ и сдаваемых компонентов можно объединить или использовать параллельно. анализом основных (рубежных) этапов работ и определением готовых компонентов. Подробный график работ и компонентов. Мы предлагаем использовать базовые фазы. 3.ua/ . а также на фазы и этапы. Эта информация всегда должна быть доступна и на виду. Этот общий график. Старайтесь. Он отражает последовательное продвижение проекта и очень важен для контроля над темпом работ. и на всем протяжении времени работы над проектом.Глава 3 110 Покажите методологию При формировании общего rumw на сопоставьте со сроками платежа методологические этапы (то есть все пять фаз Базового процесса). Удобный и наглядный. он служит превосходным способом представить общую перспективу весь проект. подлежащими сдаче Конкретные задачи . типовой пример (рис.это в первую очередь обзор.компоненты. подлежащих сдаче. или промежуточные этапы работ — продвигают проектную группу и клиента к намеченной цели. Обзорный график работ Обзорный график работ . чтобы не пришлось долго отыскивать даты сдачи работ. пригодится и на стадии предложения. так как покажет хронологическую последовательность задач проекта. описываемые в этой книге. Это обеспечит наглядный обзор процесса в целом. Подробный график работ с компонентами. который можно быстро сформировать.org. возможно даже напоминаться еженедельно по электронной почте или помещаться на демонстрационной площадке. представляет собой краткий перечень каждодневных задач. дополненный методологией. и на вступительной встрече по поводу начала практических работ. Календарные планы работ должны создать ощущение безотлагательности и держать клиента и всех участников проекта в курсе событий. Начните с разбиения проекта на недели или месяцы. http://openlib.15).

подлежащие сдаче. Наметить навигацию. Утвердить стиль оформления страс 27. утвердить ее у клиента и начать внутреннее тестирование и проверку качества. обучить группу под.09 сайта. а также краткий перечень задач и компонентов.09 Производство: Начать производство сайта. Определить и уточнить технические попо 10. 3. (Данный пример создан в виде простой таблицы Microsoft Word. Анонсирование. Провести анализ конкурентоспособности. Собрать.ua/ . начать их производство. Установить масштаб проекта и компоненты.09 ниц.org.2 . Начать создание шаблонов дизайна. Разработать HTML-протосайт (без использования дизайна). начать предварительное профилирование аудитории. Завершить создание онлайновой бета-версии сайта.08 по 24. тестирование и формирование Встреча .08 Структура: Определить структуру сайта. 1 0 Рис. Начать внутреннюю проверку качества (QA).07 графики работ. Выполнить тестирование бумажного прототипа сайта. обрисовывающий облик сайта. После запуска ГОТОВЫЙ САЙТ: передать все материалы и шаблоны. соответствующий одобренному положению страниц и пользовательскому интерфейсу. подлежащих сдаче.15.10 Запуск: Публичный запуск. Выяснить потребности в юзер-тестинге и сопровождении сайта. Начать структурирование страниц первого и второго уровня.24.08 по 7. Начать создание представить для просмотра в онлайновом режиме: зайн. положение страниц. модифицировать и подготовить весь контент. Сформировать и утвердить план проекта. используя БЕТА-ВЕРСИЯ САЙТА: протосайт в качестве макета и структуры. онлайновом режиме: Встреча .09 по 28. 111 Готовые компоненты ОПРОСНЫЕ ЛИСТЫ Передать клиенту ПЛАН ПРОЕКТА * Выплата аванса в размере ЗОХ перед началом работ КРЕАТИВНЫЙ БРИФ АНАЛИЗ КОНКУРЕНТОСПОСОБНОСТИ КАРТА САЙТА ПРОФИЛИ ПОЛЬЗОВАТЕЛЕЙ ПЛАН ПОСТАВКИ КОНТЕНТА СТРУКТУРИРОВАНИЕ МАРШРУТЫ ПОЛЬЗОВАТЕЛЕЙ 1-й ВАРИАНТ ДИЗАЙНА: Представить для просмотра в онлайновом режиме ПРОТОСАЙТ: неформальное юзабилити-тестирование •Выплата ЗОХ после одобрения 1-го варианта дизайна Недели 7-9 с 10. Приступить к разработке интерфейса пользователя.08 требности. Завершить составление карты сайта и утвердить ее у клиента. Недели 3-4 с 13. Переместить сайт на постоянный сервер для тестирования и проверки качества и совместимости с разными платформами. Проверить совместимость с заданными броузерами и платформами. органи-зацию контента. наиболее удобный для обмена информацией между клиентом и проектной группой) http://openlib. а также маршруты пользователей. Можно использовать также любой другой формат. Продолжить производство. Недели 5-6 Дизайн | Протосайт: Представить первый вариант дизайна/макета страницы. Пример 10неделъного обзорного графика работ отражает методологию.Представить в держки и провести заключительную встречу. макет.Фаза1: Определение проекта Дата Готовые компоненты/ Примечания Недели 1-2 Определение: Составить и утвердить общий бюджет и с 30. разработать навигацию и положение страниц. Преобразовать в цифровую форму необходимые материалы для их онлайнового использования. Составить план поставки контента и начать с ним работу (редактирование/написание) . Неделя 10 с 1. Создать профили пользователей и выяснить выполняемые ими задачи. Составить креативный бриф (на основании опросов клиента). Получить подписи клиента на всех материалах.

10 группу сопровождения и провести заключительную встречу.09 по 14.09 Продолжить производство.09 П роизводство Неделя 8 с 17. а не для клиента). Неделя 6 Дизайн | Протосайт (продолжение) Вторник. креативный бриф. АНАЛИЗ КОНКУРЕНЦИИ: Получить представление о конкурентах.09 Запуск | Публичный запуск Анонсирование Представить в онлайновом режиме. Начать внутреннюю проверку качества (QA). 7.Глава 3 112 Дата Готовые компоненты/ Подробное описание Примечания Неделя 1 Формулирование | Выяснение Понедельник 30. Пятница. Неделя 3 Структура | Контент Вторник.как можно скорее. можно поработать в выходные. Неделя 7 с 10. После запуска: Передать все необходимые материалы и шаблоны.08 ВСТУПИТЕЛЬНАЯ ВСТРЕЧА: Все заинтересованные лииа обсуждают план •Проводить встречу еженедельно проекта. (Представлен в виде таблицы Microsoft Word) http://openlib. 31.09 ПРОТОСАЙТ: Провести неформальное юзабилити-тестирование.08 Пятница.07 Четверг 2.09 'Еженедельная встреча Четверг. 3. Неделя 9 с 17. Детальный 10-неделъный график работ со сроками сдачи готовых компонентов разбивает проект на недели и дни.07 ОПРОСЫ КЛИЕНТА: Пол\мить от клиента ответы *0просные листы переданы клиенту 14. 'Выплата ЗОХ после одобрения креатива БЕТА-ВЕРСИЯ САЙТА Представить в онлайновом режиме. и представить клиенту на рассмотрение.08 ДИЗАЙН (2-й вариант): Подготовить к презентации (чтобы показать сайт клиенту в понедельник. графиков работ и компонентов.ua/ . 3. 4. 7. определить подход. Пятница. обучить Встреча-2. 24. 'Выплата аванса в размере ЗОХ перед началом работ КРЕАТИВНЫЙ БРИФ: Представитьклиенту для утверждения 'Начать неформальное юзабилити-тестирование сайта. 6. Проверить совместимость с заданными броузерами и платформами. если потребуется). а подписанный план .08 ПЛАН ПРОЕКТА: Сформировать обзор бюджета. ПЛАН ПОСТАВКИ КОНТЕНТА: Перечислить все виды контента и материалов сайта Четверг 16. 23. 14.08 ПРОФИЛИ ПОЛЬЗОВАТЕЛЕЙ: Определить целевую аудиторию.08 ДИЗАЙН (1 -й показ): Представить в онлайновом режиме для просмотра клиентом Среда.08 ДИЗАЙН (1 -й вашант): Постараться получить отзыв клиента к концу дня 'Проводить обсуждения макета еженедельно 'Проводить еженедельные обсуждения с предоставлением результатов Четверг.08 КАРТА САЙТА: Представить структуру и организацию сайта.16. Неделя 4 Структура | Контент (продолжение) Вторник. 'Выплата оставшейся суммы Рис.08 МАРШРУТЫ ПОЛЬЗОВАТЕЛЕЙ Пятница.08 АНАЛИЗ КОНКУРЕНЦИИ: Составить неофициальный отчет (отчет для разработчиков. Неделя 2 Определение | Выяснение (продолжение) Вторник. 29. тестирование и формирование сайта.09 Контроль качества (QA) Неделя 10 с 1. 21.09 по 21. план и группу по юзабилити. Переместить сайт на постоянный сервер для его испытания. подлежащих сдаче.08 МАКЕТ (2-й вариант) Неделя 5 Дизайн | Протосайт Вторник. Начать предварительный анализ конкуренции Пятница. 10.08 МАКЕТ (1-й вариант) Четверг.org. 30. проверки качества и совместимости с разными платформами. план юзер-тестинга и общий график работ.08 ПЛАН ЮЗЕР-ТЕСТИНГА: Представить клиенту и постараться получить ответ в течение дня.09 по 21.10по5.09 ШАБЛОНЫ ДЛЯ ДИЗАЙНА: Подготовить начальную страницу к производству и тестированию/оптимизации. работать в выходные Подготовить бета-версию сайта в онлайне для сдачи клиенту и начать внутреннее тестирование и проверку качества (QA).08 'Проводить обсуждения контента и карты сайта еженедельно КАРТАСАЙТА: Постараться получить одобрение или уточнения клиента к концу дня. 17. Встреча-24.10 'Если потребуется. 28. для введения клиента в курс дела Пятница.

показанные в этом разделе. наиболее удобный для проектной группы и клиента. Хороший обмен информацией помогает держаться в рамках запланированных сроков.17).macromedia.ua/ . если вдруг масштаб проекта раздуется от 8 недель до 13). подлежащих сдаче.17. К тому же. день за днем. но конкретные действия и сроки перечисляйте и описывайте в подробном графике (рис. составляется на основе обзорного графика. 3. Используйте любой стиль. Macromedia Dreamweaver имеет замечательное дополнение . обновляйте его.календарь. Одни предпочитают перечисление ключевых дат в виде списка. Держите обзорный график для справки (и. так что его легко перенести на демонстрационную площадку. 3. Обновляйте графики по мере внесения в проект изменений и сделайте их легко доступными на демонстрационной площадке. он в формате HTML. поэтому форматы документов можно менять соответственно. конечно. отражающие пианы на каждый день в календарном стиле (рис.16). http://openlib. который поможет сформировать детальный график. 3.org.Фаза1: Определение проекта 113 Используйте различные стили Методы представления документов. Вкусы и восприятие у людей разные. а другим больше нравятся обзорные графики работ.com (ищите там «calendar») Подробный график работ и материалов. Получить календарь можно на http:/'/'exchange. Рис. просто предложения.

Майк будет заниматься и дизайном и информационным проектированием). В проектной группе один человек может выполнять несколько обязанностей (например. а скорее тип задач (дизайн и информационное проектирование). Будьте реалистичны. Арт-директор может быть также ответственным за производство HTML-сайта. все слышали мудрую истину о том. графиков работ и так далее).для клиента и в группе . кто имеет право окончательной подписи от имени клиента.можно избежать сбоев. насколько сильно ее слабейшее звено. Разбейте ее на две части: клиентский демонстрационный сайт и рабочий сайт группы разработчиков.org. им необходимо прийти к общему мнению. подыскивайте надежных людей. и на работу копирайтера. Если вы руководитель и арт-директор проекта. В связи с возрастанием количества людей. так как почти всегда будут задержки. Вот ситуация: вы посылаете для одобрения клиентом готовый компонент и три дня ждете ответа. Когда на стороне клиента решения принимают несколько человек. Определите контактное лицо на стороне клиента . При умелом распределении индивидуальных задач и обязанностей . Нанимайте новых специалистов или распределяйте дополнительные обязанности между членами группы сообразно обстоятельствам. пока четыре ответственных лица найдут время для его просмотра. Чтобы минимизировать потенциальные проблемы в хорошо разработанном и стройном плане. Такое случается постоянно. http://openlib. даже если потребуются дополнительные фонды для оплаты более опытных специалистов. мнение специалиста Джима Хейда). выяснения текущих вопросов и передачи административных данных (адресов электронной почты. поэтому в расчет следует брать не отдельных исполнителей (Майк). использующих редакторы класса WYSIWYG и другие упрощенные HTML-редакторы.того.114 Глава 3 Формирование проектной группы Наверное. Поверьте. рекомендуется также создать демонстрационные площадки.разве что растянув сроки выполнения работ.ua/ . Хотя электронная почта и эффективна для обмена информацией. что любая команда сильна настолько. Руководитель проекта иногда берет на себя и проверку юзабилити. отведите для этого больше времени в графике работ. . такое «ношение нескольких портфелей» случается все чаще (см. Организация демонстрационной площадки Демонстрационная площадка играет роль центрального пункта координации работ. очень неприятно работать с неорганизованными людьми. Если компания клиента или обстоятельства вынуждают руководителя проекта получать каждый раз несколько одобрений. Если в группе есть новички. сбалансируйте их экспертами. то вряд ли найдете время еще и на информационное проектирование. Это справедливо и для проектной группы.

что сегодняшний веб-профессионал должен иметь общее представление обо всех составляющих. Возможно. Но при этом каждый должен иметь достаточно общих знаний. или знаток Flash. При работе в большой команде общее представление о веб-технологиях способствует лучшему контакту со всеми специалистами группы.потоковые данные. Сейчас он работает на www. чтобы каждый член группы имел специализацию. его третья специализация .важно. вы специалист по информационной архитектуре или по динамическому HTML или гуру в JavaScript. чтобы суметь хорошо работать с клиентами и специалистами разных областей. В случае небольшой группы . которая. Калифорния (с населением 398 человек). обогащала бы воз- можности всей группы. Различные технологии.jimheid. Важно знать понемногу обо всем и много о чем-то главном. включая серии семинаров по веб-дизайну и Macromedia Web World. http://openlib.ua/ . Я считаю. Кроме того что он известен как хороший обозреватель технологий. постоянно развиваются. и достаточно трудно не отставать даже в одной области. и в то же время моя основная область . или специалист по потоковым данным (streaming media). чтобы понимать своих коллег. так или иначе. Джим Хейд имеет несколько специализаций. чтобы найти надежных экспертов в каждой области. Могу привести собственный пример: я знаю мир веб-дизайна в целом достаточно хорошо.скажем. два-четыре человека .com и проживает в Альбионе.Фаза1: Определение проекта 115 Джим Хейд (Jim Heid) о распределении обязанностей и специализации Как информационное пространство Сеть стала достаточно сложной. и специализация становится реальной необходимостью. Наконец. Джим председатель нескольких конференций Thunder Lizard no веб-производству. Но кроме этого он должен сосредоточиться на одном конкретном направлении.org. применяемые в современных веб-сайтах.консультант по потоковым данным. Подобно многим в этой области. Все труднее в этой области оставаться универсалом.

) Арт-директор/Визуальный дизайнер (Art Director/Visual Designer) Арт-директор/визуальный дизайнер отвечает за создание качественной. руководитель проекта организует веб-проект от начала до конца и является главным лицом. При наличии нескольких визуальных дизайнеров артдиректор отвечает за их согласованную работу по созданию внешнего облика сайта.ua/ . арт-директор/визуальный дизайнер должен следовать установленному графику работ. в описании фазы 4. в главе 5 «Фаза 3: Визуальное оформление и тестирование». (Дополнительную информацию по визуальному проектированию см. (Дополнительную информацию об информационном дизайне см. Java. Руководство проектом . включая использование таблиц. соответствующей ограничениям возможностей ее просмотра целевой аудиторией. Photoshop. решает проблемы и взаимодействует со всеми членами группы и клиентом во всех фазах Базового процесса. а также согласование элементов художественного оформления с принятым стилем сайта. . сведущий в HTML и стандартах оптимизации изображений. фреймов и вопросы просмотра страниц в различных броузерах. Он должен хорошо владеть стандартными программами (Fireworks.) Информационный дизайнер (Information Designer) Информационный дизайнер отвечает за размещение. Ответственный за производство/Дизайнер производства (Production Lead/Production Designer) Ответственный за производство возглавляет группу дизайнеров по производству HTML и тестированию. Обязанности по информационному дизайну могут быть совмещены с внешним дизайном или производством сайта. Обязанности дизайнера производства может исполнять человек.Глава 3 116 РОЛИ В ПРОЕКТНОЙ ГРУППЕ Руководитель проекта (Project Manager) Называемый также продюсером сайта (site producer) или финансовым директором (account manager). Он разрабатывает карту сайта и способы навигации по контенту. эффектной графики.это связующее звено. (Дополнительную информацию по производству сайта см. В задачи руководителя проекта входит определение и формулирование фактических потребностей сайта и согласование с клиентом необходимых технологий и времени.org. Dreamweaver. Flash.все это безотносительно к внешнему оформлению страниц. От дизайнера производства может также потребоваться знакомство с ASP. структуру и юзабилити и соответствующим образом преобразует контент и бизнес-цели в подходящие функциональные и визуальные схемы и решения. в главе 4 «Фаза 2: Разработка структуры сайта». а также центральной фигурой в проектной группе. Руководитель проекта следит за ходом работ.) http://openlib. требуемого на разработку и выполнение заявленных целей в рамках установленного бюджета. следя за масштабом и графиком работ. Информационный дизайнер определяет механизм навигации по сайту. взаимодействующим с клиентом. регулярно согласовывать все вопросы с руководителем проекта и быть в состоянии самому контактировать с клиентом. В небольших проектах ответственный за производство может быть также и дизайнером производства HTML. которое объединяет весь процесс разработки и его участников в единое целое. его функциональность и взаимодействие с пользователем. Perl. GoLive). размещенному на странице. Как и все другие сотрудники группы. В его обязанности входит создание HTML-протосайта и окончательная компоновка HTML. CGI и так далее.

что особенно важно на стадии производства.от основ JavaScript до более сложного программирования (CGI. http://openlib.) В данной таблице перечислены обязанности ролей в проектной группе. (Дополнительную информацию о проверке качества сайта см. Специалист по внутренним разработкам выполняет требуемые работы параллельно с работами по перепроектированию внешнего облика сайта.ua/ .) Уровень требуемой квалификации программиста/ специалиста по внутреннему интерфейсу зависит от технических потребностей проекта . Иногда копирайтер может также выполнять обязанности контент-менеджера: следить за всеми составляющими контента (то есть фотографиями. (Дополнительную информацию по подготовке контента см. В самом начале проекта необходимо провести тщательный анализ потребностей внутреннего программирования. а подготовленные ими материалы были оговорены в проекте как поставляемые клиентом компоненты.и текстовыми материалами) и контролировать их своевременную поставку для производства.org. а иногда и после его запуска. которое должен производить сайт. Рекомендуется. в главе 8. ASP.. Ответственный за юзабилити взаимодействует с информационным дизайнером. а затем проверяет новый сайт в отношении юзабилити на фазе HTML-протосайта наряду с проверкой качества QA. Java. а также контроль размещения контента. В его обязанности входят: разработка плана тестирования. уточняя вопросы навигации и пользовательских маршрутов.роль копирайтера. чтобы копирайтер(ы) и контент-менеджер были наняты непосредственно клиентом и работали на него. ATG и Perl). отыскивает ошибки и недочеты сразу после производства сайта. Ответственный за юзабилити (Usability Lead) Ответственный за юзабилити сайта в первую очередь собирает конкретную информацию о том. что внутренние технологии не входят в Базовый процесс. Копирайтер должен знать специфику Сети и иметь соответствующие навыки. Напомним еще раз. I а также при запуске. (Дополнительную информацию о юзабилити-тестировании сайта см. имеющих объемное содержимое. в описании фазы 2. аудио-. Для сайтов. видео. а также выясняет удачные и неудачные аспекты.Фаза 1: Определение проекта 117 РОЛИ В ПРОЕКТНОЙ ГРУППЕ Копирайтер/Контент-менеджер (Copywriter/ Content Manager) Программист/Специалист по внутренним разработкам Programmer/Backend Engineer Одна из наиболее важных (и часто упускаемых) ролей в эффективном веб-проектировании . в главе 6 «Фаза 4: Производство и контроль качества». как конечные пользователи фактически работают на сайте. включая умение поддержать стиль и необходимое впечатление. Этот специалист может также служить решающим или связующим звеном между внутренним и внешним интерфейсами. часто необходимо иметь несколько копирайтеров и выделенного контент-менеджера. называемый иногда «чистильщиком» (Exterminator). проверка на соответствие броузерам (включая HTML). что не обязательно соответствует количеству сотрудников группы.) Ответственный за контроль качества (QA Lead) Ответственный за контроль качества сайта.

как организованы каталоги файлов и как обозначаются обновления. Каждая компания создает такие площадки по-своему. Будь это «клиентский сайт» или «проектный сайт».org. а кроме того.она перемещается в клиентскую часть демонстрационного сайта и становится доступной клиенту. Каждый член проектной группы должен понимать. он обеспечивает центральный пункт взаимодействия всех членов проектной группы. . Рекомендуется обеспечить клиентскую демонстрационную площадку простой навигацией (рис. Обеспечьте ссылки с начальной страницы к трем главным разделам: дизайн. или.кроме того. удостоверьтесь. по крайней мере. рисунки не нужны. нуждающимися в FTP-доступе. Как только работа готова для показа клиенту . Вступительная встреча .118 Рекомендуемое программное обеспечение Разработанный для мелкого бизнеса пакет SiteSpring. контента и прочих компонентов. позволяет легко и быстро создать профессиональный и эффективный демонстрационный сайт. Оставляйте ее в текстовом формате. контакты). Ссылка на последний должна быть проставлена на каждой странице демонстрационного сайта наряду со ссылкой на начальную демонстрационную страницу и на страницу с контактной информацией. С его помощью можно отслеживать состояние задач. если возможно. где адреса электронной почты являются активными ссылками. Логичность и последовательность в этом отражают профессионализм группы. но не для клиента. Сообщите URL организованной площадки клиенту и всем членам проектной группы. Глава 3 Зарезервируйте под них место на своем собственном сервере.ua/ .очень подходящий момент для этого. Наличие такого сайта очень помогает в проектах с дистанционно разделенными членами группы. Старайтесь поддерживать хронологический порядок записей и везде проставлять даты.18 и 3. это должна быть удобная. он идеален при разработке альфа-сайта HTML. что URL демонстрационной площадки скрыт от случайных посетителей. Рабочий сайт проектной группы служит для работы и взаимодействия ее членов. По завершении очередного этапа работ заархивируйте относящи- http://openlib.варианты визуального дизайна. креативный бриф. 3. Защитите их паролем.19). легко поддерживаемая и обновляемая структура. новый программный продукт Macromedia. HTML и административный раздел (графики работ. протосайт или бета-сайт.

19. дизайн и контакты Puc. Демонстрационная площадка food.com может служить примером для организации клиентского демонстрационного сайта. 3.com еще проще. 3. Это не такой крупный проект с гораздо меньшим составом проектной группы.org.Фаза 1: Определение проекта 119 Puc.18. поэтому для ссылок вполне хватает места на одной странице http://openlib. Представленные клиенту материалы разделены на три главных раздела: разработка. Демонстрационный сайт cjcarmichael.ua/ .

org. а заодно и проверка того. только повысят шансы успешного редизайна. Можно заранее провести такую проверку на существующем сайте. чтобы узнать мнение со стороны. Это очень эффективный метод оценки сайта. Можно также опросить фокусную группу уже на фазе структурирования. ее вкусов и потребностей. Разработка плана юзер-тестинга При формировании плана проекта следует решить. они не будут возвращаться на него. Планирование юзер-тестинга Одна из основных причин редизайна сайта . что клиент знает. каким образом и на каких этапах работ следует провести проверку сайта пользователями. а самое главное — определения недостатков текущего сайта. таблицу ниже). какие аспекты явно нуждаются в переделке. как на него выйти.необходимость сделать его более удобным. и внесите их в соответствующие графики работ. но не годится для получения более конкретных сведений. Основной вывод: проект редизайна окажется неудачным. http://openlib. позволяющих сделать статистически оправданные заключения. Онлайновое опрашивание . Если посетители не могут работать на сайте. Получение в ходе разработки сведений о целевой аудитории. что навигация. Проанализировав предложенные способы. удостоверьтесь. Приведенный ниже обзор различных проверок поможет выбрать подходящую методику. как вы предполагали. и регулярно получает по электронной почте уведомления о его обновлении. Можно воспользоваться онлайновым опросом. решите. В этой книге часто говорится о юзабилити-тестировании. чтобы понять. Что такое онлайновый опрос? Опросы — по электронной почте или в онлайновом режиме — ценный способ получения многочисленных отзывов. которые необходимо устранить при редизайне.120 Глава 3 еся к нему материалы в отдельный раздел. полезные на этапе выяснения. на каком этапе можно воспользоваться ими.один из методов выяснения привычек аудитории. Такой тип сбора информации лучше всего подходит для общих вопросов с ответами типа «да/нет».ua/ . Организовав демонстрационный сайт. если сайт будет неудобным в использовании. Однако существуют и другие надежные способы сбора отзывов и информации (см. информационный и визуальный дизайн работают так. Сайты должны нравиться пользователю. который даст сведения о целевой аудитории. Всегда может возникнуть необходимость просмотреть предыдущую версию.

Можно задать вопрос: «Что вы думаете об организации контента?» или «Как вам нравится навигация? Логична ли она?».это понимание того. что именно удачно или неудачно на сайте.это легкость в использовании или легкость в понимании того. юзабилити-тестирова- http://openlib. Что такое проверка с помощью фокус-групп? Проверка с помощью фокус-групп используется для сбора мнений . навигация . если в фокус-группе есть яркая личность. Однако при рассылке 500 опросов даже 50 ответов дадут достаточно информации для анализа. Но не забывайте: это всего лишь мнения. По этим причинам опросы фокус-групп пользователей не могут заменить юзабилити-тестирование сайта.с репрезентативной выборки вашей аудитории. Мнения беспристрастной группы пользователей помогут понять. 121 Правда о фокус-группах Хотя фокус-группы и хороши для сбора мнений. Преимуществом такого способа проверки является то. как отдельный пользователь будет перемещаться по сайту.ua/ .Фаза 1: Определение проекта Обычно на такие опросы пользователи отзываются не очень активно. находить информацию и взаимодействовать с веб-сайтом. который из них предпочтительнее и почему. что опросы можно производить уже в самом начале работ. Кроме того. правильны ли ваши предположения. производимое сайтом.все это (и многое другое) может быть оценено через опросы фокусгрупп. ее мнение может стать преобладающим для всей группы. организация и представление контента. В отличие от онлайновых опросов или опросов фокус-групп. чтобы заставить что-то работать.org.и последующего обсуждения сайта . получаемые из опросов сведения не конкретизируют. Цель таких опросов — получить общее и объективное мнение. Что такое юзабилити-тестирование? Буквально юзабилити (usability) . или «Нравится ли вам расположение рекламы?» Можно представить несколько набросков начальных вариантов дизайна и спросить. На массовые опросы целевой группы по электронной почте отвечает от 10 до 15% опрашиваемых пользователей. Юзабилити веб-сайта . что нужно сделать. Внешний облик и впечатление.

Юзабилити акцентируется на целях . взаимодействие «один на один». общий и детальный графики работ. http://openlib. чтобы обрисовать руководящие принципы и правила (цели сайта) всем участникам программы. Что фактически делают пользователи. Что они думают в общем. Фактические ре. Считайте ее церемонией по поводу начала работ над проектом редизайна. подготавливая необходимые материалы. список членов проектной группы и план юзер-тестинга) и соМЕТОДЫ СБОРА ИНФОРМАЦИИ И ОТЗЫВОВ ПОЛЬЗОВАТЕЛЕЙ Опросы (онлайновые и по электронной почте) Фокус-группы Юзабилити-тестирование | От 50 до 1000 участников. возьмите план проекта (который включает. Их мнение о том. креативный бриф. Если такие проверки проводятся в ходе работ над проектом. и официально объявить старт. а не то.Глава 3 122 ние проводится «один на один»: один человек (испытатель) наблюдает и изучает действия другого человека (конкретного пользователя).org.прекрасная возможность обсудить проект со всеми ключевыми фигурами как со стороны клиента. по крайней мере. Цель выяснить действия при выполнении задач. а не пошаговых инструкций. данные о технических возможностях аудитории. Статистически значимые отзывы. Подробнее о юзабилити-тестировании см. Начало работ над проектом Проведите вступительную встречу. что они думают о своих возможных действиях. Теперь пора собрать всех лицом к лицу на одном поле (можно в конференц-зале). Вступительная встреча . Ценные отзывы и мнения на начальном этапе. подыскивая команду (ваша группа) и спонсоров (ваш клиент). Вам пришлось побегать. как они могут действовать. следующее: обзор проекта. их результаты помогут своевременно исправить выявленные недостатки и избежать крупных проблем. У вас уже намечены долгосрочные планы. так и из проектной группы. Нет прямого взаимодействия. Это очень ценная информация. Руководство пользователем исказит результаты проверки. I представляющих целевую аудиторию. От 4 до 8 участников. профили пользователя. Юзабилити-тестирование показывает.ua/ . пользователь должен выполнить на сайте ряд конкретных задач. От 8 до 20 участников. Подготовьтесь к этой встрече. как он фактически использует сайт и решает на нем свои задачи. как фактически действуют пользователи. в главе 8.I зультаты основаны на наблюдении. чтобы выяснить.

клиента и группу. Резюме фазы 1 Вступительная встреча знаменует конец первой фазы Базового процесса. укомплектован исполнителями. согласуйте и откорректируйте календарный план проекта с учетом различных индивидуальных обстоятельств. Зачем тратить столько времени? Зачем так подробно опрашивать клиента? Почему нельзя просто довольствоваться той информацией.Фаза 1: Определение проекта 1 23 ставьте программу встречи. Кто поставляет контент? Каким будет график его поставки? • График и сроки работ. бегать. Прочитав эту самую длинную в книге главу. которую предоставит сам клиент? Данные. В программу вступительной встречи включите следующие пункты. • Окончательные цели сайта. представленные в этой главе. что все понимают масштаб проекта. поясните значение своевременности откликов и поставки контента для окончательной даты запуска сайта. оправданы ли такие усилия. http://openlib. приходится много суетиться. ассигнован. При формулировании масштаба проекта редизайна сайта. эксплуатационный опрос и все остальные инструментальные средства. а проектная группа займется структурированием сайта. что на следующем этапе клиент должен определить контент. раздайте обеим сторонам контактную информацию. Вступительная встреча призвана согласовать ожидаемые результаты и уточнить масштаб проекта. коснитесь деталей и уточнений. Представьте проект. согласуйте способы связи. • Контент. предназначены для помощи в сборе необходимой для проекта информации.ua/ . выяснять и планировать. можно засомневаться.org. Один только опрос клиента содержит больше 30 вопросов. Обсудите календарный план проекта. придерживаетесь вы ее или нет. отметьте задачи этапа выяснения. Расширенный технический опросный лист. и ему дан старт. изменив их в соответствии со своим проектом. что предстоит сделать на следующем этапе и кто с кем будет контактировать. • Следующие шаги. одобрен. Раздайте всем креативный бриф и подробно обсудите его. Ваш проект организован. обсудите задачи и обязанности обеих сторон. Ознакомьте всех с границами проекта. Кратко опишите. тем лучше можно организовать всю работу. Чем больше данных имеется в начале работ над проектом. распланирован. как было показано в этой главе. особенно в ближайшей фазе проекта -на стадии организации контента и структурирования сайта. обсудите проблему разбухания проекта. Рекомендуется составлять программу для каждой встречи независимо от того. Напомните. • Ознакомление с планом проекта. удостоверьтесь.

ua/ .org. об их онлайновых интересах и технических возможностях. в терминологии. На каждом этапе каждой последующей фазы процесса . вы займетесь информационным дизайном и организацией контента сайта. Только после формулирования проекта можно начать практическую разработку сайта. Доведение их до сведения всех членов группы и клиента гарантирует согласованность в понимании задач.визуального оформления и тестирования. http://openlib. включая общую направленность и окончательные цели редизайна. Вооруженные четко сформулированными целями и руководящими принципами. в стремлении к одной и той же финишной черте. начинается сразу вслед за вступительной встречей.124 Глава 3 Четко определенный проект устанавливает несколько главных моментов.. вторая фаза Базового процесса.. запуска и сопровождения вся группа должна работать над редизайном сайта для пользователя. Но если при этом не знать аудитории сайта. производства и контроля качества (QA). Об этом сказано уже достаточно. Структурирование сайта. Большое значение также имеют полученные знания о пользователях и их потребностях.

применить дополнительные технологии) • Проанализировать отрасль клиента (см.ua/ . также главу 9) Уточнение • Определить окончательные цели D Составить креативный бриф проекта Планирование • Составить бюджет • Выбрать способ отслеживания времени • Составить графики работ • Сформировать проектную группу • Организовать клиентскую демонстрационную площадку • Организовать рабочую площадку для проектной группы • Составить план юзер-тестинга • Скомпоновать план проекта • Провести вступительную встречу • Получить подписи клиента на всех документах http://openlib.org.125 Фаза 1: Определение проекта Контрольный список задач фазы 1 Выяснение • Раздать/собрать/проанализировать опросный лист клиента • Раздать/собрать/согласовать эксплуатационный опрос • Получить от клиента имеющиеся материалы по маркетинговым исследованиям • Выяснить демографические данные аудитории • Создать профили пользователей • Определить технические возможности аудитории • Определить потребности во внутреннем программировании (если они есть.

com Проектная группа: Phinney Bischoff Design House.COM [ПРЕЖНИЙ] не продвигал свою торговую марку.org.Учебный пример 126 Internap Клиент: Internap Network Services Corporation URL: www.internap. Internap считался довольно хорошей фирменной маркой и узнавался в высших технологических кругах (среди главных технических директоров и главных сетевых администраторов).ua/ . Сиэттл Директор по связям (Interactive Director): Карл Бишоф (Karl Bischoff) Директор стратегии брендинга (Director of Brand Strategy): Дейв Миллер (Dave Miller) Главный дизайнер: Коди Расмуссен (Cody Rasmussen) Технический директор: Нейл Робертсон (Neil Robertson) ПРЕДЫДУЩИЙ INTERNAP. но брендинг фирмы не распространялся в более широкие круги и организации. http://openlib.

СОВРЕМЕННЫЙ INTERNAP. надежных интернет-сервисов. Сайт представляет Internap как «интеллектуальный» интернет-провайдер. стр.) Результат: Более доступен широкой аудитории. добавив девиз и образный рисунок.org.ua/ . 344-345 http://openlib.Учебный пример 127 Internap Network Services Corporation. ведущий провайдер быстрых. См. которые оживляют картину и усиливают впечатление. создал платформу. цветную вклейку. (2000 г. которая не просто маршрутизирует данные. а делает это интеллектуально.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] обновил свой внешний облик и пересмотрел стратегию брендинга.

ua/ . бесшовно.org. 5 Зак. переход между страницами происходит плавно.Фаза 2: Разработка структуры сайта Л Т1 Когда организованное содержимое представлено логическим и понятным пользователю способом. 667 http://openlib.

или содержимое . которые помогают им ориентироваться и не потеряться. Питер Морвилл (Peter Morville). Хороший информационный дизайн снабжает пользователей «дорожными знаками».прямо с нуля или при редизайне .org. Структурирование сайта на бумаге перед началом визуального проек- > > > > Определение тематики контента Аудит существующего контента Структурирование контента Создание плана поставки контента > > > Создание карты сайта Пересмотр текущей организации сайта Установка соглашений об именовании > > > > Создание макета Обеспечение навигации Именование и маркировка Определение основных маршрутов пользователей http://openlib. Структурирование любого сайта . который будет логически понятен пользователю. характеризует хороший информационный дизайн как «создание последовательных и функциональных систем навигации. компоновки страниц и языка заголовков.com). Усовершенствование структуры как с точки зрения сайта (схематизация сайта). а также быстрого и легкого ее поиска. благодаря которым пользователь понимает. Другие медленно «прогуливаются» по сайту.это то.webreview. куда идти. чтобы они были ясно и просто направлены к разыскиваемым данным. Контент. автор статей в онлайновом журнале Web Review (www. оценивая разные компании. так и с точки зрения страницы (структурирование) позволяют информационному дизайнеру представить организованное содержимое таким способом. Независимо от конкретной задачи пользователям необходимо.включает рассмотрение трех точек зрения: контента. сайта и страницы. словно по магазину. Третьи приходят на сайт с конкретной целью: найти нужную информацию или сделать покупку. что дает жизнь сайту.ua/ . Сеть и создана для предоставления информации. графики.Фаза 2: Разработка структуры сайта Некоторые люди быстро «пролистывают» веб-сайты. Она соединяет пользователей с содержимым сайта. что делать и повторно возвращается на такой сайт».

пользователи сразу почувствуют неудобство и даже раздражение. 131 Информационный дизайн как роль В фазе 1: Определение проекта перечислено несколько ролей. а о ролях.ua/ .задача информационного дизайнера .то должен отвечать за информационный дизайн. решающих отдельные структурные задачи под общим руководством одного из них. какие функции и возможности необходимы и как они будут использоваться. Руководитель проекта может быть одновременно и информационным дизайнером или поделить его обязанности с арт-директором. вовлеченных в Базовый процесс. Однако если он плохо продуман. Представьте себя обычным пользователем сайта. если он смог выполнить свою задачу и быстро и легко нашел то. следует выяснить. о котором идет речь. К сожалению. Очень важно заранее спланировать все с учетом пользователя. Редизайн . по крайней мере. ни в коем случае нельзя пренебрегать информационным проектированием. Как бы там ни было. которым наиболее часто пренебрегают при разработке веб-проектов. в любом проекте кто. Что они делают на сайте? Что им нужно и как следует спланировать навигацию и структуру сайта.один из этапов. Не в каждом проекте можно позволить себе роскошь иметь отдельного информационного дизайнера. Мы сейчас говорим не о людях. чтобы удовлетворить их потребности? В фазе 1 Базового процесса была определена аудитория сайта. Только представив себя работающим в перестроенной кухне (или на перепроектированном веб-сайте). есть шанс. можно со знанием дела спроектировать новую структуру. что искал.org. Можно привести такое сравнение: редизайн вебсайта подобен реконструкции кухни .это цельный процесс.прежде чем планировать перестановки. Это не страшно. Некоторые клиенты желают сохранить навигацию и организацию сайта «как есть» и оставляют старый сайт как базовую структуру при редизайне. не будет вынужден страдать от новой кафельной плитки и пеналов вашего сайта). Для разработки структуры огромного сайта. наоборот.информационный дизайнер. Станьте одним из них.очень важный этап правильной адресации к целевой аудитории. Это и есть тот человек. Теперь в начале струк- http://openlib. Более того. Будь это кухня или веб-сайт.Фаза 2: Разработка структуры сайта тирования . Эффективный информационный дизайн незаметен для пользователя. разработка надежной структуры сайта . можно иметь небольшую армию информационных дизайнеров. результат будет очень далек от совершенства. размещать бытовую технику и розетки и выбирать пластик или гранит для отделки. Если не продумать это до начала строительных работ. и удаление одного из его этапов ставит под угрозу конечный результат. что он еще вернется сюда (или. Это неправильно. если человеку там понравилось. что-нибудь может и не вписаться. и одна из них .

На восприятие пользователя очень влияет также бренд и внешнее оформление. как нам удобнее искать музыкальные записи. которые помогут им распознать разные участки сайта и их взаимосвязь друг с другом. но если его внешнее оформление не соответствует бренду компании. а затем кодирование HTML). Это примеры информационного дизайна. где позднее могут быть добавлены дополнительные комнаты (планирование масштабируемости и роста). распределяем по разным шкафам вещи по их типу (например.фактически мы делаем это все время: для облегчения поиска расставляем свои компакт-диски по тематике или по алфавиту. Например. а красный требует остановиться. пользователь может не задержаться на сайте достаточно долго и не узнает. кто будет использовать помещение. что возможно построить. архитектор изображает на кальке . которые говорят ему. Архитектор старается узнать клиента. Визуальный дизайн существенно обогащает информационный дизайн и очень заметен пользователю. их расположение относительно друг друга (карта сайта/макеты). и так далее. как хорошо этот сайт работает! http://openlib. но пользователям нужны визуальные объекты. Одним из помощников в навигации является цвет. Система может прекрасно функционировать.количество. как эти комнаты связаны между собой (навигация/ссылки). чтобы понять. что он будет там делать. в зависимости от того. Все это время архитектор тесно сотрудничает с инженерами. Сайт с е-коммерцией может работать быстро и эффективно. по сезонам (летние/зимние) или по размерам. что зеленый приглашает идти. какие площади потребуется расширить и как скоро и так далее. то. каковы его цели. Полностью поняв масштаб объекта (веб-сайта). рубашки/ брюки). всем известно.org. Можно рассматривать информационного дизайнера как архитектора.ua/ . После одобрения проекта клиентом начинается производство (визуальный дизайн. размеры и формы комнат (страницы/рисунки).Глава 4 132 Ани Фио (Ani Phyo) об информационном дизайне Думать как информационный дизайнер не так уж и необычно .

она основала SmartMonkey Media (www. Ани Фио имеет творческий опыт работы на веб-сайтах и вне их с 1993 г. В число ее клиентов входят Paramount Pictures.Фаза 2: Разработка структуры сайта Клиенты стремятся побыстрее получить свои сайты. Simon & Schuster и Gymboree. обеспечению взаимодействия и юзабилити сайтов.цифровая студия. В 1994 г..com) и получила признание как опытный консультант по дизайну и как веб-дизай- 133 нер. Apple Computer. Выделение времени для составления чертежа сайта перед его формированием сохранит. http://openlib. Warner Bros. цифровом видео. в конечном счете. информационному дизайну. SmartMonkey Media .smartmonkey.org. В свободное время Ани читает лекции и ведет курсы по веб-дизайну. прямых репортажах с места событий и совмещении разных информационных сред. поэтому иногда они не понимают значение информационного дизайна.ua/ . специализирующаяся на веб-дизайне. Недавно она занималась связыванием телевидения и Сети для телекомпаний в Лос-Анджелесе. и время и деньги.

Замечание о терминах: в веб-проектировании термины информационный дизайн. Имея эти данные. соответствующего сайту контента все причудливое оформление и потрясающая графика превратятся в пустой заполнитель. Но даже наличие хорошего содержимого еще не достаточно. которые требуют постоянного притока информации. Без добротного.ua/ . Способ взаимодействия с пользователями. как сайт организован и как он функционирует. архитектура сайта и информационная архитектура часто используются взаимозаменяемо. Любые сайты новостей или сайты с информационно-насыщенными каналами. В данной фазе Базового процесса предстоит организовать перепроектированный сайт. Для ясности прикроем все три термина одним зонтом: информационный дизайн. достойная отдельной технологии и специального администратора. информационного архитектора или архитектора сайта одна и та же: организовать информацию и навигацию удобным для пользователя способом. что для них значит Интернет и как они его используют. Информационная архитектура и архитектура сайта .org.серьезная задача.цель. визуальные дизайнеры придадут ей внешний облик. Определение тематики контента Контент очень значим для любого сайта. Но задача у информационного дизайнера. Но между этими крайними случаями рекомен- http://openlib. которая важна на каждом этапе работ. Разработка контента . каждый из этих терминов описывает способ структурирования и организации контента. Оно также должно быть умело организовано. очевидно. кто они. Однако есть некоторые различия в их подстрочнике. если такое упрощение обижает кого-то информационных архитекторов или архитекторов сайта. объединив запланированное содержимое с информационным дизайном и создав цельную структуру. Информационный дизайн связан прежде всего с организацией информации исходя из точки зрения страницы или компоновки контента. а дизайнеры производства поймут. не могут функционировать без копирайтеров и контентменеджеров. можно учесть интересы пользователей и встать на их точку зрения .134 Глава 4 турирования вернитесь к потенциальной аудитории. Приносим наши извинения. Внимательнее рассмотрите демографические данные и индивидуальные профили пользователей. Только зная это.почти синонимы. описанных в этой книге. зависит от того. На сайтах с меньшим объемом информации задачи составления текстов и управления контентом может выполнять один и тот же человек.

непарные). апельсины с апельсинами. Но в большинстве случаев оказывается. что клиент не подготовлен к задачам сбора и подготовки контента и. а не просто на фруктах. тогда. изображений и так далее). возможно.ua/ . и это предложение излишне. немного смущает .org. у которого и так дел по горло. и в Сети. но не увлекайтесь мелкотемьем.зачем одному человеку так много носков). Аудит существующего контента Аудит контента . в конечном счете. вы почувствуете. как все это можно логически рассортировать. конечно. размеру.Фаза 2: Разработка структуры сайта 135 дуется назначить ответственного за контент. что облегчит разработку. Если в перепроектируемом сайте предполагается обширный контент.сугубо технический и говорит сам за себя. когда сортируются абсолютно все вещи.внутренняя.. создавая. что вытряхнули на пол целый ящик носков. стилю. Внимательно изучив содержимое. Представьте. Просмотр всего содержимого сайта кажется утомительным занятием.. Настоятельно рекомендуется. а каждый из фрагментов на еще более детальные фрагменты. чтобы клиент на своей стороне специально нанял копирайтера для сайта. и возникают идеи. модели и так далее. Вы начинаете разбирать носки.как часть движения куда-то вперед и в обычной жизни. по определению. которые никогда не носите. При структурировании сайта всю информацию разбивают на большие порции (фрагменты). чтобы за контент отвечал кто-то со стороны клиента. руководителям веб-проекта следует облегчить свою задачу и позаботиться о том. Сначала эта неразбериха ошеломпяет (и. Воспринимайте контент как единое целое и начните его фрагментирование. которые могут пригодиться при редизайне. как лучше распределить и организовать его. Тем не менее. у клиента уже есть штат копирайтеров.уж точно не апельсин). I I j | http://openlib.. их можно совместить (если. сбор и организацию контента. но в нем есть и увлекательный момент: это как переезд в новый дом. Если проектная группа . При возможности группируйте мелкие темы в подразделы. Излишний выбор может запутать пользователей. Закончив эту первичную сортировку. Однако это быстро проходит. выделите для этого кого-то из состава группы. иерархическую структуру. а что-то выбрасываете за ненадобностью. считая ценным. который будет связующим звеном между клиентом и проектной группой. возможно. а мандарины можно тоже с апельсинами. которые необходимо разложить по местам. чуждого материала всегда немного возбуждает . выбрасывая ненужные (дырявые. Заодно избавляетесь и от тех. Чтото вы снова оставляете.это. можно начать выделять более конкретные категории (или фрагменты): по цвету. Избавление от большого количества старого. Объединение близких по смыслу тем вполне логично. Разбиение на разделы и организация Термин «формирование фрагментов» (chunking) . в этом случае мандарин . анализ и оценка всех компонентов содержимого прежнего сайта (текстов. Постепенно структура будет все более детализироваться. Яблоки с яблоками. взвалил эту обязанность на одного несчастного сотрудника. сайт не специализируется на цитрусовых. Это близко по смыслу. возможно. Разбейте все темы по смыслу. которые хранились много лет.

org.136 Глава 4 Рис.1. 4.ua/ . иллюстрирующего методику аудита http://openlib. Образец документа Microsoft Word.

а иногда и по производству сайта. Это большой предварительный шаг к разбиению на тематические разделы. благодаря которой сайт будет работать лучше. готовых для поставки. Отложить ревизию контента на потом. она помогает сократить долю не очень существенных материалов и максимально повысить объем информации. Правда. Всегда будут иметь приоритет новые заботы. ему потребуется помощь в этом. В идеале еще до начала проекта клиент должен разобраться с существующим контентом и высказать свои пожелания о его полной переработке и/или частичном использовании старого контента при редизайне. такая лоскутная методика неконструктивна.) В общем случае просмотр содержимого — задача клиента. (Аудит контента во время подготовки поставляемых материалов? Кто же откажется от возможности убить двух зайцев сразу. Вероятно.поторопить клиента. Аудит контента может показаться таким неподъемным делом. а старые добавлять по мере готовности. В таком случае можно работать с новыми компонентами контента. но только клиент может верно проанализировать текущий контент и решить.Фаза 2: Разработка структуры сайта 137 Убедите клиента проанализировать содержимое текущего сайта во избежание его повторного использования. тоже не выйдет: потом этим уже никто не займется. Это задача руководителя проекта . http://openlib. Не забудьте отразить это в бюджете. а просто клиент. это еще не плохой клиент. после запуска. Ниже приведены некоторые аргументы. • Ревизия контента . отказывающихся от ревизии контента. которые помогут убедить клиента в важности подготовки контента: • Существующий контент . Считайте аудит контента его настройкой. Ревизия контента не только удаляет ненужное. то это ее задача. Но если он этого не сделал. • В ходе аудита контента естественным образом происходит его организация. которые не будут соответствовать стилю и духу нового сайта. а в целом это препятствует новым организационным решениям и тормозит работы по визуальному проектированию. что следует изменить или добавить. можно переместить его файл в каталог для материалов. Если какой-то раздел содержимого будет сохранен в новом сайте и не нуждается ни в каком редактировании. Однако если редизайном сайта занимается внутренняя группа. что они рискуют оставить материалы. которая способствует брендингу компании и отвечает ее главным бизнес-целям.org. что клиент будет готов оставить все как есть.это только часть проблемы. В конце работы содержимое уже будет сгруппировано по темам в электронной таблице или в нескольких стопках распечаток. Следует предупредить клиентов.ua/ . от которого нужно добиться немедленных действий. лишь бы работы по проекту продолжались.прекрасная возможность подготовить его для поставки по соглашению в проекте. хотя это и не просто.

попросите составить план содержимого или специально для этого нанять отдельного копирайтера). то необходимо предусмотреть политику конфиденциальности. (Близко следом идут технические трудности. чтобы содержимое было написано полностью. или если проектом занимается внутренняя группа. но слишком туманные. которые видит пользователь. тогда планировать и формировать контент придется ей.org) обеспечивает инструментальные средства. но при группировании и каталогизации контента и обдумывании способов навигации оставьте возможность для логических изменений. http://openlib. как будут обозначены эти разделы — именами или значками. на этом этапе еще не требуется. которые позволяют ввести политику конфиденциальности и ознакомить с ней посетителей. нет. Задержка контента . как его лучше детализировать.ua/ . ибо даже выпадающие меню DHTML иногда начинают работать на разных броузерах после третьего или четвертого пересмотра. представляя его в форме знакомого со школы плана.э т о контент. чтобы можно было всерьез начать структурирование. Никто не ждет от вас предвидения будущего. Глава 4 Структурирование контента К счастью.) Примерно в 99% случаев контент запаздывает. где они будут размещаться. где и как перепроектированный сайт сможет расширять свою структуру. что клиент уже подготовил список с тематиками контента. Вполне возможно. номера кредитных карточек или контактную информацию)? Если так. Расплачивайтесь за это. сделайте ему несколько предложений на выбор (например. Безо всяких идей по поводу контента невозможно далеко продвинуться с проектом. продумайте сейчас. и обсудите. подумайте и рассмотрите. Если у клиента нет никаких идей или есть. что клиент предоставит его вам. Надейтесь.138 Конфиденциальность Будете ли вы запрашивать у пользователей сайта их частные данные (например. невозможно точно запланировать. что произойдет за два или три года. Проанализируйте этот список. Если вы предвидите добавление разделов контента в дальнейшем. Это будет продумано при разработке карты сайта. детализируйте и группируйте контент. Текст политики конфиденциальности .org. поправьте. Если же клиент и не приступал к этой работе. но оно должно быть определено в общих чертах.самая главная причина отставаний в проектах. с высоты птичьего полета. Это просто удача. На этом этапе можно не особо задумываться. Подготовка к расширению Не развивая чрезмерного аппетита. Готовьтесь к этому. TRUSTe {wwwAruste. где нужно. Какие разделы контента можно будет добавить и органично ли они войдут в создаваемые на данном этапе фрагменты? Имея дело с технологиями и отраслями промышленности. Создание плана поставки контента Готовы ли содержимое и структура для продолжения работы? Скорее всего. Примите это. изменяющимися ежемесячно/еженедельно/ежедневно. Постарайтесь представить будущий сайт в самом общем виде. а затем увеличивайте масштаб. а затем установите крайний срок. предлагая им обоснованную возможность доверять свою персональную информацию. пронумерованного римскими цифрами.

Установите точный срок. обновляемый и новый контент. из маркетинговой группы клиента) контролировать.ua/ . однако для проектирования (и информационного и визуального) было бы чем скорее. 139 Сроки выполнения Установите для клиента незыблемые сроки окончательной поставки контента (безотлагательность помогает). • Создать план поставки контента. но можно предложить пару способов ускорить его поставку: • Нанять контент-менеджера. что содержимое должно быть представлено в черновом и в окончательном варианте. Это обеспечивает реалистичную разбивку контента на поставляемые порции. что почти готово и что требуется создать заново. написания и поставки контента (рис. писать и поставлять контент.может быть перечислена в порядке готовности содержимого. План по- http://openlib. так как невозможно собрать все сразу. Или того хуже. Последовательность поставки контента может соответствовать иерархии сайта или . 4. что из содержимого можно пока отложить. Клиенты часто слабо представляют. собирать. Убедите клиента нанять копирайтера или поручить кому-то из сотрудников (например. План поставки контента учитывает каждую страницу или раздел в поэтапном процессе поставки. а не декларирует точную дату поставки сразу всех материалов.org. поможет.Фаза 2: Разработка структуры сайта Нет всеохватывающего решения проблемы задержки контента. и в этом случае крайний срок вообще игнорируется. План поставки контента . Излагайте все подробно. что у них уже готово и что они еще должны создать. но во время этапа создания карты сайта (обсуждаемого далее в этой главе) или даже позже. Старайтесь. созданный руководителем проекта или контент-менеджером это схема сбора. Создайте для клиента полный и выполнимый график поставки контента. включая существующий. Если редизайн разбит на стадии. тем лучше.документ. Помогите клиенту разбить контент на удобоваримые фрагменты. и при введении фактического контента дизайнерам придется наспех растягивать или ужимать его. чтобы это было до начала фактического производства сайта (Фаза 4: Производство и контроль качества QA). План поставки контента следует составить после выбора иерархической структуры контента. что потребуется серьезно изменять навигационную структуру. определите.2). отмечая. Работа с заполнителем вместо контента может привести к неточностям.что более дружественно по отношению к клиенту . чтобы уложиться в отведенное пространство. но одно это все равно не решит проблемы. Уточнение. что уже готово. контент может оказаться настолько отличным от ожидаемого.

чем обычные корпоративные брошюры и документы. как правило.связей должно быть лишь несколько и они должны быть уместными. Готовая к опубликованию в Сети подборка материалов должна быть короткой и требовать как можно меньше прокрутки.. Окончательные означает «не подлежащие изменению без соответствующего из- менения графика работ и/или дополнительного финансирования». иначе по этим ссылкам «счастливые» пользователи быстро покинут страницу. Во-первых. 4. Веб-контент. Контент . сообщения об ошибках и др.org. Файлы могут быть в формате . фактическая поставка материалов. иллюстраций или схем определите четкие сроки поставки для каждого компонента Когда текстовые материалы готовы для Сети? Получение стопки брошюр и печатных копий годовых отчетов нельзя рассматривать как поставку контента. данные обработки TITLE-тегов. а редактировал их. она должна содержать ссылки. и могут не найти пути назад.140 Глава 4 Обновлено 4.08. которые будут вести к другим частям сайта. Напомните об этом клиенту. Это тоже плохо . что это означает. логотипы.2. Вторым критерием оценки готовности текстовых материалов является их тональность. диаграммы. так как некоторые почтовые программы уничтожают форматирование. Материалы. При необходимости поставки клиентом фотографий. http://openlib. Иногда материалы могут быть посланы в теле сообщения электронной почты. Эти материалы должны быть окончательными. в него входят маркетинговые материалы. должны поставляться в электронном виде в текстовом формате с понятными названиями файлов (соответствующими соглашению об именовании). позволяющие считать полученные текстовые материалы готовыми к опубликованию в Сети. но это не рекомендуется.это не только текст.html. чтобы он не просто копировал подходящие материалы.rtf или . Образец плана поставки контента.ua/ . Однако некоторые клиенты при этом включают слишком много ссылок.99 Рис. Следует четко объяснить клиенту. Есть два критерия. менее формален и более дружественен. передаваемые клиентом проектной группе.. а также специфические данные. кроме того. например МЕТА-информация.

Клиенты должны понимать. Сотрудничайте с клиентом и контент-менеджером. TITLE-теги и так далее).Фаза 2: Разработка структуры сайта ставки контента должен включать первичное содержимое (материалы для основных страниц. которые. Третий вопрос: «Кому из вас нравится используемая программа?» — заставляет всех опустить руки. что должно поставляться. которая может стать неуклюжей и менее эффективной при удалении или добавлении блоков содержимого.ua/ . И порадуйтесь. и на бюджет. наиболее готовы для Сети (то есть текстами или другими элементами. обновлять и рассылать его. Будьте требовательны в этом. чтобы было понятно. под угрозой оказывается и навигационная структура. по мнению клиента. особенно если эти разделы являются частью основной навигационной схемы. графику). понимая. если они необходимы) и технический контент (МЕТА-теги. графика. так и удаление страниц . Каждую неделю контент-менеджер (если он есть) должен пересматривать этот план. информационное проектирование и юзабилити-тестирование. иные данные. На всякий случай учтите в производственном графике работ возможность задержки контента. Для ее восстановления потребовалось бы дополнительное визуальное проектирование. На всех конференциях из года в год аудиторию спрашивают. кто использует программу для создания карты сайта. чтобы создать план поставки.org. А при вопросе. что клиент понимает важность своевременной поставки для выдерживания сроков запуска сайта. ALT-теги. Займитесь разделами. когда и кто ответственный. которые уже написаны и существуют в виде текстовых файлов). Из 800 участников лишь 20 или 30 поднимают руку. примерно половина этих рук опускается. Убедитесь. что не могут обеспечить часть контента вовремя. создают ли они для своих проектов карту сайта. приемлемый для всех. что любое изменение масштаба и структуры . когда оно необходимо. Кроме того. есть шанс получить почти все содержимое. Излагайте все четко и ясно. Чаще всего это не так. считая.воздействует на процесс разработки. формы и ключевые слова. что так они еще и сэкономят деньги. как редко составление карты сайта фактически входит в процесс веб-разработки. узнав. вторичное содержимое (сообщения об ошибках. а значит. Перечислите все максимально подробно. Имея такой план. 141 Опасность разбухания проекта Иногда клиенты. С ТОЧКИ ЗРЕНИЯ САЙТА > Создание карты сайта > Пересмотр текущей организации сайта > Установка соглашений об именовании http://openlib. если он прибудет вовремя. решают просто убрать эти разделы. Создание карты сайта Мы были удивлены.как добавление. Назначайте ответственных за каждый компонент содержимого: текстовые материалы. Начните с разбиения контента на основные разделы.

это и не техническая карта и не полнофункциональное представление сайта. подлежащий сдаче. Имейте в виду. Кто создает карту сайта? Поскольку очень немногие проекты могут позволить роскошь иметь отдельного информационного дизайнера. Карта сайта отражает визуальное представление структуры сайта. хотя иногда за нее берется даже клиент. Следите. Пример карты сайта.142 Глава 4 Это существенная деталь. однако. за что платят инженерам. Карта сайта .компонент. от 20 до 30 страниц. эта задача была бы еще более суровой. Будь так. что карта сайта. 4. Но для крупных сайтов с сотнями страниц и множеством функциональных возможностей это становится пугающим мероприятием. организацию. насколько трудоемка эта задача. положение и группировку контента и информации. построенной в формате сверху вниз http://openlib. Она связывает. чтобы карта была всегда доступной и обновленной в соответствии с изменениями структуры сайта независимо от того. эта задача обычно выпадает на долю руководителя проекта. и нам бы следовало тогда платить еще за то.3. Сформированная карта сайта должна ясно показать все HTML-страницы в каждом разделе сайта: каждая страница отображается в виде прямоугольника.org.4 и 4. 4. Это серьезная задача.) Своевременное обнов- Рис. . К чему карта сайта? Почему она так важна? Карта сайта . необходимо получить одобрение и подпись клиента. и показываются самые главные связи.5).3. она определяет и она структурирует. При любом изменении карты сайта следует снова получить одобрение и подпись. 4. о которой идет речь. Создав ее. создать карту сайта вполне можно. Для небольших сайтов.хребет проекта (рис. причем статических HTML. Она отображает весь проект: от общей перспективы до мельчайших деталей.ua/ . (Подсказка: заложите время на модификацию карты сайта в бюджет информационного дизайна.

ua/ . Он был получен по факсу с минимальными пояснениями http://openlib.Фаза 2: Разработка структуры сайта 143 Рис. построенной в формате слева направо с разделением на категории.4. Предоставленный клиентом набросок. 4. Пример карты сайта. 4.4.org. 4. который послужил основой карты сайта.5. показанной на рис. На карте приведены также условные обозначения для различных типов контента Puc.

его бы никто не читал. Если организация информации на текущем сайте нелогична. что у клиента есть карта сайта.6). Сгруппированные разделы представляют собой подобные страницы Глава 4 ление карты сайта важно для ее достоверности. что действительно необходимо.. 4. если на старом сайте произведен юзер-теетинг или получены отзывы пользователей в той или иной форме. Здесь может помочь создание карты старого сайта. то ее создание поможет лучше понять существующий сайт. а другие изображают ее во всю стену конференц-зала. Есть хорошее эмпирическое правило: если все страницы раздела имеют подобное содержимое и не требуют уникального интерфейса. http://openlib.144 Делайте карту простой Карта сайта должна как можно подробнее показывать взаимосвязи между страницами. 4. Степень детализации зависит от сложности сайта. если есть возможность иным способом представить то. то какие? Возможно. С помощью этой карты попробуйте определить..6. Дизайнеры производства HTML и разработчики контента используют карту сайта для оценки прогресса в своей работе. что не будет руководства по навигации на вашем веб-сайте. будет ли она отвечать целям редизайна. то для простоты их можно представить на карте сайта как один элемент (рис. как это исправить.уже достаточная причина. подумайте. Нужно предугадать интуицию пользователей и стратегически применить ее. что требуется. Этот шаг отнимает много времени.org. Например. Рис. да если бы и было. навигации или особых функциональных возможностей. то что следует изменить? Используйте логику. добавится магазин или произойдет слияние компаний. поскольку она будет использоваться как справочный документ. которой можно воспользоваться. поэтому он рекомендуется только как расширение Базового процесса и если позволяют время и ресурсы. Делайте ее понятной. Вполне возможно. Одно это . ссылки (из одного раздела к другим разделам сайта или вообще к другим сайтам) зачастую не показывают на схеме. что не работает и как это касается целей редизайна) будет полезным шагом перед началом серьезной организации перепроектируемого сайта. Некоторые укладывают карту сайта в размер стандартного листа бумаги. Помните. а если нужны изменения. включайте только то. Поддержит ли текущая организация информации эти изменения? Если нет (и скорее всего нет). Если нет. Пересмотр текущей организации сайта Хорошо. Вряд ли стоит отображать каждую из 2000 страниц сайта. В этом случае анализ организации старого сайта (что работает. можно ли оставить текущую структуру контента.ua/ .

При формировании карты учтите ее дальнейшее развитие. добавьте разделы или «контейнеры для контента» и также укажите их на схеме сайта (рис. затем основные страницы. как содержимое базы данных (представленное прямоугольником) по запросу пользователя передается в выделенные для него области (представленные цилиндрами). но. 4.Фаза 2: Разработка структуры сайта 145 Определение структуры сайта Обычно сайты проектируют и структурируют в иерархическом стиле (рис. сложных сайтов). Если предусматривается динамическое содержимое (обычно для крупных. что существуют различные подходы к созданию карты сайта и среди них нет лучшего. Для начала можно взять за основу иерархическую схему контента и изобразить ее на бумаге.8).7). Контейнеры для вывода содержимого встроены в HTML-страницы http://openlib. 4.7. Должны ли быть связаны какие-то из основных страниц? Должен ли быть переход с вторичных страниц на страницы основного уровня? Не будет ли логичнее сгруппировать страницы по-другому? Старайтесь рассуждать с позиции пользователей. Рис. Одним кажется более осмысленным размещение карты в формате сверху вниз. Очень просто. Скорее всего.слева направо. Данный стиль карты сайта иллюстрирует. она дает общее представление. Начальную страницу поместите вверху. другим . Имейте в виду. Карта сайта в простом иерархическом стиле Рис. а за ними .вторичные. тем не менее.org.8.ua/ . начните обдумывать организационные аспекты. Имея визуальное представление. структура перепроектированного сайта не будет точно соответствовать первоначально созданной схеме. 4. 4.

Для него не существует никаких «правильных способов».org. 4. Обсудите карту сайта с техническими специалистами. на которой пользователь может видеть точку взаимодействия с внутренним интерфейсом (в данном случае точку входа в систему) Установка соглашений об именовании Установка стандартов для именования файлов на фазе структурирования поможет организовать основные разделы сайта. Рис. http://openlib. каждая группа и каждый отдельный проектировщик имеют собственные предпочтения.9. Фрагмент карты сайта. но очень важный шаг при создании карты сайта. на схеме следует только указать точку. обсудить с дизайнерами производства. Какие бы формы ни использовались для этого. что схема отражает только потоки информации. где происходит регистрация пользователей. что принятие соглашений об именовании сделает работу над проектом более организованной.момент. Он не требует никаких официальных вердиктов. поиск. Например. а с функциональной точки зрения (то есть сценарии отказов на вход в систему) зависит от опыта информационного дизайнера и его взаимодействия с технической группой. они должны быть согласованы с информационным дизайнером и техническим специалистом.9). показывающий страницу. Называя этот шаг важным. Не забывайте. транзакции е-коммерции. принять решение и довести его до общего сведения. 4. а не техническую реализацию и детали функционирования. Детализация не с технической. Чтобы показать основные функциональные возможности и те компоненты внутренней структуры. регистрация и так далее). «Простой» .значит прямой и понятный. Здесь не требуется раскрывать подробности внутренней проверки. если речь идет о входе в систему. а это в свою очередь облегчит работу всех членов проектной группы и клиента на весь период Базового процесса. где соприкасаются и внешние и внутренние технологии. Информационный дизайнер должен выяснить их. с которыми взаимодействует пользователь (например. вход в систему. Их одобрение будет свидетельствовать о правильном понимании вами структуры сайта под углом зрения пользователей. авторы стремились подчеркнуть то. связанные с этой операцией (рис. Принятие соглашений об именовании — простой. можно достаточно просто отобразить эти взаимодействия.Глава 4 146 Опять этот ужасный внутренний интерфейс Создание карты сайта .ua/ .

пока остается кропотливым и трудоемким процессом. произвольные имена. хотят ли они придерживаться существующего соглашения об именовании или принять новое.com/office/visio).10. Следует обдумать два типа соглашений: организационно-числовые наименования и HTML-наименования.для создания карты сайта. Рис.не большая хитрость. которые придут ему в голову. Создание схем. 4. к сожалению.microsoft. на текущем сайте уже действует соглашение об именах. Эта программа не решает всех проблем. которая облегчит понимание другого соглашения об именах.com) (рис. Обсудите с клиентом.и еще меньший выбор хороших программ . которая отнимает много времени и очень трудоемка из-за множества деталей. Вероятнее всего. то следует привести на ней информацию.inspiration.10) и Vislo (www. Можно порекомен- довать две хорошие программы для создания карты сайта: Inspiration (www. а если она содержит только одно. Многие все еще используют векторные программы. Создание или переработка карты сайта . помогающим всем участникам проекта легко находить необходимую справочную информацию. подобные FreeHand или Illustrator. Пример создания карты сайта с использованием программы Inspiration.org. 4. это задача. и возникнет полная неразбериха.Фаза 2: Разработка структуры сайта 147 Программы для создания карты сайта Удивительно (и обидно). http://openlib. Карта сайта должна содержать оба типа имен. которые требуется отобразить. Без установленных стандартов каждый сотрудник будет давать файлам случайные. но она облегчает работу по созданию и модифицированию карты сайта На всем протяжении работ от организации контента до производства HTML эти соглашения будут служить ключом. удачное или не очень.ua/ . что существует очень небогатый выбор программ .

2. http://openlib. Выберите любое из этих расширений и придерживайтесь его. Это поможет легко идентифицировать местонахождение данного фрагмента содержимого. Конкретное изделие? Используйте название изделия. ред. Недостаток такого способа наименований заключается в том. Дайте начальной странице номер 0. укажите в названии дату.ua/ . Поиск файла не должен требовать привлечения ищеек. Числовую организационную иерархию можно применять к контенту (текстовым файлам и изображениям). Наконец.Примеч. 1. 2 Организационные наименования В организационном способе присвоения имен страницам и разделам карты сайта .3 и так далее. поскольку этот стиль обозначений не интуитивен. 2. а нумерация страниц может быть изменена со временем. что под рукой необходимо иметь копию схемы карты для справки. что Сеть больше не ограничена правилом «восемь-точка-три». схему ниже. . над сайтом будете работать не вы одни. Первичные разделы под начальной страницей обозначьте как 1. не забывайте. Имеются в виду короткие имена файлов в MS DOS. Если это правило вам не знакомо2.htm работают. науч.0 и так далее. Скорее всего.0 (это базовая страница).html и . не переживайте. будьте логичны. помните.Глава 4 148 Советы относительно HTML-наименований Во-первых.1. Для сложных сайтов с динамическим содержимым это становится особенно важным. Установите простые и понятные соглашения о названиях. 1. Во-вторых.0.0. состоящие из восьми символов имени и трех символов расшире- ния. Подразделы в каждом первичном разделе обозначьте как 1. что и . См. Если содержимое определяется датой.просто используют числовые или алфавитно-цифровые стандарты. 3.org. Все должно быть логично и ясно. это одно и то же.

html co_info. они имеют отношение только к информации основных страниц.Фаза 2: Разработка структуры сайта 149 Наименования HTML Способов наименования HTML.html about_company. показывая сырую навигацию. что сайт уже неплохо организован и структурирован. другие для систематизации используют верхний и нижний регистры. Для примера мы попросили трех дизайнеров производства от трех различных групп придумать названия для биографической страницы вымышленной компании. Создание макета Сама по себе работа с макетами (wireframes) для сайта сродни копанию в бумагах. либо заменены новыми. Макеты отображают некоторую иерархию информации. ключевые заголовки и любые другие элементы. которые должны находиться на странице. столько же. Называемые также каркасами. С ТОЧКИ ЗРЕНИЯ СТРАНИЦЫ > > > > Создание макета Обеспечение навигации Именование и маркировка Определение основных маршрутов пользователей http://openlib. они не отражают детали эстетического оформления (форму кнопок или цвета).ua/ .html Любое из них приемлемо ~ просто нужна последовательность и согласованность. наверное. графики. Если стандартные названия для статических страниц HTML установлены. При редизайне существующие на сайте соглашения об именовании и терминологии должны быть проанализированы. схемами или планами страниц. есть шанс. положение текстов. третьи игнорируют все стандарты и аббревиатуры и придумывают что-то свое.org. Выберите стандарт и придерживайтесь его. Они предложили следующее: aboutthecompany. сколько дизайнеров HTML. Одни любят аббревиатуры и объединение слов. но не диктуют точно форму и место ее представления. уточнены и либо приняты для использования. Избегайте произвольных названий файлов.

4. поэтому для них макеты зачастую бывают не нужны. ссылки. обеспечит более гладкое протекание работ по дизайну и производству сайта. 800x600. потраченное на этой стадии. Для облегчения задачи создания макетов воспользуйтесь следующим контрольным списком: • Изображения/чертежи/иллюстрации • Контент (общее направление содержимого или фактический текст. Страницы третьего и четвертого уровней обычно текстовые. расположение и компоновку). навигацию.контент.150 Глава 4 Макеты помогают говорить. показывая только компоновку содержимого и навигацию по нескольким основным страницам сайта.ua/ . Сложные макеты показывают тексты. они не включают визуальный дизайн.13). однако время. Хотя создание макетов порой может казаться утомительным (особенно после их второго или третьего пересмотра). изображений и их расположение). Содержимое макета Макеты отражают только информацию. Задача информационного дизайнера . которые предназначены для этой страницы. если он готов) • Заголовок или глобальная навигация (навигационная панель или общие элементы. На этом этапе очень помогло бы приблизительное знание контента (то есть знание размеров текста. а также для всех страниц с уникальными функциональными возможностями. навигацию и графическое содержимое в более детальной форме (рис. JavaScript и так далее). Макеты должны включать все основные компоненты . фактически очертите область и укажите размеры в пикселах) http://openlib. Макет может быть простым (рис.разработать все это в подробностях. Они помогают выразить идеи и являются основой для визуального дизайна и производства HTML. Настоятельно рекомендуется создать макеты для всех основных. некоторые функциональные возможности. чем просто свое содержимое. 4. вторичных и шаблонизированных страниц (имеющих схожее содержимое. Они могут показывать также производственные спецификации и основные функциональные возможности (DHTML. Макеты отражают больше.12). которые появляются на каждой странице) • Функциональные возможности (описание основных функциональных возможностей страницы) • Первичные ссылки (предполагаемая навигация) • Вторичные ссылки • Мультимедиа (если есть) • Целевой размер окна (например.org.11 и 4. функциональные элементы и сообщения.

ua/ .12. На этом простом макете представлен типичный формат основного содержимого и навигации. Этот простой макет . навигации и некоторых основных функциональных возможностей над и под сгибом http://openlib.Фаза 2: Разработка структуры сайта 151 Рис.фактически шаблон. содержащий особые метки для целевого размера экрана. 4.11. а также указатели для логотипа. 4. содержимого.org. Приблизительно размеченные области дают общее представление о типе и размещении содержимого Рис.

Добавьте к каждой странице детали. заполнители содержимого и тексты. написанного в 45 г. Если имеются важные вторичные страницы. автор. но обычно в макетах вместо текста используется заполнитель. до н. выявляя особые функциональные потребности (например. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником в XVI веке. сколько еще макетов страниц позволит сделать бюджет и ресурсы группы. ред. 50 или 200 страниц. выпадающее меню или динамически генерируемую навигацию (rollover navigation)) и определяя ссылки. в качестве которого почему-то3 почти всегда берут латинский текст Lorem Ipsum). consectetuer adipiscing elit. http://openlib. номер версии.13. Рекомендуется сделать макет. графику и другую информацию. маркировка. . когда содержимое и навигация уже хорошо отработаны В качестве заполнителя западными дизайнерами используется кусок латинского текста из философского трактата Цицерона «О пределах добра и зла». дата.Примеч. науч. 4.ua/ . Включены названия.. начальной страницы и всех основных страниц. Независимо от типа заполнитель должен правильно показывать размер реального текста на странице. в зависимости от бюджета и способностей создателя макетов. которая повторяется во многих страницах. Набор макетов может состоять из 5. Если имеется окончательный текст. э. которым служат закрашенные серым прямоугольники. решите. Он начинается со слов: «Lorem ipsum dolor sit amet. особенно если они построены по схеме.». а также требований проекта. Кроме того.. название страницы.org.152 Глава 4 • Данные для заголовка и подвала (название проекта. обязательно используйте его. простые строки или грикинг (бессмысленный текст. Информация представлена очень специфически. по крайней мере. Puc. авторское право) Начните с начала: с начальной страницы. Обычно так делают. рекомендуется создать и их макет.

иконок и навигационных элементов много говорит о самой компании и ее отношении к сайту и аудитории.org. Определите. где они находятся. Именование и маркировка 153 Поддерживайте ощущение текущего местонахождения Не вызывайте у пользователей головокружения. Есть много различных подходов к навигации. Важна тональность. каким образом сайт собирается общаться с аудиторией.) Сыграйте роль пользователя и опробуйте навигацию. 4. При переходе от страницы к странице пользователи должны чувствовать себя комфортно. можно ли улучшить навигацию. поисковая. и это ошибки навигации. Какой подход требуется клиенту? Дружественный и доступный или сугубо профессиональный и. откуда они начали выполнять задачу? Возвращает ли пользователя кнопка «Назад» (Back) к предыдущему экрану? (Иногда это становится проблемой при использовании маркеров для управления сеансом. хотя следует отметить. чтобы направить пользователей к желательному действию или через него. Маркировка категорий в навигации по сайту свидетельствует о том.14-4. помогают найти здесь нужный путь. Испробуйте разные методы организации контента. Не чувствуете ли себя заблудившимися в перепроектированном сайте? Четкая система именований не только ясно определяет контент сайта. Именования на всем сайте должны быть последовательными и согласованными. Манера именования или обозначения кнопок.18)? http://openlib. Вспомните цели сайта. что большинство сайтов использует комбинацию из двух и более моделей (рис. последовательная навигация и навигация с вкладками. Существуют четыре основные навигационные модели: направленная.ua/ . она также определяет атмосферу вокруг компании. 4. что пользователи не могут попасть в требуемое место.Фаза 2: Разработка структуры сайта Обеспечение навигации Руководителям проекта следует знать о тенденции полагаться на навигацию старого сайта. Очень часто редизайн предпринимается потому.17). а не дорожные знаки. насколько возможно. Слова и обозначения. солидный и надежный (рис. понимая. все они служат тому. Могут ли они вернуться назад на начальную страницу? На то место.

Эта навигационная модель обычно используется. обувь и подарки Puc. Направленная навигация вынуждает сделать выбор сразу на входе.14. Здесь показан сайт www. на поисковых или информационных сайтах.154 Глава 4 Навигационные модели Puc. для женщин. В случае www. 4.com http://openlib. чтобы разделить аудиторию по соответствующим ее интересам разделам содержимого сайта.ua/ .com это разделы для мужчин.15. 4. в которых лучшим способом перемещения к желаемому контенту являются ключевые слова. Поисковая навигация используется. прежде всего.org.bananarepublic.google.

Навигация с вкладками предлагает пользователю информацию.com) http://openlib. предопределенному пути. 4. знакомые каждому. 4.cooking. как показано здесь на примере сайта www. эта навигационная модель позволяет легко разобраться в строго классифицированной информации.16.adammoore.17. но ее можно увидеть в местах с последовательностью папок или при просмотре слайдов с помощью кнопок Следующий/ Предыдущий (Next /Previous) или Вперед/Назад (Forward /Back). а не заставляет искать ее.ua/ . Последовательная навигация ведет пользователя по однозначному. Напоминающая бумажные папки с разделителями. В основной навигации эта модель встречается редко.com Рис.org.Фаза 2: Разработка структуры сайта 155 Навигационные модели Рм-с. Здесь показан сайт с фотографиями Адама Мура (Adam Moore) (www.

4.ua/ .com и www.etrade.com. (Упомянутые особенности на рисунке обведены) http://openlib.org. Первый встречает менее вольными. деловитыми входом в систему («login» ) и перечнем услуг («Customer Services»). в то время как My Discount Broker дружелюбно приглашает в банк («ту bank»).18.mydiscountbroker. предлагает поиск в базе данных («My DB» ) и так далее. Взгляните на сайты www.156 Глава 4 Рис.

http://openlib. Но что касается маршрутов пользователей.org. Нет ли возможности объединить некоторые шаги. Назовите это «бумажными прототипами» или «интерактивными макетами» . как использовать бумажные прототипы для тестирования сайта. пусть важных для маркетингового отдела (например. com. чтобы пользователи выполняли определенную задачу.ua/ . как он назван в книге) см. В Интернете можно найти много сведений о том. компоновку страниц (созданием их макетов) и определив размещение содержимого.прекрасный способ анализа и выбора решения. это приносит определенную пользу. Проверка на бумажных прототипах Одним из самых простых и наименее формальных методов быстрого выяснения достоверного мнения пользователей является проверка на бумажных прототипах. или макеты страниц.infode- sign. Интерактивное моделирование при определении пользовательских маршрутов . Излишнее количество заполняемых форм и полей. Хотя подготовка моделей довольно трудоемка и занимает немало времени. в описании фазы 3: Визуальное оформление и тестирование. Желая. вызывает у пользователей раздражение и может заставить их отказаться от задуманного. можно перейти к следующему шагу и продумать маршруты пользователей на сайте. не вынуждайте их проходить через дюжину и более страниц. чтобы регистрация требовала только три или четыре экрана? Это было бы менее утомительно и повысило бы количество пользователей. но если каждая страница не будет логически перетекать в следующую. обеспечьте их на стадии создания макетов. Ведущий демонстрирует участни- кам тестирования ряд типовых задач. начерченные на бумаге вручную. то сайт не будет легким в использовании. последовательно вынимая из пачки листы с соответствующими «экранами». завершающих эту задачу.и разработчики смогут сразу отреагировать на выявленные недостатки. например регистрацию или совершение покупок.это одно и то же: проверка основных перемещений («щелчков мышью») по сайту на бумаге вместо HTML. подготовленные на данной фазе процесса или быстро созданные с использованием программы WYSIWYG HTML. . Изменения в бумажных прототипах можно сделать быстро . доход и семейное положение). html.хороший способ проверить взаимодействие страниц между собой. Более подробное описание «HTML для прощелкивания» (HTML click-thru) (или протосайта.даже во время испытания. и все «за и против» этого способа проверки. Можно сделать страницы информационно насыщенными. Инструментальные средства для моделирования на бумаге можно бесплатно загрузить на www. не внося их в практические разработки. Бумажные прототипы должны как можно ближе имитировать весь сайт. Завершив формирование облика сайта (созданием карты сайта). возраст.Фаза 2: Разработка структуры сайта 157 Определение основных маршрутов пользователей Выбирайте пути наименьшего сопротивления Создание интерактивных макетов . Это могут быть схемы сайта. Модели позволяют выявить и устранить некоторые недостатки в самом начале.au/usability/paperprototypinggraphics.

Существует ряд типовых задач: • Заказ доставки цветов ко Дню Матери. которые требуют последовательно связанных страниц. что более важно.ua/ . Во-первых. прочитать биографические данные президента компании и так далее). входа в систему с паро- http://openlib. то нет необходимости выяснять маршруты пользователей. это позволит выявить недостающие экраны. Маршруты следует моделировать по двум причинам. которые были определены клиентом при заполнении опросного листа). чтобы добраться из пункта А в пункт В. это даст возможность проследить. Определите главные пути перемещения или действия пользователей на сайте (обычно это основные действия. заполнения форм. Такие ситуации почти всегда включают задачи. выборки данных. которые типичный пользователь выполнял бы при посещении сайта. необходимые для того. следует внимательно изучить профили пользователей и создать пользовательские сценарии: конкретные ситуации. которые в этом нуждаются: для сайтов. Это определенно является частью Базового процесса. Какого типа эти задачи? Поскольку цель моделирования состоит в проверке конкретных задач. найти адрес магазина. которые не требуют особых технических возможностей (например. если запланировано юзабилити-тестирование. поиск и так далее. оставить сообщение для компании. в которых реальные пользователи могли бы оказаться на сайте.158 Глава 4 Если от пользователя не требуется фактического выполнения особых задач (например. но только для сайтов. Эти маршруты (обычно последовательные) ведут посетителя через ряд определенных шагов (обычно включающих заполнение форм) к их конечной цели.org. Есть два основных типа пользовательских маршрутов: функциональные и нефункциональные. такое моделирование позволяет провести его уже на этой ранней стадии. определяемые технической группой (для покупательских корзин. • Заполнение и подача онлайновой заявки на получение ссуды. Моделирование от начала задачи до ее завершения предоставляет еще одну возможность взглянуть на сайт с позиции пользователя. Эти шаги могут быть простыми («Оставьте ваши комментарии») или более сложными (предварительная онлайновая заявка на ссуду для покупки автомобиля). Во-вторых. как один экран связан со следующим экраном. входа в систему или совершения покупок). Нефункциональные служат для типичных задач. Функциональные пути затрагивают спецификации. заказ. Наметьте экраны. Это просто потоки последовательных страниц с нужной информацией. Кроме того. требующие несколько последовательных шагов (и страниц): регистрация. вместо того чтобы все время работать только с одной страницей. • Поиск и заказ запасных батареек для сотового телефона. имеющих задачи. кошечек или собачек. • Покупка домика для птичек. которые были упущены при создании макетов.

которая упоминалась в начале книги. Он может быть продуман на данной фазе. Заранее установлена только их функциональность. необязательно формировать абсолютно все страницы. наличие кнопок или текстовых гиперссылок. уточнение пользовательских задач поможет клиенту лучше понять последовательность действий пользователей. персонализируя пользователя и придавая его образу «реальность». Если они слишком сложны.и оффлайне и какие задачи типичны для ваших пользователей? Войдите в роль пользователя. бюджеты очень ограничены. Если определением пользовательских маршрутов придется пожертвовать. хотя внешний дизайн (наименования. что даже минимальное рассмотрение их на этой стадии полезно как для проектирования. Пользовательский сценарий расширяет профилирование пользователя. возьмите подготовленные макеты и «прощелкайте» страницу за страницей. что для любого сайта.это ситуации. то это является задачей отдельной технологии. не откажется ли пользователь http://openlib. Здесь нет призыва к излишней работе . что время и ресурсы диктуют свое. каждая из которых поведет пользователя различными путями. переходя к соответствующему макету. Имейте также в виду. Кто вы и зачем пришли на этот сайт? Создание различных сценариев для сайта охватит несколько возможных задач. а только основные. так и для дизайна.Фаза 2: Разработка структуры сайта 159 лем. достаточно только страниц на данном маршруте. Кроме того. Если требуются сложные функциональные возможности и нужно контактировать с техническими специалистами для установления работающих пользовательских маршрутов и спецификации функциональности. маркировка. заполняемые формы. Какие ситуации в он. Пользовательские сценарии Сценарии . Понятно. в ходе создания макетов и уточнения пользовательских маршрутов. сложного или простого. если предполагается несколько типов целевых групп). И не требуется исследовать все возможные пути. Исследуйте эти типовые маршруты. Они передаются разработчикам внешнего интерфейса с уже готовой основной функциональностью. что данная стадия Базового процесса . По крайней мере. Предугадывайте побуждения и конкретные ситуации на сайте для целевого пользователя (или пользователей. помещая этот «реальный» образ в реальную ситуацию на сайте (рис.точка пересечения этих двух технологий.делайте необходимое. Жизнь слишком коротка.ua/ . учтите.19).org. которая является конечной точкой пользовательского маршрута. Просто имейте в виду. использование графики либо HTML для страниц) еще не завершен. даже если имеется несколько способов достижения конкретной страницы. 4. Профилирование пользователей (на предыдущей фазе) дает демографические сведения. сложных поисковых механизмов и так далее).

чтобы перейти в секцию «Подстилки» (Cuddler Beds). и ситуацию. Пэйдж Мак-Коржик Она заходит на www. от которой остался только кусочек холста и пуха. пытающихся делать реальные вещи.4. Будучи заботливой хозяйкой.COM. На рис. чтобы верно оценить хороший маршрут и не заставить пользователя бессмысленно блуждать по сайту.19. довольно сильно изодрала и растащила свою подушку. Просмотрев имеющиеся пять или шесть вариантов. 4.petco. Если пользователи не найдут то.20з показан маршрут пользователя для этого сценария.характерными для реальных людей. 4. Там она выбирает раздел для собак. 3. Здесь она узнает. завершая тем самым сделку. она нажимает кнопку «Сделать онлайновый заказ» (Place Order Online). Убедившись. там есть прекрасный выбор кожаных поводков и намордников.com Пэйдж балует свою собаку. ее собака.ua/ . откуда ей ежемесячно поставляют питание для собаки. Будучи постоянным пользователем сайта. что чехол нелиняющий и не страдает от машинной стирки и что подстилка имеет мягкую прокладку из искусственного меха. что Руги это должно понравиться (к тому же. Профиль пользователя Пэйдж Мак-Кормик описан в фазе 1 (рис. В любых обстоятельствах важно понимать позицию пользователя.20а .160 Глава 4 от данной задачи? Типовые ситуации не должны быть сложными. что все правильно. В разделе товаров для собак она использует раскрывающееся древовидное меню. и нажимает кнопку «Добавить в корзину» (Add to Cart). Ее просят войти в систему или зарегистрироваться как новый пользователь. Пэйдж считает. но должны быть достоверными .WWW. Пэйдж Мак-Кормик (Paige McCormick): Пользовательский сценарий для www. Сейчас ее любимый магазин . сопровождаемую сохраненными там данными ее кредитной карточки. его задачу. щелкая мыш(Paige McCormick) кой по значку с изображением веселой собачки под заголовком «Начать покупки» (Go Shopping). она нажимает кнопку «Параметры товара» (Product Options) у выбранной ею синей подстилки с названием Bed Buddies Lounger.PETC0. к тому же. она хорошо знает онлайновые зоомагазины. Рис. Этот образец сценария подробно описывает типичную пользовательскую задачу. и покинут сайт.org.1) http://openlib. Так как Руги.petco. то клиент не получит выгоды. После этого она просматривает информацию о доставке и способе оплаты. что они ищут.com. она вводит свой адрес электронной почты и пароль. ее приятно удивил ассортимент подстилок). сегодня Пэйдж решила купить для нее новую подстилку.

ua/ . Маршрут Пэйдж на сайте www.206 http://openlib. 4. 4. описанный в рис.20а.petco.com.org.19 Puc.Фаза 2: Разработка структуры сайта 161 Рис. 4.

162 Глава 4 Рис.org.20г http://openlib.ua/ . 4. 4.20в Рис.

200 Puc.ua/ .20e http://openlib. 4. 4.org.Фаза 2: Разработка структуры сайта 163 Рис.

ua/ . Фаза 2 отвечает на конкретные во- http://openlib.164 Глава 4 Puc.20Ж Рис. 4.20з Резюме фазы 2 Структурирование сайта для перепроектирования .тот этап Базового процесса. 4.org. на котором выясняются проблемы (такие как несоответствие старой структуры новому контенту) и определяются способы их решения (как будет происходить разбиение информации по разделам).

ua/ . Именно поэтому структурирование сайта охватывает все вопросы контента и информационной стратегии: какую информацию где и как разместить. по существу.) Как страницы взаимосвязаны друг с другом? (Ответ .) Информационный дизайн . не произведя предварительно информационного проектирования. Это неправильная последовательность. подробное планирование задач организации контента. что эта глава изменит такое отношение. пропустить этот шаг.) Что войдет в каждую страницу? (Ответ .Фаза 2: Разработка структуры сайта 165 просы: как будет организована вся структура? (Ответом служит карта сайта.интерактивные модели.org.макеты страниц. http://openlib. пытаясь при редизайне сайта просто приспособить информацию. Уделите время для структурирования сайта. Почему? Исправления на графическом уровне всегда занимают больше времени. Планирование и стратегия всегда заслуживают внимания. дизайн и контент старого сайта и. хотя все больше групп признают необходимость этого. Независимо от того. создание карты сайта и макетов страниц всегда служит хорошим путеводителем для дальнейших этапов визуального дизайна и производства сайта. Часто эта роль выпадает руководителю проекта или арт-директору. Наличие в проектной группе отдельного информационного проектировщика сейчас еще редкость. Веб-проекты часто начинают с разработки визуального графического пользовательского интерфейса.наиболее трудоемких и отнимающих время задач редизайна. особенно для создания карты сайта и макетов . почти всегда приводящая к неэффективному использованию ресурсов дизайна. Многие совершают типичную ошибку. Без такой стратегии визуальное проектирование становится просто авантюрой. Хотелось бы надеяться. Однако это время не будет потрачено даром. кто ее исполняет. проектная группа может уверенно приступать к визуальному дизайну. потому что хорошо определив структуру сайта и его контент. чем те же изменения на уровне макетов.критическая стадия любого веб-проекта. чтобы пользователи могли получить и получали бы доступ к ней.

ua/ . Кристина Стейн (Christina Stein) Проектная фирма (Второй редизайн): внутрен- няя группа К2 Продюсер в К2: Али Вайз (АН Wise) Арт-директор: Дэн Колавито (Dan Colavito) Технические разработки: Стив Карр (Steve Кагг) и Джереми Фишер (Jeremy Fisher) (Nochturner Communications) ПРЕДЫДУЩИЙ K2SKATES. Тереза Форрестер (Teresa Forrester).166 Учебный пример К2 Skates Клиент: К2 Skates URL: www.k2skates.org. Сиэттл Креативный директор: Джон Бургесс (John Burgess) Арт-директор: Джулия Посс (Julie Poth) Дизайнеры: Мэт Куанн (Matt Quann).COM [ПРЕЖНИЙ] не отражал технические преимущества выпускаемых коньков.com Проектная фирма (Первый редизайн): Werkhaus Design. http://openlib.

улучшить навигацию и обеспечить легкий для обновления журнальный стиль.Учебный пример 167 К2. он не вполне отвечал потребностям пользователей. 346-347 http://openlib.) K2SKATES. стр. Хотя сайт был хорош в маркетинговом плане и получил несколько наград за дизайн. что анимация лучше передает динамический характер изделий.) Результат: Счастливые посетители. чтобы оптимизировать время загрузки.org. оказывающий поддержку культуры и спорта сообщества роллеров.COM [ВТОРОЙ РЕДИЗАЙН] разработан внутренней проектной группой. ведущий изготовитель роликовых коньков и аксессуаров. См. который включает много интересной графики и других материалов. Было уменьшено количество Flash-элементов. связанных с образом жизни людей. (2001 г. Эта философия отражена в атмосфере и содержании бренда компании. СОВРЕМЕННЫЙ Slipping into the lightest skate on the market will have a similar effect on the weight of the world K2SKATES. (2000 г.COM [ПЕРВЫЙ РЕДИЗАЙН] был основан полностью на Flash-технологии в предположении. цветную вклейку.ua/ .

http://openlib. требующий сочетания практического и творческого мышления.Фаза 3: Визуальное оформление и тестирование С" w Проектирование для пользователя заставляет поднять креативный потенциал дизайнеров на новый уровень решения задач.ua/ .org.

требует высокого уровня взаимодействия и ориентированности на пользователя. чему прежде не уделяли особого внимания. лучшее крепление для сноуборда. по которым готовили печатную продукцию.Фаза 3: Визуальное оформление и тестирование Бесспорно. Это делает веб-дизайн во многом подобным промышленному дизайну. более удобный штопор или новейший самопросеивающий кошачий туалет). а также тщательного планирования рабочего процесса. однако их глубинный характер заключается во взаимосвязанности и многоелойности информации. чем когда-либо. Потом возникла Сеть. разрабатывали и реализовывали свои идеи. и оно используется. прикладной науке о дизайне вещей. отображений. как при печати. вручную создавая макеты. на первый взгляд. Проектирование для Сети означает создание двумерных.ua/ . Еще недавно процесс дизайна выглядел так: о дин-два человека продумывали. которые реально используются (например.org. Ввиду того что веб-дизайн во многом базируется на техни- http://openlib. главное в сегодняшней Сети — доступность пользователю. Теперь дизайном занимаются организованные группы.тоже изделие. Веб-сайт . и их работа больше.

которые потребуются для их реализации. модернизация аппаратуры и программного обеспечения стоит денег. Они окупятся втройне. Постарайтесь обзавестись быстрой системой и свежими версиями программ. не привязывая их к существующим технологиям. но девяносто процентов пользователей просматривают сайты с помощью PC. и с юридической точки зрения это более верный путь). Обеспечьте хорошие рабочие станции.ua/ . что подавляющее большинство людей. Если результаты важны. и насущной потребностью проявить блестящий творческий потенциал. Сейчас как когда бы то ни было необходимо балансировать между ограничениями. В этой фазе процесс разбивается на два параллельных направления: пока визуальные дизайнеры создают креативный образ сайта и прорабатывают идеи его интерфейса. Установите на мониторах PC наиболее распространенное у пользователей разрешение (да. или даже преимущественно. 171 Дарите дизайнерам ощущение счастья Да.многие из них являются техническими или маркетинговыми специалистами. Сейчас время совмещения профессий и неопределенности. нет: предположения должны проверяться на каждой стадии. Оплачивайте лицензии. но какого творчества можно ждать от измученных и утомленных трудоемкой работой на маломощном оборудовании сотрудников? Поддерживайте мотивацию проектной группы.можно только гадать).рынок специалистов по веб-дизайну еще не устоялся. http://openlib. которые должны учитываться на всех стадиях веб-разработки . дизайнеры производства должны проверить функциональные возможности. работающих над веб-сайтами.особенно. Означает ли это. не имеет специальной дизайнерской подготовки . что обнаружатся серьезные проблемы уже после окончательного одобрения клиентом. называемый также «HTML для прощелкивания» (HTML click-thru). а как будет в среде HTML? Для этого рекомендуется сформировать протосайт. чтобы для запуска приложений дизанерам не приходилось выходить из сети (к тому же. которые накладывает Сеть. Следует учесть.org. которые были брошены на эту задачу. другие приходят прямо со школьной скамьи . дизайнеры не могут просто выдумывать абстрактные концепции. действительность пока накладывает довольно жесткие рамки. чтобы дизайнеры действительно просматривали свою работу на этом разрешении. Хотя нынешние технические ограничения могут существенно измениться в будущем (как скоро . придя из издательского дела. Мае или PC? Для девяноста процентов вебсайтов дизайн разрабатывается на компьютерах Macintosh. А как быть с контентом и навигацией? На бумажных макетах все выглядит работающим. Сегодня дизайном занимаются вынужденно: наиболее опытные веб-дизайнеры переквалифицировались. Рабочие станции на базе PC позволят дизайнерам просматривать разрабатываемый сайт с позиции основной массы пользователей. что сам визуальный дизайн обходится без тестирования? Конечно. чтобы можно было уверенно двигаться дальше и не столкнуться с тем. это вызовет недовольство дизайнеров) и контролируйте. вкладывайте средства.Фаза 3: Визуальное оформление и тестирование ческих элементах. на этапе создания визуального дизайна.

проектная I группа должна провести серьезный мозговой штурм для выработки решений на творческом и техническом уровнях (а иногда самым крупным творческим достижением становится техническая н о в и н к а ) . и это нормально. он должен от- http://openlib. взвесить. Разработка разумного дизайна Визуальный веб-дизайн .org. Некоторое наложение фаз структурирования и визуального проектирования почти всегда происходит. Скорее. Реальные условия не позволяют быть последовательными и рассчитывать на неспешный график. они не взаимозависимы. Т в о р ч е с к и е з а м ы с л ы необходимо не только произвести в большом количестве. обдумывать идеи и подбирать цвета. Однако хотя визуальные дизайнеры уже начинают делать наброски. В реальных проектах из-за сжатых сроков визуальное проектирование начинают.ua/ . а не полтора часа. чем только привлекательный интерфейс. обдумать. Но в идеале и на стирку уходит 10 минут. они не могут приступить к полноценной работе. помимо всего прочего. К этому моменту клиенту еще нечего показать. и не позволяйте клиенту рассчитывать на это. сначала будет освещен визуальный. как будет завершен информационный дизайн. Поскольку в книге нельзя описать одновременно оба направления. выверяет содержимое: не слишком ли его много.это нечто большее. пока не закончено информационное проектирование. Протосайт. что они развиваются одновременно. СОЗДАНИЕ > Начало творческого процесса > Разработка разумного дизайна > Анализ целей сайта I > Разработка концепций > Проектирование для пользователя > Представление дизайна и получение одобрения 1 Начало творческого процесса К а ж д ы й клиент терпеливо и л и с нетерпением ждет первого п р е д с т а в л е н и я п е р е п р о е к т и р о в а н н о г о сайта. их требуется проанализировать. Но прежде чем это произойдет. каждый из них естественно продолжает фазу структурирования.отдельные процессы.172 Глава 5 Визуальный дизайн и разработка протосайта . не дожидаясь окончательного структурирования сайта. а затем функциональный аспект этой фазы. и клиенты оплачивают счета сразу по получении. Не 1 надейтесь. что редизайн визульного оформления возможно сделать в один прием. Визуальный дизайн берет за основу результаты информационного дизайна и добавляет к ним графический интерфейс. Но помните. а также полностью определен и получен контент. не слишком ли мало? Хорошо ли оно читается? Нет ли пропусков? В идеале визуальные дизайнеры должны начинать работу после того.

а не сражайтесь с ним. спрашивайте: «можно ли сделать это?».при создании или редизайне веб-сайта . Перемещайтесь по сайту. это . достаньте креативный бриф и используйте его как трамплин для творческого процесса. В любом проекте . Именно на этом этапе информационное проектирование и предварительные замыслы обретают форму. поставленные клиентом: например более профессиональный облик и производимое впечатление. «удастся ли такой эффект?». Каким задумывался стиль оформления? Серьезным. как к няне в детском саду.Фаза 3: Визуальное оформление и тестирование 173 вечать всем целям сайта и в то же время быть функциональным. Во время креативного мозгового штурма проектная группа должна выявить визуальные недостатки существующего сайта. проанализировать цели редизайна. Рассуждайте с позиции пользователя. Разумный дизайн должен удовлетворять нужды пользователя. Разумный дизайн функционален и быстро загружается. Творческий процесс развивается не в вакууме. но не могут быть произведены или трудно загружаемы. относитесь к ним. Опирайтесь на информационный дизайн. просмотреть конкурирующие сайты и обсудить предложенные решения.важно понимать концепцию разумного дизайна. Следите за этим. они не разумны. JavaScript и так далее). производите загрузку. более современная графика. Придерживайтесь разумного дизайна. Анализ целей сайта В момент. Он работает. «не возникнут ли трудности при таком подходе?». а не амбиции дизайнера. облик и становятся осязаемыми. Как добиться разумного дизайна? Очень просто. когда визуальные дизайнеры готовы начать свою работу.не разумный дизайн. Для этого необходимо проанализировать технические http://openlib. Регулярные проверки и обсуждения с дизайнерами производства помогут найти адекватные. Разумный дизайн подвижен. Даже если замыслы красивы. как это делают пользователи. выполнимые решения. визуальные дизайнеры должны задумываться также о технических и структурных решениях (например. Стадию визуального дизайна часто считают развлекательным этапом работ. корпоративным и четким? Потрясающе новаторским и эксцентричным? Элегантным и спокойным? Каким-то еще? В креативном брифе перечисляются также цели редизайна. Если ущемляются интересы пользователя. Почаще консультируйтесь с дизайнерами производства HTML. Разумный дизайн учитывает среду и возможности пользователя. Flash. модны и полностью отвечают потребностям аудитории. Неверные шаги на этой стадии тяжело отражаются на бюджете. угодить рекламодателям или даже мелким причудам руководителей компании клиента. желание использовать Flash. Здесь дизайнеры проявляют свое волшебство.org. больше полезной площади для содержимого и сокращение необходимости прокрутки и так далее. даже если все выглядит шикарно.ua/ . об использовании DHTML. Разрабатывая цветовые схемы и подбирая шрифты.

1. Надо убедиться. Креативный бриф помогает разработать общий стиль и атмосферу. независимо от обеспечиваемых информационным дизайном содержимого и маркировки. карта сайта структуру размещения компонентов содержимого. и начинайте «рисовать». Было представлено несколько ее вариантов. предложенная на ранней стадии редизайна сайта New Riders. Существует два различных подхода к тому. а остальные делают пробные серии эскизов сразу на Рис. И помните.ua/ . Приверженцы традиционного подхода любят начинать с набросков карандашом или красками на бумаге. Разработка концепций Разработку внешнего оформления.org.174 Глава 5 возможности целевой аудитории. не следует использовать технические подходы только из-за их современности. До завершения информационного проектирования в качестве руководства к действию визуальные дизайнеры могут использовать креативный бриф. Цветовая палитра. 5.1). 337) http://openlib. можно начать с подбора цветов и примерного размещения объектов на бумаге или экране (рис. как начинать отрисовывать дизайн. В ходе дальнейших работ эта палитра совершенствовалась. они вплотную приступают к оформительским работам. В данном случае была выбрана измененная версия (см. а как только карта сайта и макеты будут готовы. цветную вклейку у стр. а макеты . что они отвечают целям редизайна и соответствуют возможностям аудитории.навигационные элементы. Соберите все. что готово на данный момент. 5.

5. и. и далее развивать их детально. Предварительные варианты оформления.Фаза 3: Визуальное оформление и тестирование 175 компьютере (рис. стр. на этой стадии Базового процесса визуальные дизайнеры приступают к подбору цветов и размещению объектов.org.2. В обоих случаях этот этап является началом разработки общей концепции оформления. Рис. 337) http://openlib.2 и 5. Illustrator или Photoshop (см. цветную вклейку.3). Благодаря этим начальным наброскам дизайнеры быстрее справятся с размещением объектов и созданием направляющих Рис. независимо от методики.3. 5. сведя их к двум-трем основным направлениям. Визуальные дизайнеры должны продумать все идеи. созданные в программах Freehand. Они начинают опробовать различные варианты. 5. Предварительные эскизы на бумаге позволяют использовать их в мозговых штурмах в поисках решений.ua/ .

но потребует затем переделки из-за своей невыполнимости. никак нельзя назвать разумным. Это ограничивает фантазию и уменьшает шансы создать потрясающее решение. особенно разница в броузерах. Это реальность.176 Гамма гамм Оттенки цветов. Учитывайте производство. которое понравится клиенту. Просто помните. Одним нравится яркость Мае. что PC отображает шрифты HTML на 2-3 пункта крупнее. выглядят слегка по-разному на компьютерах Мае и PC.org. но это приводит к серьезным проблемам при производстве. С течением времени (и с переходом на новые версии броузеров) становится все более возможным использовать тысячи и миллионы цветов. люди действительно начинают выходить за строгие границы 216 цветов.приверженцы более естественных и приглушенных тонов PC. Не всякое замечательное оформительское решение можно эффективно (или вообще) осуществить в HTML. на первый взгляд. Дизайнеры производства очень помогут. что результат будет немного другим. мог бы решить проблему. Даже при размещении оптимизированной графики в рамках безопасных шестнадцатиричных веб-цветов (в ячейке или в фоне) остается еще узкий момент. Веб-безопасные . даже если настроить гамму Мае для PC. пока информационное проектирование не завершено. Любой более крупный шрифт везде смотрится неуклюже (за исключением броузера Netscape на компьютере Macintosh). Веб-проектирование. Но пока. . Возможно. Дело в том. но нельзя забывать о следующих факторах: а) время загрузки. например в выборе шрифтов. чем Macintosh. отвечающего требованиям веб-безопасности.и только? Что касается цветового куба. другие . проверяйте. б) пользователь может отключить графику или работать на карманных устройствах и в) люди с проблемами зрения часто вообще не включают показ графики (подробнее об этом читайте в описании фазы 4: Производство и контроль качества). http://openlib.ua/ . проверяйте и проверяйте. что в большинстве случаев эксперименты вне куба все еще проблематичны. Споры никогда не утихнут. Глава 5 На начальных мозговых штурмах не забудьте учесть время загрузки. Как руководитель проекта следите. Графический текст. захочется что-то изменить. a Internet Explorer отображает их крупнее. чтобы визуальные дизайнеры не тратили слишком много времени на усовершенствование предварительных идей. которые помогут в оценке возможности преобразования оформительских идей в работающие веб-страницы для целевой аудитории. зависящее от размеров шрифта. функциональность и наличие у пользователей различных броузеров.да. Перед показом клиенту загрузите выбранную палитру на свой сервер и просмотрите ее на обеих платформах. даже являющихся веб-безопасными. которые зависят от конкретного кегля шрифта в HTML. Часто дизайнеры создают макеты. решаясь на это. Наш опыт показывает. чем Netscape. Работайте в тесном контакте с дизайнерами производства HTML. В связи с этим для HTML рекомендуется оптимальный размер шрифта 2.

самое время собрать отзывы пользователей. проведение опроса фокусгруппы даст очень ценные сведения. ставилось целью применить самые передовые технологии. и сосредоточиться на детализации информации из макетов.Фаза 3: Визуальное оформление и тестирование Проектирование для пользователя По результатам мозгового штурма арт-директор или дизайнер должны выбрать три-пять направлений.. а не для самих себя. если только при этом они не забывают о пользователе. обратите внимание на время загрузки проектируемых страниц. впрочем. http://openlib. Не забудьте определить. Например. глобальные элементы. об этом уже достаточно говорилось. Однако чаще приходится принимать компромиссное решение. Возможно. А если пользователи выходят в сеть в основном из дома с помощью 56 К модемов? Создайте больше страниц с меньшим содержимым на каждой из них. Правильно ли понимается и интерпретируется навигация? Несет ли смысл маркировка элементов? Всесторонняя ли структура сайта? Привлекателен ли интерфейс? Можно ли двигаться дальше или необходимо вернуться и исправить что-то? Удержать дизайнеров строго «на волне» пользователя и в рамках целей редизайна весьма проблематично. чтобы группа верно представила себе сайт с позиции аудитории. Убедитесь.. Хотя на этой стадии Базового процесса не запланировано юзабилити-тестирование. о выполнимости задуманного или о пожеланиях клиента. контент и так далее. Возможно.org. Где-то на стадии показа второго раунда набросков визуального дизайна.ua/ . если потенциальные клиенты в основной массе используют офисные каналы связи Т1. включая навигацию. дайте дизайнерам полную свободу творчества. По мере разработки визуального дизайна найдите время для того. когда и где разместить визуально-графические элементы (например. вполне возможно. Конечно. согласовав их с дизайнерской группой. между начальными и заключительными комментариями клиента. 177 Отзывы пользователей Используйте любые возможности для проверки сайта пользователями. помогающие пользователю перемещаться по сайту. что визуальные дизайнеры делают редизайн для целевой аудитории. Они увлекаются творческим процессом и стремятся создать нечто небывалое. кнопки и пиктограммы). Возможно. чем ультра-супер. Если так. Это прекрасно. удастся размещать больше графики и меньше текста. что в задачи проекта входит именно создание потрясающего оформления. вся аудитория сайта использует мощные каналы связи Т1. Но все-таки планка должна быть чуть ниже.

org. В целях повышения доступности создайте версию вебсайта для пользователей каналов связи с низкой пропускной способностью. 5. Делайте это всегда http://openlib. Предоставьте аудитории выбор между Flash-сайтом и его HTML-версией.4.ua/ .178 Глава 5 Рис.

Опция Make Column Autostretch обеспечивает автоматическое распределение текста HTML-таблицы по ширине окна броузера http://openlib. на самом деле делает видимой только область 760x420.5). Такие параметры настройки помогут дизайнерам реальнее смотреть на вещи. Puc. Выберите любой из них. динамически изменяющим размер. Чтобы справиться с этой проблемой. На мониторе среднего размера или на своем же. 5. например такой: «760x420 (800x600 maximized)». на которую при модернизации сайтов ориентируется большинство дизайнеров. что правый и нижний края оказываются обрезанными. масштабируемым.0 имеет для этого очень удобную опцию (рис. Эта установка. что сейчас наиболее популярным является разрешение 800x600. 5.ua/ .Фаза 3: Визуальное оформление и тестирование 179 Истина о размерах экрана Размеры видимых областей экрана могут быть разными: они полностью зависят от собственной системы пользователя.org. позволяющее быстро оценить истинный размер экрана при создании эскизов или страниц Puc. но с другим разрешением (всегда определяемым пользователем) может обнаружиться. Куда деваются остальные пикселы? Их использует броузер. Dreamweaver имеет удобное меню в правом углу панели инструментов. Dreamweaver 4. взгляните на выпадающее меню в правой нижней части окна страницы (рис. Дизайнеры любят работать с разрешением 1024x768. Там предлагается несколько размеров окна. делайте дизайн растяжимым. Мы предпочитаем термин «резиновые».5. Считается.6).6. Но они должны просматривать свою работу на различных мониторах. 5. Это проверено. которые способны подстраиваться под ширину окна броузера. какого бы размера оно ни было. так как почти все они имеют экраны с высокой разрешающей способностью. Если вы работаете в Dreamweaver. Не каждый имеет 21-дюймовый монитор. потому что страница и текст растягиваются по всему окну броузера. 5. текучим все эти термины относятся к страницам. Dreamweaver предоставляет простое решение динамического изменения размеров в броузере («резиновые» страницы).

чтобы потом.Глава 5 180 Дэвид Сигел (David Siegel) о визуальном дизайне и крайне важном посетителе Ориентируйтесь на посетителей. Стремитесь к простоте. но мы оказались настолько привязанными к пространству в 256 цветов. которые даже не могут быть оценены посетителями. оставьте это посетителям. Необходимо показать их посетителям. а затем добавляйте обратно оформительские эффекты. Это не означает. Не становитесь злейшими врагами самим себе. что любят посетители. используется 2. но не следует пытаться воссоздавать углы.и оставить его в покое.это слова: «Нам это нравится». Фон должен быть пустым и в спокойных тонах. можно было бы напомнить. а стремитесь к тому. Никаких 3D. что ему нравилось предложенное. если клиент не получал желаемые результаты. что нравится нам (дизайнерам и клиентам). Просто не давайте превалировать своему эго. Это следует делать на всех этапах процесса дизайна. Укротите мысли о своей гениальности. Никогда не применяйте узорчатый фон. Дизайнеры спят и видят новые динамические эффекты. Веб-сайты создаются не для мимолетного прохода сквозь них. что не допускается многое л ойность. Прислушиваться к посетителю . позвольте им быть гениями. . Не конкурируйте с контентом. Уже везде. . Упростите сайт насколько возможно. Перестаньте думать о том. так как заинтересован только в желаемых бизнес-результатах. Решительно откажитесь от некоторых правил.контентом. что это стало религией. где есть вкладки указателя. но все это приво- дит лишь к трате огромных усилий на создание потрясающих эффектов. Раньше все стремились получить письменное одобрение клиента. что следует забыть о собственных творческих замыслах.это именно то.ua/ . ради чего люди. которые они сотворят. Вы создаете много набросков.вовсе не означает. А контент . Главное. а 3D здесь будет смотреться нелепо.5D. Обычно в этом нет необходимости. поэтому трехмерность только отвлекает. но только те.org. но особенно важно на стадии оформления. Перешагните границы священного цветового куба. Этого всем хотелось. которые одинаково хороши для вас и для посетителей. скосы и размытие. Ведь теперь уже не поставляют компьютеры http://openlib. заходят на сайт. конкурируя с главным . что требуется услышать от клиента. заказчики и простые пользователи. но кому их показать? Клиенту? Клиент не станет тратить время и деньги на эксперименты с сайтом.

Подчеркнутые синие ссылки . а не для наград и эффекта. Эта среда . это не станет катастрофой. чего люди ожидают. Например. ставшим незыблемо традиционным.для людей. Его книга «Futurize Your Enterprise» (Обеспечьте своему предприятию будущее). которая в 1999 г. Хорошие дизайнеры должны уметь работать в любой среде. Они предназначались для статей по физике. со ссылками. как The Harvard Business Review.да. можно и поэкспериментировать. Деловые результаты последуют.один из выдающихся авторитетов в области интернетстратегии. В 1995 г.Фаза 3: Визуальное оформление и тестирование с видеокартой менее 8 Мбайт памяти. консультационную фирму по высококачественному веб-дизайну и стратегии. переведенный более чем на 15 языков. http://openlib. использующих веб. а это вдвое больше. чем требуется. Дэвид Сигел . Забудьте о цветовом кубе. «CreatingKiller Web Sites» (Создание потрясающих веб-сайтов). и если проверить . Книга 1996 г. Сигел основал Studio Verso. здесь они - 181 заказчики.com.ua/ . Вводите новшества. Но если насильно отключить подчеркивание и сделать ссылки красными. Hayden — самый долгоживущий бестселлер Amazon. John Wiley & Sons. 1999. С каким-либо визуальным представлением. что броузеры разрабатывались без расчета на визуальное отображение.org. что можно еще найти подобные примеры и способы изменить и передвинуть пределы. Лично я думаю.это исторически сложившаяся традиция. вошла в список бестселлеров «Business Week» и имеет большое количество увлеченных приверженцев. это то. чтобы видеть миллионы цветов. не отпугивая этим посетителей. Дэвид публиковался в таких журналах. была продана KPMG. Fast Company и The Industry Standard. Проектируйте и перепроектируйте для них. Помните.

182

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

Глава 5

Представление дизайна и получение
одобрения
Перед представлением клиенту первого варианта
направлений дизайна они должны пройти несколько
этапов. Помните две важные вещи: во-первых, слишком большой выбор на ранней стадии процесса замедлит работу, так как вызовет колебания клиента.
Оптимальным будет выбор из трех направлений. Вовторых, не показывайте варианты, которые вам не
нравятся, только потому, что вам больше нечего показать как альтенативу. Не исключено, что потом
придется разрабатывать именно это направление.
Поместите свои варианты на клиентской демонстрационной площадке и пригласите клиента
просмотреть их (рис. 5.7-5.10). Некоторые клиенты сразу дают подробный отзыв; другие будут
«капать понемногу». В последнем случае клиент
делает несколько незначительных замечаний, дизайнеры все поправляют, уточняют у дизайнеров
производства, все ли в порядке с выполнимостью,
и представляют клиенту, а тот опять добавляет
несколько незначительных замечаний. Если это
допустить, клиент может растянуть такой сценарий до бесконечности. Руководителю проекта следует добиваться от клиента полезных откликов.
Два или три показа дизайна вполне достаточны.
Все, что свыше этого, уже может потребовать дополнительных переговоров и ассигнований - в зависимости, конечно, от различных факторов: уровня качества против ожидаемого, количества раундов изменений, колебаний и так далее.
В конце этой первой стадии фазы 3 будет уже готов соответствующий разумный визуальный дизайн, который удовлетворяет клиента и его аудиторию. Остается перейти к следующему этапу.
Выбрав направление дизайна и получив одобрение
клиента (не забудьте получить его подпись), можно уверенно приступать к следующей стадии - к
производству HTML.

http://openlib.org.ua/

Фаза 3: Визуальное оформление и тестирование

183

Контроль над клиентом
Иногда клиенты страдают забывчивостью. В креативном брифе может быть заявлено «классический, элегантный», и именно такой стиль дизайна вы представляете, но клиенту не хватает новаторства. Какого?
«Новаторский» не был оговорен в креативном брифе. В чем же дело? Клиент не мог выразить свои
желания, пока не увидел фактические варианты дизайна. Вот так, вдруг, ни одна из продуманных творческих идей не отвечает этому новому требованию.
Нужен совсем другой стиль, и ваш график работ попадает в тиски.
Иногда клиентам нравится уже первый показанный
вариант, а иногда им не угодишь. В любом случае
зачастую им трудно найти время, чтобы выразить свое
мнение. Это тоже часть творческого процесса - вносите в бюджет и ее. Не исключено также, что и дизайнеры не сразу найдут нужное решение [md], мо-

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

http://openlib.org.ua/

184

Глава 5

Проблема
Старая главная страница New Riders (рис. 5.7) заполнена содержимым, занимающим ценное пространство, которое можно было бы лучше использовать, чтобы отразить индивидуальность и бренд компании. Сайт нуждался в
новой структуре и организации, чтобы в более динамичной манере подавать продукты компании (книги). Ключевые слова: элегантный, актуальный, высококачественный, с лоском.

ПРЕЖДЕ

Puc. 5.7, Старый сайт заполнен контентом и статичен
(см, цветную вклейку, стр, 356)

http://openlib.org.ua/

Фаза 3: Визуальное оформление и тестирование

185

Puc. 5.8. Этот начальный вариант дизайна разработан в форме модульной сетки; он выглядит модно и дружелюбно. Такой подход позволяет расположить вверху главной страницы несколько дополнений
(см. цветную вклейку, стр. 356)

http://openlib.org.ua/

Глава 5

186

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

Puc. 5.9. Этот начальный вариант дизайна производит мягкое/элегантное впечатление. Такой подход подчеркивает настрой и образ компании; он предлагает простую систему ссылок к основным разделам контента (см. цветную вклейку, стр. 357)

http://openlib.org.ua/

187

Фаза 3: Визуальное оформление и тестирование

Тизер (от англ. teaser - дразнилка) - изначально в рекламе: прием, при котором рекламная кампания делится на две
части: сначала появляется собственно «тизер», цель которого удивить и привлечь внимание и который не содержит никаких рекламных предложений, а потом следует вторая часть - разгадка (revelation), когда становится понятным, что собственно рекламируется. Здесь «тизер» означает незаконченный текст, представляющий собой несколько его начальных слов,
снабженных в конце многоточием и ссылкой «далее», «весь текст». - Примеч. науч. ред.

Puc. 5.iO. Этот начальный вариант дизайна создает облик корпоративного/современного сайта с ярким впечатляющим лозунгом компании и подчеркиванием ее индивидуальности. Он позволяет также выделить на
главной странице книжные новинки (см. цветную вклейку, стр. 357)

http://openlib.org.ua/

Глава 5

188

Линда Вейнман (Lynda Weinman)
о способности дизайнеров решать проблемы

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

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

http://openlib.org.ua/

com. когда он твердо знает цели сайта и знает.com.Фаза 3: Визуальное оформление и тестирование что бы то ни стало. а то. Любое решение должно быть обоснованным. компании. Например. через «прощелкивание» сайта или. что они ясны. Любой дизайнер может поддерживать целеустремленный (направленный на поиски решений и решение проблем) подход к фактическому процессу дизайна и создания набросков. что эти цели измеримы (например.автор многочисленных книг. Она владеет учебным центром.ua/ . обучающих компакт-дисков и программ. что Flash может обеспечить и чего нельзя достичь никаким другим способом. в которых участвовали тысячи веб-дизайнеров со всех континентов. Линда Вейнман соучредитель lynda.lynda. чтобы узнать больше. в котором проводятся практические курсы. Не упускайте цели из виду: убедитесь. Недавно ее компания организовала несколько мероприятий. Линда . Посетите www. что хотят купить поль- 189 зователи). и придерживайтесь их. через фактические продажи) и что они достигаются с учетом позиции конечного пользователя (то есть продать нужно то. которая специализируется на подготовке творческих профессионалов веб-дизайна и графики.org. целью должно быть не использование Flash. что более важно. и/или что необходимо для успеха сайта. http://openlib.

а также с навигацией.ua/ . При использовании заполнителя вместо содержимого могут возникнуть трудности при оценке реального со- Если сайту требуется включение внутренних программных разработок. http://openlib. называемый также «HTML для прощелкивания». Одно из главных достоинств протосайта . чтобы удостовериться.выявление проблем с содержимым и потоками информации. что еще не вполне работает. Когда дизайнеры производства формируют протосайт . Протосайт.используется для выверки переходов страниц. оптимизации и кодирования. хотя иногда применяются «облегченные» сценарии.11). — эта информация должна быть включена в них.все.расширение макетов фазы 2: Разработка структуры сайта .это каркасный макет сайта. все основные и вторичные страницы. Рекомендуется также с формировать протосайт. чтобы проверить основную функциональность. какая информация находится на каждой странице. контент и навигацию. Особенно следует проверить. По ходу визуального дизайна поправьте то. навигацию и основную функциональность (или имитацию предполагаемых функциональных возможностей). наборы фреймов . соответствует ли форма получаемых результатов запланированной. Протосайт обычно не включает особой функциональности. однако эта ситуация лежит вне поля зрения Базового процесса. навигации и контента. Обычно протосайт является просто структурным макетом (без оформительских эффектов . на фазе производства не всегда найдется время для такой регулировки. что нуждается в проверке работы на разных платформах. 5. всплывающие экраны.org. Рекомендуется провести проверку в двух направлениях.по крайней мере. HTML-протосайт Протосайт . чтобы выделить навигацию) с активными ссылками HTML (рис.190 Глава 5 ВЫВЕРКА > > > Выверка переходов и функциональности Создание HTML-протосайта Проверка функциональности Выверка переходов и функциональности Совсем необязательно ждать полного завершения дизайна. выпадающие меню. который позволяет проверить контент. технический протосайт создается инженерами с целью продемонстрировать функциональные возможности и соответствие требованиям. . Дизайнеры производства могут протестировать DHTML. На этом этапе Базового процесса уже известно. действует ли выбранная информационная модель.достаточно ввести несколько цветов.

Очень важно для клиента (и проектной группы) выявить такие недочеты до того. как вложить значительные средства в дизайн и производство. Заполните его всем содержимым. чтобы протосайт был протестирован и проектной группой и клиентом.Фаза 3: Визуальное оформление и тестирование 191 стояния дел.org. Puc. насколько возможно. предполагается наличие основной страницы под названием «Расположение офисов» с четырьмя вторичными страницами. Дайте клиенту увидеть контент на странице. выявят перенасыщенные текстом страницы или решат. какое содержимое следует переместить из запланированного места. как начнется само производство. даже если оно еще не в окончательной позиции размещения . Насколько необходим протосайт? Проверка предположений до того. Клиент может удивиться необходимости прокрутки на одних страницах и пустоте других и может задуматься о перекомпоновке всего контента. по одной для каждого из офисов.ua/ . чем после запуска сайта.в основном это HTML.11. Только включив настоящее содержимое. можно обнаружить. 5. Лучше принять такое решение на этой стадии. клиенты легче обнаружат пробелы в контенте. Образец страницы для протосайта New Riders. Рекомендуется. потому что там оно не имеет смысла. Например. Увидев протосайт собственными глазами. должно быть частью каждой технологии на многих этапах процесса.это только поможет клиенту сформировать собственное восприятие и обоснованную оценку сайта. всегда очень ценна. Тестирование. без всякой графики http://openlib. которое уже готово. что на основную страницу «Расположение офисов» фактически нечего (в терминологии контента) поместить: все содержимое размещается на вторичных страницах. Этот «HTML для прощелкивания» содержит навигацию» заголовки и заполнитель вместо содержимого (только часть настоящего контента была получена) .

когда можно сохранить то. проверку функциональности можно перенести в стадию производства. Но адекватность . которые исторически проблематичны и нуждаются в проверке как в отношении возможностей аудитории. скорость связи. и если были проблемы с навигацией и организацией или если требуется нечто большее. тогда будет потеряна существенная часть аудитории. которые требуется серьезно урегулировать. В частности.192 Глава 5 Иногда протосайт после выверки функциональности и навигации становится совсем ненужным. проверяя предположения на этой стадии. платформы и плагины . так и в плане производственной выполнимости. Совместимость броузеров. если есть уверенность в надежности контента. Кроме того.одной для Internet Explorer и другой для Netscape либо отдельно для пользователей с высокой и низкой скоростью связи. а выверку информационного дизайна произвести на макетах. очень существенным изменением является необходимость формирования двух версий сайта . может казаться превосходной во время мозгового штурма. Должны быть проверены любые из следующих компонентов: • Сложные наборы фреймов (не рекомендуются без абсолютной необходимости) • Функциональные динамически изменяемые меню в DHTML или JavaScript • Всплывающие окна.все это аспекты функциональности. что создано). требующие проверки в броузерах • Выпадающие меню (особенно те. чем обычное программирование. особенно с фиксированным размером или расположением • Таблицы стилей или любые компоненты. Этап создания протосайта можно пропустить. можно выяснить. нет ли изменений в масштабе проекта. а фактический редизайн пересматривается и формируется заново (такое тоже случается). то в таком случае протосайт . это все равно пробное производство. что работают как ссылки) • Стандартные функции для покупательской корзины • Все что требует написания облегченных сценариев или включений на стороне сервера (SSI) http://openlib.org. Проверка функциональности Проверка функциональности индивидуальных возможностей до начала фактического производства HTML — разумный шаг.это все же не тождественность.ua/ . реализуемая при помощи DHTML. Так или иначе. а иногда фактический редизайн сайта формируется на основе этого HTML-протосайта (приятно. Идея с выпадающими меню. даже если протосайт совсем отбрасывается.прекрасное средство для устранения беспокойства по поводу этих аспектов. и это решение становится неприемлемым. навигации и визуального дизайна. но если в действительности это несовместимо с некоторыми броузерами или с компьютерами Мае. Если с ресурсами большая напряженность.

com) расширили свои функциональные возможности.com. если оно будет использоваться в печати и для маркетинговых целей.ответственность клиента. может стоить им 800 долларов за каждый год эксплуатации сайта плюс дополнительные затраты. 7 За к. Набросок . Существующие сегодня онлайновые сайты с архивами фотографий (например. чтобы упростить процесс приобретения иллюстрационных материалов. Укажите также. В перечне деталей и уточнений в плане проекта должно быть четко сформулировано. Пусть клиенты осознанно делают свой выбор (есть и другая стопка изображений) и. При представлении концепций клиентам следует очень четко объяснить. которые обойдутся им в 100 долларов за один показ. что получили сведения обо всех фотографиях и иллюстрациях для сайта.comstock. до закрытия обсуждений. в которое они влюбились. Такая проверка поможет также заранее подготовить производственный штат к предполагаемым задачам. в маркетинговых брошюрах. применение и установка стандартов на всем сайте должно происходить через создание графических шаблонов для различных типов страниц. Осведомите клиентов заранее. какое направление дизайна будет выбрано в конце концов.это Контроль за компонентами Следите за всеми изображениями . Заблаговременное решение технических проблем сэкономит много времени на последующих этапах. А теперь.tonystone. Вы определили набросок сайта. Загружаемый размер и осуществимость оптимизации уже выяснена в ходе создания дизайна. ес- ли до одобрения проекта будет понимать.com. Он отличается от окончательного дизайна.ua/ .org. особенно если клиент собирается в дальнейшем использовать любое из изображений сайта (например. что внешние затраты на фотографии не входят в смету проекта.какое из них откуда взято. когда общее направление сформировано. возможно. Убедитесь. Передайте эту информацию клиенту. как работают права на использование.Фаза 3: Визуальное оформление и тестирование 193 Тестирование функциональности на стадии визуального дизайна позволит устранить проблемы до завершения дизайна. Даже при объединении набросков отмечайте происхождение каждого элемента графики. что получение прав на использование изображений . Каждый сэкономит много времени и устранит лишние заботы. 667 http://openlib. Поскольку над этими задачами работают несколько сотрудников.photodisc. почтовой корреспонденции и так далее). так как никогда нельзя сказать заранее. то есть когда это еще достаточно просто сделать. они захотят выбрать чуть менее интересные бесплатные изображения вместо тех. www. На первом этапе этой фазы клиенту были представлены направления дизайна. очень важна детальная схема стандартов. www. Сначала обсудим разницу между наброском дизайна и графическим шаблоном. Создание графических шаблонов На этом этапе созданный дизайнерами облик должен быть перенесен на множество страниц. что изображение. www.

которые являются глобальными). шаблон для основных страниц. что. или плагины. чтобы дизайнеры производства смогли импровизировать в случае необходимости. но крупным сайтам часто требуется дюжина или больше. В производство идут многослойные файлы Photoshop или Fireworks. возможно. непосредственно для которых он разработан. Не забудьте о страницах с сообщениями об ошибках. которые вызывают все функциональные возможности (включая состояния on/off /over) и содержат заполнители или фиктивный текст вместо содержимого (рис. Убедитесь.194 Глава 5 только одобренное направление. 5. так и для всех аналогичных страниц. в которой перечислить их все. а затем повторно утверждено. который скоро передадут в производство для разрезки на части и оптимизации на следующей фазе Базового процесса. Ваши визуальные дизайнеры не смогут спроектировать все эти страницы. Имейте в виду. оно должно быть развито (определенно. которую произ- http://openlib.это детализация наброска до создания многослойного файла. выпадающие меню или различные отображения кнопок в зависимости от расположения указателя мыши. будет создан графический шаблон для главной страницы. еще придется разрабатывать какие-то детали). что будет использоваться как для HTML-страниц.org. Обратите внимание на отмеченные стандарты в руководстве по стилю оформления (обсуждаемому позже в этой главе). они уже должны быть обсуждены с дизайнерами производства на предыдущей стадии в плане возможности их программирования и в отношении формы их подачи в производство. Сейчас время формирования графических слоев.глобальные.webvan. придется создать на базе основного шаблона несколько графических шаблонов для разных групп одинаковых страниц. сопровождающих заполнение форм или завершение транзакций. где именно в шаблонах будет появляться это содержимое.ua/ . будет достаточно лишь нескольких шаблонов. шаблон для вторичных страниц и так далее. Если для навигационных кнопок запланированы какие-то особые эффекты на JavaScript (например. Скорее всего. что в графические шаблоны включена вся информация. Первые компоненты создаваемого графического шаблона . готового к производству.12). чтобы не пропустить случайно. Создание графического шаблона . определяющий. Если предусмотрено включение динамически генерируемого содержимого.com создавалось больше 40 шаблонов!) В случае большого количества графических шаблонов удобно сформировать электронную таблицу. (Для www. Нужен нижний текстовый колонтитул? Добавьте его теперь. вероятно. всплывающих окнах или страницах переадресации. на данном этапе требуется создать отдельный слой. Уточните все детали навигационной панели в состояниях on/off /over (нахождение указателя мыши над ней. Он называется шаблоном потому. Графический шаблон берет за основу одобренный набросок дизайна и готовит его для оптимизации и производства HTML. которые будут поддерживать все эти функциональные возможности. не над ней и при прохождении через нее). Это главный графический файл. Для небольших проектов редизайна. — так называемый план создания шаблонов.

**) Рис.12.Фаза 3: Визуальное оформление и тестирование 195 E3N£Wh . цветную вклейку. Четко именованные слои указывают состояние динамического элемента графики и его функциональность. стр. 358) http://openlib.ur»> i«H o«r an»t»™ «*. 5.он нужен дизайнерам производства (см. Главная страница (вверху) и вторичная страница (внизу) в процессе разработки. Не забудьте включить справочный слой.»m<d<t»1O<o (r. Каждая из них . .отдельный многослойный файл с перечислением всех находящихся на странице текстов. содержащий все слои файла склеенными.ua/ .org.

Рекомендуется включить в руководство по стилю оформления набор основных компонентов. содержат общие (глобальные) элементы. чтобы оно было наглядным и информативным (рис. что именно содержится на странице. Тогда дизайнерам производства придется задавать меньше вопросов.ua/ .из-за несоответствия шрифтов или недостатка информации в выносках . а рабочие станции дизайнеров производства . Компоновка руководства по стилю оформления может быть произвольной.13). в то же время. чтобы визуальные дизайнеры сохранили копии файлов в их изначальном состоянии. если придется делать какие-то изменения (а также по мере роста сайта могут потребоваться добавления в ранние этапы проектирования). Подумайте о покупке шрифтов для производственной группы или по крайней мере удостоверьтесь. от бюджета и ресурсов проектной группы. 5. в описании фазы 5: Запуск и сопровождение). Руководство по стилю оформления . какие используют визуальные дизайнеры. Часто бывает полезна распечатка отдельных выносок. Незавершенные графические шаблоны . конечно. тем лучше подготовлен сайт к решению почти неизбежных проблем во время эксплуатации (подробнее о техническом обслуживании сайта см.196 Глава 5 водство должно будет преобразовать в HTML-страницы.затормозят производство. Руководство по стилю оформления . шрифты. сколько стандартов и рекомендаций вы хотите дать эксплуатационной группе и. (Имейте в виду. Кроме того.) Большую проблему при создании графических шаблонов для передачи их в производство могут представлять шрифты. Созданное в двух частях группой дизайнеров и производственной группой (по одной части на группу). с неотрендеренным текстом и с несклеенными слоями на случай. неотрендеренному тексту. но он также чрезвычайно полезен для справки во время производства.чаще всего PC.это зависит от того. дизайнеры производства редко имеют те же самые библиотеки шрифтов. Визуальные дизайнеры обычно работают на компьютерах Мае. руководство по стилю оформления может быть объемным или очень простым . Чем более детально руководство по стилю оформления. Создание руководства по стилю оформления Все страницы на перепроектированном сайте различны и.org.только http://openlib. заголовки и размеры текста в HTML. показанный ниже в таблице. цвета ссылок. они только указывают. Постарайтесь. Убедитесь. Рекомендуется тщательно проверить эти файлы перед передачей их в производство. В любом случае позаботьтесь. Помогите им.основной документ для эксплуатационного обслуживания после запуска. что установлены состояния для всех динамических элементов. что дизайнеры производства имеют доступ к Мае. что макеты не отображают истинное размещение. а они обычно не являются дизайнерами. В результате дизайнеры производства текста могут не получить доступ к редактируемому. Соблюдение последовательности в оформлении должно быть приоритетом. Клиенты часто сами занимаются техническим обслуживанием своих сайтов.

13. В этом случае дизайнерам производства HTML не придется многое изобретать самим.состояний динамических элементов. достаточно. чтобы проблемы стандартизации не приходилось решать многократно. шестнадцатеричных цветов HTML. заголовков. Вся документация по стандартам подготавливается и одобряется проектной группой для уверенности в том. Сюда относятся элементы оформления.ua/ . 358) http://openlib. Поддерживайте взаимодействие между членами проектной группы. Рис. И конечно.Фаза 3: Визуальное оформление и тестирование 197 первая половина этого документа. вместе с появлением окончательно подготовленного контента возникнут новые изменения. на которых видны основные стандарты. Кроме определения типа графической обработки глобальных элементов следует стандартизировать и другие конкретные аспекты дизайна. Кроме того. 5. а затем переходите к работе над новым элементом. цветную вклейку. которой не было на этапе создания конечного наброска дизайна. Установка стандартов Стандартизованная обработка глобальных элементов и графики . что во время дизайна и создания графических шаблонов разработчики будут соблюдать стиль оформления. выбора размеров шрифтов. сюда может войти и дополнительная графика. которые не были определены и одобрены на стадии создания набросков. всплывающие экраны или сообщения об ошибках.все это требует установок. стр.org. внося дисгармонию в общий стиль. чтобы клиент одобрил страницы. Без стандартов для всех этих элементов каждый будет работать с ними по-своему. встречающиеся только на одной странице. фоновой функциональности . После завершения своей работы дизайнеры производства HTML дополнят руководство по стилю оформления производственными деталями для передачи его эксплуатационной группе. создайте новый стандарт. а не на нескольких: отдельные формы. которые могут применяться для всех страниц. Эти рекомендации не обязательно подписывать у клиента. Этот образец руководства по стилю оформления представлен в формате HTML (см.

первое знакомство пользователя с брендом компании клиента.действительно развлекательная часть Базового процесса: наблюдать.198 Глава 5 Резюме фазы 3 Визуальный дизайн . облик сайта пос- http://openlib.ua/ . всегда захватывающе. Во время этой фазы дизайнеры создают внешнее оформление и графический интерфейс пользователя: это первое. что увидят посетители перепроектированного сайта. Благодаря предварительному планированию на первых двух фазах. как проект обретает видимую форму.org.

Сотня вещей может идти не так. визуальные дизайнеры могут не принимать во внимание возможности аудитории или могут создать совершенный вариант дизайна. содержимое .это важно для конечного итога. через «прощелкивание».org.это. проект имеет хорошие шансы не отклониться от цели. который легко разрезать и оптимизировать. столь же важные. По всем статьям дизайн готов к производству. Это эффективная подача информации с помощью привлекательного оформления. бесспорно. выверены все информационные предположения. творчество. при условии интенсивной работы. да еще и в жесткие сроки. Но почему такой строгий процесс? Это творческая фаза. которое весьма значимо для аудитории и которое создается дизайнерами в рамках технических и бюджетных ограничений. заявленные цели и сформированную структуру сайта в визуальном формате. но который отнимет 80 часов сверх бюджета. Контрольный список задач фазы 3 Создание Передача в производство • Анализ целей сайта • Создание графических шаблонов • Разработка концепций • Представление дизайна • Получение одобрения D Создание руководства по стилю оформления • Установка стандартов Выверка • Создание протосайта • Выверка навигации и контента • Проверка функциональности http://openlib. При подготовке к фазе производства проверены функциональные возможности. а визуальный дизайн является тем этапом Базового процесса. как надо: клиент может все время проявлять недовольство. а также с помощью протосайта. а затем дать им волю? Есть почему: хотя визуальный веб-дизайн .ua/ . дизайн может не получаться.не работать. Следующей фазой является производство. практическая реализация проекта. и так далее. Процесс должен оставаться отлаженным . Придерживаясь Базового процесса и тщательно отслеживая и регистрируя потраченное время. как и сам творческий продукт. Если визуальный дизайн был выполнен правильно.Фаза 3: Визуальное оформление и тестирование 199 ле редизайна точно передает желаемый тон. чтобы они придерживались разумного дизайна. почему нельзя просто проинструктировать проектную группу. следующая фаза. когда и масштаб проекта и бюджет могут выйти из-под контроля. но это так лее и решение задач. будет протекать гладко.

ua/ .org. Сайт не передавал художественного характера сообщества.200 Учебный пример DiverseWorks Клиент: DiverseWorks Art Space URL: www.org Проектная группа: Idea Integration. но страницы были перенасыщены содержимым и неудобны для навигации.ORG [ПРЕЖНИЙ] был богат информацией. Катерина Метьюс (Katherine Matthews) ПРЕДЫДУЩИЙ DIVERSEWORKS. Хьюстон Креативный директор: Джеф Мак-Лахлин (Jeff Mclaughlin) Арт-директор: Джоел Харрис (Joel Harris) Изготовители сайта: Грегори Тейлор (Gregory Taylor). процедура регистрации новых членов и записи волонтеров была неудобной. http://openlib.diverseworks. а кроме того. Дэвид Шеферд (David Shepherd).

Известхудожников. (2000 г. DiverseWorks служит открытой галереей для жественных центров в Соединенных Штатах. а также рост доверия благодаря улучшенному дизайну. См.org. СОВРЕМЕННЫЙ DIVERSEWORKS.ORG [ПЕРЕПРОЕКТИРОВАННЫЙ] выполнен в явно современном стиле.) Результат: Увеличение количества зарегистрированных членов сообщества и записавшихся волонтеров. 348-349 http://openlib.один из ведущих современных худоностью. стр. упростив ее до пяти главных ссылок с меню на DHTML.Учебный пример 201 DiverseWorks .ua/ . Были созданы удобные формы для регистрации новых членов сообщества и добровольной работы на некоммерческой основе. цветную вклейку. Редизайн также улучшил навигацию. обновлен имидж DiverseWorks как галереи современного искусства и сцены. хорошей школой для будущих администный своими крупными образовательными программа-раторов мира искусств и образцом для художественми по искусству и отличающийся финансовой стабиль-ных центров всей страны.

http://openlib.org. Не удваивайте усилий. создайте веб-сайт.Фаза 4: Производство и контроль качества Задачи этапа производства ясны: никакого неверного толкования возможностей пользователя или целей проекта. кодируйте каждую HTML-страницу только один раз. который выглядит и работает одинаково для каждого пользователя.ua/ .

будь он свыше 100 тысяч долларов или менее 10 тысяч очерченные здесь этапы подходят для любого веб-проекта: как для редизайна. реализовывать и интегрировать. теперь наступает время создавать.Фаза 4: Производство и контроль качества Беготня и планирование сайта.этап.ua/ .сейчас требуется собрать воедино все. Эта фаза разделена на три этапа: подготовка. набросок дизайна сайта разработан . Независимо от бюджета . Кодируйте каждую HTML-страницу только один раз. нацеленная на контролируемое производство HTML-проекта. тесто готово. печь разогрета и можно лепить пирог. Еще раз сверьтесь с рецептом и начинайте печь. накапливалось. что фрукты уже нарезаны. что проектировалось. считайте. Фаза 4 . http://openlib. компоновка и тестирование . Проект сформулирован и структурирован. на котором выполняется фактическое формирование сайта. Если сравнить веб-дизайн с печением пирогов. Никакого удваивания усилий.org. по существу. так и для изначального создания сайта. В любом случае цель ясна. закончены. планировалось.технология.

потребуется умение решать проблемы. читать и понимать коды достаточно хорошо.org. В зависимости от квалификации группы следует определить истинный уровень сложности. когда точно известен уровень дизайна и технические требования. например Adobe GoLive. Координирование веб-производства требует способности и опыта. Не расширился ли масштаб? Не вышел ли проект за рамки бюджета? Получен ли основной контент? И полностью ли готова проектная группа к предстоящим задачам производства? 205 ПОДГОТОВКА > Оценка состояния проекта > Составление рекомендаций > Формирование файловой структуры Именно в начале производственной фазы следует осознать важный факт: Сеть управляется HTML. дополнительное создание сценариев и/или применение DHTML. http://openlib. Это предполагает умение вручную кодировать страницы или. если создается сайт брошюрного типа с 20-40 страницами и несложными сценариями на JavaScript. то есть потребуются люди. вероятно. что кто-то в проектной группе владеет процессом создания HTML: либо путем чистого ручного кодирования с использованием ВВЕdit. чтобы отлаживать HTML и решать проблемы в ходе производственного процесса. Homesite компании Allaire или чего-то подобного. Если же сайт сложнее . который может представлять производство сайта. либо с помощью редакторов WYSIWYG. найдите кого-то. Очень важный вопрос: каков уровень его навыков? Взвесьте вновь возможности группы производства HTML теперь. кто может это сделать.Фаза 4: Производство и контроль качества Оценка состояния проекта Прежде чем фактически начать производство. можно справиться с этим. прибегнув к помощи редакторов WYSIWYG. Надо полагать. а если затрудняетесь сами произвести оценку. . Macromedia Dreamweaver или Microsoft FrontPage. очень хорошо владеющие HTML. Например. выберите момент для оценки состояния проекта.громоздкие таблицы и/или фреймы. то.ua/ . по крайней мере.

Их следует получить и проанализировать еще до того. Следует решить сложные вопросы относительно серверов. технологии (плагины. привычки пользователей). Например.x на возможность использования некоторых функциональных возможностей или как повлияет выбор Flash на возможность поддержки пользователей с модемной связью и так далее.206 Глава б И до того как приступить непосредственно к кодированию. рабочую таблицу на следующей странице). Ведомость клиентских технических требований можно загрузить с ivww. скорость связи). Вы специалисты. Она длинная. как заполнение этой таблицы. которые. потребности внутреннего программирования) и цели редизайна (размер загрузки. подробная и имеет технический характер. необходимы. Ведомость клиентских технических требований определяет характеристики возможностей аудитории и технических стандартов для сайта. В общей сложности она состоит из пяти частей: Часть 1: Целевые спецификации Часть 2: Функциональность и особенности Часть 3: Дизайн и размещение Часть 4: Установки файловой структуры и каталогов Часть 5: Сервер и данные о хостинге Прежде чем приступить к производству HTML. Ваша цель? Никакого неверного толкования возможностей пользователя или целей проекта. как визуаль- http://openlib. показаны только первые две части: «Целевые спецификации» и «Функциональность и особенности» (см. были оставлены до этой фазы. Они обсуждаются с визуальными дизайнерами в начале фазы 3: Визуальное оформление и тестирование. Некоторые объяснения. что может оказаться столь же утомительным. Никакого отслеживания в обратном порядке. Постарайтесь побыстрее получить отзывы клиента. вероятно. руководитель проекта или ведущий производственный дизайнер могут охарактеризовать. Клиент может просто ответить: «Я не знаю.ua/ . Это рабочая таблица. возможно. очень полезно еще раз проанализировать возможности аудитории (броузеры. как отразится выбор поддержки броузеров 3. сценарии. Здесь может помочь ведомость клиентских технических требований.web-redesign. структуры каталогов и специфики производства HTML.com. следует найти ответы еще на ряд вопросов. Кодируйте каждую HTML-страницу только один раз.org. Из-за ее размера она не приведена в книге полностью. Составление рекомендаций Составление еще при подготовке проекта веб-редизайна четких рекомендаций для производства HTML помогает найти ответы на вопросы и избежать дорогостоящего отступления назад. размеры экранов. вы объясните мне».

Запланированный масштаб сталкивается с реальностью Запланированные 100 часов могут легко вырасти в 300. оговаривались или нет с клиентом возможные http://openlib. После заполнения верните ее. поскольку результаты ее анализа будут служить для производства руководством. например в книге Ардис Ибанез (Ardith Ibanez) и Натали Зи (Natalie Zee) «HTML Artistry: More Than Code». и уж конечно до того. Планировалось 50 страниц. предложения или уточнения.. New Riders. о самой теории кодирования или создания сложных сценариев.. руководителю проектной группы. или сократить распределенное по задачам время. в ней не идет речь о кодировании HTML.подробные ответы на все вопросы. функциональности и существующей файловой структуры. New Riders. Попросите клиента ставить пометку «Не известно» рядом с несущественными пунктами и указать области. Ведущий дизайнер производства HTML обязательно должен быть контактным лицом группы. 1998 или в книге Линды Вейнман (Lynda Weinman) «Creative HTML Design.за счет разбухания или в результате требуемых клиентом изменений и добавлений? Если так. В фазе 1: Определение проекта на основании предполагаемого масштаба был оценен бюджет проекта. или терпеть убытки. Здесь обсуждается технология процесса редизайна и то. включая конкретные вопросы относительно сетевых возможностей целевой аудитории. Рабочая таблица на следующих страницах поможет отразить и установить технические параметры редизайна сайта. если сложность сайта была недооценена.org. Независимо от того. Руководство по практическому ручному кодированию ищите в альтернативных источниках. в которых необходимы советы. или пока еще укладываетесь? Проверьте. 207 Навыки в HTML Хотя эта глава касается HTML.или его ключевых технических специалистов .ua/ . 2». версий броузера. 2001. «высеченным на камне». вам потребуется или увеличить бюджет. Не возрос ли объем работ . К заполнению этой ведомости следует отнестись очень серьезно. добавляя по мере необходимости дополнительные комментарии.Фаза 4: Производство и контроль качества ные дизайнеры начнут разрабатывать концепции. пожалуйста. а может не быть знатоком по технической части. что относится к фактическому производству сайта: обеспечение гладкого выполнения проекта в рамках графика работ и бкщжета. как дизайнеры производства начнут формировать протосайт. а получилось 120. руководитель проекта может быть. Постарайтесь получить от клиента .

http://openlib.com.208 Глава б Целиком эту рабочую таблицу (все 5 частей) можно загрузить с www.web-redesign.org.ua/ .

Фаза 4: Производство и контроль качества (QA) 209 http://openlib.org.ua/ .

Целиком эту рабочую таблицу (все 5 частей) можно загрузить с www.com.web-redesign.ua/ .org. http://openlib.

Фаза 4: Производство и контроль качества 211 http://openlib.ua/ .org.

будучи интегратором дизайна и инженерных разработок. который служит руководством для каждого.ключ к успеху веб-проекта. который выглядит и работает одинаково для каждого пользователя. . Узнав ее. скоростей связи и разрешений мониторов этой цели почти невозможно достичь. что важна только целевая аудитория и никто более. При надлежащем использовании ведомость клиентских технических требований чрез- http://openlib. Это не означает. программиста и инженера производства. чтобы сделать сайт как можно более совершенным для целевой аудитории и в то же время приемлемым и функциональным для всех остальных. принимаемые в ходе производственного процесса. в которой отражены эти аспекты. но следует способствовать приоритетам клиента.а сразу устанавливает некоторые необходимые требования к сайту и определяет возможные ограничения.212 Глава б Чэд Кэссирер (Chad Kassirer) о понимании клиента до начала кодирования Хорошее понимание клиента . Во время этого обсуждения перед выбором желаемого клиентом направления можно выяснить его ожидания и предпочтения и внести их в ведомость клиентских технических требований. Однако при наличии многочисленных возможных комбинаций платформ. Он не только помогает во всех фазах процесса — от информационной архитектуры до дизайна для производства. Для выбо- ра лучшего способа дизайна и формирования веб-сайта необходимо изучить целевую аудиторию.org. В идеале этот документ готовится вскоре после начала практических работ над проектом. Создать веб-сайт. В решении этой задачи я полагаюсь на ведомость клиентских технических требований. До начала процесса производства важно прийти к согласию и получить одобрение по двум аспектам: составу целевой аудитории и ожиданиям клиента в отношении деталей производства сайта. Руководитель производства. Более реалистичная цель состоит в том. При обсуждениях в начале проекта диалог идет между производством и клиентом. можно лучше приспособить сайт к потребностям именно этой аудитории.ua/ . а потом уже думать о других пользователях.цель каждого веб-дизайнера. Благодаря этому имеется один центральный документ. Эти приоритеты будут ориентировать все решения. . броузеров. кто включен в процесс создания сайта. использует этот документ как справочный материал для принятия решений на этапах дизайна и производства.

Используя ведомость клиентских технических требований 213 как справочное пособие. можно формировать сайт. которые вызывают лишние задержки и срыв планов. на который можно сослаться при необходимости (например. Я рекомендую использовать ведомость клиентских технических требований буквально с первых шагов. Georgia Revealed (One World Journey) и Making Sense of Modern Art (SFMOMA). http://openlib. Она отражает и проясняет каждому. В случае изменений требований или ожиданий клиента ведомость клиентских технических требований может служить контрактом.Фаза 4: Производство и контроль качества (QA) вычаино полезна и экономит время и деньги. помогающее принимать решения на всем протяжении работ над проектом.ua/ . каковы начальные цели проекта. при обсуждении дополнительных затрат). таких как Splatterpunk (Adobe).org. даже если в ходе работ произведены изменения. кто это делает. Как ответственный за производство отделов веб-разработки компаний Red Eye Digital Media u Idea Integration/Сан-Франциско Чэд Кэссирер (www. Чэд не выступал на веб-конференциях и не писал книг. но он знает тех. устраняя неясности.whatdesign. не забывая о клиенте.com) сыграл ведущую роль в процессе производства многих отмеченных наградами веб-сайтов.

часто является одним из туманных вопросов в оценке проекта. Воспользуйтесь в качестве руководства ведомостью клиентских технических требований.Глава б 214 изменения бюджета. если неизвестны технические параметры: целевые операционные системы. прежде чем приступите к программированию. Сколько из распределенного времени и ресурсов уже исчерпано? Укладываетесь ли вы в бюджет? Увеличился ли масштаб? Достаточно ли осталось бюджетного времени. а также время. формы. сколько времени и ресурсов требуется для завершения производства сайта и проверки качества (QA). что не полностью. всплывающие окна. сделайте это теперь. План его поставки был http://openlib.org. Создаваемый сайт должен учитывать возможности целевой аудитории. Следите за временем на всем протяжении проекта. И не забудьте учесть ресурсы для контроля качества (QA). вовсе не таковы и займут гораздо больше времени. необходимое для устранения неполадок. Кодирование HTML-страницы или шаблона может отнять несколько часов или несколько дней . Делайте это еженедельно. динамика на JavaScript. Что из этого планировалось сразу? Что собираетесь включить теперь? Совпадают ли эти намерения? Внутренние разработки Укладываются ли инженеры в рамки бюджета/графика работ? Адекватно ли были определены потребности во внутренних разработках и отвечают ли они на данный момент предполагаемому масштабу/стоимости? Пересмотр возможностей аудитории Ориентируйтесь на пользователей. Обязательно нужно следить за готовностью контента. чем ожидалось.ua/ . Жестокая правда? Большинство вещей. тогда оценка будет относительно несложной. который чрезвычайно трудно оценить правильно до начала фактического производства. чтобы спокойно завершить работы? Знание. вызывающих разбухание проекта. МАСШТАБ: УКЛАДЫВАЕТЕСЬ ЛИ ВЫ? Карта сайта Сложности визуального I проектирования Насколько велик сайт? Сколько страниц? Соответствует ли это запланированному? Стала ли разрезка файлов на части ночным кошмаром или прошла достаточно гладко? Необходимость создания облегченных сценариев DHTML. выпадающие меню и так далее. Проверка состояния контента Содержимое должно быть уже получено. фреймы. броузеры. поэтому нельзя преобразовывать визуальный дизайн в HTML.это один из факторов. Но есть вероятность. которые кажутся простыми. мониторы и скорости связи.

если навигационные средРис. введенный Консорциумом Всемирной сети (www.org/bobbyj . 6. Section 508 Accessibility Suite для Dreamweaver 4 и Dreamweaver UltraDev 4.Фаза 4: Производство и контроль качества (QA) 215 Учет доступности Представьте.com/macromedia/index. позволяет проверять веб-сайты на доступность таким же образом. Bobby (www. ADA) нацелены на обеспечение полного доступа к веб-сайтам.htm).1. 6. которые сообщит. Этот снимок экрана показывает реницы.cast. вы Approved» ) появляется. Бобби. и Bobby определит области. Введите URL. требованиям стандартов ADA.позволит избежать авральных работ в дальнейшем (например.2). кто использует старые броузеры или устаревшие технологии. который не поддерживает графику. 6. ют проверить доступность http://openlib. Отчет можно получить для одной страницы. хотя вовремя это можно было сделать один раз в шаблоне HTML).org). который мгновенно оценивает веб-страРис. что ваш единственный доступ в Сеть через броузер. созданный UsableNet (рис.3).особенно если сайт должен подчиняться стандартам по доступности .1 и 6. кодирования ALT-тегов на 100 страницах. Рис. Это расширение.З. Если сайт не соНедавняя поддержка правительства и новые станответствует этим стандартам. имеет своей целью позволить подключаться к Сети всем людям независимо от их ограниченных возможностей. уровень 1. не одобряет его и перечисляет обнаруженные ошибки и предложения по их устранению ченными возможностями (Accessibility with Disabilities Act.net и Macromedia сообща помогавыбранных разделов или любого каталога. включая тех.2. которые помогут проверить сайт на доступность после его запуска: Bobby и Macromedia Section 508 Accessibility Suite.w3c. что веб-контент соответствует рекомендации W3C/WAI. Этот новый набор стандартов. и тельные знаки указывают на области. всего сайта. доступное бесплатно на Macromedia Exchange (www. все ли изображения имеют соответствуюили не соответствуют стандартам ADA. поможет убедиться. 6. Войдите на любой сайт .ua/ . Пиктограмма «ОдобреноБобби» («Bobby ства и кнопки не имеют описательных ALT-тегов.интерактивный инструмент. а резульпросто могут быть улучшены таты могут просто удивить вас (рис. Вопроситорые не соответствуют стандарту доступности. Это быстро и впечатляюще. 6. естестдарты Акта о доступности для людей с огранивенно. раздел 508. как документы проверяются на наличие грамматических ошибок. козультаты запуска URL через Бобби. Usable.org.usablenet. если сайт отвечает всем не сумеете различить изображения между собой. или щие ALT-теги. Понимание значимости требования доступности перед началом кодирования . Есть два бесплатных инструмента.

. «. а затем дизайнерам производства необходимо разобраться с шаблонами HTML. Будьте готовы к этому. Но что делать. Первая часть контента была поставлена уже к концу недели. Ниже приводится выдержка из письма. что время подошло и контент пора «замораживать». а производство срывается? После нескольких мягких напоминаний по телефону или электронной почте пошлите фирме все еще дипломатичную электронную почту. В ходе фазы 3 визуальные дизайнеры встречались с дизайнерами производства.ua/ . Если вы обнаружите. что крайние сроки пролетают. Как объяснялось выше. http://openlib. JavaScript и/или чистого HTML. чтобы графические файлы передавались поэтапно: сначала главная страница и представительская подстраница. Опоздание и последствия Контент опоздает. чтобы убедиться в технической осуществимости своих задумок с помощью Flash. Они задерживают производство. а также на дополнительную работу по производству сайта. Мы понимаем. Ко времени первой поставки графических шаблонов от визуальных дизайнеров в производство должны быть решены такие вопросы. Составьте график поставки. если клиент заблаговременно предупрежден о такой возможности. и это время быстро утекает. в котором говорится о произошедшей задержке контента и ее последствиях.org. это затормозит производство и начнутся перерасходы. Предъявление счетов за перерасходы всегда протекает небезболезненно. если по- ставка контента будет задерживаться далее. прежде чем выпускать остальные страницы. были ясно обрисованы финансовые последствия: была объявлена ставка платежа за кажД Ы й день задержки контента. Предупредите клиента. DHTML. подробности и стоимость каждого последующего дня задержки контента. что ваш бюджет строго ограничен и вы не захотите нести лишние расходы без крайней необходимости.» Кроме того... это известно. Эффект был разительным. мы распределили ресурсы для выполнения проекта на строго определенный период времени. одобрены и готовы для передачи в производство? Если нет. но это будет гораздо более осуществимо.для уточнения мы выявили некоторые дополнительные расходы на добавление анимационной демо-версии продукта. как проектируемый объем загрузки (в Кбайт) и потенциально возможный объем оптимизации.. устанавливающую новые сроки поставки. Проверка состояния дизайна Готовы ли графические шаблоны: завершены.216 Глава б четок: содержимое должно быть готово до начала производства HTML. и дальше проект гладко прошел через запуск. примените эту методику (с опозданием и последствиями) в своем проекте. что если с контентом будут задержки. В самом начале работ над проектом заявите клиенту. когда заветный срок прошел. поторопите визуальных дизайнеров. содержимое опаздывает официально.

Фактически файловая структура это простое. Сайт содержит также стандартные страницы HTML. Java. но важное поддержание порядка. В ведомости клиентских технических требований есть вопрос по поводу того.4 и 6. Пересмотрите все технические спецификации..прекрасный повод расставить все по местам. как поступить при редизайне с существующей системой именований HTML-страниц и существующей файловой структурой. у которых знаний достаточно только для того.Фаза 4: Производство и контроль качества 217 Уточнение плана интеграции с внутренним интерфейсом Сайт. различные стратегии отвечают разным целям (рис. подтвердите план интеграции и уточните обязанности. который вы перепроектируете. с архитектурой сайта (фаза 2: Разработка структуры сайта). то почему? Какое бы решение ни было принято в итоге.htm.ua/ . оно должно отвечать целям редизаина и последующей эксплуатационной поддержки (например. обычно используют расширения .) Хотя не существует общепризнанно лучшего способа организации файловой структуры сайта. Желает ли клиент оставить все как есть. Наверняка структура HTML старого сайта в беспорядке: дублированные файлы. чтобы сделать их самих опасными.html или .. до фактического начала производства запланируйте встречу с техническими специалистами и еще раз обсудите вопросы связи внутреннего и внешнего интерфейсов. рассеянные по разным каталогам. и если так. Редизайн . обычно собирая конкретную информацию из различных мест.org.5). Perl). (Это особенно важно для проектов с многочисленной командой. этот раздел вам не потребуется. Сфор- http://openlib. старые версии файлов все еще на сервере. статический или динамический? Если статический и нет потребности во взаимодействии с внутренней технической группой. БЫСТРАЯ СПРАВКА: СТАТИЧЕСКИЙ или ДИНАМИЧЕСКИЙ Статический сайт: только внешний интерфейс Предварительно полностью подготовленые страницы просматриваются в броузере по ссылке на них. Формирование файловой структуры Структура файлов часто путается новичками и клиентами. легче оставаться организованным. Начав организованно. например из базы данных. Для возможности заполнения динамическим содержимым к HTML-страницам может быть добавлен дополнительный код (ASP. изображения. так что сделайте это приоритетом. Динамический сайт: команды внешнего и внутреннего интерфейсов Страницы создаются сервером «на лету». как планируется добавлять и архивировать содержимое сайта после запуска). Однако если сайт динамический. 6.

org.5.5 . Выбор стратегии зависит только от индивидуальных предпочтений http://openlib. Две структуры с различными стратегиями.4 изображения размещены в корневом каталоге. 6. 6.4. 6. 6. На рис.в каталоге текущего месяца.ua/ . Puc. а на рис.218 Глава б Puc.

Соответствует ли структура каталогов организационной структуре контента? 3. включая логичный архив устаревшего контента. рассчитанная на рост и регулярное обновление. Например.постоянное явление во время передачи сайта после запуска на обслуживание новой группе. При создании файловой структуры следует учесть некоторые клиентские предпочтения. и включите в руководство по стилю оформления инструкцию по работе с каталогами файлов: как архивировать или добавлять страницы. но вряд ли. что она в значительной степени зависит от предположений клиента относительно роста и развития перепроектированного сайта. очень поможет противостоять почти неизбежному ухудшению организации сайта. следует ли реорганизовывать существующие файлы и существующую структуру файлов или лучше начинать на пустом месте? Как часто будут производиться обновления? Ежедневно? Ежеквартально? В ведомости клиентских технических требований есть эти вопросы. Сформированная структура файлов.Как организована текущая структура каталогов и есть ли у клиента причина для такого метода? 2. скорее всего. Создайте подкаталоги. нет. Тем не менее.ua/ . про- http://openlib. которые будут понятны эксплуатационной группе после запуска сайта. е. Цель? Четкость. т. но. Клиент хотя бы понимает это? Возможно.Фаза 4: Производство и контроль качества мируйте логичную. масштабируемость. организованность и возможность расширения структуры. добавление контента. Будут ли изображения помещаться в корневой каталог или в отдельные папки? При определении файловой структуры имейте в виду. Важный вопрос: заботит ли это клиента? Возможно. Дезорганизация и суматоха . Файловая структура и масштабируемость Какой рост (увеличение трафика. План формируемой файловой структуры должен соответствовать будущему техническому обслуживанию. удобную в поддержании структуру файлов для перепроектированного сайта.org. новые продукты) ожидается в первый год после запуска? Планируете ли вы добавлять новые разделы? В каком направлении они будут расти? По времени? По темам? 219 Три вопроса по файловой структуре 1.

основное средство для компоновки информации на странице. 6.7) и оптимизацию отдельных частей (рис. что иногда. Цель? Быть масштабируемыми.6) преобразуются (разрезаются на части и оптимизируются) в элементы HTML (графические объекты) таким образом. Оставаться организованными. КОМПОНОВКА > Разрезание на части и оптимизация > Создание HTML-шаблонов и страниц > Применение облегченных сценариев > Заполнение страниц > Интеграция с внутренними разработками (если нужно) Разрезание на части и оптимизация Проверив всю информацию (этап подготовки в этой фазе) и убедившись. В качестве превосходного пособия с практическими рекомендациями можно использовать книгу Линды Вейнман (Lynda Weinman) «Designing Web Graphics. http://openlib. можно всерьез перейти к производству HTML и начинать компоновку. Заметьте.3» (Дизайн веб-графики. позволяющие сконструировать таблицы HTML . когда напряженно с бюджетом и ресурсами. Умелая оптимизация должна быть главным приоритетом. и визуальным дизайном и производством HTML может заниматься один человек.8). когда варианты визуального дизайна еще не завершены и не одобрены.org. New Riders. что проект редизайна продвигается по плану. чтобы убедиться. Визуальные дизайнеры должны тесно сотрудничать с группой производства HTML. дизайнеры производства осуществляют их фактическое разрезание на части (рис. 3). во время разработки дизайна. их следует показать производственной группе. 6. После того как файлы Photoshop/Fireworks приведены в надлежащее состояние. чтобы определить лучшие способы разбиения графических шаблонов на части.220 Глава б диктованная клиентом или сформированная проектной группой файловая структура должна быть ответом на предшествующие вопросы. чтобы их можно было снова сложить вместе (воссоединить и закодировать). На этом этапе производства графические шаблоны (рис. 1999. что файлы могут быть разрезаны и оптимизированы в соответствии с требованиями целевой аудитории клиентов к объему загрузки.ua/ . 6. До фазы производства.

6. Графические шаблоны разделяются на части и разрезаются в программах Fireworks или Photoshop.org передан дизайнерами в производство в виде многослойного файла Photoshop или Fireworks.6. 6. Графический шаблон для www. Фоновый рисунок до и после оптимизации в Fireworks. Этот файл содержит все элементы страницы. Здесь показано выпадающее меню при нахождении указателя мыша над ним (состояние «on» ) Puc. 6. в том числе все состояния динамических элементов . Размер файла уменьшен до 16 Кбайт убавлением количества цветов в формате GIF http://openlib. Ясно различимые слои соответствуют состояниям on/off/ over или выноскам DHTML Рис.Фаза 4: Производство и контроль качества 221 Рис.diverseworks.org.ua/ .8.7.каждое в отдельном слое.

позволяющая регистрировать прием и сдачу файлов. а также каталог файлов (каркас дома). Глава б Создание шаблонов и страниц HTML Если формирование веб-сайта сравнить со строительством дома. как первоначальный графический шаблон. использование шрифтов. В Dreamweaver 4 есть удобная опция. подготовленный визуальным дизайнером. Разрезать на части гл. который четко передает всю информацию. вырезанных и оптимизированных из графического шаблона.и TITLE-тегов и так далее. Визуально соответствует графическому шаблону. После этого можно заполнять страницы (обставлять дом мебелью).org. Возьмите оптимизированную графику. водопровод и прочие атрибуты). такие как SourceSafe. приближаясь к запуску сайта (к новоселью). Склеивать гл. которая формируется дизайнерами производства путем воссоединения всех элементов. COMMENT. то на данном этапе есть графика и контент (строительные материалы). Если над HTML работают более двух человек.222 Контроль над версиями Старайтесь. Такая неосведомленность обычно приводит к потраченному впустую времени. Создав шаблоны. структура таблиц. когда с ними работают. для увеличения эффективности полезно договориться о способе контроля над версиями. чтобы предотвратить одновременное редактирование файла несколькими членами группы. обработка ALT-. такие как навигация. которые получаются из них (это стены комнат дома). следует включить в них облегченные сценарии (электропроводка. оптимизации и кодирования он превращается в страницу HTML Шаблон HTML (называемый также HTML-оболочкой) сущ. Первый HTML-шаблон устанавливает глобальные стандарты. перезаписанным файлам и потерянной работе. предназначенная быть отдельным изображением (обычно GIF или JPG). содержащий неотрендеренный.ua/ . 1. 2. (Используется в производстве HTML для создания в дальнейшем файлов с помощью команды Save As. Выделенная часть файла Photoshop или Fireworks. чтобы всем. было понятно. Теперь можно формировать HTML-шаблоны и страницы (без содержимого). чтобы при просмотре в броузере файл выглядел. редактируемый текст. Не имеющая конкретного содержимого HTML-страница. вырезанную из графического шаблона. Оптимизированные файлы сохраняются обычно в формате GIF или JPG. кто имеет доступ к активным HTML-файлам. Разделить графический шаблон (или часть шаблона) на два или более изображений (обычно GIF или JPG). http://openlib. которые нужно включить (в том числе необходимые облегченные сценарии.или JPGизображения при помощи HTML таким образом. сущ. необходимую для отражения дизайна в HTML После разрезки графического шаблона на части. Бесшовно сращивать GIF. их создание обсуждается Несколько определений для непосвященных Графический шаблон сущ.) Оптимизировать гл. В этом могут помочь также программы сторонних разработчиков. Perforce и WebDAV. добавьте другие элементы. Сжимать изображение или код до минимально возможного размера файла с целью сокращения времени загрузки. Многослойный цифровой файл (обычно Photoshop или Fireworks). Подготовить для использования в Сети.

по сути. конец фазы 3).ua/ . Сохраните копию этого шаблона как страницу . Если он окажется с изъянами. и на PC. его дефекты перенесутся на все созданные на его основе страницы. это. которая проводится позже в этой фазе (на этапе тестирования). дизайнеры производства должны твердо придерживаться визуальных стандартов.Фаза 4: Производство и контроль качества 223 дальше в этой главе). что графический шаблон нормально преобразовывается. Здесь показан пример с сайта www. и встройте их в HTML.org. продолжайте проверять страницы и шаблоны на всех броузерах. Поскольку формируются шаблоны HTML. Заметьте. которые использует большая часть аудитории. просто стандартная процедура производственного дизайна. возможно. 6. Рис. Крупные графические элементы часто разрезают на части для облегчения их загрузки. Эти страницы теперь можно связывать и проверять. на которых будут основаны страницы сайта.com: работающая нормальная таблица (слева) и она же во время отладки перед проверкой качества (QA) http://openlib. что эта проверка не считается проверкой качества (QA). 6. Эта новая страница (больше уже не шаблон) становится предполагаемой страницей сайта и готова к заполнению содержимым: статическим или динамическим. Проверьте начальный(е) HTMLфайл(ы) на различных броузерах и платформах. установленных на фазе дизайна и внесенных в руководство по стилю оформления (см. Убедитесь. работаете. Остерегайтесь искажения таблиц. на компьютерах Мае. выявляющая ошибки. которые не будут устранены здесь.9. Этот файл будет служить основой. на которых вы.flyingsparkfurniture. До проверки качества (QA).первую из многих. а таблицы HTML не развалились (рис.9).

С совершенствованием программного обеспечения реализация облегченных сценариев и специальных возможностей (в частности. Термин «облегченные» означает. 6. . Те.) Заново загрузить каждую страницу. выпадающие меню. Это не должно удивлять. закодированный и сохраняемый отдельно. Вместо включения повторяющегося кода в каждую страницу просто ссылаются на внешний файл. смена изображений. который сохраняется на сервере отдельно от страницы HTML.это текстовый фрагмент. JavaScript-включение . Сформировать включение. 3. превращается в такую гигантскую работу (особенно для сайта с сотнями страниц). 2. да.10). что позволяет редактировать его лишь в одном месте. Это скорее стандартные функциональные возможности. только не требующий внутренней базы данных.это свойство атрибута «src» (индикатор источника). Вручную открыть и отредактировать каждую страницу (требует времени). требующего плагинов) становится все проще и проще.. Сделайте выбор: стоит ли облегчение модификаций четверти секунды загрузки? Вероятно. Заново загрузить каждую страницу. фреймы. без которого обслуживание старого сайта было проблемой. кто использовал Fireworks для разрезки на слои и оптимизации графических шаблонов. но следует взвесить. но применяемый глобально. такие как MouseOvers и Swaplmages. могли подключить простые режимы. нечто подобное атрибуту src IMG-тега (индикатор изображения). например изменение нижнего колонтитула с авторскими правами. При формировании сайта иногда приходится иметь дело с повторяющимися вещами . He требуется никаких вложенных фреймов. Сделать глобальный поиск и замену с помощью редактора HTML (Это предполагает. Заново загрузить только одну страницу.. по крайней мере.на всем сайте или. Следует отметить.битами кода. что использование включений несколько замедляет загрузку.это повторение функциональности. мультимедиа. Как вы изменяете год на каждой странице? Можно воспользоваться одним из следующих способов: 1.то. которую просто так не сделать. Если экспортировать HTML-файл прямо Включение включений Разве одна из причин редизайна сайта . Это код. В некотором роде включение . формы.org.ua/ . встречающиеся на всех сайтах. включение включений упростит будущее производство и явится большим достоинством редизайна.все это результаты облегченных сценариев. на большинстве страниц. Создание облегченных сценариев не следует путать с Java.224 Глава б Применение облегченных сценариев Динамическое изменение. который можно легко позаимствовать и слегка модифицировать в соответствии с потребностями своего сайта. ASP или CGI. при оптимизации и экспорте файлов. что потребует лишь некоторого понимания программирования. что он стал громоздким для обслуживания? Иногда простая текущая задача.почти динамический элемент. Возьмем общий пример: вышеупомянутый нижний колонтитул с авторскими правами. что нет никаких вариаций и что оригинальный текст везде один и тот же. Включение (include) . Так или иначе. что вы прекрасно можете закодировать их сами с использованием элементарного JavaScript. Включение . всплывающие окна. верхними и нижними колонтитулами и так далее . http://openlib. например динамическое изменение (рис.

и некоторые броузеры 4. developer. Да. ответственность за размер файла лежит на дизайнерах. Придумывайте способы. www.0 также испытывают трудности с ними. Есть очень много возможностей найти готовые коды.diverseworks. который изменяется. но не оставляйте устранение дефектов на этот момент. Проверьте все включенные функциональные возможности в необходимых броузерах и сверьте с возможностями вашей аудитории. Слишком большой? Вернитесь и оптимизируйте снова. 6.Фаза 4: Производство и контроль качества из графического шаблона. На главной странице www. Местонахождения указателя мыши для этого изображения (над изображением и вне его) определены в палитре слоев графического шаблона DHTML .com.ua/ . При использовании CSS можно определить набор атрибутов.javascript.это сочетание JavaScript с каскадными таблицами стилей (CSS) для манипулирования HTML Это позволяет независимо управлять каждым из множественных уровней HTML. дать ему имя. иначе пользователи с броузерами. Поищите.org. CSS выполнят эту задачу гораздо быстрее. и вы получили «законченный» фрагмент. Это относится не только к размеру включенной графики. Есть общая цель.builder. 667 http://openlib. будут видеть искаженный дизайн. 8 Зак. проверяйте и проверяйте. не поддерживающими GSS.Каскадные таблицы стилей и DHTML Рис. Добавьте анализаторы и переадресацию броузеров. предстоит еще контроль качества (QA). Подгоняйте. а затем ссылаться на него. файлы QuickTime или Flash.org динамическое изменение представляет собой размытый крупный план иллюстрации. На данном этапе включите в свою технологию все созданные сценарии. Если требуется изменить цвет всех заголовков.com. В настоящее время при использовании CSS приходится делать двойную работу . Ищите ошибки. становясь четким. Позаимствуйте JavaScript с любого из следующих сайтов: www.значит лучше Да.создавать два параллельных сайта.0 не поддерживают OSS. К сожалению.netscape.com. включенных в отдельные слои.com. броузеры 3.scriptworld. Проверяйте.10. следует принимать во внимание размер и HTML (исходных кодов) и любых иных программных элементов. где можно сбросить несколько байт. www. многое для облегченного сценария уже будет сделано. 225 Меньше .

неграфических броузеров типа Lynx или специальных броузеров для людей с ограниченными возможностями. Я креативный директор A List Apart. . усовершенствование дизайна и создание дополнительных функциональных возможностей. что сдать клиенту и забыть. цветовую схему. создающих веб-сайты (www. которые облегчают истинное разделение дизайна и содержимого. www. что дизайн отражен в одном месте (например.все они смогут теперь наслаждаться полным доступом к контенту сайта. HTML 4. не говоря уже о дополнительных часах на тестирование в броузерах и отладку. если шаблон всего сайта (или раздела сайта) содержится в единственном CSS-документе. . С отделением стиля оформления от содержимого не придется создавать дополнительные версии целых сайтов.в другом (например. При полной поддержке веб-стандартов. Требуется изменить фоновый рисунок. еженедельного онлайнового журнала для людей. XML и др. Даже с изощренными редакторами HTML на это уйдут часы или дни мартышкиного труда. чтобы поддержать этих пользователей (сам по себе дорогой и отнимающий много времени процесс). то ваш сайт больше не будет закрыт для людей. изощренные ходы и обходные пути можно использовать их на улучшение контента. Palm Pilots.com). ширину отступов. размер текста. количество бессмысленных и повторяющихся задач резко сократится и больше пользователей получат доступ к нашим сайтам.к этому надо стремиться. то я также постоянно.webstandards. редизайн не будет сверхзадачей. Что это означает? Это означает..226 Глава б Джеффри Зельдман (Jeffrey Zeldman) о веб-стандартах Написать однажды и использовать всюду .CSS.ua/ . Не удастся. С этой целью проект веб-стандартов (Web Standards Project.alistapart. шрифты и/или интерлиньяж? Отредактируйте один CSS-документ. Во-вторых. и весь сайт (или раздел) тут же предстанет в новом свете.и поскольку сам обновляю содержимое каждую неделю. использующих нетра- диционные броузеры.org) призвал изготовителей броузеров поддержать ряд основных стандартов . в каскадных таблицах стилей. http://openlib. в большей или меньшей степени. просто надо будет добавить одно-два правила к таблице стилей. CSS). Попробуйте добиться этого с традиционным «HTML как инструмент дизайна». Будь это обладатели мобильных телефонов. Вместо траты нашего времени и денег клиентов на альтернативные версии. имея меньше проблем. в документах HTML или XHTML или в базе данных с записями в XML-формате). Поскольку я контролирую сайт . подчиненных очень важной идее: разделению стиля и содержимого. а содержимое . если можно отделить дизайн от данных.это не то. наша работа станет легче. Зачем это необходимо веб-дизайнерам? Для чего отделять дизайн от данных? Вопервых.org.

Джеффри Зельдман (www. Это суровое испытание. вооруженные стандартами XML. как это было. Это. но при 10% читателей. Получается редизайн по нисходящей к тому. я не могу по-настоящему двигаться вперед.Фаза 4: Производство и контроль качества (QA) модернизирую дизайн сайта и пользовательские маршруты. тогда будущие редизайны займут минуты вместо часов.com).0) для размещения дизайна я все еще мучаюсь с HTML-таблицами. постоянство его образа и поток посетителей улетучиваются прямо на глазах. PDN-Pix Magazine и Creativity. а также учредителем Happy Cog .ua/ . возникает археологический эффект.zeldman. чем вы только что читали. но из-за ограничений текущих броузеров (особенно броузеров 4. Для управления оформлением я использую CSS. но общая идея сайта. в то время как другая внедряет новые функции. потому что мой стиль и содержимое драматически сцеплены практически нерасторжимым образом. что сотрут работу друг друга. И у меня нет производственного бюджета (сайт независимый и некоммерческий). На практике с дизайном оказывается хитрее. В свободное время Зельдман выступает с докладами на веб-конференциях. является также издателем и креативным директором «A List Apart». я перенесу все размещение в CSS. и обе не беспокоятся. основанный на контенте. пишет публикации в Adobe Web Center. по меньшей мере. борющейся за веб-стандарты. Это потрясающе. и 25% с IE4. Представьте: одна группа занимается редизайном. Когда зарываешься в старых проблемах. Сейчас я пытаюсь делать изменения такого типа. уходят часы. могу ли я автоматически модернизировать остальную часть сайта по ее подобию? Нет. Вообразите более крупные и более интерактивные сайты. автор книги «Taking Your Talent To The Web» у New Riders.основной коалиции. если соответствие стандартам укрепится во всех броузерах и пользователи перейдут на них.org. даже самое ничтожное. потому что каждая страница .веб-агентства Нью-Йорка. http://openlib. еженедельного журнала для веб-разработчиков. соучредителем и руководителем группы The Web Standards Project . вручную закодированных ячеек таблицы. Из-за этого на любое изменение дизайна.скопление глубоко взаимосвязанных. но мы еще до этого не дошли. Это слишком сложно для глобального поиска и замещения. приобретающего известность. 2001. 227 любопытно в историческом плане. В последующие 18 месяцев. CSS и DOM. использующих Netscape 4. оставляя мне больше времени на развитие особенностей сайта и работу с авторами. Когда я наконец доведу одну страницу до требуемой кондиции. Я описал простой сайт. может быть.

или продумайте другой способ контроля за правильным размещением содержимого. но также и потому. Начав заполнять страницы. Финал. когда контент будет заморожен.Глава б 228 Заполнение страниц Контент должен быть готов. а над третьей все еще работают. вероятно. Вместе с ним как с координатором контента в проектной группе используйте план поставки контента в качестве контрольного списка. другая часть скоро подойдет.эти приложения превосходны для первых шагов в веб-дизайне и вполне достаточны для большинства проектов. Ручное программирование почти всегда дает более чистый код. куда идет содержимое? Кто-то. Свежие версии WYSIWYG-редакторов позволяют неискушенным в HTML (дизайнерам и нетехническим членам группы) создавать HTML-страницы с легкостью простого перетаскивания (drag-and-drop). что они часто не позволяют достичь такого высокого уровня. удостоверьтесь. Но кто может помнить (или догадываться). готовых для Сети. если возможно. Укажите дату.используя про1 граммы типа BBEDIT или гибриды типа HomeSite. предлагают не только удобный в работе интерфейс.эко. что содержимое еще будет добавляться даже после его официального замораживания. поступающее после замораживания. а также положитесь на принятые соглашения об именовании файлов. . что кодирование вручную . Кодирование вручную может быть трудоемким и длительным процессом. за это можно потребовать дополнительное финансирование (см. До наступления крайнего срока напомните о нем ответственному за поставку контента по электронной почте. http://openlib. многие программисты избегают WYSIWYG-редакторы не только потому. Но не отказывайтесь и от изучения HTML Это позволит 1 легче справиться с любыми проблемами разработки. чем генерируют WYSIWYG-редакторы. руководитель проекта принял содержимое от клиента.ua/ . . два промышленных WYSIWYG-редактора. которые приходят с высоким уровнем навыков в HTML Для многих из этих проектов дизайнеры производства HTML кодируют каждый тег-так называемое кодирование вручную. что содержимое размещается в соответствующие места.f чаще всего избыточный исходный код. контент продолжит пополняться по каплям.I номия времени. врезку «Опоздание и последствия» ранее в этой главе). из-за задержки контента производственные дизайнеры будут простаивать. Какой бы ни был выбран способ. Если не сделать этого. Но когда HTMLшаблоны созданы и из них сформированы страницы. вызовет разбухание проекта. Хотя WYSIWYG-редакторы имеют свои недостатки . Имейте в виду. то и получите) Говорят. Одно из самых больших преимуществ WYSIWYG-редакторов . какой может быть достигнут вручную. так ли это? Многие проекты требуют знаний и гибкости. Не исключено. Оттяните дату замораживания. И поскольку борцы за чистоту HTML очень требовательны к качеству кодов..исчезающее искусство. что они имеют тенденцию добавлять лишний и иногда громоздкий второстепенный код. а содержимое. Это случается. Adobe GoLive и Macromedia Dreamweaver.org.. что готова только часть содержимого. Замораживание означает прекращение изменений. Предупредите этот момент. ознакомьте с ним всех дизайнеров производ- Кодирование вручную или WYSIWYG (что видите.

не обращаясь к визуальным дизайнерам. которые должны быть графическими.ua/ . В таком случае дизайнеры производства могут сами создавать их. убедитесь. в которых содержимое регулярно изменяется. должна быть включена при формировании страниц из этих шаблонов. Проконсультируйтесь с визуальными дизайнерами и попросите. Убедитесь.org. чтобы не пришлось делать это многократно. Что может быть неприятнее.и TITLE-теги. 229 Контейнеры для содержимого Динамические сайты зачастую имеют выделенные области. встроенный в нужную страницу. Часть невидимого содержимого. МЕТА. Обратите внимание на незапланированное содержимое. что невидимое содержимое подготовлено. 6.Фаза 4: Производство и контроль качества ства. Другая часть. должна быть добавлена на стадии создания HTML-шаблона. которое. В программе Dreamweaver 4 есть удобная форма. Иногда имеется шаблон для заголовков. Обычно это HTML-контейнер. например заголовки (TITLE). подробно опишите в руководстве по стилю оформления HTML. Сохраните его как элемент технологии. не имеет никаких стандартов.11) для клиента. чего не хватает. http://openlib. Точно так же. который будет заполняться динамическим содержимым. Заранее выясните. помогающая выяснить необходимые вопросы перед началом работы со страницей. Невидимое содержимое обычно остается до самого конца или так и забывается на сайте окончательно. включая часто забываемое техническое «невидимое содержимое»: ALT-. что ничего не пропущено и не перепутано. как следует правильно их обновлять. Прежде чем начать процесс кодирования. Если ваш сайт не управляется динамически. Контейнеры для содержимого нуждаются в отдельном рассмотрении. занимающихся заполнением страниц. но имеет области. Скопируйте эту форму (рис. или «контейнеры для содержимого». так как они имеют отношение к интеграции внутреннего и внешнего интерфейсов. «Сегодняшние горячие новости» или сформированный из базы данных список покупок). куда помещается динамически сгенерированное содержимое (например. если встретятся заголовки. чтобы он заполнил ее при поставке контента. поставьте в известность визуальных дизайнеров. например ALT-теги для общих графических элементов типа навигационных элементов. При размещении контента учитывайте и позиции размещения и стандарты стиля HTML-текстов. чем начать работать со страницей или разделом и столкнуться с необходимостью снова возвращаться к ним потом для заполнения пустот. Невидимое содержимое Заполнение страниц требует наличия всего контента. чтобы они сразу же определили стандарт. как правило. установленные визуальными дизайнерами.

устраняя необходимость угадывания. снабженная атрибутом TITLE. что откроется после щелчка по гиперссылке: всплывающее окно с фотографией кота Типи http://openlib. Так или иначе.11.com. дизайнеры производства могут двигаться дальше.12).ua/ .12.org. Puc. добавляя ясность в определение терминов или в использование основных функциональных возможностей (рис. как только принято соглашение об именовании файлов и установлен стиль. Экран метагенераmopa Dreamweaver 4 облегчает создание и внедрение МЕТА-тегову становясь частью технологии Puc. TITLE. 6.атрибуты могут подробнее описать конкретную гиперссылку. 6.нажимать или не нажимать.zeldman. и/или помочь пользователю принять решение . Но ALT-теги имеют большое значение. и это нормально.230 Глава б Клиенту может не требоваться снабжать ALT-тегами все до единого изображения. который быстро и наглядно показывает. Здесь показана простая текстовая гиперссылка на сайте www. 6.

231 Интеграция с внутренними разработками Взаимодействие между группами разработки внутреннего и внешнего интерфейсов и группами производства HTML всегда важно. Как лучше создать HTML-шаблоны для внутренней группы. Там же каждому следует рассмотреть технические спецификации и ведомость клиентских технических требований. включая информационного дизайнера и арт-директора. Здесь необходимо отследить и исправить все недочеты: орфографические ошибки. Понимание важности контроля качества (QA) Сайт сформирован. особенно из-за того. но мы настоятельно рекомендуем не пренебрегать QA. чтобы она могла заняться программированием и подготовкой динамического содержимого? Какое программирование должно быть выполнено на стадии HTML? Какой опыт программирования имеют дизайнеры производства HTML? Какая из групп будет ответственна за вставку кода внутренних разработок в страницы HTML? Какова хронологическая последовательность интеграции? Что в шаблонах будет делать каждая группа? В такой встрече обычно участвуют руководители проектов или ведущие специалисты обеих групп. Контроль качества . осиротевшие и некорректные гиперссылки. теперь убедитесь. что на некоторые внутренние разработки могут требоваться месяцы. но на данном этапе процесса оно становится критически важным. 6. что он работает. Но еще более важной задачей является отыскание http://openlib. Рекомендуется отвести в бюджете на контроль качества приблизительно 10% от общего времени и ресурсов. Однако еще в начале фазы производства следует собрать вместе и тех и других специалистов и разработать план интеграции и взаимодействия.ua/ . в то время как в разработках внешнего интерфейса счет идет на недели.один из наиболее часто пропускаемых шагов (помимо юзабилити-тестирования) в веб-разработках.13). Очень многие проекты страдают от отсутствия последовательного взаимодействия. Для интеграции внутреннего и внешнего интерфейсов логичный момент в технологии наступает сразу после завершения компоновки HTML-страниц.org. Массовые представления не могут обходиться без генеральной репетиции со звуком и полной иллюминацией. точно так же сайт не следует запускать без всестороннего просмотра. неправильно расположенное содержимое и так далее (рис.Фаза 4: Производство и контроль качества .

все. а затем повторная проверка перед запуском сайта. Примером более серьезной ошибки могло бы служить искажение выпадающего меню DHTML в некоторых броузерах (это труднее проиллюстрировать) http://openlib. Типичный простой дефект: не загружается изображение (вверху).org. 6. сбои броузера . Рис. как искаженные таблицы. А при наличии доступа к клиентскому серверу не помешает провести QA и сразу после запуска. что не отвечает спецификации. функциональные ошибки.ua/ . Быстрая проверка каталогов и перезагрузка изображения решили проблему (внизу). Для устранения этих дефектов требуется время.232 Глава б и устранение таких дефектов.13.

Фаза 4: Производство и контроль качества

233

Однако во многих проектах редко остается время и средства на проверку качества, которую часто совмещают с запуском сайта при сдаче его клиенту. Нередко также крайние сроки производства отодвигаются (обычно из-за задержек
с поставкой контента и технических неполадок), и времени на QA не остается.
Возможность провести полноценную проверку качества будет зависеть в значительной степени от трех вещей: 1) сколько времени остается до даты запуска обычно это результат умения твердо придерживаться намеченного графика работ; 2) каковы критерии приемлемости - насколько совершенным должен быть
сайт при запуске и 3) насколько гибко оговорена дата запуска.
Этот критически важный процесс проверки качества может проводиться либо неофициально только несколькими членами группы, либо более официально — внутренними силами или с наймом внешней компании или группы. Реальный выход
состоит в том, чтобы приближаться к этому процессу постепенно, но осознанно:
без связного плана контроля качества вы отдаетесь на волю случая. А на случай
никогда не следует полагаться, подвергая опасности бюджет. Сформируйте план.

Создание плана контроля качества (QA)
С самого начала проекта известно, что необходимо провести проверку качества
(QA) и требуется составить план этого мероприятия. Не исключено, однако, что
весь план контроля качества ограничивается единственной строкой в бюджете,
которая выглядит примерно так: QA = 12 часов. Или 5 часов. Или 20+ часов.
Эта бюджетная строка зависит от масштаба проекта, пожеланий клиента и квалификации проектной группы.
Пересмотрите свой план QA. Имейте в виду, что сложные наборы фреймов, изощренные шаблоны HTML, облегченные сценарии и гиперссылки - все должно
быть проверено на качество. По существу, есть три уровня контроля качества:
упрощенный/неформальный, полуформальный и формальный. Выберите тот
уровень, которого требует ваш проект.
Ответственный за контроль качества

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

ных навыков в тестировании и запуске любого продукта гораздо более ценно, чем приспосабливание к
этому. Превосходный обзор принципов и стратегии
контроля качества есть на www.philosophe.com.
При решении этой задачи учтите все пожелания клиента. Объясните клиенту значение всестороннего
контроля качества (QA) и необходимые затраты на
это. Убедитесь, что клиент понимает, что для всестороннего контроля требуется не один день (или более), а не просто несколько тысяч долларов.

http://openlib.org.ua/

234

Глава б

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

http://openlib.org.ua/

Фаза 4: Производство и контроль качества

235

РАСШИРЕННЫЕ/ОФИЦИАЛЬНЫЕ ПРОЦЕДУРЫ ПРОВЕРКИ
Проверка модулей

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

Регрессивное тестирование

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

Проверка безопасности

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

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

http://openlib.org.ua/

236

Проблема с фреймами
Если сайт содержит фреймы,
имейте в виду* что контроль качества займет, по крайней мере,
вдвое больше времени. Вложенные фреймы? Тогда еще больше. Как правило, чем больше
имеется фреймов, тем больше
проверок необходимо. Кроме того, фреймы срывают поисковые
механизмы (см. фазу 5: Запуск
и сопровождение). Фреймы хоть
и хороши в некоторых ситуациях
(например,для портфолио, поддержки нескольких уровней навигации и так далее), но обычно
вносят столько проблем, что чаще всего они просто того не стоят. Без абсолютной необходимости рекомендуется избегать
использования фреймов.

Глава б

Неформальная проверка очень проста и выполняется самой проектной группой. Формальная проверка обычно предполагает наем внешней, квалифицированной группы. Полуформальная - соответственно, что-то между этими двумя. Большинство сайтов с бюджетом веб-проекта ниже 30 тысяч
долларов может обойтись неформальной проверкой. Сайты со сложными функциональными возможностями и прикладным уровнем обычно требуют проведения формальной или, по крайней мере, полуформальной проверки.

Упрощенный/неформальный
контроль качества
При неформальном контроле качества ответственный за проведение испытаний или руководитель
проекта координирует и отслеживает все запланированные проверки, а также распределяет между
членами группы проверку разделов сайта, индивидуальных броузеров, версий броузеров и платформ. Назначенный член группы проводит свою
часть проверки и перечисляет обнаруженные дефекты для устранения их группой производства
HTML. Проще всего при этом распечатывать стра-

Юзабилити-тестирование во время проведения QA
Контроль качества и юзабилити-тестирование схожи
в подходе и масштабе, но отличаются конкретными
процедурами и целями. Местами, однако, они перекрываются, особенно когда технические дефекты и осложнения (выявленные в ходе QA) влияют на возможность пользователей успешно перемещаться по сайту (что выявляется при юзабилити-тестировании). Фактически юзабилити-тестирование может иногда
рассматриваться как разновидность QA.
При контроле качества сайта с целью обнаружения
дефектов, технических сбоев и совместимости с разными броузерами мы настоятельно рекомендуем
провести также юзабилити-тестирование «один на
один» (называемое также на этой стадии «верификационной проверкой»). Для чего? Чтобы убедиться с

позиции пользователя, что сайт работает нормально.
Наименования и маркировки должны быть понятными. Навигация должна быть интуитивной и удобной.
Сайт может быть опрятным и не содержать ошибок,
но если он неудобен, его не захотят посещать, и успеха не будет.
С другой стороны, сайт после редизайна может быть
удобным (поздравляем!), но если есть некорректные
ссылки и орфографические ошибки, пользователи
долго не задержатся. Кроме того, они получат плохое впечатление от сайта и от компании. Стремитесь сделать сайт дружественным и не содержащим
ошибок. Рекомендуется до запуска провести и Оки
юзабилити-тестирование. Подробнее о юзабилититестировании см. в главе 8.

http://openlib.org.ua/

Фаза 4: Производство и контроль качества

237

ницы, имеющие ошибки, и ясно отмечать на распечатке каждый дефект. Заметьте, что эти распечатки полезны, если только на них указаны броузер и платформа, на которых данный дефект проявляется. Без этих сведений трудно воспроизвести ошибку, чтобы соответственно исправить ее.
Руководитель проекта должен отслеживать также
список дефектов, так называемый «bug list», который при неформальном испытании представляет
собой просто пачку распечаток с отмеченными
ошибками. Заметная красная пометка будет указывать на обнаруженную ошибку, а сопроводительные пометки «Устранено» или «Отложено на потом»
с датой помогут отследить их исправление.
Обычно для небольших или средних сайтов (с бюджетом менее 30 тысяч долларов) без особых технических сложностей такое неформальное тестирование является вполне адекватным методом. Неформальная проверка называется также «ad hoc»,
или «партизанской проверкой», так как она не
имеет никакого формального плана или подхода
к тестированию. Испытатели просто «стучат по
клавишам» на сайте в поисках ошибок, которые
необходимо исправить.

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

Базовый план контроля качества (QA)

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

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

План проверки устраненных ошибок до запуска
сайта.
Любые известные предположения (известные
риски) на тот случай, если не все проверки смогут быть проведены до запуска. Они должны быть
перечислены в разделе «Детали и уточнения» (фаза 1) плана проекта или контракта и подписаны
до завершения работ, передачи и запуска сайта.
План устранения дефектов, которые не могут
быть исправлены до запуска. Кто должен будет
устранять их, как будут определяться дополнительные затраты и так далее.

http://openlib.org.ua/

Глава б

238

Испытательные стенды
Группу компьютеров (установленных в месте проведения испытаний), которые представляют
целевые броузеры, платформы и
скорости подключений аудитории, часто называют «испытательными стендами». Трудно перечислить все комбинации броузеров и платформ; по крайней
мере, проверьте основные
(рис. 6.14). Даже проверка небольшой репрезентативной
группы приведет к обнаружению
многих ошибок на сайте. Испытательные стенды применяются
при полуформальном и формальном QA-тестировании. При
неформальном уровне тестирования различные броузеры и
платформы зачастую проверяются в разных местах.

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

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

Рис. 6J4. Таблица, подобная
этой, поможет проследить
все комбинации пар платформа-броузер целевой аудитории. В ней можно отразить установки испытательного стенда. Данная типовая аудитория не включает
пользователей броузеров 3.0
или платформ UNIX

http://openlib.org.ua/

Фаза 4: Производство и контроль качества

испытателей QA (да, именно штат). Формальное
тестирование включает план испытаний, инструментальные средства, типичные ситуации, испытания на стенде и отчеты. Для иллюстрации масштабов процесса формального контроля качества
рассмотрим типичный пример: нужно определить,
по крайней мере, 10 различных маршрутов через
сайт и каждый из них проверить на трех платформах (MAC, WIN, UNIX); с каждой платформой
проверить работу трех броузеров (IE, Netscape,
AOL), каждый броузер испытать во всех его версиях (от 3.0 до 6.0; заметим, что Netscape пропустил версию 5.0). Таким образом, данный пример
содержит приблизительно 450 различных тестов
(10x3x3x5) для выбранных маршрутов. Ошеломляет? Да. Невозможно? Возможно. А в условиях
неформального тестирования? Невозможно. Нужны такие испытания крупным сайтам с существенной внутренней инженерией и обширными функциональными возможностями? Безусловно.

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

239

Инструментальные средства обнаружения ошибок
Хотя автоматизированные программные системы не могут полностью
заменить фактическую проверку качества сайта человеком, существует много доступных инструментальных средств, которые помогут
в этом процессе. Для комплексного
тестирования HTML на предмет соответствия стандоту, корректности
гиперссылок, правильности правописания, времени загрузки и т. п.
воспользуйтесь www.netmechanic.com. Цены варьируются от 35 до
200 долларов за проверку до 400
страниц HTML
Есть ли другие онлайновые инструментальные средства? Их очень
много. Для проверки МЕГА-информации посетите www.scrubtheweb.com. Сайт mw.w3.org/People/
Raggefytidy поможет привести в порадок HTML Превосходный инструмент для отслеживания ошибок
предлагает www.alumnLcaftech.edu/
dank/gnafchtml. Хотите больше узнать об ошибках? Поинтересуйтесь
на wm.mwMxxg/bugs. Кроме того, Mozilla - удобный ресурс для
проверки качества.

ЗАМЕЧАНИЕ: Для проектов с бюджетом до 10 тысяч долларов лишь 100-долларовые затраты времени и ресурсов, конечно, недостаточны. Все равно вам потребуется проверять весь сайт.

http://openlib.org.ua/

При любом выбранном методе необходимо выяснить следующее: • Тип броузера/платформы • Операционная система • Описание проблемы (одна строка) • Детальное описание • URL страницы • Серьезность проблемы • Можно ли воспроизвести ошибку? http://openlib. приоритет.даже электронная таб- лица Excel подойдет . что некоторые дефекты могут быть нефиксируемыми. Они должны быть устранены до запуска (например. После обнаружения ошибок исследуйте их. а также послестартовое. Заключительная проверка Всей проектной группой проведите заключительную проверку. более хороший) путь: используйте какой-нибудь инструмент для отслеживания ошибок .15). Расставьте приоритеты и прежде всего избавьтесь от вопиющих ошибок.org. Существует старый. Пробуйте воспроизвести ошибку. Отслеживая дефекты.ua/ . возможно. который был бы значимым. В зависимости от оставшегося до запуска времени и требуемого уровня готовности планируйте предстартовое устранение ошибок. Удостоверьтесь.Глава 6 240 Вопиющие ошибки Бывают ошибки. устранить ее. Остальное может подождать несколько дней. вопиющие ошибки это дефекты. Некоторые недочеты проявляются из-за параметров настройки броузера конечного пользователя (рис. если она все же не может быть устранена). воспроизводимым. которое производится итерационным способом. . Имейте в виду. проверен ный метод. Если ошибка не воспроизводится. отметьте это тоже. главная страница неправильно загружается. как между маленькой безвредной уховерткой и громадным тараканом размером с большой палец). Крупные. обвести кружочком ошибку. Некоторые дефекты удается устранить лишь после нескольких попыток. Следует проверить пять ключевых аспектов: • Проверка дизайна. Какие из них вопиющие? Какие можно устранить итерационным подходом в первую неделю запуска? Иногда дата запуска «высечена на камне». пригодный для неформального тестирования: распечатать страницу. которые просто нельзя оставлять. А вот документировать их способом. так как они зависят от конечного пользователя.хотя в каждый момент с файлом может работать только один человек. Имеется другой (и. указать на ней броузер/платформу. располагайте их по приоритетам.проблема. детальным и ориентированным на решение. У дизайнеров острый глаз на детали: они могут обнаружить неправильное выравнивание и неверную графику там. где хоро- Документирование ошибок Документировать ошибки просто. а бывают большие ошибки (разница. 6. выпадающие меню приводят к падению IEf наборы фреймов перепуганы и так далее). и нет времени на исправление всех ошибок. затем отметить ошибку как исправленную (или оставленную. что все системы работают.

проявляющийся на броузере AOL 4. что все функциональные возможности соответствуют техническим спецификациям. что основной текст смотрится как основной текст.. Убедитесь. в основном вне контроля QA-тестирования шая группа QA-тестирования никогда бы не обратила внимание. Пусть арт-директор или дизайнер просмотрят весь сайт и на Мае и на PC. что все таблицы. как и должно быть. Проверка функциональности/инженерии (если есть). что сайт визуально работает и на MAC и на PC. чтобы гарантировать качество. Вы видите общую картину.0 в ходе процесса QA. Удостоверьтесь.15. Проверка контента. Текст HTML может быть размещен неправильно или что-то не так с обработкой фотографий. но бессистемно: только на некоторых портативных компьютерах. У группы могло не хватить времени для тонкой настройки.org. Удостоверьтесь. Причиной послужила установка конечного пользователя: неотмеченная опция «Использовать сжатые изображения» («Use compressed images» ). Иногда при устранении ошибок нарушается код. Убедитесь.Фаза 4: Производство и контроль качества 241 Рис. Сбой изображения (вверху). что интеграция базы данных завершена и на постоянном сервере могут выполняться все транзакции. Ошибки. что форматирование содержимого выполнено производственной группой правильно и что все располагается ровно. Убедитесь. вызываемые конечными пользователями. После QA-тестирования и устранения ошибок группа HTML должна убедиться еще раз. 6. ячейки и графика выровнены должным образом. Проверка HTML. что заголовки выглядят как заголовки. Затем сброс кэша броузера исправил сбой и отобразил нормальное изображение (внизу).ua/ . http://openlib..

на проект не хватило бы времени. не проверив. тестирования и перепроверки к фазе компоновки переходить опасно. Резюме фазы 4 Фаза производства.org. чтобы производство проходило с минимальными сбоями. составить ведомость клиентских технических требований. Идет фактическое формирование сайта. сформировать протосайт и проверить функциональные возможности (фаза 3). или вы пытаетесь разрезать на части и оптимизировать объект. Группе пришлось бы возвращаться назад. Не волнуйтесь. Несомненно. иначе может оказаться. но зачастую. интегрировать сложные функциональные возможности и внутренние приложения и/или разработки и все протестировать. что этап производства завершен! Ну. что. Потом сформировать руководство по стилю оформления HTML и подготовиться к передаче сайта (фаза 5). например. Для импровизации здесь не так много места. хотя сдача перепроектированного сайта подписывается всегда в маркетинговом отделе. почти. наиболее прямая и очевидная в Базовом процессе. Базовый процесс настроен так. Радуйтесь. Это все равно. сформировать шаблоны HTML и интегрировать облегченные сценарии. Он дружествен по отношению к пользователю. покатиться вниз по любому склону. который вообще не может быть преобразован в HTML. а иногда эта задержка вызывает хаос. вероятно.прямой этап от начала до конца: опросить клиента. могут и не увидеть финальный сайт. Сайт не содержит ошибок. однако. Надеяться. ваши выпадающие меню блокируют место для рекламы. проконсультировать визуальных и информационных дизайнеров относительно выполнимости (фазы 2 и 3). сформировать и заполнить индивидуальные страницы. Удивительно. к напрасному программированию. Затем вздохнуть. разрезать на части и оптимизировать графику. насколько он крут. Почему производственная группа участвует на протяжении всего процесса? Довольно ясно: без расширенной проверки.каждый сайт их имеет.ua/ . чтобы получить одобрение на самом высоком уровне. что клиент просмотрит и одобрит весь сайт до запуска. ошибок не избежать . выйдя с лыжами из подъемника. и если дата запуска определена твердо. Иногда есть возможность ждать до последнего момента. что когда вы формируете шаблоны HTML. возможно. Выглядит точно так. как задумано визуальными ди- http://openlib. вряд ли стоит. Любая из этих ситуаций привела бы к потерянным впустую многим часам. Производство . Подумайте о возможных проблемах.242 Глава б • Одобрение клиентом. которые должны одобрить сайт до его окончательного запуска. обозначенное в договоре. принять графические шаблоны от визуальных дизайнеров. Он логично организован и будет прост в эксплуатации благодаря хорошо продуманному HTML. Сайт сформирован. высшее руководство или рекламодатели.

Теперь готовьтесь его подать.org. о котором говорилось в начале этой главы. Группа готова позаботиться о запуске и дальнейшей судьбе сайта. Если бы это был тот пирог.ua/ . то он был бы испечен.Фаза 4: Производство и контроль качества 243 зайнерами. http://openlib.

janus.COM [ПРЕЖНИЙ] В ПРОЦЕССЕ ПОДГОТОВКИ К ЗАПУСКУ НОВОГО JANUS.COM [ПРЕЖНИЙ] представляет собой тип просмотра нового сайта.COM [ПЕРЕПРОЕКТИРОВАННОГО] еще до запуска предоставил своим пользователям возможность предварительного JANUS.244 Учебный пример Janus Клиент: Janus Capital Corporation URL: www.вестициях уже на этом этапе.) та всегда было круглосуточное онлайновое самообслуживание. (2000 г. позволяя им участвовать в инсайта. Целью сай. http://openlib.ua/ .com Проектная группа: Sapient Эксплуатационная группа: внутренняя.org. строго подчиненного основной цели. Janus ПРЕДЫДУЩИЙ JANUS.

цветную вклейку. стр. на активные инвестиции индивидуальных вкладчиков. корпорация осуществляет большинство деловых контактов по телефону или в онлайновом режиме. См. через Janus. 350-351 http://openlib. Результат: Большая продуктивность при меньших издержках.org.245 Учебный пример Корпорация Janus Capital Corporation на протяжении 30 лет играет ключевую роль в сфере взаимных фондов. чтобы лучше понять мотивацию инвесторов. Janus ориентируется. Введена более интуитивная и действенная для пользователей навигация. Внешнее оформление сайта изменено с целью более эффектного позиционирования бренда компании. Базируясь в Денвере. В январе 2001 г. СОВРЕМЕННЫЙ JANUS.ua/ . прежде всего.com корпорация приобрела 62% инвесторов по сравнению с 32% в январе 1999 г.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] использовал результаты социологических исследований.

org. http://openlib.ua/ .важная. Но это только этап.Фаза 5: Запуск и сопровождение 7 Запуск сайта . веб-сайт всегда находится в развитии. даже праздничная веха.

специализирующейся на веб-дизайне.ua/ . это переход к совсем другой технологии: эксплуатационной поддержке. чем прежде. кто утверждает бюджет. В начале книги объяснялось. графики работ и дизайн. которая заключает контракт. принимающих решения в отношении развития сайта. Кроме того. пятой и заключительной фазе Базового процесса разница в действиях внутренней и внешней команд разработчиков становится даже более ощутимой. Интерпретируйте слово «клиент» в соответствии с собственной ситуацией. какое впечатление он производит на посетителей? На данной. http://openlib. когда проектная группа является внутренней. какой смысл придается этому термину.тот.запуск . слово «клиент» используется здесь для обозначения лиц компании. и поэтому для них становится ощутимее разница в значении слова «клиент».org. Если для разработки сайта компания прибегает к услугам сторонней фирмы. Кто будет заниматься этим и каковы их квалификация и возможности? Кто будет отвечать за создание контента после запуска? И не забудьте об оценке: требуется еще определить степень успешности сайта.вовсе не конец работы. сформулированным в креативном брифе? Удобен он для пользователей? Вообще.Фаза 5: Запуск и сопровождение В сегодняшнем мире веб-разработок этот момент . Отвечает сайт первоначальным целям. В любом случае клиент . «клиентом» является компания.

Поймите.Фаза 5: Запуск и сопровождение 249 Задачи этой фазы охватывают все. когда разработка. производство и весь проект редизайна прошли полный цикл . Даже если обе эти команды составлены из тех же самых людей. их роли очень различны. Таким образом. включает некоторые мысли об анонсировании сайта и его регистрации в поисковых системах. Это момент. Четкое определение обязанностей и точки перехода. что должно быть продумано перед.осталось только послать окончательный счет. Передача сайта Любой дизайнер скажет. какое состояние считать моментом перехода от разработки сайта к его сопровождению. поэтому действительно трудно «заморозить» разработку. а также передача пакета документов помогают обозначить границу между разработкой и эксплуатационной поддержкой. что он завершен. эта глава о запуске сайта и обо всем. что серьезные промахи не обнаружатся в последний момент.org. во время и после того. как сайт оживет. В большинстве проектов одна команда отвечает за формирование и запуск сайта. что необходимо для беспрепятственной передачи перепроектированного сайта из рук веб-дизайнеров на попечение эксплуатационной группы. а другой команде http://openlib. Фаза 5 связывает концы с концами. Независимо от размера проекта обратитесь к этой главе для гарантии того. Клиент и команда разработчиков должны заранее совместно решить. что можно еще что-то улучшить.ua/ . только когда кто-то другой видит. Веб-сайты по своей природе не могут быть «завершенными» в том смысле. что никогда не может быть идеальных условий для этого: какие-то ошибки и проблемы будут неожиданно возникать. Однако в какой-то момент необходимо остановиться. что проект завершен. как может быть завершена распечатка любого документа. а также дает ряд советов по способам оценки успешности и юзабилити сайта. Всегда кажется.

Делайте руководство по стилю оформления всесторонним. если у эксплуатационной команды возникнут вопросы. необходимой для обновления и поддержки сайта. Отдельные вопросы возможны и в пределах нескольких месяцев. сложные наборы фреймов. данный этап . что изза брандмауэра это место можно было проверить только на сервере клиента. Вскоре после запуска появилась программная ошибка. не говоря уже о системах управления содержимым и других функциях внутреннего интерфейса.org. чтобы эксплуатационная группа могла справиться со своей задачей. так как они должны добавить производственные аспекты к руководству по стилю оформления сайта. Внутренняя эксплуатационная команда клиента не берет на себя ответственность. В любом веб-проекте возможны подобные накладки. на который у них не было доступа. Команда разработчиков считает. Производственные сложности различны для разных сайтов. Установите и укажите письменно определенный интервал времени для ответов на вопросы и оказания технической помощи. Можно ожидать этого в течение нескольких недель. но если передача сайта организована должным образом. Однако поскольку подобная ситуация не была оговорена документально. Усвойте урок: заранее оговорите оплачиваемые услуги и сделайте это в письменной форме. и эксплуатационная команда все еще нуждается в регулярной помощи http://openlib. Однако не слишком долго. Но если вопросы продолжают поступать и после трех-шести месяцев.все это добавляет потенциальные проблемы.это время.ua/ . с которыми может столкнуться вторая команда. Выражайтесь понятно и немногословно и будьте доступны. Но независимо от того. Громоздкие таблицы. которые возникают в первые несколько дней/недель после передачи сайта? Вот реальная ситуация: команда веб-разработчиков сдала полностью протестированный (QA) сайт. которое было начато визуальными дизайнерами в фазе 3: Визуальное оформление и тестирование. когда следует утрясти несколько вопросов. Даже при разработке сайта внутренней группой состав эксплуатационной команды часто бывает отличным от команды разработчиков. Включите туда побольше информации. . включения и таблицы стилей. такие проблемы могут быть решены без излишних споров. кто и кому передает проект. Завершение создания руководства по стилю оформления сайта После запуска сайта дизайнеры производства могут немного передохнуть и расслабиться. разработчикам пришлось потратить на решение проблемы более 30 часов без дополнительной оплаты.Глава 7 250 Кто это сломал? Кто должен решать проблемы. поручается его сопровождение. так как эксплуатационная группа будет использовать его как справочник при добавлении или изменении HTML-страниц или графики.

в разделе «Детали и уточнения».) http://openlib. начиная с определенного срока после передачи. 60 или 90 дней.Фаза 5: Запуск и сопровождение 251 первоначальной проектной группы.ua/ . что запрашиваемая после запуска техническая помощь и поддержка.org. Укажите его в письменном виде и постарайтесь подписать этот документ у клиента. 45. будет платной. то это должны быть уже платные услуги. (Лучшее место для этого документа . Задолго до передачи сайта твердо установите. Установите срок в 30.

Уровень детализации зависит от конкретного проекта. По стилю производственная часть должна соответствовать формату всего руководства.252 Глава 7 Производственная часть руководства по стилю оформления должна включать коды для HTML-тегов. атрибутов и определения графических элементов. Некоторые проекты могут быть достаточно простыми и не нуждаться в вызываемых кодах.1). Рекомендуется сделать этот документ и наглядным и информативным (рис. http://openlib. Для справки воспользуйтесь приведенным перечнем рекомендуемых компонентов.org.ua/ . 7.

com http://openlib.org. Фрагмент производственной части руководства по стилю оформления для newriders. схемы фреймов).1. могут потребовать дополнительных элементов (например. отражающую соответствие между фреймами и файлами (рис.ua/ . наоборот. включите схему. Если используемые фреймы требуют определенного усилия в понимании логики.2). 7. 7.Фаза 5: Запуск и сопровождение 253 Другие. Рис.

по крайней мере. подлежащие сохранению. final-final и так далее.2.org. Тщательно произведите отбор. на какой фрейм направляют гиперссылки Создание пакета передачи Рассматривайте пакет передачи как эстафетную палочку: передается то. final_2. какие файлы . layout_02. final. layout__06. Четко обговорите со всеми членами проектной группы.254 Глава 7 Рис.это подборка всех материалов и документации проекта. возможно. так и HTML стоит архивировать. что необходимо поддерживать в рабочем состоянии. названных layout_01. но полный пакет должен быть записан на компакт-диск и содержать. есть много промежуточных файлов. следующие компоненты: • Все файлы Photoshop/Fireworks (по слоям. Он включает все исходные файлы. Соберите все файлы. Приведите в порядок файлы. 7.ua/ . дайте им понятные имена и заархивируйте каждый. шаблоны и спецификации.как дизайнерские. Вероятно. текст неотрендеренный) • Шрифты (или информация о том. где приобретать шрифты) • Все фотографии/иллюстрации (включая информацию об авторских правах не забудьте о правах на использование!) • HTML-страницы и шаблоны http://openlib. В схеме фреймов необходимо четко указать. необходимые другой команде или лицу для сопровождения сайта после начального запуска. изображения. Пакет передачи . Состав материалов изменяется от проекта к проекту. необходимые для производства сайта.

При планировании обучения группы эксплуатационной поддержки сайта заранее оговорите общую продолжительность инструктажей. Если какие-то разделы еще трудно использовать.Фаза 5: Запуск и сопровождение • Руководство по стилю оформления (дизайн и производство) в HTML-формате • Технические спецификации • Корневой каталог сайта и другие необходимые файлы Этот пакет передачи должен быть одобрен руководителем проекта.первая возможность увидеть.особенно касающиеся одобрения клиентом — следует собрать для внутреннего архива. заметки. Поскольку никто не знает сайт так хорошо. передача материалов почти всегда должна сопровождаться обучением и инструктажами. иначе это может превратиться в бесконечный процесс. С этого момента сопровождение сайта возлагается на эксплуатационную команду. Не задерживайте пакет передачи: эксплуатационная поддержка сайта начинается сразу же. контракты и так далее). 255 План юзабилититестирования Проведение юзер-тестов на работающем сайте . http://openlib. важные письма . как его создатели. что относится к обсуждению изменений размера проекта (бланки дополнительных затрат с подписями. Один из лучших сравнительных методов для получения поддающихся оценке результатов заключается в проведении юзабилити-тестирования на существующем сайте и на только что стартовавшем перепроектированном сайте и в последующем сравнении полученных результатов. Отслеживание документации Хотя необязательно распечатывать всю электронную почту. Передача пакета знаменует передачу сайта. планы проекта.ua/ . ведущим дизайнером производства и арт-директором.org. Сохраните также все. как взаимодействуют с сайтом реальные пользователи. включите соответствующие изменения в план эксплуатационной поддержки и повторите юзабилити-тестирование после полной модификации сайта.

особенно при включении нового содержимого.и произведите отбор. а опираться на фактические расходы. Как всегда. требующих улучшения методологии. Проведение заключительной встречи Заключительная встреча . В случае внешней команды разработчиков заключительная встреча обычно проводится без клиента. а затем остановитесь на конкретных творческих достижениях. Установите удобные в сопровождении стандарты. которые препятствовали работе.org. Причиной обычно является их неадекватная подготовленность к выполнению своей задачи. На этой встрече. папке или на компакт-диске. часто без видимой вины членов эксплуатационной группы. Избегайте этого. а эксплуатационная команда начинает по-своему осуществлять дизайн и организацию.прекрасный повод взглянуть на проект в целом и оценить полученный опыт. Кроме того. в последующих проектах редизайна можно будет уже не гадать. проблемах. должны присутствовать все ключевые фигуры. Огорчительно наблюдать. который был утвержден. Сохраните все важное в любом месте. подводящей итоги развития проекта. Некоторые проекты выполняются гладко. Начните заключительную встречу с широкого обзора проекта от начала до конца. Каждый проект . то клиент часто входит в ее состав. другие вызывают проблемы. Первоначальные дизайнеры больше не занимаются выбором иллюстраций. как перепроектированный сайт медленно разваливается. обработка графики и информационный дизайн постепенно нарушаются и теряют связность. Придерживайтесь позитивного подхода и избегайте персональных обвинений и осуждений (вам еще предстоит работать вместе). Скорее.ua/ .накопление опыта. Отсортируйте все документы . Что вызывало замедление? Что проходило гладко и как можно воспользоваться этими успешными технологиями в будущем? Планирование инструктажей по сопровождению сайта На большинстве сайтов в ходе эксплуатации наблюдается печальная тенденция: их внешний вид. разногласиях и аспектах. если же проект выполнялся внутренней группой. целостность сайта зависит от поддержания того созданного облика сайта. тем меньше усилий потребуется для выполнения этой задачи. http://openlib. чем более организованной была работа на всем протяжении проекта.«бумажные» и электронные .256 Глава 7 При возможных спорах по поводу оплаты эти документы имеют большое значение для устранения недопонимания. Даже если эксплуатационная команда имеет опыт в дизайне и компоновке страниц и даже если она состоит из творческих личностей с собственными идеями дизайна. следует выявить промахи в производстве. используемом в компании для архивов: в скоросшивателе. макетами страниц и размещением контента.

К таким событиям относятся различные выставки или презентации компании. 9 Зак 667 http://openlib. с завершением основного процесса проверки качества (QA-тестирования) сайт готов к публичному просмотру. Если дату запуска определяют внешние факторы. Поскольку наверняка остались еще какие-то дефекты. поддерживайте контакт с ответственными за них людьми (например. Возрождение К моменту перемещения сайта на постоянный сервер все испытания должны быть завершены.ua/ . Она может быть приурочена к разнообразным внешним событиям. любое из которых могло бы способствовать анонсированию перепроектированного сайта. объясняйте (с помощью руководства по стилю оформления) графику и HTMLстандарты. Продумайте свои действия по рекламе и продвижению сайта при его возрождении и соответственно распределите задачи. знакомым URL. чтобы своевременно сообщить о сбоях в графике работ или радикальном изменении контента. представление годового отчета или другие мероприятия с твердо установленной датой.org. Поздравляем! Просто перенос сайта на новое место нуждается в рассылке объявлений о его перемещении. а новый запуск сайта позволяет объявить о возрожденном. составьте четкий план устранения их на месте после запуска. Считайте это профилактикой для перепроектированного сайта. с маркетинговым отделом или внешним рекламным агентством). а производство должно быть заморожено. Выработайте стратегию анонсирования задолго до даты запуска.Фаза 5: Запуск и сопровождение 257 Четко ставьте задачи. Тем не менее. Будет ли заниматься этим внешняя команда веб-разработчиков? Или это задачи только внутренней команды? Будет ли привлекаться также рекламное агентство? Каков календарный план? Часто для запуска устанавливается строго определенная. знаменательная дата. перепроектированном сайте с тем же самым. а также технические цели сайта.

связанные с функционированием на действующем сервере (например. требующие много прокрутки. Мы хотели бы знать ваше мнение».258 Глава 7 Мягкий запуск Текущая аудитория и ее зона комфорта Представьте себе график. например крупной рекламной кампании или представления годового отчета. но не позволяйте маркетингу управлять запуском в ущерб интересам сайта (если вы в силах справиться с этим). Иногда мягкий запуск означает также готовность сайта не в полном объеме. Используйте уже существующие методы и текущие материалы (буклеты. чтобы всегда было понятно.просто ситуация с жестким крайним сроком. напишите так: «Понравился ли вам перепроектированный сайт? Нет ли у вас каких-либо предложений? Не обнаружились ли нарушенные ссылки или сбои? Оставьте нам электронное сообщение. и добавили вверху страниц путеводные «хлебные крошки». Остальное содержимое планируется подготовить к 1 декабря и тогда же начать рекламу перепроектированного сайта». проблемы с брандмауэром). не испытывая давления со стороны внешних факторов. объявляющую о редизайне и ясно объясняющую новые особенности и навигацию. каким будет запуск — мягким или с незыблемой датой.1 чавшегося редизайна. Жесткий запуск . в какой части сайта вы находитесь».это спокойный перенос сайта на действующий сервер. Мягкий запуск .org. Стимулируйте обратную связь. — удостоверьтесь. а также исследуйте новые возможности. объявления).| та поможет ее заблаговременное оповещение о редизайне. Дайте пользователям знать. что намечено на ближайший из них? Новая навигация. Мы разбили на части длинные страницы.ua/ . Оповестите свою аудиторию о редизайне сайта. Перечислите новые особенности контента.I менениях. не могут быть обнаружены до перемещения сайта. Если клиента это не устраивает. что целью редизайна является облегчение их работы. которая обычно обусловлена внешними ограничениями по времени. Например. например: «1 октября мы производим мягкий запуск с 85% контента. В качестве руководства воспользуйтесь следующими предложениями: • • • • Перепроектированный сайт. Сделайте своих пользователей участниками на. Добавляется ли новый тип информации? Расширяется ли I предметная область FAQ (часто задаваемых вопросов)? Если редизайн происходит в несколько этапов. наполненный свободными паузами. Смотрите советы по анонсиро- http://openlib. очень четко оговорите возможные риски: дефекты. с незыблемой датой. Например: «Мы реструктурировали наш сайт и ввели больше связей между страницами. чтобы стало проще перемещаться и получать наиболее часто отыскиваемую информацию. так и вне ее. Новые возможности. Всегда изначально планируйте мягкий запуск. Свяжите ее непосредственно с главной страницей. что имеете роскошь запускать сайт на действующем сервере и неторопливо тестировать его там. что маркетинговая кампания подготовлена. Обратная связь. Создайте страницу. Вообразите. визитные карточки. Облегчить принятие вашей текущей аудиторией нового облика сай. Сообщите аудитории о произведенных из. Независимо от того. Подготовка плана анонсирования В зависимости от состава аудитории перепроектированный сайт может анонсироваться как в Сети.

хотя в конечном счете и это работает (слегка).workz. как звучит в некоторых объявлениях: «За 99 долларов зарегистрируем ваш сайт во ВСЕХ ЛУЧШИХ ПОИСКОВЫХ СИСТЕМАХ!». 85% пользователей Интернета для отыскания сайтов используют поисковые механизмы. Процесс QAтестирования может обнаружить больше недочетов. Подумайте. а после этого начинайте внешнюю маркетинговую кампанию. Учтите это.com.workz. Регистрация в поисковых системах Согласно информационному бюллетеню NetMechanic. Факт регистрации вашего сайта в популярных поисковых системах не означает. которая приведет новых пользователей на недоработанный сайт.selfpromotion.org.com. Вебсайты запускаются ежедневно. возможно. чтобы гарантировать надежную работу сайта на постоянном сервере (мягкий запуск). перечисление его в некоторых механизмах поиска. Мы рекомендуем www.Фаза 5: Запуск и сопровождение ванию сайта. какие методы они используют. и конкуренция за место в первой десятке результатов поиска постоянно растет.searchengi- newatch. по крайней мере* на первые две недели после намеченной даты запуска. сколько времени они тратят на это в неделю и каких видимых результатов добиваются. богатые полезной информацией. было опрошено 37 владельцев сайтов с целью выяснить. чем ожидалось. результаты могут быть далеки от того. Хотя они действительно обеспечат регистрацию вашего сайта и. что лучшие результаты достигаются при непосредственной ручной регистрации в ключевых поисковых системах и при еженедельной затрате одного часа на изменение и улучше- В Сети существует множество ресурсов. Если можно. проведенном www. чтобы повлиять на рейтинг сайта в поисковых механизмах. www. Регистрация в поисковых системах не столь проста.com и www. которые помогут эффективнее представить ваш сайт. Проектная группа может не справиться с исправлением всех ошибок к запланированному сроку. http://openlib. стоит ли платить за рекламу. Что-то может не сложиться. которые помогут правильно и своевременно объявить о перепроектированном сайте. которые похожи на объявления о продаже подержанных автомобилей. Опрос ясно показал. дайте несколько недель на послестартовые испытания. на что вы надеялись. 259 Задержка рекламы Не заказывайте оплачиваемую рекламу.com .com. В исследовании.ua/ . Остерегайтесь подобных предложений. У вас только один шанс произвести хорошее впечатление. что на этом можно успокоиться и просто ждать пользователей.хорошие источники.

это гораздо больше. что они.webposition. третьи . Это один из наиболее важных факторов. как утверждается. связанных с эффективностью результатов поисковых механизмов. а также автоматически регистрировать их в поисковых системах в надежде удержать ваш сайт в первой десятке.com. которые помогают проверять и загружать HTMLстраницы.бесплатный сервис с регистрацией в 12 поисковых системах. другие . Ставка за сервис Submitit. Незаполненный бланк инструмента для создания МЕГА-данных можно загрузить с www. заголовки берутся за основу названия закладок.com) получила благоприятные отзывы и относительно недорога. Хотя эти сервисы могут сэкономить вам время.com . -> http://openlib.ua/ . чем просто заголовки в верхней части окна броузера.просто потеря времени). наличие информативного заголовка делает закладку удобной и идентифицируемой. ценность которых в том.org.262 Теги TITLE Теги TITLE . При создании заголовка имейте в виду.web-redesign. Существуют программные инструментальные средства. знакомы с отраслью и имеют автоматизированные системы. Глава 7 Регистрация через платную регистрационную компанию. но часто они недооцениваются и неправильно используются. Программа Web Position Gold (www.не очень. что в списке результатов поиска потенциальный пользователь будет видеть только это.com . Использование специальных программ для контроля и регистрации. Существуют сервисы (некоторые из них хороши. Кроме того. Registerit. позволяющие легко и быстро произвести представление и регистрацию в поисковых системах.минимум 59 долларов за два URL. мнения о них остаются неоднозначными.

ua/ . Данное пособие . которые следует учитывать при генерировании МЕГА-информации.org. ключевые слова. Пусть клиент воспользуется этим перечнем. чтобы предоставить соответствующие сведения руководителю проекта. http://openlib. перечень сведений. Пожалуйста. не путайте это инструментальное средство с инструментами для представления сайта в поисковых системах или инструментами для обеспечения лучшего положения в результатах поиска. Передайте их дизайнерам производства HTML для интеграции в страницы.Фаза 5: Запуск и сопровождение 263 Этот инструмент поможет вам создать МЕГА-информацию: прежде всего. используемой поисковыми системами.скорее.

Сравните и скопируйте: Найдите компании. Нечестно? Возможно. Запуск сайта Все испытания на рабочем сервере завершены. Становится доступным для вашей реальной аудитории и основных посетителей.264 Глава 7 Здесь приведены два примера МЕТА-информации.org.. Тогда. но все так делают.ua/ . http://openlib. все ошибки устранены. и посмотрите их ключевые слова.. производство заморожено и план анонсирования готов. Все системы работают. чтобы время простоя как можно меньше нарушило регулярный веб-трафик. которые предлагают аналогичные сервисы. Запуск! Сайт оживает. Запланируйте загрузку сайта на действующий сервер в непиковые часы.

но часто приходится долго топтаться взад и вперед между устранением недочетов и усовершенствованиями. И если вы — внешняя команда.и юзабилити-тестирование. чтобы провести тестирование на постоянном сервере.это последняя сохраненная и проверенная версия сайта.и запускайте сайт. Вуаля! Сайт уже в эксплуатации. Обеспечьте возможность вернуться к старому сайту. Когда наконец придет время возрождения сайта. http://openlib. Вполне допустим некоторый приемлемый уровень недостатков. если вдруг всплывут вопиющие ошибки. если чтото не заладится с запуском.org. Клиент и команда разработчиков должны прийти к полному согласию о готовности сайта к возрождению. В первую очередь позаботьтесь о вопиющих ошибках ~ошибках. с чем сможет справиться эксплуатационная команда. Откат . Потенциальная проблема кроется также в передаче сайта клиенту без возможности проверить его на клиентском сервере. запускающая сайт на сервере клиента в строго установленную дату. возможно. Если вам удалось запланировать мягкий запуск. что это четко оговорено. своевременно позаботьтесь о получении необходимого доступа. Передайте сайт. определите. наконец. Исправьте следующие по важности недочеты. будет достигнута готовность к запуску. но желательно не затягивать). В этот момент могут всплыть любые проблемы. А кто должен проводить немедленное послестартовое тестирование? Эксплуатационная команда или разработчики? Убедитесь. Запуск . то внешнего давления нет и тестирование можно провести в относительно неторопливом режиме (в течение нескольких дней от момента запуска. Если же сайт запускается в строго установленный момент. придется поспешить. готовящаяся к передаче сайта.Фаза 5: Запуск и сопровождение Важная часть запуска . возрождайте его. а затем все остальное. Достичь совершенства сайта очень трудно.это большое черное пятно на сером фоне в период между разработкой и сопровождением сайта. Следует составить список расположенных по приоритетам изменений и подлежащих устранению ошибок на послестартовый период. Если вы внешняя команда. 265 Расставляйте устраняемые дефекты по приоритетам Можно не успеть сделать до запуска все до последней мелочи.незамедлительное QA-тестирование на постоянном сервере. пока. которые должны быть устранены до запуска . Запаситесь откатной версией старого сайта на случай.ua/ . даже проведя полное QA. Отпразднуйте это событие и готовьтесь оценить плоды своих трудов. когда все будет готово надлежащим образом. Это может казаться простым делом.

ua/ . которые могут быть присущи вашему сайту: • Постарайтесь. достойное ссылки. и вы окажетесь где-то в другом месте. чтобы каждая ваша вебстраница была достижима с вашей главной страницы максимум за три щелчка. Кнопки. как много сайтов выбирают себе дизайн. добавляющихся к Сети ежедневно. тут все определяет суровая действительность. При такой конкуренции с таким множеством других сайтов просто удивительно. тот сайт разработан так. Поисковые механизмы рассматривают только HTML-тексты. Во-вторых. Большинство поисковых механизмов при индексации сайта просматривают только три уровня глубины. Что касается ссылок из поисковых систем. Чтобы сделать свой сайт как можно более «индексабельным» для поисковых систем. Например. это хорошо.все это просто ссылки и ничего более. ему за это платят.org. избегайте типичных элементов дизайна. Сайт ставит ссылку на другой сайт по трем основным причинам. пиктограммы. приходится конкурировать с постоянно растущей базой данных контента. когда сайты не имеют никаких ссылок к другим сайтам. И в-третьих. Представьте себе Yahoo без всяких ссылок! Существует несколько способов создания ссылки. что их невозможно охватить в одной статье. листинги результатов поиска . как сделать сайт достойным ссылки на него Почему некоторые сайты связаны ссылками. большие графические карты ссылок ничего не говорят механизмам поиска о вашем сайте. который делает их индексирование поисковыми системами практически невозможным. запутывающих механизмы поиска. Рекламные баннеры прямо связывают один сайт с другим. Это законно. При тысячах новых веб-страниц. листинги каталогов. что делает Сеть столь полезной* Чем будет Сеть без ссылок? Вообразите поиск информации в Сети.Глава 7 266 Эрик Уорд (Eric Ward) о том. что поисковые системы могут легко проиндексировать его. тот сайт имеет содержимое. Существует такое множество способов. Нажмите их. Во-первых. это ожидаемо и это главное. по мнению вебмастера. значки. которыми сайты вредят самим себе в отношении поисковых систем. в то время как другие сайты почти невидимы? Почему поисковые системы ставят один сайт выше другого? Основная архитектура Сети позволяет устанавливать ссылки между любыми двумя документами и в том и в другом направлениях. ведущей от одного сайта к другому. но вот несколько общих советов по устранению препятствующих поиску факторов. со всем Интернетом. то же самое делают и текстовые гиперссылки в информационных бюллетенях. http://openlib. кажется. дочерние ссылки.

что можно сделать. Напишите что-нибудь в этих тегах.Фаза 5: Запуск и сопровождение • Удостоверьтесь.Примеч.начальная страница сайта. Самое лучшее. • При наличии фреймов на сайте убедитесь. кроме приветствия и/или одной-двух картинок и ссылки на главную страницу сайта (иногда на две или три главных страницы в зависимости от количества версий сайта). AMA. его сервисы получили награду Tenagra Award For Internet Marketing Excellence. • При наличии карт ссылок добавьте гденибудь на той же странице и текстовое навигационное меню. не содержащая в себе ничего.ua/ . ред.searchenginewatch. Его клиентский список является отражением списков «Кто есть кто в мире онлайновых брендов». Microsoft. иначе ваши страницы не будут индексироваться. Virtual Vineyards. Rodney Dangerfield. . http://openlib.org. а также теги ALT для всех изображений. что используете теги NOFRAMES. В 1995 г. splash) . Эрик Уорд создал первый в Сети сервис по способам анонсирования и линкования новых веб-сайтов еще в 1994 г. Link Exchange. науч. включая первоначальные запуски сайтов Amazon. Эрик пишет для ClickZ и Advertising Age. OnSale. Kellogg's и Weather Channel. но они демонстрируют сложность вопроса. .com. Кроме того. Это всего лишь несколько штрихов из множества. подобный сайту Дэнни Салливана (Danny Sullivan) Search Engine Watch (www. а журнал Websight причислил его к 100 наиболее влиятельным людям Сети.сервис. что каждая страница на вашем сайте имеет теги TITLE и теги МЕТА-описаний и ключевых слов. целиком посвященному этим аспектам. который он предлагает и сегодня. BBC. Страница-заставка (англ. Ежедневное выделение 267 нескольких минут на чтение материалов по этой теме обогатит ваши знания и даст некоторую перспективу.пойти на сайт.com). .

com /articles /forrester. Необходимо иметь план незамедлительных действий и проверок после запуска сайта и продолжающегося. Ваша стратегия анонсирования может заманить посетителей на сайт однажды. не должна быть произвольной. опрошено 8600 семей. однако. с целью выяснить. Это делает эксплуатационную поддержку ответственной сразу за первую и за четвертую причины повторных посещений веб-сайтов. быстрая загрузка и частое обновление.html) http://openlib. Лидерство в ответах занял высококачественный контент. регулярного обновления. Forrester Rest arch Inc.6.org.system-concepts. а дважды? А как насчет регулярного посещения? В недавнем исследовании Forrester Research Inc.6). Диаграмма отражает системные концепции (www. Хорошо иметь эксплуатационный план на 1-2 года. долгосрочного. Включите в него меры по Рис. Имейте в виду.Глава 7 268 Эксплуатационная поддержка сайта Эксплуатационная поддержка . что только регулярное обновление сохранит высококачественное содержимое свежим и новым.ua/ . имеющих доступ в Интернет. 7. почему люди повторно возвращаются на веб-сайты (рис. Эксплуатационная поддержка. близко за ним следуют легкость в использовании. опрошено 8600 семей. почему люди повторно возвращаются на веб-сайты. которое сохраняет сайт функционирующим. имеющих доступ в Интернет. 7.горючее. с целью выяснения.

Один из сервисов уведомления серверов. На вопрос разработчиков: «Кто будет заниматься сопровождением сайта?» клиент нередко с гордостью отвечает: «Чарли из отдела маркетинга немного знает HTML.ua/ . а Чарли поручить менее техническую работу. Он шесть месяцев публиковал наши пресс-релизы. Задолго до передачи сайта.Фаза 5: Запуск и сопровождение устранению сбоев. http://openlib. Обратная связь с пользователями поможет дальнейшему формированию перепроектированного сайта. Команда веб-разработчиков должна оценить возможности группы сопровождения в соответствии со сложностью нового сайта. Это очень здорово и не требует больших человеческих усилий. Мы считаем его великолепным работником и планируем поручить ему также заботу о новом сайте». называемый Server Check Pro (через NetMechanic на www.net- mechaniccom/monitor. требуется достаточно высокий уровень навыков эксплуатационной поддержки перепроектированного сайта. но предпочтительно после того.org. если есть подозрение на сбои сервера. Не забудьте о получении отзывов пользователей и юзабилити-тестировании . ответственной за обновление сайта. устройте проверку квалифика- 269 Наблюдайте за своим сервером В случае если вы не можете наблюдать за своим сервером ежедневно и круглосуточно. как заполнена и проанализирована ведомость клиентских технических требований (чтобы дизайнеры производства уже имели представление о сложности редизайна). но непонятно. либо посоветовать клиенту нанять одного-двух специалистов. Для «Чарли из отдела маркетинга» будет явно проблематично сразу взяться за сопровождение динамически управляемого сайта или сложной конструкции вложенных фреймов. когда они происходят. Либо нужно затратить десятки тысяч долларов на обучение Чарли. воспользуйтесь специальными сервисами: Мониторинг сервера менее чем за 10 долларов в месяц того стоит.сразу после запуска сайта и через несколько месяцев. если он имеет только поверхностные знания FrontPage. Оценка возможностей группы сопровождения В большинстве случаев команда разработчиков передает сайт уже имеющейся в компании группе сопровождения.htm). Мы рекомендуем следующий тест. при обнаружении проблемы посылает сообщение на пейджер или по электронной почте. Его роботы проверяют ваш сайт каждые 15 минут. аспекты юзабилити и график обновлений. Существует простая истина: от личности.

то нет смысла привлекать штатного сотрудника с полным рабочим днем. или действуют наугад? Довольно часто люди из группы веб-сопровождения обладают удивительным уровнем знания производства и нуждаются только в небольшом инструктаже по специфике сайта. что делают. Пусть группа сопровождения обновит его. Могут ли они поддерживать структуру файлов? Могут ли читать и понимать HTML? Знают ли Flash или DHTML (если это требуется)? Понимают ли приложения для управления контентом (если это необходимо)? Понаблюдайте за ними. Предложите им при добавлении новой информации архивировать старую. Посмотрите. Однако если сопровождение сайта занимает только 20 часов в неделю. что необходим дополнительный эксплуатационный персонал. Взвесьте все «за» и «против» для различных вариантов. ежеквартальную) внешней компании следует рассмотреть несколько аспектов.ua/ .270 Глава 7 ции группы сопровождения. один из ваших наиболее сложных макетов HTML. лучшим решением мог бы быть контракт с внешним разработчиком или привлечение на неполную ставку нового сотрудника. для более статических сайтов. В некоторых случаях. административной и финансовой. Внутренние и внешние группы сопровождения Для многих компаний рост потребности в ежедневном обновлении сайта. это имеет смысл с нескольких точек зрения: технической. На более сложных сайтах может потребоваться целая группа вместе с руководителем проекта. Почти всегда дешевле использовать внутренние наемные ресурсы на полный рабочий день. динамическом генерировании контента. становится ясно. управлении системами е-коммерции и эффективном обслуживании заказчиков привел к формированию на местах толковых и квалифицированных эксплуатационных команд. как они добавляют информацию. В зависимости от глубины контента после запуска и частоты обновлений для эксплуатационной поддержки может быть достаточно нанять в дополнение к имеющейся команде еще одного дизайнера производства HTML для простого обновления содержимого. Возродите старый проект. обычно ежемесячную или.org. При выборе между внутренней группой сопровождения и необходимостью платить гонорар (регулярную оплату. Потребности сопровождения сайтов различны. Пусть приведут в порядок код. которая искажает таблицы. однако. Если речь идет о довольно статическом сайте с очень простыми ежедневными или еженедельными обновлениями (или даже сайте брошюрного типа с относительно небольшими ежемесячными или ежеквартальными изменениями). Понимают ли они то. http://openlib.

Фаза 5: Запуск и сопровождение 271 http://openlib.ua/ .org.

Каковы были цели? Ежедневное обновление новостей? Еженедельная рекламная рассылка по электронной почте в HTML-формате? Пресс-релизы? Добавление новых продуктов? Стандартные операции. когда производство завершено.ua/ . Вы использовали собранную информацию. возможно. Простая электронная таблица послужит руководством для плановых работ http://openlib. 7. Простая электронная таблица . 7. обновите ответы в опросах. Выясните.7). Рис. добавил по ходу разработки. что для этих задач достаточно ресурсов. который поможет согласовать и сформулировать окончательные цели редизайна. чтобы клиент заполнил эксплуатационный опрос.с временем по строкам (в часах/днях/неделях/ месяцах) и разделами сайта. которые будут обновляться. что требуется для сопровождения сайта.7.org. чтобы структурировать перепроектированный сайт с расчетом на его будущий рост в процессе продуманной эксплуатационной поддержки. включая все.272 Глава 7 Разработка плана эксплуатационной поддержки В первой фазе веб-разработки (фаза 1: Определение проекта) мы рекомендовали.ясно покажет. что клиент. архивирование статей и так далее? Теперь. например обновление данных об авторских правах. Теперь следует спланировать все это. Повторно просмотрите эксплуатационный опрос. по столбцам . что необходимо обновлять и когда (рис. и удостоверьтесь.

ua/ .Фаза 5: Запуск и сопровождение 273 http://openlib.org.

анализируя файлы журналов сервера. проследить успех сайта после его запуска.11). чтобы они смогли достичь собственных выгод.274 Собирайте отзывы пользователей Один из лучших способов оценить успех сайта при запуске сделать это через обратную связь с пользователями. жалобы и одобрения. уменьшение количества обращений заказчиков в технические службы. какие разделы их сайтов более популярны.com) . что от пользователя не требуется ничего. а страницы отражали бы истинные пользовательские регистрационные Хит (от англ.один показ веб-страницы сайта. но также поможет компаниям понять. так и количественно очень важно для определения лучших методов оценки успешности перепроектированного сайта. как долго находится на сайте. которая позволяет сайтам получать мгновенную оценку (рис. какие функции сайта работают. чем когда-либо.11. hit) . http://openlib. Количественные данные собрать непросто.com и другие Глава 7 Оценка успешности сайта В связи с быстро изменяющейся экономикой Интернета и эволюционирующей природой Сети сейчас более важно. 7. Особенно просите пользователей комментировать новые возможности перепроектированного сайта.обратной связи на каждой странице. Это было бы прекрасной информацией. Эти цели. являются еще одним показателем успеха. а также демографии пользовательской базы. Примеч. рост онлайновых продаж. ред. netscape. Обеспечьте на своем сайте оперативность и легкость обратной связи.что также важно не работают. Рис. Это поможет не только обеспечить рекламодателей необходимыми данными. кто приходит на сайт (и откуда). OnlineOpinion используют adobe. Главная цель редизайна сайта — не просто изменить его. Но поскольку рекламирование является еще одним источников дохода компаний. но и достичь конкретные бизнес-цели.com. чтобы собирать все комментарии. науч. Некоторые сайты имеют расширенные опции получения обратной связи. Понимание этих целей как качественно. Некоторые компании тратят много денег и времени. если бы соответствующие данные можно было достоверно собрать со страниц. Установите заметный индикатор кнопку . в которых регистрируется.org. особенно прямо с веб-сайта. заявленные в креативном брифе. а какие . 7. повышение популярности сайта и так далее. становится все более важным понимание трафика сайта и хитов страниц. могут включать повышение используемости/трафика. Главное преимущество здесь в том.opinionlab. 2 Продажи.ua/ . Часто значимость сайта оценивается по трафику. dell. кроме щелчка мышью.OnlineOpinion обеспечивает постраничную рейтинговую систему.com. а успех измеряется количеством хитов. Продукт компании OpinionLab (www. какие основные маршруты выбирает и где обычно заканчивает сеанс.

отслеживании результатов и предлагающих методы повышения посещаемости (рис.org. Альтернативой был бы один из многих пакетов программ. Какие страницы на вашем сайте наиболее популярны? Можете ли вы охарактеризовать поведение и модели пользователей? Эта типовая диаграмма сгенерирована из обычного файла журнала сервера и показывает наиболее посещаемые страницы (см. стр.12).Фаза 5: Запуск и сопровождение 275 записи. цветную вклейку. На практике не многие компании выделяют на это время и ресурсы. 360) http://openlib. 7. К сожалению. 7. Рис.ua/ .12. совсем непросто разобрать эти сырые сведения и превратить их в значимые сводки. специализирующихся на сборе информации.

не входит в круг задач внешней команды веб-разработчиков. Это может быть оскорбительно: все изображения сайта могут быть заменены порнографическими картинками (реальная история. Это может быть более тонко и разрушительно: внезапное. В таком случае желательно иметь в штате специалиста по безопасности. Так или иначе.ua/ .Глава 7 276 Обнаружение хакеров Как узнать.org. что сайт подвергся вторжению? Это может быть ужасно: не останется никакого сайта или весь ваш текст может быть внезапно заменен мусором.13. Однако это может быть задачей внутренней группы . Грустная действительность состоит в том. В декабре 2000 г. необъяснимое увеличение или уменьшение типичного трафика может свидетельствовать о вторжении. А хакеры крадут персональную информацию. так как обычно никто в команде не имеет соответствующей квалификации. когда что-что идет неправильно. такое случалось). Для Интернета они являются эквивалентом разбойников. В этом разделе мы говорим о безопасности на очень элементарном уровне. Чем больше вы наблюдаете за своим сайтом. тем скорее заметите. когда хакеры вынуждают вас выводить сайт из Сети (рис. хакер ворвался в онлайновый магазин The Gap и нанес немало вреда. что хакеров великое множество и они неустанны и агрессивны. вызывают хаос и их почти невозможно поймать. которые пачкают краской из баллончиков дома и автомобили. чтобы предохранять сайт от вторжений хакеров и контролировать повреждения в случае нарушения безопасности. это не должно быть воспринято как всесторонний обзор с практическими ре- Рис. 7.13). врываются в здания и магазины или просто неприятно шумят. как правило.нравится ей это или нет. вы теряете доверие пользователей и доходы. Оставайтесь осведомленными! Укрепление безопасности сайта Безопасность. вынудив его закрыться на время устранения проблем http://openlib. 7.

чтобы приспособить его к вашей собственной технологии разработки.внутренняя команда и только что приняли перепроектированный сайт для запуска. Регулярная регистрация в поисковых системах и продолжающиеся исследования успешности сайта . это момент расставания. Если вы .Фаза 5: Запуск и сопровождение 277 комендациями по безопасности сайта. Не останавливайтесь здесь. «Визуальное оформление и тестирование». над которыми следует подумать.org.внешняя команда. выполнив этот проект. Вы успешно завершили пять фаз разработки редизайна сайта: «Определение проекта». Это будет редизайн? Нет проблем вы обогатились опытом. откорректируйте Базовый процесс. если позволяют время и ресурсы. которые можно добавить к технологии. Сработал для вас Базовый процесс? Какие этапы прошли гладко? Где наблюдались сбои? Оцените.описывают чрезвычайно полезные процессы. Резюме фазы 5 Поздравляем! Перепроектированный сайт запущен и перешел от разработки к сопровождению.глава 8 «Юзабилити-тестирование» и глава 9 «Анализ конкуренции» . и переходите к следующему проекту. как перечень вопросов. Следующие две главы . Если вы . Мы настоятельно рекомендуем их. скорее. Передайте сайт и оцените успех проекта.ua/ . «Производство и контроль качества (QA)» и «Запуск и сопровождение». «Разработка структуры сайта». Поддержание стандартов и включение нового http://openlib. на вас возложена значительная и постоянная ответственность.ваши задачи. Используйте этот раздел.

это как машина. Фактически многие сайты. как сформирована эта машина. В сущности. Тогда долго не придется снова заниматься редизайном. Зачем же так суетиться и тратить так много времени. Перепроектированный сайт .org. разрабатывая рекомендации и планы? Разве это не должно просто идти своим ходом? Возможно. которые гладко вводят усовершенствования и изменения. Брать все с налета редко получается. составление графиков работ и распределение обязанностей. Наличие плана всегда помогает. эксплуатационная поддержка . нет. В самом начале (при определении этапов) или в конце сдачи работы (при подготовке к эксплуатационной поддержке) независимо от задачи мы всегда рекомендуем выделить время на определение целей. распределение бюджета. http://openlib. Однако знать. отвечающие потребностям пользователей. формирование методологии. скорее всего.278 Глава 7 содержимого также будет вашей ежедневной/еженедельной/ежемесячной задачей. Сохраняйте свой перепроектированный сайт здоровым и растущим с периодическими перезапусками. подлежащие редизайну. которая была восстановлена с использованием множества новых деталей.это просто регулярное введение нового контента. всегда полезно. На практике существенная часть сайтов после запуска со временем «хиреет» из-за отсутствия хорошего сопровождения.ua/ . застоялись в «Стране Без Плана» до принятия решения о редизайне. но.

org.ua/ .Фаза 5: Запуск и сопровождение 279 http://openlib.

да.com ПРЕДЫДУЩИЙ F00D.org. но загрузка была долгой. Причудливо и с юмором.COM [ПРЕЖНИЙ] подавал себя в цветах и тематике своей маркетинговой кампании и старомодном стиле 1950-х. а юзабилити было не на высоте.280 Учебный пример Food.ua/ . http://openlib.

(2000 г.Учебный пример 281 Food. цветную вклейку. См. сфокусированного на рестораны и управляемого технологией. обеспечивая рестораны возможностью онлайнового заказа и службой доставки. СОВРЕМЕННЫЙ F00D. основой Food.com обслуживает поставщиков продовольствия. Цели редизайна были больше ориентированы на аудиторию в отличие от прежнего подхода.ua/ . кулинария и новости) и новым.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] развился в продовольственный портал с дополнительными разделами (обеды.) Результат: Улучшение юзабилити благодаря ясным указателям и понятным пользовательским маршрутам. простым и ясным имиджем бренда. стр. Количество онлайновых заказов возросло.com остается «Интернет-служба заказов и доставки». Хотя бизнес продолжает расширяться в различные связанные с продовольствием отрасли.org. 352-353 http://openlib.

http://openlib. что пользователи фактически делают.ua/ . Юзабилити-тестирование отражает то. что по мнению пользователей они могли бы делать.Юзабилити-тестирование 8 Фокус-группы отражают то.org.

Она построена в виде беглого обзора основ. руководящих компанией. Это не юзабилити-тестирование. и эта глава поможет сориентировать вас в этом вопросе. К сожалению. который позволит вашей команде определить наилучшие способы получения прямых откликов пользователей. Хотя любые собранные отклики представляют ценность. что ищут. их результаты радикально отличаются. что они уже проводят проверку юзабилити. персональных мнениях и предубеждениях людей. Почему сайт следует перепроектировать? Одна из причин .org. Команда веб-разработчиков должна думать о юзабилити: будет ли сайт после редизайна функционировать. как запланировано? Желает ли клиент/дизайнер. чтобы при проверке сайта реальные пользователи получили неизгладимое впечатление от этого события? Что может стать камнем преткновения и проблематичным местом? Мы очень верим в значимость проведения юзабилити-тестирования. такой тип генерирования идей полностью основан на предположениях. Понимание юзабилити-тестирования чрезвычайно важно. но на самом деле они работают с фокус-группами или проводят онлайновые опросы.сайт не отвечает потребностям пользователей. и они не могут найти то. http://openlib.ua/ .Юзабилити-тестирование Каким образом сайт перепроектируется? Чаще всего группа людей собирается вместе и предпринимает «мозговой штурм»: «На новом сайте нам нужно это» или «Этот аспект не работает на текущем сайте». Многие компании полагают.

Обратите внимание на слово «фактически». Если пользователи нажимают не на ту ссылку. юзабилити-тестирование . Юзабилити-тестирование отражает. как отдельный пользователь фактически перемещается. Юзабилити веб-сайта является критерием того.ua/ . отыскивает информацию и взаимодействует с вашим веб-сайтом. 2001 («Designing Web Usability». как пользователи будут перемещаться. Управлять самолетом сложно. Насколько легко в действительности заставить что-то работать? Обращаться с консервным ножом легко. осуществлять поиск и взаимодействовать. практичность. http://openlib. Понимание юзабилити Юзабилити определяется как легкость в использовании. Управление видеомагнитофоном должно быть простым. «Символ-плюс». New Riders.useit. с англ. это не их вина . Мы не вдаемся так глубоко в предмет юзабилити.Юзабилити-тестирование 285 Для всестороннего и глубокого проникновения в понятие юзабилити самым подробным источником из существующих является книга Якоба Нильсена (Jakob Nielsen) «Веб-дизайн: книга Якоба Нильсена».com). Результаты незамедлительны и бесспорны.org. 1999) и его онлайновые статьи (www. основанный на подходе «наблюдай и учись». Мы оставляем теорию в стороне и просто объясняем. Один ведущий наблюдает за одним пользователем. В отличие от опросов или фокус-групп..это неудача дизайна. но обычно заставляет задуматься.это процесс один на один. пер. как фактически пользователи действуют на сайте. как можно встроить юзабилити-тестирование в вашу привычную технологию. Понятие юзабилити включает в себя не ваши умозаключения о том.

Можно проводить такие небольшие тесты на всем протяжении процесса разработки. не требующая больших расходов . большинство людей знает. быстрых тестов. Если всегда ждать момента. еще на старом сайте. которая была в середине девяностых годов. вы можете соблазниться идеей рассматривать проверку юзабилити как необязательную. что конкурирующие вебсайты ощутят существенные потери трафика и. настолько разоблачающими. потому что каждый увидит.. в действительности они этого не делают. расширенную стадию про- цесса. соответственно. Я убежден. как обычно. Мой стандартный совет . кажется.Глава 8 286 Якоб Нильсен (Jakob Nielsen) о значении сокращенного юзабилити-тестирования Сейчас ситуация в веб-разработке очень отличается от той. что вы сможете получить бюджет для будущих исследований. Сфокусируйтесь только на одной из трех основных задач на сайте и протестируйте ее. его не стоит делать». хотя. Это одна из самых больших ошибок. а также не будет произведена сегментация аудитории. насколько полезны эти проверки. вероятно. что юзабилити-тестирование обязательно должно быть сложным и дорогостоящим проектом. не удастся сделать вообще ничего. что как только достаточное количество вебсайтов будет руководствоваться принципами юзабилити. так что. что им необходимо провести несколько проверок юзабилити. потери в бизнесе. Многие из существующих веб-сайтов слабо отвечают нуждам посетителей и многие очень трудны в использовании. В проектах редизайна одна из наиболее часто упускаемых возможностей .. Совсем небольшое исследование с тремячетырьмя участниками . Я регулярно подчеркиваю важность небольших. Никогда не говорите: «Мы можем позволить себе только сокращенное исследование.ua/ .org.тестирование в самом начале. Результатом будет реальный стимул к редизайну с учетом юзабилити. Эта разница огромна. когда появятся средства для всестороннего исследования.невероятно ценно. К сожалению. Теперь многие проекты редизайна фактически вызваны именно потребностями юзабилити.все-таки тестировать. но в сокращенном варианте. Барьером для многих является ошибочное мнение. Есть две важных причины не http://openlib. Если у вас. нет времени и денег. Но разница между отсутствием тестирования вообще и получением некоторых данных. В сокращенном тестировании чем-то придется пожертвовать: не будет возможности проверить вторичные функции. они выкажут такое превосходство. когда юзабилити еще не являлось реальным фактором в этой области.в действительности это работа всего на день. Почти всегда результаты таких первых простых проверок являются настолько ценными. Люди наконец начинают осознавать это.

чем кто-либо еще на планете» (Chicago Tribune). (www. Его последняя книга «Веб-дизайн: книга Якоба Нильсена» ( «Designing Web Usability: The Practice of Simplicity» ) была напечатана на 13 языках общим тиражом около четверти миллиона экземпляров. Всегда найдется. ориентированные главным образом на повышение удобства использования Интернета. предлагаемых сайтом. определенно. он знает больше. а его колонка о веб-юзабилити Alertbox. «самым толковым человеком в Сети» (ZDNet). 2. Рассматривайте вебразработку как бесконечный процесс: каждые два года или около того необходимо снова проходить через это и перепроектировать сайт.useit. Тестирование старого дизайна поможет понять восприятие пользователями особенностей функциональности и контента. News & World Report). сам факт редизайна и попыток улучшения вовсе не означает. старый сайт плох.у каждого есть своя теория. который вы считаете проблематичным. Конечно. которые следует сохранить. Вопервых. Что плохо? Вероятно. сейчас насчитывает около 200 тысяч читателей. Во-вторых.ua/ . Вероятно. для команды разработчиков играют роль и реальные жизненные факторы: они должны выполнить проект за строго ограниченный про- http://openlib. Что хорошо? Допустим. а также типов продаваемых товаров. может оказаться в действительности не такой уж большой бедой. Очень важно иметь реальное представление о недостатках сайта перед тем. как начать его редизайн.com) был назван «ведущим мировым экспертом по веб-юзабилити» (U. которые стоят и перед редизайном. Доктор Якоб Нильсен (wwwMseit. Какой-то аспект веб-сайта. совершенных веб-сайтов вообще не существует. а «о том. 287 межуток времени.всегда открытый аспект для анализа. но ведь возможно.com I alertbox). что не все там плохо. Было бы неразумно потерять эти преимущества в процессе редизайна. Рекомендуемая методика юзабилити-тестирования всегда предполагает проверку нескольких версий прототипа сайта по мере его развития. Но без эмпирического понимания ощущений реальных пользователей любой анализ основан на мифе. есть и хорошие стороны. в компании сложилось достаточно мнений относительно проблем уходящего сайта .Юзабилити-тестирование пренебрегать тестированием уходящего сайта: 1. Доктор Нильсен является обладателем 53 патентов США на разработки.org. что усовершенствовать. что работает на уходящем сайте. пытался достичь таких же целей. публикуемая в Интернете с 1995 г. и вы сосредоточили бы ваши ресурсы не в том направлении. Старый сайт. Посмотрите. что делает веб-сайты работающими. что в результате получится совершенный веб-сайт.S. а юзабилити .

ua/ . работчиков. http://openlib. Со всеми участниками может работать день. отдельно. Формальное тестирование может иметь различные формы. стороны) зеркало. Часто устраивается специальная площадка для тестирования. Проведение юзабилити-тестов: четырехэтапный процесс Везде в этой книге основное внимание уделяется базовым процессам. а также арендовать специальное помещение и оборудование для тестирования. но только с каждым участником | ся отдельное тестирование.приблизи. затраты выше. Данная глава тоже не исключение. Стоимость такого тестирования обычно минимальна. а не целый сайт. что работает и что не * но проверяются кем-либо из команды разработработает. неформального подхода.org. подлежащие тестированию. которые близко соответствуют профилю пользователя и которые напрямую не связаны с проектом.• Сеансы можно записывать на видеокамеру.Глава 8 290 Затраты на тестирование Неформальное тестирование . чтобы удостовериться в их выполнимости. При формальном тестировании часто Задачи проверяют конкретные области сайта или используют одностороннее (прозрачное с одной маршруты пользователей. предваритель• Результаты показывают. Задачи. чиков.это проверка «один на один» с друзьями и коллегами. чтобы не смущать участников. специалиста по человеческому фактору. но принято привлекать платного консультанта по юзабилити. Продолжительность одного сеанса . мы предлагаем краткий обзор процесса юзабилити-тестирования.один-два • Ведущий наблюдает (не вмешиваясь) и делает дня с четырьмя-шестью участниками каждый заметки. который включает четыре основных этапа: Этап 1: План и подготовка Этап 2: Этап 3: Этап 4: Подбор участников Проведение сеанса Анализ данных и составление рекомендаций Такое разбиение процесса подходит для любого из трех уровней формальности: упрощенного. Следовательно. как включить юзабилити в технологию редизайна. но только с каждым участником проводитодин ведущий. • За сеансами может наблюдать вся команда раз. Полуформальное испытание повышает планку к следующему уровню: вербуются и оплачиваются внешние участники. В интересах обсуждения лишь того.| Выполняемые задачи определяются заранее. Тема юзабилити очень обширна. тельно один час. полуформального с более расширенным Тестирование «один на один» • • • • • Продолжительность тестирования .

Юзабилити-тестирование 291 http://openlib.org.ua/ .

Основное различие между уровнями заключается в квалификации привлекаемого специалиста. чтобы охватить весь процесс входа. чтобы проверить все. только чтобы они сами обнаружили необходимость входа. оборудование.292 Глава 8 планом. Планы тестов План должен быть обзором и руководством к вашей версии процесса тестирования. что план тестирования в соответствии с состоянием проекта может изменяться от сеанса к сеансу. чем предполагалось. 8.1): • Общие цели/задачи • Методика (процедура тестирования. подготовьте дополнительные задачи. Например. у вас не будет времени. что требует входа в систему. если есть сомнения по поводу входа в систему. с которыми обычный пользователь может (предположительно) справиться за час. контрольный список задач. чтобы отсеять проблематичные. Он должен содержать. следующее (рис. http://openlib. Обязательно нужен план. тестовые вопросы) • Конкретный список задач • Итоговая оценка (анализ данных) • Структура отчета (как планируется представить результаты и рекомендации) План тестирования позволяет согласовать ожидания и цели. чтобы уложиться в пределах установленного времени . помещение и так далее) • Профиль целевой аудитории (кого будут тестировать) • Схема тестирования (ввод в курс дела. по меньшей мере. но они должны иметь конкретные цели.иначе они не будут соответствовать цели сеанса. На случай если поставленные задачи потребуют меньше времени. Насколько будет просто и интуитивно для пользователя выяснить это? Создайте список задач.org. Проверьте задачи заранее. Постарайтесь сосредоточиться на конкретных задачах. Время на тестирование ограничено: на каждый сеанс отводится приблизительно час. Помните. запланируйте ряд тестовых задач. Удостоверьтесь. Дайте пользователям задание сделать что-то. Списки задач Выберите достаточно простые задачи для проверки потенциально проблемных областей. или формального с развернутым.ua/ . полным сценарием. Главное здесь сохранять направленность. Этап 1: План и подготовка Тесты не должны быть сложными. что задачи не слишком просты и не слишком трудны.

org. профиль аудитории. отличается от приведенного здесь NDA (non-disclosure agreement) . вероятно. . пер. Образец плана тестирования. что этот план .лишь образец.1.ua/ . методику и схему тестирования. включая общие цели тестирования.соглашение о конфиденциальности.Примеч.Юзабилити-тестирование 293 Рис. Планы тестирования должны отвечать основным требованиям. http://openlib. Имейте в виду. 8. профиль вашего пользователя.

Пусть он запросит каталог. пусть испытуемый проверит свой счет или исследует схему ипотечных заявок. Образец сценария тестирования Ведущий должен заботиться о продвижении тестирования в нужном направлении. Сделайте задачи в какой-то мере связанными между собой . но делайте их по возможности более универсальными.org.2). держите под рукой сценарий тестирования (рис. что ваша роль . график сеанса тестирования и краткое изложение методики. Вы не должны прямо отвечать на любые вопросы.это может исказить результаты. Затем пусть он войдет в систему. как в их привычной среде: дома или в офисе. что атмосфера сеанса юзабилититестирования должна быть вольной. Это также потребует входа в систему. информативной и не стрессовой. которое осуществляет поставки в их районе.подобно реальным пользовательским задачам. что они включены в сценарий: • Представьтесь и объясните свою роль как ведущего. http://openlib. соответствующих конкретному сайту. Задачи.294 Глава 8 При разработке списка задач имейте в виду.для банка.ua/ . как в реальном мире. При инструктировании участника в день тестирования вы должны охватить следующие важные моменты. который каталогизирует рестораны? Пусть испытуемые скопируют три ресторана в свою папку закладок на сайте (которую они должны будут создать).для национальной сети бытовых товаров. или к недорогому ресторану с живым джазом и сделают предварительный заказ. так что убедитесь. • Если проект . Объясняя участнику ход тестирования. пусть они попытаются забронировать комнату. а это впустую потраченное ценное время. • Уточните. то в качестве одной из типовых задач можно предложить испытуемому заказать подарок из категории «к свадьбе». Вот несколько примеров: • Если перепроектируемый сайт . должны иметь отношение к сайту. должны только наблюдать и делать заметки. Затем пусть они перейдут к итальянскому бистро. найдут план проезда и затем запросят гостиницу относительно вечеринок или крупных собак. Держите пользователя в какой-то колее. не стоит соединять задачи . требует времени и опыта. • Это сайт. Позвольте участникам чувствовать себя комфортно и уверенно. а с другой стороны. безусловно.для гостиниц типа «постель и завтрак». чтобы пользователь выполнял лишь случайные задачи. С одной стороны. Чтобы не отклоняться от курса и не пропустить чего-нибудь в ходе испытаний. Очень легко попасть в ловушку излишних разговоров с участником.молчаливый наблюдатель. чтобы оплатить счет или сделать перевод. создайте непринужденную атмосферу. 8. Разработка задач. • Если перепроектируемый сайт . Сценарий тестирования должен содержать следующее: введение. не хочется.

один из наиболее проблематичных аспектов проведения юзабилити-тестирования.org. Выбирайте тщательно. Рис.2.. разработанного Джеффри Рубином (Jeffrey Rubin) и изложенного в книге «Handbook of Usability Testing» (Справочник no юзабилити-тестированию). что можно сказать перед тестированием. При неформальном и в большинстве полуформальных тестирований можно привлечь знакомых.Юзабилити-тестирование 295 • Дайте обзор целей тестирования.. Этап 2: Подбор участников Поиск потенциальных участников .. Если ваш сайт связан с поставками для автомобилей (бизнес для бизнеса. Это пример того. она не подойдет для тестирования. а ваша мама даже ради мира во всем мире не смогла бы идентифицировать карбюратор. Помните: не читайте сценарий по бумаге слово в слово http://openlib. 8. соседа.ua/ . Можно облегчить задачу поиска: пригласите свою маму. который развозит по пятницам пиццу для персонала. что они не тестируются никоим образом. паренька. только они должны соответствовать профилю целевого пользователя. Тестируется сайт. Образец сценария тестирования. нет ли у него вопросов. • Призовите участников говорить вслух во время испытания. • Получите подпись участника на соглашении о конфиденциальности (NDA) (если требуется) и выясните. но обязательно следите за соответствием участника целевой аудитории. В2В). • Заверьте участников. Пример взят из сценария тестирования.

не связанными с вашей компанией или сайтом. Поскольку они знакомы с ведущим. а формирование команды пользователей для привлечения их и в фокус-группы и для юзабилити-тестирования ценно для любой веб-разработки — с внутренней или с внешней командой. Сначала продумайте лучшие методы для поиска целевых пользователей. хотя они вполне соответствуют требованиям для многих неформальных испытаний. Разработайте методы быстрых.ua/ .296 Тестируйте чаще! Многократное мелкомасштабное тестирование на разных этапах процесса разработки. функциональных возможностей или дейстзий пользователей. Организация сеансов тестирования и поиск идеальных кандидатов может отнять много времени.org.3 и 8. коллеги и друзья — хорошие кандидаты для «пробного прогона» сеанса юзабилити-тестирования. чем единственное тестирование.4). они будут чувствовать себя комфортно. чем реакция реального пользователя. но. не поленитесь добавить это к списку задач для следующего раунда тестирования. Подойдет ли для этого местный еженедельник? Существует ли онлайновый ресурс для размещения объявлений о работе? А объявление в колледже сработает? Опубликуйте объявление в местных списках вакансий (рис. Используйте тестирование при урегулировании споров . более выгодно. рекомендуется вербовать участников вне собственного офиса. такой тип пробных испытаний дает ведущему возможность выявить ошибки в сценарии.ничто не послужит лучшим аргументом. В зависимости от принятых в вашем регионе методов размещения объявлений можно подыскать идеальных кандидатов и меньше чем за неделю. Результаты не заставят себя ждать. Глава 8 Ваши коллеги могли бы подойти. Тестирование с посторонними людьми. К тому же. повторяемых проверок. Если на встречах дизайнеров возникнут вопросы или дискуссии по поводу навигации. http://openlib. обеспечивая вас мнениями о применяемых вами методах и процессах. 8. Таким образом. возможно. чтобы по ходу работ учитывать мнения о конкретных аспектах. даст лучшие результаты.

Профиль участников тестирования Попросите потенциальных участников (откликнувшихся на объявления. наиболее подходящую в отношении конкретной демографии. трейдеров или водите л ей-дальнобойщиков . тем реальнее результаты. отбор и комплектование группы участников юзабилити-тестирования. удобный для http://openlib. Чем лучше подобраны участники. что вся информация конфиденциальна и не будет распространяться далее. запрашивающие их основные демографические сведения. Иначе зачем тестировать? Сведите все собранные данные в таблицу или какой-то другой формат. 8. Причины необходимости этой информации должны быть очевидны: при тестировании на предмет юзабилити требуется. Конкретные профили могут включать высших руководителей. это позволяет проводить отбор и комплектование групп в других городах (если тестирование должно проходить в нескольких регионах). Ставка компаний-подрядчиков и стоимость оборудования для профессионального тестирования .Юзабилити-тестирование 297 Отбор участников Одно из различий между процедурами неформального и формального тестирования — профессиональный отбор участников. почтовые рассылки или рекомендованных кем-то) заполнить в онлайне или отправить по факсу формы.5). определенной экспертом по юзабилити. Ценность этого сервиса заключается в возможности подобрать целевую группу. Кроме того.org.таких участников трудно завербовать традиционными методами.ua/ . особо подчеркните. Во всех формах. касающихся персональной информации. Это включает поиск. что дает более широкую выборку. а также методы использования ими Интернета (рис. чтобы испытуемые как можно ближе соответствовали вашей целевой аудитории.до 1000 долларов за участника (обычно планируют группу от 8 до 12 участников).

ua/ . собранная из онлайновых анкет потенциальных участников тестирования (рис. 8.6). Свяжитесь по электронной почте с претендентами. отве- Рис. . В этой типовой таблице сведена информация. называемым «поплавками». Этим дополнительным участникам. http://openlib. Произведите отсев. чем требуется. все равно необходимо платить. если кто-то откажется.6.org.на случай. 8. 8. Планируйте сначала несколько больше участников.298 Глава 8 просмотра и сортировки (рис.5).

Объясните кратко. но не слишком вдавайтесь в подробности.ua/ . Из 400 ответов 40 были выбраны для просмотра клиентом.org. когда они должны ожидать контакта с вами и что им предстоит делать. Ближе к намеченной дате еще раз проконтактируйте с ними по электронной почте или по телефону (рис. В конечном счете было отобрано 8 участников тестирования http://openlib.Юзабилити-тестирование 299 чающими требуемому профилю. Эти данные были перенесены в файл Excel.7). 8.

какая информация требуется для выявления потенциальных участников.300 Глава 8 Puc.7. Образец письма участникам тестирования http://openlib. соответствующих вашей целевой аудитории. 8. но поскольку дело касается тестирования привычек и навыков использования Интернета. то большинство претендентов имеют доступ в Интернет Рис. Эта онлайновая анкета для профилирования участников тестирования демонстрирует.ua/ . 8.org. Она также может быть разослана и по факсу.5.

Для справок держите при себе сценарий тестирования.словом. навсегда потерянный заказчик). Объясните свою роль как наблюдателя. «Designing Web Usability: The Practice of Simpiicrty». высказываясь только при выдаче новой задачи и при составлении заметок во время сеанса. Уточните.Юзабилити-тестирование Этап 3: Проведение сеанса 301 Знайте. 2000). вышедшие в издательстве «Символ-плюс»: Якоб Нильсен «Веб-дизайн: книга Якоба Нильсена» (Jakob Nielsen. проведя некоторое исследование вопроса» прежде чем предпримете собственное неформальное юзабилити-тестирование. вы уменьшите количество пользователей. а не помощник. В таких случаях читайте книги ~ две книги. что имеете все необходимое. которые уйдут с вашего веб-сайта в расстройстве (это неудача бизнеса и.com. 1994. Если участник задает вопрос. Для некоторых проектов наем внешнего консультанта мог бы быть просто убийственным. Объясните ему. отвечайте только в случае необходимости и не вдаваясь в детали. 1999) и Стив Круг «Веб-дизайн: книга Стива Круга или не заставляйте меня думать» (Steve Krug. New Riders. Позаботьтесь о выборе слов. но только когда все возможности были испробованы.ua/ . Выявляя дефекты сайта. Как раз наоборот. не предвосхищайте результаты. что если он не доводит или не может довести задачу до завершения. «Don't Make Me Think». Если участник становится слишком расстроенным или идет совсем не в том направлении. возможно. Не заостряйте внимани е на формальностях и обеспечьте участникам сеанса наибольший комфорт. это не вредит тестированию и не говорит о его некомпетентности (возможно. Расстроенные участники испытаний не смогут хорошо работать Во время тестирования не проявляйте эмоций. Хотя вы не станете сразу экспертом. Если участник огорчается. John Wiley & Sons. Перед началом сеанса убедитесь. пора выходить из задачи. но несомненно извлечете пользу. сообщив испытуемым количество или объем задач. Не считайте неудавшуюся задачу неудачей тестирования. что вы — именно наблюдатель. Не давайте никаких подсказок . а также справочник по юзабилити-тестированию Джеффри Рубина (Jeffrey Rubin) «Handbook of Usability Testing». Заранее подготовьте соглашения о конфиденциальности (NDA) и любые другие необходимые документы.молча наблюдать. оцените уровень расстройства и оставьте заметку: «Задача потерпела неудачу». Ваша задача .что пользователям будет предложено выполнить ряд задач. насколько это возможно. Видеосъемка сеанса также полезна для просмотра ее впоследствии другими членами команды разработчиков. Вот удобный контрольный список: • Подготовить к подписанию соглашения о конфиденциальности (NDA) • Убедиться в наличии связи с Интернетом Образовывайте себя http://openlib. New Riders. Представьтесь и расскажите о процессе тестирования . взглядом или движением руки.web-redesign.org. Искушение «спасти» кого-то из учестников нанесет вред цели тестирования. Полезные ссылки можно найти на www. когда пора выйти Начинайте каждый сеанс в дружеском и терпеливом настрое. это недоработка команды разработчиков!).

Для каждой задачи старайтесь отметить следующие аспекты: • Смог ли участник тестирования завершить задачу? • Нуждался ли он в помощи? Задача потерпела неудачу? • Сколько времени это заняло? • Какие камни преткновения встретились? Опишите проблемы и препятствия.302 Глава 8 • Если предусмотрена видеосъемка. так как работать от сети может быть проблематично. Будьте внимательны. связанные с задачей) • Иметь упорядоченный список подготовленных задач • Иметь форму послетестового опроса • Подготовить сайт к использованию (сохранить требуемые закладки) Сбор основных данных Во время сеанса тестирования ведите детальные записи. Используйте один и тот же бланк для всех участников тестирования. Добавьте комментарии. Испытуемый расстроенно бормотал? Он восклицал: «Круто!»? Не требуется отмечать абсолютно каждый щелчок или задержку.) • Иметь распечатку схемы сайта. зарядить батареи для видеокамеры.org. удобную для оставления заметок (страницы. 8. Всегда полезно иметь готовый бланк для заметок (рис. но следует быть готовым к исчерпывающему отчету по проблемной области. • Опишите общие наблюдения.ua/ .8). http://openlib. (Замечание: мы не рекомендуем производить видеосъемку на неформальном тестировании. Это будет удобно при анализе заметок и сравнении результатов. На собранных данных вы будете основывать свои заключения. чтобы не упустить ход выполнения задачи.

Заполнение опросного листа не должно занимать более пяти минут. http://openlib.ua/ .8. Не забудьте поблагодарить его. Заплатите деньги участнику сразу по завершении сеанса. и там нет времени для итогов. на других этапах разработки.Юзабилити-тестирование 303 Рис. Начните с общих аспектов и проблем и затем перейдите к деталям . которые вы отметили в своих заметках. До отъезда участнику предстоит сделать еще несколько вещей. Включите персональные наблюдения. После ухода участника. что после трех или четырех сеансов вы не сможете вспомнить многие детали. Выделите особо проблемные области и неожиданные для вас результаты. а затем уже задайте вопросы. Он должен содержать вопросы о впечатлении участника о сайте и работе с сайтом. имейте в виду. 8. Подготовьте послетестовый опросный лист заранее (рис. в этом же проекте. Записывайте все подробно.web-redesign. сеанс за сеансом. Предложите участнику оценить каждый вопрос/пункт по пятибалльной шкале.к областям. наконец. Если время позволяет. если есть время до следующего сеанса. 8. Эту форму можно загрузить с www. сначала дайте ему высказать свое мнение. затем проведите быстрый устный опрос и.org. Сначала дайте ему краткий послетестовый опросный лист. Некоторые тестирования распланированы тесно. Используйте данный образец бланка наблюдений для ведения заметок во время типичного сеанса.com После сеанса Следите за временем. заплатите участнику за его время. Опросите участника устно. Оставьте дверь открытой для возможности дальнейшей связи с ним и последующего тестирования — может быть.9). напишите короткое резюме сеанса и его результатов.

org.web-redesign.com http://openlib. подобный этому. Эту форму можно загрузить с www. 8.ua/ .9.304 Глава 8 Рис.превосходное основание для выяснения пользовательских предпочтений. Послетестовые отзывы и комментарии . После завершения сеанса предложите участнику тестирования заполнить опрос.

Собирайте данные по ходу тестирования .это легко. При выявлении проблемных областей отметьте. пока тестирование еще свежо в вашей памяти. показывающем результаты каждого теста. а затем расположите по приоритетам. Ранжируйте все проблемы в порядке частоты.jup. Охарактеризуйте взаимодействие пользователей с особыми элементами: навигацией. кроме того. способствует накоплению опыта дизайнеров и инженеров.Юзабилити-тестирование 305 Этап 4: Анализ данных и составление рекомендаций На этом этапе требуется опыт. Прежде всего. нужна квалификация.com http://openlib. Сведите все данные в одном формате (для этого хорошо подойдут таблицы).это понятно. а также глобальные аспекты. даже если вы не эксперт. . текстом.. в чем были трудности. полученная информации поможет проверить пра- «Два явных преимущества формального тестирования: оно обеспечивает мнение пользователей. Просуммируйте эти данные. как устранить проблему. необходимое для разработки сайта.используйте даже снимок экрана.org. графикой и так далее. где имеется проблемный момент. концентрируйтесь на функциональности высокого уровня: анализируйте общие аспекты навигации. www. Преобразуйте собранные данные в рекомендации. После завершения всех сеансов тестирования скомпонуйте полученные результаты в итоговый отчет. как и почему пользователю не удалась задача.ua/ . .Jupiter 1999 г. или видишь. Когда понимаешь. то укажите источник проблемы . опишите это подробнее. Это безмерно поможет при обдумывании способов улучшения проблемной области. и не забудьте перенести в файл рукописные заметки. облик страниц и так далее. Если в состоянии определить. проблемные области. вы все равно можете дать полезные рекомендации для усовершенствований. комментарии и пользовательские отзывы из послетестового опроса. Для определения. Если в ходе выполнения задачи встретилась специфическая проблема. сопоставьте текстовые и графические ссылки. такие как уместность размещения логотипа и бренда или несогласованность в названиях и маркировке. позволяя им непосредственно видеть процесс принятия решений типичным посетителем сайта». Затем сфокусируйтесь на конкретных областях и рекомендациях по улучшению пользовательской среды. Тем не менее. и.

org. Итоговый отчет Помещение всех полученных выводов в итоговый отчет обеспечит краткую рекомендацию для клиента и команды разработчиков (рис. Не все отчеты требуют такой детализации (см.306 Глава 8 вильность ваших собственных мыслей относительно сайта. основанные на них.10. 8.ua/ . следует принимать всерьез. результаты юзабилити-тестирования бесспорны. цветную вклейку. стр. Рис. 360) http://openlib. иллюстрирующие конкретные пункты. Если отбор участников производился правильно. любые рекомендации.10). Составьте план реализации ваших выводов и откорректируйте сайт. Сообщите об этих результатах. В конечном итоге улучшение сайта почти гарантируется. 8. которыми он в действительности используется. чтобы он лучше соответствовал тем способам. Разбейте рекомендации на краткосрочные и долгосрочные цели. В данном итоговом отчете в рекомендации включены снимки экрана и выноски.

. . • Методология. профили пользователей.. дает ценные результаты по низкой цене. текст или внутреннее программирование и так далее). • Результаты. рекомендуемые изменения в ближайшее время и в будущем. проще приспособить ваши задачи к особенно сомнительной области. Включите информацию о поставленной участнику задаче.. оно приведет к более успешному и пригодному для использования сайту. только графика. они надеются проверить весь сайт одним махом. обзор отзывов пользователей и так далее. основные данные (без имен) участников и так далее. минимизирует риск перед публичным запуском.Юзабилити-тестирование Итоговый отчет должен содержать следующее: • Резюме. рекомендаций и предложений по областям. всестороннее отражение всех результатов тестирования. Необработанные данные.. Обзор что работает и что не работает на сайте. что это небольшое наблюдение приводит вас к пониманию того. 307 Юзабилити-тестирование. образцы тестовых материалов.. переключившись с роли разработчика на роль наблюдателя. выявляет аспекты. Представление общей и конкретной информации. выполняет самые простые задачи. находит путь назад к начальной странице. наконец. Думая о конкретных целях.. урегулирует споры с помощью фактов вместо предположений.. http://openlib. Наблюдение наводит на размышления. .org. как типичный пользователь справляется с сайтом . . Краткое резюме главных выводов. а вы сможете предотвратить его. когда верхнее руководство. и посмотрите.. ни усовершенствует веб-сайт.. . соглашается потратиться на юзабилити-тестирование.. и — как сказал Джеффри Вин во вступлении к этой книге «пусть все отзывы ваших пользователей будут хорошими». Как только вы отдалитесь. казавшиеся очевидными для разработчика. заметки.. Ставьте осязаемые цели. Проанализируйте потребности вашего сайта. Ясное.ua/ . Описание сути исследования. на которых следует сосредоточить внимание. как оно было организовано. а также тип предлагаемых изменений (например. но не оказавшиеся таковыми для пользователя. методы сбора данных и так далее. Обратная связь бесценна. Резюме главы Хотя юзабилити-тестирование ни создает. • Приложения. Тестируйте часто. • Выводы и рекомендации. Иногда..пытается нажимать на картинки. . его архитектуру и навигацию.вы быстро осознаете. причины возникших проблем и рекомендуемое их решение. Невозможно проверить все аспекты дизайна сайта.. Оно может выявить бедствие. обеспечивает реальные отзывы от реальных пользователей. что же нужно сделать для улучшения пользовательской среды сайта.

на уровне бесчисленных любительских сайтов в Сети.COM [ПРЕЖНИЙ] был состряпан неуклюже. Калифорния Все роли в проекте: Эмили Котлер (Emily Cotler) ПРЕДЫДУЩИЙ CASEYCLAYBOURNE.308 Учебный пример Casey Claybourne Клиент: Casey Claybourne URL: www. чьи дети/мужья/кузены немного знают HTML. которыми так часто вынуждены довольствоваться мелкие бизнесмены и творческие личности.ua/ . Окленд.org. http://openlib.com Студия дизайна: Waxcreative Design.caseyclaybourne.

но процветающий бизнес. покупаемых в Соединенных Штатах.2°$ популярных книг в мягких обложках. 354-355 Статистика: www.ua/ . См.309 Учебный пример Любовные романы составляют 58. уставшие от шаблонов этого жанра. Кейси Клей борн (Casey Clayboume). Ясный. приветствовали высококлассный дизайн обильной восторженной почтой. цветную вклейку. собрала восторженные отзывы о своем уже девятом романе «Прелесть» («A Thing Of Beauty»). Как и у многих людей творческих профессий.35 миллиардов долларов. простой и элегантный дизайн соответствует уровню профессионализма. достигнутому ею в писательской карьере.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] использует ряд графических образов.com/statistics. чтобы отразить утонченный стиль Кейси. что дает 1. она и есть ее собственный маленький. (2000 г.stm http://openlib.rwanational. СОВРЕМЕННЫЙ CASEYCUYB0URNE.) Результат: Лучшее позиционирование в данной сфере деятельности. стр. отмеченная многими наградами писательница.org. созданных специально. Читатели романов.

Каковы цели компании.ua/ . ее продукты и рынок относительно Сети? http://openlib. мы должны понимать онлайновые аспекты их отрасли с учетом конкуренции.org.9 Анализ конкуренции Чтобы стать лучшими партнерами наших клиентов.

но иногда также и вне Сети. формальный или неформальный. возможно. придется потратить шестизначные суммы и выпустить исчерпывающий документ объемом. http://openlib. основанной на их опыте. фокусируется на сравнении фактических интересов и ощущений потенциальных заказчиков — прежде всего в онлайне. не имеющих таких гигантских бюджетов. как роман Л. Анализ особенностей.Анализ конкуренции Конкурентный анализ должен быть частью процесса веб-редизайна с тем или иным уровнем подхода. жестко конкурирующих отраслях. мы рекомендуем провести неформальный анализ особенностей.org. Он обеспечивает представление о сервисе и особенностях конкурентов с точки зрения пользователей. Всесторонний формальный анализ отрасли проводится квалифицированными и стратегически-ориентированными маркетинговыми группами. таких как коммерческие авиалинии или производство компьютерных комплектующих. Толстого «Война и мир». В крупных. В этих случаях на внешний маркетинг или исследование компании. Анализ отрасли в значительной степени сосредотачивается на рынке и позиционировании данного бизнеса в широкой конкурентной среде.ua/ . а уровень может быть и очень высоким. В чем разница между анализом отраслей и анализом особенностей? В квалификации эксперта. бюджете и подходе. могут быть и насущная потребность и бюджет для формального анализа отрасли. В проектах. вооруженными методологией исследований.

ведущей редизайн сайта.возможность моделировать поведение пользователей в сфере деятельности клиента. изменилась . Команда приобретет бесценный опыт . кто и что делал на разных сайтах в его отрасли. интенсивно просматривал. Клиент усиливал одни идеи конкурентов и отвергал другие.org. которые помогут ему оценить. вероятно.ua/ .что не работает для пользователей. Это поможет сформулировать цели редизайна.получит данные. Клиент . Через анализ особенностей и команда и клиент придут к лучшему пониманию.особенно в отношении целей редизайна.даже если сайт был сформирован всего год назад. функциональность и сервисы предлагают его конкуренты в онлайне. В этой книге речь идет.внешний или внутренний . что неформальный анализ. http://openlib. При изначальном формировании сайта клиент. Включите в анализ и существующий сайт. что работает и не менее важно . Проведение анализа конкуренции .Анализ конкуренции 313 Результаты этого исследования будут полезны и команде веб-разработки и клиенту. возможно. Проведение неформального конкурентного анализа ценно. вероятно. в частности. Его оценка на фоне конкурирующих сайтов даст возможность не только сравнить какие-либо его особенности и ожидания пользователей. рекомендуемый в этой главе. На протяжении всей книги мы призываем при первой возможности нанимать экспертов. а не маркетинг и брендинг или анализ продукции компании при ее текущем или будущем позиционировании. включает изучение особенностей и ощущений посетителей в онлайне. какой контент.это ответ на вопрос: «Что делают конкуренты для обеспечения сервисов и контента. тем. А проведение неформального анализа особенностей важно по другой причине: это позволяет самой команде дизайнеров и разработчиков. Формальный анализ отрасли и неформальный анализ особенностей Поймите.не исключение. уже проведены компанией и обеспечили ей понимание того. которые привлекательны и значимы для пользователей?». Эти исследования. Квалифицированно собранная информация всегда заслуживает внимания и обычно подчеркивает моменты. что это помогает команде начать думать с позиции пользователя в отрасли клиента. новый просмотр. На стадии выяснения фазы 1 получите от клиента как можно больше имеющейся информации. Существенные изменения в отрасли могут даже стать главной причиной редизайна сайта. Теперь. которые неспециалисты даже не рассматривают. когда сайт находится в редизайне. пришло время устроить еще один. а такой подход очень важен. Окончательная цель анализа особенностей вполне определенна . Отрасль. участвовать в процессе сбора информации. но и выяснить его конкурентоспособность. чем она является сейчас и к чему стремится .

если не все. конкуренты находятся в том мире. ее продукты и рынок с точки зрения Сети. Иногда основные.org.рассмотреть цели компании.314 Глава 9 прежде всего. на расстоянии телефонного звонка. http://openlib. хотя «мир кирпича и цемента» тоже не следует игнорировать. об онлайновой конкуренции. Задача команды веб-разработки при анализе особенностей . Но анализ всей отрасли вне предлагаемого контекста.ua/ .

Все эти сайты принадлежат той же отрасли и поэтому составят конкурентную группу. Подойдите к этой задаче с позиции типичного пользователя и «покупайте» в отрасли клиента тем же способом. оставайтесь благоразумными. Через всю эту книгу красной нитью проходит девиз: ДУМАЙТЕ. Конечно. Введя в поисковый механизм эти три ключевых слова «кожаные меховые рукавицы».Анализ конкуренции 315 Как стать опытным пользователем в отрасли клиента Процесс становления опытным пользователем начинается во многом подобно началу онлайновых исследований для собственных нужд . Просматривая многие из этих сайтов.org. или их аналогах и посещения затем сайтов нескольких конкурентов. Допустим. вы быстро станете опытным пользователем в отрасли вашего клиента. Это требует времени. представленном клиентом (в опросе клиента в Фазе 1: Определение проекта). специализирующихся на спортивной или верхней одежде.кожаные меховые рукавицы.ua/ . вы типичный пользователь для той отрасли — станете более сведущим в отношении не только конкретного товара. Сравнивайте конкурентов. Конкурентный анализ . но и самой отрасли. пройдя как типичный пользователь сайт за сайтом в конкурентной группе. некоторые из них даже есть в списке признанных конкурентов. Возможно.с поиска в Yahoo! или Google. вы получите дюжину или более сайтов из каталога. Используйте сайты конкурентов для совершения сделок и поиска информации. но.не исключение. как «покупали» кожаные меховые рукавицы. один из товаров клиента . КАК ВАШИ ПОЛЬЗОВАТЕЛИ. Если ваш кли- http://openlib.

нанять себе эксперта по реактивным двигателям. Этап 1: Определение процесса Четко определите. а еще лучше. если клиент организует для вас подробную экскурсию по своему предприятию. подлежащий сдаче. заставить это работать. Принятие решений на основе факторов. В частности. коммерческое техническое обслуживание реактивных двигателей при федеральном авиационном агентстве или разведение собак породы ши-тцу).316 Незнакомые отрасли Если область клиента настолько непонятна технически. Но практикуйтесь насколько это возможно без серьезных вложений. вам следует запланировать интенсивный курс авиационной терминологии. что вы не знаете даже основной терминологии (например.ua/ .легкость в использовании. который может быть расширен или сокращен в зависимости от времени. составить перечень особенностей. необязательно покупать несколько самых новых моделей. провести анализ и юзабилити-тестирование и наконец создать отчет. генная инженерия питательных добавок для крупного рогатого скота. процесс все равно будет состоять из одинаковых четырех этапов: определить процесс. Модифицируйте ее в соответствии с конкретными возможностями по времени и ресурсам и требованиями отрасли. Отвели вы на него 20 часов или 200 часов. кто будет использовать итоговые результаты? Они предназначаются главным образом для проектной группы? Эти результаты будут использоваться для генерации идей по поводу контента? Для лучшего понимания отрасли? Сформулируйте ясные цели. нравится или не нравится и другие нечеткие критерии. ресурсов и бюджета. Используйте в качестве руководства приведенную здесь таблицу. (Замечание. Будь это ассигнованный клиентом компонент. которыми не очень терпеливые и не слишком квалифицированные пользователи выражают свои онлайновые ощущения. следует сразу же просмотреть несколько сайтов и сформировать основное мнение. понятный процесс.) Глава 9 ент продает автомобили. значимых для пользователей . какую информацию вы собираетесь генерировать.org. .неизмеримо поможет в понимании отрасли клиента в Сети. или текущая работа команды как этап про- http://openlib. Анализ конкурентов с пользовательской точки зрения позволяет отойти от движущих мотивов веб-разработчика: довести это до завершения. Проведение анализа Проведение анализа особенностей — элементарный. если вы в самом деле готовитесь к редизайну веб-сайта компании по техническому обслуживанию реактивных двигателей.

org.ua/ .Анализ конкуренции Illllil l i l l l \i| 317 If illliilS l i l i l l :Й-! i i l l http://openlib.

и не игнорируйте сайты брошюрного типа. которые в точности соответствуют вашему клиенту? Выберите главные. Кто ключевые игроки в отрасли . так и на сайтах авиалиний. чтобы выяснить две вещи.com или ual. например southwest. методологию. сдаваемые компоненты. которые лишь частично перекрываются с интересами клиента. Имеются ли сайты. Соберите информацию. два человека. Клиент уже предоставил свой список основных конкурентов (в клиентском опросе). который детализирует общие цели. Рассмотрим пример. Учтите.1). Многие фирмы проводят как раз такие анализы и берут за них существенную плату.сайты.com.org. включите затраты на сокращенный анализ в Фазу 1: Определение проекта как часть процесса выяснения. 9.ua/ . график работ и бюджет (рис. особенно на оффлайновой арене. Формирование плана исследований Сформируйте план исследований. Если вы можете запросить за эту работу дополнительное финансирование. Исследования должны проводить.com. Для этих последних могут потребоваться дополнительные поиски и исследования. Также выберите несколько других.com. Также не упустите из виду более специализированные туристические сайты .от 20 до 70 часов) до месяца (для более крупных бюджетов). что имеются также оффлайновые http://openlib. которых необходимо обойти? Кто прямые конкуренты вашего клиента . Проект редизайна онлайновое туристическое агентство. мнение клиента может быть субъективным или ограниченным лишь частью отрасли. целевая аудитория которых могла бы посещать сайт вашего клиента? Сначала очертите широкий круг.318 Глава 9 цесса формулирования. Если вы не можете пропустить конкурентный анализ отдельной бюджетной строкой. Определение конкурентной группы Цель здесь состоит в том. Соберите побольше информации. из реклам (какие рекламные щиты вы видели в последнее время?) и других ресурсов (телефонных книг и справочников).com или Travelocity.com или letsgo. как это делают пользователи: с помощью поисковых механизмов. Теперь настало время посмотреть на их сайты. чтобы обеспечить различные точки зрения. определите. например lonelyplanet. Проверьте сайты прямых конкурентов сайты других туристических агентств . Не ограничивайтесь только списком клиента.один или два из многих очень различных сайтов с увлекательными путешествиями типа away. Конкурентные анализы широко различаются по объему и контексту в зависимости от искомых подробностей.тяжеловесы.com. или могли быть забыты некоторые ключевые игроки. сделайте это.как в порталах типа Expedia. В зависимости от времени и ресурсов этот процесс может занять от недели (при малых или средних бюджетах . по крайней мере. или то и другое. какую пользу вы надеетесь извлечь из этого анализа.

связанных с сайтом компании и отраслью http://openlib. а также детальную информацию как о пользователях. В более подробную версию включите данные о команде и масштабе проекта (с графиками задач и распределения времени).Анализ конкуренции 319 Рис. 9. основная методология и сдаваемые компоненты. так и об основных задачах.1. Это пример плана анализа.org. в котором выделены общие цели и задачи.ua/ .

чтобы обеспечить широкую.ua/ . Теперь сужайте круг конкурентов. Свести его к 12 сайтам или меньше может оказаться трудной задачей. сколько необходимо. никаких деталей) для выделения категорий в пределах отрасли. Куда он вписывается http://openlib. Глава 9 конкуренты: 1-800#. 9. по крайней мере. если у вас есть ресурсы. уменьшите это число. включая тестирование. описание особенностей и составление рекомендаций. Сортируя их. но все же сфокусированную точку зрения на вашу отрасль. выделение большего времени на сайт даст лучшие результаты. но не больше дюжины. ограничьте количество сайтов для анализа или ограничьте время. теперь быстро оцените каждый сайт (пятиминутная оценка. Возьмите. пять.7). Вы должны выбрать столько сайтов. Категоризация конкурентной группы Сайты выбраны.2 . в зависимости от отрасли. Выберите примерно 20 для начала. Обычно их множество. выделяемое на анализ каждого сайта. даже сотня. На рисунках представлен пример конкурентной группы в индустрии туризма (рис. Если с ресурсами или бюджетом сложности. разумно будет отвести несколько часов на сайт. Простая арифметика: конкурентная группа из 12 сайтов займет дня полтора как минимум. Начните с существующего сайта.9.320 Время и бюджет Выделите минимум по одному часу на анализ каждого сайта из конкурентной группы. круглосуточные каналы обслуживания заказчиков и (забыли?!) реальные туристические агентства с кассовыми залами или службой заказов билетов по телефону. Очевидно.org.

9.2.3. 9.ua/ .com (Категория: портал) Puc.org. Travelocity.com (Категория: портал) http://openlib. Expedia.Анализ конкуренции 321 Puc.

travel. аюау. Netscape Travel Center: webcenter. 9.322 Глава 9 Рис. 9.com (Категория: портал на поисковом механизме) Puc.5.4.netscape.ua/ .сош (Категория: увлекательные путешествия) http://openlib.org.

9.6. 9.org.ua/ .com (Категория: авиалинии) http://openlib.Анализ конкуренции 323 Puc. lonelyplanet.ual.7.com (Категория: сайт брошюрного типа) Puc. United Airlines: www.

логически подойдут для нескольких категорий. нет необходимости в слишком подробном перечислении. Исследуйте связанные категории.8 и 9. не забудьте посмотреть на сайты. каждый сайт может быть помещен только в одну из них. Вооружитесь столом в конференц-зале или воспользуйтесь большой белой доской. как поиск. например выставки чистокровных собак или ветеринарное акушерство. авиалинии и так. Определите лучшие навигационные методы. например порталы. что предлагает каждый из выбранных сайтов (рис. не делайте их слишком конкретными. каждый сайт должен попасть только в одну категорию. с которой можно стирать. действия. . Перечень особенностей — краткое перечисление того.. посвященные другим мелким породам. Начертите таблицу и создайте начальные категории. Определите уместность отрасли. но у каждого своя специфика. Это ограничение поможет отразить истинную сегментацию рынка и несомненно упростит весь процесс.Глава 9 324 Категоризация Упростите процесс категоризации. Произведите окончательный отсев. функциональные возможности. Некоторые из них. если они лучше соответствуют им (подвижность стикеров делает такое перемещение мгновенным). что имеется в местной сети. в общей картине отрасли? Категории должны быть широкие. чтобы сортировать и разбивать на категории.. Все эти сайты связаны с туризмом. Переименуйте категории. используя самоклеющиеся стикеры. как разведение ши-тцу. графика. Хотя в одну категорию могут попасть несколько сайтов. которые можно перенять. Если вы работаете над чем-то. это не список всего. Подключайте воображение. Проанализируйте все элементы. увлекательные путешествия.выберите наиболее подходящую. или переместите сайты в другие категории.9). столь же специфичным. что и как можно делать. Настройте свой перечень особенностей для лучшего соответствия отрасли. мультимедиа. если требуется разбить их (для этого удобна доска. Можно получить адекватное представление об онлайновой конкуренции http://openlib. можно было бы выделить там несколько категорий: экологический туризм. Вспоминая пример индустрии туризма. Контент.ua/ . Разместите компании в соответствующих категориях таблицы. Распечатайте логотипы и URL компаний и прикрепите их на стикеры. с которой можно стирать). Перечислите их все. Идея здесь в том. Помните. что и как можно посмотреть. Включите такие особенности. туристические порталы. регистрация и доски объявлений. 9. Сделайте его выполнимым и укладывающимся в бюджет. далее.org. Выясните скорости загрузки и объем графики на разных конкурирующих сайтах. Этап 2: Составление перечня особенностей Нет.

Решите как пользователь. что этот пример сосредотачивается на графике и функциональности.ua/ . Заметьте. Рис.8. В итоговом отчете конкурентного анализа вы сведете этот перечень особенностей в таблицу для окончательного сравнения сайтов. http://openlib.. стоит ее использовать или не стоит. 9. Обобщенный пример особенностей графики и контента на конкурирующих сайтах. чтобы указывать в списке каждую мельчайшую особенность каждого сайта. Определите. насколько позволяет время. При оценке сайта ранжируйте значение каждой особенности.org.Анализ конкуренции 325 и без того. нравится она вам или нет.. Будьте настолько усердны и настолько вдавайтесь в детали. как она служит общим целям сайта.

.org.. а этот пример ориентирован на контент.ua/ .9. 9. Ваш список особенностей должен быть сгруппирован аналогично http://openlib..326 Глава 9 Рис.

Анализ конкуренции 327 http://openlib.org.ua/ .

настоятельно рекомендуется проверить одну или две особенности на ее легкость в использовании на сайтах из конкурентной группы. арендовать автомобиль в Рейкьявике или заказать пешеходную экскурсию по Хельсинки. которые могут быть выполнены на всех сайтах группы. Сбор данных о каждом сайте в конкурентной группе . По большей части такой тип испытаний будет бо- http://openlib. Если ваш перепроектируемый сайт имеет несколько разных целевых аудиторий. какими являются цели анализа и тестирования. В зависимости от целей вашего редизайна эти задания МОГУТ быть очень простыми или очень сложными. Возвратите несколько полученных предметов. ориентированные на каждую аудиторию.org. Выполнение индивидуальных исследований После того как все сайты из конкурентной группы соответственно оценены по перечню особенностей. Насколько трудно найти и заказать 2 билета на рейс в Токио? А узнать время прибытия самолета? Попытайтесь найти мотель на Мадагаскаре. Вы уже видели его при оценке особенностей. Определите некоторые общие задачи. Проведение неформального юзабилити-тестирования Неформальное юзабилити-тестирование делает оценку более глубокой. Насколько просто или трудно найти лампочку нужного размера. если позволяют время и бюджет. Ведите себя как реальный пользователь. которая в зависимости от глубины и сложности выполняемого исследования может быстро истощить бюджет. Опять же следует определить. типа и яркости? Подождите несколько дней выполнения заказа.ua/ . каждый оценщик должен составить свое мнение о каждом сайте с точки зрения пользователя. тем более сведущи в отрасли вы будете. Посмотрите на каждый сайт повнимательнее. выбирайте задачи. 9. Насколько это просто? Обратитесь за помощью в бюро обслуживания заказчиков. поэтому при трудностях с бюджетом можно остановиться только на одном (индивидуальная оценка).328 Глава 9 Этап 3: Проведение анализа и тестирования Определив конкурентную группу и составив перечень особенностей. посмотрите еще раз. можно приступать к фактическому анализу. и учесть собственные возможности до времени и ресурсам. Чем лучше будет изучена конкурентная группа. Пожалуйтесь. Это стадия. Если имеются ресурсы. При анализе отрасли осветительных приборов закажите несколько лампочек. Каждый из них работает сам по себе. Здесь представлены два подхода: индивидуальная оценка и неформальное юзабилити-тестирование. Снова рассмотрим индустрию туризма.13) для заполнения информацией по каждому сайту в конкурентной группе. Заготовьте простой бланк (рис.наиболее трудоемкая часть всего анализа.

9.org.ua/ . на которые следует обращать внимание при просмотре каждого веб-сайта во время индивидуального анализа http://openlib.13. Этот аттестационный бланк отражает ряд основных аспектов.329 Анализ конкуренции Рис.

каким должен стать контент нового сайта. Какие результаты наиболее неожиданны? Что вызывало положительные впечатления пользователя? Что выводило из себя? Остальная часть отчета должна отразить методологию процесса и сам процесс и должна включать снимки экранов и обзор страниц просмотренных сайтов наряду с тщательно сформированными (проверенными и перепроверенными) таблицами для сравнения (рис. Однако это может быть чрезвычайно полезно и для клиента. удобного для чтения и просмотра. Этот отчет покажет. Изложите основную суть. Этап 4: Создание итогового отчета Сведение полученных результатов и информации в общий официальный итоговый отчет . что интересного предлагают другие лидеры отрасли или конкуренты.заключительный этап конкурентного анализа независимо от уровня его формальности. Результаты того стоят . Потратьте немного времени и денег. чем оценка сайта одним пользователем в течение часа. В первую очередь. Итоговый отчет наиболее эффективен.org. Очевидно формальность итогового отчета зависит от того.для обоих. и в некоторых случаях это потребует фактических покупок. полный конкурентный анализ нужен команде для совместного обдумывания проекта. а это важно при принятии решения. если он скомпонован в форме краткого резюме.330 Глава 9 лее глубокий. шттттжжшт ш http://openlib.14). особенно если клиент начинает оценивать сервисы и особенности сайта для его редизайна.ua/ . для кого он создается: для команды веб-разработчиков или для клиента? Чаще всего . На одной или двух страницах отразите главные выводы и рекомендации. 9. Вы захотите проанализировать задачу от начала до конца.

org.ua/ . Этот образец страницы итогового отчета показывает общий вид одного из исследованных сайтов вместе с несколькими сопутствующими снимками его страниц.Анализ конкуренции 331 Puc. Для полноты оценки справа вверху приведены краткий обзор сайта и его рейтинг (взятый из итоговой таблицы) http://openlib.14. 9.

Таблица позволяет наглядно сравнить перечисленные слева особенности сайтов http://openlib. Рис. Возьмите перечни особенностей для каждого проанализированного сайта и объедините их в таблицу. сайты авиалиний и сайты увлекательных путешествий.сайты. Добавьте к списку особенностей задачи. приведите в таблице и подкатегории Замечание: этот образец используется только в качестве наглядного пример