http://www.natahaus.ru
http://www.natahaus.ru
http://www.natahaus.ru Келли Гото и Эмили Котлер
Веб-редизайн: книга Келли Гото и Эмили Котлер Перевод Г. Нифонтовой Главный редактор Зав. редакцией Научный редактор Редактор Художник Корректор Верстка
А. Галунов Н, Макарова А. Михайлов Н. Макарова В. Тренда С. Беляева Н. Гриценко
Гото К. и Котлер Э. Веб-редизайн: книга Келли Гото и Эмили Котлер. - Пер. с англ. - СПб: СимволПлюс, 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,
[email protected]. Лицензия ЛП N 000054 от 25.12.98. Налоговая льгота - общероссийский классификатор продукции ОК 005-93, том 2; 953000 - книги и брошюры. Подписано в печать 08.01.2003. Формат 70x90 У16. Печать офсетная. Объем 23,5 печ. л. Тираж 3000 экз. Заказ N 667 Отпечатано с диапозитивов в Академической типографии «Наука» РАН 199034, Санкт-Петербург, 9 линия, 12.
http://www.natahaus.ru
Оглавление
Об авторах Вступление Джеффри Вина Предисловие Введение Глава 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://www.natahaus.ru Оглавление Понимание возможностей аудитории Анализ возможностей аудитории Определение технических потребностей Анализ отрасли Резюме этапа выяснения Определение окончательных целей Подготовка креативного брифа Создание плана проекта Детали и уточнения Составление бюджета Понимание концепции разбухания проекта Распределение бюджета: что и как оценивать Отслеживание времени Составление графиков работ Обзорный график работ Подробный график работ с компонентами, подлежащими сдаче Формирование проектной группы Организация демонстрационной площадки Планирование юзер-тестинга Разработка плана юзер-тестинга Что такое онлайновый опрос? Что такое проверка с помощью фокус-групп? Что такое юзабилити-тестирование? Начало работ над проектом Резюме фазы 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
Оглавление Глава 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
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
Об авторах
UTli
Келли Гото (Kelly Goto) - пользующийся успехом лектор и преподаватель в области веб-разработок, информационного дизайна и пользовательской среды. Ее доклады и лекции вызывают неизменный интерес на конференциях и в кулуарах, на занятиях и в перерывах. Келли удается обсуждать сложные разделы технологии в доступной и даже увлекательной форме. Ранее, будучи отмеченным наградами креативным директором сайта Idea Integration (www.idea.com), Келли успешно управляла редизайном многих сайтов - от индивидуальных до сайтов корпоративного уровня. В области коммерческого дизайна начиная с конца 1980-х (помните, когда инструментом дизайнеров был PageMaker версии 1.0?) Келли работала в качестве креативного директора, дизайнера и продюсера для многих значительных заказчиков, включая Warner Bros. Online, National Geographic Online, Adobe Corporation, Paramount Television, Macromedia Corporation и Sony Pictures. В настоящее время, возглавляя gotomedia, inc. (www.gotomedia.com) - онлайновый консультационный центр по проблемам пользовательской среды и дизайна средств взаимодействия, Келли продолжает развивать новые методы совместной работы в области цифровых масс-медиа. Когда Келли не привязана к своему ноутбуку, ее можно найти в странах третьего мира, где она не проверяет свою электронную почту. Эмили Котлер (Emily Co tier) - графический дизайнер, веб-дизайнер, журналист и писатель-романист. Занимаясь дизайном с конца 1980-х (помните ручное выравнивание и вывод пленок?), она всегда имеет много предложений по работе в печати и в Интернете. Работая главным образом над небольшими сайтами для отдельных творческих личностей и малых предприятий, Эмили специализируется на создании (или редизайне) недорогих эффективных сайтов. В числе ее клиентов есть именитые авторы статей в «Нью-Йорк Тайме» Джулия Квинн (Julia Quinn) и Сьюзен Андерсен (Susan Andersen), а также много менее известных, но процветающих компаний, включая агентство по заказу билетов Artist Booking International в Лос-Анджелесе, фирму технических писателей Pomegranate Consulting в Денвере и фотоагентство Kira Stewart Photography в Сиэтле. Постоянный автор публикаций в Publish Magazine с 1998 года, Эмили известна своим легким и ясным стилем, оживляющим сухие темы и приносящим успех страницам журнала. В настоящее время она совершила большой прыжок в своей карьере и перешла в Waxcreative Design (www.waxcreative.com) в Окленде, Калифорния, в качестве креативного директора. Ее любимыми способаЭмили и Келли в усердной работе ми отвлечения от киберпространства являнад завершением этой книги,
ются сноубординг и горы штата Колорадо.
май 2001, Окленд, Калифорния
Благодарности Мы не одни создавали эту книгу. Если бы к ее написанию имели отношение только Келли и Эмили, это заняло бы по крайней мере вдвое больше времени и не дало бы столь же богатого информационного материала. Мы обязаны многим талантливым личностям и должны выразить много благодарностей... Спасибо нашим семьям (особенно Брайану) и нашим друзьям, которые продолжали любить нас и поддерживать шутками, несмотря на нашу постоянную занятость и обязательное включение слова «книга» в каждый разговор; и простите нас за асоциальное поведение. Благодарим издательскую группу New Riders - Стива Вейсса (Steve Weiss), Дэвида Дуиера (David Dwyer), Линду Бамп (Linda Bump), Дженнифер Еберхардт (Jennifer Eberhardt), Криса Нельсона (Chris Nelson), Одри Дойл (Audrey Doyle), Эллен Бутчарт (Ellen Butchart), Уила Круза (Wil Cruz), Джейка МакФарланда (Jake McFarland) и вообще всех - за энтузиазм, внимание к мелочам и неизменное понимание, проявленные при оформлении и издании этой книги. Благодарим Стива Котлера (Steve Cotler), который являлся богом грамматики, ходячим тезаурусом, голосом разума и критическим рецензентом на протяжении всего процесса создания книги - его беспримерная редакторская помощь, неописуемое великодушие и работоспособность, а также невообразимая точность сделали эту книгу лучше (это еще слабо сказано!). Благодарим Чэда Кэссирера (Chad Kassirer) и Скана Долана (Scan Dolan), разносторонних экспертов в области производства и технологических процессов, за потраченное ими время на рассмотрение материалов и за очень ценные советы. Благодарим оформителей нашей книги - Рени Фрисби (Renee Frisbie), верстальщика и дизайнера (он поработал над каждой страницей), и Даррена «Дага» Марзорати (Darren «Dag» Marzorati) с Серен Ховес (Serena Howeth), дизайнеров обложки (вдохновленных, действительно вдохновленных), - каждый из них превзошел самого себя... снова. Благодарим также Кима Скотта (Kim Scott), разработчика макета, за его удивительную скорость в работе и внимание к мельчайшим деталям. Мы благодарны также Дебу Шерману (Deb Sherman), фотографу, которому удалось запечатлеть реальных, вдохновленных работой над книгой Эмили и Келли, а не вечно спешащих, истощенных авторов, которыми мы (иногда) становились. Благодарим сотрудников Thunder Lizard Productions, особенно Стива Бробака (Steve Broback), Джима Хейда (Jim Heid) и Тоби Малина (Tobi Malina), за организацию «содержательных конференций» и предоставление места для обсуждения вопросов, ставших предметом этой книги. Благодарим персонал «Publish Magazine», в частности Мелиссу Рейен (Melissa Reyen), за воодушевление и поддержку и за терпеливое ожидание Эмили в течение года, когда она была занята только книгой. Благодарим сотрудников офиса Idea Intergation в Сан-Франциско (бывший Red Eye Digital Media), особенно Эрика Торна (Eric Tarn) за его неизменную лояль-
ность и поддержку, а также Кевина Чавари (Kevin Chavaree), Алона Саланта (Alon Salant), Томаса Чанга (Thomas Chung) и Джулию Боудл (Julie Bowdle). Особую благодарность выражаем Серен Ховес (Serena Howeth), Эунис Мойл (Eunice Moyle), Крейгу Дрейку (Craig Drake), Алексу Ире (Alex Yra), Кайену Нассири (Kian Nassiri), Рэйчел Кальман (Rachel Kalman) и всему штату дизайнеров Idea за поддержку и понимание длительного отсутствия их креативного директора. Благодарим группу поддержки в Waxcreative Design: Брайана Коглей (Brian Cogley), Кейт Лаукс (Kate Laux), Джудит Коллин (Judyth Collin), Сьюзен Эшер (Susan Asher), Дона Эшера (Don Asher), Джулию Розелли (Julie Rozelle), Аби Котлера (Abi Cotler) и всех заказчиков Waxcreative, которые согласилась на некоторую задержку в исполнении их заказов в период создания этого опуса. Благодарим Шерил Хамптон (Sheryl Hampton) и Лайзу Лопак (Lisa Lopuck) за дружеское партнерство и продолжительную поддержку. Благодарим также Эрика Отта (Eric Ott) и Дайану Смедлей (Diana Smedley) за сотрудничество и постоянные обновления. Благодарим компании и коллег, которые предоставили материалы для этой книги: Phinney/Bischoff Design; Werkhaus Design; Idea Integration в Сан-Франциско; Idea Integration в Хьюстоне; gotomedia, inc. и Waxcreative Design. Спасибо - огромное спасибо - всем рецензентам, внесшим свой вклад в эту книгу: Джеффри Вину (Jeffrey Veen) за его проникновенное вступление, а также Лей Дункан (Leigh Duncan), Кейт Гомолл (Kate Gomoll), Джиму Хейду (Jim Heid), доктору Якобу Нильсену (Dr. Jakob Nielsen), Лесли Финней (Leslie Phinпеу), Ани Фио (Ani Phyo), Дэвиду Сигелу (David Siegel), Эрику Уорду (Eric Ward), Линде Вейнман (Lynda Weinman) и бесподобному Джеффри Зелдману (Jeffrey Zeldman) (которого зовут также Theda Вага). Кроме того, Эмили благодарна Келли, а Келли благодарна Эмили - главным образом за то, что мы не убили друг друга в азарте работы и вернулись к нормальной жизни хорошими друзьями.
Посвящения Моим учителям, вдохновившим меня, - Генриетте Дэвис (Henrietta Davis), Полли Брэгг (Polly Bragg) и Биллу Брауну (Bill Brown). И моим маме и папе за годы моего воспитания, обучение и поддержку, Келли Гото Моим родителям, Стиву и Джейн, которые поддерживали во мне веру в то, что я могу добиться чего-то в жизни, особенно когда я упорно трудилась без особых успехов... И Брайану, которого мне посчастливилось встретить и который напоминал мне, что я потрудилась уже достаточно и можно немного просто пожить. Эмили Котлер
Вступление Джеффри Вина Можно сказать, что в своей карьере я кое-что сделал в области редизайна. Когда я впервые пришел в журнал Wired, еще в начале возникновения Сети, мне сразу посчастливилось сотрудничать с самыми удивительными людьми, которых я когда-либо встречал. Наша цель была скромной: сделать из новой среды, представлявшей из себя в то время набор протоколов и стандартов, новое средство массовой информации. Тем не менее, следует признаться, что ни один из нас тогда не понимал, что мы делаем. Шел 1994 год. HTML был набором от силы двух дюжин тегов. Программа Mosaic была почти единственным броузером, используемым всеми, и она даже еще не отпраздновала своего первого дня рождения. Netscape, Internet Explorer, таблицы, фреймы, JavaScript, каскадные таблицы стилей - все это еще только задумывалось. Никто не слышал термина «е-коммерция», никто не знал об информационных архитекторах, а термин «дот ком» был частью имени домена, а вовсе не представлял новую экономику. При такой неопределенности мы делали то, что каждый делал бы в подобной ситуации: мы изобретали нечто по мере необходимости. Той осенью мы сформировали один из первых коммерческих сайтов в Сети, HotWired.com, и отделились от нашей материнской компании в надежде сформировать совершенно новую информационную среду. В одно прекрасное утро в 9 часов мы включили систему, открыли бутылку шампанского и наблюдали, как наши первые немногочисленные пользователи посещали на-
ше создание. По мере роста трафика мы просто разбухали от гордости. А затем стала прибывать электронная почта. Пользователи писали: «Я не могу ничего найти!», «Ну и что же, спрашивается, означают эти иконки?», «Почему все работает так медленно?» Со временем стало очевидным, что эта новая информационная среда ставит целый ряд новых проблем, включая легкость, с которой пользователи могут присылать свои отзывы - как положительные, так и отрицательные. Мы быстро наняли кого-то для сортировки почты и переадресации ее соответствующим специалистам. Но тогда мы стояли перед реальной проблемой - нужно было как-то реагировать на все эти замечания. Вот так начался наш первый редизайн. Построение веб-сайта во многом сродни участию в марафонском забеге. Работаете, работаете и наконец в день запуска пересекаете финишную черту. Хотя между реальным забегом и виртуальным присутствием в Сети есть и существенная разница. В Сети финишная черта призрачна; как только пересекаешь ее, приходится уже на следующий день начинать все с начала. И опять работа - снова, снова и снова - работа по поддержанию и дальнейшему развитию сайта. Первую пару лет мы провели в работе над нашим сайтом. Похоже, все, что мы тогда делали, можно назвать редизайном. Вскоре после запуска нашего сайта Netscape выпустила свой первый броузер, и мы внезапно поняли, что наше оформление и интерфейсы могут по-разному выглядеть для разных пользователей. Позже, по мере совершенствования броузеров, каждая следующая версия открывала новые технологические горизонты, чрезвычайно расширяя возможности
этой новой среды. При таких значительных изменениях в Сети приходилось перестраивать наш сайт снова и снова. И мы делали это. Каждый редизайн сайта HotWired.com представлял собой значительный скачок от того уровня, на каком он был прежде. Мы оптимизировали свой сайт, чтобы сделать его более легким в использовании и быстрее загружаемым. Мы тратили время на анализ новых технологий и того, что они предлагают. Электронные претензии все же продолжали прибывать. В конце концов, мы поняли очевидное веб-сайты могут и должны соответствовать изменениям в технологиях и возникающим благодаря им новым возможностям. Но, в конечном счете, необходимость модернизации определяется не этим. Изменения вызываются ответами на два простых вопроса: чего хотят наши пользователи и как мы можем им это обеспечить. По мере развития HotWired мы добавляли новые сайты (например, поисковую систему HotBot, Wired News и ряд других), каждый из которых обеспечивал уникальный и совершенно иной пользовательский опыт. Позже мы зарегистрировались на крупном веб-портале Lycos, и наша потенциальная аудитория резко возросла и стала сравнима с телевизионной. Или, скорее, ею стал весь мир, а не только узкий круг тех специалистов в технологически сложной области, которых привлекал Wired. Мне жаль, что у нас не было никакого руководства при выполнении этих работ. Я бы многое тогда отдал, чтобы иметь что-нибудь, наподобие этой книги, предлагающей возможность уменьшить те
огорчения и отчаяние, которые неизбежны при непрерывном экспериментировании. Все бы складывалось иначе, если бы мы имели продуманную и выверенную стратегию развития наших интерфейсов. Это взгляд в прошлое. Сейчас легко задаваться вопросом: «Что, если бы?» Но видя сегодня миллионы сайтов, проходящих через множество этапов редизайна, я чувствую уверенность, что Сеть может становиться только лучше. А с такой книгой - удобной в использовании, легкой для чтения и с конкретными примерами типовых проектов, а также с полезными профессиональными советами это случится намного быстрее. Мы проделали большую работу, чтобы Сеть стала такой, какая она есть сейчас. Но многое еще необходимо сделать. Я желаю вам всяческих успехов в редизайне веб-сайтов, и пусть все отклики ваших пользователей будут только положительными. Джеффри Вин (Jeffrey Veen), автор книги «The Art & Science of Web Design», New Riders, 2001, 4 мая 2001, Сан-Франциско Известный в интернет-сообществе с 1987 г., Джеффри Вин (www.veen.com) популярный в международном масштабе лектор, автор публикаций и консультант по пользовательской среде. Как ответственный за интерфейс в Wired Digital он руководил оформлением сайтов HotWired, поисковой системы HotBot, Wired News и других. Он специализируется на интеграции содержания, графического дизайна и технологии с точки зрения интересов пользователя.
Предисловие Мы не вдруг решили, что редизайн веб-сайтов является сейчас подходящей темой для книги. Концепции этой книги развивались и были прямым результатом методологии процесса, возникшей благодаря участию Келли в ежегодных конференциях Thunder Lizard (www.thunderlizard.com). С 1997 г. Келли активно выступает на этих конференциях с докладами о технологии веб-дизайна на всех ее стадиях. Поскольку тенденции рынка сместились от реинжениринга к редизайну веб-сайтов, стала очевидной необходимость осветить моменты, относящиеся к этой области. И на каждой конференции задавался вопрос: «Когда вы собираетесь написать книгу?» Материалы лекций Келли в PDF-формате всегда широко и свободно распространялись, но ясно, что этого было недостаточно, и в 1999 г. вопрос о книге был задан снова. Вот тогда родилась идея: редизайн веб-сайтов. Но идея оставалась лишь идеей. Она была слишком грандиозна для одного человека. Дуэт Келли и Эмили возник за кофе с рогаликами. Эмили, посетившая один из докладов Келли на технологической сессии Thunder Lizard, взяла у нее интервью для статьи в Publish Magazine, индустриальном периодическом журнале, для которого она писала несколько лет. Прочитав статью Эмили, Келли поняла, что нашла того, кто может помочь ей превратить идею в книгу. Эта книга - истинный плод совместных усилий - собрала вопросы управления и технологий Сети, информационного дизайна и юзабилити сайтов под общий зонтик актуальной темы редизайна веб-сайтов. Этот процесс дробился, изменялся, обновлялся, оттачивался и стал таким, каким представлен здесь сегодня. Келли Гото (
[email protected]) Эмили Котлер (
[email protected]) Лето 2001
Введение Технология проекта - это запланированная последовательность выполняемых действий.
Как работать с этой книгой Эта книга - руководство по методологии развития веб-проектов с учетом дополнительных и специфических потребностей в ре дизайне сайтов. Основной акцент сделан на технологию; и описываемый здесь процесс, называемый «Базовым процессом» (Core Process), - это технология, которая действительно работает. Она основана на личном опыте и квалификации авторов книги и была проверена и применена в реальном мире, в реальных проектах, на опыте которых она оттачивалась. Технология проекта (workflow of a project) - это запланированная последовательность выполняемых действий. Это процесс, который шаг за шагом решает намеченные задачи. Эта книга является путеводителем, показывающим, как сделать это без лишней суеты и лишних затрат. На ее страницах в доступной и пригодной для практического использования форме представлен полный, от начала до конца, план редизайна веб-проекта. В книге описывается именно процесс; здесь нет излишних проповедей и наставлений. Авторы не предлагают эту методологию как непреложный закон, высеченный на камне. Наши читатели - не «чайники» (и эта книга не для «чайников»); они сами решат, когда стоит прямо следовать предлагаемым советам, а когда что-то в них изменить.
Инструментарий В эту книгу включены инструменты - средства, которыми можно воспользоваться сегодня, прямо сейчас в вашем текущем проекте. Здесь предложены таблицы контрольных проверок, опросные листы, рабочие таблицы и формы, которые помогут в работе над проектом начиная с момента планирования до запуска и дальнейшей эксплуатационной поддержки. Многие из обсуждаемых инструментов можно загрузить с сопутствующего этой книге веб-сайта (www.web-redesign.com). Эти инструментальные средства, как и сам Базовый процесс, были проверены, применены и усовершенствованы . Авторы будут рады откликам читателей по поводу рекомендуемых инструментов.
Как организована эта книга Лучше всего было бы, приступая к очередному проекту, прочитать эту книгу от начала до конца. Но у кого есть на это время?
Введение У ч и т ы в а я занятость читателей, к н и г а построена так, чтобы ее м о ж н о было читать с любого места или с начала, отложить в любой момент и л и просто просмотреть, поискать в ней что-то конкретное и л и читать подробно. Отдельными вставками в к н и г у включены советы и дополнительная и н ф о р м а ц и я по теме. Некотор ы е с в е д е н и я м е с т а м и п о в т о р я ю т с я . Это с д е л а н о , потому что многие читают книгу по темам, а не последовательно, и авторы старались, чтобы ч и т а т е л и не упустили что-то важное. Б а з о в ы й процесс состоит из п я т и ф а з , подробно обс у ж д а е м ы х в главах 3 - 7 . Кроме того, Б а з о в ы й процесс с н а б ж е н набором д о п о л н и т е л ь н ы х шагов (в главах 8 и 9), которые, в зависимости от н а л и ч и я времени и р а с п о л а г а е м ы х средств, помогут о п т и м и з и р о вать в а ш у работу по редизайну.
17
На заметку Помимо редизайна эта книга поможет и в изначальной разработке веб-сайта. Предлагаемые методы и инструменты легко модифицируются и обеспечивают надежную технологию и в этом случае. При разработке нового сайта П Р О С Т О игнорируйте информацию, относящуюся к редизайну, а фокусируйтесь на Базовом процессе.
Б о л ь ш и н с т в о читателей, вероятно, о з н а к о м я т с я с обзором (глава 2), прочитают осн о в н ы е г л а в ы и посмотрят рекомендуемые и н с т р у м е н т ы . В т а к о м случае, приступив к ф а к т и ч е с к о м у выполнению своего проекта, используйте обзор д л я общей справк и , а г л а в ы - д л я подробных и н с т р у к ц и й . И, конечно, во в р е м я работы над проектом воспользуйтесь п р е д л о ж е н н ы м и инструментами, в к л ю ч а я п р и в е д е н н ы е в конце к а ж д о й г л а в ы т а б л и ц ы к о н т р о л ь н ы х проверок, которые помогут вам следить за п р а в и л ь н о с т ь ю работ.
Для кого эта книга? Цель этой книги - рационализировать процесс редизайна сайта для каждого, кто имеет к этому отношение, а не только для организаторов проекта и ключевых фигур, принимающих решения. Авторы стремились обеспечить для всех - заказчиков и исполнителей проекта - общую систему рекомендаций, чтобы все использовали одну и ту же терминологию и понимали шаги, которые необходимо предпринять в любом веб-проекте. Говоря о «любом проекте», мы действительно имеем в виду любой проект - редизайн или изначальную разработку сайта, с бюджетом в 10 тысяч или в 100 тысяч долларов. На самом деле, даже если ваш проект рассчитан на еще меньший (или больший) бюджет, Базовый процесс все равно будет полезен. Когда мы говорим «базовый», мы и имеем в виду базовый. Независимо от типа модернизируемого сайта или направленности конкретного проекта Базовый процесс, по существу, один и тот же. Целенаправленный и организованный подход к любому проекту сэкономит время, деньги и уменьшит головную боль в ходе его реализации.
Кто вы? Являетесь ли вы дизайнером, единственным вебмастером фирмы или владельцем компании, пытающимся перевести присутствие компании в Сети на новый уровень, - эта
18
Введение
книга для вас. Если когда-нибудь вы огорчались из-за того, что веб-проект работал неэффективно («Мой клиент принес мне содержимое сайта с пятинедельным опозданием, да к тому же дату запуска сайта не сдвинуть»), - эта книга для вас. Если вы приступаете к выполнению своего первого веб-проекта (от уровня «Это тот шанс, который я давно ждал» до «А что же, собственно, нужно делать?»), принимая руководство веб-сайтом вашей компании или формируя для этого специальный новый отдел, - эта книга для вас. Эта книга - для каждого (дизайнера и недизайнера), кто хоть однажды прошел через кошмар реализации какой-либо технологии и хочет избежать этих кошмаров в будущем. («Мы начали сразу с визуального проектирования, полагая, что справимся с навигацией и содержимым сайта на этой стадии. Результат? Полная неразбериха и необходимость отслеживать многое в обратном порядке».) Таким образом, каждый, играющий какую-то организационную роль или ответственный за тот или иной аспект перезапуска веб-сайта, найдет что-то полезное в этой книге. Эта книга поможет многим - от бывалого профи до новичка. Те, кто уже имеют существенный опыт, вероятно, настроят под себя Базовый процесс на предмет соответствия собственному проекту и существующим процессам. Для новичков эта книга - прекрасное место для старта; прямо здесь они найдут весь процесс целиком.
К какому типу относится ваша компания? Является ли ваша компания небольшой или среднего размера фирмой по разработке веб-сайтов или же это огромная компания с целым отделом, ответственным за интранет? Возможно, вы - небольшая корпорация с собственным отделом веб-разработок или компания среднего размера, заключающая контракт с внешней проектной фирмой. А может быть, это разросшаяся университетская система, в которой каждый факультет преследует собственные цели... Базовый процесс, описанный в этой книге, применим во всех этих случаях, а также и в некоторых других. Это действительно такая технология, в которой «один процесс подходит для всех».
Кто является клиентом? В этой книге «клиент» - несколько навязчивый, всеобъемлющий термин. Для компании веб-разработчика и для собственного интранет-отдела термин «клиент» имеет разные значения, но не диаметрально противоположные. Если ваша компания является дизайнерской фирмой или компанией веб-разработчиком, то клиент будет внешним - это компания, заключившая с вами контракт. Это довольно обычная работа с клиентом. Для компаний, имеющих собственных разработчиков, клиент является внутренним. Это может быть сотрудник (или группа), определяющий содержание сайта, концепцию и, что наиболее важно, утверждающий проект. Это не обязательно руководитель внутреннего веб-отдела, это может быть группа, включающая кого-то из маркетинга,
Введение
19
кого-то из производственного сектора, пару заместителей и, возможно, генерального директора. В данном случае работа с клиентом - дело не такое простое. Управление внутренними проектами - в частности презентация сделанных этапов обычно менее формально, чем в случае внешнего клиента. Здесь организация и взаимодействие приобретают даже более важное значение, так как пренебрежение формальностями способствует недоделкам, которые могут привести к провалу. Зачастую в работе над внутренним проектом занято слишком много поваров и не очень ясно, кто же шеф-повар и даже каков рецепт. Правда, это нередко случается и при внешних клиентах. В этой книге «клиент» упоминается часто. Под этим всегда подразумевается - и в случае внешнего и в случае внутреннего клиента - тот, кто ставит задачу, предоставляет средства и утверждает дизайн. Даже если вы сами являетесь собственным клиентом, знайте и учитывайте, что с клиентом необходимо работать. С некоторыми клиентами очень удобно работать - они организованны и быстро реагируют. Другие клиенты могут иногда испытывать ваше терпение и истощать бюджет проекта. В книге есть места, где отдельно оговариваются ситуации при работе внутренних разработчиков с внутренним клиентом или при работе фирмы веб-разработчика/ дизайнера с внешним клиентом по контракту. Только вы можете знать, какой клиент будет в вашем случае.
Чем не является эта книга Ни одна книга не может быть обо всем и для всех. Эта книга фокусируется на технологии и, в особенности, на ее Базовом процессе. С целью создания базовой (хоть и всесторонней) книги нам неизбежно пришлось опустить некоторые аспекты веб-разработки, которые не ориентированы непосредственно на управление проектом и его технологию. *
Эта книга - не техническое руководство Эта книга не является пошаговой инструкцией для внутренней реализации. Если вашему сайту требуется внутренняя база данных, возможности е-коммерции, динамически обновляемое содержимое и так далее, то вам требуется дополнительная, параллельная схема проекта. Эта книга, этот Базовый процесс является технологией редизайна сайта. Для развития внутренней структуры сайта требуется собственная, совсем иная технология, и о ней здесь просто не говорится (может быть, о ней будет рассказано в следующей книге). В книге предлагается обзор технических соображений, которые должны быть ясны и понятны, чтобы читатели смогли оценить границы собственного проекта. Кроме того, читатели обеспечиваются примерами опросных листов, предложениями и советами - все это нацелено на то, чтобы помочь в определении всех технических потребностей конкретного веб-сайта и в оценке реалистичности предстоящей реконструкции с учетом располагаемых средств. Здесь указаны также моменты Базового про-
20
Введение
цесса, где пересекаются технологии внешнего и внутреннего интерфейсов и где руководители этих двух процессов должны согласовывать свои действия. Можно сказать определенно - и ввиду особой важности мы повторяем это в нескольких местах, - что независимо от конкретных технических требований и от того, существенно или нет для проекта наличие внутреннего интерфейса, вам все время придется контактировать с вашей технической группой - производителями HTML или другими специалистами. И конечно, это означает постоянное достать-сходить на протяжении всего процесса редизайна проекта.
Эта книга - не детальное руководство по дизайну Здесь освещается технология редизайна веб-сайта, а не специфика собственно дизайна. В книге дан беглый обзор управления креативными этапами проекта. В качестве пособия по графическому дизайну мы рекомендуем книгу Линды Вейнман (Lynda Weinman) «Designing Web Graphics. 3», New Riders, 1999. Пособиями по разработке и созданию сайта могут служить книги Джеффри Вина (Jeffrey Veen) «The Art & Science of Web Design», New Riders, 2001 и Джеффри Зельдмана (Jeffrey Zeldman) «Taking Your Talent To The Web», New Riders, 2001 или классическая книга Дэвида Сигела (David Siegel) «Creating Killer Web Sites», Hayden Books, 1997, не потерявшая своей значимости за эти годы. Дополнительные рекомендации и ссылки можно найти на www.web-redesign.com.
21
Введение
Эта книга - не руководство по юзабилити-тестированию Опять же, в этой книге освещается технология. Безусловно, здесь довольно часто говорится о юзабилити-тестировании. Мы очень-очень сильно уверены в его значимости. Некоторые подробности обсуждаются в главе 8, но главным образом они касаются подхода к управлению проектом и технологии. Глубокое философское обсуждение этой темы дано в книге Якоба Нильсена (Jakob Neilson) «Designing Web 1 Usability», New Riders, 1999. Пошаговое руководство вы найдете в книге Джеффри Рубина (Jeffrey Rubin) «Handbook of Usability Testing», John Wiley & Sons, 1994. 3a дополнительной информацией обращайтесь на сайт www.web-redesign.com. www.web-redesign.com В отличие от сопроводительного компакт-диска, веб-сайт - это ресурс, который можно обновлять, который доступен и который можно действительно использовать. Идея создания сопутствующего книге сайта не нова. На данном сайте представлены инструменты, которые можно загрузить, а также содержатся рекомендации и ссылки. Когда в книге речь идет об инструментах, всегда уточняется возможность их загрузки с www.web-redesign.com. Читатели могут использовать эти инструменты как свои собственные. Веб-сайт не заменяет книгу. Наоборот, это дополнительное приложение. Это ресурс. Кроме обеспечения всеми инструментальными средствами, обсуждаемыми в книге, на www.web-redesign.com содержатся ссылки на связанные с данной тематикой источники информации, обновляются сведения об авторах (где и чем мы занимаемся) и, конечно, есть раздел, посвященный опечаткам и задержкам в издании. Кроме того, мы будем анализировать примеры редизайна различных сайтов - не из соперничества, а чтобы показать, кто модернизирует свой сайт и с какой целью. Мы приглашаем всех сообщить URL своего переделанного сайта и посмотреть, не окажется ли он среди лучших. Инструкции для презентации своего сайта вы найдете на www.web-design.com. www.web-design.com хостинг предоставлен Compass Communications, Inc. (www.ccom.net)
Якоб Нильсен «Веб-дизайн: книга Якоба Нильсена». - Пер. с англ.- СПб: СимволПлюс, 2000 г.
22
Учебный пример
Baby Center Клиент: Baby Center URL: www.babycenter.com
Директор по дизайну (редизайн):
Проектная группа: Внутренняя Директор по дизайну (первоначальный
Арт-директор (редизайн):
дизайн): Джонатан Таттл (Jonathan Tuttle) Руководитель проекта (первоначальный
Эллисон Аппен (Allyson Appen) Шеннон Миллер (Shannon Miller) Руководитель проекта (редизайн):
Алиса Коэн Рейтер (Alissa Cohen Reiter)
дизайн): Джон Стросс (John Stross) ПРЕДЫДУЩИЙ
BABYCENTER.COM [ПРЕЖНИЙ, ПОЗДНЕЕ И ЕЩЕ ПОЗДНЕЕ] Прошел через несколько этапов, пока развился от пилотного проекта в значимый коммерческий веб-сайт. Каждый редизайн основывался на оценке интересов потребителей. (1997-1999)
23
Учебный пример
BabyCenter.com специализируется на информации о беременности, младенчестве и раннем детстве, а также о товарах для мам и младенцев. Главная задача компании состояла в создании в Интернете наиболее полного информационного ресурса для будущих и молодых родителей.
СОВРЕМЕННЫЙ
BABYCENTER [ПЕРЕПРОЕКТИРОВАННЫЙ] Ввел членство с известной системой сообщений и ссылками. Перепроектированный сайт стал практичнее в использовании благодаря более простому дизайну, который сохранил несколько удачных элементов прежнего сайта, включая эффективное использование персонализации. (2000) Результат: Наличие собственных специалистов обеспечивает быстрое реагирование на интересы пользователей и непрерывное усовершенствование, включающее рост персонализации и представление содержания.
См. цветную вклейку, стр. 338-339
Ключи к успешному редизайну Успешный редизайн сайта позволяет избежать прежних ошибок, поэтому избирайте проверенный путь. Устраняйте недочеты и не упускайте из виду посетителей сайта - это главный ориентир. В том числе и для редизайна.
Ключи к успешному редизайну Почему именно эта книга и именно сейчас? Присмотритесь к Сети. Сколько из регулярно посещаемых вами сайтов изменили свой облик за последние год или два? Несколько? Да, мы это тоже заметили. В ближайшие 12 месяцев значительной перестройке подвергнется огромное количество веб-сайтов. Некоторыми общими целями редизайна являются следующие: «проделать это именно в данный период», «переопределить направленность присутствия в Сети» или «сравняться с конкурентами». Команды веб-разработчиков, занятые новыми или перепроектируемыми сайтами, главным образом (как с учетом волны реконструкций, так и давления экономических условий) стремятся к тому, чтобы их проекты продержались от шести до девяти месяцев, то есть до момента полного обновления. Давление может быть поразительным. Компании, подобные вашей (и клиенты, подобные нашим), которые осознали необходимость присутствия в Сети в последние два, три, шесть лет, теперь - увы - прижаты к стенке. Мало того, что приходится масштабировать, наращивать и увеличивать активность в Интернете, чтобы не отстать от конкурентов, но требуется еще и спешить с этим, успеть заключить контракт с дизайнерской, фирмой (или с лучшей дизайнерской фирмой) или даже сформировать внутренний отдел веб-разработок - только бы не отстать. Время - не союзник. Несмотря на частую неопределенность в экономике, бизнес и Сеть переплетены. Чтобы одержать верх над конкурентами и оставаться на ведущих позициях, необходимо производить переоценку, перепроектирование и реконструкцию того, что работало - или по крайней мере казалось работающим - вчера. Почему именно эта книга и именно сейчас? Потому что она необходима. Есть много веских оснований для редизайна. Вы унаследовали старый, практически неэффективный брошюроподобный сайт, когда приобрели свою компанию... Вы хотите обновить оформление сайта с помощью Flash или других средств... Вам потребовались возможности е-коммерции, чтобы расширить сферу услуг... Вам нужна система управления контентом... На вашем сайте непорядок с навигацией, и пользователи не попадают на страницы, посещение которых особенно важно для компании... Ваш брендинг1 никак не отражен... Вы никогда и не ставили брендинг на первое место... Вы хотите перенести сайт на собственную территорию... Ваша компания объединилась с другой, и теперь информация на обоих сайтах не соответствует действительности... Если что-либо из перечисленного применимо к вам (а это лишь некоторые из множества примеров), вы, вероятно, раздумываете, что следует делать дальше. Возможно, вы не уверены, как и каким образом это сделать. Каков процесс? Брендинг (от англ. branding) - продвижение торговой марки. - Примеч. науч. ред.
Ключи к успешному редизайну
27
Процесс должен существовать. Между тем, Сеть никого не ждет, даже вас, и ваши конкуренты могут просто обойти вас на виртуальных милях. Звучит, как коварная игра. Но это не так. Просто нужна стратегия. Нужен план, надежная технология редизайна сайта. Думайте, прежде чем действовать, - это единственный путь. На что можно рассчитывать однозначно, так это на то, что Сеть будет развиваться и дальше. Она станет более умной, предложит больше сервисов, станет более приспособленной к нуждам пользователей. Сеть будет и дальше изменять все правила. Можно надеяться на это. Но сейчас - или редизайн, или неуспех.
Представляем технологию, которая работает Множество факторов может вызвать неудачу или задержку проекта: непредвиденные технические проблемы, неорганизованность клиента, плохо продуманные цели и сроки, небрежно составленный бюджет. Многие сталкивались с этим - или как дизайнеры, или как управляющие, или в обоих качествах. «Дизайнеры крайне нуждаются в руководстве по технологии процесса», - сказал Джим Хейд (Jim Heid), председатель конференции Thunder Lizard. - На нашей конференции по веб-дизайну Келли окружила целая толпа после ее докладов по технологии; ее выступления всегда имеют очень высокий рейтинг. Вы можете сказать, что каждый дизайнер проходит через кошмары реализации проектов, но Келли показывает, как тщательное планирование и организация позволяют держать все под контролем». Возьмите методологию Келли, добавьте сотрудничество с Эмили и получите эту книгу. После существенной отработки на многих проектах редизайна веб-сайтов родилась технология, которая работает. Эта отлаженная схема действий дополнена инструментальными средствами, которые мы использовали, настраивали, снова использовали и так далее - для дизайна и редизайна веб-сайтов. Предлагаемые инструменты всегда применимы, уже проверены и оказались успешными. Да, и этими инструментами можно воспользоваться немедленно, прямо сегодня. У нас есть некоторые серьезные соображения, и мы ими поделимся. Эта книга является четким, понятным, промышленным технологическим планом. Назовите это планом, назовите путеводителем, можете назвать библией - мы предпочитаем называть это технологией, которая работает, потому что так оно и есть. Почему именно эта книга и именно сейчас? Введение цельной веб-технологии - в частности, направленной на редизайн - является сейчас как нельзя более своевременным, особенно для внутренних разработчиков, которые не производят веб-сайт за веб-сайтом, или для небольших и средних фирм, не имеющих твердой методологии на местах. Компании во всем мире, каждая из которых озабочена необходимостью редизайна сайта, в большинстве своем продолжают повторно изобретать колесо - каждая со своим индивидуальным проектом редизайна. Это вовсе не требует стольких усилий. Решением является эта книга. Эта книга поможет.
28
Глава 1
ДЕСЯТЬ ЭФФЕКТИВНЫХ СОВЕТОВ ДЛЯ УСПЕШНОГО РЕДИЗАЙНА Процессы развиваются. Со временем на опыте редизайна ряда проектов стала очевидной важность нескольких факторов: общение с клиентом, возможность масштабирования, планирование, проверка своих предположений, анализ текущего сайта и так далее. Мы опробовали эту минифилософию на ведущих сайтах и на новичках. Что явилось результатом? Предлагаемый перечень факторов, которые непременно необходимо учитывать здесь должны звучать литавры, - ДЕСЯТЬ ЭФФЕКТИВНЫХ СОВЕТОВ ДЛЯ УСПЕШНОГО РВДИЗАЙНА. Десять советов, представленные в этой главе, охватывают многие аспекты: планирование, промышленное позиционирование, аудиторию, юзабилити, технологию, контент2, масштабируемость и другие. Все это будет обсуждаться здесь и на последующих страницах. Этот перечень ни в коем случае нельзя считать исчерпывающим; это скорее полезный минимум того, что необходимо иметь в виду по мере продвижения по фазам процесса. Редизайн - это событие. Ориентируйтесь на потребность. И держите все под контролем, пока делаете это.
СОВЕТ 1
СОВЕТ 2
Думайте, прежде чем действовать
Определите цели и задачи редизайна
Не воздвигайте новый сайт просто потому, что считаете себя отставшими от времени. Это общая ошибка. Осознайте, что нужен не только более привлекательный интерфейс. Планируйте планирование. Логичная технология поможет охватить все главное.
Что в настоящее время работает на вашем сайте и что требуется изменить при редизайне? Проанализируйте звонки и письма посетителей, особенно жалобы. Для определения конкретных проблем проведите юзабилититестирование, а не просто угадывайте их. Сформулируйте цели, а затем добивайтесь их осуществления.
СОВЕТ 6
СОВЕТ 7
Своевременно консультируйтесь с техническими специалистами
Не пренебрегайте юзабилититестированием
В ходе процесса своевременно консультируйтесь с техническими специалистами (по HTML, а также по разработке приложений и внутреннего интерфейса). Это поможет сэкономить время и избежать головных болей в разгаре работ. Технические специалисты помогут правильно спланировать проект и разобраться, что является технологически выполнимым на каждом этапе.
При редизайне не забывайте о пользователях. В ходе работ проведите юзабилити-тестирование текущего и модифицированного сайтов. Определите проблемы в этой области и постарайтесь справиться с ними при редизайне. Ничто не дает более ясной оценки, чем наблюдение за тем, как кто-то пытается воспользоваться вашим сайтом. Смогут ли посетители использовать обновленный сайт? Наблюдайте и анализируйте, а затем делайте практические выводы из этих наблюдений.
Контент (от англ. content) - (зд.) содержимое, наполнение сайта, информация на сайте. - Примеч. науч. ред.
29
Ключи к успешному редизайну
СОВЕТ 3
СОВЕТ 4
СОВЕТ 5
Анализируйте свою конкуренцию
Привлекайте вашу текущую аудиторию
Объективно рассмотрите свою отрасль. Посмотрите на сайты конкурентов, как они работают. Сравните их возможности и услуги. Оцените, что именно работает, фактически опробовав сайты конкурентов и свой собственный. Выясните, чем ваш сайт отличается от конкурирующих.
Привлекайте к процессу редизайна базу своих текущих пользователей. Не отпугивайте их внезапными изменениями; заранее объявите, почему и когда ваш сайт будет реконструироваться.
Разрабатывайте для пользователей, а не для инвесторов
СОВЕТ 8
СОВЕТ 9
СОВЕТ 10
Осознайте значимость своевременной поставки контента
Четко представляйте желаемые результаты
Продумайте все в целом; сосредоточьтесь на этапах
Взаимодействие играет ключевую роль. Нередко проекты, начав с красивого старта, терпели провал из-за неправильного представления и ошибочных предположений. Каждый выпускаемый на сайте документ должен ясно отображать ваши цели. Убедитесь, что вся команда, работающая над одной и той же страницей, пользуется одной и той же терминологией.
Не пытайтесь сделать все сразу; так можно свести себя с ума. Вводите изменения поэтапно. Это не только делает планы ввода обновлений более реалистичными, но и позволяет сразу оценить введенные изменения и исправить неудачные моменты.
Поставка контента - один из главных аспектов почти всех проектов редизайна веб-сайтов. Специально привлеките со стороны клиента заинтересованного человека, который будет регулярно обновлять контент: собирать информацию, корректировать, писать и своевременно передавать ее. Не умаляйте значимости планирования в работе с контентом сайта.
Если веб-сайт неудобен для использования, ваше присутствие в Сети рискует потерпеть неудачу. Очень часто аспектами юзабилити сайта жертвуют в угоду требованиям рекламодателей или инвесторов. Не ошибитесь, беря в расчет не ту аудиторию. Знайте своих пользователей. Прилагайте все необходимые усилия, чтобы потребности аудитории были совместимы с вашими деловыми целями.
Глава 1
30
Лей Дункан (Leigh Duncan) об определении проблем и стратегии редизайна
Когда компании не могут ясно выразить, для чего они перепроектируют свое вебпредставительство - как это изменит их деятельность и ее результаты, - их усилия часто приводят к необходимости переделок, напрасным расходам и частичному или даже полному провалу. Как ни странно, это нередко случается даже с крупными предпринимателями. Хотя порой они совершенно правильно «нутром чувствуют» необходимость редизайна, но чтобы привести к успеху, это должно быть подкреплено фактами, анализом и всесторонней стратегией. Говоря проще, стратегия - это разработка четкого плана действий, надежный мост между текущим и будущим состояниями. Таким образом, стратегия веб-редизайна включает создание органичного плана по улучшению существующего веб-сайта с целью повышения качества обслуживания заказчиков и достижения желаемых результатов бизнеса. Разумеется, хорошая стратегия редизайна рассматривает обоснованную технологию, деловую модель, надежный процесс, структуру контента и позиционирование бренда в Сети. Она должна синхронизировать и оптимизировать все усилия, чтобы повысить возможности сайта в информировании, обучении, привлечении и убеждении клиентов, а также в продаже им товаров или услуг.
Во время редизайна можно и разориться. Быстрые изменения в бизнесе и технологиях требуют постоянного контроля над ведомственными, производственными, информационными, проектными и другими сторонами деловой активности. Однако независимо от множества аспектов первостепенная задача - подойти к проекту с одной центральной позиции: с перспективы посетителя. С этого начинается хорошая стратегия редизайна. Разработка такой перспективы - наиболее важный аспект для успешной стратегии редизайна и для организованного проекта. Эта перспектива требует от всех участников процесса редизайна отстраниться от исключительно деловых соображений и согласованно учесть потребности посетителей. Для этого полезно выделить из аудитории сайта несколько категорий пользователей: первичную аудиторию (круг наиболее частых пользователей), вторичную аудиторию (группу наиболее важных заказчиков) и третичную аудиторию (остальных посетителей сайта). Сказанное кажется несложным, но многие компании считают деление пользователей на категории проблемой, так как в этом случае требуется четкая система приоритетов вкупе с моделями поведения и потребностями посетителей. Однако определив эти основные моменты,
Ключи к успешному редизайну намного проще спланировать сайт, основанный на взвешенных потребностях аудитории и детальных деловых предпосылках. Кроме того, становится намного легче справиться с другими стратегическими задачами, например с такими, как: • Обзор бизнес-плана • Оценка текущего состояния • Видение будущего состояния • Проверка и тестирование аудиторией • Планирование контента и сервисов • Креативный бриф3/стратегия дизайна • Технический подход к реализации • Маркетинг и бизнес-планирование Эти задачи хоть и не являются исчерпывающими, но выявляют некоторые по-
31 следующие стратегические шаги в редизайне и показывают, как учет интересов посетителей создает основу для практической оценки производственных, технических и проектных проблем. Когда эта основа создана, любой организатор редизайна веб-сайта будет чувствовать больше уверенности в успехе проекта. Лей Дункан, ветеран этой отрасли с 10летним стажем (с недавнего времени заведует е-коммерцией в KPMG Consulting) и глубокими знаниями е-коммерции на разных платформах, консультировала по стратегии е-бизнеса и маркетинга, дизайну и управлению контентом клиентов мирового уровня, включая Target Corporation, Proctor & Gamble, Chevron, 1-800-FLOWERS и America Online.
Креативный бриф (от англ. creative - творческий и brief - краткий) - изначально, в рекламе: документ, составленный со слов клиента, в сжатом виде содержащий в себе техническое задание креативному отделу агенства, на основании которого он (отдел) создает творческую концепцию будущей рекламной кампании. Применительно к редизайну КБ - краткое техническое задание, содержащее в себе базовую концепцию, стратегию и позиционирование будущего сайта. — Примеч. науч. ред.
32
Учебный пример
Smug Клиент: Smug URL: www.smug.com Проектная группа: fearless.net, Нью-Йорк Издатель: Лесли Гарполд (Leslie Harpold) Бюджет: Ноль долларов и два одобрения
ПРЕДЫДУЩИЙ
SMUG.COM [ПРЕЖНИЙ] использовал иконки для выделения различных категорий рассказов и произведений. Ряд простых ссылок адресовал к заархивированным в хронологическом порядке материалам.
SMUG.COM [ПРЕЖНИЙ] ОБЪЯВЛЕНИЕ О НОВОМ SMUG.COM [ПЕРЕПРОЕКТИРУЕМОМ] - это юмористическое объявление представляло веб-сайт несколько месяцев во время его редизайна. Предлагался вход на существующий сайт или возможность оставить электронное сообщение для тех, кто желает получить уведомление о запуске обновленного сайта.
Учебный пример
33
Smug - это давно существующий некоммерческий юмористический журнал, издаваемый ежемесячно редактором-дизайнером Лесли Харполдом. Запущенный в 1996 г., сайт берет свое начало из печатавшейся в конце 1980-х - начале 1990-х годов серии «Сделай сам». За эти годы Smug опубликовал в Сети ряд интереснейших опусов.
СОВРЕМЕННЫЙ
SMUG.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] отказался от графики в пользу упрощения благодаря недавно созданному инструменту для управления контентом. Цель редизайна - облегчение процесса поддержания сайта как интерактивного журнала, перешедшего с ежемесячного обновления на обновление дважды в месяц. Результат: Хорошо отлаженное обновление.
2 Зак. 667
См. цветную вклейку, стр. 340-341
Один процесс, подходящий для всех
2
Базовый процесс: всесторонний план для групп любых типов и компаний всех видов с различными бюджетами.
36
Видеть - значит осмысливать. Здесь наглядно представлен Базовый процесс: всего пять фаз, каждая включает три переплетенных и/или параллельных пути. Эта подробная технологическая схема показывает, почему Базовой процесс - от начала до конца - действительно является путеводителем по технологии редизайна вебсайтов (уберите аспекты редизайна, и он подойдет также для изначальной веб-разработки). Используйте эту схему и как стартовую точку, и как справочное пособие. В дополнение к данному визуальному представлению на последующих страницах этой главы предлагается подробное обсуждение предпринимаемых действий. Пункты технологической схемы и предпринимаемых действий схожи, но не идентичны, хотя все они служат на пользу дела.
Глава 2
Один процесс, подходящий для всех
37
38
Глава 2
Один процесс, подходящий для всех
Один процесс, подходящий для всех Это единая всесторонняя технология, которую может взять на вооружение и адаптировать для своих нужд любая команда веб-разработчиков. Это набор основных шагов, применимых ко всем проектам. Это один процесс - Базовый процесс, - состоящий из пяти последовательных фаз. В этой главе в форме обзора представлен один процесс, подходящий для всех, но с особым акцентом на специфические особенности редизайна веб-сайтов. Базовым процессом могут воспользоваться группы любых типов и компании всех видов с различными бюджетами. Flash или HTML, сложные функциональные возможности или ничего, кроме динамической смены графики на JavaScript (rollovers), редизайн сайта или создание абсолютно нового веб-представительства... у всех сайтов есть общие требования к построению. Все веб-проекты должны быть тщательно распланированы и охарактеризованы. Для каждого требуется организация контента и планирование структуры. Всем необходим эстетический дизайн. Все проекты требуется реализовать. Все нуждаются в запуске. Все сайты. Все до единого. Базовой процесс предусматривает все необходимые шаги. В книге описано, что должно быть сделано (обязательно), что также можно сделать (дополнительно) и чего следует остерегаться. Кроме того, авторы настоятельно рекомендуют два дополнительных процесса - юзабилити-тестирование сайта (см. главу 8 «Юзабилити-тестирование») и анализ конкуренции (см. главу 9 «Анализ конкуренции»). Если позволяют время и деньги, то при адаптации Базового процесса стоит включить и эти шаги. Далее в этой главе представлена версия Базового процесса в виде обзора на ма1 нер Cliff Notes. Однако не забывайте наставления школьных учителей: «Не полагайтесь только на один обзор!» Здесь не приводятся никакие подробности, никакие объяснения, почему и как. Эти сведения даются далее в соответствующих главах. Там обсуждаются инструменты и схемы, а также другая полезCliff Notes - популярный на западе вид методического материала для студентов, конспективно излагающего какую-либо книгу в виде ее краткого обзора. Такие брошюры имеют яркую черно-желтую расцветку и выполнены в едином формате. Примеч. науч. ред.
Глава 2
40
ная информация. В то время как последующие главы детализированы, данная глава - лишь краткий обзор. Она только знакомит с Базовым процессом. Безусловно, каждый проект уникален, и каждая группа и бюджет имеют разные запросы и возможности, отражающиеся на специфике проекта, так что на месте с учетом конкретных условий следует производить необходимые модификации.
Фаза 1: Определение проекта Первая фаза Базового процесса включает все, что касается сбора и анализа информации, необходимой для осмысления масштабов проекта и подготовки к началу работ. В первые моменты появится множество вопросов (успокойтесь, ответы можно найти в книге) и накопится много данных - данных, которые необходимо использовать, чтобы получить в конце ожидаемые результаты. Независимо от размера или масштаба проекта всегда требуется планирование. В фазе1, можно сказать, закладываются основы всего процесса редизайна. Многие аспекты этой фазы в той или иной мере воздействуют на все последующие стадии работ, а некоторые, в частности знание аудитории, играют важную роль на каждом этапе процесса. При определении масштаба проекта следует принимать во внимание все - от бюджета до нужд поддержки. Фаза 1 - самая большая фаза Базового процесса. Работа, проделанная в этот период, определяет весь проект - каждое действие, которое будет предпринято, и каждый готовый компонент, который будет создан.
Выяснение Потратьте как можно больше времени на выяснение текущего состояния компании, ее сайта и формулирование проекта его обновления. Собирайте информацию и задавайте вопросы. Побольше узнайте об аудитории сайта. Проанализируйте теку-
Один процесс, подходящий для всех
41
щий сайт и сравните его с конкурирующими как в онлайновом, так и в оффлайновом аспекте. Войдите в роль квалифицированного пользователя на сайте клиента. Постарайтесь понять стратегию сайта и ее значение для его посетителей.
ВЫЯСНЕНИЕ > > > > >
Распространение/сбор/анализ опросов Сбор имеющихся у клиента материалов Изучение аудитории Выяснение технических возможностей аудитории Выяснение потребностей внутреннего программирования
> Распространение/сбор/анализ опросов Собирайте информацию. Опросный лист клиента (Client Survey) и эксплуатационный опросный лист (Maintenance Survey) должны быть вручены клиенту в начале работ по проекту. Это четкие и всесторонние анкетные опросы, которые помогут клиенту сформулировать ожидаемые результаты. Собранные данные позволят понять аудиторию и задачи сайта. Оба опроса полностью приведены в этой книге, а также могут быть загружены с www.web-redesign.com. > Сбор имеющихся у клиента материалов Запросите материалы: брошюры, ежегодные отчеты, сопутствующие данные, образцы продукции и так далее. Осмотрите территорию и оборудование клиента, магазины и/или существующий сайт. Ознакомьтесь с текущими маркетинговыми материалами и вникните в общий маркетинговый план. > Изучение аудитории сайта Используйте данные, полученные из клиентского опроса, чтобы составить представление о том, кто посещает сайт, с какой целью и какие задачи выполняет на сайте. Выявите целевую, а также вторичную аудиторию. Создайте профиль пользователя. Имейте в виду, что может понадобиться создание таких профилей для нескольких целевых групп. > Выяснение технических возможностей аудитории Узнав о пользователях, выясните, к каким типам сайтов они могут обращаться. Возможности аудитории определяют такие данные, как платформа, быстродействие связи, типы языков программирования, плагины. Расширенный опрос, или ведомость клиентских технических требований (Client Spec Sheet), следует вручить клиенту вскоре после начала работы над проектом. Ведомость клиентских технических требований — производственный элемент. Часть ее вклю-
42
Будьте готовы к разбуханию проекта Вникните в концепцию разбухания проекта (Scope Creep) и подумайте, как это на нем отразится. Медленное, неизбежное разбухание проекта - от того, каким он был определен вначале, до чего-то заметно большего - случается почти с каждым проектом. Мелочи добавляются и добавляются. Берегитесь на вид незначительных просьб клиента о мелких добавках к проекту. Разбухание проекта неуловимо; не успеете осознать, как это произойдет. На совещании по поводу начала работ над проектом охарактеризуйте проблему разбухания клиенту и всему составу проектной группы и объясните, что составление аккуратных таблиц по заданиям, готовым к сдаче компонентам и процессам поможет сохранить проект в рамках намеченных целей. Подробнее о разбухании проекта см. в описании фазы 1.
Глава 2
чена в обсуждение фазы 4, а полностью ее можно загрузить с ivww.web~redesign.com. > Выяснение потребностей внутреннего программирования Это необязательный шаг — только для тех, кому это необходимо. Являясь достаточно простым инструментом, расширенный технический опросный лист (Expanded Tech Check) предлагает клиенту несколько вопросов. Если на любой из них дан положительный ответ, то проект нуждается во внутреннем программировании и должна применяться дополнительная технология. Определение термина «внутренний» в контексте этой книги дано во «Введении». Расширенный технический опросный лист можно загрузить с www.web~redesign.com. > Анализ отрасли Проанализируйте - в онлайновом и оффлайновом аспекте - отрасль клиента, чтобы быть в курсе состояния дел его конкурентов. Тут требуется войти в роль квалифицированного пользователя из круга заказчиков клиента. Посетите побольше сайтов, выполните там различные операции, позвоните в службы по работе с заказчиками и выясните, что удачно, а что неудачно реализовано в обслуживании. Подробное описание расширенного процесса см. в главе 9.
Уточнение: Определение окончательных целей Теперь, имея информацию, необходимо извлечь из нее самую суть сайта и определить его задачи. Сформулируйте основные цели редизайна, включая ответ на вопрос: «Для чего потребовалось изменить сайт?» Этими целями могут быть необходимость увеличения трафика, сокращение звонков в службы поддержки, упрощение процесса продаж, улучшение навигации по сайту, изменение внешнего оформления сайта и так далее.
Один процесс, подходящий для всех
43
УТОЧНЕНИЕ: ОПРЕДЕЛЕНИЕ ОКОНЧАТЕЛЬНЫХ ЦЕЛЕЙ
> Подготовка креативного брифа
> Подготовка креативного брифа Креативный бриф проекта - сводка всех оформительских и концептуальных задач. Этот документ еще раз определяет целевую аудиторию, цели пользователей на сайте и стратегию взаимодействия с ними. Он также обрисовывает предлагаемый стиль и общий облик сайта после редизайна. Креативный бриф утверждается клиентом, а проектная группа руководствуется им в своей работе. При подготовке креативного брифа воспользуйтесь предлагаемыми рабочими таблицами. Их можно загрузить с www.web-redesign.com.
Планирование Здесь хватает административных задач: бюджет, графики, комплектование проектной группы и многое другое, что касается каждого отдельного аспекта проекта. Теперь, когда цели сайта определены, можно приступить к составлению графика конкретных действий по редизайну. Документы, подготавливаемые на этой стадии, станут компонентами плана проекта.
ПЛАНИРОВАНИЕ > > > > > > > >
Составление бюджета Установка средств отслеживания времени работы Составление графиков работ Формирование проектной группы Организация демонстрационной площадки Планирование юзер-тестинга Компоновка плана проекта Начало работ по проекту
> Составление бюджета Из всех административных задач самой первой, естественно, является составление бюджета, так как он определяет объем, допустимые границы затрат и осуществимость проекта. Хотя бюджет обычно зависит от того, чем располагает клиент, фактические расходы основаны на времени работы над проектом. Составьте реальное представление о ресурсах, распределении времени и определите готовые, подлежащие сдаче компоненты проекта. Воспользуйтесь счетчиком бюджета (budget tracker) - инструментом, который поможет контролиро-
44
Отслеживайте затраченное время В общем случае организации, которые следят за временем и обычно знают, как складывается их бюджет и как он используется, - прибыльны. Те же, кто не отслеживает время, - или неприбыльны или просто удачливы. Установите способ отслеживания времени, занятого работой над проектом, и затем тщательно и точно считайте рабочие часы. Это важно как для фирм-разработчиков, так и для внутренних отделов разработок; это помогает проанализировать доходность и позволяет оценить время работы над проектом каждого сотрудника группы (и его долю в бюджете проекта). Подробнее об отслеживании времени см. в описании фазы 1.
Глава 2
вать и отслеживать бюджетные траты. Этот инструмент можно найти в описании фазы 1 или загрузить с www.web-redesign.com. > Установка средств отслеживания времени работы Выберите надежный способ отслеживания времени, занятого работой над проектом, и непременно пользуйтесь им. Сравнивайте фактические затраты времени с запланированными. При регулярной оценке затраченного времени легче заметить, когда проект выходит за свои рамки. Для этой цели существует много средств - удачных и неудачных. Найдите способ, удобный для вас. Пара способов отслеживания времени предлагается в описании фазы 1. > Составление графиков работ Назначенный срок сдачи обычно стимулирует сотрудников. Обозначьте сроки в двух местах: сначала в общем плане работ, а затем в детальном графике - день за днем. Как общий план работ (общий взгляд на проект, который позволяет вам и клиенту видеть перспективу), так и детальный график (где отражено все: и сроки готовности отдельных компонентов, и даты сдачи-приемки, и сроки платежей) вызывают чувство срочности. В качестве образцов можно использовать графики работ, предложенные в книге (они представлены в описании фазы 1). > Формирование проектной группы Укомплектуйте проектную группу. При распределении индивидуальных ролей помните, что сотрудникам придется выполнять множество разноплановых задач, поэтому четко очертите круг обязанностей для каждого из них. На всем протяжении работы над проектом поддерживайте взаимодействие со всеми членами группы. Основные задачи процесса проектирования перечислены при описании фазы 1.
Один процесс, подходящий для всех
> Организация демонстрационной площадки Демонстрационная площадка играет роль центрального пункта координации работ. Будет ли это сайт клиента или отдельный сайт для проекта, это должен быть конкретный URL для размещения и просмотра текущих материалов по проекту. Эта клиентская демонстрационная площадка всегда должна отражать текущее состояние работ, должна быть удобной в эксплуатации и обеспечивать легкий переход от одних материалов к другим. Для работы проектной группы создайте отдельную площадку без доступа к ней клиента. > Планирование юзер-тестинга Подумайте, в какой форме организовать юзер-тестинг проекта. Существует много проверенных способов обратной связи (фокус группы, интерактивные анкеты и так далее), но юзабилити-тестирование сайта отличает именно то, что оно показывает, как пользователи на самом деле используют сайт, о не то, что они лишь думают по этому поводу. В описании фазы 1 предложены различные формы юзер-тестинга. Более подробные сведения на эту тему см. в главе 8. > Компоновка плана проекта Требования к документации изменяются от проекта к проекту. Подробный план проекта содержит бюджет, графики работ, креативный бриф, техническую документацию и другие материалы, имеющие отношение к тематике проекта. Форма представления может быть различной, как и общее количество страниц; чаще всего это зависит от формальных требований, предъявляемых к конкретному проекту. В описании фазы 1 предложены образцы некоторых компонентов плана проекта. > Начало работ по проекту Общее собрание - хороший старт работ над проектом. Познакомьте клиента с проектной группой и собранными на стадии выяснения материалами
45
Скрепляйте все изменения подписью клиента Ничто не делает клиента более ответственным, чем его подпись на документе. Есть надежное практическое правило: если обсуждение касается размера проекта, бюджета или графика работ, то протоколируйте это и заверяйте подписью клиента. Выясните, кто со стороны клиента имеет право подписи. Одобрения по электронной почте хороши как предварительное согласие, но, чтобы избежать недоразумений, всегда добивайтесь подписанного документа: просите прислать подписанную копию по факсу. Для каждого проекта создайте отдельный каталог (или заведите отдельную папку для бумаг), чтобы помещать туда все подписанные документы: контракты, брифы, исходную заявку и последующие изменения, утвержденную карту сайта, стиль визуального оформления и так далее. Порой клиенты очень забывчивы. В этом случае хорошо помогает вежливое напоминание о подписанных ими документах и утвержденных ими сроках сдачи работ. Более подробно о документации см. в описании фазы 1.
Глава 2
46
(если они собраны), охарактеризуйте ожидаемые результаты и установите рамки проекта. Четко обсудите способы взаимодействия и запланируйте еженедельные встречи или сеансы конференц-связи на весь период работы.
Фаза 2: Разработка структуры сайта С фазы 2 начинается практическая работа над проектом. Разработка структуры сайта включает все, что касается его содержимого и информационной стратегии, определяющей, как должна быть организована информация, чтобы пользователи сайта могли найти ее легко и быстро. Создается ли сайт для новой компании или перепроектируется имеющийся сайт, идет ли речь о бюджете в 5 тысяч или в 250 тысяч долларов, - это неважно: логическая структура необходима любому веб-сайту. Да, клиента прежде всего заботит внешнее оформление и впечатление, производимое сайтом, но разработка надежной, хорошо продуманной схемы заложит основу для всего остального, включая и визуальный дизайн.
С точки зрения контента Без хорошего, информативного содержания никакой сайт не станет неотразимым. Контент и структура сайта взаимозависимы: нельзя создать одно, не продумав другое. Разбивка и классификация страниц напрямую определяются содержимым сайта, а способ, которым организован контент, определяет процесс структурирования.
С ТОЧКИ ЗРЕНИЯ КОНТЕНТА > > > >
Определение тематики и организация контента Анализ существующего контента Структурирование контента Создание плана поставки контента
Один процесс, подходящий для всех
> Определение тематики и организация контента Тематика содержимого должна быть продумана как можно раньше. Начните организацию контента концептуально и оцените это с точки зрения посетителей сайта. Сведения по каким темам пользователи сочтут уместными на данном сайте? Назначьте или наймите кого-то специально для управления контентом, предпочтительно на клиентской стороне. > Аудит существующего контента Не соблазняйтесь идеей использования старого контента только потому, что это доступнее и проще. Проанализируйте все имеющиеся материалы: тексты, рисунки, схемы, мультимедийные компоненты и так далее. Это прекрасная и необходимая возможность выяснить, чем из прежнего контента можно воспользоваться в новом проекте, а что должно быть исключено. > Структурирование контента Для дальнейшей организации контента используйте простую, всем знакомую иерархическую структуру с нумерацией разделов римскими цифрами. Определите разделы контента, включая и новые материалы. Можно надеяться, что эту структуру определит клиент, хотя, вероятно, придется дискутировать по ее поводу. Необязательно иметь всю информацию абсолютно готовой - написанной, выверенной, полученной, но проектная группа должна быть осведомлена обо всех поступающих материалах. > Создание плана поставки контента В плане поставки контента уточняются сроки поставки информационных материалов - существующих, исправленных и новых. Назначаются ответственные за тексты, рисунки и другие необходимые элементы. Устанавливаются сроки платежей. Опыт показывает, что с контентом всегда бывают задержки, но такой план должен помочь.
47
Боритесь с задержкой поставки контента Задержки с поставкой контента самая частая причина неукладывания в. сроки. Чем это объясняется? Сама задача пополнения информационных ресурсов обычно явно недооценивается. Это проверено, и будьте готовы расплачиваться за это. Один из способов борьбы с задержками поставки контента — специально НАНЯТЬ КОНТЕНТ-МЕНВДКЕРА: человека, который будет контролировать весь процесс поставки контента. Второй способ заключается в СОЗДАНИИ ПЛАНА П0СТАВКИ КОНТЕНТА. Это специальный график, в котором намечены реальные сроки поставки материалов по мере их готовности. Более подробно о контенте сайта см. в описании фазы 2,
48
Глава 2
С точки зрения сайта Возможность представлять весь модернизируемый сайт в целом - важный аспект при его структурировании. Так же как для строительства любого здания необходимо иметь чертежи, структура сайта тоже должна быть сначала отражена в эскизах, которые затем преобразуются в карту сайта - основу для проектирования. С ТОЧКИ ЗРЕНИЯ САЙТА
I > Создание карты сайта I > Пересмотр текущей организации сайта I > Установка соглашений об именовании
> Создание карты сайта Карта сайта отражает предполагаемые ссылки и основную навигацию по сайту. Она используется вместе с иерархической структурой контента (но не вместо нее). Если в карту сайта вносятся изменения, они должны быть незамедлительно утверждены клиентом, а модифицированная карта доведена до сведения всех заинтересованных лиц. Карта сайта, обсуждаемая в этой книге, очерчивает контент, организацию сайта и некоторые функциональные возможности, но не заменяет технические или конструктивные схемы. > Пересмотр текущей организации сайта Создавая карту сайта, оцените организацию текущего сайта с точки зрения пользователя. Что можно изменить, чтобы сделать навигацию по сайту более интуитивной? Проанализируйте карту текущего сайта, а затем запланированную новую карту. Сравните их. Убедитесь, что верно расставили акценты для редизайна. > Установка соглашений об именовании Все файлы - разделы это или страницы - должны именоваться в согласованной, единообразной манере. Для этого не существует отраслевых стандартов, поэтому сами выберите способ, удобный для всей проектной группы, и придерживайтесь его. Для полного порядка в документации приложите соглашения об именовании к карте сайта, а также к плану поставки контента.
С точки зрения страницы Структурирование сайта с точки зрения страниц во многом подобно работе с архивными документами. Определив тематику содержимого и создав карту сайта, можно тщательно просмотреть все - страницу за страницей. Выяснив, что и
Один процесс, подходящий для всех
49
на какой странице находится, а также как страницы взаимодействуют друг с другом, легче представить организованный контент таким образом, чтобы он был выразительным и максимально удобным для пользователя. С ТОЧКИ ЗРЕНИЯ СТРАНИЦЫ > Создание макета j > Обеспечение навигации > Именование и маркировка
> Создание макета Макет - это чисто информационный (без всякого дизайна) каркас, в котором намечено содержимое, первичная и вторичная навигации, а также некоторые функциональные возможности. Прежде чем приступить к дизайну, можно оценить, что получится в итоге, изобразив на бумаге все элементы страницы. Кроме того, сопоставляя макеты страниц друг с другом (интерактивные макеты), можно лучше представить, как будет выглядеть их положение. Полезный перечень того, что следует включать в макеты, см. в описании фазы 2. > Обеспечение навигации Навигация дает пользователям доступ к содержимому сайта. Можно использовать кнопки, ссылки и графику, чтобы создать ощущение пространственного расположения объектов, помогая посетителям сориентироваться: где они находятся в данный момент, куда им нужно переместиться, как вернуться в то место, где они были. При редизайне следует учитывать тенденцию пользователей полагаться на привычные навыки навигации по прежнему сайту. Примеры различных навигационных моделей обсуждаются при описании фазы 2. > Именование и маркировка Наименование кнопок и пиктограмм, включая стиль формулировок, должно быть согласованным на всем сайте. На данной стадии работ определите, какие подсказки (значки и/или текст) будут использованы для подписи заголовков, маркировки и навигации. Единообразие в этом вопросе очень важно. > Определение основных маршрутов пользователей Если для данного сайта не требуется, чтобы пользователи фактически выполняли какие-то задачи (например, заполняли формы, входили в систему, делали покупки), можно пропустить этот шаг. Но если посещение сайта пользователями включает подобные действия, выясните маршруты этих задач и сформируйте макеты для каждой страницы на каждом маршруте. С помощью этих взаимосвязанных макетов можно проверить расположение страниц и оценить правиль-
Глава 2
50
ность пути. Примеры реального маршрута пользователей как на макетах, так и в виде снимков экрана см. в описании фазы 2.
Фаза 3: Визуальное оформление и тестирование Визуальный облик сайта, его оформление и восприятие, графический интерфейс - это первое, с чем сталкивается пользователь. Еще не оценив, удобен ли сайт, посетители видят, как он выглядит. Разработка визуального оформления любого сайта - захватывающий процесс и, приступив к фазе 3, проектировщики наконец становятся творческими людьми. На этой стадии создаются все элементы дизайна сайта в соответствии со стилем подачи информации и общей концепцией, сформулированными в креативном брифе проекта. После этого дизайн сайта утверждается, доводится до совершенства и тестируется. Дизайнеры производства также начинают работу на этой стадии. Они проверяют реализуемость функциональности и разные допущения. Создав прототип сайта, так называемый протосайт (ргоtosite), они могут подтвердить разработанную навигацию и организацию контента. Визуальный дизайн и его тестирование (путем создания протосайта или при помощи прямой проверки функциональности) преследуют одну и ту же цель для любых сайтов - создать полноценный интерактивный дизайн, который отвечает потребностям пользователей и который можно гладко преобразовать в HTML.
Создание Непросто удержать баланс между творческими устремлениями и техническими ограничениями. Визуальный дизайн - это не только создание привлекательного интерфейса, это еще учитывание требований и интересов пользователей на разных
Один процесс, подходящий для всех
уровнях. Даже если дизайн неотразим, но сайт использовать неудобно, то его оформление неудачно. СОЗДАНИЕ
S > Анализ целей сайта | > Разработка концепций | > Представление дизайна и получение одобрения
> Анализ целей сайта Визуальный дизайн не должен выполняться независимо. Проанализируйте цели сайта и технические требования. Перечитайте креативный бриф; еще раз ознакомьтесь с аудиторией. Ориентируйте дизайн на аудиторию, а не потворствуйте чьим-либо авторским амбициям. > Разработка концепций Концептуальный мозговой штурм заключается в придумывании визуальных решений, которые функционируют и отвечают всем целям сайта. Дизайнеры экспериментируют с цветами и расположением объектов, пиктограммами и эскизами. Производственная группа также включается в эту работу; перед представлением клиенту все концепции должны быть опробованы разработчиками на предмет их реализуемости. > Представление дизайна и получение одобрения Представьте себе, каково работать с клиентом, который несколько раз меняет требования к дизайну, каждый раз чем-то улучшая предыдущий вариант. Четко определите ожидаемые результаты, сдерживайте энтузиазм клиента и избегайте «синдрома бесконечного улучшения». Если клиент настаивает на разработке направления, не заявленного первоначально в креативном брифе, предъявите ему дополнительный счет. Совершенствуйте дизайн, пока он не утвержден. Одобрение дизайна клиентом обязательно получите в письменной форме.
51
Используйте разумный дизайн Разумный дизайн направлен на пользовательскую среду и возможности посетителя. Разумный дизайн - это функциональность и быстрая загрузка. Он нацелен на опыт пользователя, а не на амбиции дизайнера, желание применить Flash, разместить баннерную рекламу или даже удовлетворить личные причуды управляющего компанией клиента. Если что-то ущемляет интересы пользователя, это не разумный дизайн, даже если это очень круто. Как осуществить разумный дизайн? Просто. Войдите в роль пользователя. Перемещайтесь по сайту, нажимайте на ссылки и загружайте файлы делайте то, что делают пользователи. Внедряйте информационный дизайн, а не сражайтесь с ним. Подробнее о разумном дизайне см, в описании фазы 3.
52
Глава 2
Выверка При работе над визуальным дизайном найдите время на выверку содержимого, переходов страниц, навигации и предложенной функциональности, разработанных в фазе 2. Не проделав этого, рискованно переходить к производству HTML. Подключите дизайнеров производства к проверке всех аспектов — от начальных эскизов до презентационных для гарантии того, что все в порядке. ВЫВЕРКА > Создание протосайта > Проверка функциональности
> Создание протосайта На данном этапе производственной группе лучше начать с HTML, в котором есть только гиперссылки. Такой «протосайт» даст возможность исследовать содержимое, навигацию и положение страниц. Установите, осмысленно ли работает информационная модель. Другими словами, может ли кто-нибудь действительно пройти по сайту так, как вы планировали. В некоторых случаях этот протосайт и становится фактическим сайтом. > Проверка функциональности Перед окончательной формализацией дизайна выполните дополнительное тестирование на нескольких броузерах и платформах всех специальных эффектов, таких как всплывающие окна, DHTML, выпадающие меню и фреймы, а также других возможностей, включая «облегченные» сценарии. Это уменьшит риск возникновения серьезных проблем во время производства.
Переход к производству После того как внешний дизайн доведен до блеска и одобрен клиентом, его необходимо перенести на множество страниц, а затем каждую из этих страниц подготовить к оптимизации и производству HTML.
ПЕРЕХОД К ПРОИЗВОДСТВУ > Создание графических шаблонов > Создание руководства по стилю оформления
Один процесс, подходящий для всех
53
> Создание графических шаблонов Переход от опробованного и одобренного макета к окончательному производству осуществляется с помощью графических шаблонов. Эти файлы показывают всю функциональность, в том числе состояния конкретного элемента страницы с положением указателя мыши на нем, вне него и при проходе над ним (так называемые состояния on/ off /over), и включают вместо содержимого заполнители, то есть в них есть вся информация, которая необходима для перенесения визуального дизайна в HTML. > Создание руководства по стилю оформления Превосходным пособием для дальнейшей работы по созданию страниц, их оформлению и поддержанию будет руководство по стилю оформления (Design Style Guide). Оно устанавливает стандарты для шрифтов, цветов, заголовков и многих других элементов оформления, что поможет группе поддержки сохранить единообразие дизайна. Таблица рекомендуемых компонентов для руководства по стилю оформления наряду с наглядным примером приводится в описании фазы 3.
Фаза 4: Производство и контроль качества (QA) В фазе 4 все наработки по отдельным направлениям собираются воедино. Производство объединяет содержимое, элементы дизайна и создание HTML и/или Flash в полноценный сайт. В фазе 4 рассматривается необходимость внутреннего программирования. На этом этапе также производится проверка качества (QA) сайта. Оцените, удовлетворяет ли сайт всем предъявляемым требованиям. Опробуйте гибкость HTML.2 Произведите Под гибкостью HTML (HTML fluidity) подразумевается правильность отображения закодированного HTML различными броузерами на разных мониторах, с различными шрифтовыми наборами и установками по умолчанию, в различных операционных системах. - Примеч. науч. ред.
54
Проводите юзабилити-тестирование Из всех форм откликов пользователей информация, полученная при юзабилити-тестировании сайта, наиболее ценна, потому что она отражает не ваши абстрактные размышления о возможных действиях пользователей на сайте, а то, как фактически действует пользователь, какие маршруты он выбирает, как находит информацию и как вообще взаимодействует с данным веб-сайтом. Результаты такой проверки видны сразу, и их трудно оспорить. Выполняя неформальное тестирование в ходе всего процесса разработки, можно попутно проверять свои предположения и принимать соответствующие решения, таким образом совершенствуя информационное проектирование сайта, навигацию, именование, маркировку и весь облик сайта. Вводите юзабилити-тестирование в процесс разработки. Подробнее о тестировании см. в главе 8.
Глава 2
проверку качества (QA). Выявите ошибки, расставьте приоритеты их устранения и исправьте их. Изучите отклики пользователей и отреагируйте на замечания. Запуск сайта приближается.
Подготовка Перед началом фактической компоновки сайта уделите время уточнению первоначальных целей и контекста проекта. Просмотрите техническую спецификацию аудитории, убедитесь, что готовы все необходимые графические шаблоны, проверьте положение дел с контентом и подготовьтесь к стадии фактической компоновки сайта. ПОДГОТОВКА
| > Определение основополагающих принципов I > Оценка состояния проекта I > Формирование файловой структуры
> Определение основополагающих принципов Конкретные решения по поводу броузера, платформы, технологии и файловой структуры должны быть приняты на ранних стадиях Базового процесса, задолго до того, как начинается изготовление сайта, а в идеале - в самом начале работы над проектом. Ведомость клиентских технических требований (Client Spec Sheet) - это опросный лист для главного технического специалиста клиента. Его ответы обеспечивают проектную группу всеми необходимыми параметрами для определения основополагающих принципов проектирования. Ведомость клиентских технических требований - детализированный опросник. Частично он приведен в описании фазы 4, а полностью его можно загрузить с www.web-redesign.com.
Один процесс, подходящий для всех
55
> Оценка состояния проекта
Работа над разными аспектами проекта протекает неравномерно. Оцените проект с точки зрения затрат времени, бюджета, тематики и ожидаемых результатов. Сколько часов запланировано в бюджете и сколько уже потрачено? Сравните первоначальные предположения с действительным состоянием. На данном этапе перед началом фактического формирования сайта самое время пересмотреть ресурсы и, возможно, запросить увеличение бюджета, если были ошибки в предварительных оценках, возникли дополнительные требования или проявились непредвиденные технические сбои. > Формирование файловой структуры Произведите чистку. Не исключено, что структура прежних каталогов не в полном порядке. Принимая оптимальные для проекта соглашения об именовании и организации работ, учитывайте аспекты последующей поддержки сайта и его масштабируемости. Даже для динамических сайтов следует принимать во внимание статические страницы. Перед началом сборки сайта уточните, каким образом файлы будут именоваться, сохраняться и архивироваться.
Компоновка Производство HTML начинается всерьез. Если все проблемы решены, а все детали уточнены, этот процесс может протекать вполне гладко. Если же остались недочеты, он может стать дорогостоящим. Задача в том, чтобы закодировать каждую HTML-страницу только однажды. При производстве HTML чрезвычайно важно, особенно группе производственных дизайнеров, придерживаться стандартов языка. Стремитесь к единообразию стиля. По ходу дела оценивайте полученные результаты и сразу устраняйте проблемы. КОМПОНОВКА | > Разбиение на части и оптимизация графики 1 > Создание HTML-шаблонов и страниц > Внедрение облегченных сценариев I > Заполнение страниц 1 > Введение сложных функциональных возможностей
I
> Разбиение на части и оптимизация графики Преобразование графических файлов в HTML-страницы требует навыков. На этом этапе дизайнеры производства фактически разбивают, или нарезают, графические шаблоны на отдельные GIF- и JPG-файлы, которые превратятся в
56 Включайте невидимое содержимое При формировании отдельных страниц и их заполнении добавьте к ним невидимое содержимое (информацию о глобальных для сайта переменных внесите при формировании HTML-шаблонов). Вставка невидимого содержимого, включающего ALT-, МЕГАи TITLE-теги, часто оставляется до самых последних этапов изготовления сайта, если вообще не забывается. Некоторые компоненты невидимого содержимого поставляются клиентом, но чаще всего его формируют сами дизайнеры производства. Это еще раз подчеркивает необходимость соглашения об именовании.
Глава 2
обыкновенную графику (flat graphics), анимацию и динамически изменяемую графику (rollovers) и которые заполнят HTML-шаблоны и страницы. Стремитесь к минимизации объема страницы. Где возможно, используйте стандартные цвета и закрашенные ячейки таблиц. > Создание HTML-шаблонов и страниц Все сайты - и статические и динамические - начинаются с HTML-шаблона. Эта мастер-страница, или набор страниц, используется для создания всего остального сайта. Если сайт будет выстроен из статических HTML-страниц, этот этап явится началом фактического производства HTML. На этой стадии кодируются «облегченные» сценарии для глобальных элементов сайта, а также формируется невидимый контент, который также является глобальным. > Внедрение «облегченных» сценариев Под «облегченным» сценарием имеется в виду то, что вы прекрасно можете закодировать и сами с помощью JavaScript или DHTML. Такие эффекты, как динамическая смена графики, формы, выпадающие меню, всплывающие окна и фреймы, должны быть реализованы в HTML-шаблонах (или на отдельной странице, если эффект предназначен только для данной страницы) и проверены. > Заполнение отдельных страниц Если контент еще не подготовлен, вы не можете заполнять страницы. Это этап Базового процесса, где возможно торможение. Контент уже должен быть готов, но не исключены задержки с ним, что создает эффект домино, который часто добавляет дополнительные временные и денежные расходы по сравнению с запланированными. Избегайте этого. Не преуменьшайте время, необходимое для поставки контента, устанавливайте реальные сроки и твердо придерживайтесь их.
Один процесс, подходящий для всех
57
> Введение сложных функциональных возможностей Если проект включает внутренние программные разработки, вам понадобится книга более технической направленности. Применение внутреннего программирования и приложений - это совсем другая область, которая в данной книге не освещается. Здесь просто указывается, на каком этапе требуется введение таких разработок: именно на данном этапе, в конце стадии компоновки сайта в фазе 4.
Тестирование Сайт сформирован; теперь следует удостовериться, что он работает. Проверка качества — это исчерпывающая проверка работы сайта, направленная на выявление ошибок и достижение первоначальных целей, сформулированных в фазе 1. На предыдущих стадиях производились отдельные проверки. Теперь, когда сайт сформирован, пришло время проверить его в целом. Будет ли это тестирование формальным или неформальным, по специальному плану или просто путем запуска сайта, - существуют инструментальные средства, ресурсы и фирмы экспертного уровня, которые помогут осуществить проверку качества. ТЕСТИРОВАНИЕ > Создание плана контроля качества > Проверка качества > Расстановка приоритетов и устранение ошибок > Заключительное тестирование > Создание плана контроля качества При любом тестировании - неформальном, полуформальном или полном - следует составить план. План контроля качества определяет методологию тестирования сайта по отношению к разным броузерам, платформам и техническим требованиям. В нем перечисляются ресурсы, графики задач, оборудование и ожидаемые результаты, а также приводится схема отслеживания и устранения ошибок. В описании фазы 4 приведен вполне приемлемый список элементов, которые могут составить основу плана контроля качества. > Проверка качества Тестирование качества должно проводиться в несколько этапов. Сначала выполняется внутреннее тестирование (иногда называемое альфа-тестированием), а затем бета-тестирование, причем желательно на текущем сервере (до запуска сайта, если есть доступ к серверу, или после запуска). Уровень тестирования зависит от бюджета, времени, ресурсов и квалификации тестеров. Главная цель контроля качества состоит в выявлении ошибок. Если для проверки качества
58
Глава 2
имеется отдельная формальная группа тестирования, она только определит ошибки. Устранение ошибок - задача группы по производству сайта. > Расстановка приоритетов и устранение ошибок Организация способа отслеживания ошибок, расстановки приоритетов и устранения обнаруженных дефектов сделает процесс тестирования более гладким. Расставьте приоритеты, проконтролируйте устранение ошибок и перепроверьте исправленное до окончательного запуска сайта. В описании фазы 4 приведен список возможных ошибок, а кроме того, в помощь внутренним группам по проверке качества предложены полезные инструменты, доступные для онлайновой загрузки. > Заключительное тестирование
Запуск
Сайт готов к жизни. Работы по его проверке и устранению недочетов на демонстрационной площадке (или скрытом URL) завершены. Тем не менее, перед перемещением сайта на постоянный сервер следует провести заключительное тестирование дизайна, контента, качества производственных работ и функциональности. Удостоверьтесь также, что клиент расписался в приемке сайта. Заключительное тестирование подробно обсуждается в конце описания фазы 4.
Фаза 5: Запуск и сопровождение Достижение этой стадии означает начало функционирования обновленного сайта. Примите поздравления! Запуск сайта - очень существенный этап, но это еще не конец работ. Данная стадия охватывает аспекты, которые должны быть продуманы до, во время и после выхода сайта в жизнь. Она касается подбирания «хвостов» и красивой упаковки проекта перед переходом сайта в следующую фазу его существования: постоянного сопровождения.
Один процесс, подходящий для всех
59
Фаза 5 — это этап, на котором действия будут различными в ситуациях с внутренними проектными группами и внешними фирмами веб-разработчиков. Хотя здесь, в обзоре, эта разница не обсуждается, в описании фазы 5 обязанности этих двух типов проектных групп тщательно раграничены.
Передача сайта В большинстве случаев работы по проектированию и формированию сайта выполняет одна группа, а эксплуатацию сайта, его постоянную поддержку обеспечивает другая. Переход сайта из состояния разработки в состояние текущей поддержки обычно определяется его запуском. В это время одна группа заканчивает все разработки и передает все материалы и файлы другой, которая будет осуществлять текущий дизайн, производство и обновление сайта. ПЕРЕДАНА САЙТА I > | > I > I > I > •
Завершение руководства по стилю оформления Создание пакета передачи Разбор и архивирование документации Проведение заключительной встречи Планирование инструктажей по сопровождению сайта I
> Завершение руководства по стилю оформления После запуска сайта к руководству по стилю оформления (Style Guide), сформированному в фазе 3, добавляются необходимые дополнительные рекомендации по производству. Эта часть руководства по стилю оформления (Production Style Guide) должна включать коды HTML-тегов, атрибуты и определения графических элементов - всю информацию, необходимую для передачи от дизайнеров производства группе сопровождения. Перечень рекомендуемых компонентов для этой части руководства наряду с наглядным примером приведен в описании фазы 5. > Создание пакета передачи Все необходимые материалы по разработке и эксплуатационной поддержке сайта должны быть собраны в пакет документов для передачи клиенту и группе сопровождения. Перечень рекомендуемых материалов для пакета передачи сайта см. в описании фазы 5. > Разбор и архивирование документации Все документы (электронные и на бумаге), имеющие отношение к изменениям масштаба проекта, бюджету, а также подтверждения клиента следует сохра-
Глава 2
60 Проводите анализ конкуренции Анализ вашей отрасли и конкуренции в ней поможет лучше оценить рейтинг сайта. Изучите основные особенности и юзабилити конкурирующих сайтов. Неформальный анализ, выполненный с точки зрения пользователя, позволит лучше оценить достоинства сайтов, их сервис и удобство использования. Дальнейшие уточняющие исследования и анализ их результатов обеспечат более глубокое понимание клиента и его отрасли, давая более квалифицированную оценку, но потребуют и больших расходов. Анализ конкуренции должен быть частью стадии выяснения независимо от уровня подхода. Подробнее о проведении анализа конкуренции см. в главе 9.
нить. Бумажные копии первоначального контракта, предложения, план проекта и другая соответствующая документация должны быть зарегистрированы и заархивированы. Отсортируйте и организуйте хранение необходимых материалов. Рекомендуемый для архивирования перечень документов можно найти в описании фазы 5. > Проведение заключительной встречи Каждый проект способствует накоплению опыта. Заключительная встреча даст возможность еще раз собрать вместе представителей обеих сторон для конструктивного обсуждения проекта. Цель такой встречи - выявить положительные моменты работы над проектом и учесть на будущее проявившиеся недостатки. > Планирование инструктажей по сопровождению сайта Группе сопровождения сайта почти всегда необходим некоторый тренинг. Обычно он обеспечивается конкретными рекомендациями, включенными в руководства по стилю оформления и изготовления сайта. Для крупных сайтов и при наличии собственных групп веб-дизайнеров в фирме эксплуатационная поддержка может включать дополнительные фазы разработки приложений, систем управления контентом, а также повторные перезапуски сайта.
Запуск С завершением контроля качества и достижением стабильной работы можно анонсировать действующий сайт в Сети. Скорее всего на этот момент еще остаются некоторые недочеты, которые будут устраняться, но сайту уже дано «добро», и он открыт для пользователей. Хотя фактический запуск - в действительности не более чем еще один этап в жизни проекта, он вводит некоторые аспекты, требующие гораздо больше времени и ресурсов.
Один процесс, подходящий для всех
61
ЗАПУСК j > Подготовка плана анонсирования | > Регистрация в поисковых системах | > Запуск сайта
> Подготовка плана анонсирования План анонсирования формируется задолго до запуска сайта - обычно внутренней или внешней маркетинговой группой. Желательно, чтобы она заблаговременно уведомила о редизайне сайта существующую аудиторию, чтобы сохранить ее и поддержать с ней обратную связь. Будучи поглощенными работой над обновлением сайта, не забывайте еще до начала основной рекламной кампании информировать аудиторию о степени готовности и предполагаемых сроках запуска. > Регистрация в поисковых системах Даже если ваш сайт уже зарегистрирован в поисковых системах, запланируйте повторную регистрацию после запуска обновленного сайта. Используйте в фазе 5 специальный инструмент МЕТА Data Creation Tool, эффективно помогающий создавать теги ключевых слов (keywords) и заголовков (title). Кроме того, не пропустите в фазе 5 описание четырех верных способов скрыться от поисковых машин, чтобы убедиться, что вы эти способы не используете. > Запуск сайта Поверните ключ. Сайт оживает. Примите поздравления! Запланируйте запуск сайта на не самые оживленные часы, чтобы учесть возможность решения предстартовых проблем. На период перехода от прежнего сайта к обновленному заведите временную начальную страницу. Крупные сайты могут производить запуск нового сайта поэтапно, так как ввод и тестирование могут занимать по несколько часов в течение нескольких дней. На случай возникновения серьезных проблем обеспечьте возможность временного отката к прежнему состоянию.
Сопровождение Убедитесь, что на месте имеется команда для создания контента, производства HTML и выполнения любых необходимых изменений в визуальном дизайне. Как часто будет обновляться сайт? Ежедневно? Ежемесячно? Как будут архивироваться материалы? Кто будет отвечать за текущую поддержку сайта? Насколько находчив этот человек? В начале проекта (на этапе планирования) вы заполняли эксплуатационный опрос (Maintenance Survey); теперь пришло время все оценить, переоценить и перейти к совсем другой технологии - эксплуатационной поддержке.
62
Глава 2
СОПРОВОЖДЕНИЕ > > > >
Оценка возможностей группы сопровождения Разработка плана эксплуатационной поддержки Оценка успешности сайта Укрепление безопасности сайта
> Оценка возможностей группы сопровождения Лица, ответственные за обновление сайта, должны иметь достаточно высокий уровень навыков текущей поддержки модернизированного сайта. Команда вебразработчиков должна оценить способность группы сопровождения справиться со стоящими перед ней задачами. Проинформируйте клиента, если команда недоукомплектована, недостаточно квалифицированна или слишком многочисленна. > Разработка плана эксплуатационной поддержки Определите частоту и детали текущих обновлений сайта. Создайте электронную таблицу или официальный план, уточняющий разделы и контент, которые будут модифицироваться ежедневно, еженедельно, ежемесячно и ежеквартально. Установите сроки регулярной проверки сайта для выяснения его соответствия стандартам, приведенным в руководстве по стилю оформления. > Оценка успешности сайта Теперь, когда сайт работает, пришло время оценить результаты. Действительно ли новый сайт достиг целей, намеченных при его редизайне? Увеличился ли объем продаж? Снизилось ли число звонков заказчиков в технические службы? Наличие откликов пользователей по поводу качественных и количественных изменений, а также степень удовлетворенности заказчиков помогут оценить успех модернизации сайта. > Укрепление безопасности сайта Безопасность сайта - очень специфическая область, и она не обсуждается здесь глубоко, но в фазе 5 представлен возможный план мероприятий по обеспечению безопасности. Хакеры не дремлют; этот план поможет защититься от них.
Один процесс, подходящий для всех
63
Резюме В данном обзоре предложена общая панорама технологии редизайна веб-сайта, которая дает возможность представить весь Базовой процесс от начала до конца. Очень полезно, особенно в фазе 1, понимать, что еще предстоит сделать. К страницам этой главы можно обратиться при формировании бюджета, выделяя средства на каждую задачу в каждой фазе согласно отведенному на нее времени. При составлении графика работ этот обзор позволяет видеть все предстоящие шаги размещенными на одном листе бумаги, что облегчает представление их в хронологической последовательности. Возможность на любом этапе процесса хорошо осознавать следующие несколько шагов облегчает контроль за ходом работ и позволяет не потерять ориентиры. Наконец, эта глава - своеобразное резюме, только помещенное не в конце книги, а в самом начале. Благодаря этому читатели могут ознакомиться с Базовым процессом, а затем уже вникнуть в него глубже. Такой подход представляется авторам книги более целесообразным.
64
Учебный пример
LiquidMedium Клиент: LiquidMedium Дизайнер: Кайен Нассири (Kian Nassiri) URL: www.liquidmedium.com Ответственный за производство: Проектная группа (редизайн): Idea Integration, Мэнни Фритас (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**», r«-4tfinina tt.« currant mod*) utflfrtd by th
TURB0STAFF.COM [ПРЕЖНИЙ] был корпоративным, устаревшим и уже не отражавшим цели компании. Настало время изменить и ее брендинг и весь облик сайта.
Учебный пример
65
UquidMedium специализируется на организации всего процесса обеспечения человеческими ресурсами - от соурсинга и подбора персонала до найма и управления кадрами.
СОВРЕМЕННЫЙ
LIQUIDMEDIUM.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] имеет новый логотип, новый облик и новый брендинг. Выглядит современно и регулярно обновляется; все еще корпоративный, но не окостеневший. (2000 г.)
LIQUIDMEDIUM.COM [ОБНОВЛЕННЫЙ] медленно развился в новый сайт. Перейдя на внутреннее сопровождение, сайт приобрел новый контент и новые разделы. Через шесть месяцев он стал совсем другим. (2001 г.) Результат: Более очевидная навигация и заметные успехи при заключении контрактов с партнерами.
См. цветную вклейку, стр. 342-343
3 За к. 667
Фаза 1: Определение проекта Масштаб проекта: область проекта, ограниченная со всех сторон определенными рамками, включая бюджет, планы, креативное видение, технические потребности, а также общий размер.
Фаза 1: Определение проекта Любое дело может поначалу навеять страх, и редизайн веб-проекта - не исключение. Так много предстоит сделать... С чего же начать? С другой стороны, вы (а возможно, и ваш клиент) можете иметь общее представление о задачах проекта, и тогда работа начнется без особых волнений. Первая часть этой первой фазы процесса связана с подготовкой фронта работ и сбором информации. Эта глава поможет провести все подготовительные работы и составить планы. Она нацелена на развитие методов коммуникации, и мы стараемся не делать неверных предположений. Здесь предложено много удобных инструментов, предназначенных для того, чтобы помочь вам и вашему клиенту собрать необходимую информацию для определения целей, задач, бюджета, сроков и, конечно, аудитории. (Не упустите этот момент: знание аудитории - один из наиболее важных, но часто игнорируемых аспектов на подготовительном этапе разработки любого веб-проекта.) Имейте в виду, что в данной главе очерчены задачи, необходимые для определения проекта. Она не дает готового рецепта. Здесь представлена технология, а не подробный бизнес-план. А так как приходится углубляться и в детали, здесь встретится много потенциально полезной информации.
Фаза1: Определение проекта
69
Первая фаза Базового процесса разбита на три этапа: выяснение, уточнение и планирование. С помощью серии опросов, обсуждений и исследований этап выяснения позволяет понять три важные вещи: цель пребывания клиента в Сети, аудиторию сайта с ее потребностями и онлайновые возможности, а также сетевые аспекты отрасли клиента и его конкурентов. На стадии выяснения собирается информация и ставится много вопросов. Ответы на них послужат рекомендациями почти для всех последующих стадий. На этапах уточнения и планирования собранная информация служит для подготовки документации по проекту: на первом этапе - для формирования креативного брифа, а на последнем - для составления бюджета, графиков работ, плана тестирований и распределения обязанностей в группе. Цель этой документации - четко и ясно определить для клиента и всей проектной группы следующие моменты: • Каковы пожелания и цели клиента? Какой план предлагается для их достижения? • Какова общая стоимость проекта, как она распределяется по отдельным задачам и сколько времени требуется на решение каждой из них? • Кто входит в состав проектной группы и каковы их обязанности? • Что требуется от клиента? • Какие конкретно компоненты проекта подлежат сдаче и в какие сроки? • Каким образом сайт будет проверен на соответствие потребностям пользователей? • Каковы долгосрочные перспективы развития сайта? В конце первой фазы (определение проекта) все собранные и подготовленные материалы распространяются среди членов проектной группы и представителей клиента на совещании по поводу начала работ над проектом. Целью такого совещания является обмен мнениями для выработки единого представления о целях и задачах, а также единой терминологии на период работы над проектом, чтобы никому не пришлось гадать, какой этап на очереди и каков срок его выполнения.
Выяснение (или обнаружение, раскрытие) - это общий отраслевой термин, который может иметь несколько значений. Выяснение может иметь отдельный бюджет (часто выражаемый пятизначными числами) и план. Здесь имеется в виду упрощенный процесс выяснения, приемлемый для различных проектов и финансов.
70 ВЫЯСНЕНИЕ > Сбор информации > Изучение аудитории > Анализ отрасли
Глава 3
Сбор информации Выяснение - это теоретический, мыслительный этап работ, во время которого члены проектной группы должны войти в роль пользователей сайта и в максимально возможной степени понять целевую аудиторию, отрасль компании, прежний облик сайта и представить, каким он должен стать в результате редизайна. Для начала необходима информация. Следует выяснить все, что возможно, по поводу проекта, клиента, его отрасли и потенциальной аудитории сайта. Требуются ответы на множество вопросов, и в этом помогут опросные листы. Выяснение может занять одну неделю или много недель - это, естественно, зависит от бюджета и от подхода. Работу по выяснению может выполнять один человек или целый отряд исследователей. Независимо от этого выяснение следует начинать с опроса клиента (Client Survey).
Запрашивайте имеющиеся материалы Клиент может иметь выполненные исследования целевой аудитории и рынка. Запросите как можно больше информации по этому поводу. Однако имейте в виду, что бизнес-модельклиента могла измениться за год, поэтому представленная им информация может уже не соответствовать реальности.
Опрос клиента Клиенты обычно преследуют исключительно деловые цели и, к сожалению, часто недооценивают потребности сайта. Это понятно. Они не знатоки Сети и не веб-эксперты. Задавая клиентам правильные вопросы, можно побудить их взглянуть на редизайн их сайта другими глазами, и это поможет им понять необходимость ставить развитие веб-сайта на один уровень с важными задачами их бизнеса. Опрос клиента, который можно загрузить с www.web-redesign.com, - это довольно простая задача: раздать опросные листы, собрать ответы и проанализировать их. Во время анализа иногда требуется уточнить что-нибудь у клиента — по телефону или по олектронной почте. Раздача опросных листов — это первое, с чего следует начинать работу над любым веб-проектом. Постарайтесь получить ответы клиента как можно скорее.
Фаза1: Определение проекта
Порекомендуйте представителю клиента передать опросный лист всем ключевым фигурам в компании, принимающим решения. Во многих организациях таких лиц несколько, а наличие нескольких мнений откроет более широкую перспективу. Задача клиента — раздать опросные листы, а затем на основании полученных ответов заполнить обобщенный опросный лист для предоставления его проектной группе. Если проект выполняет внутренняя группа разработчиков, тогда, вероятно, опрос клиента и его анализ будут полностью возложены на нее. Для проектной группы очень важно иметь только один лист с ответами клиента, так как в противном случае можно получить несколько разных мнений по одному поводу. Клиент должен выработать и предоставить единые общие цели. Подгонка опросного листа Опросный лист клиента можно - и нужно — подстроить под специфику компании и сферу ее деятельности. Если разработчики внутренние и хорошо знают компанию и отрасль, можно убрать некоторые общие вопросы, а добавить более детальные. Фактически руководитель внутренней проектной группы может самостоятельно заполнить опросный лист. Все проекты отличаются объемом, масштабом и направленностью. Опрос клиента предназначен для получения подробной, но базовой информации, необходимой для общего редизайна веб-сайта. Используя его как основу, выясните, требуется ли дополнительная информация, чтобы понять конкретные цели проекта. Однако не ошеломляйте клиента излишним количеством вопросов, иначе не сможете получить даже основные сведения. Анализ опроса клиента Опрос клиента, проанализированный один раз, служит многим целям. К нему придется обращаться регулярно, особенно при определении целей
71
Согласование целей Когда ключевые фигуры в компании клиента имеют разные мнения в отношении целей редизайна, это обычно плохой признак, указывающий на то, что в компании клиента имеются серьезные разногласия или дезорганизация. В зависимости от источника спорных мнений, возможно, что данные, собранные при проверке юзабилити текущего сайта или на некоторых сайтах конкурентов, могли бы помочь персоналу клиента выработать единые цели. Реальные пользователи ясно показывают, что работает и что не работает. Однако учтите, что отзывы посетителей, хоть они и невероятно проницательны, не могут заменить наличие четко взвешенных бизнес-целей. Подробнее о юзабилити-тестировании см. в главе 8 «Юзабилити-тестирование»; об анализе конкуренции - в главе 9 «Анализ конкуренции».
72
Глава 3
Ответы, данные клиентом, послужат фундаментом для успешного создания веб-сайта. Этот опрос поможет выявить и сформулировать цели редизайна сайта, а также специфику его посланий, аудитории, контента, общего облика сайта, его восприятия и функциональности. Каждое ключевое лицо, принимающее решение относительно модернизации веб-сайта, должно
заполнить свой экземпляр опроса, кратко и четко ответить на все поставленные вопросы и добавить в конце опроса любые дополнительные замечания или комментарии. Опросный лист с обобщенными ответами клиента должен быть отправлен по электронной почте руководителю проектной группы.
ОПРОС КЛИЕНТА Общая информация 1. Напишите название компании и текущий (или будущий) URL 2. Кто является основным контактным лицом от организации и кто имеет право подписи документов по проекту? Пожалуйста, укажите имя, должность, адрес электронной почты и номер телефона. 3. Какую дату запуска нового сайта вы намечаете? Существуют ли какие-либо внешние обстоятельства, которые могут изменить график (например, PR-кампания, выставка или ежегодный отчет)? 4. Определен ли уже порядок финансирования данного проекта? Можно ли разбить проект на этапы, чтобы согласовать бюджетные и временные ограничения? Текущий сайт 1. Считаете ли вы текущий сайт удобным для пользователей? Почему? 2. Какие конкретные разделы текущего сайта вы считаете удачными? Чем они хороши? 3. Какие недостатки есть у текущего сайта и какие три вещи вы бы изменили сегодня, будь это возможно? 4. Проводилось ли вами юзабилити-тестирование и имеются ли отзывы пользователей о текущем сайте? Как давно? Пожалуйста, включите любые отчеты или сведения по этому поводу. 5. Насколько важно сохранить текущий облик сайта, его логотип, брендинг? Причины редизайна 1. Каковы основные причины редизайна сайта (новая бизнес-модель, морально или технически устаревший сайт, расширение услуг, привлечение другой аудитории)? 2. Каковы главные онлайновые цели вашего бизнеса на модернизированном сайте? Каковы вторичные цели?
(Примерами могут быть увеличение продаж, осведомленность в маркетинге/брендинге, снижение количества обращений посетителей в технические службы.) Пожалуйста, обсудите как долгосрочные, так и краткосрочные цели. 3. Какую основную проблему вы надеетесь решить с помощью редизайна сайта? Как вы собираетесь оценивать успешность решения? 4. Какая существующая в компании стратегия (и онлайновая и вне Сети) отвечает новым бизнес-целям? Аудитория/желаемые действия 1. Опишите типичного пользователя вашего сайта. Как часто он работает в режиме онлайн и для чего вообще использует Сеть? Каков его возраст и чем он зарабатывает себе на жизнь? (Составьте как можно более подробный профиль вашего целевого пользователя. Если необходимо, составьте несколько профилей.) 2. Какова основная цель посещения вашего сайта (сделать покупки, вступить в члены сообщества, найти информацию)? 3. По каким главным причинам целевой пользователь выбирает продукцию и/или услуги вашей компании (цена, сервис, качество)? 4. Как много людей (насколько вам известно) посещает ваш сайт ежедневно, еженедельно и ежемесячно? Как вы оцениваете частоту посещений? Ожидаете ли вы увеличение посещаемости сайта после реконструкции и насколько? Впечатление
1. Используйте несколько прилагательных, чтобы описать, какое впечатление должен производить на пользователя новый сайт, например: престижный, дружественный, корпоративный, забавный, прогрессивный, творческий, передовой. Отличается ли это от впечатления, производимого текущим сайтом?
73
Фаза1: Определение проекта
Этот опрос можно загрузить с www.web-redesign.com
2. Как в настоящее время ваша компания представлена в оффлайне? Хотите ли вы использовать тот же имидж и на сайте? 3. Чем ваша компания отличается от конкурентов? Считаете ли вы, что ваша текущая аудитория выделяет вас среди конкурентов? Перечислите URL конкурентов. 4. Перечислите URL любых сайтов, которые вам нравятся. Что конкретно нравится вам на этих сайтах? Контент 1. Будет ли новый сайт использовать существующий контент текущего сайта? Если да, то каков его источник, кто отвечает за одобрение контента (содержимого сайта) и проверено ли оно? Если нет, будете ли вы формировать контент собственными силами или с помощью внешних поставщиков? 2. Какова базовая структура контента и как она организована? Собираетесь ли вы полностью реорганизовать текущий сайт или только расширить его? 3. Опишите визуальные элементы или части контента вашего текущего сайта, или маркетинговые материалы, которые должны быть использованы (логотип, цветовое решение, навигация, соглашения об именовании и т. д.). 4. Будет ли контент нового сайта (наряду с функциональными возможностями и навигацией) только расширяться или полностью видоизменяться по сравнению с текущим сайтом? Имеете ли вы карту текущего сайта? Есть ли у вас карта или предварительные наброски для будущего сайта?
Технология 1. Какую платформу и какой броузер вы предполагаете использовать (если знаете)? 2. Какие специфические технологии (Flash, DHTML, JavaScript, Real Audio) вы хотели бы использовать в новом
сайте? Что это должно дать пользователям? Опишите, пожалуйста, подробно. 3. Требуются ли сайту возможности базы данных (динамическое генерирование контента, поисковые возможности, персонализация/вход в систему)? Имеется ли уже у вас база данных? Пожалуйста, опишите это подробно, включая конкретную информацию о существующем программном обеспечении. 4. Возникнет ли потребность в защищенных транзакциях (электронная коммерция)? Производятся ли в настоящее время онлайновые транзакции? Пожалуйста, опишите подробно. 5. Возникнут ли другие специфические потребности в программировании (в частности, персонализация или поисковые возможности)? Пожалуйста, опишите подробно. Маркетинг/обновление 1. Каким образом большинство людей узнаёт о существовании вашего текущего сайта? Какие методы распространения вашего URL уже использует компания? 2. Опишите вкратце маркетинговые планы на ближайший период (в частности, на время редизайна сайта и на 12 месяцев после его запуска)? 3. Имеется ли или разрабатывается ли маркетинговая стратегия в отношении модифицируемого сайта? Если да, пожалуйста, опишите подробнее. 4. Собираетесь ли вы обновлять модифицированный сайт? Как часто? Кто отвечает за обновление и поставку контента? Дополнительные замечания/комментарии
Пожалуйста, напишите все, что считаете необходимым добавить.
74
Глава 3
Многим приходилось иметь дело с кошмарным клиентом. Необоснованно требовательным, капризным, непостижимым, нереалистичным, скупым... В своих предстоящих проектах используйте опрос клиента и как интервьюирующий, и как отсеивающий инструмент. Поскольку клиенты должны заполнить и возвратить опросный лист, это делает их более ответственными. Те,
1 Хороший клиент обладает некоторыми из следу-
I ющих качеств: •
Целеустремленный: ориентируется на общую картину 1 • В опросном листе дает четкие и подробные ответы
кто находит время подробно и содержательно ответить на вопросы, вероятно, задумывались о создании сайта. Они предоставят полезную для проекта информацию и будут хорошими клиентами. А от клиентов, обладающих целым рядом плохих качеств (см. ниже), иногда лучше просто отказаться. Если есть выбор, анализируйте и разумно выбирайте проекты и клиентов.
Это необязательно кошмарный клиент, но будьте настороже, если он: •
Выражает требования в манере «вынь да положь» с нереалистичными запросами к срокам выполнения
1 • Не спорит по поводу сроков сдачи, графика работ и бюджета
Не знает, каким должен быть контент, но хочет, чтобы это было «круто» • Просит создать демонстрационный сайт, говорит, что реальный будет создаваться позже • Не имеет права подписи и одобрения или не сводит вас с лицами, принимающими решёния • Не находит времени заполнить опросный лист • Малый бюджет, нереальный крайний срок
[ •
•
Необязательный, не может принять решение, не реагирует своевременно на звонки или электронную почту
• •
Нерешительный, часто меняет мнение С целью «экономии денег» хочет сам прорабртать творческие аспекты
| •
) • 1 •
Предоставляет заявку на предложения (RFP) или ясно обрисовывает цели и масштаб проекта Понимает веб-среду и имеет представление о процессе разработки Имеет право подписи и одобрения
Отвечает на запросы по электронной почте и по телефону | • Понимает работу в команде | • Вовремя предоставляет контент [ • Помогает решать проблемы, а не является их источником
•
сайта и составлении графиков работ, бюджета и наиважнейшего креативного брифа. Можно сказать, что это плацдарм проекта. Анализ опроса клиента внесет ясность в целый ряд моментов, концепций и идей: • Цели сайта. Каковы цели редизайна сайта? Какая главная проблема бизнеса будет при этом решена (например, увеличение трафика или объема продаж)? Какие еще цели будут достигнуты (например, уменьшение количества обращений посетителей в технические службы, повышение удобства сайта для пользователей)?
Фаза 1: Определение проекта
75
Если при редизайне сайта будет полностью меняться представление образа компании, узнайте у клиента текущее состояние дел в отношении брендинга. Ниже приведен ряд типовых вопросов:
Если продвижение сайта входит в число основных задач редизайна, задайте следующие вопросы:
1. Что именно должен отражать логотип компании? Какую эмоциональную реакцию он должен вызывать у заказчиков? 2. Перечислите или приложите образцы эмблем, которые вам нравятся, и объясните почему. 3. Какие цвета и изображения лучше передают индивидуальность и атмосферу вашей компании? 4. Будет ли в эмблему включен слоган? Что он должен отражать?
1. Какие способы распространения своего URL за пределы организации вы используете в настоящее время - в он- и оффлайне ? Способствуют ли они увеличению трафика? 2. Чем вы стимулируете повторные посещения вашего сайта? И как вы можете стимулировать у текущих пользователей желание рассказать о вашем сайте другим? 3. Каковы ваши кратко-, средне- и долгосрочные планы в отношении увеличения трафика и повышения известности вашего сайта?
• Аудитория. Каковы демографический и пользовательский профили? Демографический профиль учитывает род занятий, возраст, пол, быстродействие связи, частоту работы и интересы в Сети (какие сайты посещают пользователи и почему, как часто они совершают онлайновые покупки, насколько хорошо они ориентируются в Сети). Сюда же относятся тип их компьютеров, предпочитаемый ими броузер и место их проживания. В пользовательском профиле к демографическим данным добавляются реальное имя и персональные данные. • Аспекты редизайна. Каковы цели и задачи редизайна? Составьте четкое представление о разнице между текущим и новым сайтами в отношении их юзабилити, атмосферы, производимого впечатления и цели. Это поможет создать креативный бриф, сделать обзор на вступительной встрече и будет служить своеобразной памяткой во время последующих фаз развития сайта. • Атмосфера. Какого настроя и производимого сайтом впечатления желает добиться клиент? Каким должен выглядеть сайт? Изощренным? Спокойным? Забавным? Надежным? Заслуживающим доверия? Недорогим? Все это нужно четко представлять, чтобы написать креативный бриф. • Масштаб. Каковы границы проекта по всем аспектам, включая бюджет, планы, творческие задумки, технические потребности и общий объем (определенные настолько четко, насколько это возможно на данном этапе)? Без знания этого нельзя составить бюджет. • Эксплуатационная поддержка. Как представляет себе клиент будущие обновления сайта? Как часто и в каком объеме они будут производиться? Дополнительные данные на этот счет обеспечит эксплуатационный опрос.
76
Подключайте клиента Активно сотрудничайте с клиентом при формулировании проекта: составлении бюджета, временного графика, графика работ, стиля оформления сайта, технических потребностей, контента, базовой структуры, целевой аудитории и предназначения сайта, - это хороший тактический ход. Когда клиенты подключены к работе, они осознают свою значимость в редизайне, становятся более доступными и больше помогают. Однако будьте бдительны. Помощь клиента важна, но некоторые из них при этом скорее мешают, чем помогают. Тем не менее, когда клиент чувствует себя подключенным к проекту, у разработчиков больше шансов вовремя получить необходимые сведения и материалы. Осведомленность и сотрудничество при работе в команде всегда лучше, чем противостояние.
Глава 3
• Контакты. Кто занимается проектом? Подготовьте контактную информацию и со стороны проектной группы, и стороны клиента. Там должны быть указаны имена, адреса электронной почты, номера телефонов и факсов и почтовые адреса (для поставок и счетов). Своевременно обновляйте этот список и сохраняйте его на защищенной паролем клиентской демонстрационной площадке (обсуждаемой позже в этой главе).
Эксплуатационный опрос Может показаться преждевременным говорить об эксплуатационной поддержке сайта на столь раннем этапе процесса редизайна, и клиент может даже проигнорировать второй детальный опрос (однако надо надеяться, что это не случится, ведь впереди еще и опрос по поводу технических возможностей пользователей). Кто будет сопровождать сайт, как часто клиент планирует производить обновления, какой уровень роста запланирован на первый год после запуска - все эти вопросы следует прояснить как можно раньше по одной простой причине: от этого зависит планирование всего проекта. Эксплуатационная поддержка связана со многими аспектами, включая структуру и организацию сайта, структуру каталогов и файлов, а также зачастую сложную задачу управления контентом. Имейте в виду, что эксплуатационный опрос (доступный для загрузки с www,web-redesign.com) необязательно заполнять и анализировать до начала проекта, но его необходимо рассмотреть на фазе 2: Разработка структуры сайта, которая следует за фазой 1: Определение проекта. Клиент должен ответить на вопросы как можно подробнее, а руководителю проекта следует использовать результаты этого опроса в работе. Принимая их во внимание с самого начала проекта, можно заранее (еще в ходе редизайна сайта) планировать потребности сопровождения.
Ф а з а 1 : Определение проекта
77
Этот опрос разработан с целью помочь вам определиться с задачами эксплуатационной поддержки сайта после его запуска. Кратко, но ясно ответьте на следующие вопросы и отправьте заполненный опросный лист по электронной почте руководителю проектной группы.
ЭКСПЛУАТАЦИОННЫЙ ОПРОС Общая информация 1. Какие разделы перепроектированного сайта будут обновляться (например, новости, фотографии, гороскопы, продукты компании, обзоры) и как часто (например, ежедневно, еженедельно, ежемесячно, ежеквартально, ежегодно)? 2. Опишите состав эксплуатационной группы, индивидуальные обязанности каждого ее сотрудника и их занятость. (Полный рабочий день? Часть времени? Эпизодически?) 3. Каким образом будет обновляться сайт? Вы будете вручную вводить контент в HTML-файлы? Вы будете использовать систему управления контентом для его динамического обновления (полезно, например, для управления каталогами в е-коммерции или текстовыми базами данных)? В случае использования системы управления контентом, пожалуйста, напишите об этом подробнее. 4. Кто отвечает за техническую сторону эксплуатационной поддержки сайта и каков уровень его квалификации? Какой опыт он имеет? Потребуется ли его стажировать? 5. Кто отвечает за изменение графики на сайте? Будет ли он использовать имеющиеся шаблоны при внесении изменений или добавлений? Каков уровень его квалификации в графическом дизайне?
Этот опрос доступен для загрузки с www.web-redesign.com
Формирование контента 1. Кто отвечает за формирование контента для сайта? Будет ли он уделять созданию контента часть времени или все время? 2. Кто утверждает изменения в облике сайта, чтобы гарантировать сохранение при этом его качества? 3. Как часто будут добавляться новые разделы или темы? Будут ли они основаны на общем шаблоне сайта или будут независимыми? Производственная квалификация 1. Какие навыки необходимы для обновления сайта (базовые знания HTML, умение писать сценарии)? 2. Автоматизирован ли процесс смены контента на главной странице сайта (автоматическое обновление изображений или текста при каждом посещении сайта пользователем, генерирование произвольной цитаты или изменение даты)? Реклама 1. Каким образом пользователь будет знать об очередном обновлении сайта? Будет ли обновление сайта автоматически сопровождаться рассылкой анонса по электронной почте или другими вариантами объявлений? 2. Кто отвечает за поисковый механизм и за введение и обновление ключевых слов? Как часто будут пересматриваться ключевые слова и МЕТАтеги?
78
"
Глава 3
Изучение аудитории Сеть существует для пользователей. Какие потребности, возможности, желания и специфические особенности пользователей вам следует знать? Все (или, по крайней мере, как можно больше). Но так как умозрительные размышления здесь не помогут, следует изучить аудиторию. Для начала используйте опрос клиента, из которого можно получить общее представление о том, кто посещает сайт, почему и какие задачи там выполняет. Типичное демографическое описание пользователей включает род занятий, возраст, пол, быстродействие связи, частоту работы и интересы в Сети (какие сайты они посещают и почему, как часто они делают онлайновые покупки, насколько хорошо ориентируются в Сети). В это описание также входит тип их компьютеров, предпочитаемые ими броузеры и места их проживания. Имейте в виду, что может потребоваться создание профилей для нескольких целевых групп (при многочисленной аудитории создайте отдельные профили пользователей). Большинство сайтов посещает несколько четко различающихся категорий пользователей, поэтому необходимо создать несколько общих профилей.
На основе демографических данных создайте общий профиль пользователя, который будет использован в креативном брифе в качестве профиля аудитории. Это должна быть краткая справка о каждом типе пользователей, включающая обычные задачи, выполняемые им на сайте. Вот пример общего профиля пользователя: «Типичный пользователь - это студент университета в возрасте от 18 до 22 лет, работающий в Сети ежедневно. Он очень хорошо ориентируется в Сети и регулярно (2 или 3 раза в месяц) делает онлайновые покупки книг, компакт-дисков, цифровых видеодисков и подарков. Он имеет высокоскоростной доступ в Интернет из общежития и из библиотеки, чаще всего используя библиотечные компьютеры для учебных задач, а компьютер в общежитии - для личной переписки. Его типичными задачами на сайте являются поиск авторов, названий и товаров для совершения покупок. Он зарегистрирован на сайте, имеет имя пользователя и пароль и может делать покупки быстро и легко». Если есть необходимые данные, настоятельно рекомендуется сформировать несколько детальных, индивидуальных профилей (рис. 3.1). Для этого требуется опросить как клиента, так и ряд фактических пользователей, чтобы получить реальное представление о целевой аудитории. Результаты окупят затраченные усилия.
Фаза 1: Определение проекта
79
Пэйдж Мак-Кормик Пэйдж Мак-Кормик - преподаватель искусств в начальной школе, художник и инструктор лиги Little League Track для девочек в Портленде, штат Орегон. Ей 35 лет, она со своей собакой Руги живет на северо-западе Портленда около лесопарка. У Пэйдж свой дом, она проводит много времени, обустраивая его и занимаясь садоводством. Она ведет очень насыщенный и активный образ жизни. Свободное время Пэйдж проводит на открытом воздухе: делает пробежки, катается на велосипеде в горах и играет с Рути. Пэйдж Мак-Кормик (Paige McCormick)
Пэйдж очень любит свою собаку и балует ее. Она перестала покупать мягкие игрушки: они очень симпатичные, но Рути сразу потрошит их и ест наполнитель. Пэйдж самостоятельно изучает поведение собак и методы их дрессировки. Ей нравится жить рядом с лесопарком, так как это дает прекрасную возможность для Руги побегать за белками.
У Пэйдж есть модем 56 К, но она собирается скоро перейти на DSL У нее компьютер Mac G3, и она считает себя большим знатоком компьютеров. Она делает много покупок в Сети и находит, что это экономит время, хотя иногда доставка бывает не на высоте. Пэйдж очень ценит ежемесячную автоматическую поставку продуктов питания для собаки. Она любит маленькие магазинчики для животных, которые вызывают у нее приятные эстетические чувства, и ненавидит огромные зоомагазины типа PetClub, похожие на склады, хотя она признает, что у них приемлемые цены.
Рис. 3.1. Этот образец профиля дает подробное описание типичного пользователя. Такой документ, называемый также «образом персоны», может быть настолько детален, насколько позволяют ваши сведения, творческий потенциал и время
Определение технических требований Какие технологические новинки потребуются для редизайна? Это, бесспорно, один из наиболее существенных моментов в фазе 1: Определение проекта. Только внешний редизайн сайта, даже если он имеет обширный масштаб, очень отличается от проекта, который предусматривает еще и динамический контент, а также усиление безопасности. Клиенты очень часто хотят иметь все — нужное и ненужное, совсем не представляя связанные с этим затраты. Анализ необходимых технологий (внутренних и для внешнего интерфейса) позволит выявить аспекты, в которых ожидания клиента не отвечают реальности (рис. 3.2). Поскольку желания клиента могут быть неосуществимыми (и довольно часто), руководитель проекта должен удостовериться, что клиент понимает не только основные принципы редизайна веб-сайта, но также и то, как каждое выбранное решение отразится на масштабе, а значит, и на бюджете проекта. Пожалуйста, помните, что эта книга не является пошаговой инструкцией для внутренних программных разработок. Если сайту необходима внутренняя база данных, возможности е-коммерции, динамический контент и так далее, тогда требуется дополнительный, параллельный проект. Информация о том, что не рассматривается в этой книге, дана во введении.
80
Глава 3
Кейт Гомолл (Kate Gomoll) о профилировании пользователей
Дизайнеры и разработчики во время проектирования должны иметь в виду реальных людей. Телевидение оказалось таким успешным именно потому, что реальные люди постоянно удивляются неожиданным вещам, которые могут делать и высказывать другие реальные люди. Охарактеризуйте свою аудиторию; если можно, напишите очерк о реальном пользователе - с его фотографиями, его хобби, причудами, предпочтениями в товарах, любимыми питомцами и описанием образа жизни. Проектировщики прочтут это и, что более важно, учтут в работе над проектом. Обычно компании опрашивают фокусные группы или исследуют состояние рынка, чтобы узнать о потенциальных потребителях своих товаров. Результатом таких исследований являются краткие резюме, которые описывают цели, потребности и желания пользователей, выраженные в процентах и тенденциях. Хотя эта информация полезна для общего планирования производства и маркетинга, она недостаточно специфична для дизайнеров производства и веб-разработчиков. Резюме, которые составляет большинство отделов исследований рынка, создают абстрактное представление о людях. Они фокусируются на обсуждении тенденций и секторов рынка, но не содержат никаких подробностей об отдельных потре-
бителях. Однако для работы дизайнеров и веб-разработчиков требуются как раз эти подробности. Конкретные детали о мотивации пользователей, их неудовлетворенности, их желаниях помогут группе разработчиков принимать важные и стратегические решения. Всегда бывают разногласия по поводу того, как должен выглядеть и работать новый или модернизируемый продукт. Но когда имеется профиль реальных посетителей, аргументы изменятся от «я бы этого никогда не делал» или «моей маме это не понравится» до аргументов, учитывающих интересы конкретных пользователей, например Пэйдж (рис. 3.1). Члены проектной группы будут задумываться, потребуется ли Пэйдж текущая функциональность или будет ли Пэйдж уходить с сайта по рекламному баннеру. При наличии альтернативных решений дизайнеры воспользуются данными пользовательских профилей, чтобы сделать разумный выбор. Я не говорю, что не следует проводить традиционные исследования, опрашивая фокусные группы и делая обзоры. Но часто не хватает времени даже на минимальное исследование. Однако если уделить время и выяснить, какие категории пользователей относятся к целевой группе, а затем опросить по крайней мере по одному человеку из каждой категории, можно получить очень полезные пользовательские профили. Иногда проектные
Фаза 1: Определение проекта
группы проводят базовое профилирование - даже когда оно не предусмотрено в бюджете - просто потому, что разработчикам необходимы эти данные! Они не могут хорошо выполнить свою работу, не зная конкретные сведения о потенциальных пользователях. Какие сведения следует включить в пользовательские профили? • Основные демографические данные • Очерки о типичном дне жизни • Фотографии людей, их окружени е, их инструменты • Предпочтения и сведения о том, что им не нравится • Наблюдения • Модели способов использования изделий • Неудовлетворенность вашим или подобными изделиями • Пожелания в отношении изделия Поскольку эти профили полезны, только если их станут читать, уделите время, чтобы написать привлекательный комментарий; сделайте каждого человека, которого вы профилируете, запоминающимся. Используйте сведения, собранные у пользователей, чтобы описать каждого человека как личность. Если позволяет время и бюджет, создайте профили для многих потенциальных пользователей. Потом переработайте их, сформировав лишь несколько собирательных образов, олицетворяющих собой разные
81
категории пользователей. Эти конфигурации, также называемые «образами персон», станут краткими описаниями категорий потребителей, использующих ваш продукт. Секрет успешного профилирования пользователей заключается в использовании сведений о реальных людях, а не гипотетических, надуманных историй. Вы увидите, что действительность более удивительна и принесет больше открытий, чем любая фантазия. Кейт Гомолл - президент Gomoll Research & Design, Inc. (www.gomolldesign.com), консультативной компании, специализирующейся на дизайне пользовательской среды. Последними клиентами компании были DirecTV, Charles Schwab, WebTV, Hewlett-Packard, Internet Appliance Network и Compaq. Обзоры Кейт о пользовательской среде вошли в книги «The Art of Human Computer Interface Design», Addison-Wesley, 1990 и «The Macintosh Human Interface Guidelines», Addison-Wesley, 1992. Признанный в стране эксперт в области разработки и юзабилити интерфейса программного обеспечения, Кейт преподает методы изучения пользователей на международных конференциях и семинарах. Кроме того, в течение многих лет она преподает дизайн с учетом интересов пользователя на семинарах UCLA Extension. До открытия своей консультативной компании Кейт работала разработчиком интерфейсов в Advanced Technology Group фирмы Apple Computer.
82
Глава 3
Рис. 3.2. Клиенты часто слабо представляют фактическую стоимость различных технологий. Узнав об истинных затратах и сроках, они обычно корректируют свои технические пожелания
Понимание возможностей аудитории Это сводится к вопросу: кого клиент готов оставить без внимания? Некоторые сайты стремятся быть доступными для любых пользователей. Если ваша целевая аудитория - «все, у кого есть компьютер, и еще некоторые», то следует делать расчет на пользователей со старыми технологиями и с низкими требованиями к быстродействию. Многие веб-пользователи имеют мониторы с маленьким экраном, используют для просмотра старые броузеры и все еще работают с медленными модемами. Эти пользователи не менее ценны для клиента, чем пользователи с каналом Т1 и новейшими броузерами. Высокие требования разочаровали бы обладателей медленных модемов и, вероятно, заставили бы их прерывать загрузку страницы. Результат - потеря потенциального заказчика. Высокая или низкая пропускная способность? Большинство клиентов обычно знает, в какой категории пользователей они заинтересованы. Задача проектной группы - выяснить технические возможности этой аудитории, а затем, соответственно, уточнить масштаб проекта. Ориентируясь на пользователей с хорошей связью, клиент стремится показать самые новейшие технологии, не заботясь о тех, кому они недоступны. Такой клиент рассчитывает на аудиторию, которая поддерживает все прогрессивные технологии (полноценный Flash, новейшие броузеры и так далее). Это обычно эксперимен-
Фаза1: Определение проекта
тальные и передовые (с точки зрения дизайна) сайты, подобные сайту Altoids Too Hot (рис. 3.3). Сайты, которые должны быть доступны для всех (включая многообещающий рынок беспроводных технологий) и везде (даже там, где DSL недоступен), должны ориентироваться на низкоскоростную аудиторию. Это подавляющее большинство пользователей - так называемый массовый рынок. Такие сайты загружаются быстро даже через модемы (правда, больше уже не учитываются модемы со скоростью 14.4 и почти не учитываются 28.8 нужно поднимать планку). Этим сайтам не требуются никакие специальные технологии или плагины, и они нормально работают и с небольшими экранами мониторов, и со старыми броузерами. Примером может служить веб-сайт www.amazon.com (рис. 3.4). Большинство компаний стремится привлекать целевую аудиторию с широким кругом интересов ту, которая включает пользователей и с модемами, и с более быстродействующими каналами связи. Эти компании не хотят терять технически слабо оснащенных пользователей, но они хотят иметь и несколько более прогрессивные технологии, чтобы привлечь пользователей, которые способны оценить и ценят красивые сайты. Сайт трилогии кинофильма «Властелин Колец» (рис. 3.5) отвечает этим требованиям: при загрузке Flash-сайта также предлагается и его HTML-версия. Некоторые сайты (например, www.macromedia.com) даже не отдают выбор на откуп пользователям, а включают анализатор броузера, который автоматически направляет пользователей на сайт, соответствующий их оснащенности.
Анализ возможностей аудитории Поняв, что из себя представляет аудитория сайта, начните определять, каковы ее технические возможности. Решите, на какую часть аудитории следует ориентироваться и какую можно не принимать в расчет. Сколько процентов ваших пользо-
83
Пропускная способность? В этой книге подразумевается довольно узкое значение термина «пропускная способность» (bandwidth), а именно: скорость связи, то есть время загрузки страниц, версия броузера, плагины и тому подобное. Поэтому, когда говорится о «пользователе с высокой пропускной способностью» (high-bandwidth user), речь идет о пользователях с самыми последними версиями броузеров, которые могут поддерживать высокоскоростную загрузку (то есть о пользователях с каналом Т1 или DSL на сравнительно новых машинах). Один и тот же сайт, который быстро загружается у «пользователей с высокой пропускной способностью», будет загружаться медленно у пользователей с модемами и на машинах более чем двухлетней давности. Высокая пропускная способность канала необязательно означает то, что пользователь - профессионал в использовании Сети. Многие оснащенные новейшими технологиями и программами машины приобретаются людьми с очень небольшим онлайновым опытом. Помните также, что многие новички попадают в Сеть через высокоскоростные сети компаний.
84
Глава 3
Puc. 3.3. Высокая скорость связи: www.toohot.com загружается мгновенно при DSLподключении, но его загрузка пользователями модемов занимает минуту. Там сплошная анимация
Рис. 3,4, Низкая скорость связи: www.amazon.com загружается мгновенно даже модемами и не содержит никаких особых функциональных возможностей. Он доступен даже пользователям с броузером версии 3,0
Фаза 1: Определение проекта
85 Рис. 3.5. Чтобы удовлетворить требования пользователей с различной скоростью доступа, обычно создаются две версии сайта. На главной странице www.lordoftherings.net пользователям с низкоскоростным доступом предоставляется выбор между долгой загрузкой Flash-сайта или быстрым доступом к HTML-сайту. Для тех, кому Flash недоступен, на странице есть ссылка: *VISIT THE NON-FLASH SITE* (*Посетите сайт без использования Flash*)
вателей все еще связываются через модем? Сколько процентов имеют 17-дюймовые мониторы и можно ли пожертвовать владельцами 15-дюймовых мониторов? Какой процент вашей аудитории загрузил самую последнюю версию Flash? С броузером какого уровня работает большинство пользователей? Какой максимальный объем загрузки страниц будет для них еще удобен? (Заботит ли это клиента? Возможно, и нет, если целью сайта является только присутствие в Сети.) Выяснение этих сведений — непростая задача. Обычно используют общепринятые предположения типа: «Наша основная аудитория - специалисты из СанФранциско. Вероятно, все они имеют как минимум канал Т1». Догадки такого рода хороши, только если демографический состав пользователей так конкретен. К счастью, в случае редизайна существующего сайта можно воспользоваться статистикой из журналов сервера. Как насчет данных в Сети? Немногие из них являются достоверными или достаточно свежими. Есть два ресурса - www.hitbox.com и www.statmarket.com, - которые помогают сопоставлять демографические и статистические данные, но оба сайта предоставляют только платные услуги. На данном этапе цель состоит в выяснении технических возможностей целевой аудитории, включая объем загрузки, скорость модема и совместимость броузера, что позволит установить пределы, в которые должны укладываться все разработки. Эти пределы должны соответствовать пожеланиям клиента, которые, возможно, тоже нуждаются в корректировке. Клиент предлагает потоковые
86
Раньше привлекайте вашего технического специалиста Независимо от сложности проекта - будет ли это сайт с простым внешним интерфейсом или технический монстр - уже на данном этапе следует привлечь к работе технических экспертов. Своевременное подключение технического персонала, особенно при определении проекта, поможет решать проблемы по ходу дела и даже избежать их.
Глава 3
видеоролики в формате QuickTime для пользователей с модемами? Это неприемлемо. Имейте в виду, что представитель клиента, с которым вы контактируете, может не разбираться в таких вопросах. Опрос технических специалистов клиента, если таковые имеются, вероятно, даст лучшие результаты. В зависимости от вашей квалификации вы можете доверить эти переговоры главным специалистам обеих сторон.
Определение технических потребностей Используйте расширенный технический опросный лист (Expanded Tech Check), доступный для загрузки на www.web-redesign.com, чтобы определить потребность во внутреннем программировании. После заполнения этой простой анкеты будет понятно, следует ли отдельно привлекать особые технологии для внутренних разработок. В любом случае - при редизайне только внешнего интерфейса или одновременно и внешнего и внутреннего - для проектной группы полезно иметь заполненный расширенный технический опросный лист.
Техническая спецификация (Tech Spec) Создание письменного документа, детально объясняющего функционирование задуманного сайта, необходимо для очень крупных веб-сайтов (для небольших сайтов можно подготовить менее подробную версию). Этот документ, называемый технической спецификацией, требует ознакомления с ним и подписи всех ответственных лиц проектной группы и ответственных представителей клиента. Данный шаг гарантирует применение единой терминологии и обеспечивает одинаковое понимание планов развития сайта. Техническая спецификация должна отразить все технологии, запланированные для любых функциональных возможностей - базы данных или других сложных транзакций. Это означает, что если сайт имеет существующую развитую внутреннюю структуру или внутренние разработки уже запланированы и будут встроены во внешний интерфейс перепроектируемого сайта, то обязательно следует подготовить техническую спецификацию.
Но поскольку наша методология, Базовый процесс, сосредотачивается только на тех моментах, которые применимы ко всем проектам редизайна веб-сайтов (а всем сайтам нужен внешний интерфейс и только некоторые требуют внутренних разработок), обсуждение расширенных технических аспектов сведено здесь к минимуму. О них здесь просто упоминается, так как данный этап - один из моментов взаимодействия между внутренними технологиями и внешним интерфейсом. Техническая спецификация - это документ, к которому обе команды обращаются в ходе работы над проектом. Поскольку спецификация представляет собой техническую схему сайта, она должна включать буквально все - каждую мельчайшую деталь взаимодействия с пользователем, которая требует чего-то более сложного, чем гиперссылка, - и кто бы ни читал ее, он должен получить полное представление о запланированном сайте.
Фаза 1: Определение проекта
Опросный лист доступен для загрузки на www.web-redesign.com.
87
88
Глава 3
Лесли Финней (Leslie Phinney) о брендинге и этапе выяснения
Бренд1 по-прежнему продолжает оставаться очень модным словом. От Nike до Intel все, кажется, только и говорят о важности брендинга. Далекую от простой случайности силу брендинга признали дизайнеры и годами помогают формировать его. В самых общих чертах брендинг - это наука и искусство определения и позиционирования именно того, что отличает изделие или услугу данной компании. Бренд отражает в легко узнаваемой и интересной форме главные особенности изделия или услуги - его имидж, сферу применения и цену. Короче говоря, все то, что необходимо конечному пользователю. Брендинг в Сети подчиняется тем же самым основным правилам с добавлением к ним понимания конкретных потребностей сайта и обращения к намного более широкой аудитории. Идеи из Сети воспринимаются даже быстрее, чем из рекламных роликов, но знание всех сильных сторон бренда, усиленное эффектами дизайна, остается одинаково важным независимо от информационной среды.
Для компании, решившей изменить свое присутствие в Сети, наиболее важная задача относительно брендинга не поколебать значимость существующего бренда, если он уже имеет яркую индивидуальность, или предпринять необходимые шаги для разработки бренда, фокусируясь на его приложении к Сети. Важно принимать во внимание целевую аудиторию: используемые ею технологии, ее отношение к Интернету и ее онлайновые привычки. Исследование этих критериев может быть более легкой задачей для уже признанного бренда, но даже в этом случае ни одна компания - как с новым, так и с уже признанным брендом — не может позволить себе проделать реконструкцию без некоторой предварительной подготовки. Маркетинговые проблемы и стратегии не так уж отличаются от того, какими они были 10 лет назад. Разве что потребители имеют теперь больший выбор, поэтому промежуток времени, за который товар или услуга должны произвести эффект, становится короче. В силу этого основной зада-
Бренд (от англ. brand) - торговая марка товара, фирмы. - Примеч. науч. ред.
Фаза 1: Определение проекта
чей действительно является тщательное продумывание индивидуальности бренда, его достоинств и отличительных особенностей, а затем уже можно позволить великолепной команде дизайнеров воплотить этот образ. Будь это дизайнерская фирма, агентство или консультант по связям с общественностью, следует привлечь какого-либо творческого партнера, который может объективно оценить создаваемый бренд и увидеть, чего он стоит сейчас и каков его дальнейший потенциал. Остерегайтесь партнеров, которые готовы произвести множество шикарных вариантов после единственного телефонного разговора с вашим маркетинговым отделом. Необходимо найти способ представления информации о вашем изделии или услуге и вопло-
89
тить это в достоверный, новаторский бренд. Лесли Финней из дизайнерской фирмы Phinneyi'Bischoff Design House в Сиэтле (www.pbdh.com) на протяжении 20 лет имела дело как с северо-западными, так и с международными клиентами при совместной разработке их маркетинговой стратегии, включая и разработку брендов компаний. Около семи лет назад, когда Интернет стал реальностью, PBDH была одной из первых фирм Сиэтла, занявшейся онлайновым дизайном. Фирма постоянно совершенствовала свои возможности в этом направлении, и теперь она разрабатывает и создает для клиентов более дюжины динамических сайтов в год.
90
Глава 3
Анализ отрасли Некоторые проекты имеют прекрасную возможность использовать собственные маркетинговые группы или уже имеют контракт на разработку на стороне. Эти исследователи проводят исчерпывающий анализ рынка и аудитории и глубокое исследование конкуренции. Такой анализ очень хорош, но это редкость для большинства проектов, в которых бюджет является определяющим критерием. Однако независимо от уровня бюджета уделите время изучению конкуренКОНТРОЛЬНЫЙ СПИСОК ЗАДАЧ ЭТАПА ВЫЯСНЕНИЯ Для уверенности в том, что собрана вся необходимая информация и можно переходить к следующему этапу, воспользуйтесь этим списком и убедитесь, что рассмотрены все аспекты компании, ее сферы деятельности и аудитории. 1 .Компания/клиент • Раздать опрос всем ключевым лицам, принимающим решение, и согласовать основные ожидаемые результаты, понимание целевой аудитории, желательный стиль и так далее. • Собрать имеющуюся в компании информацию: маркетинговые материалы, исследования, другие печатные материалы и отчеты. • Продолжить опросы по электронной почте или по телефону и определить причины редизайна сайта (текущие проблемы, возможные решения и конкретные цели редизайна). 2. Отрасль • Изучить отрасль клиента - в он- и оффлайновом аспекте. Использовать обычные методы сбора информации (библиотеки, поиск в Интернете, телефонные книги), а также платные исследования (Jupiter Research, Gartner и так далее), если позволяет бюджет. • Изучить публикации по данной отрасли: материалы телеконференций, организации, почтовые рассылки, Белые страницы и так далее. З.Стратегия/Маркетин г/Бренди нг • Собрать информацию о текущих и планируемых маркетинговых и рекламных ходах (реклама в Сети и вне Сети: размещение, стратегия). • Понять маркетинговую стратегию и реальные цели - краткосрочные и долгосрочные. (Ближай-
шей целью может быть привлечение новых заказчиков, а долгосрочной целью - создание единого бренда, признанного во всем мире.) • Понять стратегию брендинга, впечатление, идею/ атмосферу и подход (текущие и желательные). 4.Текущий сайт D Произвести юзабилити-тестирование и проанализировать текущий сайт. Определить, что в нем удачно, а что не работает (навигация, контент, функциональность). • Собрать имеющиеся количественные данные. Использовать регистрационные журналы сервера и маркетинговые материалы о том, каковы текущие преимущественные типы покупок и границы трафика. • Собрать качественные данные. Использовать отзывы посетителей и данные технических служб: что нравится и не нравится посетителям в текущем сайте? Какие разделы являются успешными и почему? • Собрать технические/функциональные спецификации. Получить общее представление о функционировании текущего сайта и задействованных технологиях. • Провести ревизию контента. Что уместно и не уместно на сайте? Насколько эффективно текущий контент отвечает всем целям сайта? 5. Конкуренция • Определить основных и вторичных конкурентов онлайновых и вне Сети (из исследований клиента и проектной группы). • Провести формальный или неформальный анализ конкурентоспособности (см. главу 9).
Фаза 1: Определение проекта
91
тов и сферы деятельности компании. Рассмотрите возможности текущего сайта и оцените особенности конкурирующих сайтов. Что в них удачно? Что нет? Все это окажет существенную помощь в изучении вашей аудитории. Такая информация позволит лучше подготовиться к редизайну успешного веб-сайта. Можно ограничиться лишь поверхностным анализом, но настоятельно рекомендуется на фазе 1 провести анализ конкурентоспособности. Детальное обсуждение методологии этого процесса см. в главе 9.
Резюме этапа выяснения • Выяснить основные отличительные особенности каждого конкурирующего сайта и/или ком- | пании. 6. Аудитория • Определить первичную целевую аудиторию (из I исследований компании и из опроса клиента). • Собрать демографическую информацию о це- | левой аудитории (род занятий, пол, доход, он- I и оффлайновые привычки, скорость связи, ис- I пользуемые броузер и платформа). • Создать профиль пользователя и пользовательских задач (отражающие образ жизни, рабочее и домашнее окружение, уровень доходов, 1 род занятий, использование Интернета и типич- 1 ные задачи, выполняемые на сайте клиента). D Создать пользовательские сценарии (конкретные ситуации для целевого пользователя при совершении онлайновой сделки или выполнении других операций). 7. Товары/услуги I • Ознакомиться с товарами или услугами, предлагаемыми компанией. • Понять особенности покупок: факторы, способствующие тому, что посетитель становится реальным покупателем или зарегистрированным клиентом. П Определить эффективность обслуживания за- I казчиков. Удовлетворительное оно или нет? 8. Другое • Изучить любые дополнительные аспекты, соответствующие вашему клиенту или его отрасли, - I все, что способствует лучшему пониманию I предстоящих задач.
Выяснение - этап сбора информации, направленный на углубленное изучение аспектов, которые важны для клиента, сферы его деятельности и целевой аудитории. Область и уровень исследований меняется от проекта к проекту, но результат всегда один: ценные данные. Чем больше информации собрано, проанализировано и осмыслено, тем более подготовленными вы будете к тому, чтобы достичь намеченных целей и уложиться в запланированный бюджет. Имейте в виду, что некоторые задачи этапа выяснения (такие как профилирование пользователей и анализ конкурентоспособности), особенно те, которые требуют дополнительного финансирования, могут не быть закончены ко времени перехода к другим аспектам определения проекта. В действительности они могут быть не выполнены даже ко времени вступительной встречи и перехода к практической работе. Для уверенности, что на этапе выяснения охвачены все необходимые ключевые моменты, воспользуйтесь контрольным списком задач этого этапа.
92
Глава 3
УТОЧНЕНИЕ > >
Определение окончательных целей Подготовка креативного брифа
Определение окончательных целей «Что является целью этого редизайна?» «Почему нужно модернизировать сайт?» «Какие возможности появятся у нового сайта, которых нет у существующего? » На все эти вопросы вам нужно дать ответ. Однако не слишком увлекайтесь. Еще не время искать ответ на вопрос: «Как мы собираемся перепроектировать сайт?» Это вы будете продумывать при формировании плана проекта. Пока же требуется осмыслить конкретные цели. Проанализируйте опрос клиента. Какие цели перечислил клиент? Конкретны ли они? Не упоминались ли дополнительные цели при последующих контактах с клиентом? Добавьте их и создайте полный список целей. Ниже приводятся некоторые возможные цели клиентов: • Увеличить трафик • Увеличить объем продаж • Продвинуть на рынок новый продукт • Сделать сайт динамическим, с управляемым контентом • Сократить количество звонков заказчиков в технические службы • Создать интуитивную навигацию • Упростить просмотр и покупку товаров • Создать масштабируемую структуру для будущего роста Однако что это за цели, если не будет способа оценить, достигнуты ли они? Как клиент определит, отвечает ли сайт после запуска заявленным целям? Возьмите список целей и рассортируйте их по приоритетам на первичные, вторичные и третичные. Продумайте способы, с помощью которых можно оценить, были ли эти цели достигнуты после запуска (например, статистический рост совершенных покупок). Чтобы определить успешность
Фаза1: Определение проекта
сайта, предложите клиенту установить измеримые цели (количественные и качественные) и контрольные этапы их оценки. Следует обеспечить возможность сравнения статистики прежнего и нового сайта. Наметьте измеримые цели и вернитесь к ним в фазе 5: Запуск и сопровождение, при передаче материалов по техническому обслуживанию.
Подготовка креативного брифа Эффективный способ удостовериться в правильном понимании поставленной перед вами задачи - ясно и кратко повторить ее клиенту. Это послужит не только основой для осмысления общего стиля, цели и направленности проекта. В дополнение к этому креативный бриф отразит пожелания клиента, взятые из его ответов. Перечислите в креативном брифе все цели сайта. Это поможет проектной группе установить с клиентом общий язык. Когда все говорят на одном языке и стремятся к выполнению одних и тех же целей, проект имеет прекрасные шансы на успех. Уделите подготовке креативного брифа достаточно времени (рис. 3.6 — типовой образец), так как к нему предстоит обращаться на протяжении всего проекта, но и не растягивайте эту работу на недели. Это краткое и простое изложение целей сайта: от общих целей для целевой аудитории до понимания пользователей вообще. В креативном брифе наряду с другими аспектами должны быть охарактеризованы стиль, аудитория и общая идея. Кроме того, должна быть определена атмосфера проекта (как люди должны воспринимать сайт и компанию). Креативный бриф должен отразить визуальные и концептуальные задачи нового сайта и быть независимым от существующего сайта. Этот документ не должен иметь рисунков (он не требует никаких эскизов или макетов) и должен быть изложен сжато (всего од на-две страницы), чтобы оставаться действительно читаемым. Он может быть неофициальным, как электронная почта, или достаточно формальным, чтобы можно было включить его в отчет. Однако независимо от формы или формата он должен быть одобрен клиентом и подписан им. Выберите необходимую информацию из ответов на опрос и из других обсуждений с клиентом. Используйте рабочий лист креативного брифа, который поможет сформировать его основу. Может потребоваться и дополнительный опрос.
Возможно, маркетинговый отдел клиента уже разработал креативный бриф. Выясните это, но учтите, что клиентский креативный бриф не отменяет необходимость его создания проектной группой.
94
Рис. 3.6. Образец креативного брифа
Глава 3
Фаза1: Определение проекта
95
РАБОЧИЙ ЛИСТ КРЕАТИВНОГО БРИФА Ответы на вопросы этого рабочего листа помогут эффективно сформировать креативный бриф. Часть ответов можно найти в информации, собранной на этапе выяснения (опрос клиента, исследования, обсуждения). Резюме проекта: Представляет общие сведения о проекте: цели и относящиеся к делу предпосылки по редизайну сайта. Это должна быть расширенная формулировка проекта в целом. 1. В чем заключается проект? Кратко приведите относящиеся к делу предпосылки. 2. Какова главная цель нового сайта? 3. Каковы вторичные цели? 4. Каковы долгосрочные цели? Профиль аудитории: Профиль целевой аудитории. Приведите достаточно подробные сведения, дающие хорошее представление об аудитории. Включите некоторые демографические данные. Задача этого раздела - показать, кому адресован сайт. Что интересует этих людей? Что они делают в Сети ежедневно? 1. Кто составляет целевую аудиторию? Выберите типичного пользователя и подробно опишите его. Включите род занятий, возрастной диапазон, пол, частоту пребывания в Сети, интересы в Сети и любую другую относящуюся к делу информацию. Если необходимо, создайте несколько профилей. 2. Какие типичные задачи будет выполнять пользователь на новом сайте? (Например: регистрация, вход, поиск информации, покупка конкретных товаров, подписка, запросы на получение дополнительной информации.) Восприятие/Стиль/Основные принципы: Как должна реагировать целевая аудитория на ваше новое интерактивное представительство? 1. Какое впечатление на целевую аудиторию производит компания и текущий веб-сайт?
2. Какого впечатления мы хотим добиться? 3. Как поможет в этом новый веб-сайт, достигнет ли он этой цели? 4. Какими прилагательными можно описать впечатление, которое должны производить на целевую аудиторию веб-сайт и компания? 5. Какое зрительное впечатление должен производить сайт? Стратегия подачи информации: Как мы будем убеждать целевую аудиторию? 1. Какую основную идею требуется донести до целевой аудитории? (Например, рентабельный, безопасный, надежный, эффективный.) 2. Каким образом будет внушаться эта идея? (Например, эффективным подбором материалов направленного содержания или специальным предложением на начальной странице.) 3. Охарактеризуйте стадии развития (если они есть), ведущие к достижению целей. 4. Как будет оцениваться успешность перепроектированного сайта? Конкурентоспособность и позиционирование: Чем компания отличается от конкурентов и какие факторы сделают ее более успешной? 1. Чем компания или облик ее сайта отличается от конкурентов? 2. Что особенно выделяет компанию среди конкурентов? 3. Какие элементы текущего сайта являются успешными и почему? Основная идея: Придумайте слово или короткую фразу, которая адекватно опишет перепроектированный сайт.
Этот рабочий лист доступен для загрузки на www.web-redesign.com.
96
Глава 3
ПЛАНИРОВАНИЕ > > > >
Создание плана проекта Составление бюджета Составление графиков работ Формирование проектной группы > Организация демонстрационной площадки > Планирование юзер-тестинга
Создание плана проекта Собрав на этапе выяснения все данные и определив цели сайта, можно уверенно приступать к созданию плана проекта. Планировать следует ряд различных аспектов проекта, но при переходе к данному этапу у вас уже собрано несколько готовых документов, которые помогут определить проект и составить графики работ по проектированию сайта. Сформируйте с помощью накопленных материалов общий план проекта. Крупные компании вкладывают в эти документы гораздо больше усилий и ресурсов (документы могут вырасти в 100 или более страниц), но мы живем в реальном мире. Здесь представлены лишь ключевые моменты, составляющие Базовый процесс, — минимальные аспекты планирования и организации, необходимые для успеха проекта. Называемый иногда «охватным документом» или «программой проекта», общий план проекта должен содержать, по крайней мере, следующие компоненты (каждый из которых подробно описан далее в этой главе в приведенном здесь порядке): • Обзор проекта • График работ (включая готовые компоненты и методологию)
Предложение или план проекта? Здесь не предлагаются советы по маркетингу, продажам или развитию производства. Базовый процесс предполагает, что эти планы уже имеются. Аспекты предложений лишь едва затронуты в книге без всяких подробностей (об этом, возможно, в следующей книге). С этой оговоркой продолжим... В чем разница между предложением и планом проекта? И в том и в другом случае должен быть сформулирован проект, перечислены все его цели и
1_
представлен план действий. Оба должны содержать четко определенный бюджет и план работ со сроками сдачи этапных компонентов. Но в отношении Базового процесса основное отличие в следующем. Предложение - это предварительный обзор или отправная точка, и оно подается до подписания контракта. План проекта гораздо глубже вдается в стратегию и детали выполнения работ. Он подготавливается после подписания контракта.
Фаза 1: Определение проекта
97
• Распределение бюджета • Креативный бриф • Сведения о целевой аудитории • Профили пользователей • Технические возможности аудитории • План юзер-тестинга • Детали и уточнения • Место для подписей (ОЧЕНЬ ВАЖНО) План проекта защищает как проектную группу, так и клиента. Он разъясняет все аспекты и формирует стартовый плацдарм для начала работ. Одобрением плана проекта клиент подтверждает свое понимание того, какие действия будут предприняты проектной группой от его имени. План проекта - готовый компонент. Он представляется клиенту наряду с юридическим контрактом и первоначальным счетом. После официального утверждения проекта любые добавления к этому документу приведут к дополнительному финансированию, поэтому тщательно перечислите все необходимые детали. С момента подписи клиентом плана проекта или предложения (что бы вы ни представляли) можно начинать отсчет времени. Удостоверьтесь, что клиент одобрил и подписал план проекта. Ничто не накладывает такую ответственность, как подпись на документе.
Детали и уточнения В конце плана проекта, ближе к месту для подписей (где клиент точно обратит внимание), включите перечень деталей и уточнений (рис. 3.7). Список деталей и уточнений должен быть кратким и должен оговаривать конкретные аспекты, которые часто могут трактоваться по-разному (другими словами, уточните те моменты, которые клиент может неправильно понимать или произвольно изменять, например планы работ). Основная цель списка деталей и уточнений оградить проектную группу, прежде всего, от споров с клиентом по поводу масштаба проекта в виде простого и читаемого списка пунктов. К перечню деталей и уточнений можно добавить такие пункты: • Данный сайт будет содержать от 20 до 25 страниц. • Этот проект рассчитан на срок выполнения 11 недель.
4 Зак. 667
98
Глава 3
• Все затраты на фотографии/иллюстрации возлагаются на клиента и не включены в бюджет. Получение любого/всех прав на использование готовых работ ответственность клиента. В этом случае, если в разгаре работ по проекту клиент захочет добавить 15 страниц, но не заплатит за это дополнительно, он не сможет доказать, что сразу предусматривалось создание 40 страниц. Или если из-за необязательности клиента поставка контента задержится на три недели, что затянет работы или приведет к необходимости сверхурочных работ, проектная группа будет иметь основание для увеличения бюджета. Чем более детально будут оговорены различные аспекты, тем более защищенной будет проектная группа (это особенно важно для внешних групп веб-разработчиков).
Детали и уточнения • Данный проект включает разработку концепции, дизайн и макет, производство и программирование для <клиент/проект> веб-сайта. • Структура и иерархия сайта будут основаны на предоставленной клиентом информации, соответственно переработанной <фирма-веб-разработчик> при создании архитектуры сайта. • Клиент обеспечивает все текстовое содержание (контент) в электронном формате на диске, а также в виде выверенных печатных копий. Видео- и аудиоматериалы предоставляются в цифровом формате, готовом для использования в онлайне. Производство и графики работ зависят от поставки всего контента в точно установленные сроки, указанные в письменной форме в документах проекта. Задержка с поставкой контента прямо отразится на бюджете и сроках исполнения. •
•
•
Производство сайта включает создание и оптимизацию всех файлов/изображений и HTML-кода объемом до < > страниц. Данный сайт содержит сценарии, которые включают только динамическое изменение графики на JavaScript. Сайт создается для работы на сервере UNIX или NT и будет доступен для PC и Мае с броузерами Netscape 3.0+ и I.E. 3.0+. Данный проект распланирован и оценен в расчете на 10-недельный срок работ начиная с <дата>. Поскольку проектная группа располагает временем только в предопределенных границах, проект не будет выполняться после <дата>. Факторы, влияющие на объем и график работ (например, задержки в поставке контента, добавление дополнительных возможностей), могут соответственно потребовать увеличение бюджета. Представленный бюджет основан на существующей информации. После согласования всех требований к сайту могут понадобиться дополнительные затраты на разработку приложений и другие потребности в программировании.
Рис. 3.7. Используйте этот типовой список деталей и уточнений как образец. Измените его в соответствии с потребностями конкретного проекта. Старайтесь представить все как можно нагляднее. Учтите, что хотя список деталей и уточнений может быть включен в контракт (и стать частью юридического соглашения), сам по себе он не является юридическим документом. Он составляется для большей ясности и служит только как рекомендация
Фаза1: Определение проекта
99
Составление бюджета
Когда предъявлять счет?
Оценка стоимости работ по редизайну веб-сайта может быть особенно проблематичной, учитывая множество побочных факторов и неизбежную тенденцию к разбуханию проекта. Необходим опыт и умение правильно рассчитать время, которое займет выполнение каждой фазы и задачи. Недооцените что-либо - и не сумеете покрыть даже собственные накладные расходы. Да, можно выписать счет на круглую сумму в 50 000 долларов и все равно потерять деньги. Проверено на опыте: любая задача требует больше времени, чем думается на первый взгляд, — особенно руководство проектом. Будьте более реалистичны, подстраховывайтесь.
Вопросы оплаты должны быть согласованы до начала работ. Типичная схема - 30% после одобрения предложения или плана проекта, 30% после одобрения стиля и дизайна сайта, а остальное - после сдачи проекта. Четко оговорите, что при необходимости все дополнительные затраты будут ясно обоснованы и одобрены на любой фазе разработки и что дополнительное финансирование будет добавлено к заключительному счету.
Бюджет проекта определяет его фактический размер; слова «в зависимости от бюджета» диктуют, сколько времени и усилий можно отвести на каждый конкретный этап. Распределение бюджета одна из первых административных задач, так как это определяет объем, границы и выполнимость проекта. И имейте в виду, что бюджет в 25 000 долларов, распределенный с умом, может реализоваться в гораздо более эффективный редизайн сайта, чем неумело распределенный бюджет в 80 000 долларов.
Реалистичность бюджета №1: Оценивайте все что возможно Большинство компаний оценивает все что возможно. Хотя конкретные проекты зависят от опыта группы, пожеланий клиента и текущей конъюнктуры рынка, необходимо учитывать и следующие аспекты: доступность и ресурсы, накладные расходы и побочные издержки, технологии и программирование внутреннего интерфейса, распределение по срокам и ожидаемые результаты, а также документирование.
Реалистичность бюджета №2: Он сводится к срокам исполнения Распределять бюджет можно по задачам, по группам или просто угадыванием (не рекомендуется). Независимо от выбранной методологии и вида представленного бюджета (будь это фиксированная сумма, запланированный диапазон или сумма, основанная на затраченном времени и использованных материалах), если опустить детали, все сводится к одному: к затраченному времени. Таким образом, отслеживание времени - важнейший фактор для того, чтобы уложиться в рамки бюджета.
100
Возможные проблемы с фиксированной стоимостью Многие клиенты требуют установления фиксированной стоимости работ. В этом случае руководитель проекта должен четко контролировать масштаб проекта, чтобы уложиться в отпущенный бюджет. Это означает, что следует проявлять твердость в отношении требуемых клиентом «незначительных» поправок и в отслеживании времени для гарантии того, что работы идут в соответствии с намеченным планом, или на более пессимистичной ноте по крайней мере быть в курсе, что вы работаете себе в убыток или с гораздо меньшей прибылью. Надбавка к расчетной стоимости Введите поправку к расчетной стоимости работ, чтобы учесть непредвиденные обстоятельства и накладные расходы. Стандартная надбавка составляет от 10 до 20%. От 50 до 100% надбавки к стоимости часто уходит на такие накладные расходы, как аренда, оплата телефонов, административные задачи, а иногда на неприятную необходимость тратиться на юристов.
Глава 3
Понимание концепции разбухания проекта Разбухание проекта - это медленное, но неизбежное перерастание ясного, четко продуманного проекта веб-сайта в неуправляемый кошмар. Незначительные с виду поправки и незапланированное длительное согласование различных вопросов с клиентом приводит к росту затрат и отставанию от сроков. Мелочи аккумулируются. Разбухание проекта неуловимо; можно и не заметить, что это уже случилось. На вступительной встрече познакомьте и клиента и проектную группу с концепцией разбухания проекта и объясните, как различные графики и планы сдачи этапных работ помогают удержать проект в намеченных рамках. Четко определите этапы сдачи работ. Однозначно оговорите в списке деталей и уточнений или в плане проекта, что инициируемые клиентом изменения должны оплачиваться дополнительно. Благодаря этому, в случае когда клиент страдает избирательными провалами в памяти, ему можно указать на эти документы. Тщательно контролируйте время работ и все вносимые клиентом изменения. Заметив перерасход запланированного бюджета, спросите себя и свою команду, почему это произошло. Клиент присылает по электронной почте просьбу внести пустяковые поправки? Клиент пишет по 10 раз в день вместо того, чтобы обобщить сразу все замечания? Или еще хуже — клиент обращается со своими предложениями, инструкциями и/или поправками напрямую к разработчику и дизайнеру, а не к руководителю проекта? Происходят ли поставка контента, необходимые обсуждения и одобрение, а также утверждение документов в назначенные сроки или все затягивается? Перечисленные факторы способствуют разбуханию проекта. Некоторые задержки предусматриваются, но руководитель проекта должен добиться от клиента ясного и четкого определения - какие поправки находятся в пределах бюджета и что выходит за его рамки.
Фаза 1: Определение проекта
101
Можно произвести потрясающий редизайн сайта, но если при этом превышен бюджет и нет возможности оправдать перерасход, вряд ли вы получите удовлетворение от невыгодной работы, каким бы превосходным ни было ее исполнение. Избегайте разбухания проекта. Сделайте это своим главным принципом.
Распределение бюджета: что и как оценивать Оценка стоимости проекта требует навыков. Можно предложить некоторые критерии, которые помогут прогнозированию, но прежде всего это зависит от вашей способности должным образом оценить размеры проекта (насколько велика работа в действительности?) и взаимодействия с клиентом (сколько времени займут обсуждения и согласования?). Начнем с главного: определите свои временные рамки и ресурсы, а затем используйте математику. Сколько часов отводится каждой задаче? Кто входит в проектную группу? Какие работы будут сдаваться поэтапно? Прогнозируйте реалистичные сроки, необходимые для достижения цели. Будьте максимально объективны: может ли проект быть выполнен раньше намеченной даты запуска сайта? Произведите отсчет от даты запуска. Может оказаться, что следует увеличить ресурсы и обсудить с клиентом необходимость дополнительного финансирования. См. диаграмму (рис. 3.8), иллюстрирующую типичное распределение времени для трех проектов разного объема, каждый из которых основан на выполнении пятифазного Базового процесса. Обратите внимание на то, какая часть ресурсов отводится на общее руководство проектом. Получив такое концептуальное, фазовое представление своего проекта, можно разбить его на недели в электронной таблице (рис. 3.9). Документация
Существует хорошее эмпирическое правило: если клиент подписал бумагу - сохраните ее. Одобрения по электронной почте хороши для начала, но всегда добивайтесь получения подписанного документа; чтобы защитить себя в дальнейшем, запрашивайте подпись через факс. Для каждого проекта создайте отдельный каталог (или папку для бумаг) и храните там всю подписанную документацию: контракты, брифы, первоначальное предложение и его последующие редакции, одобренные карты сайта, варианты визуального оформления и так далее. Необязательно подшивать в папку и сохранять там всю электронную почту, но следует распечатывать и иметь под рукой все сообщения, касающиеся бюджета, размера проекта, отказов и особенно просьб
об изменениях. Сохраняйте их также и в электронном варианте. Избегайте перемешивания файлов и потери документов; начните все организованно и продолжайте в том же духе. Все формы, брифы, планы и графики работ важны как для работы над проектом, так и для поддержания вашей репутации. Документы (большинство) могут быть краткими, как сообщения электронной почты, или официозными, как отпечатанный, многостраничный отчет, дополненный многоцветными глянцевыми иллюстрациями и отформатированный по высшему разряду. Значимость каждого документа зависит от четкости изложения, а не обязательно от шикарного оформления. Однако иногда большая часть документов важна, особенно если у вас капризный клиент или неслаженная группа.
102
Глава 3
Рис. 3.8. Образец распределения времени для трех проектов разного объема. Это только пример; каждый конкретный проект отличается объемом работ, масштабом, ожидаемыми результатами и отчетными этапами
Фаза 1: Определение проекта
103
Рис. 3.9. Этот счетчик бюджетного времени - довольно простая электронная таблица Microsoft Excel, в которой для каждого вида работ установлена почасовая стоимость и затраченное время, а также подсчитан общий итог занятого времени за каждую неделю. Эту таблицу можно также использовать для еженедельного сравнения потраченного времени с запланированным. На данном примере показана типичная восьминедельная разбивка для небольшой внутренней проектной группы. (Бланк можно загрузить с www.web-redesign.com.)
Отслеживание времени Если вы запомните только что-то одно из этой книги, то пусть это будет совет ОТСЛЕЖИВАТЬ ВРЕМЯ. (Правда, авторы надеются, что читатели найдут здесь и другие полезные советы.) Как правило, организации, которые отслеживают время и поэтому всегда знают состояние своего бюджета и как он используется, являются прибыльными. Те же, кто не следит за временем, либо неприбыльны, либо просто удачливы. Это как дважды два. Выберите метод, с помощью которого будете отслеживать время работы над проектом, и затем старательно и четко используйте его. Это единственный способ узнать, чего стоят ваши труды - 5 долларов в час или 50. Отслеживание времени важно и для специализированных фирм и для внутренних проектных отделов, но особенно для фирм, практикующих почасовые расценки. Удостоверьтесь, что вся команда еженедельно представляет точные данные (это повышает ответственность сотрудников), и постоянно контролируйте общее вре-
Фаза1: Определение проекта
105
мя работы всей группы, сравнивая его с запланированным распределением времени (рис. 3.10). Знание потраченного проектного времени очень существенно для контроля бюджета и размера проекта. Любое фактическое время, потраченное на задачи, которые не были отражены в бюджете, окажется съеденным впустую. Однако если эти же задачи были одобрены, должным образом введены в рамки проекта и аккуратно отслежены по временным затратам, то они могут быть предъявлены клиенту для дополнительной оплаты. Следует как можно раньше уведомить клиента о выходе за рамки бюджета, особенно если это происходит из-за разбухания проекта. Используйте любые действующие системы отслеживания времени. Timeslice (рис. 3.11), например, позволяет регистрировать время в больших и маленьких периодах, приращение ответов на электронную почту (не учитывая, что ответы
Рис. 3.10. Каждую неделю составляйте короткий отчет по времени, запланированному в бюджете, потраченному и оставшемуся. Следите за временем еженедельно, чтобы держать под контролем масштаб проекта и правильность распределения времени. Информируйте группу о результатах. Такой отчет ничего не даст, если сотрудники не в курсе реального состояния работ - в рамках ли они проектного плана, отстают ли или опережают его
Puc. 3.11. Timeslice (www.asdsoft.com) позволяет отслеживать время, лишь щелкнув мышкой, и делает сортировку очень легкой
Глава 3
106
Зачастую при наличии опытной и слаженной команды более эффективно оценивать необходимое время в расчете на членов группы. (Например: «Кейт справится с информационным дизайном на сайте такого размера и сложности приблизительно за 40 часов».)Такой метод лучше подходит для фирм, специализирующихся на вебпроектировании. В других же случаях проще оценивать проект по отдельным задачам, а не по времени, необходимому конкретным ролям в группе. (Например: «В этом проекте на информационный дизайн уйдет, вероятно, от 30 до 40 часов».) Можно использовать и тот и другой метод - главное, чтобы клиенту было понятно, из чего складывается общая стоимость проекта.
Бланки расчетов можно загрузить с www.web-redesign.com.
Копирайтер - (от англ. сору - материал для текста и writer - писатель) первоначально - сотрудник рекламного агентства, создающий текстовую часть рекламы в газетах - слоган, заголовок и сам текст, а также определяющий характер иллюстрации. Сейчас в обязанности копирайтеров входит также придумывание названий для новых брэндов, создание сценариев радио- и телевизионных роликов, написание статей, текстов рекламных брошюр, буклетов и
листовок. - Примеч. науч. ред.
Фаза1: Определение проекта
Ставки, приведенные здесь, условны и не соответствуют реалиям никакого из рынков.
107
Глава 3
108
на электронную почту свидетельствуют о разбухании проекта), а также может сортировать данные по разным клиентам, проектам и задачам. Таблицы учета времени на бумаге также хороши, но они не очень точны, если у вас несколько клиентов или несколько задач. В любом случае аккуратно придерживайтесь выбранного вами метода. От этого зависит результат проекта.
Составление графиков работ Для проекта нужен график его выполнения; к тому же, фиксированные предельные сроки стимулируют людей. Существует много способов хронологически распределить предстоящие работы: в виде списков с отметкой о выполнении, в форме календаря, сообщения по электронной почте или в виде еженедельника. Плюс к этому график проектных работ должен еще подчеркивать степень их срочности. Распределение заданий подстегивает каждого. Оно действует, как звонок будильника: «Пора начинать. Цели ясны, задачи определены». Стремитесь к четкому изложению заданий. К задаче календарного планирования можно подойти с двух сторон. Сначала создайте обзорный план работ, в котором хронологически представлена методология работы, а затем сформируйте детальный план на каждый день, в котором перечислите также этапы завершения компонентов работы и сроки их сдачи-приемки. Одно следует из другого; каждый подход дает свою перспективу. Представьте на одобрение клиента оба графика. Не оставляйте в них ничего, что можно интерпретировать по-разному. Пропущенные сроки имеют эффект домино. Многие клиенты не понимают, что, задерживая свои ответы, они тормозят запланированные работы, а значит отодвигают и окончательную дату поставки. Возможно, стоит объяснить это клиенту, делая упор на стремление вовремя достичь цели. Такое объяснение должно быть нормально оценено.
Изменения, инициализируемые клиентом
Разбухание проекта неуловимо. Речь идет не о явных просьбах об изменениях в проекте. Когда клиент напрямую просит ввести дополнительную возможность или раздел, которые не предусмотрены в первоначальной формулировке проекта, можно улыбнуться и уверенно ответить: «Нет проблем, к концу дня мы представим отдельный план и бюджет». Удивительно, насколько эффективен такой подход против разбухания проекта. Клиент сам может отказаться от новых планов или согласится на официальное изменение в проекте.
Форма для дополнительного финансирования - удобный способ задокументировать изменения в масштабе проекта (рис. 3.14). Даже если изменение не требует дополнительных ассигнований, все равно стоит оформить его по правилам, отметив как «бесплатное», и иметь соответствующий документ. Формы для дополнительного финансирования служат поправками к одобренному бюджету,
Фаза 1: Определение проекта
109 Эту форму можно загрузить с www.web-redesign.com.
Рис. 3.14. Используйте эту форму для дополнительного финансирования как образец при создании своей формы
Глава 3
110
Покажите методологию При формировании общего rumw на сопоставьте со сроками платежа методологические этапы (то есть все пять фаз Базового процесса). Это обеспечит наглядный обзор процесса в целом, так как покажет хронологическую последовательность задач проекта.
Старайтесь, чтобы не пришлось долго отыскивать даты сдачи работ. Эта информация всегда должна быть доступна и на виду, возможно даже напоминаться еженедельно по электронной почте или помещаться на демонстрационной площадке. Календарные планы работ должны создать ощущение безотлагательности и держать клиента и всех участников проекта в курсе событий.
Обзорный график работ Обзорный график работ - это в первую очередь обзор. Удобный и наглядный, он служит превосходным способом представить общую перспективу весь проект, дополненный методологией, анализом основных (рубежных) этапов работ и определением готовых компонентов. Этот общий график, который можно быстро сформировать, пригодится и на стадии предложения, и на вступительной встрече по поводу начала практических работ, и на всем протяжении времени работы над проектом. Начните с разбиения проекта на недели или месяцы, а также на фазы и этапы. Мы предлагаем использовать базовые фазы, описываемые в этой книге. В качестве образца см. типовой пример (рис. 3.15).
Подробный график работ с компонентами, подлежащими сдаче Конкретные задачи - компоненты, подлежащие сдаче, или промежуточные этапы работ — продвигают проектную группу и клиента к намеченной цели. Подробный график работ и компонентов, подлежащих сдаче, представляет собой краткий перечень каждодневных задач. Он отражает последовательное продвижение проекта и очень важен для контроля над темпом работ. Для небольших проектов обзорный и подробный графики работ и сдаваемых компонентов можно объединить или использовать параллельно.
Фаза1: Определение проекта
Дата
Готовые компоненты/ Примечания
Недели 1-2 Определение: Составить и утвердить общий бюджет и с 30.07 графики работ. Определить и уточнить технические попо 10.08 требности. Установить масштаб проекта и компоненты, подлежащие сдаче. Сформировать и утвердить план проекта. Выяснить потребности в юзер-тестинге и сопровождении сайта. Составить креативный бриф (на основании опросов клиента), обрисовывающий облик сайта. Провести анализ конкурентоспособности; начать предварительное профилирование аудитории. Получить подписи клиента на всех материалах. Недели 3-4 с 13.08 по 24.08
Структура: Определить структуру сайта, разработать навигацию и положение страниц. Завершить составление карты сайта и утвердить ее у клиента. Создать профили пользователей и выяснить выполняемые ими задачи. Составить план поставки контента и начать с ним работу (редактирование/написание) . Начать структурирование страниц первого и второго уровня. Наметить навигацию, положение страниц, органи-зацию контента, макет, а также маршруты пользователей. Выполнить тестирование бумажного прототипа сайта.
Недели 5-6 Дизайн | Протосайт: Представить первый вариант дизайна/макета страницы. Утвердить стиль оформления страс 27.08 по 7.09 ниц, начать их производство. Приступить к разработке интерфейса пользователя. Преобразовать в цифровую форму необходимые материалы для их онлайнового использования. Разработать HTML-протосайт (без использования дизайна), соответствующий одобренному положению страниц и пользовательскому интерфейсу. Собрать, модифицировать и подготовить весь контент. Начать создание шаблонов дизайна.
111
Готовые компоненты
ОПРОСНЫЕ ЛИСТЫ Передать клиенту ПЛАН ПРОЕКТА * Выплата аванса в размере ЗОХ перед началом работ
КРЕАТИВНЫЙ БРИФ АНАЛИЗ КОНКУРЕНТОСПОСОБНОСТИ
КАРТА САЙТА ПРОФИЛИ ПОЛЬЗОВАТЕЛЕЙ ПЛАН ПОСТАВКИ КОНТЕНТА СТРУКТУРИРОВАНИЕ МАРШРУТЫ ПОЛЬЗОВАТЕЛЕЙ
1-й ВАРИАНТ ДИЗАЙНА: Представить для просмотра в онлайновом режиме ПРОТОСАЙТ: неформальное юзабилити-тестирование •Выплата ЗОХ после одобрения 1-го варианта дизайна
Недели 7-9 с 10.09 по 28.09
Производство: Начать производство сайта, используя БЕТА-ВЕРСИЯ САЙТА: протосайт в качестве макета и структуры. Начать создание представить для просмотра в онлайновом режиме: зайн. Продолжить производство, тестирование и формирование Встреча - 24.09 сайта. Проверить совместимость с заданными броузерами и платформами. Начать внутреннюю проверку качества (QA). Завершить создание онлайновой бета-версии сайта, утвердить ее у клиента и начать внутреннее тестирование и проверку качества. Переместить сайт на постоянный сервер для тестирования и проверки качества и совместимости с разными платформами.
Неделя 10 с 1.10
Запуск: Публичный запуск. Анонсирование. После запуска ГОТОВЫЙ САЙТ: передать все материалы и шаблоны, обучить группу под- Представить в держки и провести заключительную встречу. онлайновом режиме: Встреча - 2 . 1 0
Рис. 3.15. Пример 10неделъного обзорного графика работ отражает методологию, а также краткий перечень задач и компонентов, подлежащих сдаче. (Данный пример создан в виде простой таблицы Microsoft Word. Можно использовать также любой другой формат, наиболее удобный для обмена информацией между клиентом и проектной группой)
Глава 3
112 Дата
Готовые компоненты/ Подробное описание
Примечания
Неделя 1
Формулирование | Выяснение
Понедельник 30.07
ОПРОСЫ КЛИЕНТА: Пол\мить от клиента ответы
*0просные листы переданы клиенту 14.07
Четверг 2.08
ПЛАН ПРОЕКТА: Сформировать обзор бюджета, графиков работ и компонентов, подлежащих сдаче, и представить клиенту на рассмотрение.
'Выплата аванса в размере ЗОХ перед началом работ
КРЕАТИВНЫЙ БРИФ: Представитьклиенту для утверждения
'Начать неформальное юзабилити-тестирование сайта. Начать предварительный анализ конкуренции
Пятница, 3.08
ПЛАН ЮЗЕР-ТЕСТИНГА: Представить клиенту и постараться получить ответ в течение дня, а подписанный план - как можно скорее. АНАЛИЗ КОНКУРЕНЦИИ: Получить представление о конкурентах, определить подход, план и группу по юзабилити. Неделя 2
Определение | Выяснение (продолжение)
Вторник, 7.08
ВСТУПИТЕЛЬНАЯ ВСТРЕЧА: Все заинтересованные лииа обсуждают план •Проводить встречу еженедельно проекта, креативный бриф, план юзер-тестинга и общий график работ. для введения клиента в курс дела
Пятница, 10.08
АНАЛИЗ КОНКУРЕНЦИИ: Составить неофициальный отчет (отчет для разработчиков, а не для клиента).
Неделя 3
Структура | Контент
Вторник, 14.08
КАРТА САЙТА: Представить структуру и организацию сайта. ПЛАН ПОСТАВКИ КОНТЕНТА: Перечислить все виды контента и материалов сайта
Четверг 16.08
'Проводить обсуждения контента и карты сайта еженедельно
КАРТАСАЙТА: Постараться получить одобрение или уточнения клиента к концу дня.
Пятница, 17.08
ПРОФИЛИ ПОЛЬЗОВАТЕЛЕЙ: Определить целевую аудиторию.
Неделя 4
Структура | Контент (продолжение)
Вторник, 21.08
МАКЕТ (1-й вариант)
Четверг, 23.08
МАРШРУТЫ ПОЛЬЗОВАТЕЛЕЙ
Пятница, 24.08
МАКЕТ (2-й вариант)
Неделя 5
Дизайн | Протосайт
Вторник, 28.08
ДИЗАЙН (1 -й показ): Представить в онлайновом режиме для просмотра клиентом
Среда, 29.08
ДИЗАЙН (1 -й вашант): Постараться получить отзыв клиента к концу дня
'Проводить обсуждения макета еженедельно
'Проводить еженедельные обсуждения с предоставлением результатов
Четверг, 30.08 Пятница, 31.08
ДИЗАЙН (2-й вариант): Подготовить к презентации (чтобы показать сайт клиенту в понедельник, можно поработать в выходные, если потребуется).
Неделя 6
Дизайн | Протосайт (продолжение)
Вторник, 4.09
'Еженедельная встреча
Четверг, 6.09
ШАБЛОНЫ ДЛЯ ДИЗАЙНА: Подготовить начальную страницу к производству и тестированию/оптимизации.
Пятница, 7.09
ПРОТОСАЙТ: Провести неформальное юзабилити-тестирование.
Неделя 7 с 10.09 по 14.09
П роизводство
Неделя 8 с 17.09 по 21.09
Продолжить производство, тестирование и формирование сайта. Проверить совместимость с заданными броузерами и платформами. Начать внутреннюю проверку качества (QA).
Неделя 9 с 17.09 по 21.09
Контроль качества (QA)
Неделя 10 с 1.10по5.10
'Если потребуется, работать в выходные
Подготовить бета-версию сайта в онлайне для сдачи клиенту и начать внутреннее тестирование и проверку качества (QA). Переместить сайт на постоянный сервер для его испытания, проверки качества и совместимости с разными платформами.
'Выплата ЗОХ после одобрения креатива
БЕТА-ВЕРСИЯ САЙТА Представить в онлайновом режиме. Встреча-24.09
Запуск | Публичный запуск Анонсирование
Представить в онлайновом режиме.
После запуска: Передать все необходимые материалы и шаблоны, обучить
Встреча-2.10
группу сопровождения и провести заключительную встречу.
'Выплата оставшейся суммы
Рис. 3.16. Детальный 10-неделъный график работ со сроками сдачи готовых компонентов разбивает проект на недели и дни. (Представлен в виде таблицы Microsoft Word)
Фаза1: Определение проекта
113
Используйте различные стили Методы представления документов, показанные в этом разделе, просто предложения. Вкусы и восприятие у людей разные, поэтому форматы документов можно менять соответственно. Одни предпочитают перечисление ключевых дат в виде списка, а другим больше нравятся обзорные графики работ, отражающие пианы на каждый день в календарном стиле (рис. 3.17). Используйте любой стиль, наиболее удобный для проектной группы и клиента.
Рис. 3.17. Macromedia Dreamweaver имеет замечательное дополнение - календарь, который поможет сформировать детальный график, день за днем. К тому же, он в формате HTML, так что его легко перенести на демонстрационную площадку. Получить календарь можно на http:/'/'exchange.macromedia.com (ищите там «calendar»)
Подробный график работ и материалов, подлежащих сдаче, составляется на основе обзорного графика. Держите обзорный график для справки (и, конечно, обновляйте его, если вдруг масштаб проекта раздуется от 8 недель до 13), но конкретные действия и сроки перечисляйте и описывайте в подробном графике (рис. 3.16). Обновляйте графики по мере внесения в проект изменений и сделайте их легко доступными на демонстрационной площадке. Хороший обмен информацией помогает держаться в рамках запланированных сроков.
114
Глава 3
Формирование проектной группы Наверное, все слышали мудрую истину о том, что любая команда сильна настолько, насколько сильно ее слабейшее звено. Это справедливо и для проектной группы. Чтобы минимизировать потенциальные проблемы в хорошо разработанном и стройном плане, подыскивайте надежных людей, даже если потребуются дополнительные фонды для оплаты более опытных специалистов. Если в группе есть новички, сбалансируйте их экспертами. При умелом распределении индивидуальных задач и обязанностей - для клиента и в группе - можно избежать сбоев. Определите контактное лицо на стороне клиента - того, кто имеет право окончательной подписи от имени клиента. Вот ситуация: вы посылаете для одобрения клиентом готовый компонент и три дня ждете ответа, пока четыре ответственных лица найдут время для его просмотра. Такое случается постоянно. Поверьте, очень неприятно работать с неорганизованными людьми. Когда на стороне клиента решения принимают несколько человек, им необходимо прийти к общему мнению. Если компания клиента или обстоятельства вынуждают руководителя проекта получать каждый раз несколько одобрений, отведите для этого больше времени в графике работ, так как почти всегда будут задержки. В проектной группе один человек может выполнять несколько обязанностей (например, Майк будет заниматься и дизайном и информационным проектированием), поэтому в расчет следует брать не отдельных исполнителей (Майк), а скорее тип задач (дизайн и информационное проектирование). В связи с возрастанием количества людей, использующих редакторы класса WYSIWYG и другие упрощенные HTML-редакторы, такое «ношение нескольких портфелей» случается все чаще (см. мнение специалиста Джима Хейда). Арт-директор может быть также ответственным за производство HTML-сайта. Руководитель проекта иногда берет на себя и проверку юзабилити. Будьте реалистичны. Если вы руководитель и арт-директор проекта, то вряд ли найдете время еще и на информационное проектирование, и на работу копирайтера, - разве что растянув сроки выполнения работ. Нанимайте новых специалистов или распределяйте дополнительные обязанности между членами группы сообразно обстоятельствам.
Организация демонстрационной площадки Демонстрационная площадка играет роль центрального пункта координации работ. Разбейте ее на две части: клиентский демонстрационный сайт и рабочий сайт группы разработчиков. Хотя электронная почта и эффективна для обмена информацией, выяснения текущих вопросов и передачи административных данных (адресов электронной почты, графиков работ и так далее), рекомендуется также создать демонстрационные площадки.
Фаза1: Определение проекта
115
Джим Хейд (Jim Heid) о распределении обязанностей и специализации
Как информационное пространство Сеть стала достаточно сложной, и специализация становится реальной необходимостью. Все труднее в этой области оставаться универсалом. Возможно, вы специалист по информационной архитектуре или по динамическому HTML или гуру в JavaScript, или знаток Flash, или специалист по потоковым данным (streaming media). Различные технологии, применяемые в современных веб-сайтах, постоянно развиваются, и достаточно трудно не отставать даже в одной области. Я считаю, что сегодняшний веб-профессионал должен иметь общее представление обо всех составляющих, чтобы суметь хорошо работать с клиентами и специалистами разных областей. Но кроме этого он должен сосредоточиться на одном конкретном направлении. Могу привести собственный пример: я знаю мир веб-дизайна в целом достаточно хорошо, чтобы найти надежных экспертов в каждой области, и в то же время моя основная область - потоковые данные. Важно знать понемногу обо всем и много о чем-то главном. При работе в большой команде общее представление о веб-технологиях способствует лучшему контакту со всеми специалистами группы. В случае небольшой группы - скажем, два-четыре человека - важно, чтобы каждый член группы имел специализацию, которая, так или иначе, обогащала бы воз-
можности всей группы. Но при этом каждый должен иметь достаточно общих знаний, чтобы понимать своих коллег. Подобно многим в этой области, Джим Хейд имеет несколько специализаций. Кроме того что он известен как хороший обозреватель технологий, Джим председатель нескольких конференций Thunder Lizard no веб-производству, включая серии семинаров по веб-дизайну и Macromedia Web World. Наконец, его третья специализация - консультант по потоковым данным. Сейчас он работает на www.jimheid.com и проживает в Альбионе, Калифорния (с населением 398 человек).
Глава 3
116
РОЛИ В ПРОЕКТНОЙ ГРУППЕ Руководитель проекта (Project Manager) Называемый также продюсером сайта (site producer) или финансовым директором (account manager), руководитель проекта организует веб-проект от начала до конца и является главным лицом, взаимодействующим с клиентом, а также центральной фигурой в проектной группе. В задачи руководителя проекта входит определение и формулирование фактических потребностей сайта и согласование с клиентом необходимых технологий и времени, требуемого на разработку и выполнение заявленных целей в рамках установленного бюджета. Руководитель проекта следит за ходом работ, решает проблемы и взаимодействует со всеми членами группы и клиентом во всех фазах Базового процесса. Руководство проектом - это связующее звено, которое объединяет весь процесс разработки и его участников в единое целое. Ответственный за производство/Дизайнер производства (Production Lead/Production Designer) Ответственный за производство возглавляет группу дизайнеров по производству HTML и тестированию, следя за масштабом и графиком работ. В небольших проектах ответственный за производство может быть также и дизайнером производства HTML. Обязанности дизайнера производства может исполнять человек, сведущий в HTML и стандартах оптимизации изображений, включая использование таблиц, фреймов и вопросы просмотра страниц в различных броузерах. От дизайнера производства может также потребоваться знакомство с ASP, Perl, Java, CGI и так далее. В его обязанности входит создание HTML-протосайта и окончательная компоновка HTML, а также согласование элементов художественного оформления с принятым стилем сайта. (Дополнительную информацию по производству сайта см. в описании фазы 4.)
Арт-директор/Визуальный дизайнер (Art Director/Visual Designer) Арт-директор/визуальный дизайнер отвечает за создание качественной, эффектной графики, соответствующей ограничениям возможностей ее просмотра целевой аудиторией. Он должен хорошо владеть стандартными программами (Fireworks, Flash, Dreamweaver, Photoshop, GoLive). Как и все другие сотрудники группы, арт-директор/визуальный дизайнер должен следовать установленному графику работ, регулярно согласовывать все вопросы с руководителем проекта и быть в состоянии самому контактировать с клиентом. При наличии нескольких визуальных дизайнеров артдиректор отвечает за их согласованную работу по созданию внешнего облика сайта. (Дополнительную информацию по визуальному проектированию см. в главе 5 «Фаза 3: Визуальное оформление и тестирование».)
Информационный дизайнер (Information Designer) Информационный дизайнер отвечает за размещение, структуру и юзабилити и соответствующим образом преобразует контент и бизнес-цели в подходящие функциональные и визуальные схемы и решения. Он разрабатывает карту сайта и способы навигации по контенту, размещенному на странице, - все это безотносительно к внешнему оформлению страниц. Информационный дизайнер определяет механизм навигации по сайту, его функциональность и взаимодействие с пользователем. Обязанности по информационному дизайну могут быть совмещены с внешним дизайном или производством сайта. (Дополнительную информацию об информационном дизайне см. в главе 4 «Фаза 2: Разработка структуры сайта».)
Фаза 1: Определение проекта
117
РОЛИ В ПРОЕКТНОЙ ГРУППЕ Копирайтер/Контент-менеджер (Copywriter/ Content Manager)
Программист/Специалист по внутренним разработкам Programmer/Backend Engineer
Одна из наиболее важных (и часто упускаемых) ролей в эффективном веб-проектировании - роль копирайтера. Копирайтер должен знать специфику Сети и иметь соответствующие навыки, включая умение поддержать стиль и необходимое впечатление, которое должен производить сайт. Иногда копирайтер может также выполнять обязанности контент-менеджера: следить за всеми составляющими контента (то есть фотографиями, аудио-, видео- и текстовыми материалами) и контролировать их своевременную поставку для производства. Для сайтов, имеющих объемное содержимое, часто необходимо иметь несколько копирайтеров и выделенного контент-менеджера. Рекомендуется, чтобы копирайтер(ы) и контент-менеджер были наняты непосредственно клиентом и работали на него, а подготовленные ими материалы были оговорены в проекте как поставляемые клиентом компоненты. (Дополнительную информацию по подготовке контента см. в описании фазы 2.)
Уровень требуемой квалификации программиста/ специалиста по внутреннему интерфейсу зависит от технических потребностей проекта - от основ JavaScript до более сложного программирования (CGI, ASP, Java, ATG и Perl). В самом начале проекта необходимо провести тщательный анализ потребностей внутреннего программирования. Специалист по внутренним разработкам выполняет требуемые работы параллельно с работами по перепроектированию внешнего облика сайта. Этот специалист может также служить решающим или связующим звеном между внутренним и внешним интерфейсами,, что особенно важно на стадии производства. Напомним еще раз, что внутренние технологии не входят в Базовый процесс.
Ответственный за юзабилити (Usability Lead) Ответственный за юзабилити сайта в первую очередь собирает конкретную информацию о том, как конечные пользователи фактически работают на сайте, а также выясняет удачные и неудачные аспекты. Ответственный за юзабилити взаимодействует с информационным дизайнером, уточняя вопросы навигации и пользовательских маршрутов, а затем проверяет новый сайт в отношении юзабилити на фазе HTML-протосайта наряду с проверкой качества QA, I а также при запуске. (Дополнительную информацию о юзабилити-тестировании сайта см. в главе 8.)
Ответственный за контроль качества (QA Lead) Ответственный за контроль качества сайта, называемый иногда «чистильщиком» (Exterminator), отыскивает ошибки и недочеты сразу после производства сайта, а иногда и после его запуска. В его обязанности входят: разработка плана тестирования, проверка на соответствие броузерам (включая HTML), а также контроль размещения контента. (Дополнительную информацию о проверке качества сайта см. в главе 6 «Фаза 4: Производство и контроль качества».)
В данной таблице перечислены обязанности ролей в проектной группе, что не обязательно соответствует количеству сотрудников группы.
118 Рекомендуемое программное обеспечение Разработанный для мелкого бизнеса пакет SiteSpring, новый программный продукт Macromedia, позволяет легко и быстро создать профессиональный и эффективный демонстрационный сайт. С его помощью можно отслеживать состояние задач, контента и прочих компонентов, а кроме того, он обеспечивает центральный пункт взаимодействия всех членов проектной группы.
Глава 3
Зарезервируйте под них место на своем собственном сервере. Защитите их паролем, если возможно, или, по крайней мере, удостоверьтесь, что URL демонстрационной площадки скрыт от случайных посетителей. Сообщите URL организованной площадки клиенту и всем членам проектной группы. Вступительная встреча - очень подходящий момент для этого. Рабочий сайт проектной группы служит для работы и взаимодействия ее членов, но не для клиента. Наличие такого сайта очень помогает в проектах с дистанционно разделенными членами группы, нуждающимися в FTP-доступе,кроме того, он идеален при разработке альфа-сайта HTML. Как только работа готова для показа клиенту - варианты визуального дизайна, протосайт или бета-сайт, - она перемещается в клиентскую часть демонстрационного сайта и становится доступной клиенту. Каждая компания создает такие площадки по-своему. Будь это «клиентский сайт» или «проектный сайт», это должна быть удобная, легко поддерживаемая и обновляемая структура. Каждый член проектной группы должен понимать, как организованы каталоги файлов и как обозначаются обновления. Логичность и последовательность в этом отражают профессионализм группы. Рекомендуется обеспечить клиентскую демонстрационную площадку простой навигацией (рис. 3.18 и 3.19). Оставляйте ее в текстовом формате; рисунки не нужны. Обеспечьте ссылки с начальной страницы к трем главным разделам: дизайн, HTML и административный раздел (графики работ, креативный бриф, контакты). Ссылка на последний должна быть проставлена на каждой странице демонстрационного сайта наряду со ссылкой на начальную демонстрационную страницу и на страницу с контактной информацией, где адреса электронной почты являются активными ссылками. Старайтесь поддерживать хронологический порядок записей и везде проставлять даты. По завершении очередного этапа работ заархивируйте относящи-
Фаза 1: Определение проекта
119
Puc. 3.18. Демонстрационная площадка food.com может служить примером для организации клиентского демонстрационного сайта. Представленные клиенту материалы разделены на три главных раздела: разработка, дизайн и контакты
Puc. 3.19. Демонстрационный сайт cjcarmichael.com еще проще. Это не такой крупный проект с гораздо меньшим составом проектной группы, поэтому для ссылок вполне хватает места на одной странице
120
Глава 3
еся к нему материалы в отдельный раздел. Всегда может возникнуть необходимость просмотреть предыдущую версию. Организовав демонстрационный сайт, удостоверьтесь, что клиент знает, как на него выйти, и регулярно получает по электронной почте уведомления о его обновлении.
Планирование юзер-тестинга Одна из основных причин редизайна сайта - необходимость сделать его более удобным. Сайты должны нравиться пользователю. Если посетители не могут работать на сайте, они не будут возвращаться на него. Основной вывод: проект редизайна окажется неудачным, если сайт будет неудобным в использовании. В этой книге часто говорится о юзабилити-тестировании. Это очень эффективный метод оценки сайта. Однако существуют и другие надежные способы сбора отзывов и информации (см. таблицу ниже). Получение в ходе разработки сведений о целевой аудитории, а заодно и проверка того, что навигация, информационный и визуальный дизайн работают так, как вы предполагали, только повысят шансы успешного редизайна.
Разработка плана юзер-тестинга При формировании плана проекта следует решить, каким образом и на каких этапах работ следует провести проверку сайта пользователями. Можно заранее провести такую проверку на существующем сайте, чтобы понять, какие аспекты явно нуждаются в переделке. Можно воспользоваться онлайновым опросом, который даст сведения о целевой аудитории, полезные на этапе выяснения. Можно также опросить фокусную группу уже на фазе структурирования, чтобы узнать мнение со стороны. Приведенный ниже обзор различных проверок поможет выбрать подходящую методику. Проанализировав предложенные способы, решите, на каком этапе можно воспользоваться ими, и внесите их в соответствующие графики работ.
Что такое онлайновый опрос? Опросы — по электронной почте или в онлайновом режиме — ценный способ получения многочисленных отзывов, позволяющих сделать статистически оправданные заключения. Такой тип сбора информации лучше всего подходит для общих вопросов с ответами типа «да/нет», но не годится для получения более конкретных сведений. Онлайновое опрашивание - один из методов выяснения привычек аудитории, ее вкусов и потребностей, а самое главное — определения недостатков текущего сайта, которые необходимо устранить при редизайне.
Фаза 1: Определение проекта
Обычно на такие опросы пользователи отзываются не очень активно. На массовые опросы целевой группы по электронной почте отвечает от 10 до 15% опрашиваемых пользователей. Однако при рассылке 500 опросов даже 50 ответов дадут достаточно информации для анализа.
Что такое проверка с помощью фокус-групп? Проверка с помощью фокус-групп используется для сбора мнений - и последующего обсуждения сайта - с репрезентативной выборки вашей аудитории. Преимуществом такого способа проверки является то, что опросы можно производить уже в самом начале работ. Внешний облик и впечатление, производимое сайтом, организация и представление контента, навигация - все это (и многое другое) может быть оценено через опросы фокусгрупп. Цель таких опросов — получить общее и объективное мнение. Можно задать вопрос: «Что вы думаете об организации контента?» или «Как вам нравится навигация? Логична ли она?», или «Нравится ли вам расположение рекламы?» Можно представить несколько набросков начальных вариантов дизайна и спросить, который из них предпочтительнее и почему. Мнения беспристрастной группы пользователей помогут понять, правильны ли ваши предположения. Но не забывайте: это всего лишь мнения.
Что такое юзабилити-тестирование? Буквально юзабилити (usability) - это легкость в использовании или легкость в понимании того, что нужно сделать, чтобы заставить что-то работать. Юзабилити веб-сайта - это понимание того, как отдельный пользователь будет перемещаться по сайту, находить информацию и взаимодействовать с веб-сайтом. В отличие от онлайновых опросов или опросов фокус-групп, юзабилити-тестирова-
121
Правда о фокус-группах Хотя фокус-группы и хороши для сбора мнений, получаемые из опросов сведения не конкретизируют, что именно удачно или неудачно на сайте. Кроме того, если в фокус-группе есть яркая личность, ее мнение может стать преобладающим для всей группы. По этим причинам опросы фокус-групп пользователей не могут заменить юзабилити-тестирование сайта.
Глава 3
122
ние проводится «один на один»: один человек (испытатель) наблюдает и изучает действия другого человека (конкретного пользователя), чтобы выяснить, как он фактически использует сайт и решает на нем свои задачи. Юзабилити акцентируется на целях ; пользователь должен выполнить на сайте ряд конкретных задач, а не пошаговых инструкций. Руководство пользователем исказит результаты проверки. Юзабилити-тестирование показывает, как фактически действуют пользователи, а не то, что они думают о своих возможных действиях. Это очень ценная информация. Если такие проверки проводятся в ходе работ над проектом, их результаты помогут своевременно исправить выявленные недостатки и избежать крупных проблем. Подробнее о юзабилити-тестировании см. в главе 8.
Начало работ над проектом Проведите вступительную встречу. Считайте ее церемонией по поводу начала работ над проектом редизайна. Вам пришлось побегать, подготавливая необходимые материалы, подыскивая команду (ваша группа) и спонсоров (ваш клиент). Теперь пора собрать всех лицом к лицу на одном поле (можно в конференц-зале), чтобы обрисовать руководящие принципы и правила (цели сайта) всем участникам программы. У вас уже намечены долгосрочные планы. Вступительная встреча - прекрасная возможность обсудить проект со всеми ключевыми фигурами как со стороны клиента, так и из проектной группы, и официально объявить старт. Подготовьтесь к этой встрече; возьмите план проекта (который включает, по крайней мере, следующее: обзор проекта, общий и детальный графики работ, креативный бриф, профили пользователя, данные о технических возможностях аудитории, список членов проектной группы и план юзер-тестинга) и соМЕТОДЫ СБОРА ИНФОРМАЦИИ И ОТЗЫВОВ ПОЛЬЗОВАТЕЛЕЙ Опросы (онлайновые и по электронной почте)
Фокус-группы
Юзабилити-тестирование
| От 50 до 1000 участников, I представляющих целевую аудиторию. Нет прямого взаимодействия. Статистически значимые отзывы.
От 8 до 20 участников. Ценные отзывы и мнения на начальном этапе.
От 4 до 8 участников. Цель выяснить действия при выполнении задач. Фактические ре- I зультаты основаны на наблюдении; взаимодействие «один на один».
Что они думают в общем.
Их мнение о том, как они могут действовать.
Что фактически делают пользователи.
Фаза 1: Определение проекта
1 23
ставьте программу встречи. Рекомендуется составлять программу для каждой встречи независимо от того, придерживаетесь вы ее или нет. В программу вступительной встречи включите следующие пункты, изменив их в соответствии со своим проектом. • Ознакомление с планом проекта. Представьте проект, клиента и группу; отметьте задачи этапа выяснения; коснитесь деталей и уточнений; удостоверьтесь, что все понимают масштаб проекта; раздайте обеим сторонам контактную информацию; обсудите задачи и обязанности обеих сторон; согласуйте способы связи. • Окончательные цели сайта. Раздайте всем креативный бриф и подробно обсудите его. • Контент. Кто поставляет контент? Каким будет график его поставки? • График и сроки работ. Обсудите календарный план проекта; поясните значение своевременности откликов и поставки контента для окончательной даты запуска сайта; согласуйте и откорректируйте календарный план проекта с учетом различных индивидуальных обстоятельств; обсудите проблему разбухания проекта. • Следующие шаги. Кратко опишите, что предстоит сделать на следующем этапе и кто с кем будет контактировать, особенно в ближайшей фазе проекта -на стадии организации контента и структурирования сайта. Вступительная встреча призвана согласовать ожидаемые результаты и уточнить масштаб проекта. Ознакомьте всех с границами проекта. Напомните, что на следующем этапе клиент должен определить контент, а проектная группа займется структурированием сайта.
Резюме фазы 1 Вступительная встреча знаменует конец первой фазы Базового процесса. Ваш проект организован, одобрен, распланирован, ассигнован, укомплектован исполнителями, и ему дан старт. При формулировании масштаба проекта редизайна сайта, как было показано в этой главе, приходится много суетиться, бегать, выяснять и планировать. Прочитав эту самую длинную в книге главу, можно засомневаться, оправданы ли такие усилия. Зачем тратить столько времени? Зачем так подробно опрашивать клиента? Почему нельзя просто довольствоваться той информацией, которую предоставит сам клиент? Данные. Чем больше данных имеется в начале работ над проектом, тем лучше можно организовать всю работу. Один только опрос клиента содержит больше 30 вопросов. Расширенный технический опросный лист, эксплуатационный опрос и все остальные инструментальные средства, представленные в этой главе, предназначены для помощи в сборе необходимой для проекта информации.
124
Глава 3
Четко определенный проект устанавливает несколько главных моментов, включая общую направленность и окончательные цели редизайна. Доведение их до сведения всех членов группы и клиента гарантирует согласованность в понимании задач, в терминологии, в стремлении к одной и той же финишной черте. Большое значение также имеют полученные знания о пользователях и их потребностях, об их онлайновых интересах и технических возможностях. На каждом этапе каждой последующей фазы процесса - визуального оформления и тестирования, производства и контроля качества (QA), запуска и сопровождения вся группа должна работать над редизайном сайта для пользователя. Но если при этом не знать аудитории сайта... Об этом сказано уже достаточно. Только после формулирования проекта можно начать практическую разработку сайта. Структурирование сайта, вторая фаза Базового процесса, начинается сразу вслед за вступительной встречей. Вооруженные четко сформулированными целями и руководящими принципами, вы займетесь информационным дизайном и организацией контента сайта.
125
Фаза 1: Определение проекта
Контрольный список задач фазы 1 Выяснение •
Раздать/собрать/проанализировать опросный лист клиента • Раздать/собрать/согласовать эксплуатационный опрос • Получить от клиента имеющиеся материалы по маркетинговым исследованиям • Выяснить демографические данные аудитории • Создать профили пользователей • Определить технические возможности аудитории • Определить потребности во внутреннем программировании (если они есть, применить дополнительные технологии) • Проанализировать отрасль клиента (см. также главу 9)
Уточнение • Определить окончательные цели D Составить креативный бриф проекта
Планирование • Составить бюджет • Выбрать способ отслеживания времени • Составить графики работ • Сформировать проектную группу • Организовать клиентскую демонстрационную площадку • Организовать рабочую площадку для проектной группы • Составить план юзер-тестинга • Скомпоновать план проекта • Провести вступительную встречу • Получить подписи клиента на всех документах
Учебный пример
126
Internap Клиент: Internap Network Services Corporation URL: www.internap.com Проектная группа: Phinney Bischoff Design House, Сиэттл Директор по связям (Interactive Director): Карл Бишоф (Karl Bischoff)
Директор стратегии брендинга (Director of Brand Strategy): Дейв Миллер (Dave Miller) Главный дизайнер: Коди Расмуссен (Cody Rasmussen) Технический директор: Нейл Робертсон
(Neil Robertson)
ПРЕДЫДУЩИЙ
INTERNAP.COM [ПРЕЖНИЙ] не продвигал свою торговую марку. Internap считался довольно хорошей фирменной маркой и узнавался в высших технологических кругах (среди главных технических директоров и главных сетевых администраторов), но брендинг фирмы не распространялся в более широкие круги и организации.
Учебный пример
127
Internap Network Services Corporation, ведущий провайдер быстрых, надежных интернет-сервисов; создал платформу, которая не просто маршрутизирует данные, а делает это интеллектуально.
СОВРЕМЕННЫЙ
INTERNAP.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] обновил свой внешний облик и пересмотрел стратегию брендинга, добавив девиз и образный рисунок, которые оживляют картину и усиливают впечатление. Сайт представляет Internap как «интеллектуальный» интернет-провайдер. (2000 г.)
Результат: Более доступен широкой аудитории,
См. цветную вклейку, стр. 344-345
Фаза 2: Разработка структуры сайта
Л Т1
Когда организованное содержимое представлено логическим и понятным пользователю способом, переход между страницами происходит плавно, бесшовно.
5 Зак. 667
Фаза 2: Разработка структуры сайта Некоторые люди быстро «пролистывают» веб-сайты, оценивая разные компании. Другие медленно «прогуливаются» по сайту, словно по магазину. Третьи приходят на сайт с конкретной целью: найти нужную информацию или сделать покупку. Сеть и создана для предоставления информации, а также быстрого и легкого ее поиска. Она соединяет пользователей с содержимым сайта. Независимо от конкретной задачи пользователям необходимо, чтобы они были ясно и просто направлены к разыскиваемым данным. Хороший информационный дизайн снабжает пользователей «дорожными знаками», которые помогают им ориентироваться и не потеряться. Питер Морвилл (Peter Morville), автор статей в онлайновом журнале Web Review (www.webreview.com), характеризует хороший информационный дизайн как «создание последовательных и функциональных систем навигации, графики, компоновки страниц и языка заголовков, благодаря которым пользователь понимает, куда идти, что делать и повторно возвращается на такой сайт». Структурирование любого сайта - прямо с нуля или при редизайне - включает рассмотрение трех точек зрения: контента, сайта и страницы. Контент, или содержимое - это то, что дает жизнь сайту. Усовершенствование структуры как с точки зрения сайта (схематизация сайта), так и с точки зрения страницы (структурирование) позволяют информационному дизайнеру представить организованное содержимое таким способом, который будет логически понятен пользователю. Структурирование сайта на бумаге перед началом визуального проек-
> > > >
Определение тематики контента Аудит существующего контента Структурирование контента Создание плана поставки контента
> > >
Создание карты сайта Пересмотр текущей организации сайта Установка соглашений об именовании
> > > >
Создание макета Обеспечение навигации Именование и маркировка Определение основных маршрутов пользователей
Фаза 2: Разработка структуры сайта
тирования - очень важный этап правильной адресации к целевой аудитории. Эффективный информационный дизайн незаметен для пользователя. Однако если он плохо продуман, пользователи сразу почувствуют неудобство и даже раздражение. К сожалению, разработка надежной структуры сайта - задача информационного дизайнера - один из этапов, которым наиболее часто пренебрегают при разработке веб-проектов. Некоторые клиенты желают сохранить навигацию и организацию сайта «как есть» и оставляют старый сайт как базовую структуру при редизайне. Это неправильно, ни в коем случае нельзя пренебрегать информационным проектированием. Редизайн - это цельный процесс, и удаление одного из его этапов ставит под угрозу конечный результат. Можно привести такое сравнение: редизайн вебсайта подобен реконструкции кухни - прежде чем планировать перестановки, размещать бытовую технику и розетки и выбирать пластик или гранит для отделки, следует выяснить, какие функции и возможности необходимы и как они будут использоваться. Если не продумать это до начала строительных работ, результат будет очень далек от совершенства. Более того, что-нибудь может и не вписаться. Будь это кухня или веб-сайт, если человеку там понравилось, если он смог выполнить свою задачу и быстро и легко нашел то, что искал, есть шанс, что он еще вернется сюда (или, по крайней мере, не будет вынужден страдать от новой кафельной плитки и пеналов вашего сайта). Очень важно заранее спланировать все с учетом пользователя. Только представив себя работающим в перестроенной кухне (или на перепроектированном веб-сайте), можно со знанием дела спроектировать новую структуру. Представьте себя обычным пользователем сайта. Станьте одним из них. Что они делают на сайте? Что им нужно и как следует спланировать навигацию и структуру сайта, чтобы удовлетворить их потребности? В фазе 1 Базового процесса была определена аудитория сайта. Теперь в начале струк-
131
Информационный дизайн как роль В фазе 1: Определение проекта перечислено несколько ролей, вовлеченных в Базовый процесс, и одна из них - информационный дизайнер. Не в каждом проекте можно позволить себе роскошь иметь отдельного информационного дизайнера. Это не страшно. Мы сейчас говорим не о людях, а о ролях. Руководитель проекта может быть одновременно и информационным дизайнером или поделить его обязанности с арт-директором. Для разработки структуры огромного сайта, наоборот, можно иметь небольшую армию информационных дизайнеров, решающих отдельные структурные задачи под общим руководством одного из них. Как бы там ни было, в любом проекте кто- то должен отвечать за информационный дизайн. Это и есть тот человек, о котором идет речь.
Глава 4
132
Ани Фио (Ani Phyo) об информационном дизайне
Думать как информационный дизайнер не так уж и необычно - фактически мы делаем это все время: для облегчения поиска расставляем свои компакт-диски по тематике или по алфавиту, в зависимости от того, как нам удобнее искать музыкальные записи; распределяем по разным шкафам вещи по их типу (например, рубашки/ брюки), по сезонам (летние/зимние) или по размерам. Это примеры информационного дизайна. Можно рассматривать информационного дизайнера как архитектора. Архитектор старается узнать клиента, чтобы понять, кто будет использовать помещение, что он будет там делать, каковы его цели, какие площади потребуется расширить и как скоро и так далее. Полностью поняв масштаб объекта (веб-сайта), архитектор изображает на кальке - количество, размеры и формы комнат (страницы/рисунки), их расположение относительно друг друга (карта сайта/макеты), где позднее могут быть добавлены дополнительные комнаты (планирование масштабируемости и роста), то, как
эти комнаты связаны между собой (навигация/ссылки), и так далее. Все это время архитектор тесно сотрудничает с инженерами, которые говорят ему, что возможно построить. После одобрения проекта клиентом начинается производство (визуальный дизайн, а затем кодирование HTML). Визуальный дизайн существенно обогащает информационный дизайн и очень заметен пользователю. Система может прекрасно функционировать, но пользователям нужны визуальные объекты, которые помогут им распознать разные участки сайта и их взаимосвязь друг с другом. Одним из помощников в навигации является цвет. Например, всем известно, что зеленый приглашает идти, а красный требует остановиться. На восприятие пользователя очень влияет также бренд и внешнее оформление. Сайт с е-коммерцией может работать быстро и эффективно, но если его внешнее оформление не соответствует бренду компании, пользователь может не задержаться на сайте достаточно долго и не узнает, как хорошо этот сайт работает!
Фаза 2: Разработка структуры сайта Клиенты стремятся побыстрее получить свои сайты, поэтому иногда они не понимают значение информационного дизайна. Выделение времени для составления чертежа сайта перед его формированием сохранит, в конечном счете, и время и деньги. Ани Фио имеет творческий опыт работы на веб-сайтах и вне их с 1993 г. В 1994 г. она основала SmartMonkey Media (www.smartmonkey.com) и получила признание как опытный консультант по дизайну и как веб-дизай-
133 нер. Недавно она занималась связыванием телевидения и Сети для телекомпаний в Лос-Анджелесе. В число ее клиентов входят Paramount Pictures, Warner Bros., Apple Computer, Simon & Schuster и Gymboree. В свободное время Ани читает лекции и ведет курсы по веб-дизайну, информационному дизайну, обеспечению взаимодействия и юзабилити сайтов. SmartMonkey Media - цифровая студия, специализирующаяся на веб-дизайне, цифровом видео, прямых репортажах с места событий и совмещении разных информационных сред.
134
Глава 4
турирования вернитесь к потенциальной аудитории. Внимательнее рассмотрите демографические данные и индивидуальные профили пользователей. Способ взаимодействия с пользователями, очевидно, зависит от того, кто они, что для них значит Интернет и как они его используют. Только зная это, можно учесть интересы пользователей и встать на их точку зрения - цель, которая важна на каждом этапе работ, описанных в этой книге. В данной фазе Базового процесса предстоит организовать перепроектированный сайт, объединив запланированное содержимое с информационным дизайном и создав цельную структуру. Имея эти данные, визуальные дизайнеры придадут ей внешний облик, а дизайнеры производства поймут, как сайт организован и как он функционирует. Замечание о терминах: в веб-проектировании термины информационный дизайн, архитектура сайта и информационная архитектура часто используются взаимозаменяемо. Однако есть некоторые различия в их подстрочнике. Информационная архитектура и архитектура сайта - почти синонимы, каждый из этих терминов описывает способ структурирования и организации контента. Информационный дизайн связан прежде всего с организацией информации исходя из точки зрения страницы или компоновки контента. Но задача у информационного дизайнера, информационного архитектора или архитектора сайта одна и та же: организовать информацию и навигацию удобным для пользователя способом. Для ясности прикроем все три термина одним зонтом: информационный дизайн. Приносим наши извинения, если такое упрощение обижает кого-то информационных архитекторов или архитекторов сайта.
Определение тематики контента Контент очень значим для любого сайта. Без добротного, соответствующего сайту контента все причудливое оформление и потрясающая графика превратятся в пустой заполнитель. Но даже наличие хорошего содержимого еще не достаточно. Оно также должно быть умело организовано. Разработка контента - серьезная задача, достойная отдельной технологии и специального администратора. Любые сайты новостей или сайты с информационно-насыщенными каналами, которые требуют постоянного притока информации, не могут функционировать без копирайтеров и контентменеджеров. На сайтах с меньшим объемом информации задачи составления текстов и управления контентом может выполнять один и тот же человек. Но между этими крайними случаями рекомен-
Фаза 2: Разработка структуры сайта
135
дуется назначить ответственного за контент, который будет связующим звеном между клиентом и проектной группой, что облегчит разработку, сбор и организацию контента. Настоятельно рекомендуется, чтобы клиент на своей стороне специально нанял копирайтера для сайта. Если проектная группа - внутренняя, выделите для этого кого-то из состава группы. Если в перепроектируемом сайте предполагается обширный контент, тогда, возможно, у клиента уже есть штат копирайтеров, и это предложение излишне. Но в большинстве случаев оказывается, что клиент не подготовлен к задачам сбора и подготовки контента и, возможно, взвалил эту обязанность на одного несчастного сотрудника, у которого и так дел по горло. Тем не менее, руководителям веб-проекта следует облегчить свою задачу и позаботиться о том, чтобы за контент отвечал кто-то со стороны клиента.
Аудит существующего контента Аудит контента - это, по определению, анализ и оценка всех компонентов содержимого прежнего сайта (текстов, изображений и так далее), которые могут пригодиться при редизайне. Просмотр всего содержимого сайта кажется утомительным занятием, но в нем есть и увлекательный момент: это как переезд в новый дом, когда сортируются абсолютно все вещи, которые хранились много лет. Чтото вы снова оставляете, считая ценным, а что-то выбрасываете за ненадобностью. Избавление от большого количества старого, чуждого материала всегда немного возбуждает - как часть движения куда-то вперед и в обычной жизни, и в Сети.
Разбиение на разделы и организация Термин «формирование фрагментов» (chunking) - сугубо технический и говорит сам за себя. Разбейте все темы по смыслу. Яблоки с яблоками, апельсины с апельсинами..., а мандарины можно тоже с апельсинами. Это близко по смыслу, их можно совместить (если, конечно, сайт не специализируется на цитрусовых, а не просто на фруктах; в этом случае мандарин - уж точно не апельсин). При структурировании сайта всю информацию разбивают на большие порции (фрагменты), а каждый из фрагментов на еще более детальные фрагменты, создавая, в конечном счете, иерархическую структуру. Постепенно структура будет все более детализироваться. Внимательно изучив содержимое, вы почувствуете, как лучше распределить и организовать его. Воспринимайте контент как единое целое и начните его
фрагментирование. Представьте, что вытряхнули на пол целый ящик носков, которые необходимо разложить по местам. Сначала эта неразбериха ошеломпяет (и, возможно, немного смущает - зачем одному человеку так много носков). Однако это быстро проходит, и возникают идеи, как все это можно логически рассортировать. Вы начинаете разбирать носки, выбрасывая ненужные (дырявые, непарные). Заодно избавляетесь и от тех, которые никогда не носите, Закончив эту первичную сортировку, можно начать выделять более конкретные категории (или фрагменты): по цвету, размеру, стилю, модели и так далее. Объединение близких по смыслу тем вполне логично, но не увлекайтесь мелкотемьем. Излишний выбор может запутать пользователей. При возможности группируйте мелкие темы в подразделы.
I
I j |
136
Глава 4
Рис. 4.1. Образец документа Microsoft Word, иллюстрирующего методику аудита
Фаза 2: Разработка структуры сайта
137
Убедите клиента проанализировать содержимое текущего сайта во избежание его повторного использования, хотя это и не просто. Аудит контента может показаться таким неподъемным делом, что клиент будет готов оставить все как есть, лишь бы работы по проекту продолжались. В таком случае можно работать с новыми компонентами контента, а старые добавлять по мере готовности. Правда, такая лоскутная методика неконструктивна. Следует предупредить клиентов, отказывающихся от ревизии контента, что они рискуют оставить материалы, которые не будут соответствовать стилю и духу нового сайта, а в целом это препятствует новым организационным решениям и тормозит работы по визуальному проектированию, а иногда и по производству сайта. Отложить ревизию контента на потом, после запуска, тоже не выйдет: потом этим уже никто не займется. Всегда будут иметь приоритет новые заботы. В идеале еще до начала проекта клиент должен разобраться с существующим контентом и высказать свои пожелания о его полной переработке и/или частичном использовании старого контента при редизайне. Но если он этого не сделал, это еще не плохой клиент, а просто клиент, от которого нужно добиться немедленных действий. Это задача руководителя проекта - поторопить клиента. Ниже приведены некоторые аргументы, которые помогут убедить клиента в важности подготовки контента: • Существующий контент - это только часть проблемы. Ревизия контента не только удаляет ненужное, она помогает сократить долю не очень существенных материалов и максимально повысить объем информации, которая способствует брендингу компании и отвечает ее главным бизнес-целям. Считайте аудит контента его настройкой, благодаря которой сайт будет работать лучше. • В ходе аудита контента естественным образом происходит его организация. В конце работы содержимое уже будет сгруппировано по темам в электронной таблице или в нескольких стопках распечаток. Это большой предварительный шаг к разбиению на тематические разделы. • Ревизия контента - прекрасная возможность подготовить его для поставки по соглашению в проекте. Если какой-то раздел содержимого будет сохранен в новом сайте и не нуждается ни в каком редактировании, можно переместить его файл в каталог для материалов, готовых для поставки. (Аудит контента во время подготовки поставляемых материалов? Кто же откажется от возможности убить двух зайцев сразу.) В общем случае просмотр содержимого — задача клиента. Вероятно, ему потребуется помощь в этом, но только клиент может верно проанализировать текущий контент и решить, что следует изменить или добавить. Однако если редизайном сайта занимается внутренняя группа, то это ее задача. Не забудьте отразить это в бюджете.
138 Конфиденциальность Будете ли вы запрашивать у пользователей сайта их частные данные (например, номера кредитных карточек или контактную информацию)? Если так, то необходимо предусмотреть политику конфиденциальности. TRUSTe {wwwAruste.org) обеспечивает инструментальные средства, которые позволяют ввести политику конфиденциальности и ознакомить с ней посетителей, предлагая им обоснованную возможность доверять свою персональную информацию. Текст политики конфиденциальности - э т о контент. Надейтесь, что клиент предоставит его вам. Подготовка к расширению Не развивая чрезмерного аппетита, подумайте и рассмотрите, где и как перепроектированный сайт сможет расширять свою структуру. Какие разделы контента можно будет добавить и органично ли они войдут в создаваемые на данном этапе фрагменты? Имея дело с технологиями и отраслями промышленности, изменяющимися ежемесячно/еженедельно/ежедневно, невозможно точно запланировать, что произойдет за два или три года. Никто не ждет от вас предвидения будущего, но при группировании и каталогизации контента и обдумывании способов навигации оставьте возможность для логических изменений. Если вы предвидите добавление разделов контента в дальнейшем, продумайте сейчас, где они будут размещаться.
Глава 4
Структурирование контента К счастью, на этом этапе еще не требуется, чтобы содержимое было написано полностью, но оно должно быть определено в общих чертах, чтобы можно было всерьез начать структурирование. Вполне возможно, что клиент уже подготовил список с тематиками контента. Это просто удача. Проанализируйте этот список, поправьте, где нужно, и обсудите, как его лучше детализировать. Если же клиент и не приступал к этой работе, сделайте ему несколько предложений на выбор (например, попросите составить план содержимого или специально для этого нанять отдельного копирайтера), а затем установите крайний срок. Безо всяких идей по поводу контента невозможно далеко продвинуться с проектом. Если у клиента нет никаких идей или есть, но слишком туманные, или если проектом занимается внутренняя группа, тогда планировать и формировать контент придется ей. Постарайтесь представить будущий сайт в самом общем виде, с высоты птичьего полета, а затем увеличивайте масштаб, детализируйте и группируйте контент, представляя его в форме знакомого со школы плана, пронумерованного римскими цифрами. На этом этапе можно не особо задумываться, как будут обозначены эти разделы — именами или значками, которые видит пользователь. Это будет продумано при разработке карты сайта.
Создание плана поставки контента Готовы ли содержимое и структура для продолжения работы? Скорее всего, нет. Задержка контента - самая главная причина отставаний в проектах. (Близко следом идут технические трудности, ибо даже выпадающие меню DHTML иногда начинают работать на разных броузерах после третьего или четвертого пересмотра.) Примерно в 99% случаев контент запаздывает. Примите это. Готовьтесь к этому. Расплачивайтесь за это.
Фаза 2: Разработка структуры сайта
Нет всеохватывающего решения проблемы задержки контента, но можно предложить пару способов ускорить его поставку: • Нанять контент-менеджера. Убедите клиента нанять копирайтера или поручить кому-то из сотрудников (например, из маркетинговой группы клиента) контролировать, собирать, писать и поставлять контент. • Создать план поставки контента. Создайте для клиента полный и выполнимый график поставки контента. План поставки контента - документ, созданный руководителем проекта или контент-менеджером это схема сбора, написания и поставки контента (рис. 4.2). Это обеспечивает реалистичную разбивку контента на поставляемые порции, а не декларирует точную дату поставки сразу всех материалов, так как невозможно собрать все сразу, и в этом случае крайний срок вообще игнорируется. Клиенты часто слабо представляют, что у них уже готово и что они еще должны создать. Уточнение, что содержимое должно быть представлено в черновом и в окончательном варианте, поможет, но одно это все равно не решит проблемы. План поставки контента учитывает каждую страницу или раздел в поэтапном процессе поставки, включая существующий, обновляемый и новый контент. Помогите клиенту разбить контент на удобоваримые фрагменты, отмечая, что уже готово, что почти готово и что требуется создать заново. Если редизайн разбит на стадии, определите, что из содержимого можно пока отложить. Излагайте все подробно. План поставки контента следует составить после выбора иерархической структуры контента, но во время этапа создания карты сайта (обсуждаемого далее в этой главе) или даже позже. Последовательность поставки контента может соответствовать иерархии сайта или - что более дружественно по отношению к клиенту - может быть перечислена в порядке готовности содержимого. План по-
139
Сроки выполнения Установите для клиента незыблемые сроки окончательной поставки контента (безотлагательность помогает). Старайтесь, чтобы это было до начала фактического производства сайта (Фаза 4: Производство и контроль качества QA). Установите точный срок, однако для проектирования (и информационного и визуального) было бы чем скорее, тем лучше. Работа с заполнителем вместо контента может привести к неточностям, и при введении фактического контента дизайнерам придется наспех растягивать или ужимать его, чтобы уложиться в отведенное пространство. Или того хуже, контент может оказаться настолько отличным от ожидаемого, что потребуется серьезно изменять навигационную структуру.
140
Глава 4
Обновлено 4.08.99
Рис. 4.2. Образец плана поставки контента. Контент - это не только текст; в него входят маркетинговые материалы, логотипы, диаграммы, а также специфические данные, например МЕТА-информация, данные обработки TITLE-тегов, сообщения об ошибках и др. При необходимости поставки клиентом фотографий, иллюстраций или схем определите четкие сроки поставки для каждого компонента
Когда текстовые материалы готовы для Сети? Получение стопки брошюр и печатных копий годовых отчетов нельзя рассматривать как поставку контента. Есть два критерия, позволяющие считать полученные текстовые материалы готовыми к опубликованию в Сети. Во-первых, фактическая поставка материалов. Материалы, передаваемые клиентом проектной группе, должны поставляться в электронном виде в текстовом формате с понятными названиями файлов (соответствующими соглашению об именовании). Файлы могут быть в формате .rtf или .html. Иногда материалы могут быть посланы в теле сообщения электронной почты, но это не рекомендуется, так как некоторые почтовые программы уничтожают форматирование. Эти материалы должны быть окончательными. Следует четко объяснить клиенту, что это означает. Окончательные означает «не подлежащие изменению без соответствующего из-
менения графика работ и/или дополнительного финансирования». Вторым критерием оценки готовности текстовых материалов является их тональность. Веб-контент, как правило, менее формален и более дружественен, чем обычные корпоративные брошюры и документы. Напомните об этом клиенту, чтобы он не просто копировал подходящие материалы, а редактировал их. Готовая к опубликованию в Сети подборка материалов должна быть короткой и требовать как можно меньше прокрутки, кроме того, она должна содержать ссылки, которые будут вести к другим частям сайта. Однако некоторые клиенты при этом включают слишком много ссылок. Это тоже плохо - связей должно быть лишь несколько и они должны быть уместными; иначе по этим ссылкам «счастливые» пользователи быстро покинут страницу... и могут не найти пути назад.
Фаза 2: Разработка структуры сайта
ставки контента должен включать первичное содержимое (материалы для основных страниц, графику), вторичное содержимое (сообщения об ошибках, формы и ключевые слова, если они необходимы) и технический контент (МЕТА-теги, ALT-теги, TITLE-теги и так далее). Перечислите все максимально подробно, чтобы было понятно, что должно поставляться, когда и кто ответственный. Излагайте все четко и ясно. Начните с разбиения контента на основные разделы. Займитесь разделами, которые, по мнению клиента, наиболее готовы для Сети (то есть текстами или другими элементами, которые уже написаны и существуют в виде текстовых файлов). Убедитесь, что клиент понимает важность своевременной поставки для выдерживания сроков запуска сайта. Будьте требовательны в этом. Сотрудничайте с клиентом и контент-менеджером, чтобы создать план поставки, приемлемый для всех. Каждую неделю контент-менеджер (если он есть) должен пересматривать этот план, обновлять и рассылать его. Назначайте ответственных за каждый компонент содержимого: текстовые материалы, графика, иные данные. Имея такой план, есть шанс получить почти все содержимое, когда оно необходимо. На всякий случай учтите в производственном графике работ возможность задержки контента. И порадуйтесь, если он прибудет вовремя.
Создание карты сайта Мы были удивлены, узнав, как редко составление карты сайта фактически входит в процесс веб-разработки. На всех конференциях из года в год аудиторию спрашивают, создают ли они для своих проектов карту сайта. Из 800 участников лишь 20 или 30 поднимают руку. А при вопросе, кто использует программу для создания карты сайта, примерно половина этих рук опускается. Третий вопрос: «Кому из вас нравится используемая программа?» — заставляет всех опустить руки.
141
Опасность разбухания проекта Иногда клиенты, понимая, что не могут обеспечить часть контента вовремя, решают просто убрать эти разделы, считая, что так они еще и сэкономят деньги. Чаще всего это не так, особенно если эти разделы являются частью основной навигационной схемы. Клиенты должны понимать, что любое изменение масштаба и структуры - как добавление, так и удаление страниц - воздействует на процесс разработки, а значит, и на бюджет. Кроме того, под угрозой оказывается и навигационная структура, которая может стать неуклюжей и менее эффективной при удалении или добавлении блоков содержимого. Для ее восстановления потребовалось бы дополнительное визуальное проектирование, информационное проектирование и юзабилити-тестирование.
С ТОЧКИ ЗРЕНИЯ САЙТА > Создание карты сайта > Пересмотр текущей организации сайта > Установка соглашений об именовании
142
Глава 4
Это существенная деталь. К чему карта сайта? Почему она так важна? Карта сайта - хребет проекта (рис. 4.3, 4.4 и 4.5). Карта сайта отражает визуальное представление структуры сайта, организацию, положение и группировку контента и информации. Она связывает, она определяет и она структурирует. Она отображает весь проект: от общей перспективы до мельчайших деталей. Кто создает карту сайта? Поскольку очень немногие проекты могут позволить роскошь иметь отдельного информационного дизайнера, эта задача обычно выпадает на долю руководителя проекта, хотя иногда за нее берется даже клиент. Это серьезная задача. Для небольших сайтов, от 20 до 30 страниц, причем статических HTML, создать карту сайта вполне можно. Но для крупных сайтов с сотнями страниц и множеством функциональных возможностей это становится пугающим мероприятием. Сформированная карта сайта должна ясно показать все HTML-страницы в каждом разделе сайта: каждая страница отображается в виде прямоугольника, и показываются самые главные связи. Имейте в виду, однако, что карта сайта, о которой идет речь, - это и не техническая карта и не полнофункциональное представление сайта. Будь так, эта задача была бы еще более суровой, и нам бы следовало тогда платить еще за то, за что платят инженерам. Карта сайта - компонент, подлежащий сдаче. Создав ее, необходимо получить одобрение и подпись клиента. При любом изменении карты сайта следует снова получить одобрение и подпись. Следите, чтобы карта была всегда доступной и обновленной в соответствии с изменениями структуры сайта независимо от того, насколько трудоемка эта задача. (Подсказка: заложите время на модификацию карты сайта в бюджет информационного дизайна.) Своевременное обнов-
Рис. 4.3. Пример карты сайта, построенной в формате сверху вниз
Фаза 2: Разработка структуры сайта
143
Рис, 4,4, Пример карты сайта, построенной в формате слева направо с разделением на категории. На карте приведены также условные обозначения для различных типов контента
Puc. 4.5. Предоставленный клиентом набросок, который послужил основой карты сайта, показанной на рис. 4.4. Он был получен по факсу с минимальными пояснениями
144
Делайте карту простой Карта сайта должна как можно подробнее показывать взаимосвязи между страницами. Делайте ее понятной; включайте только то, что действительно необходимо. Например, ссылки (из одного раздела к другим разделам сайта или вообще к другим сайтам) зачастую не показывают на схеме. Степень детализации зависит от сложности сайта. Некоторые укладывают карту сайта в размер стандартного листа бумаги, а другие изображают ее во всю стену конференц-зала. Вряд ли стоит отображать каждую из 2000 страниц сайта, если есть возможность иным способом представить то, что требуется. Есть хорошее эмпирическое правило: если все страницы раздела имеют подобное содержимое и не требуют уникального интерфейса, навигации или особых функциональных возможностей, то для простоты их можно представить на карте сайта как один элемент (рис. 4.6).
Рис. 4.6. Сгруппированные разделы представляют собой подобные страницы
Глава 4
ление карты сайта важно для ее достоверности, поскольку она будет использоваться как справочный документ. Дизайнеры производства HTML и разработчики контента используют карту сайта для оценки прогресса в своей работе. Одно это - уже достаточная причина.
Пересмотр текущей организации сайта Хорошо, если на старом сайте произведен юзер-теетинг или получены отзывы пользователей в той или иной форме. В этом случае анализ организации старого сайта (что работает, что не работает и как это касается целей редизайна) будет полезным шагом перед началом серьезной организации перепроектируемого сайта. Здесь может помочь создание карты старого сайта. Этот шаг отнимает много времени, поэтому он рекомендуется только как расширение Базового процесса и если позволяют время и ресурсы. Вполне возможно, что у клиента есть карта сайта, которой можно воспользоваться. Если нет, то ее создание поможет лучше понять существующий сайт. С помощью этой карты попробуйте определить, можно ли оставить текущую структуру контента, будет ли она отвечать целям редизайна, а если нужны изменения, то какие? Возможно, добавится магазин или произойдет слияние компаний. Поддержит ли текущая организация информации эти изменения? Если нет (и скорее всего нет), то что следует изменить? Используйте логику. Нужно предугадать интуицию пользователей и стратегически применить ее. Если организация информации на текущем сайте нелогична, подумайте, как это исправить. Помните, что не будет руководства по навигации на вашем веб-сайте... да если бы и было, его бы никто не читал.
Фаза 2: Разработка структуры сайта
145
Определение структуры сайта Обычно сайты проектируют и структурируют в иерархическом стиле (рис. 4.7). Если предусматривается динамическое содержимое (обычно для крупных, сложных сайтов), добавьте разделы или «контейнеры для контента» и также укажите их на схеме сайта (рис. 4.8). Начальную страницу поместите вверху, затем основные страницы, а за ними - вторичные. Очень просто. Имейте в виду, что существуют различные подходы к созданию карты сайта и среди них нет лучшего. Одним кажется более осмысленным размещение карты в формате сверху вниз, другим - слева направо. При формировании карты учтите ее дальнейшее развитие. Скорее всего, структура перепроектированного сайта не будет точно соответствовать первоначально созданной схеме, но, тем не менее, она дает общее представление. Для начала можно взять за основу иерархическую схему контента и изобразить ее на бумаге. Имея визуальное представление, начните обдумывать организационные аспекты. Должны ли быть связаны какие-то из основных страниц? Должен ли быть переход с вторичных страниц на страницы основного уровня? Не будет ли логичнее сгруппировать страницы по-другому? Старайтесь рассуждать с позиции пользователей.
Рис. 4.7. Карта сайта в простом иерархическом стиле
Рис. 4.8. Данный стиль карты сайта иллюстрирует, как содержимое базы данных (представленное прямоугольником) по запросу пользователя передается в выделенные для него области (представленные цилиндрами). Контейнеры для вывода содержимого встроены в HTML-страницы
Глава 4
146
Опять этот ужасный внутренний интерфейс Создание карты сайта - момент, где соприкасаются и внешние и внутренние технологии. Чтобы показать основные функциональные возможности и те компоненты внутренней структуры, с которыми взаимодействует пользователь (например, вход в систему, транзакции е-коммерции, поиск, регистрация и так далее), можно достаточно просто отобразить эти взаимодействия. Какие бы формы ни использовались для этого, они должны быть согласованы с информационным дизайнером и техническим специалистом. Не забывайте, что схема отражает только потоки информации, а не техническую реализацию и детали функционирования. Например, если речь идет о входе в систему, на схеме следует только указать точку, где происходит регистрация пользователей. Здесь не требуется раскрывать подробности внутренней проверки, связанные с этой операцией (рис. 4.9). Детализация не с технической, а с функциональной точки зрения (то есть сценарии отказов на вход в систему) зависит от опыта информационного дизайнера и его взаимодействия с технической группой. Обсудите карту сайта с техническими специалистами. Их одобрение будет свидетельствовать о правильном понимании вами структуры сайта под углом зрения пользователей.
Рис. 4.9. Фрагмент карты сайта, показывающий страницу, на которой пользователь может видеть точку взаимодействия с внутренним интерфейсом (в данном случае точку входа в систему)
Установка соглашений об именовании Установка стандартов для именования файлов на фазе структурирования поможет организовать основные разделы сайта, а это в свою очередь облегчит работу всех членов проектной группы и клиента на весь период Базового процесса. Принятие соглашений об именовании — простой, но очень важный шаг при создании карты сайта. «Простой» - значит прямой и понятный. Он не требует никаких официальных вердиктов. Для него не существует никаких «правильных способов»; каждая группа и каждый отдельный проектировщик имеют собственные предпочтения. Информационный дизайнер должен выяснить их, обсудить с дизайнерами производства, принять решение и довести его до общего сведения. Называя этот шаг важным, авторы стремились подчеркнуть то, что принятие соглашений об именовании сделает работу над проектом более организованной.
Фаза 2: Разработка структуры сайта
147
Программы для создания карты сайта Удивительно (и обидно), что существует очень небогатый выбор программ - и еще меньший выбор хороших программ - для создания карты сайта. Создание или переработка карты сайта - не большая хитрость; это задача, которая отнимает много времени и очень трудоемка из-за множества деталей, которые требуется отобразить. Можно порекомен-
довать две хорошие программы для создания карты сайта: Inspiration (www.inspiration.com) (рис. 4.10) и Vislo (www.microsoft.com/office/visio). Многие все еще используют векторные программы, подобные FreeHand или Illustrator. Создание схем, к сожалению, пока остается кропотливым и трудоемким процессом.
Рис. 4,10. Пример создания карты сайта с использованием программы Inspiration. Эта программа не решает всех проблем, но она облегчает работу по созданию и модифицированию карты сайта
На всем протяжении работ от организации контента до производства HTML эти соглашения будут служить ключом, помогающим всем участникам проекта легко находить необходимую справочную информацию. Без установленных стандартов каждый сотрудник будет давать файлам случайные, произвольные имена, которые придут ему в голову, и возникнет полная неразбериха. Вероятнее всего, на текущем сайте уже действует соглашение об именах, удачное или не очень. Обсудите с клиентом, хотят ли они придерживаться существующего соглашения об именовании или принять новое. Следует обдумать два типа соглашений: организационно-числовые наименования и HTML-наименования. Карта сайта должна содержать оба типа имен, а если она содержит только одно, то следует привести на ней информацию, которая облегчит понимание другого соглашения об именах.
Глава 4
148
Советы относительно HTML-наименований Во-первых, не забывайте, что Сеть больше не ограничена правилом «восемь-точка-три». Если это правило вам не знакомо2, не переживайте. Во-вторых, помните, что и .html и .htm работают; это одно и то же. Выберите любое из этих расширений и придерживайтесь его. Наконец, будьте логичны. Скорее всего, над сайтом будете работать не вы одни. Установите простые и понятные соглашения о названиях. Для сложных сайтов с динамическим содержимым это становится особенно важным. Если содержимое определяется датой, укажите в названии дату. Конкретное изделие? Используйте название изделия. Все должно быть логично и ясно. Поиск файла не должен требовать привлечения ищеек.
2
Имеются в виду короткие имена файлов в MS DOS, состоящие из восьми символов имени и трех символов расшире-
ния, - Примеч. науч. ред.
Организационные наименования В организационном способе присвоения имен страницам и разделам карты сайта - просто используют числовые или алфавитно-цифровые стандарты. Дайте начальной странице номер 0.0 (это базовая страница). Первичные разделы под начальной страницей обозначьте как 1.0, 2.0, 3.0 и так далее. Подразделы в каждом первичном разделе обозначьте как 1.1, 1.2, 1.3 и так далее. См. схему ниже. Числовую организационную иерархию можно применять к контенту (текстовым файлам и изображениям). Это поможет легко идентифицировать местонахождение данного фрагмента содержимого. Недостаток такого способа наименований заключается в том, что под рукой необходимо иметь копию схемы карты для справки, поскольку этот стиль обозначений не интуитивен, а нумерация страниц может быть изменена со временем.
Фаза 2: Разработка структуры сайта
149
Наименования HTML Способов наименования HTML, наверное, столько же, сколько дизайнеров HTML. Одни любят аббревиатуры и объединение слов, другие для систематизации используют верхний и нижний регистры, третьи игнорируют все стандарты и аббревиатуры и придумывают что-то свое. Для примера мы попросили трех дизайнеров производства от трех различных групп придумать названия для биографической страницы вымышленной компании. Они предложили следующее: aboutthecompany.html about_company.html co_info.html Любое из них приемлемо ~ просто нужна последовательность и согласованность. Избегайте произвольных названий файлов. Выберите стандарт и придерживайтесь его. Если стандартные названия для статических страниц HTML установлены, есть шанс, что сайт уже неплохо организован и структурирован. При редизайне существующие на сайте соглашения об именовании и терминологии должны быть проанализированы, уточнены и либо приняты для использования, либо заменены новыми.
Создание макета Сама по себе работа с макетами (wireframes) для сайта сродни копанию в бумагах. Называемые также каркасами, схемами или планами страниц, они не отражают детали эстетического оформления (форму кнопок или цвета); они имеют отношение только к информации основных страниц, показывая сырую навигацию, положение текстов, графики, ключевые заголовки и любые другие элементы, которые должны находиться на странице. Макеты отображают некоторую иерархию информации, но не диктуют точно форму и место ее представления.
С ТОЧКИ ЗРЕНИЯ СТРАНИЦЫ > > > >
Создание макета Обеспечение навигации Именование и маркировка Определение основных маршрутов пользователей
150
Глава 4
Макеты помогают говорить. Они помогают выразить идеи и являются основой для визуального дизайна и производства HTML. Настоятельно рекомендуется создать макеты для всех основных, вторичных и шаблонизированных страниц (имеющих схожее содержимое, расположение и компоновку), а также для всех страниц с уникальными функциональными возможностями. Страницы третьего и четвертого уровней обычно текстовые, поэтому для них макеты зачастую бывают не нужны. Хотя создание макетов порой может казаться утомительным (особенно после их второго или третьего пересмотра), однако время, потраченное на этой стадии, обеспечит более гладкое протекание работ по дизайну и производству сайта.
Содержимое макета Макеты отражают только информацию; они не включают визуальный дизайн. Макет может быть простым (рис. 4.11 и 4.12), показывая только компоновку содержимого и навигацию по нескольким основным страницам сайта. Сложные макеты показывают тексты, некоторые функциональные возможности, ссылки, навигацию и графическое содержимое в более детальной форме (рис. 4.13). Макеты отражают больше, чем просто свое содержимое. Они могут показывать также производственные спецификации и основные функциональные возможности (DHTML, JavaScript и так далее). Макеты должны включать все основные компоненты - контент, навигацию, функциональные элементы и сообщения, которые предназначены для этой страницы. На этом этапе очень помогло бы приблизительное знание контента (то есть знание размеров текста, изображений и их расположение). Задача информационного дизайнера - разработать все это в подробностях. Для облегчения задачи создания макетов воспользуйтесь следующим контрольным списком: • Изображения/чертежи/иллюстрации • Контент (общее направление содержимого или фактический текст, если он готов) • Заголовок или глобальная навигация (навигационная панель или общие элементы, которые появляются на каждой странице) • Функциональные возможности (описание основных функциональных возможностей страницы) • Первичные ссылки (предполагаемая навигация) • Вторичные ссылки • Мультимедиа (если есть) • Целевой размер окна (например, 800x600; фактически очертите область и укажите размеры в пикселах)
Фаза 2: Разработка структуры сайта
151
Рис. 4.11. На этом простом макете представлен типичный формат основного содержимого и навигации. Приблизительно размеченные области дают общее представление о типе и размещении содержимого
Рис. 4.12. Этот простой макет - фактически шаблон, содержащий особые метки для целевого размера экрана, а также указатели для логотипа, содержимого, навигации и некоторых основных функциональных возможностей над и под сгибом
152
Глава 4
• Данные для заголовка и подвала (название проекта, название страницы, номер версии, дата, автор, авторское право) Начните с начала: с начальной страницы. Кроме того, решите, сколько еще макетов страниц позволит сделать бюджет и ресурсы группы. Набор макетов может состоять из 5, 50 или 200 страниц, в зависимости от бюджета и способностей создателя макетов, а также требований проекта. Рекомендуется сделать макет, по крайней мере, начальной страницы и всех основных страниц. Если имеются важные вторичные страницы, особенно если они построены по схеме, которая повторяется во многих страницах, рекомендуется создать и их макет. Добавьте к каждой странице детали, выявляя особые функциональные потребности (например, выпадающее меню или динамически генерируемую навигацию (rollover navigation)) и определяя ссылки, графику и другую информацию. Если имеется окончательный текст, обязательно используйте его; но обычно в макетах вместо текста используется заполнитель, которым служат закрашенные серым прямоугольники, простые строки или грикинг (бессмысленный текст, в качестве которого почему-то3 почти всегда берут латинский текст Lorem Ipsum). Независимо от типа заполнитель должен правильно показывать размер реального текста на странице.
Puc. 4.13. Информация представлена очень специфически. Включены названия, маркировка, заполнители содержимого и тексты. Обычно так делают, когда содержимое и навигация уже хорошо отработаны
В качестве заполнителя западными дизайнерами используется кусок латинского текста из философского трактата Цицерона «О пределах добра и зла», написанного в 45 г. до н. э. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником в XVI веке. Он начинается со слов: «Lorem ipsum dolor sit amet, consectetuer adipiscing elit...». - Примеч. науч. ред.
Фаза 2: Разработка структуры сайта
Обеспечение навигации Руководителям проекта следует знать о тенденции полагаться на навигацию старого сайта. Очень часто редизайн предпринимается потому, что пользователи не могут попасть в требуемое место, и это ошибки навигации. Определите, можно ли улучшить навигацию. Испробуйте разные методы организации контента. Есть много различных подходов к навигации; все они служат тому, чтобы направить пользователей к желательному действию или через него. Существуют четыре основные навигационные модели: направленная, поисковая, последовательная навигация и навигация с вкладками, хотя следует отметить, что большинство сайтов использует комбинацию из двух и более моделей (рис. 4.14-4.17).
Именование и маркировка Четкая система именований не только ясно определяет контент сайта, она также определяет атмосферу вокруг компании. Маркировка категорий в навигации по сайту свидетельствует о том, каким образом сайт собирается общаться с аудиторией. Именования на всем сайте должны быть последовательными и согласованными. Слова и обозначения, а не дорожные знаки, помогают найти здесь нужный путь. Важна тональность. Манера именования или обозначения кнопок, иконок и навигационных элементов много говорит о самой компании и ее отношении к сайту и аудитории. Вспомните цели сайта. Какой подход требуется клиенту? Дружественный и доступный или сугубо профессиональный и, насколько возможно, солидный и надежный (рис. 4.18)?
153
Поддерживайте ощущение текущего местонахождения Не вызывайте у пользователей головокружения. При переходе от страницы к странице пользователи должны чувствовать себя комфортно, понимая, где они находятся. Могут ли они вернуться назад на начальную страницу? На то место, откуда они начали выполнять задачу? Возвращает ли пользователя кнопка «Назад» (Back) к предыдущему экрану? (Иногда это становится проблемой при использовании маркеров для управления сеансом.) Сыграйте роль пользователя и опробуйте навигацию. Не чувствуете ли себя заблудившимися в перепроектированном сайте?
154
Глава 4
Навигационные модели
Puc. 4.14. Направленная навигация вынуждает сделать выбор сразу на входе. Эта навигационная модель обычно используется, чтобы разделить аудиторию по соответствующим ее интересам разделам содержимого сайта. В случае www.bananarepublic.com это разделы для мужчин, для женщин, обувь и подарки
Puc, 4.15. Поисковая навигация используется, прежде всего, на поисковых или информационных сайтах, в которых лучшим способом перемещения к желаемому контенту являются ключевые слова. Здесь показан сайт www.google.com
Фаза 2: Разработка структуры сайта
155
Навигационные модели
Рм-с. 4.16. Навигация с вкладками предлагает пользователю информацию, а не заставляет искать ее. Напоминающая бумажные папки с разделителями, знакомые каждому, эта навигационная модель позволяет легко разобраться в строго классифицированной информации, как показано здесь на примере сайта www.cooking.com
Рис. 4.17. Последовательная навигация ведет пользователя по однозначному, предопределенному пути. В основной навигации эта модель встречается редко, но ее можно увидеть в местах с последовательностью папок или при просмотре слайдов с помощью кнопок Следующий/ Предыдущий (Next /Previous) или Вперед/Назад (Forward /Back). Здесь показан сайт с фотографиями Адама Мура (Adam Moore) (www.adammoore.com)
156
Глава 4
Рис. 4.18. Взгляните на сайты www.etrade.com и www.mydiscountbroker.com. Первый встречает менее вольными, деловитыми входом в систему («login» ) и перечнем услуг («Customer Services»), в то время как My Discount Broker дружелюбно приглашает в банк («ту bank»), предлагает поиск в базе данных («My DB» ) и так далее. (Упомянутые особенности на рисунке обведены)
Фаза 2: Разработка структуры сайта
157
Определение основных маршрутов пользователей
Выбирайте пути наименьшего сопротивления
Создание интерактивных макетов - хороший способ проверить взаимодействие страниц между собой. Можно сделать страницы информационно насыщенными, но если каждая страница не будет логически перетекать в следующую, то сайт не будет легким в использовании. Завершив формирование облика сайта (созданием карты сайта), компоновку страниц (созданием их макетов) и определив размещение содержимого, можно перейти к следующему шагу и продумать маршруты пользователей на сайте. Назовите это «бумажными прототипами» или «интерактивными макетами» - это одно и то же: проверка основных перемещений («щелчков мышью») по сайту на бумаге вместо HTML. Более подробное описание «HTML для прощелкивания» (HTML click-thru) (или протосайта, как он назван в книге) см. в описании фазы 3: Визуальное оформление и тестирование. Но что касается маршрутов пользователей, обеспечьте их на стадии создания макетов.
Желая, чтобы пользователи выполняли определенную задачу, например регистрацию или совершение покупок, не вынуждайте их проходить через дюжину и более страниц. Излишнее количество заполняемых форм и полей, пусть важных для маркетингового отдела (например, возраст, доход и семейное положение), вызывает у пользователей раздражение и может заставить их отказаться от задуманного. Интерактивное моделирование при определении пользовательских маршрутов - прекрасный способ анализа и выбора решения. Нет ли возможности объединить некоторые шаги, чтобы регистрация требовала только три или четыре экрана? Это было бы менее утомительно и повысило бы количество пользователей, завершающих эту задачу.
Проверка на бумажных прототипах Одним из самых простых и наименее формальных методов быстрого выяснения достоверного мнения пользователей является проверка на бумажных прототипах. Это могут быть схемы сайта, начерченные на бумаге вручную, или макеты страниц, подготовленные на данной фазе процесса или быстро созданные с использованием программы WYSIWYG HTML. В Интернете можно найти много сведений о том, как использовать бумажные прототипы для тестирования сайта, и все «за и против» этого способа проверки. Бумажные прототипы должны как можно ближе имитировать весь сайт. Ведущий демонстрирует участни-
кам тестирования ряд типовых задач, последовательно вынимая из пачки листы с соответствующими «экранами». Хотя подготовка моделей довольно трудоемка и занимает немало времени, это приносит определенную пользу. Модели позволяют выявить и устранить некоторые недостатки в самом начале, не внося их в практические разработки. Изменения в бумажных прототипах можно сделать быстро - даже во время испытания, - и разработчики смогут сразу отреагировать на выявленные недостатки. Инструментальные средства для моделирования на бумаге можно бесплатно загрузить на www.infode-
sign. com.au/usability/paperprototypinggraphics. html.
158
Глава 4
Если от пользователя не требуется фактического выполнения особых задач (например, заполнения форм, входа в систему или совершения покупок), то нет необходимости выяснять маршруты пользователей. Это определенно является частью Базового процесса, но только для сайтов, которые в этом нуждаются: для сайтов, имеющих задачи, которые требуют последовательно связанных страниц. Какого типа эти задачи? Поскольку цель моделирования состоит в проверке конкретных задач, которые типичный пользователь выполнял бы при посещении сайта, следует внимательно изучить профили пользователей и создать пользовательские сценарии: конкретные ситуации, в которых реальные пользователи могли бы оказаться на сайте. Такие ситуации почти всегда включают задачи, требующие несколько последовательных шагов (и страниц): регистрация, заказ, поиск и так далее. Моделирование от начала задачи до ее завершения предоставляет еще одну возможность взглянуть на сайт с позиции пользователя. Кроме того, если запланировано юзабилити-тестирование, такое моделирование позволяет провести его уже на этой ранней стадии. Существует ряд типовых задач: • Заказ доставки цветов ко Дню Матери. • Заполнение и подача онлайновой заявки на получение ссуды. • Поиск и заказ запасных батареек для сотового телефона. • Покупка домика для птичек, кошечек или собачек. Определите главные пути перемещения или действия пользователей на сайте (обычно это основные действия, которые были определены клиентом при заполнении опросного листа). Наметьте экраны, необходимые для того, чтобы добраться из пункта А в пункт В. Эти маршруты (обычно последовательные) ведут посетителя через ряд определенных шагов (обычно включающих заполнение форм) к их конечной цели. Эти шаги могут быть простыми («Оставьте ваши комментарии») или более сложными (предварительная онлайновая заявка на ссуду для покупки автомобиля). Маршруты следует моделировать по двум причинам. Во-первых, это позволит выявить недостающие экраны, которые были упущены при создании макетов. Во-вторых, что более важно, это даст возможность проследить, как один экран связан со следующим экраном, вместо того чтобы все время работать только с одной страницей. Есть два основных типа пользовательских маршрутов: функциональные и нефункциональные. Нефункциональные служат для типичных задач, которые не требуют особых технических возможностей (например, оставить сообщение для компании, найти адрес магазина, прочитать биографические данные президента компании и так далее). Это просто потоки последовательных страниц с нужной информацией. Функциональные пути затрагивают спецификации, определяемые технической группой (для покупательских корзин, выборки данных, входа в систему с паро-
Фаза 2: Разработка структуры сайта
159
лем, сложных поисковых механизмов и так далее). Они передаются разработчикам внешнего интерфейса с уже готовой основной функциональностью. Заранее установлена только их функциональность, хотя внешний дизайн (наименования, маркировка, наличие кнопок или текстовых гиперссылок, заполняемые формы, использование графики либо HTML для страниц) еще не завершен. Он может быть продуман на данной фазе, в ходе создания макетов и уточнения пользовательских маршрутов. Понятно, что время и ресурсы диктуют свое. Если определением пользовательских маршрутов придется пожертвовать, учтите, что даже минимальное рассмотрение их на этой стадии полезно как для проектирования, так и для дизайна. Кроме того, уточнение пользовательских задач поможет клиенту лучше понять последовательность действий пользователей. По крайней мере, возьмите подготовленные макеты и «прощелкайте» страницу за страницей, переходя к соответствующему макету. Имейте также в виду, что для любого сайта, сложного или простого, даже если имеется несколько способов достижения конкретной страницы, которая является конечной точкой пользовательского маршрута, необязательно формировать абсолютно все страницы, достаточно только страниц на данном маршруте. И не требуется исследовать все возможные пути, а только основные. Здесь нет призыва к излишней работе - делайте необходимое. Жизнь слишком коротка, бюджеты очень ограничены. Если требуются сложные функциональные возможности и нужно контактировать с техническими специалистами для установления работающих пользовательских маршрутов и спецификации функциональности, то это является задачей отдельной технологии, которая упоминалась в начале книги. Просто имейте в виду, что данная стадия Базового процесса - точка пересечения этих двух технологий.
Пользовательские сценарии Сценарии - это ситуации. Профилирование пользователей (на предыдущей фазе) дает демографические сведения, персонализируя пользователя и придавая его образу «реальность». Пользовательский сценарий расширяет профилирование пользователя, помещая этот «реальный» образ в реальную ситуацию на сайте (рис. 4.19). Предугадывайте побуждения и конкретные ситуации на сайте для целевого пользователя (или пользователей, если предполагается несколько типов целевых групп). Какие ситуации в он- и оффлайне и какие задачи типичны для ваших пользователей? Войдите в роль пользователя. Кто вы и зачем пришли на этот сайт? Создание различных сценариев для сайта охватит несколько возможных задач, каждая из которых поведет пользователя различными путями. Исследуйте эти типовые маршруты. Если они слишком сложны, не откажется ли пользователь
160
Глава 4
от данной задачи? Типовые ситуации не должны быть сложными, но должны быть достоверными - характерными для реальных людей, пытающихся делать реальные вещи. В любых обстоятельствах важно понимать позицию пользователя, его задачу, и ситуацию, чтобы верно оценить хороший маршрут и не заставить пользователя бессмысленно блуждать по сайту. Если пользователи не найдут то, что они ищут, и покинут сайт, то клиент не получит выгоды.
Пэйдж Мак-Кормик (Paige McCormick): Пользовательский сценарий для www.petco.com Пэйдж балует свою собаку. Будучи заботливой хозяйкой, она хорошо знает онлайновые зоомагазины. Сейчас ее любимый магазин - WWW.PETC0.COM, откуда ей ежемесячно поставляют питание для собаки; к тому же, там есть прекрасный выбор кожаных поводков и намордников. Так как Руги, ее собака, довольно сильно изодрала и растащила свою подушку, от которой остался только кусочек холста и пуха, сегодня Пэйдж решила купить для нее новую подстилку.
Пэйдж Мак-Коржик Она заходит на www.petco.com. Там она выбирает раздел для собак, щелкая мыш(Paige McCormick) кой по значку с изображением веселой собачки под заголовком «Начать покупки» (Go Shopping). В разделе товаров для собак она использует раскрывающееся древовидное меню, чтобы перейти в секцию «Подстилки» (Cuddler Beds). Просмотрев имеющиеся пять или шесть вариантов, она нажимает кнопку «Параметры товара» (Product Options) у выбранной ею синей подстилки с названием Bed Buddies Lounger. Здесь она узнает, что чехол нелиняющий и не страдает от машинной стирки и что подстилка имеет мягкую прокладку из искусственного меха. Пэйдж считает, что Руги это должно понравиться (к тому же, ее приятно удивил ассортимент подстилок), и нажимает кнопку «Добавить в корзину» (Add to Cart). Ее просят войти в систему или зарегистрироваться как новый пользователь. Будучи постоянным пользователем сайта, она вводит свой адрес электронной почты и пароль. После этого она просматривает информацию о доставке и способе оплаты, сопровождаемую сохраненными там данными ее кредитной карточки. Убедившись, что все правильно, она нажимает кнопку «Сделать онлайновый заказ» (Place Order Online), завершая тем самым сделку.
Рис. 4.19. Этот образец сценария подробно описывает типичную пользовательскую задачу. На рис. 4.20а - 4.20з показан маршрут пользователя для этого сценария. Профиль пользователя Пэйдж Мак-Кормик описан в фазе 1 (рис. 3.1)
Фаза 2: Разработка структуры сайта
Рис. 4.20а. Маршрут Пэйдж на сайте www.petco.com, описанный в рис. 4.19
Puc. 4.206
161
162
Рис. 4.20в
Рис. 4.20г
Глава 4
Фаза 2: Разработка структуры сайта
Рис. 4.200
Puc. 4.20e
163
164
Глава 4
Puc. 4.20Ж
Рис. 4.20з
Резюме фазы 2 Структурирование сайта для перепроектирования - тот этап Базового процесса, на котором выясняются проблемы (такие как несоответствие старой структуры новому контенту) и определяются способы их решения (как будет происходить разбиение информации по разделам). Фаза 2 отвечает на конкретные во-
Фаза 2: Разработка структуры сайта
165
просы: как будет организована вся структура? (Ответом служит карта сайта.) Что войдет в каждую страницу? (Ответ - макеты страниц.) Как страницы взаимосвязаны друг с другом? (Ответ - интерактивные модели.) Информационный дизайн - критическая стадия любого веб-проекта. Многие совершают типичную ошибку, пытаясь при редизайне сайта просто приспособить информацию, дизайн и контент старого сайта и, по существу, пропустить этот шаг. Хотелось бы надеяться, что эта глава изменит такое отношение. Уделите время для структурирования сайта, особенно для создания карты сайта и макетов - наиболее трудоемких и отнимающих время задач редизайна. Однако это время не будет потрачено даром, потому что хорошо определив структуру сайта и его контент, проектная группа может уверенно приступать к визуальному дизайну. Веб-проекты часто начинают с разработки визуального графического пользовательского интерфейса, не произведя предварительно информационного проектирования. Это неправильная последовательность, почти всегда приводящая к неэффективному использованию ресурсов дизайна. Почему? Исправления на графическом уровне всегда занимают больше времени, чем те же изменения на уровне макетов. Планирование и стратегия всегда заслуживают внимания. Именно поэтому структурирование сайта охватывает все вопросы контента и информационной стратегии: какую информацию где и как разместить, чтобы пользователи могли получить и получали бы доступ к ней. Без такой стратегии визуальное проектирование становится просто авантюрой. Наличие в проектной группе отдельного информационного проектировщика сейчас еще редкость, хотя все больше групп признают необходимость этого. Часто эта роль выпадает руководителю проекта или арт-директору. Независимо от того, кто ее исполняет, подробное планирование задач организации контента, создание карты сайта и макетов страниц всегда служит хорошим путеводителем для дальнейших этапов визуального дизайна и производства сайта.
166
Учебный пример
К2 Skates Клиент: К2 Skates URL: www.k2skates.com Проектная фирма (Первый редизайн): Werkhaus Design, Сиэттл Креативный директор: Джон Бургесс (John Burgess) Арт-директор: Джулия Посс (Julie Poth) Дизайнеры: Мэт Куанн (Matt Quann), Тереза Форрестер (Teresa Forrester), Кристина Стейн (Christina Stein)
Проектная фирма (Второй редизайн): внутрен-
няя группа К2 Продюсер в К2: Али Вайз (АН Wise) Арт-директор: Дэн Колавито (Dan Colavito) Технические разработки: Стив Карр (Steve Кагг) и Джереми Фишер (Jeremy Fisher) (Nochturner Communications) ПРЕДЫДУЩИЙ
K2SKATES.COM [ПРЕЖНИЙ] не отражал технические преимущества выпускаемых коньков.
Учебный пример
167
К2, ведущий изготовитель роликовых коньков и аксессуаров, оказывающий поддержку культуры и спорта сообщества роллеров. Эта философия отражена в атмосфере и содержании бренда компании.
СОВРЕМЕННЫЙ
Slipping into the lightest skate on the market will have a similar effect on the weight of the world
K2SKATES.COM [ПЕРВЫЙ РЕДИЗАЙН] был основан полностью на Flash-технологии в предположении, что анимация лучше передает динамический характер изделий. Хотя сайт был хорош в маркетинговом плане и получил несколько наград за дизайн, он не вполне отвечал потребностям пользователей. (2000 г.)
K2SKATES.COM [ВТОРОЙ РЕДИЗАЙН] разработан внутренней проектной группой. Было уменьшено количество Flash-элементов, чтобы оптимизировать время загрузки, улучшить навигацию и обеспечить легкий для обновления журнальный стиль, который включает много интересной графики и других материалов, связанных с образом жизни людей. (2001 г.) Результат: Счастливые посетители.
См. цветную вклейку, стр. 346-347
Фаза 3: Визуальное оформление и тестирование
С" w
Проектирование для пользователя заставляет поднять креативный потенциал дизайнеров на новый уровень решения задач, требующий сочетания практического и творческого мышления.
Фаза 3: Визуальное оформление и тестирование Бесспорно, главное в сегодняшней Сети — доступность пользователю. Проектирование для Сети означает создание двумерных, на первый взгляд, отображений, как при печати, однако их глубинный характер заключается во взаимосвязанности и многоелойности информации. Это делает веб-дизайн во многом подобным промышленному дизайну, прикладной науке о дизайне вещей, которые реально используются (например, лучшее крепление для сноуборда, более удобный штопор или новейший самопросеивающий кошачий туалет). Веб-сайт - тоже изделие, и оно используется. Еще недавно процесс дизайна выглядел так: о дин-два человека продумывали, разрабатывали и реализовывали свои идеи, вручную создавая макеты, по которым готовили печатную продукцию. Потом возникла Сеть. Теперь дизайном занимаются организованные группы, и их работа больше, чем когда-либо, требует высокого уровня взаимодействия и ориентированности на пользователя, а также тщательного планирования рабочего процесса, чему прежде не уделяли особого внимания. Ввиду того что веб-дизайн во многом базируется на техни-
Фаза 3: Визуальное оформление и тестирование
ческих элементах, дизайнеры не могут просто выдумывать абстрактные концепции, не привязывая их к существующим технологиям. Следует учесть, что подавляющее большинство людей, работающих над веб-сайтами, не имеет специальной дизайнерской подготовки - многие из них являются техническими или маркетинговыми специалистами, которые были брошены на эту задачу. Сегодня дизайном занимаются вынужденно: наиболее опытные веб-дизайнеры переквалифицировались, придя из издательского дела, другие приходят прямо со школьной скамьи - рынок специалистов по веб-дизайну еще не устоялся. Сейчас время совмещения профессий и неопределенности. Сейчас как когда бы то ни было необходимо балансировать между ограничениями, которые накладывает Сеть, и насущной потребностью проявить блестящий творческий потенциал. Хотя нынешние технические ограничения могут существенно измениться в будущем (как скоро - можно только гадать), действительность пока накладывает довольно жесткие рамки, которые должны учитываться на всех стадиях веб-разработки - особенно, или даже преимущественно, на этапе создания визуального дизайна. В этой фазе процесс разбивается на два параллельных направления: пока визуальные дизайнеры создают креативный образ сайта и прорабатывают идеи его интерфейса, дизайнеры производства должны проверить функциональные возможности, которые потребуются для их реализации. Означает ли это, что сам визуальный дизайн обходится без тестирования? Конечно, нет: предположения должны проверяться на каждой стадии, чтобы можно было уверенно двигаться дальше и не столкнуться с тем, что обнаружатся серьезные проблемы уже после окончательного одобрения клиентом. А как быть с контентом и навигацией? На бумажных макетах все выглядит работающим, а как будет в среде HTML? Для этого рекомендуется сформировать протосайт, называемый также «HTML для прощелкивания» (HTML click-thru).
171
Дарите дизайнерам ощущение счастья Да, модернизация аппаратуры и программного обеспечения стоит денег, но какого творчества можно ждать от измученных и утомленных трудоемкой работой на маломощном оборудовании сотрудников? Поддерживайте мотивацию проектной группы. Постарайтесь обзавестись быстрой системой и свежими версиями программ. Оплачивайте лицензии, чтобы для запуска приложений дизанерам не приходилось выходить из сети (к тому же, и с юридической точки зрения это более верный путь). Обеспечьте хорошие рабочие станции. Если результаты важны, вкладывайте средства. Они окупятся втройне.
Мае или PC? Для девяноста процентов вебсайтов дизайн разрабатывается на компьютерах Macintosh, но девяносто процентов пользователей просматривают сайты с помощью PC. Рабочие станции на базе PC позволят дизайнерам просматривать разрабатываемый сайт с позиции основной массы пользователей. Установите на мониторах PC наиболее распространенное у пользователей разрешение (да, это вызовет недовольство дизайнеров) и контролируйте, чтобы дизайнеры действительно просматривали свою работу на этом разрешении.
172
Глава 5
Визуальный дизайн и разработка протосайта - отдельные процессы; они не взаимозависимы. Скорее, каждый из них естественно продолжает фазу структурирования. Визуальный дизайн берет за основу результаты информационного дизайна и добавляет к ним графический интерфейс. Протосайт, помимо всего прочего, выверяет содержимое: не слишком ли его много, не слишком ли мало? Хорошо ли оно читается? Нет ли пропусков? В идеале визуальные дизайнеры должны начинать работу после того, как будет завершен информационный дизайн, а также полностью определен и получен контент. Но в идеале и на стирку уходит 10 минут, а не полтора часа, и клиенты оплачивают счета сразу по получении. В реальных проектах из-за сжатых сроков визуальное проектирование начинают, не дожидаясь окончательного структурирования сайта. Реальные условия не позволяют быть последовательными и рассчитывать на неспешный график. К этому моменту клиенту еще нечего показать. Некоторое наложение фаз структурирования и визуального проектирования почти всегда происходит, и это нормально. Однако хотя визуальные дизайнеры уже начинают делать наброски, обдумывать идеи и подбирать цвета, они не могут приступить к полноценной работе, пока не закончено информационное проектирование. Поскольку в книге нельзя описать одновременно оба направления, сначала будет освещен визуальный, а затем функциональный аспект этой фазы. Но помните, что они развиваются одновременно.
СОЗДАНИЕ > Начало творческого процесса > Разработка разумного дизайна > Анализ целей сайта I > Разработка концепций > Проектирование для пользователя > Представление дизайна и получение одобрения 1
Начало творческого процесса К а ж д ы й клиент терпеливо и л и с нетерпением ждет первого п р е д с т а в л е н и я п е р е п р о е к т и р о в а н н о г о сайта. Но прежде чем это произойдет, проектная I группа должна провести серьезный мозговой штурм для выработки решений на творческом и техническом уровнях (а иногда самым крупным творческим достижением становится техническая н о в и н к а ) . Т в о р ч е с к и е з а м ы с л ы необходимо не только произвести в большом количестве, их требуется проанализировать, обдумать, взвесить. Не 1 надейтесь, что редизайн визульного оформления возможно сделать в один прием, и не позволяйте клиенту рассчитывать на это.
Разработка разумного дизайна Визуальный веб-дизайн - это нечто большее, чем только привлекательный интерфейс; он должен от-
Фаза 3: Визуальное оформление и тестирование
173
вечать всем целям сайта и в то же время быть функциональным. Именно на этом этапе информационное проектирование и предварительные замыслы обретают форму, облик и становятся осязаемыми. Стадию визуального дизайна часто считают развлекательным этапом работ. Здесь дизайнеры проявляют свое волшебство. Неверные шаги на этой стадии тяжело отражаются на бюджете. Следите за этим. Придерживайтесь разумного дизайна. В любом проекте - при создании или редизайне веб-сайта - важно понимать концепцию разумного дизайна. Разумный дизайн учитывает среду и возможности пользователя. Разумный дизайн функционален и быстро загружается. Разумный дизайн должен удовлетворять нужды пользователя, а не амбиции дизайнера, желание использовать Flash, угодить рекламодателям или даже мелким причудам руководителей компании клиента. Если ущемляются интересы пользователя, это - не разумный дизайн, даже если все выглядит шикарно. Как добиться разумного дизайна? Очень просто. Рассуждайте с позиции пользователя. Перемещайтесь по сайту, производите загрузку, как это делают пользователи. Опирайтесь на информационный дизайн, а не сражайтесь с ним. Почаще консультируйтесь с дизайнерами производства HTML, относитесь к ним, как к няне в детском саду, спрашивайте: «можно ли сделать это?», «удастся ли такой эффект?», «не возникнут ли трудности при таком подходе?». Даже если замыслы красивы, модны и полностью отвечают потребностям аудитории, но не могут быть произведены или трудно загружаемы, они не разумны. Регулярные проверки и обсуждения с дизайнерами производства помогут найти адекватные, выполнимые решения. Разумный дизайн подвижен. Он работает.
Анализ целей сайта В момент, когда визуальные дизайнеры готовы начать свою работу, достаньте креативный бриф и используйте его как трамплин для творческого процесса. Каким задумывался стиль оформления? Серьезным, корпоративным и четким? Потрясающе новаторским и эксцентричным? Элегантным и спокойным? Каким-то еще? В креативном брифе перечисляются также цели редизайна, поставленные клиентом: например более профессиональный облик и производимое впечатление, более современная графика, больше полезной площади для содержимого и сокращение необходимости прокрутки и так далее. Во время креативного мозгового штурма проектная группа должна выявить визуальные недостатки существующего сайта, проанализировать цели редизайна, просмотреть конкурирующие сайты и обсудить предложенные решения. Творческий процесс развивается не в вакууме. Разрабатывая цветовые схемы и подбирая шрифты, визуальные дизайнеры должны задумываться также о технических и структурных решениях (например, об использовании DHTML, Flash, JavaScript и так далее). Для этого необходимо проанализировать технические
174
Глава 5
возможности целевой аудитории. И помните, не следует использовать технические подходы только из-за их современности. Надо убедиться, что они отвечают целям редизайна и соответствуют возможностям аудитории.
Разработка концепций Разработку внешнего оформления, независимо от обеспечиваемых информационным дизайном содержимого и маркировки, можно начать с подбора цветов и примерного размещения объектов на бумаге или экране (рис. 5.1). До завершения информационного проектирования в качестве руководства к действию визуальные дизайнеры могут использовать креативный бриф, а как только карта сайта и макеты будут готовы, они вплотную приступают к оформительским работам. Креативный бриф помогает разработать общий стиль и атмосферу, карта сайта структуру размещения компонентов содержимого, а макеты - навигационные элементы. Соберите все, что готово на данный момент, и начинайте «рисовать». Существует два различных подхода к тому, как начинать отрисовывать дизайн. Приверженцы традиционного подхода любят начинать с набросков карандашом или красками на бумаге, а остальные делают пробные серии эскизов сразу на
Рис. 5.1. Цветовая палитра, предложенная на ранней стадии редизайна сайта New Riders. В ходе дальнейших работ эта палитра совершенствовалась. Было представлено несколько ее вариантов. В данном случае была выбрана измененная версия (см. цветную вклейку у стр. 337)
Фаза 3: Визуальное оформление и тестирование
175
компьютере (рис. 5.2 и 5.3). В обоих случаях этот этап является началом разработки общей концепции оформления, и, независимо от методики, на этой стадии Базового процесса визуальные дизайнеры приступают к подбору цветов и размещению объектов. Они начинают опробовать различные варианты. Визуальные дизайнеры должны продумать все идеи, сведя их к двум-трем основным направлениям, и далее развивать их детально.
Рис. 5.2. Предварительные эскизы на бумаге позволяют использовать их в мозговых штурмах в поисках решений. Благодаря этим начальным наброскам дизайнеры быстрее справятся с размещением объектов и созданием направляющих
Рис. 5.3. Предварительные варианты оформления, созданные в программах Freehand, Illustrator или Photoshop (см. цветную вклейку, стр. 337)
176
Гамма гамм Оттенки цветов, даже являющихся веб-безопасными, выглядят слегка по-разному на компьютерах Мае и PC. Одним нравится яркость Мае, другие - приверженцы более естественных и приглушенных тонов PC. Споры никогда не утихнут. Просто помните, что результат будет немного другим, даже если настроить гамму Мае для PC. Перед показом клиенту загрузите выбранную палитру на свой сервер и просмотрите ее на обеих платформах. Возможно, захочется что-то изменить.
Веб-безопасные - и только? Что касается цветового куба, отвечающего требованиям веб-безопасности, - да, люди действительно начинают выходить за строгие границы 216 цветов. С течением времени (и с переходом на новые версии броузеров) становится все более возможным использовать тысячи и миллионы цветов. Но пока, решаясь на это, проверяйте, проверяйте и проверяйте. Наш опыт показывает, что в большинстве случаев эксперименты вне куба все еще проблематичны. Даже при размещении оптимизированной графики в рамках безопасных шестнадцатиричных веб-цветов (в ячейке или в фоне) остается еще узкий момент, особенно разница в броузерах.
Глава 5
На начальных мозговых штурмах не забудьте учесть время загрузки, функциональность и наличие у пользователей различных броузеров. Работайте в тесном контакте с дизайнерами производства HTML, которые помогут в оценке возможности преобразования оформительских идей в работающие веб-страницы для целевой аудитории. Не всякое замечательное оформительское решение можно эффективно (или вообще) осуществить в HTML. Дизайнеры производства очень помогут, например в выборе шрифтов. Дело в том, что PC отображает шрифты HTML на 2-3 пункта крупнее, чем Macintosh, a Internet Explorer отображает их крупнее, чем Netscape. Это реальность. В связи с этим для HTML рекомендуется оптимальный размер шрифта 2. Любой более крупный шрифт везде смотрится неуклюже (за исключением броузера Netscape на компьютере Macintosh). Часто дизайнеры создают макеты, которые зависят от конкретного кегля шрифта в HTML, но это приводит к серьезным проблемам при производстве. Веб-проектирование, зависящее от размеров шрифта, никак нельзя назвать разумным. Графический текст, на первый взгляд, мог бы решить проблему, но нельзя забывать о следующих факторах: а) время загрузки; б) пользователь может отключить графику или работать на карманных устройствах и в) люди с проблемами зрения часто вообще не включают показ графики (подробнее об этом читайте в описании фазы 4: Производство и контроль качества). Учитывайте производство. Это ограничивает фантазию и уменьшает шансы создать потрясающее решение, которое понравится клиенту, но потребует затем переделки из-за своей невыполнимости.
Как руководитель проекта следите, чтобы визуальные дизайнеры не тратили слишком много времени на усовершенствование предварительных идей, пока информационное проектирование не завершено.
Фаза 3: Визуальное оформление и тестирование
Проектирование для пользователя По результатам мозгового штурма арт-директор или дизайнер должны выбрать три-пять направлений, согласовав их с дизайнерской группой, и сосредоточиться на детализации информации из макетов, включая навигацию, глобальные элементы, контент и так далее. Не забудьте определить, когда и где разместить визуально-графические элементы (например, кнопки и пиктограммы), помогающие пользователю перемещаться по сайту. По мере разработки визуального дизайна найдите время для того, чтобы группа верно представила себе сайт с позиции аудитории. Например, если потенциальные клиенты в основной массе используют офисные каналы связи Т1, обратите внимание на время загрузки проектируемых страниц. Возможно, удастся размещать больше графики и меньше текста. А если пользователи выходят в сеть в основном из дома с помощью 56 К модемов? Создайте больше страниц с меньшим содержимым на каждой из них. Однако чаще приходится принимать компромиссное решение. Убедитесь, что визуальные дизайнеры делают редизайн для целевой аудитории, а не для самих себя. Удержать дизайнеров строго «на волне» пользователя и в рамках целей редизайна весьма проблематично. Они увлекаются творческим процессом и стремятся создать нечто небывалое. Это прекрасно, если только при этом они не забывают о пользователе, о выполнимости задуманного или о пожеланиях клиента. Конечно, вполне возможно, что в задачи проекта входит именно создание потрясающего оформления. Возможно, ставилось целью применить самые передовые технологии. Возможно, вся аудитория сайта использует мощные каналы связи Т1. Если так, дайте дизайнерам полную свободу творчества. Но все-таки планка должна быть чуть ниже, чем ультра-супер... впрочем, об этом уже достаточно говорилось.
177
Отзывы пользователей
Используйте любые возможности для проверки сайта пользователями. Где-то на стадии показа второго раунда набросков визуального дизайна, между начальными и заключительными комментариями клиента, самое время собрать отзывы пользователей. Хотя на этой стадии Базового процесса не запланировано юзабилити-тестирование, проведение опроса фокусгруппы даст очень ценные сведения. Правильно ли понимается и интерпретируется навигация? Несет ли смысл маркировка элементов? Всесторонняя ли структура сайта? Привлекателен ли интерфейс? Можно ли двигаться дальше или необходимо вернуться и исправить что-то?
178
Глава 5
Рис. 5.4. В целях повышения доступности создайте версию вебсайта для пользователей каналов связи с низкой пропускной способностью. Предоставьте аудитории выбор между Flash-сайтом и его HTML-версией. Делайте это всегда
Фаза 3: Визуальное оформление и тестирование
179
Истина о размерах экрана Размеры видимых областей экрана могут быть разными: они полностью зависят от собственной системы пользователя. Считается, что сейчас наиболее популярным является разрешение 800x600. Эта установка, на которую при модернизации сайтов ориентируется большинство дизайнеров, на самом деле делает видимой только область 760x420. Это проверено. Куда деваются остальные пикселы? Их использует броузер. Если вы работаете в Dreamweaver, взгляните на выпадающее меню в правой нижней части окна страницы (рис. 5.5). Там предлагается несколько размеров окна. Выберите любой из них, например такой: «760x420 (800x600 maximized)». Такие параметры настройки помогут дизайнерам реальнее смотреть на вещи. Не каждый имеет 21-дюймовый монитор.
Дизайнеры любят работать с разрешением 1024x768, так как почти все они имеют экраны с высокой разрешающей способностью. Но они должны просматривать свою работу на различных мониторах. На мониторе среднего размера или на своем же, но с другим разрешением (всегда определяемым пользователем) может обнаружиться, что правый и нижний края оказываются обрезанными. Чтобы справиться с этой проблемой, делайте дизайн растяжимым, динамически изменяющим размер, масштабируемым, текучим все эти термины относятся к страницам, которые способны подстраиваться под ширину окна броузера. Мы предпочитаем термин «резиновые», потому что страница и текст растягиваются по всему окну броузера, какого бы размера оно ни было. Dreamweaver 4.0 имеет для этого очень удобную опцию (рис. 5.6).
Puc. 5.5. Dreamweaver имеет удобное меню в правом углу панели инструментов, позволяющее быстро оценить истинный размер экрана при создании эскизов или страниц
Puc. 5.6. Dreamweaver предоставляет простое решение динамического изменения размеров в броузере («резиновые» страницы). Опция Make Column Autostretch обеспечивает автоматическое распределение текста HTML-таблицы по ширине окна броузера
Глава 5
180
Дэвид Сигел (David Siegel) о визуальном дизайне и крайне важном посетителе
Ориентируйтесь на посетителей. Это следует делать на всех этапах процесса дизайна, но особенно важно на стадии оформления. Вы создаете много набросков, но кому их показать? Клиенту? Клиент не станет тратить время и деньги на эксперименты с сайтом, так как заинтересован только в желаемых бизнес-результатах. Необходимо показать их посетителям. Главное, что требуется услышать от клиента, - это слова: «Нам это нравится», - и оставить его в покое. Раньше все стремились получить письменное одобрение клиента, чтобы потом, если клиент не получал желаемые результаты, можно было бы напомнить, что ему нравилось предложенное. Не становитесь злейшими врагами самим себе. Перестаньте думать о том, что нравится нам (дизайнерам и клиентам), а стремитесь к тому, что любят посетители. Прислушиваться к посетителю - вовсе не означает, что следует забыть о собственных творческих замыслах. Просто не давайте превалировать своему эго. Укротите мысли о своей гениальности; оставьте это посетителям, позвольте им быть гениями. Стремитесь к простоте. Дизайнеры спят и видят новые динамические эффекты, которые они сотворят, но все это приво-
дит лишь к трате огромных усилий на создание потрясающих эффектов, которые даже не могут быть оценены посетителями. Упростите сайт насколько возможно, а затем добавляйте обратно оформительские эффекты, но только те, которые одинаково хороши для вас и для посетителей. Не конкурируйте с контентом. Никогда не применяйте узорчатый фон. Фон должен быть пустым и в спокойных тонах. Это не означает, что не допускается многое л ойность, но не следует пытаться воссоздавать углы, скосы и размытие. Обычно в этом нет необходимости. Никаких 3D. Уже везде, где есть вкладки указателя, используется 2.5D, а 3D здесь будет смотреться нелепо. Веб-сайты создаются не для мимолетного прохода сквозь них, поэтому трехмерность только отвлекает, конкурируя с главным - контентом. А контент - это именно то, ради чего люди, заказчики и простые пользователи, заходят на сайт. Решительно откажитесь от некоторых правил. Перешагните границы священного цветового куба. Этого всем хотелось, но мы оказались настолько привязанными к пространству в 256 цветов, что это стало религией. Ведь теперь уже не поставляют компьютеры
Фаза 3: Визуальное оформление и тестирование
с видеокартой менее 8 Мбайт памяти, а это вдвое больше, чем требуется, чтобы видеть миллионы цветов. Забудьте о цветовом кубе. Вводите новшества. Помните, что броузеры разрабатывались без расчета на визуальное отображение. Они предназначались для статей по физике. С каким-либо визуальным представлением, ставшим незыблемо традиционным, можно и поэкспериментировать. Например, со ссылками. Подчеркнутые синие ссылки - это исторически сложившаяся традиция, и если проверить - да, это то, чего люди ожидают. Но если насильно отключить подчеркивание и сделать ссылки красными, это не станет катастрофой. Лично я думаю, что можно еще найти подобные примеры и способы изменить и передвинуть пределы, не отпугивая этим посетителей. Хорошие дизайнеры должны уметь работать в любой среде. Эта среда - для людей, использующих веб, здесь они -
181
заказчики. Проектируйте и перепроектируйте для них, а не для наград и эффекта. Деловые результаты последуют. Дэвид Сигел - один из выдающихся авторитетов в области интернетстратегии. Его книга «Futurize Your Enterprise» (Обеспечьте своему предприятию будущее), John Wiley & Sons, 1999, вошла в список бестселлеров «Business Week» и имеет большое количество увлеченных приверженцев. Книга 1996 г. «CreatingKiller Web Sites» (Создание потрясающих веб-сайтов), Hayden — самый долгоживущий бестселлер Amazon.com, переведенный более чем на 15 языков. В 1995 г. Сигел основал Studio Verso, консультационную фирму по высококачественному веб-дизайну и стратегии, которая в 1999 г. была продана KPMG. Дэвид публиковался в таких журналах, как The Harvard Business Review, Fast Company и The Industry Standard.
182
Пользователи не читают они бегло просматривают Информационно-насыщенные сайты должны проходить тест на беглый просмотр. Отодвиньте стул назад (или снимите очки), взгляните на экран и просмотрите страницу. Подобным образом вы «просматриваете» сайт так, как это делает большинство пользователей. Можете определить, где надо щелкнуть мышкой? Быстро и легко? Нет? Тогда сделайте эти места более явными. (Замечание: более явно - это не обязательно крупнее, жирнее и тяжеловеснее.) Продолжите тест. Попросите кого-нибудь, не имеющего отношение к сайту (поставщика источников питания, кого-то из персонала или своего приятеля), найти на вашем макете что-нибудь за 10 секунд. Справится он с задачей? Нет? Сделайте это более явным.
Глава 5
Представление дизайна и получение одобрения Перед представлением клиенту первого варианта направлений дизайна они должны пройти несколько этапов. Помните две важные вещи: во-первых, слишком большой выбор на ранней стадии процесса замедлит работу, так как вызовет колебания клиента. Оптимальным будет выбор из трех направлений. Вовторых, не показывайте варианты, которые вам не нравятся, только потому, что вам больше нечего показать как альтенативу. Не исключено, что потом придется разрабатывать именно это направление. Поместите свои варианты на клиентской демонстрационной площадке и пригласите клиента просмотреть их (рис. 5.7-5.10). Некоторые клиенты сразу дают подробный отзыв; другие будут «капать понемногу». В последнем случае клиент делает несколько незначительных замечаний, дизайнеры все поправляют, уточняют у дизайнеров производства, все ли в порядке с выполнимостью, и представляют клиенту, а тот опять добавляет несколько незначительных замечаний. Если это допустить, клиент может растянуть такой сценарий до бесконечности. Руководителю проекта следует добиваться от клиента полезных откликов. Два или три показа дизайна вполне достаточны. Все, что свыше этого, уже может потребовать дополнительных переговоров и ассигнований - в зависимости, конечно, от различных факторов: уровня качества против ожидаемого, количества раундов изменений, колебаний и так далее. В конце этой первой стадии фазы 3 будет уже готов соответствующий разумный визуальный дизайн, который удовлетворяет клиента и его аудиторию. Остается перейти к следующему этапу. Выбрав направление дизайна и получив одобрение клиента (не забудьте получить его подпись), можно уверенно приступать к следующей стадии - к производству HTML.
Фаза 3: Визуальное оформление и тестирование
183
Контроль над клиентом Иногда клиенты страдают забывчивостью. В креативном брифе может быть заявлено «классический, элегантный», и именно такой стиль дизайна вы представляете, но клиенту не хватает новаторства. Какого? «Новаторский» не был оговорен в креативном брифе. В чем же дело? Клиент не мог выразить свои желания, пока не увидел фактические варианты дизайна. Вот так, вдруг, ни одна из продуманных творческих идей не отвечает этому новому требованию. Нужен совсем другой стиль, и ваш график работ попадает в тиски. Иногда клиентам нравится уже первый показанный вариант, а иногда им не угодишь. В любом случае зачастую им трудно найти время, чтобы выразить свое мнение. Это тоже часть творческого процесса - вносите в бюджет и ее. Не исключено также, что и дизайнеры не сразу найдут нужное решение [md], мо-
жет потребоваться несколько дополнительных раундов проектирования, чтобы удовлетворить всем требованиям, заявленным в креативном брифе. По этой причине нельзя обвинять клиента (и значит, предъявлять дополнительный счет) за торможение работ. Однако можно требовать ответственности клиента за изменения в стиле оформления, добавление большого количества страниц или изменения в навигации. Мягко напомните клиенту о креативном брифе. Часто клиенты «забывают», что они говорили о стиле и впечатлении, которое должен производить сайт, а ведь бюджет рассчитывался на основании этих данных до начала этапа визуального дизайна. Вполне приемлемо (и часто случается), что клиенты изменяют свои пожелания после просмотра вариантов визуального дизайна, но если при этом требуется значительная переработка сделанного, это меняет масштаб проекта.
184
Глава 5
Проблема Старая главная страница New Riders (рис. 5.7) заполнена содержимым, занимающим ценное пространство, которое можно было бы лучше использовать, чтобы отразить индивидуальность и бренд компании. Сайт нуждался в новой структуре и организации, чтобы в более динамичной манере подавать продукты компании (книги). Ключевые слова: элегантный, актуальный, высококачественный, с лоском.
ПРЕЖДЕ
Puc. 5.7, Старый сайт заполнен контентом и статичен (см, цветную вклейку, стр, 356)
Фаза 3: Визуальное оформление и тестирование
Puc. 5.8. Этот начальный вариант дизайна разработан в форме модульной сетки; он выглядит модно и дружелюбно. Такой подход позволяет расположить вверху главной страницы несколько дополнений (см. цветную вклейку, стр. 356)
185
186
Глава 5
Подход Сфокусировать главную страницу на отражение индивидуальности и образа New Riders с помощью мощной графики и яркого приветствия или лозунга. Ограничить контент тизерами1 или введением к различным разделам сайта. Этот подход служит также первой цели - прояснению навигации, поскольку чрезмерное содержимое не отвлекает от пользовательских маршрутов.
Puc. 5.9. Этот начальный вариант дизайна производит мягкое/элегантное впечатление. Такой подход подчеркивает настрой и образ компании; он предлагает простую систему ссылок к основным разделам контента (см. цветную вклейку, стр. 357)
Фаза 3: Визуальное оформление и тестирование
187
Тизер (от англ. teaser - дразнилка) - изначально в рекламе: прием, при котором рекламная кампания делится на две части: сначала появляется собственно «тизер», цель которого удивить и привлечь внимание и который не содержит никаких рекламных предложений, а потом следует вторая часть - разгадка (revelation), когда становится понятным, что собственно рекламируется. Здесь «тизер» означает незаконченный текст, представляющий собой несколько его начальных слов, снабженных в конце многоточием и ссылкой «далее», «весь текст». - Примеч. науч. ред.
Puc. 5.iO. Этот начальный вариант дизайна создает облик корпоративного/современного сайта с ярким впечатляющим лозунгом компании и подчеркиванием ее индивидуальности. Он позволяет также выделить на главной странице книжные новинки (см. цветную вклейку, стр. 357)
Глава 5
188
Линда Вейнман (Lynda Weinman) о способности дизайнеров решать проблемы
Дизайнеры способны решать проблемы. По своей сути, разработка веб-сайта — это решение целого ряда задач: юзабилити, навигация, скорость загрузки и так далее. Если дизайнер не задумывается над тем, какие аспекты требуют решения, он или она потерпит неудачу. То, насколько хорошо выглядит сайт после решения всех этих вопросов, является критерием того, насколько творческим был подход к ним. Визуальный дизайн должен поддерживать функциональность и цели сайта, не затеняя и не подавляя эти аспекты. Потенциальной проблемой является также собственное эго дизайнера. Решение простое: оставьте его за дверью. То, что вы можете похвастать своими навыками в анимации или очень любите какой-то шрифт или цвет, не является причиной для применения именно этих элементов в дизайне сайта. Дизайн должен быть продуманным и отвечать целям сайта, а не личным целям дизайнера. Прекрасно, когда те и другие совпадают, но цели сайта должны всегда стоять на первом месте. При редизайне сайта проектная группа должна быть вооружена некоторой важной информацией. Должны быть
собраны данные, позволяющие выяснить, что по мнению конечных пользователей необходимо усовершенствовать и что в настоящее время очень удобно для них. Проектная группа должна ориентироваться на эти данные в ходе творческого процесса. Безусловно, любой редизайн начинается с четкого определения целей. Они должны быть иерархически расставлены по приоритетам и реализовываться по ходу дизайна. Для этого члены группы должны уметь смотреть на сайт с позиции конечных пользователей. Следующее упражнение поможет им в этом: пусть все члены проектной группы перечислят пять главных вещей, которые они искали бы на сайте подобного типа. Пусть они найдут пять конкурирующих сайтов, оценят их и письменно перечислят их достоинства/недостатки. Пусть они объяснят, на чем основаны достоинства и как можно исправить недостатки. Когда проект заключается в редизайне сайта, очень заманчиво применить самую свежую и самую мощную технологию, потому что она кажется всесильным средством для оздоровления сайта. Не используйте технологии с единственной целью - применить их во
Фаза 3: Визуальное оформление и тестирование
что бы то ни стало. Любое решение должно быть обоснованным. Например, целью должно быть не использование Flash, а то, что Flash может обеспечить и чего нельзя достичь никаким другим способом, и/или что необходимо для успеха сайта. Любой дизайнер может поддерживать целеустремленный (направленный на поиски решений и решение проблем) подход к фактическому процессу дизайна и создания набросков, когда он твердо знает цели сайта и знает, что эти цели измеримы (например, через «прощелкивание» сайта или, что более важно, через фактические продажи) и что они достигаются с учетом позиции конечного пользователя (то есть продать нужно то, что хотят купить поль-
189
зователи). Не упускайте цели из виду: убедитесь, что они ясны, и придерживайтесь их.
Линда Вейнман соучредитель lynda.com, компании, которая специализируется на подготовке творческих профессионалов веб-дизайна и графики. Линда - автор многочисленных книг, обучающих компакт-дисков и программ. Она владеет учебным центром, в котором проводятся практические курсы. Недавно ее компания организовала несколько мероприятий, в которых участвовали тысячи веб-дизайнеров со всех континентов. Посетите www.lynda.com, чтобы узнать больше.
190
Глава 5
ВЫВЕРКА > > >
Выверка переходов и функциональности Создание HTML-протосайта Проверка функциональности
Выверка переходов и функциональности Совсем необязательно ждать полного завершения дизайна, оптимизации и кодирования, чтобы проверить основную функциональность, контент и навигацию. По ходу визуального дизайна поправьте то, что еще не вполне работает; на фазе производства не всегда найдется время для такой регулировки. Рекомендуется провести проверку в двух направлениях. Дизайнеры производства могут протестировать DHTML, выпадающие меню, всплывающие экраны, наборы фреймов - все, что нуждается в проверке работы на разных платформах. Рекомендуется также с формировать протосайт.
HTML-протосайт Протосайт - расширение макетов фазы 2: Разработка структуры сайта - используется для выверки переходов страниц, навигации и контента. Протосайт обычно не включает особой функциональности, хотя иногда применяются «облегченные» сценарии. Обычно протосайт является просто структурным макетом (без оформительских эффектов - достаточно ввести несколько цветов, чтобы выделить навигацию) с активными ссылками HTML (рис. 5.11). Протосайт, называемый также «HTML для прощелкивания», - это каркасный макет сайта, который позволяет проверить контент, навигацию и основную функциональность (или имитацию предполагаемых функциональных возможностей), чтобы удостовериться, действует ли выбранная информационная модель. На этом этапе Базового процесса уже известно, какая информация находится на каждой странице. Когда дизайнеры производства формируют протосайт - по крайней мере, все основные и вторичные страницы, — эта информация должна быть включена в них. Особенно следует проверить, соответствует ли форма получаемых результатов запланированной. Одно из главных достоинств протосайта - выявление проблем с содержимым и потоками информации, а также с навигацией. При использовании заполнителя вместо содержимого могут возникнуть трудности при оценке реального со-
Если сайту требуется включение внутренних программных разработок, технический протосайт создается инженерами с целью продемонстрировать функциональные возможности и соответствие требованиям, однако эта ситуация лежит вне поля зрения Базового процесса.
Фаза 3: Визуальное оформление и тестирование
191
стояния дел. Например, предполагается наличие основной страницы под названием «Расположение офисов» с четырьмя вторичными страницами, по одной для каждого из офисов. Только включив настоящее содержимое, можно обнаружить, что на основную страницу «Расположение офисов» фактически нечего (в терминологии контента) поместить: все содержимое размещается на вторичных страницах. Очень важно для клиента (и проектной группы) выявить такие недочеты до того, как начнется само производство. Рекомендуется, чтобы протосайт был протестирован и проектной группой и клиентом. Заполните его всем содержимым, которое уже готово. Дайте клиенту увидеть контент на странице, даже если оно еще не в окончательной позиции размещения - это только поможет клиенту сформировать собственное восприятие и обоснованную оценку сайта. Увидев протосайт собственными глазами, клиенты легче обнаружат пробелы в контенте, выявят перенасыщенные текстом страницы или решат, какое содержимое следует переместить из запланированного места, потому что там оно не имеет смысла. Клиент может удивиться необходимости прокрутки на одних страницах и пустоте других и может задуматься о перекомпоновке всего контента. Лучше принять такое решение на этой стадии, чем после запуска сайта. Насколько необходим протосайт? Проверка предположений до того, как вложить значительные средства в дизайн и производство, всегда очень ценна. Тестирование, насколько возможно, должно быть частью каждой технологии на многих этапах процесса.
Puc. 5.11. Образец страницы для протосайта New Riders. Этот «HTML для прощелкивания» содержит навигацию» заголовки и заполнитель вместо содержимого (только часть настоящего контента была получена) - в основном это HTML, без всякой графики
192
Глава 5
Иногда протосайт после выверки функциональности и навигации становится совсем ненужным, а иногда фактический редизайн сайта формируется на основе этого HTML-протосайта (приятно, когда можно сохранить то, что создано). Так или иначе, это все равно пробное производство, даже если протосайт совсем отбрасывается, а фактический редизайн пересматривается и формируется заново (такое тоже случается). Этап создания протосайта можно пропустить, если есть уверенность в надежности контента, навигации и визуального дизайна. Если с ресурсами большая напряженность, проверку функциональности можно перенести в стадию производства, а выверку информационного дизайна произвести на макетах. Но адекватность - это все же не тождественность, и если были проблемы с навигацией и организацией или если требуется нечто большее, чем обычное программирование, то в таком случае протосайт - прекрасное средство для устранения беспокойства по поводу этих аспектов.
Проверка функциональности Проверка функциональности индивидуальных возможностей до начала фактического производства HTML — разумный шаг. Совместимость броузеров, скорость связи, платформы и плагины - все это аспекты функциональности, которые исторически проблематичны и нуждаются в проверке как в отношении возможностей аудитории, так и в плане производственной выполнимости. Идея с выпадающими меню, реализуемая при помощи DHTML, может казаться превосходной во время мозгового штурма, но если в действительности это несовместимо с некоторыми броузерами или с компьютерами Мае, тогда будет потеряна существенная часть аудитории, и это решение становится неприемлемым. Кроме того, проверяя предположения на этой стадии, можно выяснить, нет ли изменений в масштабе проекта, которые требуется серьезно урегулировать. В частности, очень существенным изменением является необходимость формирования двух версий сайта - одной для Internet Explorer и другой для Netscape либо отдельно для пользователей с высокой и низкой скоростью связи. Должны быть проверены любые из следующих компонентов: • Сложные наборы фреймов (не рекомендуются без абсолютной необходимости) • Функциональные динамически изменяемые меню в DHTML или JavaScript • Всплывающие окна, особенно с фиксированным размером или расположением • Таблицы стилей или любые компоненты, требующие проверки в броузерах • Выпадающие меню (особенно те, что работают как ссылки) • Стандартные функции для покупательской корзины • Все что требует написания облегченных сценариев или включений на стороне сервера (SSI)
Фаза 3: Визуальное оформление и тестирование
193
Тестирование функциональности на стадии визуального дизайна позволит устранить проблемы до завершения дизайна, то есть когда это еще достаточно просто сделать. Такая проверка поможет также заранее подготовить производственный штат к предполагаемым задачам. Заблаговременное решение технических проблем сэкономит много времени на последующих этапах.
Создание графических шаблонов На этом этапе созданный дизайнерами облик должен быть перенесен на множество страниц. Загружаемый размер и осуществимость оптимизации уже выяснена в ходе создания дизайна. А теперь, когда общее направление сформировано, применение и установка стандартов на всем сайте должно происходить через создание графических шаблонов для различных типов страниц. Поскольку над этими задачами работают несколько сотрудников, очень важна детальная схема стандартов. Сначала обсудим разницу между наброском дизайна и графическим шаблоном. На первом этапе этой фазы клиенту были представлены направления дизайна. Вы определили набросок сайта. Он отличается от окончательного дизайна. Набросок - это Контроль за компонентами Следите за всеми изображениями - какое из них откуда взято. Даже при объединении набросков отмечайте происхождение каждого элемента графики, так как никогда нельзя сказать заранее, какое направление дизайна будет выбрано в конце концов. При представлении концепций клиентам следует очень четко объяснить, что изображение, в которое они влюбились, может стоить им 800 долларов за каждый год эксплуатации сайта плюс дополнительные затраты, если оно будет использоваться в печати и для маркетинговых целей. Пусть клиенты осознанно делают свой выбор (есть и другая стопка изображений) и, возможно, они захотят выбрать чуть менее интересные бесплатные изображения вместо тех, которые обойдутся им в 100 долларов за один показ. Осведомите клиентов заранее, до закрытия обсуждений. Каждый сэкономит много времени и устранит лишние заботы, ес-
7 За к. 667
ли до одобрения проекта будет понимать, как работают права на использование. Убедитесь, что получили сведения обо всех фотографиях и иллюстрациях для сайта. Передайте эту информацию клиенту. В перечне деталей и уточнений в плане проекта должно быть четко сформулировано, что внешние затраты на фотографии не входят в смету проекта. Укажите также, что получение прав на использование изображений - ответственность клиента, особенно если клиент собирается в дальнейшем использовать любое из изображений сайта (например, в маркетинговых брошюрах, почтовой корреспонденции и так далее). Существующие сегодня онлайновые сайты с архивами фотографий (например, www.tonystone.com,
www.photodisc.com, www.comstock.com) расширили свои функциональные возможности, чтобы упростить процесс приобретения иллюстрационных материалов.
194
Глава 5
только одобренное направление; оно должно быть развито (определенно, еще придется разрабатывать какие-то детали), а затем повторно утверждено. Графический шаблон берет за основу одобренный набросок дизайна и готовит его для оптимизации и производства HTML. Он называется шаблоном потому, что будет использоваться как для HTML-страниц, непосредственно для которых он разработан, так и для всех аналогичных страниц. Это главный графический файл, который скоро передадут в производство для разрезки на части и оптимизации на следующей фазе Базового процесса. Создание графического шаблона - это детализация наброска до создания многослойного файла, готового к производству. Первые компоненты создаваемого графического шаблона - глобальные. Уточните все детали навигационной панели в состояниях on/off /over (нахождение указателя мыши над ней, не над ней и при прохождении через нее). Нужен нижний текстовый колонтитул? Добавьте его теперь. Если для навигационных кнопок запланированы какие-то особые эффекты на JavaScript (например, выпадающие меню или различные отображения кнопок в зависимости от расположения указателя мыши, или плагины, которые являются глобальными), они уже должны быть обсуждены с дизайнерами производства на предыдущей стадии в плане возможности их программирования и в отношении формы их подачи в производство. Сейчас время формирования графических слоев, которые будут поддерживать все эти функциональные возможности. Если предусмотрено включение динамически генерируемого содержимого, на данном этапе требуется создать отдельный слой, определяющий, где именно в шаблонах будет появляться это содержимое. Имейте в виду, что, вероятно, придется создать на базе основного шаблона несколько графических шаблонов для разных групп одинаковых страниц. Для небольших проектов редизайна, возможно, будет достаточно лишь нескольких шаблонов, но крупным сайтам часто требуется дюжина или больше. (Для www.webvan.com создавалось больше 40 шаблонов!) В случае большого количества графических шаблонов удобно сформировать электронную таблицу, в которой перечислить их все, чтобы не пропустить случайно, — так называемый план создания шаблонов. Скорее всего, будет создан графический шаблон для главной страницы, шаблон для основных страниц, шаблон для вторичных страниц и так далее. Не забудьте о страницах с сообщениями об ошибках, всплывающих окнах или страницах переадресации, сопровождающих заполнение форм или завершение транзакций. Ваши визуальные дизайнеры не смогут спроектировать все эти страницы. Обратите внимание на отмеченные стандарты в руководстве по стилю оформления (обсуждаемому позже в этой главе), чтобы дизайнеры производства смогли импровизировать в случае необходимости. В производство идут многослойные файлы Photoshop или Fireworks, которые вызывают все функциональные возможности (включая состояния on/off /over) и содержат заполнители или фиктивный текст вместо содержимого (рис. 5.12). Убедитесь, что в графические шаблоны включена вся информация, которую произ-
Фаза 3: Визуальное оформление и тестирование
195
E3N£Wh .»m
i«H o«r an»t»™ «*,**)
Рис. 5.12. Главная страница (вверху) и вторичная страница (внизу) в процессе разработки. Каждая из них - отдельный многослойный файл с перечислением всех находящихся на странице текстов. Четко именованные слои указывают состояние динамического элемента графики и его функциональность. Не забудьте включить справочный слой, содержащий все слои файла склеенными, - он нужен дизайнерам производства (см. цветную вклейку, стр. 358)
196
Глава 5
водство должно будет преобразовать в HTML-страницы. Часто бывает полезна распечатка отдельных выносок. (Имейте в виду, что макеты не отображают истинное размещение; они только указывают, что именно содержится на странице.) Большую проблему при создании графических шаблонов для передачи их в производство могут представлять шрифты. Визуальные дизайнеры обычно работают на компьютерах Мае, а рабочие станции дизайнеров производства - чаще всего PC. Кроме того, дизайнеры производства редко имеют те же самые библиотеки шрифтов, какие используют визуальные дизайнеры. В результате дизайнеры производства текста могут не получить доступ к редактируемому, неотрендеренному тексту. Подумайте о покупке шрифтов для производственной группы или по крайней мере удостоверьтесь, что дизайнеры производства имеют доступ к Мае. В любом случае позаботьтесь, чтобы визуальные дизайнеры сохранили копии файлов в их изначальном состоянии, с неотрендеренным текстом и с несклеенными слоями на случай, если придется делать какие-то изменения (а также по мере роста сайта могут потребоваться добавления в ранние этапы проектирования). Незавершенные графические шаблоны - из-за несоответствия шрифтов или недостатка информации в выносках - затормозят производство. Рекомендуется тщательно проверить эти файлы перед передачей их в производство.
Создание руководства по стилю оформления Все страницы на перепроектированном сайте различны и, в то же время, содержат общие (глобальные) элементы. Соблюдение последовательности в оформлении должно быть приоритетом. Убедитесь, что установлены состояния для всех динамических элементов, цвета ссылок, шрифты, заголовки и размеры текста в HTML. Тогда дизайнерам производства придется задавать меньше вопросов. Руководство по стилю оформления - основной документ для эксплуатационного обслуживания после запуска, но он также чрезвычайно полезен для справки во время производства. Созданное в двух частях группой дизайнеров и производственной группой (по одной части на группу), руководство по стилю оформления может быть объемным или очень простым - это зависит от того, сколько стандартов и рекомендаций вы хотите дать эксплуатационной группе и, конечно, от бюджета и ресурсов проектной группы. Чем более детально руководство по стилю оформления, тем лучше подготовлен сайт к решению почти неизбежных проблем во время эксплуатации (подробнее о техническом обслуживании сайта см. в описании фазы 5: Запуск и сопровождение). Клиенты часто сами занимаются техническим обслуживанием своих сайтов, а они обычно не являются дизайнерами. Помогите им. Рекомендуется включить в руководство по стилю оформления набор основных компонентов, показанный ниже в таблице. Компоновка руководства по стилю оформления может быть произвольной. Постарайтесь, чтобы оно было наглядным и информативным (рис. 5.13). Руководство по стилю оформления - только
Фаза 3: Визуальное оформление и тестирование
197
первая половина этого документа. После завершения своей работы дизайнеры производства HTML дополнят руководство по стилю оформления производственными деталями для передачи его эксплуатационной группе.
Установка стандартов Стандартизованная обработка глобальных элементов и графики - состояний динамических элементов, шестнадцатеричных цветов HTML, выбора размеров шрифтов, заголовков, фоновой функциональности - все это требует установок, которые могут применяться для всех страниц. Кроме определения типа графической обработки глобальных элементов следует стандартизировать и другие конкретные аспекты дизайна, которые не были определены и одобрены на стадии создания набросков. Сюда относятся элементы оформления, встречающиеся только на одной странице, а не на нескольких: отдельные формы, всплывающие экраны или сообщения об ошибках. Кроме того, сюда может войти и дополнительная графика, которой не было на этапе создания конечного наброска дизайна. И конечно, вместе с появлением окончательно подготовленного контента возникнут новые изменения. Без стандартов для всех этих элементов каждый будет работать с ними по-своему, внося дисгармонию в общий стиль. Эти рекомендации не обязательно подписывать у клиента; достаточно, чтобы клиент одобрил страницы, на которых видны основные стандарты. Вся документация по стандартам подготавливается и одобряется проектной группой для уверенности в том, что во время дизайна и создания графических шаблонов разработчики будут соблюдать стиль оформления. Поддерживайте взаимодействие между членами проектной группы, чтобы проблемы стандартизации не приходилось решать многократно; создайте новый стандарт, а затем переходите к работе над новым элементом. В этом случае дизайнерам производства HTML не придется многое изобретать самим.
Рис. 5.13, Этот образец руководства по стилю оформления представлен в формате HTML (см. цветную вклейку, стр. 358)
198
Глава 5
Резюме фазы 3 Визуальный дизайн - действительно развлекательная часть Базового процесса: наблюдать, как проект обретает видимую форму, всегда захватывающе. Во время этой фазы дизайнеры создают внешнее оформление и графический интерфейс пользователя: это первое, что увидят посетители перепроектированного сайта, первое знакомство пользователя с брендом компании клиента. Благодаря предварительному планированию на первых двух фазах, облик сайта пос-
Фаза 3: Визуальное оформление и тестирование
199
ле редизайна точно передает желаемый тон, заявленные цели и сформированную структуру сайта в визуальном формате, который легко разрезать и оптимизировать. При подготовке к фазе производства проверены функциональные возможности, столь же важные, как и сам творческий продукт, а также с помощью протосайта, через «прощелкивание», выверены все информационные предположения. По всем статьям дизайн готов к производству. Но почему такой строгий процесс? Это творческая фаза; почему нельзя просто проинструктировать проектную группу, чтобы они придерживались разумного дизайна, а затем дать им волю? Есть почему: хотя визуальный веб-дизайн - это, бесспорно, творчество, но это так лее и решение задач. Это эффективная подача информации с помощью привлекательного оформления, которое весьма значимо для аудитории и которое создается дизайнерами в рамках технических и бюджетных ограничений, да еще и в жесткие сроки. Процесс должен оставаться отлаженным - это важно для конечного итога, а визуальный дизайн является тем этапом Базового процесса, когда и масштаб проекта и бюджет могут выйти из-под контроля. Сотня вещей может идти не так, как надо: клиент может все время проявлять недовольство, дизайн может не получаться, содержимое - не работать, визуальные дизайнеры могут не принимать во внимание возможности аудитории или могут создать совершенный вариант дизайна, но который отнимет 80 часов сверх бюджета, и так далее. Придерживаясь Базового процесса и тщательно отслеживая и регистрируя потраченное время, проект имеет хорошие шансы не отклониться от цели. Следующей фазой является производство, практическая реализация проекта. Если визуальный дизайн был выполнен правильно, следующая фаза, при условии интенсивной работы, будет протекать гладко.
Контрольный список задач фазы 3 Создание
Передача в производство
• Анализ целей сайта
• Создание графических шаблонов
• Разработка концепций • Представление дизайна • Получение одобрения
D Создание руководства по стилю оформления • Установка стандартов
Выверка • Создание протосайта • Выверка навигации и контента • Проверка функциональности
200
Учебный пример
DiverseWorks Клиент: DiverseWorks Art Space URL: www.diverseworks.org Проектная группа: Idea Integration, Хьюстон Креативный директор: Джеф Мак-Лахлин (Jeff Mclaughlin)
Арт-директор: Джоел Харрис (Joel Harris) Изготовители сайта: Грегори Тейлор
(Gregory Taylor), Дэвид Шеферд (David Shepherd), Катерина Метьюс (Katherine Matthews)
ПРЕДЫДУЩИЙ
DIVERSEWORKS.ORG [ПРЕЖНИЙ] был богат информацией, но страницы были перенасыщены содержимым и неудобны для навигации. Сайт не передавал художественного характера сообщества, а кроме того, процедура регистрации новых членов и записи волонтеров была неудобной.
Учебный пример
201
DiverseWorks - один из ведущих современных худоностью, DiverseWorks служит открытой галереей для жественных центров в Соединенных Штатах. Известхудожников, хорошей школой для будущих администный своими крупными образовательными программа-раторов мира искусств и образцом для художественми по искусству и отличающийся финансовой стабиль-ных центров всей страны.
СОВРЕМЕННЫЙ
DIVERSEWORKS.ORG [ПЕРЕПРОЕКТИРОВАННЫЙ] выполнен в явно современном стиле, обновлен имидж DiverseWorks как галереи современного искусства и сцены. Редизайн также улучшил навигацию, упростив ее до пяти главных ссылок с меню на DHTML. Были созданы удобные формы для регистрации новых членов сообщества и добровольной работы на некоммерческой основе. (2000 г.)
Результат: Увеличение количества зарегистрированных членов сообщества и записавшихся волонтеров, а также рост доверия благодаря улучшенному дизайну.
См. цветную вклейку, стр. 348-349
Фаза 4: Производство и контроль качества Задачи этапа производства ясны: никакого неверного толкования возможностей пользователя или целей проекта; создайте веб-сайт, который выглядит и работает одинаково для каждого пользователя. Не удваивайте усилий; кодируйте каждую HTML-страницу только один раз.
Фаза 4: Производство и контроль качества
Беготня и планирование сайта, по существу, закончены; теперь наступает время создавать, реализовывать и интегрировать. Фаза 4 - этап, на котором выполняется фактическое формирование сайта. Проект сформулирован и структурирован, набросок дизайна сайта разработан - сейчас требуется собрать воедино все, что проектировалось, планировалось, накапливалось. Если сравнить веб-дизайн с печением пирогов, считайте, что фрукты уже нарезаны, тесто готово, печь разогрета и можно лепить пирог. Еще раз сверьтесь с рецептом и начинайте печь. Эта фаза разделена на три этапа: подготовка, компоновка и тестирование - технология, нацеленная на контролируемое производство HTML-проекта. Независимо от бюджета - будь он свыше 100 тысяч долларов или менее 10 тысяч очерченные здесь этапы подходят для любого веб-проекта: как для редизайна, так и для изначального создания сайта. В любом случае цель ясна. Никакого удваивания усилий. Кодируйте каждую HTML-страницу только один раз.
Фаза 4: Производство и контроль качества
Оценка состояния проекта Прежде чем фактически начать производство, выберите момент для оценки состояния проекта. Не расширился ли масштаб? Не вышел ли проект за рамки бюджета? Получен ли основной контент? И полностью ли готова проектная группа к предстоящим задачам производства? Именно в начале производственной фазы следует осознать важный факт: Сеть управляется HTML. Надо полагать, что кто-то в проектной группе владеет процессом создания HTML: либо путем чистого ручного кодирования с использованием ВВЕdit, Homesite компании Allaire или чего-то подобного, либо с помощью редакторов WYSIWYG, например Adobe GoLive, Macromedia Dreamweaver или Microsoft FrontPage. Очень важный вопрос: каков уровень его навыков? Взвесьте вновь возможности группы производства HTML теперь, когда точно известен уровень дизайна и технические требования, а если затрудняетесь сами произвести оценку, найдите кого-то, кто может это сделать. Координирование веб-производства требует способности и опыта. В зависимости от квалификации группы следует определить истинный уровень сложности, который может представлять производство сайта. Например, если создается сайт брошюрного типа с 20-40 страницами и несложными сценариями на JavaScript, то, вероятно, можно справиться с этим, прибегнув к помощи редакторов WYSIWYG. Если же сайт сложнее - громоздкие таблицы и/или фреймы, дополнительное создание сценариев и/или применение DHTML, - потребуется умение решать проблемы, то есть потребуются люди, очень хорошо владеющие HTML. Это предполагает умение вручную кодировать страницы или, по крайней мере, читать и понимать коды достаточно хорошо, чтобы отлаживать HTML и решать проблемы в ходе производственного процесса.
205
ПОДГОТОВКА > Оценка состояния проекта > Составление рекомендаций > Формирование файловой структуры
206
Глава б
И до того как приступить непосредственно к кодированию, очень полезно еще раз проанализировать возможности аудитории (броузеры, размеры экранов, скорость связи), технологии (плагины, сценарии, потребности внутреннего программирования) и цели редизайна (размер загрузки, привычки пользователей). Следует решить сложные вопросы относительно серверов, структуры каталогов и специфики производства HTML, которые, возможно, были оставлены до этой фазы. Здесь может помочь ведомость клиентских технических требований. Ваша цель? Никакого неверного толкования возможностей пользователя или целей проекта. Никакого отслеживания в обратном порядке. Кодируйте каждую HTML-страницу только один раз.
Составление рекомендаций Составление еще при подготовке проекта веб-редизайна четких рекомендаций для производства HTML помогает найти ответы на вопросы и избежать дорогостоящего отступления назад. Ведомость клиентских технических требований определяет характеристики возможностей аудитории и технических стандартов для сайта. Это рабочая таблица. Она длинная, подробная и имеет технический характер. Клиент может просто ответить: «Я не знаю. Вы специалисты; вы объясните мне». Некоторые объяснения, вероятно, необходимы. Например, руководитель проекта или ведущий производственный дизайнер могут охарактеризовать, как отразится выбор поддержки броузеров 3.x на возможность использования некоторых функциональных возможностей или как повлияет выбор Flash на возможность поддержки пользователей с модемной связью и так далее. Ведомость клиентских технических требований можно загрузить с ivww.web-redesign.com. Из-за ее размера она не приведена в книге полностью, показаны только первые две части: «Целевые спецификации» и «Функциональность и особенности» (см. рабочую таблицу на следующей странице). В общей сложности она состоит из пяти частей: Часть 1: Целевые спецификации Часть 2: Функциональность и особенности Часть 3: Дизайн и размещение Часть 4: Установки файловой структуры и каталогов Часть 5: Сервер и данные о хостинге Прежде чем приступить к производству HTML, следует найти ответы еще на ряд вопросов, что может оказаться столь же утомительным, как заполнение этой таблицы. Они обсуждаются с визуальными дизайнерами в начале фазы 3: Визуальное оформление и тестирование. Постарайтесь побыстрее получить отзывы клиента. Их следует получить и проанализировать еще до того, как визуаль-
Фаза 4: Производство и контроль качества
ные дизайнеры начнут разрабатывать концепции, и уж конечно до того, как дизайнеры производства начнут формировать протосайт. Ведущий дизайнер производства HTML обязательно должен быть контактным лицом группы; руководитель проекта может быть, а может не быть знатоком по технической части. Постарайтесь получить от клиента - или его ключевых технических специалистов - подробные ответы на все вопросы, добавляя по мере необходимости дополнительные комментарии. Попросите клиента ставить пометку «Не известно» рядом с несущественными пунктами и указать области, в которых необходимы советы, предложения или уточнения. К заполнению этой ведомости следует отнестись очень серьезно, поскольку результаты ее анализа будут служить для производства руководством, «высеченным на камне». Рабочая таблица на следующих страницах поможет отразить и установить технические параметры редизайна сайта, включая конкретные вопросы относительно сетевых возможностей целевой аудитории, версий броузера, функциональности и существующей файловой структуры. После заполнения верните ее, пожалуйста, руководителю проектной группы.
Запланированный масштаб сталкивается с реальностью Запланированные 100 часов могут легко вырасти в 300, если сложность сайта была недооценена. В фазе 1: Определение проекта на основании предполагаемого масштаба был оценен бюджет проекта. Планировалось 50 страниц, а получилось 120, или пока еще укладываетесь? Проверьте. Не возрос ли объем работ - за счет разбухания или в результате требуемых клиентом изменений и добавлений? Если так, вам потребуется или увеличить бюджет, или сократить распределенное по задачам время... или терпеть убытки. Независимо от того, оговаривались или нет с клиентом возможные
207
Навыки в HTML Хотя эта глава касается HTML, в ней не идет речь о кодировании HTML, о самой теории кодирования или создания сложных сценариев. Здесь обсуждается технология процесса редизайна и то, что относится к фактическому производству сайта: обеспечение гладкого выполнения проекта в рамках графика работ и бкщжета. Руководство по практическому ручному кодированию ищите в альтернативных источниках, например в книге Ардис Ибанез (Ardith Ibanez) и Натали Зи (Natalie Zee) «HTML Artistry: More Than Code», New Riders, 1998 или в книге Линды Вейнман (Lynda Weinman) «Creative HTML Design. 2», New Riders, 2001.
208
Глава б
Целиком эту рабочую таблицу (все 5 частей) можно загрузить с www.web-redesign.com.
Фаза 4: Производство и контроль качества (QA)
209
Целиком эту рабочую таблицу (все 5 частей) можно загрузить с www.web-redesign.com.
Фаза 4: Производство и контроль качества
211
212
Глава б
Чэд Кэссирер (Chad Kassirer) о понимании клиента до начала кодирования
Хорошее понимание клиента - ключ к успеху веб-проекта. До начала процесса производства важно прийти к согласию и получить одобрение по двум аспектам: составу целевой аудитории и ожиданиям клиента в отношении деталей производства сайта. В решении этой задачи я полагаюсь на ведомость клиентских технических требований, в которой отражены эти аспекты. В идеале этот документ готовится вскоре после начала практических работ над проектом. Благодаря этому имеется один центральный документ, который служит руководством для каждого, кто включен в процесс создания сайта. Он не только помогает во всех фазах процесса — от информационной архитектуры до дизайна для производства, - а сразу устанавливает некоторые необходимые требования к сайту и определяет возможные ограничения. Создать веб-сайт, который выглядит и работает одинаково для каждого пользователя, - цель каждого веб-дизайнера, программиста и инженера производства. Однако при наличии многочисленных возможных комбинаций платформ, броузеров, скоростей связи и разрешений мониторов этой цели почти невозможно достичь. Для выбо-
ра лучшего способа дизайна и формирования веб-сайта необходимо изучить целевую аудиторию. Узнав ее, можно лучше приспособить сайт к потребностям именно этой аудитории, а потом уже думать о других пользователях. Это не означает, что важна только целевая аудитория и никто более, но следует способствовать приоритетам клиента. Эти приоритеты будут ориентировать все решения, принимаемые в ходе производственного процесса. Более реалистичная цель состоит в том, чтобы сделать сайт как можно более совершенным для целевой аудитории и в то же время приемлемым и функциональным для всех остальных. При обсуждениях в начале проекта диалог идет между производством и клиентом. Во время этого обсуждения перед выбором желаемого клиентом направления можно выяснить его ожидания и предпочтения и внести их в ведомость клиентских технических требований. Руководитель производства, будучи интегратором дизайна и инженерных разработок, использует этот документ как справочный материал для принятия решений на этапах дизайна и производства. При надлежащем использовании ведомость клиентских технических требований чрез-
Фаза 4: Производство и контроль качества (QA)
вычаино полезна и экономит время и деньги, устраняя неясности, которые вызывают лишние задержки и срыв планов. Я рекомендую использовать ведомость клиентских технических требований буквально с первых шагов. Она отражает и проясняет каждому, каковы начальные цели проекта, даже если в ходе работ произведены изменения. В случае изменений требований или ожиданий клиента ведомость клиентских технических требований может служить контрактом, на который можно сослаться при необходимости (например, при обсуждении дополнительных затрат). Используя ведомость клиентских технических требований
213
как справочное пособие, помогающее принимать решения на всем протяжении работ над проектом, можно формировать сайт, не забывая о клиенте. Как ответственный за производство отделов веб-разработки компаний Red Eye Digital Media u Idea Integration/Сан-Франциско Чэд Кэссирер (www.whatdesign.com) сыграл ведущую роль в процессе производства многих отмеченных наградами веб-сайтов, таких как Splatterpunk (Adobe), Georgia Revealed (One World Journey) и Making Sense of Modern Art (SFMOMA). Чэд не выступал на веб-конференциях и не писал книг, но он знает тех, кто это делает.
Глава б
214
изменения бюджета, сделайте это теперь, прежде чем приступите к программированию. И не забудьте учесть ресурсы для контроля качества (QA), а также время, необходимое для устранения неполадок. Следите за временем на всем протяжении проекта. Делайте это еженедельно, тогда оценка будет относительно несложной. Сколько из распределенного времени и ресурсов уже исчерпано? Укладываетесь ли вы в бюджет? Увеличился ли масштаб? Достаточно ли осталось бюджетного времени, чтобы спокойно завершить работы? Знание, сколько времени и ресурсов требуется для завершения производства сайта и проверки качества (QA), часто является одним из туманных вопросов в оценке проекта. Жестокая правда? Большинство вещей, которые кажутся простыми, вовсе не таковы и займут гораздо больше времени, чем ожидалось. Кодирование HTML-страницы или шаблона может отнять несколько часов или несколько дней - это один из факторов, вызывающих разбухание проекта, который чрезвычайно трудно оценить правильно до начала фактического производства. МАСШТАБ: УКЛАДЫВАЕТЕСЬ ЛИ ВЫ? Карта сайта Сложности визуального I проектирования
Насколько велик сайт? Сколько страниц? Соответствует ли это запланированному? Стала ли разрезка файлов на части ночным кошмаром или прошла достаточно гладко?
Необходимость создания облегченных сценариев
DHTML, динамика на JavaScript, формы, всплывающие окна, фреймы, выпадающие меню и так далее. Что из этого планировалось сразу? Что собираетесь включить теперь? Совпадают ли эти намерения?
Внутренние разработки
Укладываются ли инженеры в рамки бюджета/графика работ? Адекватно ли были определены потребности во внутренних разработках и отвечают ли они на данный момент предполагаемому масштабу/стоимости?
Пересмотр возможностей аудитории Ориентируйтесь на пользователей. Создаваемый сайт должен учитывать возможности целевой аудитории, поэтому нельзя преобразовывать визуальный дизайн в HTML, если неизвестны технические параметры: целевые операционные системы, броузеры, мониторы и скорости связи. Воспользуйтесь в качестве руководства ведомостью клиентских технических требований.
Проверка состояния контента Содержимое должно быть уже получено. Но есть вероятность, что не полностью. Обязательно нужно следить за готовностью контента. План его поставки был
Фаза 4: Производство и контроль качества (QA)
215
Учет доступности Представьте, что ваш единственный доступ в Сеть через броузер, который не поддерживает графику. Войдите на любой сайт - если навигационные средРис. 6.1. Пиктограмма «ОдобреноБобби» («Bobby ства и кнопки не имеют описательных ALT-тегов, вы Approved» ) появляется, если сайт отвечает всем не сумеете различить изображения между собой. требованиям стандартов ADA. Если сайт не соНедавняя поддержка правительства и новые станответствует этим стандартам, Бобби, естестдарты Акта о доступности для людей с огранивенно, не одобряет его и перечисляет обнаруженные ошибки и предложения по их устранению ченными возможностями (Accessibility with Disabilities Act, ADA) нацелены на обеспечение полного доступа к веб-сайтам. Этот новый набор стандартов, введенный Консорциумом Всемирной сети (www.w3c.org), имеет своей целью позволить подключаться к Сети всем людям независимо от их ограниченных возможностей, включая тех, кто использует старые броузеры или устаревшие технологии. Понимание значимости требования доступности перед началом кодирования - особенно если сайт должен подчиняться стандартам по доступности - позволит избежать авральных работ в дальнейшем (например, кодирования ALT-тегов на 100 страницах, хотя вовремя это можно было сделать один раз в шаблоне HTML). Есть два бесплатных инструмента, которые помогут проверить сайт на доступность после его запуска: Bobby и Macromedia Section 508 Accessibility Suite. Bobby (www.cast.org/bobbyj - интерактивный инструмент, который мгновенно оценивает веб-страРис. 6.2. Этот снимок экрана показывает реницы. Введите URL, и Bobby определит области, козультаты запуска URL через Бобби. Вопроситорые не соответствуют стандарту доступности, и тельные знаки указывают на области, которые сообщит, все ли изображения имеют соответствуюили не соответствуют стандартам ADA, или щие ALT-теги. Это быстро и впечатляюще, а резульпросто могут быть улучшены таты могут просто удивить вас (рис. 6.1 и 6.2). Section 508 Accessibility Suite для Dreamweaver 4 и Dreamweaver UltraDev 4, созданный UsableNet (рис. 6.3), позволяет проверять веб-сайты на доступность таким же образом, как документы проверяются на наличие грамматических ошибок. Это расширение, доступное бесплатно на Macromedia Exchange (www.usablenet.com/macromedia/index.htm), поможет убедиться, что веб-контент соответствует рекомендации W3C/WAI, раздел 508, уровень 1. Отчет можно получить для одной страницы, всего сайта, Рис. 6.З. Usable.net и Macromedia сообща помогавыбранных разделов или любого каталога. ют проверить доступность
216
Глава б
четок: содержимое должно быть готово до начала производства HTML. Предупредите клиента, что время подошло и контент пора «замораживать». В самом начале работ над проектом заявите клиенту, что если с контентом будут задержки, это затормозит производство и начнутся перерасходы. Предъявление счетов за перерасходы всегда протекает небезболезненно, но это будет гораздо более осуществимо, если клиент заблаговременно предупрежден о такой возможности.
Проверка состояния дизайна Готовы ли графические шаблоны: завершены, одобрены и готовы для передачи в производство? Если нет, поторопите визуальных дизайнеров. Они задерживают производство. Составьте график поставки, чтобы графические файлы передавались поэтапно: сначала главная страница и представительская подстраница, а затем дизайнерам производства необходимо разобраться с шаблонами HTML, прежде чем выпускать остальные страницы. В ходе фазы 3 визуальные дизайнеры встречались с дизайнерами производства, чтобы убедиться в технической осуществимости своих задумок с помощью Flash, DHTML, JavaScript и/или чистого HTML. Ко времени первой поставки графических шаблонов от визуальных дизайнеров в производство должны быть решены такие вопросы, как проектируемый объем загрузки (в Кбайт) и потенциально возможный объем оптимизации.
Опоздание и последствия
Контент опоздает; это известно. Будьте готовы к этому. Но что делать, когда заветный срок прошел, содержимое опаздывает официально, а производство срывается? После нескольких мягких напоминаний по телефону или электронной почте пошлите фирме все еще дипломатичную электронную почту, устанавливающую новые сроки поставки, подробности и стоимость каждого последующего дня задержки контента. Ниже приводится выдержка из письма, в котором говорится о произошедшей задержке контента и ее последствиях. «...для уточнения мы выявили некоторые дополнительные расходы на добавление анимационной демо-версии продукта, а также на дополнительную работу по производству сайта, если по-
ставка контента будет задерживаться далее. Мы понимаем, что ваш бюджет строго ограничен и вы не захотите нести лишние расходы без крайней необходимости. Как объяснялось выше, мы распределили ресурсы для выполнения проекта на строго определенный период времени, и это время быстро утекает...» Кроме того, были ясно обрисованы финансовые последствия: была объявлена ставка платежа за кажД Ы й день задержки контента. Эффект был разительным. Первая часть контента была поставлена уже к концу недели, и дальше проект гладко прошел через запуск. Если вы обнаружите, что крайние сроки пролетают, примените эту методику (с опозданием и последствиями) в своем проекте.
Фаза 4: Производство и контроль качества
217
Уточнение плана интеграции с внутренним интерфейсом Сайт, который вы перепроектируете, статический или динамический? Если статический и нет потребности во взаимодействии с внутренней технической группой, этот раздел вам не потребуется. Однако если сайт динамический, до фактического начала производства запланируйте встречу с техническими специалистами и еще раз обсудите вопросы связи внутреннего и внешнего интерфейсов. Пересмотрите все технические спецификации, подтвердите план интеграции и уточните обязанности. БЫСТРАЯ СПРАВКА: СТАТИЧЕСКИЙ или ДИНАМИЧЕСКИЙ Статический сайт: только внешний интерфейс
Предварительно полностью подготовленые страницы просматриваются в броузере по ссылке на них; обычно используют расширения .html или .htm.
Динамический сайт: команды внешнего и внутреннего интерфейсов
Страницы создаются сервером «на лету», обычно собирая конкретную информацию из различных мест, например из базы данных. Сайт содержит также стандартные страницы HTML. Для возможности заполнения динамическим содержимым к HTML-страницам может быть добавлен дополнительный код (ASP, Java, Perl).
Формирование файловой структуры Структура файлов часто путается новичками и клиентами, у которых знаний достаточно только для того, чтобы сделать их самих опасными, с архитектурой сайта (фаза 2: Разработка структуры сайта). Фактически файловая структура это простое, но важное поддержание порядка. Начав организованно, легче оставаться организованным, так что сделайте это приоритетом. (Это особенно важно для проектов с многочисленной командой.) Хотя не существует общепризнанно лучшего способа организации файловой структуры сайта, различные стратегии отвечают разным целям (рис. 6.4 и 6.5). В ведомости клиентских технических требований есть вопрос по поводу того, как поступить при редизайне с существующей системой именований HTML-страниц и существующей файловой структурой. Желает ли клиент оставить все как есть, и если так, то почему? Какое бы решение ни было принято в итоге, оно должно отвечать целям редизаина и последующей эксплуатационной поддержки (например, как планируется добавлять и архивировать содержимое сайта после запуска). Редизайн - прекрасный повод расставить все по местам. Наверняка структура HTML старого сайта в беспорядке: дублированные файлы, изображения, рассеянные по разным каталогам, старые версии файлов все еще на сервере... Сфор-
218
Глава б
Puc. 6.4.
Puc. 6.5. Две структуры с различными стратегиями. На рис. 6.4 изображения размещены в корневом каталоге, а на рис. 6.5 - в каталоге текущего месяца. Выбор стратегии зависит только от индивидуальных предпочтений
Фаза 4: Производство и контроль качества
мируйте логичную, удобную в поддержании структуру файлов для перепроектированного сайта. Цель? Четкость, организованность и возможность расширения структуры, т. е. масштабируемость.
Файловая структура и масштабируемость Какой рост (увеличение трафика, добавление контента, новые продукты) ожидается в первый год после запуска? Планируете ли вы добавлять новые разделы? В каком направлении они будут расти? По времени? По темам? При определении файловой структуры имейте в виду, что она в значительной степени зависит от предположений клиента относительно роста и развития перепроектированного сайта. План формируемой файловой структуры должен соответствовать будущему техническому обслуживанию, включая логичный архив устаревшего контента. Создайте подкаталоги, которые будут понятны эксплуатационной группе после запуска сайта, и включите в руководство по стилю оформления инструкцию по работе с каталогами файлов: как архивировать или добавлять страницы. Дезорганизация и суматоха - постоянное явление во время передачи сайта после запуска на обслуживание новой группе. Сформированная структура файлов, рассчитанная на рост и регулярное обновление, очень поможет противостоять почти неизбежному ухудшению организации сайта. При создании файловой структуры следует учесть некоторые клиентские предпочтения. Например, следует ли реорганизовывать существующие файлы и существующую структуру файлов или лучше начинать на пустом месте? Как часто будут производиться обновления? Ежедневно? Ежеквартально? В ведомости клиентских технических требований есть эти вопросы. Важный вопрос: заботит ли это клиента? Возможно, но вряд ли. Клиент хотя бы понимает это? Возможно, но, скорее всего, нет. Тем не менее, про-
219
Три вопроса по файловой структуре 1.Как организована текущая структура каталогов и есть ли у клиента причина для такого метода? 2. Соответствует ли структура каталогов организационной структуре контента? 3. Будут ли изображения помещаться в корневой каталог или в отдельные папки?
220
Глава б
диктованная клиентом или сформированная проектной группой файловая структура должна быть ответом на предшествующие вопросы. Цель? Быть масштабируемыми. Оставаться организованными.
КОМПОНОВКА >
Разрезание на части и оптимизация > Создание HTML-шаблонов и страниц > Применение облегченных сценариев > Заполнение страниц > Интеграция с внутренними разработками (если нужно)
Разрезание на части и оптимизация Проверив всю информацию (этап подготовки в этой фазе) и убедившись, что проект редизайна продвигается по плану, можно всерьез перейти к производству HTML и начинать компоновку. На этом этапе производства графические шаблоны (рис. 6.6) преобразуются (разрезаются на части и оптимизируются) в элементы HTML (графические объекты) таким образом, чтобы их можно было снова сложить вместе (воссоединить и закодировать). До фазы производства, во время разработки дизайна, когда варианты визуального дизайна еще не завершены и не одобрены, их следует показать производственной группе, чтобы убедиться, что файлы могут быть разрезаны и оптимизированы в соответствии с требованиями целевой аудитории клиентов к объему загрузки. Визуальные дизайнеры должны тесно сотрудничать с группой производства HTML, чтобы определить лучшие способы разбиения графических шаблонов на части, позволяющие сконструировать таблицы HTML - основное средство для компоновки информации на странице. После того как файлы Photoshop/Fireworks приведены в надлежащее состояние, дизайнеры производства осуществляют их фактическое разрезание на части (рис. 6.7) и оптимизацию отдельных частей (рис. 6.8). Заметьте, что иногда, когда напряженно с бюджетом и ресурсами, и визуальным дизайном и производством HTML может заниматься один человек. Умелая оптимизация должна быть главным приоритетом. В качестве превосходного пособия с практическими рекомендациями можно использовать книгу Линды Вейнман (Lynda Weinman) «Designing Web Graphics.3» (Дизайн веб-графики. 3), New Riders, 1999.
Фаза 4: Производство и контроль качества
221
Рис. 6.6. Графический шаблон для www.diverseworks.org передан дизайнерами в производство в виде многослойного файла Photoshop или Fireworks. Этот файл содержит все элементы страницы, в том числе все состояния динамических элементов - каждое в отдельном слое. Здесь показано выпадающее меню при нахождении указателя мыша над ним (состояние «on» )
Puc. 6.7. Графические шаблоны разделяются на части и разрезаются в программах Fireworks или Photoshop. Ясно различимые слои соответствуют состояниям on/off/ over или выноскам DHTML
Рис. 6.8. Фоновый рисунок до и после оптимизации в Fireworks. Размер файла уменьшен до 16 Кбайт убавлением количества цветов в формате GIF
222
Контроль над версиями Старайтесь, чтобы всем, кто имеет доступ к активным HTML-файлам, было понятно, когда с ними работают, чтобы предотвратить одновременное редактирование файла несколькими членами группы. Такая неосведомленность обычно приводит к потраченному впустую времени, перезаписанным файлам и потерянной работе. Если над HTML работают более двух человек, для увеличения эффективности полезно договориться о способе контроля над версиями. В Dreamweaver 4 есть удобная опция, позволяющая регистрировать прием и сдачу файлов. В этом могут помочь также программы сторонних разработчиков, такие как SourceSafe, Perforce и WebDAV.
Глава б
Создание шаблонов и страниц HTML Если формирование веб-сайта сравнить со строительством дома, то на данном этапе есть графика и контент (строительные материалы), а также каталог файлов (каркас дома). Теперь можно формировать HTML-шаблоны и страницы (без содержимого), которые получаются из них (это стены комнат дома). Создав шаблоны, следует включить в них облегченные сценарии (электропроводка, водопровод и прочие атрибуты). После этого можно заполнять страницы (обставлять дом мебелью), приближаясь к запуску сайта (к новоселью). Первый HTML-шаблон устанавливает глобальные стандарты, такие как навигация, структура таблиц, использование шрифтов, обработка ALT-, COMMENT- и TITLE-тегов и так далее. Возьмите оптимизированную графику, вырезанную из графического шаблона, добавьте другие элементы, которые нужно включить (в том числе необходимые облегченные сценарии; их создание обсуждается
Несколько определений для непосвященных Графический шаблон сущ. Многослойный цифровой файл (обычно Photoshop или Fireworks), содержащий неотрендеренный, редактируемый текст, подготовленный визуальным дизайнером, который четко передает всю информацию, необходимую для отражения дизайна в HTML После разрезки графического шаблона на части, оптимизации и кодирования он превращается в страницу HTML
Шаблон HTML (называемый также HTML-оболочкой) сущ. Не имеющая конкретного содержимого HTML-страница, которая формируется дизайнерами производства путем воссоединения всех элементов, вырезанных и оптимизированных из графического шаблона. Визуально соответствует графическому шаблону. (Используется в производстве HTML для создания в дальнейшем файлов с помощью команды Save As.)
Оптимизировать гл. 1. Сжимать изображение или код до минимально возможного размера файла с целью сокращения времени загрузки. Оптимизированные файлы сохраняются обычно в формате GIF или JPG. 2. Подготовить для использования в Сети. Разрезать на части гл. Разделить графический шаблон (или часть шаблона) на два или более изображений (обычно GIF или JPG). сущ. Выделенная часть файла Photoshop или Fireworks, предназначенная быть отдельным изображением (обычно GIF или JPG). Склеивать гл. Бесшовно сращивать GIF- или JPGизображения при помощи HTML таким образом, чтобы при просмотре в броузере файл выглядел, как первоначальный графический шаблон.
Фаза 4: Производство и контроль качества
223
дальше в этой главе), и встройте их в HTML. Проверьте начальный(е) HTMLфайл(ы) на различных броузерах и платформах. Убедитесь, что графический шаблон нормально преобразовывается, а таблицы HTML не развалились (рис. 6.9). Этот файл будет служить основой. Если он окажется с изъянами, которые не будут устранены здесь, его дефекты перенесутся на все созданные на его основе страницы. Заметьте, что эта проверка не считается проверкой качества (QA); это, по сути, просто стандартная процедура производственного дизайна, выявляющая ошибки. Сохраните копию этого шаблона как страницу - первую из многих. Эта новая страница (больше уже не шаблон) становится предполагаемой страницей сайта и готова к заполнению содержимым: статическим или динамическим. Эти страницы теперь можно связывать и проверять. Поскольку формируются шаблоны HTML, на которых будут основаны страницы сайта, дизайнеры производства должны твердо придерживаться визуальных стандартов, установленных на фазе дизайна и внесенных в руководство по стилю оформления (см. конец фазы 3). До проверки качества (QA), которая проводится позже в этой фазе (на этапе тестирования), продолжайте проверять страницы и шаблоны на всех броузерах, на компьютерах Мае, на которых вы, возможно, работаете, и на PC, которые использует большая часть аудитории.
Рис. 6.9. Крупные графические элементы часто разрезают на части для облегчения их загрузки. Остерегайтесь искажения таблиц. Здесь показан пример с сайта www.flyingsparkfurniture.com: работающая нормальная таблица (слева) и она же во время отладки перед проверкой качества (QA)
224
Глава б
Применение облегченных сценариев Динамическое изменение, формы, выпадающие меню, всплывающие окна, смена изображений, фреймы... - все это результаты облегченных сценариев. Термин «облегченные» означает, что вы прекрасно можете закодировать их сами с использованием элементарного JavaScript, что потребует лишь некоторого понимания программирования. Создание облегченных сценариев не следует путать с Java, ASP или CGI. Это скорее стандартные функциональные возможности, встречающиеся на всех сайтах, например динамическое изменение (рис. 6.10). Это код, который можно легко позаимствовать и слегка модифицировать в соответствии с потребностями своего сайта. С совершенствованием программного обеспечения реализация облегченных сценариев и специальных возможностей (в частности, мультимедиа, требующего плагинов) становится все проще и проще. Это не должно удивлять. Те, кто использовал Fireworks для разрезки на слои и оптимизации графических шаблонов, могли подключить простые режимы, такие как MouseOvers и Swaplmages, при оптимизации и экспорте файлов. Если экспортировать HTML-файл прямо
Включение включений Разве одна из причин редизайна сайта - то, что он стал громоздким для обслуживания? Иногда простая текущая задача, например изменение нижнего колонтитула с авторскими правами, превращается в такую гигантскую работу (особенно для сайта с сотнями страниц), которую просто так не сделать. При формировании сайта иногда приходится иметь дело с повторяющимися вещами - битами кода, верхними и нижними колонтитулами и так далее - на всем сайте или, по крайней мере, на большинстве страниц. Возьмем общий пример: вышеупомянутый нижний колонтитул с авторскими правами. Как вы изменяете год на каждой странице? Можно воспользоваться одним из следующих способов: 1. Вручную открыть и отредактировать каждую страницу (требует времени). Заново загрузить каждую страницу. 2. Сделать глобальный поиск и замену с помощью редактора HTML (Это предполагает, что нет никаких вариаций и что оригинальный текст везде один и тот же.) Заново загрузить каждую страницу. 3. Сформировать включение. Заново загрузить только одну страницу.
Включение (include) - это текстовый фрагмент, закодированный и сохраняемый отдельно, но применяемый глобально, что позволяет редактировать его лишь в одном месте. JavaScript-включение - это повторение функциональности. Вместо включения повторяющегося кода в каждую страницу просто ссылаются на внешний файл, который сохраняется на сервере отдельно от страницы HTML. He требуется никаких вложенных фреймов. Включение - это свойство атрибута «src» (индикатор источника), нечто подобное атрибуту src IMG-тега (индикатор изображения). В некотором роде включение - почти динамический элемент, только не требующий внутренней базы данных. Следует отметить, что использование включений несколько замедляет загрузку. Сделайте выбор: стоит ли облегчение модификаций четверти секунды загрузки? Вероятно, да, но следует взвесить. Так или иначе, включение включений упростит будущее производство и явится большим достоинством редизайна, без которого обслуживание старого сайта было проблемой.
Фаза 4: Производство и контроль качества
из графического шаблона, многое для облегченного сценария уже будет сделано. На данном этапе включите в свою технологию все созданные сценарии. Добавьте анализаторы и переадресацию броузеров, файлы QuickTime или Flash. Проверьте все включенные функциональные возможности в необходимых броузерах и сверьте с возможностями вашей аудитории. Проверяйте, проверяйте и проверяйте. Ищите ошибки. Да, предстоит еще контроль качества (QA), но не оставляйте устранение дефектов на этот момент.
Есть очень много возможностей найти готовые коды. Позаимствуйте JavaScript с любого из следующих сайтов: www.javascript.com,
225
Меньше - значит лучше Да, ответственность за размер файла лежит на дизайнерах. Это относится не только к размеру включенной графики; следует принимать во внимание размер и HTML (исходных кодов) и любых иных программных элементов. Есть общая цель, и вы получили «законченный» фрагмент. Слишком большой? Вернитесь и оптимизируйте снова. Поищите, где можно сбросить несколько байт. Придумывайте способы. Подгоняйте.
www.builder.com, developer.netscape.com, www.scriptworld.com.Каскадные таблицы стилей и DHTML
Рис. 6.10. На главной странице www.diverseworks.org динамическое изменение представляет собой размытый крупный план иллюстрации, который изменяется, становясь четким. Местонахождения указателя мыши для этого изображения (над изображением и вне его) определены в палитре слоев графического шаблона
8 Зак. 667
DHTML - это сочетание JavaScript с каскадными таблицами стилей (CSS) для манипулирования HTML Это позволяет независимо управлять каждым из множественных уровней HTML, включенных в отдельные слои. При использовании CSS можно определить набор атрибутов, дать ему имя, а затем ссылаться на него. Если требуется изменить цвет всех заголовков, CSS выполнят эту задачу гораздо быстрее. К сожалению, броузеры 3.0 не поддерживают OSS, и некоторые броузеры 4.0 также испытывают трудности с ними. В настоящее время при использовании CSS приходится делать двойную работу - создавать два параллельных сайта, иначе пользователи с броузерами, не поддерживающими GSS, будут видеть искаженный дизайн.
226
Глава б
Джеффри Зельдман (Jeffrey Zeldman) о веб-стандартах
Написать однажды и использовать всюду - к этому надо стремиться. С этой целью проект веб-стандартов (Web Standards Project, www.webstandards.org) призвал изготовителей броузеров поддержать ряд основных стандартов - CSS, HTML 4, XML и др., подчиненных очень важной идее: разделению стиля и содержимого. Что это означает? Это означает, что дизайн отражен в одном месте (например, в каскадных таблицах стилей, CSS), а содержимое - в другом (например, в документах HTML или XHTML или в базе данных с записями в XML-формате). Зачем это необходимо веб-дизайнерам? Для чего отделять дизайн от данных? Вопервых, если шаблон всего сайта (или раздела сайта) содержится в единственном CSS-документе, редизайн не будет сверхзадачей. Требуется изменить фоновый рисунок, цветовую схему, ширину отступов, размер текста, шрифты и/или интерлиньяж? Отредактируйте один CSS-документ, и весь сайт (или раздел) тут же предстанет в новом свете. Попробуйте добиться этого с традиционным «HTML как инструмент дизайна». Не удастся. Даже с изощренными редакторами HTML на это уйдут часы или дни мартышкиного труда, не говоря уже о дополнительных часах на тестирование в броузерах и отладку. Во-вторых, если можно отделить дизайн от данных, то ваш сайт больше не будет закрыт для людей, использующих нетра-
диционные броузеры. Будь это обладатели мобильных телефонов, Palm Pilots, неграфических броузеров типа Lynx или специальных броузеров для людей с ограниченными возможностями, - все они смогут теперь наслаждаться полным доступом к контенту сайта. С отделением стиля оформления от содержимого не придется создавать дополнительные версии целых сайтов, чтобы поддержать этих пользователей (сам по себе дорогой и отнимающий много времени процесс); просто надо будет добавить одно-два правила к таблице стилей. При полной поддержке веб-стандартов, которые облегчают истинное разделение дизайна и содержимого, наша работа станет легче, количество бессмысленных и повторяющихся задач резко сократится и больше пользователей получат доступ к нашим сайтам, имея меньше проблем. Вместо траты нашего времени и денег клиентов на альтернативные версии, изощренные ходы и обходные пути можно использовать их на улучшение контента, усовершенствование дизайна и создание дополнительных функциональных возможностей. Я креативный директор A List Apart, еженедельного онлайнового журнала для людей, создающих веб-сайты (www.alistapart.com). Поскольку я контролирую сайт - это не то, что сдать клиенту и забыть, - и поскольку сам обновляю содержимое каждую неделю, то я также постоянно, в большей или меньшей степени,
Фаза 4: Производство и контроль качества (QA) модернизирую дизайн сайта и пользовательские маршруты. Это суровое испытание, потому что мой стиль и содержимое драматически сцеплены практически нерасторжимым образом. Для управления оформлением я использую CSS, но из-за ограничений текущих броузеров (особенно броузеров 4.0) для размещения дизайна я все еще мучаюсь с HTML-таблицами. Из-за этого на любое изменение дизайна, даже самое ничтожное, уходят часы. Когда я наконец доведу одну страницу до требуемой кондиции, могу ли я автоматически модернизировать остальную часть сайта по ее подобию? Нет, потому что каждая страница - скопление глубоко взаимосвязанных, вручную закодированных ячеек таблицы. Это слишком сложно для глобального поиска и замещения. И у меня нет производственного бюджета (сайт независимый и некоммерческий). Когда зарываешься в старых проблемах, возникает археологический эффект. На практике с дизайном оказывается хитрее, чем вы только что читали. Получается редизайн по нисходящей к тому, как это было. Это, может быть,
227
любопытно в историческом плане, но общая идея сайта, постоянство его образа и поток посетителей улетучиваются прямо на глазах. В последующие 18 месяцев, если соответствие стандартам укрепится во всех броузерах и пользователи перейдут на них, я перенесу все размещение в CSS, тогда будущие редизайны займут минуты вместо часов, оставляя мне больше времени на развитие особенностей сайта и работу с авторами. Сейчас я пытаюсь делать изменения такого типа, но при 10% читателей, использующих Netscape 4, и 25% с IE4, я не могу по-настоящему двигаться вперед. Я описал простой сайт, основанный на контенте. Вообразите более крупные и более интерактивные сайты, вооруженные стандартами XML, CSS и DOM. Представьте: одна группа занимается редизайном, в то время как другая внедряет новые функции, и обе не беспокоятся, что сотрут работу друг друга. Это потрясающе, но мы еще до этого не дошли.
Джеффри Зельдман (www.zeldman.com), автор книги «Taking Your Talent To The Web» у New Riders, 2001, является также издателем и креативным директором «A List Apart», еженедельного журнала для веб-разработчиков, соучредителем и руководителем группы The Web Standards Project - основной коалиции, борющейся за веб-стандарты, а также учредителем Happy Cog - веб-агентства Нью-Йорка, по меньшей мере, приобретающего известность. В свободное время Зельдман выступает с докладами на веб-конференциях, пишет публикации в Adobe Web Center, PDN-Pix Magazine и Creativity.
Глава б
228
Заполнение страниц Контент должен быть готов. Не исключено, что готова только часть содержимого, другая часть скоро подойдет, а над третьей все еще работают. Но когда HTMLшаблоны созданы и из них сформированы страницы, из-за задержки контента производственные дизайнеры будут простаивать. Предупредите этот момент. До наступления крайнего срока напомните о нем ответственному за поставку контента по электронной почте. Укажите дату, когда контент будет заморожен. Замораживание означает прекращение изменений. Финал. Если не сделать этого, контент продолжит пополняться по каплям, а содержимое, поступающее после замораживания, вызовет разбухание проекта; за это можно потребовать дополнительное финансирование (см. врезку «Опоздание и последствия» ранее в этой главе). Имейте в виду, что содержимое еще будет добавляться даже после его официального замораживания. Это случается. Оттяните дату замораживания, если возможно. Начав заполнять страницы, удостоверьтесь, что содержимое размещается в соответствующие места. Но кто может помнить (или догадываться), куда идет содержимое? Кто-то, вероятно, руководитель проекта принял содержимое от клиента. Вместе с ним как с координатором контента в проектной группе используйте план поставки контента в качестве контрольного списка, а также положитесь на принятые соглашения об именовании файлов, готовых для Сети, или продумайте другой способ контроля за правильным размещением содержимого. Какой бы ни был выбран способ, ознакомьте с ним всех дизайнеров производ-
Кодирование вручную или WYSIWYG (что видите, то и получите) Говорят, что кодирование вручную - исчезающее искусство... так ли это? Многие проекты требуют знаний и гибкости, которые приходят с высоким уровнем навыков в HTML Для многих из этих проектов дизайнеры производства HTML кодируют каждый тег-так называемое кодирование вручную, - используя про1 граммы типа BBEDIT или гибриды типа HomeSite. Ручное программирование почти всегда дает более чистый код, чем генерируют WYSIWYG-редакторы. И поскольку борцы за чистоту HTML очень требовательны к качеству кодов, многие программисты избегают WYSIWYG-редакторы не только потому, что они имеют тенденцию добавлять лишний и иногда громоздкий второстепенный код, но также и потому, что они часто не позволяют достичь такого высокого уровня, какой может быть достигнут вручную.
Свежие версии WYSIWYG-редакторов позволяют неискушенным в HTML (дизайнерам и нетехническим членам группы) создавать HTML-страницы с легкостью простого перетаскивания (drag-and-drop), Adobe GoLive и Macromedia Dreamweaver, два промышленных WYSIWYG-редактора, предлагают не только удобный в работе интерфейс. Одно из самых больших преимуществ WYSIWYG-редакторов - эко- I номия времени. Кодирование вручную может быть трудоемким и длительным процессом, Хотя WYSIWYG-редакторы имеют свои недостатки - f чаще всего избыточный исходный код, - эти приложения превосходны для первых шагов в веб-дизайне и вполне достаточны для большинства проектов. Но не отказывайтесь и от изучения HTML Это позволит 1 легче справиться с любыми проблемами разработки.
Фаза 4: Производство и контроль качества
ства, занимающихся заполнением страниц. Убедитесь, что ничего не пропущено и не перепутано. При размещении контента учитывайте и позиции размещения и стандарты стиля HTML-текстов, установленные визуальными дизайнерами. Обратите внимание на незапланированное содержимое, которое, как правило, не имеет никаких стандартов. Проконсультируйтесь с визуальными дизайнерами и попросите, чтобы они сразу же определили стандарт. Точно так же, если встретятся заголовки, которые должны быть графическими, поставьте в известность визуальных дизайнеров. Иногда имеется шаблон для заголовков. В таком случае дизайнеры производства могут сами создавать их, не обращаясь к визуальным дизайнерам.
Невидимое содержимое Заполнение страниц требует наличия всего контента, включая часто забываемое техническое «невидимое содержимое»: ALT-, МЕТА- и TITLE-теги. Часть невидимого содержимого, например ALT-теги для общих графических элементов типа навигационных элементов, должна быть добавлена на стадии создания HTML-шаблона, чтобы не пришлось делать это многократно. Другая часть, например заголовки (TITLE), должна быть включена при формировании страниц из этих шаблонов. Невидимое содержимое обычно остается до самого конца или так и забывается на сайте окончательно. Сохраните его как элемент технологии. Прежде чем начать процесс кодирования, убедитесь, что невидимое содержимое подготовлено. Что может быть неприятнее, чем начать работать со страницей или разделом и столкнуться с необходимостью снова возвращаться к ним потом для заполнения пустот. Заранее выясните, чего не хватает. В программе Dreamweaver 4 есть удобная форма, помогающая выяснить необходимые вопросы перед началом работы со страницей. Скопируйте эту форму (рис. 6.11) для клиента, чтобы он заполнил ее при поставке контента.
229
Контейнеры для содержимого Динамические сайты зачастую имеют выделенные области, или «контейнеры для содержимого», куда помещается динамически сгенерированное содержимое (например, «Сегодняшние горячие новости» или сформированный из базы данных список покупок). Обычно это HTML-контейнер, встроенный в нужную страницу, который будет заполняться динамическим содержимым. Контейнеры для содержимого нуждаются в отдельном рассмотрении, так как они имеют отношение к интеграции внутреннего и внешнего интерфейсов. Если ваш сайт не управляется динамически, но имеет области, в которых содержимое регулярно изменяется, подробно опишите в руководстве по стилю оформления HTML, как следует правильно их обновлять.
230
Глава б
Клиенту может не требоваться снабжать ALT-тегами все до единого изображения, и это нормально. Но ALT-теги имеют большое значение, добавляя ясность в определение терминов или в использование основных функциональных возможностей (рис. 6.12). Так или иначе, как только принято соглашение об именовании файлов и установлен стиль, дизайнеры производства могут двигаться дальше.
Puc. 6.11. Экран метагенераmopa Dreamweaver 4 облегчает создание и внедрение МЕТА-тегову становясь частью технологии
Puc. 6.12. TITLE- атрибуты могут подробнее описать конкретную гиперссылку, устраняя необходимость угадывания, и/или помочь пользователю принять решение - нажимать или не нажимать. Здесь показана простая текстовая гиперссылка на сайте www.zeldman.com, снабженная атрибутом TITLE, который быстро и наглядно показывает, что откроется после щелчка по гиперссылке: всплывающее окно с фотографией кота Типи
Фаза 4: Производство и контроль качества
.
231
Интеграция с внутренними разработками Взаимодействие между группами разработки внутреннего и внешнего интерфейсов и группами производства HTML всегда важно, но на данном этапе процесса оно становится критически важным. Очень многие проекты страдают от отсутствия последовательного взаимодействия, особенно из-за того, что на некоторые внутренние разработки могут требоваться месяцы, в то время как в разработках внешнего интерфейса счет идет на недели. Для интеграции внутреннего и внешнего интерфейсов логичный момент в технологии наступает сразу после завершения компоновки HTML-страниц. Однако еще в начале фазы производства следует собрать вместе и тех и других специалистов и разработать план интеграции и взаимодействия. Как лучше создать HTML-шаблоны для внутренней группы, чтобы она могла заняться программированием и подготовкой динамического содержимого? Какое программирование должно быть выполнено на стадии HTML? Какой опыт программирования имеют дизайнеры производства HTML? Какая из групп будет ответственна за вставку кода внутренних разработок в страницы HTML? Какова хронологическая последовательность интеграции? Что в шаблонах будет делать каждая группа? В такой встрече обычно участвуют руководители проектов или ведущие специалисты обеих групп, включая информационного дизайнера и арт-директора. Там же каждому следует рассмотреть технические спецификации и ведомость клиентских технических требований.
Понимание важности контроля качества (QA) Сайт сформирован; теперь убедитесь, что он работает. Контроль качества - один из наиболее часто пропускаемых шагов (помимо юзабилити-тестирования) в веб-разработках, но мы настоятельно рекомендуем не пренебрегать QA. Массовые представления не могут обходиться без генеральной репетиции со звуком и полной иллюминацией; точно так же сайт не следует запускать без всестороннего просмотра. Рекомендуется отвести в бюджете на контроль качества приблизительно 10% от общего времени и ресурсов. Здесь необходимо отследить и исправить все недочеты: орфографические ошибки, осиротевшие и некорректные гиперссылки, неправильно расположенное содержимое и так далее (рис. 6.13). Но еще более важной задачей является отыскание
232
Глава б
и устранение таких дефектов, как искаженные таблицы, функциональные ошибки, сбои броузера - все, что не отвечает спецификации. Для устранения этих дефектов требуется время, а затем повторная проверка перед запуском сайта. А при наличии доступа к клиентскому серверу не помешает провести QA и сразу после запуска.
Рис. 6.13. Типичный простой дефект: не загружается изображение (вверху). Быстрая проверка каталогов и перезагрузка изображения решили проблему (внизу). Примером более серьезной ошибки могло бы служить искажение выпадающего меню DHTML в некоторых броузерах (это труднее проиллюстрировать)
Фаза 4: Производство и контроль качества
233
Однако во многих проектах редко остается время и средства на проверку качества, которую часто совмещают с запуском сайта при сдаче его клиенту. Нередко также крайние сроки производства отодвигаются (обычно из-за задержек с поставкой контента и технических неполадок), и времени на QA не остается. Возможность провести полноценную проверку качества будет зависеть в значительной степени от трех вещей: 1) сколько времени остается до даты запуска обычно это результат умения твердо придерживаться намеченного графика работ; 2) каковы критерии приемлемости - насколько совершенным должен быть сайт при запуске и 3) насколько гибко оговорена дата запуска. Этот критически важный процесс проверки качества может проводиться либо неофициально только несколькими членами группы, либо более официально — внутренними силами или с наймом внешней компании или группы. Реальный выход состоит в том, чтобы приближаться к этому процессу постепенно, но осознанно: без связного плана контроля качества вы отдаетесь на волю случая. А на случай никогда не следует полагаться, подвергая опасности бюджет. Сформируйте план.
Создание плана контроля качества (QA) С самого начала проекта известно, что необходимо провести проверку качества (QA) и требуется составить план этого мероприятия. Не исключено, однако, что весь план контроля качества ограничивается единственной строкой в бюджете, которая выглядит примерно так: QA = 12 часов. Или 5 часов. Или 20+ часов. Эта бюджетная строка зависит от масштаба проекта, пожеланий клиента и квалификации проектной группы. Пересмотрите свой план QA. Имейте в виду, что сложные наборы фреймов, изощренные шаблоны HTML, облегченные сценарии и гиперссылки - все должно быть проверено на качество. По существу, есть три уровня контроля качества: упрощенный/неформальный, полуформальный и формальный. Выберите тот уровень, которого требует ваш проект. Ответственный за контроль качества
В фазе 1 обсуждался спектр задач и обязанностей ролей в проекте, одна из которых - роль ответственного за контроль качества (QA). В зависимости от размера проекта и численности проектной группы не всегда можно позволить себе роскошь иметь специально выделенного на эту роль человека. В таком случае, скорее всего, эти обязанности придется выполнять руководителю проекта. Руководителям проектов, плохо знакомым с этой ролью, рекомендуется пройти интенсивный курс по QA: получение конкрет-
ных навыков в тестировании и запуске любого продукта гораздо более ценно, чем приспосабливание к этому. Превосходный обзор принципов и стратегии контроля качества есть на www.philosophe.com. При решении этой задачи учтите все пожелания клиента. Объясните клиенту значение всестороннего контроля качества (QA) и необходимые затраты на это. Убедитесь, что клиент понимает, что для всестороннего контроля требуется не один день (или более), а не просто несколько тысяч долларов.
234
Глава б
Для контроля качества может использоваться несколько процедур, большинство из которых обычно применимы и в программировании и при тестировании веб-приложений и веб-сайтов. При любом тестировании его уровень широко варьируется в зависимости от технической сложности и детальности плана.
Фаза 4: Производство и контроль качества
235
РАСШИРЕННЫЕ/ОФИЦИАЛЬНЫЕ ПРОЦЕДУРЫ ПРОВЕРКИ Проверка модулей
Проверка отдельных компонентов веб-страницы для подтверждения их правильного функционирования. Проверка модулей - это подтверждение запланированной функциональности и откликов перед окончательным встраиванием проверяемого кода.
Регрессивное тестирование
Известное также под простым названием «ретестирование», регрессивное тестирование подтверждает, что все обнаруженные дефекты были устранены, что старый код работает как положено и что во время устранения ошибок не внесено никаких новых проблем. Примечание: уровень регрессивного тестирования и подтверждения варьируется в широких пределах. Проверка, которая подтверждает, что база данных и информация транзакций защищены от неавторизованных пользователей или хакеров; критерии проверки обычно определяются внутренней политикой безопасности на сервере.
Проверка безопасности
Типовой план контроля качества включает ресурсы, отведенное время, ожидаемые результаты, список участников тестирования, критерии приемлемости и распределение ответственности между проектной группой и клиентом при проведении QA перед запуском сайта. Контроль качества должен включать, по крайней мере, два полных просмотра: первый - для составления подробного списка обнаруженных дефектов и второй - для тщательной проверки их фактического устранения. Для неформального уровня QA этого плана вполне достаточно. Для полуформального и формального уровней данный типовой план должен быть соответственно расширен. Каждый конкретный план контроля качества и каждое отдельное испытание будут иметь различные критерии приемлемости. На любом сайте требуется проверить соответствие функциональности заданным требованиям и совместимость с различными броузерами, платформами и операционными системами - от простых всплывающих окон и заполняемых форм до сложных процедур входа в систему и системы совершения заказов в е-коммерции. По мере развития Сети от простого HTML до функциональной, управляемой приложениями среды все больше внимания следует уделять интеграции.
Контроль качества и серверы До того как запустить сайт, производственная группа должна провести проверку и на временном рабочем сервере и на месте, где после перенесения на постоянный сервер будет находиться сайт. После перемещения сайта среда тестирования должна быть точно такой же, как на рабочем сервере. Это означает, что каталоги, файловая структура и серверные сценарии должны быть соответствующими, иначе многие из сценариев и элементов CGI не смогут работать должным образом.
236
Проблема с фреймами Если сайт содержит фреймы, имейте в виду* что контроль качества займет, по крайней мере, вдвое больше времени. Вложенные фреймы? Тогда еще больше. Как правило, чем больше имеется фреймов, тем больше проверок необходимо. Кроме того, фреймы срывают поисковые механизмы (см. фазу 5: Запуск и сопровождение). Фреймы хоть и хороши в некоторых ситуациях (например,для портфолио, поддержки нескольких уровней навигации и так далее), но обычно вносят столько проблем, что чаще всего они просто того не стоят. Без абсолютной необходимости рекомендуется избегать использования фреймов.
Глава б
Неформальная проверка очень проста и выполняется самой проектной группой. Формальная проверка обычно предполагает наем внешней, квалифицированной группы. Полуформальная - соответственно, что-то между этими двумя. Большинство сайтов с бюджетом веб-проекта ниже 30 тысяч долларов может обойтись неформальной проверкой. Сайты со сложными функциональными возможностями и прикладным уровнем обычно требуют проведения формальной или, по крайней мере, полуформальной проверки.
Упрощенный/неформальный контроль качества При неформальном контроле качества ответственный за проведение испытаний или руководитель проекта координирует и отслеживает все запланированные проверки, а также распределяет между членами группы проверку разделов сайта, индивидуальных броузеров, версий броузеров и платформ. Назначенный член группы проводит свою часть проверки и перечисляет обнаруженные дефекты для устранения их группой производства HTML. Проще всего при этом распечатывать стра-
Юзабилити-тестирование во время проведения QA Контроль качества и юзабилити-тестирование схожи в подходе и масштабе, но отличаются конкретными процедурами и целями. Местами, однако, они перекрываются, особенно когда технические дефекты и осложнения (выявленные в ходе QA) влияют на возможность пользователей успешно перемещаться по сайту (что выявляется при юзабилити-тестировании). Фактически юзабилити-тестирование может иногда рассматриваться как разновидность QA. При контроле качества сайта с целью обнаружения дефектов, технических сбоев и совместимости с разными броузерами мы настоятельно рекомендуем провести также юзабилити-тестирование «один на один» (называемое также на этой стадии «верификационной проверкой»). Для чего? Чтобы убедиться с
позиции пользователя, что сайт работает нормально. Наименования и маркировки должны быть понятными. Навигация должна быть интуитивной и удобной. Сайт может быть опрятным и не содержать ошибок, но если он неудобен, его не захотят посещать, и успеха не будет. С другой стороны, сайт после редизайна может быть удобным (поздравляем!), но если есть некорректные ссылки и орфографические ошибки, пользователи долго не задержатся. Кроме того, они получат плохое впечатление от сайта и от компании. Стремитесь сделать сайт дружественным и не содержащим ошибок. Рекомендуется до запуска провести и Оки юзабилити-тестирование. Подробнее о юзабилититестировании см. в главе 8.
Фаза 4: Производство и контроль качества
237
ницы, имеющие ошибки, и ясно отмечать на распечатке каждый дефект. Заметьте, что эти распечатки полезны, если только на них указаны броузер и платформа, на которых данный дефект проявляется. Без этих сведений трудно воспроизвести ошибку, чтобы соответственно исправить ее. Руководитель проекта должен отслеживать также список дефектов, так называемый «bug list», который при неформальном испытании представляет собой просто пачку распечаток с отмеченными ошибками. Заметная красная пометка будет указывать на обнаруженную ошибку, а сопроводительные пометки «Устранено» или «Отложено на потом» с датой помогут отследить их исправление. Обычно для небольших или средних сайтов (с бюджетом менее 30 тысяч долларов) без особых технических сложностей такое неформальное тестирование является вполне адекватным методом. Неформальная проверка называется также «ad hoc», или «партизанской проверкой», так как она не имеет никакого формального плана или подхода к тестированию. Испытатели просто «стучат по клавишам» на сайте в поисках ошибок, которые необходимо исправить.
Подключайте клиента При неформальном тестировании клиента также следует подключить к участию в проверке качества в той же роли, что и членов группы: проверить сайт и выдать распечатки с ясно перечисленными ошибками и комментариями по поводу совместимости с требуемыми броузерами и платформами. При любом уровне испытаний клиент должен проверить контент. Только клиент может достоверно судить, правильно ли размещено содержимое. Клиент должен восприниматься (и, желательно, действовать) как партнер, а не указывать пальцем.
Базовый план контроля качества (QA) •
•
Резюме всех целей контроля качества, включая его методологию, график проверок и распределение ресурсов.
Список подлежащих проверке броузеров, платформ и операционных систем. • Список подлежащих проверке вариантов скоростей связи. • Список конкретных маршрутов или функций, которые должны быть проверены. • План отслеживания ошибок (используется основанная на веб программа или электронная таблица Excel, или распечатки).
План проверки устраненных ошибок до запуска сайта. Любые известные предположения (известные риски) на тот случай, если не все проверки смогут быть проведены до запуска. Они должны быть перечислены в разделе «Детали и уточнения» (фаза 1) плана проекта или контракта и подписаны до завершения работ, передачи и запуска сайта. План устранения дефектов, которые не могут быть исправлены до запуска. Кто должен будет устранять их, как будут определяться дополнительные затраты и так далее.
Глава б
238
Испытательные стенды Группу компьютеров (установленных в месте проведения испытаний), которые представляют целевые броузеры, платформы и скорости подключений аудитории, часто называют «испытательными стендами». Трудно перечислить все комбинации броузеров и платформ; по крайней мере, проверьте основные (рис. 6.14). Даже проверка небольшой репрезентативной группы приведет к обнаружению многих ошибок на сайте. Испытательные стенды применяются при полуформальном и формальном QA-тестировании. При неформальном уровне тестирования различные броузеры и платформы зачастую проверяются в разных местах.
Рис. 6J4. Таблица, подобная этой, поможет проследить все комбинации пар платформа-броузер целевой аудитории. В ней можно отразить установки испытательного стенда. Данная типовая аудитория не включает пользователей броузеров 3.0 или платформ UNIX
Полуформальный контроль качества Если проект требует большего, чем «партизанская проверка», но бюджет все же недостаточен для проведения формального тестирования внешней компанией, воспользуйтесь средним вариантом - полуформальным тестированием. По сравнению с неформальной проверкой это потребует больше времени, опыта и планирования - и, если возможно, приглашения квалифицированного QA-тестировщика и создания испытательного стенда. План полуформального тестирования должен содержать обзор в одну-две страницы, который освещает масштаб, временной график и цели процесса QAтестирования.
Формальный контроль качества Планирование формального QA-тестирования требует опыта, времени, бюджета и, самое главное, внимания к деталям, мельчайшим деталям. Самое большое различие между полуформальным и формальным QA - в уровне планирования испытаний, их стоимости, сопроводительной документации и в уровне экспертизы. При формальном контроле качества для проверки сайта на соответствие требованиям и проверки страниц с заданными броузерами и платформами используется всесторонняя система отслеживания ошибок и специальный квалифицированный штат
Фаза 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-долларовые затраты времени и ресурсов, конечно, недостаточны. Все равно вам потребуется проверять весь сайт.
Глава 6
240 Вопиющие ошибки Бывают ошибки, а бывают большие ошибки (разница, как между маленькой безвредной уховерткой и громадным тараканом размером с большой палец). Крупные, вопиющие ошибки это дефекты, которые просто нельзя оставлять. Они должны быть устранены до запуска (например, главная страница неправильно загружается; выпадающие меню приводят к падению IEf наборы фреймов перепуганы и так далее). Отслеживая дефекты, располагайте их по приоритетам. Какие из них вопиющие? Какие можно устранить итерационным подходом в первую неделю запуска? Иногда дата запуска «высечена на камне», и нет времени на исправление всех ошибок. Расставьте приоритеты и прежде всего избавьтесь от вопиющих ошибок, Остальное может подождать несколько дней.
приоритет. Имейте в виду, что некоторые дефекты могут быть нефиксируемыми, так как они зависят от конечного пользователя. Если ошибка не воспроизводится, отметьте это тоже. Некоторые недочеты проявляются из-за параметров настройки броузера конечного пользователя (рис. 6.15). В зависимости от оставшегося до запуска времени и требуемого уровня готовности планируйте предстартовое устранение ошибок, а также послестартовое, которое производится итерационным способом. После обнаружения ошибок исследуйте их. Пробуйте воспроизвести ошибку. Некоторые дефекты удается устранить лишь после нескольких попыток.
Заключительная проверка Всей проектной группой проведите заключительную проверку. Удостоверьтесь, что все системы работают. Следует проверить пять ключевых аспектов: • Проверка дизайна. У дизайнеров острый глаз на детали: они могут обнаружить неправильное выравнивание и неверную графику там, где хоро-
Документирование ошибок Документировать ошибки просто. А вот документировать их способом, который был бы значимым, воспроизводимым, детальным и ориентированным на решение, - проблема. Существует старый, проверен ный метод, пригодный для неформального тестирования: распечатать страницу, указать на ней броузер/платформу, обвести кружочком ошибку, устранить ее, затем отметить ошибку как исправленную (или оставленную, если она все же не может быть устранена). Имеется другой (и, возможно, более хороший) путь: используйте какой-нибудь инструмент для отслеживания ошибок - даже электронная таб-
лица Excel подойдет - хотя в каждый момент с файлом может работать только один человек. При любом выбранном методе необходимо выяснить следующее: • Тип броузера/платформы • Операционная система • Описание проблемы (одна строка) • Детальное описание • URL страницы • Серьезность проблемы • Можно ли воспроизвести ошибку?
Фаза 4: Производство и контроль качества
241
Рис. 6.15. Сбой изображения (вверху), проявляющийся на броузере AOL 4.0 в ходе процесса QA, но бессистемно: только на некоторых портативных компьютерах. Причиной послужила установка конечного пользователя: неотмеченная опция «Использовать сжатые изображения» («Use compressed images» ). Затем сброс кэша броузера исправил сбой и отобразил нормальное изображение (внизу). Ошибки, вызываемые конечными пользователями, в основном вне контроля QA-тестирования
шая группа QA-тестирования никогда бы не обратила внимание. Текст HTML может быть размещен неправильно или что-то не так с обработкой фотографий. Пусть арт-директор или дизайнер просмотрят весь сайт и на Мае и на PC, чтобы гарантировать качество. Проверка HTML. Убедитесь, что все таблицы, ячейки и графика выровнены должным образом. У группы могло не хватить времени для тонкой настройки. После QA-тестирования и устранения ошибок группа HTML должна убедиться еще раз, что сайт визуально работает и на MAC и на PC. Иногда при устранении ошибок нарушается код. Проверка функциональности/инженерии (если есть). Убедитесь, что все функциональные возможности соответствуют техническим спецификациям. Удостоверьтесь, что интеграция базы данных завершена и на постоянном сервере могут выполняться все транзакции. Проверка контента. Убедитесь, что заголовки выглядят как заголовки, что основной текст смотрится как основной текст... Вы видите общую картину. Удостоверьтесь, что форматирование содержимого выполнено производственной группой правильно и что все располагается ровно, как и должно быть.
242
Глава б
• Одобрение клиентом. Надеяться, что клиент просмотрит и одобрит весь сайт до запуска, вряд ли стоит. Удивительно, но зачастую, хотя сдача перепроектированного сайта подписывается всегда в маркетинговом отделе, высшее руководство или рекламодатели, которые должны одобрить сайт до его окончательного запуска, возможно, могут и не увидеть финальный сайт. Иногда есть возможность ждать до последнего момента, чтобы получить одобрение на самом высоком уровне, а иногда эта задержка вызывает хаос.
Резюме фазы 4 Фаза производства, вероятно, наиболее прямая и очевидная в Базовом процессе. Идет фактическое формирование сайта. Для импровизации здесь не так много места. Производство - прямой этап от начала до конца: опросить клиента, составить ведомость клиентских технических требований, проконсультировать визуальных и информационных дизайнеров относительно выполнимости (фазы 2 и 3), сформировать протосайт и проверить функциональные возможности (фаза 3), принять графические шаблоны от визуальных дизайнеров, разрезать на части и оптимизировать графику, сформировать шаблоны HTML и интегрировать облегченные сценарии, сформировать и заполнить индивидуальные страницы, интегрировать сложные функциональные возможности и внутренние приложения и/или разработки и все протестировать. Затем вздохнуть. Потом сформировать руководство по стилю оформления HTML и подготовиться к передаче сайта (фаза 5). Почему производственная группа участвует на протяжении всего процесса? Довольно ясно: без расширенной проверки, тестирования и перепроверки к фазе компоновки переходить опасно. Это все равно, что, выйдя с лыжами из подъемника, покатиться вниз по любому склону, не проверив, насколько он крут. Подумайте о возможных проблемах, иначе может оказаться, например, что когда вы формируете шаблоны HTML, ваши выпадающие меню блокируют место для рекламы, обозначенное в договоре, или вы пытаетесь разрезать на части и оптимизировать объект, который вообще не может быть преобразован в HTML. Любая из этих ситуаций привела бы к потерянным впустую многим часам, к напрасному программированию. Группе пришлось бы возвращаться назад, и если дата запуска определена твердо, на проект не хватило бы времени. Не волнуйтесь, однако. Базовый процесс настроен так, чтобы производство проходило с минимальными сбоями. Несомненно, ошибок не избежать - каждый сайт их имеет. Радуйтесь, что этап производства завершен! Ну, почти. Сайт сформирован. Он логично организован и будет прост в эксплуатации благодаря хорошо продуманному HTML. Сайт не содержит ошибок. Он дружествен по отношению к пользователю. Выглядит точно так, как задумано визуальными ди-
Фаза 4: Производство и контроль качества
243
зайнерами. Группа готова позаботиться о запуске и дальнейшей судьбе сайта. Если бы это был тот пирог, о котором говорилось в начале этой главы, то он был бы испечен. Теперь готовьтесь его подать.
244
Учебный пример
Janus Клиент: Janus Capital Corporation URL: www.janus.com Проектная группа: Sapient Эксплуатационная группа: внутренняя, Janus
ПРЕДЫДУЩИЙ
JANUS.COM [ПРЕЖНИЙ] В ПРОЦЕССЕ ПОДГОТОВКИ К ЗАПУСКУ НОВОГО JANUS.COM [ПЕРЕПРОЕКТИРОВАННОГО] еще до запуска предоставил своим пользователям возможность предварительного JANUS.COM [ПРЕЖНИЙ] представляет собой тип просмотра нового сайта, позволяя им участвовать в инсайта, строго подчиненного основной цели. Целью сай- вестициях уже на этом этапе. (2000 г.) та всегда было круглосуточное онлайновое самообслуживание.
245
Учебный пример
Корпорация Janus Capital Corporation на протяжении 30 лет играет ключевую роль в сфере взаимных фондов. Janus ориентируется, прежде всего, на активные инвестиции индивидуальных вкладчиков. Базируясь в Денвере, корпорация осуществляет большинство деловых контактов по телефону или в онлайновом режиме.
СОВРЕМЕННЫЙ
JANUS.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] использовал результаты социологических исследований, чтобы лучше понять мотивацию инвесторов. Введена более интуитивная и действенная для пользователей навигация. Внешнее оформление сайта изменено с целью более эффектного позиционирования бренда компании. Результат: Большая продуктивность при меньших издержках. В январе 2001 г. через Janus.com корпорация приобрела 62% инвесторов по сравнению с 32% в январе 1999 г.
См. цветную вклейку, стр. 350-351
Фаза 5: Запуск и сопровождение 7 Запуск сайта - важная, даже праздничная веха. Но это только этап; веб-сайт всегда находится в развитии.
Фаза 5: Запуск и сопровождение В сегодняшнем мире веб-разработок этот момент - запуск - вовсе не конец работы; это переход к совсем другой технологии: эксплуатационной поддержке. Кто будет заниматься этим и каковы их квалификация и возможности? Кто будет отвечать за создание контента после запуска? И не забудьте об оценке: требуется еще определить степень успешности сайта. Отвечает сайт первоначальным целям, сформулированным в креативном брифе? Удобен он для пользователей? Вообще, какое впечатление он производит на посетителей? На данной, пятой и заключительной фазе Базового процесса разница в действиях внутренней и внешней команд разработчиков становится даже более ощутимой, чем прежде, и поэтому для них становится ощутимее разница в значении слова «клиент». В начале книги объяснялось, какой смысл придается этому термину. Если для разработки сайта компания прибегает к услугам сторонней фирмы, специализирующейся на веб-дизайне, «клиентом» является компания, которая заключает контракт. Кроме того, слово «клиент» используется здесь для обозначения лиц компании, принимающих решения в отношении развития сайта, когда проектная группа является внутренней. В любом случае клиент - тот, кто утверждает бюджет, графики работ и дизайн. Интерпретируйте слово «клиент» в соответствии с собственной ситуацией.
Фаза 5: Запуск и сопровождение
Задачи этой фазы охватывают все, что необходимо для беспрепятственной передачи перепроектированного сайта из рук веб-дизайнеров на попечение эксплуатационной группы. Даже если обе эти команды составлены из тех же самых людей, их роли очень различны. Таким образом, эта глава о запуске сайта и обо всем, что должно быть продумано перед, во время и после того, как сайт оживет. Фаза 5 связывает концы с концами, включает некоторые мысли об анонсировании сайта и его регистрации в поисковых системах, а также дает ряд советов по способам оценки успешности и юзабилити сайта. Независимо от размера проекта обратитесь к этой главе для гарантии того, что серьезные промахи не обнаружатся в последний момент.
Передача сайта Любой дизайнер скажет, что проект завершен, только когда кто-то другой видит, что он завершен. Всегда кажется, что можно еще что-то улучшить, поэтому действительно трудно «заморозить» разработку. Однако в какой-то момент необходимо остановиться. Это момент, когда разработка, производство и весь проект редизайна прошли полный цикл - осталось только послать окончательный счет. Поймите, что никогда не может быть идеальных условий для этого: какие-то ошибки и проблемы будут неожиданно возникать. Веб-сайты по своей природе не могут быть «завершенными» в том смысле, как может быть завершена распечатка любого документа. Клиент и команда разработчиков должны заранее совместно решить, какое состояние считать моментом перехода от разработки сайта к его сопровождению. Четкое определение обязанностей и точки перехода, а также передача пакета документов помогают обозначить границу между разработкой и эксплуатационной поддержкой. В большинстве проектов одна команда отвечает за формирование и запуск сайта, а другой команде
249
Глава 7
250
Кто это сломал?
Кто должен решать проблемы, которые возникают в первые несколько дней/недель после передачи сайта? Вот реальная ситуация: команда веб-разработчиков сдала полностью протестированный (QA) сайт. Вскоре после запуска появилась программная ошибка. Внутренняя эксплуатационная команда клиента не берет на себя ответственность. Команда разработчиков считает, что изза брандмауэра это место можно было проверить только на сервере клиента, на который у них не было доступа. Однако поскольку подобная ситуация не была оговорена документально, разработчикам пришлось потратить на решение проблемы более 30 часов без дополнительной оплаты. В любом веб-проекте возможны подобные накладки, но если передача сайта организована должным образом, такие проблемы могут быть решены без излишних споров. Усвойте урок: заранее оговорите оплачиваемые услуги и сделайте это в письменной форме.
поручается его сопровождение. Даже при разработке сайта внутренней группой состав эксплуатационной команды часто бывает отличным от команды разработчиков. Но независимо от того, кто и кому передает проект, данный этап - это время, когда следует утрясти несколько вопросов, чтобы эксплуатационная группа могла справиться со своей задачей.
Завершение создания руководства по стилю оформления сайта После запуска сайта дизайнеры производства могут немного передохнуть и расслабиться. Однако не слишком долго, так как они должны добавить производственные аспекты к руководству по стилю оформления сайта, которое было начато визуальными дизайнерами в фазе 3: Визуальное оформление и тестирование. Производственные сложности различны для разных сайтов. Громоздкие таблицы, сложные наборы фреймов, включения и таблицы стилей, не говоря уже о системах управления содержимым и других функциях внутреннего интерфейса, - все это добавляет потенциальные проблемы, с которыми может столкнуться вторая команда. Делайте руководство по стилю оформления всесторонним, так как эксплуатационная группа будет использовать его как справочник при добавлении или изменении HTML-страниц или графики. Включите туда побольше информации, необходимой для обновления и поддержки сайта. Выражайтесь понятно и немногословно и будьте доступны, если у эксплуатационной команды возникнут вопросы. Установите и укажите письменно определенный интервал времени для ответов на вопросы и оказания технической помощи. Можно ожидать этого в течение нескольких недель. Отдельные вопросы возможны и в пределах нескольких месяцев. Но если вопросы продолжают поступать и после трех-шести месяцев, и эксплуатационная команда все еще нуждается в регулярной помощи
Фаза 5: Запуск и сопровождение
251
первоначальной проектной группы, то это должны быть уже платные услуги. Задолго до передачи сайта твердо установите, что запрашиваемая после запуска техническая помощь и поддержка, начиная с определенного срока после передачи, будет платной. Установите срок в 30, 45, 60 или 90 дней. Укажите его в письменном виде и постарайтесь подписать этот документ у клиента. (Лучшее место для этого документа - в разделе «Детали и уточнения».)
252
Глава 7
Производственная часть руководства по стилю оформления должна включать коды для HTML-тегов, атрибутов и определения графических элементов. Для справки воспользуйтесь приведенным перечнем рекомендуемых компонентов. Уровень детализации зависит от конкретного проекта. По стилю производственная часть должна соответствовать формату всего руководства. Рекомендуется сделать этот документ и наглядным и информативным (рис. 7.1). Некоторые проекты могут быть достаточно простыми и не нуждаться в вызываемых кодах.
Фаза 5: Запуск и сопровождение
253
Другие, наоборот, могут потребовать дополнительных элементов (например, схемы фреймов). Если используемые фреймы требуют определенного усилия в понимании логики, включите схему, отражающую соответствие между фреймами и файлами (рис. 7.2).
Рис. 7.1. Фрагмент производственной части руководства по стилю оформления для newriders.com
254
Глава 7
Рис. 7.2. В схеме фреймов необходимо четко указать, на какой фрейм направляют гиперссылки
Создание пакета передачи Рассматривайте пакет передачи как эстафетную палочку: передается то, что необходимо поддерживать в рабочем состоянии. Пакет передачи - это подборка всех материалов и документации проекта. Он включает все исходные файлы, изображения, шаблоны и спецификации, необходимые другой команде или лицу для сопровождения сайта после начального запуска. Соберите все файлы, необходимые для производства сайта. Четко обговорите со всеми членами проектной группы, какие файлы - как дизайнерские, так и HTML стоит архивировать. Вероятно, есть много промежуточных файлов, возможно, названных layout_01, layout_02, layout__06, final, final_2, final-final и так далее. Тщательно произведите отбор. Приведите в порядок файлы, подлежащие сохранению, дайте им понятные имена и заархивируйте каждый. Состав материалов изменяется от проекта к проекту, но полный пакет должен быть записан на компакт-диск и содержать, по крайней мере, следующие компоненты: • Все файлы Photoshop/Fireworks (по слоям, текст неотрендеренный) • Шрифты (или информация о том, где приобретать шрифты) • Все фотографии/иллюстрации (включая информацию об авторских правах не забудьте о правах на использование!) • HTML-страницы и шаблоны
Фаза 5: Запуск и сопровождение
• Руководство по стилю оформления (дизайн и производство) в HTML-формате • Технические спецификации • Корневой каталог сайта и другие необходимые файлы Этот пакет передачи должен быть одобрен руководителем проекта, ведущим дизайнером производства и арт-директором. Передача пакета знаменует передачу сайта. С этого момента сопровождение сайта возлагается на эксплуатационную команду. Поскольку никто не знает сайт так хорошо, как его создатели, передача материалов почти всегда должна сопровождаться обучением и инструктажами. При планировании обучения группы эксплуатационной поддержки сайта заранее оговорите общую продолжительность инструктажей, иначе это может превратиться в бесконечный процесс. Не задерживайте пакет передачи: эксплуатационная поддержка сайта начинается сразу же.
Отслеживание документации Хотя необязательно распечатывать всю электронную почту, важные письма - особенно касающиеся одобрения клиентом — следует собрать для внутреннего архива. Сохраните также все, что относится к обсуждению изменений размера проекта (бланки дополнительных затрат с подписями, заметки, планы проекта, контракты и так далее).
255
План юзабилититестирования Проведение юзер-тестов на работающем сайте - первая возможность увидеть, как взаимодействуют с сайтом реальные пользователи. Один из лучших сравнительных методов для получения поддающихся оценке результатов заключается в проведении юзабилити-тестирования на существующем сайте и на только что стартовавшем перепроектированном сайте и в последующем сравнении полученных результатов. Если какие-то разделы еще трудно использовать, включите соответствующие изменения в план эксплуатационной поддержки и повторите юзабилити-тестирование после полной модификации сайта.
256
Глава 7
При возможных спорах по поводу оплаты эти документы имеют большое значение для устранения недопонимания. Кроме того, в последующих проектах редизайна можно будет уже не гадать, а опираться на фактические расходы. Отсортируйте все документы - «бумажные» и электронные - и произведите отбор. Сохраните все важное в любом месте, используемом в компании для архивов: в скоросшивателе, папке или на компакт-диске. Как всегда, чем более организованной была работа на всем протяжении проекта, тем меньше усилий потребуется для выполнения этой задачи.
Проведение заключительной встречи Заключительная встреча - прекрасный повод взглянуть на проект в целом и оценить полученный опыт. На этой встрече, подводящей итоги развития проекта, должны присутствовать все ключевые фигуры. В случае внешней команды разработчиков заключительная встреча обычно проводится без клиента, если же проект выполнялся внутренней группой, то клиент часто входит в ее состав. Каждый проект - накопление опыта. Некоторые проекты выполняются гладко; другие вызывают проблемы. Начните заключительную встречу с широкого обзора проекта от начала до конца, а затем остановитесь на конкретных творческих достижениях, проблемах, разногласиях и аспектах, требующих улучшения методологии. Придерживайтесь позитивного подхода и избегайте персональных обвинений и осуждений (вам еще предстоит работать вместе). Скорее, следует выявить промахи в производстве, которые препятствовали работе. Что вызывало замедление? Что проходило гладко и как можно воспользоваться этими успешными технологиями в будущем?
Планирование инструктажей по сопровождению сайта На большинстве сайтов в ходе эксплуатации наблюдается печальная тенденция: их внешний вид, обработка графики и информационный дизайн постепенно нарушаются и теряют связность. Первоначальные дизайнеры больше не занимаются выбором иллюстраций, макетами страниц и размещением контента, а эксплуатационная команда начинает по-своему осуществлять дизайн и организацию, особенно при включении нового содержимого. Избегайте этого. Установите удобные в сопровождении стандарты. Даже если эксплуатационная команда имеет опыт в дизайне и компоновке страниц и даже если она состоит из творческих личностей с собственными идеями дизайна, целостность сайта зависит от поддержания того созданного облика сайта, который был утвержден. Огорчительно наблюдать, как перепроектированный сайт медленно разваливается, часто без видимой вины членов эксплуатационной группы. Причиной обычно является их неадекватная подготовленность к выполнению своей задачи.
Фаза 5: Запуск и сопровождение
Четко ставьте задачи, объясняйте (с помощью руководства по стилю оформления) графику и HTMLстандарты, а также технические цели сайта. Считайте это профилактикой для перепроектированного сайта.
Возрождение К моменту перемещения сайта на постоянный сервер все испытания должны быть завершены, а производство должно быть заморожено. Поскольку наверняка остались еще какие-то дефекты, составьте четкий план устранения их на месте после запуска. Тем не менее, с завершением основного процесса проверки качества (QA-тестирования) сайт готов к публичному просмотру. Поздравляем! Просто перенос сайта на новое место нуждается в рассылке объявлений о его перемещении, а новый запуск сайта позволяет объявить о возрожденном, перепроектированном сайте с тем же самым, знакомым URL. Выработайте стратегию анонсирования задолго до даты запуска. Продумайте свои действия по рекламе и продвижению сайта при его возрождении и соответственно распределите задачи. Будет ли заниматься этим внешняя команда веб-разработчиков? Или это задачи только внутренней команды? Будет ли привлекаться также рекламное агентство? Каков календарный план? Часто для запуска устанавливается строго определенная, знаменательная дата. Она может быть приурочена к разнообразным внешним событиям, любое из которых могло бы способствовать анонсированию перепроектированного сайта. К таким событиям относятся различные выставки или презентации компании, представление годового отчета или другие мероприятия с твердо установленной датой. Если дату запуска определяют внешние факторы, поддерживайте контакт с ответственными за них людьми (например, с маркетинговым отделом или внешним рекламным агентством), чтобы своевременно сообщить о сбоях в графике работ или радикальном изменении контента. 9 Зак 667
257
258
Глава 7
Мягкий запуск
Текущая аудитория и ее зона комфорта
Представьте себе график, наполненный свободными паузами. Вообразите, что имеете роскошь запускать сайт на действующем сервере и неторопливо тестировать его там, не испытывая давления со стороны внешних факторов, например крупной рекламной кампании или представления годового отчета. Мягкий запуск - это спокойный перенос сайта на действующий сервер. Иногда мягкий запуск означает также готовность сайта не в полном объеме, например: «1 октября мы производим мягкий запуск с 85% контента. Остальное содержимое планируется подготовить к 1 декабря и тогда же начать рекламу перепроектированного сайта». Жесткий запуск - просто ситуация с жестким крайним сроком, с незыблемой датой, которая обычно обусловлена внешними ограничениями по времени. Всегда изначально планируйте мягкий запуск. Если клиента это не устраивает, очень четко оговорите возможные риски: дефекты, связанные с функционированием на действующем сервере (например, проблемы с брандмауэром), не могут быть обнаружены до перемещения сайта.
Облегчить принятие вашей текущей аудиторией нового облика сай- | та поможет ее заблаговременное оповещение о редизайне. Создайте страницу, объявляющую о редизайне и ясно объясняющую новые особенности и навигацию. Свяжите ее непосредственно с главной страницей. Сделайте своих пользователей участниками на- 1 чавшегося редизайна. В качестве руководства воспользуйтесь следующими предложениями: •
•
•
•
Перепроектированный сайт. Оповестите свою аудиторию о редизайне сайта. Дайте пользователям знать, что целью редизайна является облегчение их работы. Новые возможности. Перечислите новые особенности контента. Добавляется ли новый тип информации? Расширяется ли I предметная область FAQ (часто задаваемых вопросов)? Если редизайн происходит в несколько этапов, что намечено на ближайший из них? Новая навигация. Сообщите аудитории о произведенных из- I менениях. Например: «Мы реструктурировали наш сайт и ввели больше связей между страницами, чтобы стало проще перемещаться и получать наиболее часто отыскиваемую информацию. Мы разбили на части длинные страницы, требующие много прокрутки, и добавили вверху страниц путеводные «хлебные крошки», чтобы всегда было понятно, в какой части сайта вы находитесь». Обратная связь. Стимулируйте обратную связь. Например, напишите так: «Понравился ли вам перепроектированный сайт? Нет ли у вас каких-либо предложений? Не обнаружились ли нарушенные ссылки или сбои? Оставьте нам электронное сообщение. Мы хотели бы знать ваше мнение».
Подготовка плана анонсирования В зависимости от состава аудитории перепроектированный сайт может анонсироваться как в Сети, так и вне ее. Используйте уже существующие методы и текущие материалы (буклеты, визитные карточки, объявления), а также исследуйте новые возможности. Независимо от того, каким будет запуск — мягким или с незыблемой датой, — удостоверьтесь, что маркетинговая кампания подготовлена, но не позволяйте маркетингу управлять запуском в ущерб интересам сайта (если вы в силах справиться с этим). Смотрите советы по анонсиро-
Фаза 5: Запуск и сопровождение
ванию сайта, которые помогут правильно и своевременно объявить о перепроектированном сайте.
Регистрация в поисковых системах Согласно информационному бюллетеню NetMechanic.com, 85% пользователей Интернета для отыскания сайтов используют поисковые механизмы. Факт регистрации вашего сайта в популярных поисковых системах не означает, что на этом можно успокоиться и просто ждать пользователей, хотя в конечном счете и это работает (слегка). Вебсайты запускаются ежедневно, и конкуренция за место в первой десятке результатов поиска постоянно растет. Регистрация в поисковых системах не столь проста, как звучит в некоторых объявлениях: «За 99 долларов зарегистрируем ваш сайт во ВСЕХ ЛУЧШИХ ПОИСКОВЫХ СИСТЕМАХ!». Остерегайтесь подобных предложений, которые похожи на объявления о продаже подержанных автомобилей. Хотя они действительно обеспечат регистрацию вашего сайта и, возможно, перечисление его в некоторых механизмах поиска, результаты могут быть далеки от того, на что вы надеялись. В исследовании, проведенном www.workz.com, было опрошено 37 владельцев сайтов с целью выяснить, какие методы они используют, чтобы повлиять на рейтинг сайта в поисковых механизмах, сколько времени они тратят на это в неделю и каких видимых результатов добиваются. Опрос ясно показал, что лучшие результаты достигаются при непосредственной ручной регистрации в ключевых поисковых системах и при еженедельной затрате одного часа на изменение и улучше-
В Сети существует множество ресурсов, которые помогут эффективнее представить ваш сайт. Мы рекомендуем www.searchengi-
newatch.com, www.selfpromotion.com и www.workz.com - хорошие источники, богатые полезной информацией.
259
Задержка рекламы Не заказывайте оплачиваемую рекламу, по крайней мере* на первые две недели после намеченной даты запуска. Что-то может не сложиться. Процесс QAтестирования может обнаружить больше недочетов, чем ожидалось. Проектная группа может не справиться с исправлением всех ошибок к запланированному сроку. Если можно, дайте несколько недель на послестартовые испытания, чтобы гарантировать надежную работу сайта на постоянном сервере (мягкий запуск), а после этого начинайте внешнюю маркетинговую кампанию. Подумайте, стоит ли платить за рекламу, которая приведет новых пользователей на недоработанный сайт. У вас только один шанс произвести хорошее впечатление. Учтите это.
262
Теги TITLE Теги TITLE - это гораздо больше, чем просто заголовки в верхней части окна броузера, но часто они недооцениваются и неправильно используются. Это один из наиболее важных факторов, связанных с эффективностью результатов поисковых механизмов. При создании заголовка имейте в виду, что в списке результатов поиска потенциальный пользователь будет видеть только это. Кроме того, заголовки берутся за основу названия закладок; наличие информативного заголовка делает закладку удобной и идентифицируемой.
Глава 7
Регистрация через платную регистрационную компанию. Существуют сервисы (некоторые из них хороши, другие - не очень, третьи - просто потеря времени), ценность которых в том, что они, как утверждается, знакомы с отраслью и имеют автоматизированные системы, позволяющие легко и быстро произвести представление и регистрацию в поисковых системах. Ставка за сервис Submitit.com - минимум 59 долларов за два URL. Registerit.com - бесплатный сервис с регистрацией в 12 поисковых системах. Хотя эти сервисы могут сэкономить вам время, мнения о них остаются неоднозначными. Использование специальных программ для контроля и регистрации. Существуют программные инструментальные средства, которые помогают проверять и загружать HTMLстраницы, а также автоматически регистрировать их в поисковых системах в надежде удержать ваш сайт в первой десятке. Программа Web Position Gold (www.webposition.com) получила благоприятные отзывы и относительно недорога.
Незаполненный бланк инструмента для создания МЕГА-данных можно загрузить с www.web-redesign.com. ->
Фаза 5: Запуск и сопровождение
263
Этот инструмент поможет вам создать МЕГА-информацию: прежде всего, ключевые слова. Пожалуйста, не путайте это инструментальное средство с инструментами для представления сайта в поисковых системах или инструментами для обеспечения лучшего положения в результатах поиска. Данное пособие - скорее, перечень сведений, которые следует учитывать при генерировании МЕГА-информации, используемой поисковыми системами. Пусть клиент воспользуется этим перечнем, чтобы предоставить соответствующие сведения руководителю проекта. Передайте их дизайнерам производства HTML для интеграции в страницы.
264
Глава 7
Здесь приведены два примера МЕТА-информации.
Сравните и скопируйте: Найдите компании, которые предлагают аналогичные сервисы, и посмотрите их ключевые слова. Нечестно? Возможно, но все так делают.
Запуск сайта Все испытания на рабочем сервере завершены, все ошибки устранены, производство заморожено и план анонсирования готов. Все системы работают. Запланируйте загрузку сайта на действующий сервер в непиковые часы, чтобы время простоя как можно меньше нарушило регулярный веб-трафик. Тогда... Запуск! Сайт оживает. Становится доступным для вашей реальной аудитории и основных посетителей.
Фаза 5: Запуск и сопровождение
Важная часть запуска - незамедлительное QA-тестирование на постоянном сервере. Если вам удалось запланировать мягкий запуск, то внешнего давления нет и тестирование можно провести в относительно неторопливом режиме (в течение нескольких дней от момента запуска, но желательно не затягивать). Если же сайт запускается в строго установленный момент, возможно, придется поспешить, чтобы провести тестирование на постоянном сервере. Обеспечьте возможность вернуться к старому сайту, если вдруг всплывут вопиющие ошибки. Запуск - это большое черное пятно на сером фоне в период между разработкой и сопровождением сайта. Клиент и команда разработчиков должны прийти к полному согласию о готовности сайта к возрождению. Это может казаться простым делом, но часто приходится долго топтаться взад и вперед между устранением недочетов и усовершенствованиями, пока, наконец, будет достигнута готовность к запуску. Потенциальная проблема кроется также в передаче сайта клиенту без возможности проверить его на клиентском сервере. В этот момент могут всплыть любые проблемы. А кто должен проводить немедленное послестартовое тестирование? Эксплуатационная команда или разработчики? Убедитесь, что это четко оговорено. И если вы — внешняя команда, запускающая сайт на сервере клиента в строго установленную дату, своевременно позаботьтесь о получении необходимого доступа. Когда наконец придет время возрождения сайта, возрождайте его. Вуаля! Сайт уже в эксплуатации. Отпразднуйте это событие и готовьтесь оценить плоды своих трудов. Откат - это последняя сохраненная и проверенная версия сайта, Запаситесь откатной версией старого сайта на случай, если чтото не заладится с запуском.
265
Расставляйте устраняемые дефекты по приоритетам Можно не успеть сделать до запуска все до последней мелочи. Следует составить список расположенных по приоритетам изменений и подлежащих устранению ошибок на послестартовый период. Достичь совершенства сайта очень трудно, даже проведя полное QA- и юзабилити-тестирование. Вполне допустим некоторый приемлемый уровень недостатков. В первую очередь позаботьтесь о вопиющих ошибках ~ошибках, которые должны быть устранены до запуска - и запускайте сайт. Исправьте следующие по важности недочеты, а затем все остальное. Если вы внешняя команда, готовящаяся к передаче сайта, определите, с чем сможет справиться эксплуатационная команда. Передайте сайт, когда все будет готово надлежащим образом.
Глава 7
266
Эрик Уорд (Eric Ward) о том, как сделать сайт достойным ссылки на него
Почему некоторые сайты связаны ссылками, кажется, со всем Интернетом, в то время как другие сайты почти невидимы? Почему поисковые системы ставят один сайт выше другого? Основная архитектура Сети позволяет устанавливать ссылки между любыми двумя документами и в том и в другом направлениях. Это законно, это хорошо, это ожидаемо и это главное, что делает Сеть столь полезной* Чем будет Сеть без ссылок? Вообразите поиск информации в Сети, когда сайты не имеют никаких ссылок к другим сайтам. Представьте себе Yahoo без всяких ссылок! Существует несколько способов создания ссылки, ведущей от одного сайта к другому. Рекламные баннеры прямо связывают один сайт с другим, то же самое делают и текстовые гиперссылки в информационных бюллетенях. Кнопки, значки, пиктограммы, дочерние ссылки, листинги каталогов, листинги результатов поиска - все это просто ссылки и ничего более. Нажмите их, и вы окажетесь где-то в другом месте. Сайт ставит ссылку на другой сайт по трем основным причинам. Во-первых, ему за это платят. Во-вторых, тот сайт разработан так, что поисковые системы могут легко проиндексировать его. И в-третьих, по мнению вебмастера, тот сайт имеет содержимое, достойное ссылки.
Что касается ссылок из поисковых систем, тут все определяет суровая действительность. При тысячах новых веб-страниц, добавляющихся к Сети ежедневно, приходится конкурировать с постоянно растущей базой данных контента. При такой конкуренции с таким множеством других сайтов просто удивительно, как много сайтов выбирают себе дизайн, который делает их индексирование поисковыми системами практически невозможным. Чтобы сделать свой сайт как можно более «индексабельным» для поисковых систем, избегайте типичных элементов дизайна, запутывающих механизмы поиска. Например, большие графические карты ссылок ничего не говорят механизмам поиска о вашем сайте. Поисковые механизмы рассматривают только HTML-тексты. Существует такое множество способов, которыми сайты вредят самим себе в отношении поисковых систем, что их невозможно охватить в одной статье, но вот несколько общих советов по устранению препятствующих поиску факторов, которые могут быть присущи вашему сайту: • Постарайтесь, чтобы каждая ваша вебстраница была достижима с вашей главной страницы максимум за три щелчка. Большинство поисковых механизмов при индексации сайта просматривают только три уровня глубины.
Фаза 5: Запуск и сопровождение
• Удостоверьтесь, что каждая страница на вашем сайте имеет теги TITLE и теги МЕТА-описаний и ключевых слов, а также теги ALT для всех изображений. Напишите что-нибудь в этих тегах. • При наличии фреймов на сайте убедитесь, что используете теги NOFRAMES, иначе ваши страницы не будут индексироваться. • При наличии карт ссылок добавьте гденибудь на той же странице и текстовое навигационное меню. Это всего лишь несколько штрихов из множества, но они демонстрируют сложность вопроса. Самое лучшее, что можно сделать, - пойти на сайт, подобный сайту Дэнни Салливана (Danny Sullivan) Search Engine Watch (www.searchenginewatch.com), целиком посвященному этим аспектам. Ежедневное выделение
267
нескольких минут на чтение материалов по этой теме обогатит ваши знания и даст некоторую перспективу. Эрик Уорд создал первый в Сети сервис по способам анонсирования и линкования новых веб-сайтов еще в 1994 г. - сервис, который он предлагает и сегодня. Его клиентский список является отражением списков «Кто есть кто в мире онлайновых брендов», включая первоначальные запуски сайтов Amazon.com, Virtual Vineyards, OnSale, Link Exchange, Microsoft, Rodney Dangerfield, AMA, BBC, Kellogg's и Weather Channel. В 1995 г. его сервисы получили награду Tenagra Award For Internet Marketing Excellence, а журнал Websight причислил его к 100 наиболее влиятельным людям Сети. Кроме того, Эрик пишет для ClickZ и Advertising Age.
Страница-заставка (англ. splash) - начальная страница сайта, не содержащая в себе ничего, кроме приветствия и/или одной-двух картинок и ссылки на главную страницу сайта (иногда на две или три главных страницы в зависимости от количества версий сайта). - Примеч. науч. ред.
Глава 7
268
Эксплуатационная поддержка сайта Эксплуатационная поддержка - горючее, которое сохраняет сайт функционирующим. Ваша стратегия анонсирования может заманить посетителей на сайт однажды, а дважды? А как насчет регулярного посещения? В недавнем исследовании Forrester Research Inc. опрошено 8600 семей, имеющих доступ в Интернет, с целью выяснить, почему люди повторно возвращаются на веб-сайты (рис. 7.6). Лидерство в ответах занял высококачественный контент, близко за ним следуют легкость в использовании, быстрая загрузка и частое обновление. Имейте в виду, что только регулярное обновление сохранит высококачественное содержимое свежим и новым. Это делает эксплуатационную поддержку ответственной сразу за первую и за четвертую причины повторных посещений веб-сайтов. Эксплуатационная поддержка, однако, не должна быть произвольной. Необходимо иметь план незамедлительных действий и проверок после запуска сайта и продолжающегося, долгосрочного, регулярного обновления. Хорошо иметь эксплуатационный план на 1-2 года. Включите в него меры по Рис. 7.6. Forrester Rest arch Inc. опрошено 8600 семей, имеющих доступ в Интернет, с целью выяснения, почему люди повторно возвращаются на веб-сайты. Диаграмма отражает системные концепции (www.system-concepts, com /articles /forrester.html)
Фаза 5: Запуск и сопровождение
устранению сбоев, аспекты юзабилити и график обновлений. Не забудьте о получении отзывов пользователей и юзабилити-тестировании - сразу после запуска сайта и через несколько месяцев. Обратная связь с пользователями поможет дальнейшему формированию перепроектированного сайта.
Оценка возможностей группы сопровождения В большинстве случаев команда разработчиков передает сайт уже имеющейся в компании группе сопровождения. На вопрос разработчиков: «Кто будет заниматься сопровождением сайта?» клиент нередко с гордостью отвечает: «Чарли из отдела маркетинга немного знает HTML. Он шесть месяцев публиковал наши пресс-релизы. Мы считаем его великолепным работником и планируем поручить ему также заботу о новом сайте». Существует простая истина: от личности, ответственной за обновление сайта, требуется достаточно высокий уровень навыков эксплуатационной поддержки перепроектированного сайта. Команда веб-разработчиков должна оценить возможности группы сопровождения в соответствии со сложностью нового сайта. Для «Чарли из отдела маркетинга» будет явно проблематично сразу взяться за сопровождение динамически управляемого сайта или сложной конструкции вложенных фреймов, если он имеет только поверхностные знания FrontPage. Либо нужно затратить десятки тысяч долларов на обучение Чарли, либо посоветовать клиенту нанять одного-двух специалистов, а Чарли поручить менее техническую работу. Мы рекомендуем следующий тест. Задолго до передачи сайта, но предпочтительно после того, как заполнена и проанализирована ведомость клиентских технических требований (чтобы дизайнеры производства уже имели представление о сложности редизайна), устройте проверку квалифика-
269
Наблюдайте за своим сервером В случае если вы не можете наблюдать за своим сервером ежедневно и круглосуточно, воспользуйтесь специальными сервисами: Мониторинг сервера менее чем за 10 долларов в месяц того стоит, если есть подозрение на сбои сервера, но непонятно, когда они происходят. Один из сервисов уведомления серверов, называемый Server Check Pro (через NetMechanic на www.net-
mechaniccom/monitor.htm), при обнаружении проблемы посылает сообщение на пейджер или по электронной почте. Его роботы проверяют ваш сайт каждые 15 минут. Это очень здорово и не требует больших человеческих усилий.
270
Глава 7
ции группы сопровождения. Возродите старый проект, один из ваших наиболее сложных макетов HTML. Пусть группа сопровождения обновит его. Пусть приведут в порядок код. Посмотрите, как они добавляют информацию, которая искажает таблицы. Предложите им при добавлении новой информации архивировать старую. Могут ли они поддерживать структуру файлов? Могут ли читать и понимать HTML? Знают ли Flash или DHTML (если это требуется)? Понимают ли приложения для управления контентом (если это необходимо)? Понаблюдайте за ними. Понимают ли они то, что делают, или действуют наугад? Довольно часто люди из группы веб-сопровождения обладают удивительным уровнем знания производства и нуждаются только в небольшом инструктаже по специфике сайта. В некоторых случаях, однако, становится ясно, что необходим дополнительный эксплуатационный персонал.
Внутренние и внешние группы сопровождения Для многих компаний рост потребности в ежедневном обновлении сайта, динамическом генерировании контента, управлении системами е-коммерции и эффективном обслуживании заказчиков привел к формированию на местах толковых и квалифицированных эксплуатационных команд. Потребности сопровождения сайтов различны. В зависимости от глубины контента после запуска и частоты обновлений для эксплуатационной поддержки может быть достаточно нанять в дополнение к имеющейся команде еще одного дизайнера производства HTML для простого обновления содержимого. На более сложных сайтах может потребоваться целая группа вместе с руководителем проекта. Если речь идет о довольно статическом сайте с очень простыми ежедневными или еженедельными обновлениями (или даже сайте брошюрного типа с относительно небольшими ежемесячными или ежеквартальными изменениями), лучшим решением мог бы быть контракт с внешним разработчиком или привлечение на неполную ставку нового сотрудника. При выборе между внутренней группой сопровождения и необходимостью платить гонорар (регулярную оплату, обычно ежемесячную или, для более статических сайтов, ежеквартальную) внешней компании следует рассмотреть несколько аспектов. Почти всегда дешевле использовать внутренние наемные ресурсы на полный рабочий день. Однако если сопровождение сайта занимает только 20 часов в неделю, то нет смысла привлекать штатного сотрудника с полным рабочим днем. Взвесьте все «за» и «против» для различных вариантов; это имеет смысл с нескольких точек зрения: технической, административной и финансовой.
Фаза 5: Запуск и сопровождение
271
272
Глава 7
Разработка плана эксплуатационной поддержки В первой фазе веб-разработки (фаза 1: Определение проекта) мы рекомендовали, чтобы клиент заполнил эксплуатационный опрос, который поможет согласовать и сформулировать окончательные цели редизайна. Вы использовали собранную информацию, чтобы структурировать перепроектированный сайт с расчетом на его будущий рост в процессе продуманной эксплуатационной поддержки. Повторно просмотрите эксплуатационный опрос. Каковы были цели? Ежедневное обновление новостей? Еженедельная рекламная рассылка по электронной почте в HTML-формате? Пресс-релизы? Добавление новых продуктов? Стандартные операции, например обновление данных об авторских правах, архивирование статей и так далее? Теперь, когда производство завершено, обновите ответы в опросах, включая все, что клиент, возможно, добавил по ходу разработки. Теперь следует спланировать все это. Выясните, что требуется для сопровождения сайта, и удостоверьтесь, что для этих задач достаточно ресурсов. Простая электронная таблица - с временем по строкам (в часах/днях/неделях/ месяцах) и разделами сайта, которые будут обновляться, по столбцам - ясно покажет, что необходимо обновлять и когда (рис. 7.7).
Рис. 7.7. Простая электронная таблица послужит руководством для плановых работ
Фаза 5: Запуск и сопровождение
273
274 Собирайте отзывы пользователей Один из лучших способов оценить успех сайта при запуске сделать это через обратную связь с пользователями. Обеспечьте на своем сайте оперативность и легкость обратной связи, чтобы собирать все комментарии, жалобы и одобрения. Установите заметный индикатор кнопку - обратной связи на каждой странице. Особенно просите пользователей комментировать новые возможности перепроектированного сайта. Количественные данные собрать непросто. Некоторые сайты имеют расширенные опции получения обратной связи. Продукт компании OpinionLab (www.opinionlab.com) - OnlineOpinion обеспечивает постраничную рейтинговую систему, которая позволяет сайтам получать мгновенную оценку (рис. 7.11). Главное преимущество здесь в том, что от пользователя не требуется ничего, кроме щелчка мышью.
Рис. 7.11. OnlineOpinion используют adobe.com, netscape.com, dell.com и другие
Глава 7
Оценка успешности сайта В связи с быстро изменяющейся экономикой Интернета и эволюционирующей природой Сети сейчас более важно, чем когда-либо, проследить успех сайта после его запуска. Главная цель редизайна сайта — не просто изменить его, но и достичь конкретные бизнес-цели. Эти цели, заявленные в креативном брифе, могут включать повышение используемости/трафика, рост онлайновых продаж, уменьшение количества обращений заказчиков в технические службы, повышение популярности сайта и так далее. Понимание этих целей как качественно, так и количественно очень важно для определения лучших методов оценки успешности перепроектированного сайта. Часто значимость сайта оценивается по трафику, а успех измеряется количеством хитов. 2 Продажи, особенно прямо с веб-сайта, являются еще одним показателем успеха. Но поскольку рекламирование является еще одним источников дохода компаний, становится все более важным понимание трафика сайта и хитов страниц, а также демографии пользовательской базы. Это поможет не только обеспечить рекламодателей необходимыми данными, чтобы они смогли достичь собственных выгод, но также поможет компаниям понять, какие разделы их сайтов более популярны, какие функции сайта работают, а какие - что также важно не работают. Некоторые компании тратят много денег и времени, анализируя файлы журналов сервера, в которых регистрируется, кто приходит на сайт (и откуда), как долго находится на сайте, какие основные маршруты выбирает и где обычно заканчивает сеанс. Это было бы прекрасной информацией, если бы соответствующие данные можно было достоверно собрать со страниц, а страницы отражали бы истинные пользовательские регистрационные Хит (от англ. hit) - один показ веб-страницы сайта. Примеч. науч. ред.
Фаза 5: Запуск и сопровождение
275
записи. К сожалению, совсем непросто разобрать эти сырые сведения и превратить их в значимые сводки. На практике не многие компании выделяют на это время и ресурсы. Альтернативой был бы один из многих пакетов программ, специализирующихся на сборе информации, отслеживании результатов и предлагающих методы повышения посещаемости (рис. 7.12).
Рис. 7.12. Какие страницы на вашем сайте наиболее популярны? Можете ли вы охарактеризовать поведение и модели пользователей? Эта типовая диаграмма сгенерирована из обычного файла журнала сервера и показывает наиболее посещаемые страницы (см. цветную вклейку, стр. 360)
Глава 7
276
Обнаружение хакеров Как узнать, что сайт подвергся вторжению? Это может быть ужасно: не останется никакого сайта или весь ваш текст может быть внезапно заменен мусором. Это может быть оскорбительно: все изображения сайта могут быть заменены порнографическими картинками (реальная история, такое случалось). Это может быть более тонко и разрушительно: внезапное, необъяснимое увеличение или уменьшение типичного трафика может свидетельствовать о вторжении. Чем больше вы наблюдаете за своим сайтом, тем скорее заметите, когда что-что идет неправильно. Оставайтесь осведомленными!
Укрепление безопасности сайта Безопасность, как правило, не входит в круг задач внешней команды веб-разработчиков, так как обычно никто в команде не имеет соответствующей квалификации. Однако это может быть задачей внутренней группы - нравится ей это или нет. В таком случае желательно иметь в штате специалиста по безопасности, чтобы предохранять сайт от вторжений хакеров и контролировать повреждения в случае нарушения безопасности. Грустная действительность состоит в том, что хакеров великое множество и они неустанны и агрессивны. Для Интернета они являются эквивалентом разбойников, которые пачкают краской из баллончиков дома и автомобили, врываются в здания и магазины или просто неприятно шумят. А хакеры крадут персональную информацию, вызывают хаос и их почти невозможно поймать. Так или иначе, вы теряете доверие пользователей и доходы, когда хакеры вынуждают вас выводить сайт из Сети (рис. 7.13). В этом разделе мы говорим о безопасности на очень элементарном уровне; это не должно быть воспринято как всесторонний обзор с практическими ре-
Рис. 7.13. В декабре 2000 г. хакер ворвался в онлайновый магазин The Gap и нанес немало вреда, вынудив его закрыться на время устранения проблем
Фаза 5: Запуск и сопровождение
277
комендациями по безопасности сайта. Используйте этот раздел, скорее, как перечень вопросов, над которыми следует подумать.
Резюме фазы 5 Поздравляем! Перепроектированный сайт запущен и перешел от разработки к сопровождению. Если вы - внешняя команда, это момент расставания. Передайте сайт и оцените успех проекта. Сработал для вас Базовый процесс? Какие этапы прошли гладко? Где наблюдались сбои? Оцените, откорректируйте Базовый процесс, чтобы приспособить его к вашей собственной технологии разработки, и переходите к следующему проекту. Это будет редизайн? Нет проблем вы обогатились опытом, выполнив этот проект. Вы успешно завершили пять фаз разработки редизайна сайта: «Определение проекта», «Разработка структуры сайта», «Визуальное оформление и тестирование», «Производство и контроль качества (QA)» и «Запуск и сопровождение». Не останавливайтесь здесь. Следующие две главы - глава 8 «Юзабилити-тестирование» и глава 9 «Анализ конкуренции» - описывают чрезвычайно полезные процессы, которые можно добавить к технологии, если позволяют время и ресурсы. Мы настоятельно рекомендуем их. Если вы - внутренняя команда и только что приняли перепроектированный сайт для запуска, на вас возложена значительная и постоянная ответственность. Регулярная регистрация в поисковых системах и продолжающиеся исследования успешности сайта - ваши задачи. Поддержание стандартов и включение нового
278
Глава 7
содержимого также будет вашей ежедневной/еженедельной/ежемесячной задачей. Перепроектированный сайт - это как машина, которая была восстановлена с использованием множества новых деталей. Однако знать, как сформирована эта машина, всегда полезно. В сущности, эксплуатационная поддержка - это просто регулярное введение нового контента. Зачем же так суетиться и тратить так много времени, разрабатывая рекомендации и планы? Разве это не должно просто идти своим ходом? Возможно, но, скорее всего, нет. На практике существенная часть сайтов после запуска со временем «хиреет» из-за отсутствия хорошего сопровождения. Наличие плана всегда помогает. В самом начале (при определении этапов) или в конце сдачи работы (при подготовке к эксплуатационной поддержке) независимо от задачи мы всегда рекомендуем выделить время на определение целей, формирование методологии, распределение бюджета, составление графиков работ и распределение обязанностей. Брать все с налета редко получается. Фактически многие сайты, подлежащие редизайну, застоялись в «Стране Без Плана» до принятия решения о редизайне. Сохраняйте свой перепроектированный сайт здоровым и растущим с периодическими перезапусками, которые гладко вводят усовершенствования и изменения, отвечающие потребностям пользователей. Тогда долго не придется снова заниматься редизайном.
Фаза 5: Запуск и сопровождение
279
280
Учебный пример
Food.com
ПРЕДЫДУЩИЙ
F00D.COM [ПРЕЖНИЙ] подавал себя в цветах и тематике своей маркетинговой кампании и старомодном стиле 1950-х. Причудливо и с юмором, да, но загрузка была долгой, а юзабилити было не на высоте.
Учебный пример
281
Food.com обслуживает поставщиков продовольствия, обеспечивая рестораны возможностью онлайнового заказа и службой доставки. Хотя бизнес продолжает расширяться в различные связанные с продовольствием отрасли, основой Food.com остается «Интернет-служба заказов и доставки».
СОВРЕМЕННЫЙ
F00D.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] развился в продовольственный портал с дополнительными разделами (обеды, кулинария и новости) и новым, простым и ясным имиджем бренда. Цели редизайна были больше ориентированы на аудиторию в отличие от прежнего подхода, сфокусированного на рестораны и управляемого технологией. (2000 г.)
Результат: Улучшение юзабилити благодаря ясным указателям и понятным пользовательским маршрутам. Количество онлайновых заказов возросло.
См. цветную вклейку, стр. 352-353
Юзабилити-тестирование
8
Фокус-группы отражают то, что по мнению пользователей они могли бы делать. Юзабилити-тестирование отражает то, что пользователи фактически делают.
Юзабилити-тестирование Каким образом сайт перепроектируется? Чаще всего группа людей собирается вместе и предпринимает «мозговой штурм»: «На новом сайте нам нужно это» или «Этот аспект не работает на текущем сайте». К сожалению, такой тип генерирования идей полностью основан на предположениях, персональных мнениях и предубеждениях людей, руководящих компанией. Почему сайт следует перепроектировать? Одна из причин - сайт не отвечает потребностям пользователей, и они не могут найти то, что ищут. Команда веб-разработчиков должна думать о юзабилити: будет ли сайт после редизайна функционировать, как запланировано? Желает ли клиент/дизайнер, чтобы при проверке сайта реальные пользователи получили неизгладимое впечатление от этого события? Что может стать камнем преткновения и проблематичным местом? Мы очень верим в значимость проведения юзабилити-тестирования. Понимание юзабилити-тестирования чрезвычайно важно, и эта глава поможет сориентировать вас в этом вопросе. Она построена в виде беглого обзора основ, который позволит вашей команде определить наилучшие способы получения прямых откликов пользователей. Многие компании полагают, что они уже проводят проверку юзабилити, но на самом деле они работают с фокус-группами или проводят онлайновые опросы. Это не юзабилити-тестирование. Хотя любые собранные отклики представляют ценность, их результаты радикально отличаются.
Юзабилити-тестирование
285
Для всестороннего и глубокого проникновения в понятие юзабилити самым подробным источником из существующих является книга Якоба Нильсена (Jakob Nielsen) «Веб-дизайн: книга Якоба Нильсена», пер. с англ., «Символ-плюс», 2001 («Designing Web Usability», New Riders, 1999) и его онлайновые статьи (www.useit.com). Мы не вдаемся так глубоко в предмет юзабилити. Мы оставляем теорию в стороне и просто объясняем, как можно встроить юзабилити-тестирование в вашу привычную технологию.
Понимание юзабилити Юзабилити определяется как легкость в использовании, практичность. Насколько легко в действительности заставить что-то работать? Обращаться с консервным ножом легко. Управлять самолетом сложно. Управление видеомагнитофоном должно быть простым, но обычно заставляет задуматься. Юзабилити веб-сайта является критерием того, как отдельный пользователь фактически перемещается, отыскивает информацию и взаимодействует с вашим веб-сайтом. Обратите внимание на слово «фактически». Понятие юзабилити включает в себя не ваши умозаключения о том, как пользователи будут перемещаться, осуществлять поиск и взаимодействовать. В отличие от опросов или фокус-групп, юзабилити-тестирование - это процесс один на один, основанный на подходе «наблюдай и учись». Один ведущий наблюдает за одним пользователем. Результаты незамедлительны и бесспорны. Если пользователи нажимают не на ту ссылку, это не их вина - это неудача дизайна. Юзабилити-тестирование отражает, как фактически пользователи действуют на сайте.
Глава 8
286
Якоб Нильсен (Jakob Nielsen) о значении сокращенного юзабилити-тестирования
Сейчас ситуация в веб-разработке очень отличается от той, которая была в середине девяностых годов, когда юзабилити еще не являлось реальным фактором в этой области. Теперь многие проекты редизайна фактически вызваны именно потребностями юзабилити. Многие из существующих веб-сайтов слабо отвечают нуждам посетителей и многие очень трудны в использовании. Люди наконец начинают осознавать это. Я убежден, что как только достаточное количество вебсайтов будет руководствоваться принципами юзабилити, они выкажут такое превосходство, что конкурирующие вебсайты ощутят существенные потери трафика и, соответственно, потери в бизнесе. Результатом будет реальный стимул к редизайну с учетом юзабилити. К сожалению, хотя, кажется, большинство людей знает, что им необходимо провести несколько проверок юзабилити, в действительности они этого не делают. Барьером для многих является ошибочное мнение, что юзабилити-тестирование обязательно должно быть сложным и дорогостоящим проектом. Если всегда ждать момента, когда появятся средства для всестороннего исследования, не удастся сделать вообще ничего. Если у вас, как обычно, нет времени и денег, вы можете соблазниться идеей рассматривать проверку юзабилити как необязательную, расширенную стадию про-
цесса. Мой стандартный совет - все-таки тестировать, но в сокращенном варианте. Совсем небольшое исследование с тремячетырьмя участниками - в действительности это работа всего на день, не требующая больших расходов - невероятно ценно. Сфокусируйтесь только на одной из трех основных задач на сайте и протестируйте ее. В сокращенном тестировании чем-то придется пожертвовать: не будет возможности проверить вторичные функции, а также не будет произведена сегментация аудитории. Но разница между отсутствием тестирования вообще и получением некоторых данных... Эта разница огромна. Никогда не говорите: «Мы можем позволить себе только сокращенное исследование, так что, вероятно, его не стоит делать». Это одна из самых больших ошибок. Я регулярно подчеркиваю важность небольших, быстрых тестов. Почти всегда результаты таких первых простых проверок являются настолько ценными, настолько разоблачающими, что вы сможете получить бюджет для будущих исследований, потому что каждый увидит, насколько полезны эти проверки. Можно проводить такие небольшие тесты на всем протяжении процесса разработки. В проектах редизайна одна из наиболее часто упускаемых возможностей - тестирование в самом начале, еще на старом сайте. Есть две важных причины не
Юзабилити-тестирование
пренебрегать тестированием уходящего сайта: 1. Что плохо?
Вероятно, в компании сложилось достаточно мнений относительно проблем уходящего сайта - у каждого есть своя теория. Но без эмпирического понимания ощущений реальных пользователей любой анализ основан на мифе. Какой-то аспект веб-сайта, который вы считаете проблематичным, может оказаться в действительности не такой уж большой бедой, и вы сосредоточили бы ваши ресурсы не в том направлении. Очень важно иметь реальное представление о недостатках сайта перед тем, как начать его редизайн. 2. Что хорошо?
Допустим, старый сайт плох, но ведь возможно, что не все там плохо. Вероятно, есть и хорошие стороны, которые следует сохранить. Было бы неразумно потерять эти преимущества в процессе редизайна. Посмотрите, что работает на уходящем сайте. Старый сайт, определенно, пытался достичь таких же целей, которые стоят и перед редизайном. Рекомендуемая методика юзабилити-тестирования всегда предполагает проверку нескольких версий прототипа сайта по мере его развития. Тестирование старого дизайна поможет понять восприятие пользователями особенностей функциональности и контента, предлагаемых сайтом, а также типов продаваемых товаров. Конечно, сам факт редизайна и попыток улучшения вовсе не означает, что в результате получится совершенный веб-сайт. Вопервых, совершенных веб-сайтов вообще не существует. Во-вторых, для команды разработчиков играют роль и реальные жизненные факторы: они должны выполнить проект за строго ограниченный про-
287 межуток времени. Рассматривайте вебразработку как бесконечный процесс: каждые два года или около того необходимо снова проходить через это и перепроектировать сайт. Всегда найдется, что усовершенствовать, а юзабилити - всегда открытый аспект для анализа. Доктор Якоб Нильсен (wwwMseit.com) был назван «ведущим мировым экспертом по веб-юзабилити» (U.S. News & World Report), «самым толковым человеком в Сети» (ZDNet), а «о том, что делает веб-сайты работающими, он знает больше, чем кто-либо еще на планете» (Chicago Tribune). Его последняя книга «Веб-дизайн: книга Якоба Нильсена» ( «Designing Web Usability: The Practice of Simplicity» ) была напечатана на 13 языках общим тиражом около четверти миллиона экземпляров, а его колонка о веб-юзабилити Alertbox, публикуемая в Интернете с 1995 г. (www.useit.com I alertbox), сейчас насчитывает около 200 тысяч читателей. Доктор Нильсен является обладателем 53 патентов США на разработки, ориентированные главным образом на повышение удобства использования Интернета.
Глава 8
290
Затраты на тестирование Неформальное тестирование - это проверка «один на один» с друзьями и коллегами, которые близко соответствуют профилю пользователя и которые напрямую не связаны с проектом. Стоимость такого тестирования обычно минимальна. Полуформальное испытание повышает планку к следующему уровню: вербуются и оплачиваются внешние участники. Часто устраивается специальная площадка для тестирования. Формальное тестирование может иметь различные формы, но принято привлекать платного консультанта по юзабилити, специалиста по человеческому фактору, а также арендовать специальное помещение и оборудование для тестирования. Следовательно, затраты выше.
Проведение юзабилити-тестов: четырехэтапный процесс Везде в этой книге основное внимание уделяется базовым процессам. Данная глава тоже не исключение. Тема юзабилити очень обширна. В интересах обсуждения лишь того, как включить юзабилити в технологию редизайна, мы предлагаем краткий обзор процесса юзабилити-тестирования, который включает четыре основных этапа: Этап 1:
План и подготовка
Этап 2: Этап 3: Этап 4:
Подбор участников Проведение сеанса Анализ данных и составление рекомендаций
Такое разбиение процесса подходит для любого из трех уровней формальности: упрощенного, неформального подхода; полуформального с более расширенным Тестирование «один на один» •
• • • •
Продолжительность тестирования - один-два • Ведущий наблюдает (не вмешиваясь) и делает дня с четырьмя-шестью участниками каждый заметки. Со всеми участниками может работать день, но только с каждым участником проводитодин ведущий, но только с каждым участником | ся отдельное тестирование. отдельно. Продолжительность одного сеанса - приблизи- • Сеансы можно записывать на видеокамеру, тельно один час. • За сеансами может наблюдать вся команда раз- | Выполняемые задачи определяются заранее. работчиков. При формальном тестировании часто Задачи проверяют конкретные области сайта или используют одностороннее (прозрачное с одной маршруты пользователей, а не целый сайт. стороны) зеркало, чтобы не смущать участников. Задачи, подлежащие тестированию, предваритель• Результаты показывают, что работает и что не * но проверяются кем-либо из команды разработработает. чиков, чтобы удостовериться в их выполнимости.
Юзабилити-тестирование
291
292
Глава 8
планом; или формального с развернутым, полным сценарием. Основное различие между уровнями заключается в квалификации привлекаемого специалиста.
Этап 1: План и подготовка Тесты не должны быть сложными, но они должны иметь конкретные цели. Главное здесь сохранять направленность. Время на тестирование ограничено: на каждый сеанс отводится приблизительно час. Обязательно нужен план. Планы тестов План должен быть обзором и руководством к вашей версии процесса тестирования. Он должен содержать, по меньшей мере, следующее (рис. 8.1): • Общие цели/задачи • Методика (процедура тестирования, оборудование, помещение и так далее) • Профиль целевой аудитории (кого будут тестировать) • Схема тестирования (ввод в курс дела, контрольный список задач, тестовые вопросы) • Конкретный список задач • Итоговая оценка (анализ данных) • Структура отчета (как планируется представить результаты и рекомендации) План тестирования позволяет согласовать ожидания и цели. Постарайтесь сосредоточиться на конкретных задачах; у вас не будет времени, чтобы проверить все. Помните, что план тестирования в соответствии с состоянием проекта может изменяться от сеанса к сеансу. Списки задач Выберите достаточно простые задачи для проверки потенциально проблемных областей. Например, если есть сомнения по поводу входа в систему, запланируйте ряд тестовых задач, чтобы охватить весь процесс входа. Дайте пользователям задание сделать что-то, что требует входа в систему, только чтобы они сами обнаружили необходимость входа. Насколько будет просто и интуитивно для пользователя выяснить это? Создайте список задач, с которыми обычный пользователь может (предположительно) справиться за час. На случай если поставленные задачи потребуют меньше времени, чем предполагалось, подготовьте дополнительные задачи. Удостоверьтесь, что задачи не слишком просты и не слишком трудны, чтобы уложиться в пределах установленного времени - иначе они не будут соответствовать цели сеанса. Проверьте задачи заранее, чтобы отсеять проблематичные.
Юзабилити-тестирование
293
Рис. 8.1. Образец плана тестирования. Планы тестирования должны отвечать основным требованиям, включая общие цели тестирования, профиль аудитории, методику и схему тестирования. Имейте в виду, что этот план - лишь образец; профиль вашего пользователя, вероятно, отличается от приведенного здесь
NDA (non-disclosure agreement) - соглашение о конфиденциальности. - Примеч. пер.
294
Глава 8
При разработке списка задач имейте в виду, что атмосфера сеанса юзабилититестирования должна быть вольной, информативной и не стрессовой. Позвольте участникам чувствовать себя комфортно и уверенно, как в их привычной среде: дома или в офисе. Разработка задач, соответствующих конкретному сайту, требует времени и опыта. Задачи, безусловно, должны иметь отношение к сайту, но делайте их по возможности более универсальными, как в реальном мире. Сделайте задачи в какой-то мере связанными между собой - подобно реальным пользовательским задачам. С одной стороны, не стоит соединять задачи - это может исказить результаты, а с другой стороны, не хочется, чтобы пользователь выполнял лишь случайные задачи. Держите пользователя в какой-то колее. Вот несколько примеров: • Если перепроектируемый сайт - для национальной сети бытовых товаров, то в качестве одной из типовых задач можно предложить испытуемому заказать подарок из категории «к свадьбе». Пусть он запросит каталог. • Если перепроектируемый сайт - для банка, пусть испытуемый проверит свой счет или исследует схему ипотечных заявок. Затем пусть он войдет в систему, чтобы оплатить счет или сделать перевод. • Это сайт, который каталогизирует рестораны? Пусть испытуемые скопируют три ресторана в свою папку закладок на сайте (которую они должны будут создать). Это также потребует входа в систему. Затем пусть они перейдут к итальянскому бистро, которое осуществляет поставки в их районе, или к недорогому ресторану с живым джазом и сделают предварительный заказ. • Если проект - для гостиниц типа «постель и завтрак», пусть они попытаются забронировать комнату, найдут план проезда и затем запросят гостиницу относительно вечеринок или крупных собак. Образец сценария тестирования Ведущий должен заботиться о продвижении тестирования в нужном направлении. Очень легко попасть в ловушку излишних разговоров с участником, а это впустую потраченное ценное время. Чтобы не отклоняться от курса и не пропустить чего-нибудь в ходе испытаний, держите под рукой сценарий тестирования (рис. 8.2). Сценарий тестирования должен содержать следующее: введение, график сеанса тестирования и краткое изложение методики. Объясняя участнику ход тестирования, создайте непринужденную атмосферу. При инструктировании участника в день тестирования вы должны охватить следующие важные моменты, так что убедитесь, что они включены в сценарий: • Представьтесь и объясните свою роль как ведущего. • Уточните, что ваша роль - молчаливый наблюдатель. Вы не должны прямо отвечать на любые вопросы; должны только наблюдать и делать заметки.
Юзабилити-тестирование
295
• Дайте обзор целей тестирования. • Заверьте участников, что они не тестируются никоим образом. Тестируется сайт. • Призовите участников говорить вслух во время испытания. • Получите подпись участника на соглашении о конфиденциальности (NDA) (если требуется) и выясните, нет ли у него вопросов.
Этап 2: Подбор участников Поиск потенциальных участников - один из наиболее проблематичных аспектов проведения юзабилити-тестирования. При неформальном и в большинстве полуформальных тестирований можно привлечь знакомых, только они должны соответствовать профилю целевого пользователя. Можно облегчить задачу поиска: пригласите свою маму, соседа, паренька, который развозит по пятницам пиццу для персонала..., но обязательно следите за соответствием участника целевой аудитории. Выбирайте тщательно. Если ваш сайт связан с поставками для автомобилей (бизнес для бизнеса, В2В), а ваша мама даже ради мира во всем мире не смогла бы идентифицировать карбюратор, она не подойдет для тестирования.
Рис. 8.2. Образец сценария тестирования. Это пример того, что можно сказать перед тестированием. Пример взят из сценария тестирования, разработанного Джеффри Рубином (Jeffrey Rubin) и изложенного в книге «Handbook of Usability Testing» (Справочник no юзабилити-тестированию). Помните: не читайте сценарий по бумаге слово в слово
296 Тестируйте чаще! Многократное мелкомасштабное тестирование на разных этапах процесса разработки, возможно, более выгодно, чем единственное тестирование. Разработайте методы быстрых, повторяемых проверок, чтобы по ходу работ учитывать мнения о конкретных аспектах. Если на встречах дизайнеров возникнут вопросы или дискуссии по поводу навигации, функциональных возможностей или дейстзий пользователей, не поленитесь добавить это к списку задач для следующего раунда тестирования. Используйте тестирование при урегулировании споров - ничто не послужит лучшим аргументом, чем реакция реального пользователя.
Глава 8
Ваши коллеги могли бы подойти, но, хотя они вполне соответствуют требованиям для многих неформальных испытаний, рекомендуется вербовать участников вне собственного офиса. Тестирование с посторонними людьми, не связанными с вашей компанией или сайтом, даст лучшие результаты, а формирование команды пользователей для привлечения их и в фокус-группы и для юзабилити-тестирования ценно для любой веб-разработки — с внутренней или с внешней командой. Таким образом, коллеги и друзья — хорошие кандидаты для «пробного прогона» сеанса юзабилити-тестирования. Поскольку они знакомы с ведущим, они будут чувствовать себя комфортно, обеспечивая вас мнениями о применяемых вами методах и процессах. К тому же, такой тип пробных испытаний дает ведущему возможность выявить ошибки в сценарии. Организация сеансов тестирования и поиск идеальных кандидатов может отнять много времени. В зависимости от принятых в вашем регионе методов размещения объявлений можно подыскать идеальных кандидатов и меньше чем за неделю. Сначала продумайте лучшие методы для поиска целевых пользователей. Подойдет ли для этого местный еженедельник? Существует ли онлайновый ресурс для размещения объявлений о работе? А объявление в колледже сработает? Опубликуйте объявление в местных списках вакансий (рис. 8.3 и 8.4). Результаты не заставят себя ждать.
Юзабилити-тестирование
297
Отбор участников Одно из различий между процедурами неформального и формального тестирования — профессиональный отбор участников. Ставка компаний-подрядчиков и стоимость оборудования для профессионального тестирования - до 1000 долларов за участника (обычно планируют группу от 8 до 12 участников). Это включает поиск, отбор и комплектование группы участников юзабилити-тестирования. Ценность этого сервиса заключается в возможности подобрать целевую группу, наиболее подходящую в отношении конкретной демографии, определенной экспертом по юзабилити. Кроме того, это позволяет проводить отбор и комплектование групп в других городах (если тестирование должно проходить в нескольких регионах), что дает более широкую выборку. Чем лучше подобраны участники, тем реальнее результаты. Конкретные профили могут включать высших руководителей, трейдеров или водите л ей-дальнобойщиков - таких участников трудно завербовать традиционными методами. Профиль участников тестирования Попросите потенциальных участников (откликнувшихся на объявления, почтовые рассылки или рекомендованных кем-то) заполнить в онлайне или отправить по факсу формы, запрашивающие их основные демографические сведения, а также методы использования ими Интернета (рис. 8.5). Во всех формах, касающихся персональной информации, особо подчеркните, что вся информация конфиденциальна и не будет распространяться далее. Причины необходимости этой информации должны быть очевидны: при тестировании на предмет юзабилити требуется, чтобы испытуемые как можно ближе соответствовали вашей целевой аудитории. Иначе зачем тестировать? Сведите все собранные данные в таблицу или какой-то другой формат, удобный для
298
Глава 8
просмотра и сортировки (рис. 8.6). Произведите отсев. Планируйте сначала несколько больше участников, чем требуется, - на случай, если кто-то откажется. Этим дополнительным участникам, называемым «поплавками», все равно необходимо платить. Свяжитесь по электронной почте с претендентами, отве-
Рис. 8.6. В этой типовой таблице сведена информация, собранная из онлайновых анкет потенциальных участников тестирования (рис. 8.5).
Юзабилити-тестирование
299
чающими требуемому профилю. Объясните кратко, когда они должны ожидать контакта с вами и что им предстоит делать, но не слишком вдавайтесь в подробности. Ближе к намеченной дате еще раз проконтактируйте с ними по электронной почте или по телефону (рис. 8.7).
Эти данные были перенесены в файл Excel. Из 400 ответов 40 были выбраны для просмотра клиентом. В конечном счете было отобрано 8 участников тестирования
300
Глава 8
Puc. 8.5. Эта онлайновая анкета для профилирования участников тестирования демонстрирует, какая информация требуется для выявления потенциальных участников, соответствующих вашей целевой аудитории. Она также может быть разослана и по факсу, но поскольку дело касается тестирования привычек и навыков использования Интернета, то большинство претендентов имеют доступ в Интернет
Рис. 8.7. Образец письма участникам тестирования
Юзабилити-тестирование
Этап 3: Проведение сеанса
301
Знайте, когда пора выйти
Начинайте каждый сеанс в дружеском и терпеливом настрое. Представьтесь и расскажите о процессе тестирования - что пользователям будет предложено выполнить ряд задач. Позаботьтесь о выборе слов; не предвосхищайте результаты, сообщив испытуемым количество или объем задач. Объясните свою роль как наблюдателя. Уточните, что вы — именно наблюдатель, а не помощник. Заранее подготовьте соглашения о конфиденциальности (NDA) и любые другие необходимые документы. Не заостряйте внимани е на формальностях и обеспечьте участникам сеанса наибольший комфорт, насколько это возможно. Для справок держите при себе сценарий тестирования.
Если участник становится слишком расстроенным или идет совсем не в том направлении, пора выходить из задачи. Объясните ему, что если он не доводит или не может довести задачу до завершения, это не вредит тестированию и не говорит о его некомпетентности (возможно, это недоработка команды разработчиков!). Расстроенные участники испытаний не смогут хорошо работать
Во время тестирования не проявляйте эмоций. Ваша задача - молча наблюдать, высказываясь только при выдаче новой задачи и при составлении заметок во время сеанса. Если участник задает вопрос, отвечайте только в случае необходимости и не вдаваясь в детали. Не давайте никаких подсказок - словом, взглядом или движением руки. Искушение «спасти» кого-то из учестников нанесет вред цели тестирования. Если участник огорчается, оцените уровень расстройства и оставьте заметку: «Задача потерпела неудачу», но только когда все возможности были испробованы. Не считайте неудавшуюся задачу неудачей тестирования. Как раз наоборот. Выявляя дефекты сайта, вы уменьшите количество пользователей, которые уйдут с вашего веб-сайта в расстройстве (это неудача бизнеса и, возможно, навсегда потерянный заказчик). Видеосъемка сеанса также полезна для просмотра ее впоследствии другими членами команды разработчиков.
Для некоторых проектов наем внешнего консультанта мог бы быть просто убийственным. В таких случаях читайте книги ~ две книги, вышедшие в издательстве «Символ-плюс»: Якоб Нильсен «Веб-дизайн: книга Якоба Нильсена» (Jakob Nielsen, «Designing Web Usability: The Practice of Simpiicrty», New Riders, 1999) и Стив Круг «Веб-дизайн: книга Стива Круга или не заставляйте меня думать» (Steve Krug, «Don't Make Me Think», New Riders, 2000), а также справочник по юзабилити-тестированию Джеффри Рубина (Jeffrey Rubin) «Handbook of Usability Testing», John Wiley & Sons, 1994. Хотя вы не станете сразу экспертом, но несомненно извлечете пользу, проведя некоторое исследование вопроса» прежде чем предпримете собственное неформальное юзабилити-тестирование. Полезные ссылки можно найти на www.web-redesign.com.
Перед началом сеанса убедитесь, что имеете все необходимое. Вот удобный контрольный список: • Подготовить к подписанию соглашения о конфиденциальности (NDA) • Убедиться в наличии связи с Интернетом
Образовывайте себя
302
Глава 8
• Если предусмотрена видеосъемка, зарядить батареи для видеокамеры, так как работать от сети может быть проблематично. (Замечание: мы не рекомендуем производить видеосъемку на неформальном тестировании.) • Иметь распечатку схемы сайта, удобную для оставления заметок (страницы, связанные с задачей) • Иметь упорядоченный список подготовленных задач • Иметь форму послетестового опроса • Подготовить сайт к использованию (сохранить требуемые закладки) Сбор основных данных Во время сеанса тестирования ведите детальные записи. Всегда полезно иметь готовый бланк для заметок (рис. 8.8). Используйте один и тот же бланк для всех участников тестирования. Это будет удобно при анализе заметок и сравнении результатов. Для каждой задачи старайтесь отметить следующие аспекты: • Смог ли участник тестирования завершить задачу? • Нуждался ли он в помощи? Задача потерпела неудачу? • Сколько времени это заняло? • Какие камни преткновения встретились? Опишите проблемы и препятствия. • Опишите общие наблюдения. Добавьте комментарии. Испытуемый расстроенно бормотал? Он восклицал: «Круто!»? Не требуется отмечать абсолютно каждый щелчок или задержку, но следует быть готовым к исчерпывающему отчету по проблемной области. Будьте внимательны, чтобы не упустить ход выполнения задачи. На собранных данных вы будете основывать свои заключения.
Юзабилити-тестирование
303
Рис. 8.8. Используйте данный образец бланка наблюдений для ведения заметок во время типичного сеанса. Эту форму можно загрузить с www.web-redesign.com После сеанса Следите за временем. До отъезда участнику предстоит сделать еще несколько вещей. Сначала дайте ему краткий послетестовый опросный лист, затем проведите быстрый устный опрос и, наконец, заплатите участнику за его время. Подготовьте послетестовый опросный лист заранее (рис. 8.9). Он должен содержать вопросы о впечатлении участника о сайте и работе с сайтом. Предложите участнику оценить каждый вопрос/пункт по пятибалльной шкале. Заполнение опросного листа не должно занимать более пяти минут. Опросите участника устно. Если время позволяет, сначала дайте ему высказать свое мнение, а затем уже задайте вопросы. Начните с общих аспектов и проблем и затем перейдите к деталям - к областям, которые вы отметили в своих заметках. Заплатите деньги участнику сразу по завершении сеанса. Не забудьте поблагодарить его. Оставьте дверь открытой для возможности дальнейшей связи с ним и последующего тестирования — может быть, в этом же проекте, на других этапах разработки. После ухода участника, если есть время до следующего сеанса, напишите короткое резюме сеанса и его результатов. Выделите особо проблемные области и неожиданные для вас результаты. Включите персональные наблюдения. Некоторые тестирования распланированы тесно, сеанс за сеансом, и там нет времени для итогов. Записывайте все подробно; имейте в виду, что после трех или четырех сеансов вы не сможете вспомнить многие детали.
304
Глава 8
Рис. 8.9. После завершения сеанса предложите участнику тестирования заполнить опрос, подобный этому. Послетестовые отзывы и комментарии - превосходное основание для выяснения пользовательских предпочтений. Эту форму можно загрузить с www.web-redesign.com
Юзабилити-тестирование
305
Этап 4: Анализ данных и составление рекомендаций На этом этапе требуется опыт. Когда понимаешь, как и почему пользователю не удалась задача, или видишь, где имеется проблемный момент, - это легко. Для определения, как устранить проблему, нужна квалификация. Тем не менее, даже если вы не эксперт, вы все равно можете дать полезные рекомендации для усовершенствований. Собирайте данные по ходу тестирования - это понятно. Просуммируйте эти данные, пока тестирование еще свежо в вашей памяти, и не забудьте перенести в файл рукописные заметки. Сведите все данные в одном формате (для этого хорошо подойдут таблицы), показывающем результаты каждого теста, проблемные области, комментарии и пользовательские отзывы из послетестового опроса. При выявлении проблемных областей отметьте, в чем были трудности. Если в состоянии определить, то укажите источник проблемы - используйте даже снимок экрана. Это безмерно поможет при обдумывании способов улучшения проблемной области. Охарактеризуйте взаимодействие пользователей с особыми элементами: навигацией, текстом, графикой и так далее, а также глобальные аспекты, такие как уместность размещения логотипа и бренда или несогласованность в названиях и маркировке. Если в ходе выполнения задачи встретилась специфическая проблема, опишите это подробнее. Ранжируйте все проблемы в порядке частоты, а затем расположите по приоритетам. Прежде всего, концентрируйтесь на функциональности высокого уровня: анализируйте общие аспекты навигации, сопоставьте текстовые и графические ссылки, облик страниц и так далее. Затем сфокусируйтесь на конкретных областях и рекомендациях по улучшению пользовательской среды. После завершения всех сеансов тестирования скомпонуйте полученные результаты в итоговый отчет. Преобразуйте собранные данные в рекомендации; полученная информации поможет проверить пра-
«Два явных преимущества формального тестирования: оно обеспечивает мнение пользователей, необходимое для разработки сайта, и, кроме того, способствует накоплению опыта дизайнеров и инженеров, позволяя им непосредственно видеть процесс принятия решений типичным посетителем сайта». - Jupiter 1999 г., www.jup.com
306
Глава 8
вильность ваших собственных мыслей относительно сайта. Разбейте рекомендации на краткосрочные и долгосрочные цели. Составьте план реализации ваших выводов и откорректируйте сайт, чтобы он лучше соответствовал тем способам, которыми он в действительности используется. Итоговый отчет Помещение всех полученных выводов в итоговый отчет обеспечит краткую рекомендацию для клиента и команды разработчиков (рис. 8.10). Если отбор участников производился правильно, результаты юзабилити-тестирования бесспорны. Сообщите об этих результатах; любые рекомендации, основанные на них, следует принимать всерьез. В конечном итоге улучшение сайта почти гарантируется.
Рис. 8.10. В данном итоговом отчете в рекомендации включены снимки экрана и выноски, иллюстрирующие конкретные пункты. Не все отчеты требуют такой детализации (см. цветную вклейку, стр. 360)
Юзабилити-тестирование
Итоговый отчет должен содержать следующее: • Резюме. Краткое резюме главных выводов, рекомендаций и предложений по областям, на которых следует сосредоточить внимание. Обзор что работает и что не работает на сайте. • Методология. Описание сути исследования, как оно было организовано, профили пользователей, методы сбора данных и так далее. • Результаты. Ясное, всестороннее отражение всех результатов тестирования, обзор отзывов пользователей и так далее. • Выводы и рекомендации. Представление общей и конкретной информации, рекомендуемые изменения в ближайшее время и в будущем, а также тип предлагаемых изменений (например, только графика, текст или внутреннее программирование и так далее). Включите информацию о поставленной участнику задаче, причины возникших проблем и рекомендуемое их решение.
307
Юзабилити-тестирование... ... урегулирует споры с помощью фактов вместо предположений. ... обеспечивает реальные отзывы от реальных пользователей. ... дает ценные результаты по низкой цене. ... выявляет аспекты, казавшиеся очевидными для разработчика, но не оказавшиеся таковыми для пользователя. ... минимизирует риск перед публичным запуском.
• Приложения. Необработанные данные, заметки, образцы тестовых материалов, основные данные (без имен) участников и так далее.
Резюме главы Хотя юзабилити-тестирование ни создает, ни усовершенствует веб-сайт, оно приведет к более успешному и пригодному для использования сайту. Оно может выявить бедствие, а вы сможете предотвратить его. Обратная связь бесценна. Наблюдение наводит на размышления. Как только вы отдалитесь, переключившись с роли разработчика на роль наблюдателя, и посмотрите, как типичный пользователь справляется с сайтом - пытается нажимать на картинки, находит путь назад к начальной странице, выполняет самые простые задачи, - вы быстро осознаете, что это небольшое наблюдение приводит вас к пониманию того, что же нужно сделать для улучшения пользовательской среды сайта. Ставьте осязаемые цели. Невозможно проверить все аспекты дизайна сайта, его архитектуру и навигацию. Проанализируйте потребности вашего сайта. Думая о конкретных целях, проще приспособить ваши задачи к особенно сомнительной области. Иногда, когда верхнее руководство, наконец, соглашается потратиться на юзабилити-тестирование, они надеются проверить весь сайт одним махом. Тестируйте часто, и — как сказал Джеффри Вин во вступлении к этой книге «пусть все отзывы ваших пользователей будут хорошими».
308
Учебный пример
Casey Claybourne Клиент: Casey Claybourne URL: www.caseyclaybourne.com Студия дизайна: Waxcreative Design, Окленд, Калифорния Все роли в проекте: Эмили Котлер (Emily Cotler)
ПРЕДЫДУЩИЙ
CASEYCLAYBOURNE.COM [ПРЕЖНИЙ] был состряпан неуклюже, на уровне бесчисленных любительских сайтов в Сети, которыми так часто вынуждены довольствоваться мелкие бизнесмены и творческие личности, чьи дети/мужья/кузены немного знают HTML.
309
Учебный пример
Любовные романы составляют 58.2°$ популярных книг в мягких обложках, покупаемых в Соединенных Штатах, что дает 1.35 миллиардов долларов. Кейси Клей борн (Casey Clayboume), отмеченная многими наградами писательница, собрала восторженные отзывы о своем уже девятом романе «Прелесть» («A Thing Of Beauty»). Как и у многих людей творческих профессий, она и есть ее собственный маленький, но процветающий бизнес.
СОВРЕМЕННЫЙ
CASEYCUYB0URNE.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] использует ряд графических образов, созданных специально, чтобы отразить утонченный стиль Кейси. Ясный, простой и элегантный дизайн соответствует уровню профессионализма, достигнутому ею в писательской карьере. (2000 г.)
Результат: Лучшее позиционирование в данной сфере деятельности. Читатели романов, уставшие от шаблонов этого жанра, приветствовали высококлассный дизайн обильной восторженной почтой.
См. цветную вклейку, стр. 354-355 Статистика: www.rwanational.com/statistics.stm
Анализ конкуренции
9
Чтобы стать лучшими партнерами наших клиентов, мы должны понимать онлайновые аспекты их отрасли с учетом конкуренции. Каковы цели компании, ее продукты и рынок относительно Сети?
Анализ конкуренции Конкурентный анализ должен быть частью процесса веб-редизайна с тем или иным уровнем подхода, а уровень может быть и очень высоким. В крупных, жестко конкурирующих отраслях, таких как коммерческие авиалинии или производство компьютерных комплектующих, могут быть и насущная потребность и бюджет для формального анализа отрасли. В этих случаях на внешний маркетинг или исследование компании, возможно, придется потратить шестизначные суммы и выпустить исчерпывающий документ объемом, как роман Л. Толстого «Война и мир». В проектах, не имеющих таких гигантских бюджетов, мы рекомендуем провести неформальный анализ особенностей. В чем разница между анализом отраслей и анализом особенностей? В квалификации эксперта, бюджете и подходе. Всесторонний формальный анализ отрасли проводится квалифицированными и стратегически-ориентированными маркетинговыми группами, вооруженными методологией исследований, основанной на их опыте. Анализ отрасли в значительной степени сосредотачивается на рынке и позиционировании данного бизнеса в широкой конкурентной среде. Анализ особенностей, формальный или неформальный, фокусируется на сравнении фактических интересов и ощущений потенциальных заказчиков — прежде всего в онлайне, но иногда также и вне Сети. Он обеспечивает представление о сервисе и особенностях конкурентов с точки зрения пользователей.
Анализ конкуренции
313
Результаты этого исследования будут полезны и команде веб-разработки и клиенту. Команда приобретет бесценный опыт - возможность моделировать поведение пользователей в сфере деятельности клиента. Клиент - внешний или внутренний - получит данные, которые помогут ему оценить, какой контент, функциональность и сервисы предлагают его конкуренты в онлайне. Через анализ особенностей и команда и клиент придут к лучшему пониманию, что работает и не менее важно - что не работает для пользователей. При изначальном формировании сайта клиент, вероятно, интенсивно просматривал, кто и что делал на разных сайтах в его отрасли. Клиент усиливал одни идеи конкурентов и отвергал другие. Теперь, когда сайт находится в редизайне, пришло время устроить еще один, новый просмотр. Отрасль, вероятно, изменилась - даже если сайт был сформирован всего год назад. Существенные изменения в отрасли могут даже стать главной причиной редизайна сайта. Включите в анализ и существующий сайт. Его оценка на фоне конкурирующих сайтов даст возможность не только сравнить какие-либо его особенности и ожидания пользователей, но и выяснить его конкурентоспособность. Это поможет сформулировать цели редизайна. На протяжении всей книги мы призываем при первой возможности нанимать экспертов. Проведение анализа конкуренции - не исключение. Квалифицированно собранная информация всегда заслуживает внимания и обычно подчеркивает моменты, которые неспециалисты даже не рассматривают. А проведение неформального анализа особенностей важно по другой причине: это позволяет самой команде дизайнеров и разработчиков, ведущей редизайн сайта, участвовать в процессе сбора информации. Проведение неформального конкурентного анализа ценно, в частности, тем, что это помогает команде начать думать с позиции пользователя в отрасли клиента, а такой подход очень важен.
Формальный анализ отрасли и неформальный анализ особенностей Поймите, что неформальный анализ, рекомендуемый в этой главе, включает изучение особенностей и ощущений посетителей в онлайне, а не маркетинг и брендинг или анализ продукции компании при ее текущем или будущем позиционировании. Эти исследования, возможно, уже проведены компанией и обеспечили ей понимание того, чем она является сейчас и к чему стремится - особенно в отношении целей редизайна. На стадии выяснения фазы 1 получите от клиента как можно больше имеющейся информации. Окончательная цель анализа особенностей вполне определенна - это ответ на вопрос: «Что делают конкуренты для обеспечения сервисов и контента, которые привлекательны и значимы для пользователей?». В этой книге речь идет,
314
Глава 9
прежде всего, об онлайновой конкуренции, хотя «мир кирпича и цемента» тоже не следует игнорировать. Иногда основные, если не все, конкуренты находятся в том мире, на расстоянии телефонного звонка. Но анализ всей отрасли вне предлагаемого контекста. Задача команды веб-разработки при анализе особенностей - рассмотреть цели компании, ее продукты и рынок с точки зрения Сети.
Анализ конкуренции
315
Как стать опытным пользователем в отрасли клиента Процесс становления опытным пользователем начинается во многом подобно началу онлайновых исследований для собственных нужд - с поиска в Yahoo! или Google, или их аналогах и посещения затем сайтов нескольких конкурентов. Допустим, один из товаров клиента - кожаные меховые рукавицы. Введя в поисковый механизм эти три ключевых слова «кожаные меховые рукавицы», вы получите дюжину или более сайтов из каталога, специализирующихся на спортивной или верхней одежде. Все эти сайты принадлежат той же отрасли и поэтому составят конкурентную группу. Возможно, некоторые из них даже есть в списке признанных конкурентов, представленном клиентом (в опросе клиента в Фазе 1: Определение проекта). Просматривая многие из этих сайтов, вы типичный пользователь для той отрасли — станете более сведущим в отношении не только конкретного товара, но и самой отрасли. Через всю эту книгу красной нитью проходит девиз: ДУМАЙТЕ, КАК ВАШИ ПОЛЬЗОВАТЕЛИ. Конкурентный анализ - не исключение. Подойдите к этой задаче с позиции типичного пользователя и «покупайте» в отрасли клиента тем же способом, как «покупали» кожаные меховые рукавицы. Сравнивайте конкурентов. Используйте сайты конкурентов для совершения сделок и поиска информации. Это требует времени, но, пройдя как типичный пользователь сайт за сайтом в конкурентной группе, вы быстро станете опытным пользователем в отрасли вашего клиента. Конечно, оставайтесь благоразумными. Если ваш кли-
316 Незнакомые отрасли
Если область клиента настолько непонятна технически, что вы не знаете даже основной терминологии (например, генная инженерия питательных добавок для крупного рогатого скота, коммерческое техническое обслуживание реактивных двигателей при федеральном авиационном агентстве или разведение собак породы ши-тцу), следует сразу же просмотреть несколько сайтов и сформировать основное мнение. (Замечание; если вы в самом деле готовитесь к редизайну веб-сайта компании по техническому обслуживанию реактивных двигателей, вам следует запланировать интенсивный курс авиационной терминологии, нанять себе эксперта по реактивным двигателям, а еще лучше, если клиент организует для вас подробную экскурсию по своему предприятию.)
Глава 9
ент продает автомобили, необязательно покупать несколько самых новых моделей. Но практикуйтесь насколько это возможно без серьезных вложений. Анализ конкурентов с пользовательской точки зрения позволяет отойти от движущих мотивов веб-разработчика: довести это до завершения, заставить это работать. Принятие решений на основе факторов, значимых для пользователей - легкость в использовании, нравится или не нравится и другие нечеткие критерии, которыми не очень терпеливые и не слишком квалифицированные пользователи выражают свои онлайновые ощущения, - неизмеримо поможет в понимании отрасли клиента в Сети.
Проведение анализа Проведение анализа особенностей — элементарный, понятный процесс, который может быть расширен или сокращен в зависимости от времени, ресурсов и бюджета. Отвели вы на него 20 часов или 200 часов, процесс все равно будет состоять из одинаковых четырех этапов: определить процесс, составить перечень особенностей, провести анализ и юзабилити-тестирование и наконец создать отчет. Используйте в качестве руководства приведенную здесь таблицу. Модифицируйте ее в соответствии с конкретными возможностями по времени и ресурсам и требованиями отрасли.
Этап 1: Определение процесса Четко определите, какую информацию вы собираетесь генерировать. В частности, кто будет использовать итоговые результаты? Они предназначаются главным образом для проектной группы? Эти результаты будут использоваться для генерации идей по поводу контента? Для лучшего понимания отрасли? Сформулируйте ясные цели. Будь это ассигнованный клиентом компонент, подлежащий сдаче, или текущая работа команды как этап про-
Анализ конкуренции Illllil l i l l l \i|
If illliilS l i l i l l :Й-! i i l l
317
318
Глава 9
цесса формулирования, или то и другое, определите, какую пользу вы надеетесь извлечь из этого анализа. Формирование плана исследований Сформируйте план исследований, который детализирует общие цели, методологию, сдаваемые компоненты, график работ и бюджет (рис. 9.1). Конкурентные анализы широко различаются по объему и контексту в зависимости от искомых подробностей. Исследования должны проводить, по крайней мере, два человека, чтобы обеспечить различные точки зрения. В зависимости от времени и ресурсов этот процесс может занять от недели (при малых или средних бюджетах - от 20 до 70 часов) до месяца (для более крупных бюджетов). Если вы можете запросить за эту работу дополнительное финансирование, сделайте это. Многие фирмы проводят как раз такие анализы и берут за них существенную плату. Если вы не можете пропустить конкурентный анализ отдельной бюджетной строкой, включите затраты на сокращенный анализ в Фазу 1: Определение проекта как часть процесса выяснения. Определение конкурентной группы Цель здесь состоит в том, чтобы выяснить две вещи. Кто ключевые игроки в отрасли - тяжеловесы, которых необходимо обойти? Кто прямые конкуренты вашего клиента - сайты, целевая аудитория которых могла бы посещать сайт вашего клиента? Сначала очертите широкий круг. Соберите информацию, как это делают пользователи: с помощью поисковых механизмов, из реклам (какие рекламные щиты вы видели в последнее время?) и других ресурсов (телефонных книг и справочников). Соберите побольше информации. Клиент уже предоставил свой список основных конкурентов (в клиентском опросе). Теперь настало время посмотреть на их сайты. Не ограничивайтесь только списком клиента; мнение клиента может быть субъективным или ограниченным лишь частью отрасли, или могли быть забыты некоторые ключевые игроки, особенно на оффлайновой арене. Для этих последних могут потребоваться дополнительные поиски и исследования. Имеются ли сайты, которые в точности соответствуют вашему клиенту? Выберите главные. Также выберите несколько других, которые лишь частично перекрываются с интересами клиента. Рассмотрим пример. Проект редизайна онлайновое туристическое агентство. Проверьте сайты прямых конкурентов сайты других туристических агентств - как в порталах типа Expedia.com или Travelocity.com, так и на сайтах авиалиний, например southwest.com или ual.com. Также не упустите из виду более специализированные туристические сайты - один или два из многих очень различных сайтов с увлекательными путешествиями типа away.com, и не игнорируйте сайты брошюрного типа, например lonelyplanet.com или letsgo.com. Учтите, что имеются также оффлайновые
Анализ конкуренции
319
Рис. 9.1. Это пример плана анализа, в котором выделены общие цели и задачи, основная методология и сдаваемые компоненты. В более подробную версию включите данные о команде и масштабе проекта (с графиками задач и распределения времени), а также детальную информацию как о пользователях, так и об основных задачах, связанных с сайтом компании и отраслью
320 Время и бюджет
Выделите минимум по одному часу на анализ каждого сайта из конкурентной группы, включая тестирование, описание особенностей и составление рекомендаций. Простая арифметика: конкурентная группа из 12 сайтов займет дня полтора как минимум. Очевидно, выделение большего времени на сайт даст лучшие результаты; если у вас есть ресурсы, разумно будет отвести несколько часов на сайт. Если с ресурсами или бюджетом сложности, ограничьте количество сайтов для анализа или ограничьте время, выделяемое на анализ каждого сайта.
Глава 9
конкуренты: 1-800#, круглосуточные каналы обслуживания заказчиков и (забыли?!) реальные туристические агентства с кассовыми залами или службой заказов билетов по телефону.
Теперь сужайте круг конкурентов. Свести его к 12 сайтам или меньше может оказаться трудной задачей. Обычно их множество, даже сотня, в зависимости от отрасли. Выберите примерно 20 для начала. Сортируя их, уменьшите это число. Вы должны выбрать столько сайтов, сколько необходимо, чтобы обеспечить широкую, но все же сфокусированную точку зрения на вашу отрасль. Возьмите, по крайней мере, пять, но не больше дюжины. На рисунках представлен пример конкурентной группы в индустрии туризма (рис. 9.2 - 9.7). Категоризация конкурентной группы Сайты выбраны; теперь быстро оцените каждый сайт (пятиминутная оценка, никаких деталей) для выделения категорий в пределах отрасли. Начните с существующего сайта. Куда он вписывается
Анализ конкуренции
321
Puc. 9.2. Expedia.com (Категория: портал)
Puc. 9.3. Travelocity.com (Категория: портал)
322
Глава 9
Рис. 9.4. Netscape Travel Center: webcenter.travel.netscape.com (Категория: портал на поисковом механизме)
Puc. 9.5. аюау.сош (Категория: увлекательные путешествия)
Анализ конкуренции
323
Puc. 9.6. lonelyplanet.com (Категория: сайт брошюрного типа)
Puc. 9.7. United Airlines: www.ual.com (Категория: авиалинии)
Глава 9
324
Категоризация Упростите процесс категоризации, используя самоклеющиеся стикеры. Вооружитесь столом в конференц-зале или воспользуйтесь большой белой доской, с которой можно стирать. Начертите таблицу и создайте начальные категории. Распечатайте логотипы и URL компаний и прикрепите их на стикеры. Разместите компании в соответствующих категориях таблицы. Переименуйте категории, если требуется разбить их (для этого удобна доска, с которой можно стирать); или переместите сайты в другие категории, если они лучше соответствуют им (подвижность стикеров делает такое перемещение мгновенным). Помните, каждый сайт должен попасть только в одну категорию. Некоторые из них, например порталы, логически подойдут для нескольких категорий, - выберите наиболее подходящую.
в общей картине отрасли? Категории должны быть широкие; не делайте их слишком конкретными. Вспоминая пример индустрии туризма, можно было бы выделить там несколько категорий: экологический туризм, увлекательные путешествия, туристические порталы, авиалинии и так. далее. Все эти сайты связаны с туризмом, но у каждого своя специфика. Если вы работаете над чем-то, столь же специфичным, как разведение ши-тцу, не забудьте посмотреть на сайты, посвященные другим мелким породам. Подключайте воображение. Исследуйте связанные категории, например выставки чистокровных собак или ветеринарное акушерство. Идея здесь в том, чтобы сортировать и разбивать на категории. Хотя в одну категорию могут попасть несколько сайтов, каждый сайт может быть помещен только в одну из них. Это ограничение поможет отразить истинную сегментацию рынка и несомненно упростит весь процесс. Определите уместность отрасли. Произведите окончательный отсев.
Этап 2: Составление перечня особенностей Нет, это не список всего, что имеется в местной сети. Перечень особенностей — краткое перечисление того, что предлагает каждый из выбранных сайтов (рис. 9.8 и 9.9). Контент, графика, мультимедиа, функциональные возможности, что и как можно делать, что и как можно посмотреть, действия, которые можно перенять... Перечислите их все. Проанализируйте все элементы. Выясните скорости загрузки и объем графики на разных конкурирующих сайтах. Включите такие особенности, как поиск, регистрация и доски объявлений. Определите лучшие навигационные методы. Настройте свой перечень особенностей для лучшего соответствия отрасли. Сделайте его выполнимым и укладывающимся в бюджет; нет необходимости в слишком подробном перечислении. Можно получить адекватное представление об онлайновой конкуренции
Анализ конкуренции
325
и без того, чтобы указывать в списке каждую мельчайшую особенность каждого сайта. При оценке сайта ранжируйте значение каждой особенности. Определите, как она служит общим целям сайта. Решите как пользователь, нравится она вам или нет, стоит ее использовать или не стоит. Будьте настолько усердны и настолько вдавайтесь в детали, насколько позволяет время. В итоговом отчете конкурентного анализа вы сведете этот перечень особенностей в таблицу для окончательного сравнения сайтов.
Рис. 9.8. Обобщенный пример особенностей графики и контента на конкурирующих сайтах. Заметьте, что этот пример сосредотачивается на графике и функциональности...
326
Глава 9
Рис. 9.9. ... а этот пример ориентирован на контент. Ваш список особенностей должен быть сгруппирован аналогично
Анализ конкуренции
327
328
Глава 9
Этап 3: Проведение анализа и тестирования Определив конкурентную группу и составив перечень особенностей, можно приступать к фактическому анализу. Сбор данных о каждом сайте в конкурентной группе - наиболее трудоемкая часть всего анализа. Это стадия, которая в зависимости от глубины и сложности выполняемого исследования может быстро истощить бюджет. Здесь представлены два подхода: индивидуальная оценка и неформальное юзабилити-тестирование. Каждый из них работает сам по себе, поэтому при трудностях с бюджетом можно остановиться только на одном (индивидуальная оценка). Опять же следует определить, какими являются цели анализа и тестирования, и учесть собственные возможности до времени и ресурсам. Выполнение индивидуальных исследований После того как все сайты из конкурентной группы соответственно оценены по перечню особенностей, каждый оценщик должен составить свое мнение о каждом сайте с точки зрения пользователя. Заготовьте простой бланк (рис. 9.13) для заполнения информацией по каждому сайту в конкурентной группе. Посмотрите на каждый сайт повнимательнее. Вы уже видели его при оценке особенностей; посмотрите еще раз, если позволяют время и бюджет. Чем лучше будет изучена конкурентная группа, тем более сведущи в отрасли вы будете. Проведение неформального юзабилити-тестирования Неформальное юзабилити-тестирование делает оценку более глубокой. Если имеются ресурсы, настоятельно рекомендуется проверить одну или две особенности на ее легкость в использовании на сайтах из конкурентной группы. Определите некоторые общие задачи, которые могут быть выполнены на всех сайтах группы. Если ваш перепроектируемый сайт имеет несколько разных целевых аудиторий, выбирайте задачи, ориентированные на каждую аудиторию. Снова рассмотрим индустрию туризма. Насколько трудно найти и заказать 2 билета на рейс в Токио? А узнать время прибытия самолета? Попытайтесь найти мотель на Мадагаскаре, арендовать автомобиль в Рейкьявике или заказать пешеходную экскурсию по Хельсинки. При анализе отрасли осветительных приборов закажите несколько лампочек. Насколько просто или трудно найти лампочку нужного размера, типа и яркости? Подождите несколько дней выполнения заказа. Возвратите несколько полученных предметов. Насколько это просто? Обратитесь за помощью в бюро обслуживания заказчиков. Пожалуйтесь. Ведите себя как реальный пользователь. В зависимости от целей вашего редизайна эти задания МОГУТ быть очень простыми или очень сложными. По большей части такой тип испытаний будет бо-
Анализ конкуренции
Рис. 9.13. Этот аттестационный бланк отражает ряд основных аспектов, на которые следует обращать внимание при просмотре каждого веб-сайта во время индивидуального анализа
329
330
Глава 9
лее глубокий, чем оценка сайта одним пользователем в течение часа. Вы захотите проанализировать задачу от начала до конца, и в некоторых случаях это потребует фактических покупок. Потратьте немного времени и денег. Результаты того стоят .
Этап 4: Создание итогового отчета Сведение полученных результатов и информации в общий официальный итоговый отчет - заключительный этап конкурентного анализа независимо от уровня его формальности. Итоговый отчет наиболее эффективен, если он скомпонован в форме краткого резюме, удобного для чтения и просмотра. На одной или двух страницах отразите главные выводы и рекомендации. Изложите основную суть. Какие результаты наиболее неожиданны? Что вызывало положительные впечатления пользователя? Что выводило из себя? Остальная часть отчета должна отразить методологию процесса и сам процесс и должна включать снимки экранов и обзор страниц просмотренных сайтов наряду с тщательно сформированными (проверенными и перепроверенными) таблицами для сравнения (рис. 9.14). Очевидно формальность итогового отчета зависит от того, для кого он создается: для команды веб-разработчиков или для клиента? Чаще всего - для обоих. В первую очередь, полный конкурентный анализ нужен команде для совместного обдумывания проекта. Однако это может быть чрезвычайно полезно и для клиента, особенно если клиент начинает оценивать сервисы и особенности сайта для его редизайна. Этот отчет покажет, что интересного предлагают другие лидеры отрасли или конкуренты, а это важно при принятии решения, каким должен стать контент нового сайта.
шттттжжшт ш
Анализ конкуренции
331
Puc. 9.14. Этот образец страницы итогового отчета показывает общий вид одного из исследованных сайтов вместе с несколькими сопутствующими снимками его страниц. Для полноты оценки справа вверху приведены краткий обзор сайта и его рейтинг (взятый из итоговой таблицы)
332
Глава 9
Составление таблицы особенностей Перед завершением отчета мы настоятельно рекомендуем найти время и свести собранную информацию в наглядную таблицу. Возьмите перечни особенностей для каждого проанализированного сайта и объедините их в таблицу, строки которой — особенности, а столбцы - сайты. Первым поместите свой текущий сайт. Добавьте к списку особенностей задачи, проверенные в ходе юзабилити-тестирования. Группируйте особенности в более общие категории, например «Поиск» и «Персонализация». Если необходимо, приведите в таблице и подкатегории Замечание: этот образец используется только в качестве наглядного примера и не должен рассматриваться как фактические данные.
Рис. 9.15. В этом образце таблицы особенностей для индустрии туризма показаны 12 отобранных сайтов в трех категориях: порталы, сайты авиалиний и сайты увлекательных путешествий. Таблица позволяет наглядно сравнить перечисленные слева особенности сайтов
Анализ конкуренции
333
(рис. 9.15). Эта таблица, вероятно, будет длиной в несколько страниц, но чем подробнее и конкретнее перечень особенностей, тем более всесторонним будет отчет. Общая оценка сайтов В конце анализа дайте две оценки. Сначала общую оценку каждого сайта из конкурентной группы. Выберите, по крайней мере, три основных области для оценки и используйте стандартную систему оценки: от одной до пяти звездочек (рис. 9.16 и 9.17). Выясните мнения всех участников анализа: одним сайт может ужасно не понравиться, а другим - наоборот. Основными критериями оценки могут быть следующие: • Общее впечатление. Каково общее впечатление от посещения сайта? Благоприятное? Неблагоприятное? Отвечает ли компания вашим потребностям как пользователя? Удалось ли вам успешно завершить задачи? Вы захотели бы вернуться на этот сайт? • Функциональность. С точки зрения функциональности легко ли было завершать реальные задачи или ваши пути приводили в тупики? Регистрация и процедура размещения проблематичны или гладки?
Рис. 9,16. Здесь приведены оценки общего впечатления, функциональности и внешнего облика некоторых сайтов. Для сравнения включены также размеры загрузки начальной страницы в килобайтах
Рис. 9.17. Для страниц итогового отчета по каждому отдельному сайту повторно приведите эти рейтинговые оценки рядом со снимками экранов сайта (рис. 9.14)
334
Глава 9
• Внешний облик. Сайт визуально привлекателен? Что он заставил почувствовать в отношении компании или ее бренда? Показался ли сайт профессиональным, целенаправленным и понятным? Или он выглядит устаревшим, перегруженным и безвкусно оформленным? Другая форма оценки - более всесторонняя, письменная часть, суммирующая отдельные мнения, все «за» и «против» и общее впечатление от сайта из проведенных индивидуальных исследований. Это резюме должно сопровождаться снимками экранов, быть кратким и отражать суть, а также выделять наиболее значимые выводы по отдельному сайту.
Резюме главы Чтобы стать лучшими партнерами наших клиентов, необходимо провести исследования, подобные неформальному анализу особенностей, который описан в этой главе. Это ценная часть процесса выяснения. Хотя итоговый отчет часто богат сюрпризами, а иногда поучителен, следует понимать, что сам процесс анализа столь же важен, как и его результаты, по одной важной причине: он дает возможность и клиенту и команде разработчиков увидеть отрасль клиента с позиции пользователей. Да, вы оцениваете текущее состояние он- и оффлайновой конкуренции в отрасли клиента и производите соответствующие сравнения. И, конечно же, эти результаты ведут к пониманию того, как компания клиента вписывается в конкурентную группу. Но для вас как команды веб-разработчиков основной целью этого анализа является лучшее понимание сайта компании клиента, подготавливаемого к редизайну, а также всей отрасли и интересов пользователей, на которые вы неизменно должны ориентироваться.
Учебные примеры
337
Puc. 5 J . Цветовая палитра, предложенная на ранней стадии редизайна сайта New Riders. В ходе дальнейших работ эта палитра совершенствовалась. Было представлено несколько ее вариантов. В данном случае была выбрана измененная версия
Рис. 5.3. Предварительные варианты оформления, созданные в программах Freehand, Illustrator или Photoshop
338
Учебный пример
Baby Center Клиент: Baby Center URL: www.babycenter.com Проектная группа: Внутренняя Директор по дизайну (первоначальный
дизайн): Джонатан Таил (Jonathan Turtle) Руководитель проекта (первоначальный
Директор по дизайну (редизайн):
Эллисон Аппен (Allyson Appen) Арт-директор (редизайн): Шеннон Миллер (Shannon Miller) Руководитель проекта (редизайн):
Алиса Коэн Рейтер (Alissa Cohen Reiter)
дизайн): Джон Стросс (John Stross) ПРЕДЫДУЩИЙ
BABYCENTER.COM [ПРЕЖНИЙ, ПОЗДНЕЕ И ЕЩЕ ПОЗДНЕЕ] Прошел через несколько этапов, пока развился от пилотного проекта в значимый коммерческий веб-сайт. Каждый редизайн основывался на оценке интересов потребителей. (1997-1999)
339
Учебный пример
BabyCenter.com специализируется на информации о беременности, младенчестве и раннем детстве, а также о товарах для мам и младенцев. Главная задача компании состояла в создании в Интернете наиболее полного информационного ресурса для будущих и молодых родителей.
СОВРЕМЕННЫЙ
BABYCENTER [ПЕРЕПРОЕКТИРОВАННЫЙ] Ввел членство с известной системой сообщений и ссылками. Перепроектированный сайт стал практичнее в использовании благодаря более простому дизайну, который сохранил несколько удачных элементов прежнего сайта, включая эффективное использование персонализации. (2000) Результат: Наличие собственных специалистов обеспечивает быстрое реагирование на интересы пользователей и непрерывное усовершенствование, включающее рост персонализации и представление содержания.
340
Учебный пример
Smug
Клиент: Smug URL: www.smug.com Проектная группа: fearless.net, Нью-Йорк Издатель: Лесли Гарполд (Leslie Harpold) Бюджет: Ноль долларов и два одобрения
Smug - это давно существующий некоммерческий юмористический журнал, издаваемый ежемесячно редактором-дизайнером Лесли Харполдом. Запущенный в 1996 г., сайт берет свое начало из печатавшейся в конце 1980-х - начале 1990-х годов серии «Сделай сам». За эти годы Smug опубликовал в Сети ряд интереснейших опусов.
ПРЕДЫДУЩИЙ
SMUG.COM [ПРЕЖНИЙ] использовал иконки для выделения различных категорий рассказов и произведений. Ряд простых ссылок адресовал к заархивированным в хронологическом порядке материалам.
SMUG.COM [ПРЕЖНИЙ] ОБЪЯВЛЕНИЕ О НОВОМ SMUG.COM [ПЕРЕПРОЕКТИРУЕМОМ] - это юмористическое объявление представляло веб-сайт несколько месяцев во время его редизайна. Предлагался вход на существующий сайт или возможность оставить электронное сообщение для тех, кто желает получить уведомление о запуске обновленного сайта.
Учебный пример
СОВРЕМЕННЫЙ
SMUG.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] отказался от графики в пользу упрощения благодаря недавно созданному инструменту для управления контентом. Цель редизайна - облегчение процесса поддержания сайта как интерактивного журнала, перешедшего с ежемесячного обновления на обновление дважды в месяц. Результат: Хорошо отлаженное обновление.
341
342
Учебный пример
LiquidMedium
ПРЕДЫДУЩИЙ
TURB0STAFF.COM [ПРЕЖНИЙ] был корпоративным, устаревшим и уже не отражавшим цели компании. Настало время изменить и ее брендинг и весь облик сайта.
343
Учебный пример
LiquidMedium специализируется на организации всего процесса обеспечения человеческими ресурсами - от соурсинга и подбора персонала до найма и управления кадрами.
СОВРЕМЕННЫЙ
LIQUIDMEDIUM.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] имеет новый логотип, новый облик и новый брендинг. Выглядит современно и регулярно обновляется; все еще корпоративный, но не окостеневший. (2000 г.)
LIQUIDMEDIUM.COM [ОБНОВЛЕННЫЙ] медленно развился в новый сайт. Перейдя на внутреннее сопровождение, сайт приобрел новый контент и новые разделы. Через шесть месяцев он стал совсем другим. (2001 г.) Результат: Более очевидная навигация и заметные успехи при заключении контрактов с партнерами.
344
Учебный пример
Internар
ПРЕДЫДУЩИЙ
INTERNAP.COM [ПРЕЖНИЙ] не продвигал свою торговую марку. Internap считался довольно хорошей фирменной маркой и узнавался в высших технологических кругах (среди главных технических директоров и главных сетевых администраторов), но брендинг фирмы не распространялся в более широкие круги и организации.
Учебный пример
Internap Network Services Corporation, ведущий провайдер быстрых, надежных интернет-сервисов; создал платформу, которая не просто маршрутизирует данные, а делает это интеллектуально.
СОВРЕМЕННЫЙ
INTERNAP.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] обновил свой внешний облик и пересмотрел стратегию брендинга, добавив девиз и образный рисунок, которые оживляют картину и усиливают впечатление. Сайт представляет Internap как «интеллектуальный» интернет-провайдер. (2000 г.) Результат: Более доступен широкой аудитории.
345
346
Учебный пример
K2SKATES.COM [ПРЕЖНИЙ] не отражал технические преимущества выпускаемых коньков.
Учебный пример
К2, ведущий изготовитель роликовых коньков и аксессуаров, оказывающий поддержку культуры и спорта сообщества роллеров. Эта философия отражена в атмосфере и содержании бренда компании.
СОВРЕМЕННЫЙ
347
348
Учебный пример
DiverseWorks Клиент: DiverseWorks Art Space URL: www.diverseworks.org Проектная группа: Idea Integration, Хьюстон Креативный директор: Джеф Мак-Лахлин (Jeff McLaughlin)
Арт-директор: Джоел Харрис (Joel Harris) Изготовители сайта: Грегори Тейлор (Gregory Taylor), Дэвид Шеферд (David Shepherd), Катерина Метьюс (Katherine Matthews)
ПРЕДЫДУЩИЙ
Учебный пример
349
DiverseWorks - один из ведущих современных худо- ностью, DiverseWorks служит открытой галереей для жественных центров в Соединенных Штатах. Извест- художников, хорошей школой для будущих администный своими крупными образовательными программа- раторов мира искусств и образцом для художественми по искусству и отличающийся финансовой стабиль- ных центров всей страны.
СОВРЕМЕННЫЙ
350
Учебный пример
Janus Клиент: Janus Capital Corporation URL: www.janus.com Проектная группа: Sapient Эксплуатационная группа: внутренняя, Janus
ПРЕДЫДУЩИЙ
JANUS.COM [ПРЕЖНИЙ] представляет собой тип сайта, строго подчиненного основной цели. Целью сайта всегда было круглосуточное онлайновое самообслуживание.
Учебный пример
Корпорация Janus Capital Corporation на протяжении 30 лет играет ключевую роль в сфере взаимных фондов. Janus ориентируется, прежде всего, на активные инвестиции индивидуальных вкладчиков. Базируясь в Денвере, корпорация осуществляет большинство деловых контактов по телес/юну или в онлайновом режиме.
СОВРЕМЕННЫЙ
JANUS.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] использовал результаты социологических исследований, чтобы лучше понять мотивацию инвесторов. Введена более интуитивная и действенная для пользователей навигация. Внешнее оформление сайта изменено с целью более эффектного позиционирования бренда компании. Результат: Большая продуктивность при меньших издержках. В январе 2001 г. через Janus.com корпорация приобрела 62% инвесторов по сравнению с 32% в январе 1999 г.
351
352
Учебный пример
ПРЕДЫДУЩИЙ
F00D.COM [ПРЕЖНИЙ] подавал себя в цветах и тематике своей маркетинговой кампании и старомодном стиле 1950-х. Причудливо и с юмором, да, но загрузка была долгой, а юзабилити было не на высоте.
353
Учебный пример
Food.com обслуживает поставщиков продовольствия, обеспечивая рестораны возможностью онлайнового заказа и службой доставки. Хотя бизнес продолжает расширяться в различные связанные с продовольствием отрасли, основой Food.com остается «Интернет-служба заказов и доставки».
СОВРЕМЕННЫЙ
FOOD.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] развился в продовольственный портал с дополнительными разделами (обеды, кулинария и новости) и новым, простым и ясным имиджем бренда. Цели редизайна были больше ориентированы на аудиторию в отличие от прежнего подхода, сфокусированного на рестораны и управляемого технологией. (2000 г.)
Результат: Улучшение юзабилити благодаря ясным указателям и понятным пользовательским маршрутам. Количество онлайновых заказов возросло.
354
Учебный пример
Casey Claybourne Клиент: Casey Claybourne URL: www.caseyclaybourne.com Студия дизайна: Waxcreative Design, Окленд, Калифорния Все роли в проекте: Эмили Котлер (Emily Cotler)
ПРЕДЫДУЩИЙ
CASEYCLAYB0URNE.COM [ПРЕЖНИЙ] был состряпан неуклюже, на уровне бесчисленных любительских сайтов в Сети, которыми так часто вынуждены довольствоваться мелкие бизнесмены и творческие личности, чьи дети/мужья/кузены немного знают HTML.
Учебный пример
Любовные романы составляют 58.2%] популярных книг в мягких обложках, покупаемых в Соединенных Штатах, что дает 1.35 миллиардов долларов. Кейси Клей борн (Casey Claybourne), отмеченная многими наградами писательница, собрала восторженные отзывы о своем уже девятом романе «Прелесть» («A Thing Of Beauty»). Как и у многих людей творческих профессий, она и есть ее собственный маленький, но процветающий бизнес. СОВРЕМЕННЫЙ
355
356
Рис. 5.7. Старый сайт заполнен контентом и статичен
Pitc. 5.5. Этот начальный вариант дизайна разработан в форме модульной сетки; он выглядит модно и дружелюбно. Такой подход позволяет расположить вверху главной страницы несколько дополнений
357
Рис. 5.9. Этот начальный вариант дизайна производит мягкое/элегантное впечатление. Такой подход подчеркивает настрой и образ компании; он предлагает простую систему ссылок к основным разделам контента
Puc. 5.10. Этот начальный вариант дизайна создает облик корпоративного/современного сайта с ярким впечатляющим лозунгом компании и подчеркиванием ее индивидуальности. Он позволяет также выделить на главной странице книжные новинки
358
Puc. 5.12. Главная страница (вверху) и вторичная страница (внизу) в процессе разработки. Каждая из них - отдельный многослойный файл с перечислением всех находящихся на странице текстов. Четко именованные слои указывают состояние динамического элемента графики и его функциональность. Не забудьте включить справочный слой, содержащий все слои файла склеенными, - он нужен дизайнерам производства
Puc. 5.13. Этот образец руководства no стилю оформления представлен в формате HTML
359
Puc. 7.3. Smug.com вывесил это шутливое объявление за несколько месяцев до запуска перепроектированного сайта. Вместе с объявлением предлагался выбор: вход на существующий сайт или подписка на уведомление по электронной почте о запуске обновленного сайта
Рис. 7.4. Ознакомьте пользователей с предстоящими изменениями. (Помните, что люди обычно не любят перемен, даже перемен к лучшему.) До запуска перепроектированного сайта в конце 2000 г. Janus Funds (www.janus.com) разместил всплывающее окно с выбором: показать будущий облик сайта или закрыть окно
Puc. 7.5. Artist Booking International (www.artistbooking.com) осуществлял мягкий запуск, что позволило провести QA-тестирование на действующем сервере перед окончательным возрождением сайта. Эта страница, объявлявшая о загрузке в данный момент перепроектированного сайта, находилась на URL в период недоступности самого сайта
360
Рис. 7.12. Какие страницы на вашем сайте наиболее популярны? Можете ли вы охарактеризовать поведение и модели пользователей? Эта типовая диаграмма сгенерирована из обычного файла журнала сервера и показывает наиболее посещаемые страницы
Рис. 8.10. В данном итоговом отчете в рекомендации включены снимки экрана и выноски, иллюстрирующие конкретные пункты. Не все отчеты требуют такой детализации
Алфавитный указатель
А
А
ALT-теги, 56, 141, 178, 222, 215, 229, 230, 267
администратор контента, 47, 117, 134, 139, 141 анализ возможностей аудитории, 41, 83, 214 конкуренции, 29, 60, 312, 327 опрос клиента, 71-74 отрасли, 42, 60, 90, 312
D DHTML и каскадные таблицы стилей, 225 Dreamweaver 4 (Macromedia), программа, 222 Check Links Sitewide, опция для поиска «плохих» ссылок, 273 Section 508 Accessibility Suite, 215 календарь, 113 пример невидимого содержимого, 230 резиновые страницы, 179 экран метагенератора, 230 F Flash и дизайн, 178, 189 •I HTML необходимость навыков в, 205 руководства, 207 шаблоны, 56, 222 М Мае или PC, для дизайна, 171, 176 МЕТА-данные, 56, 77, 141, 178, 222, 239, 252 267 инструмент для создания, 263 примеры, 264 создание и внедрение, 230 Т TITLE-теги, 56, 141, 222, 229, 230, 251, 260-264, 267 1 Л "3-...
АА"7 14 Зак 667
Ч е л е й с а й т а > 51» 1 7 3 юзабилити-тестирование, 305 анализ особенностей конкурентов, 316 время, бюджет и, 320 сравнение с анализом отрасли, 313 э т а п анализа и тестирования, 328 э т а п итогового отчета, 330 этап определения процесса, 316 этап составления перечня особенностей, 324 аппаратура, инвестиции в, 171 арт-директор, 116, 177 архивирование документации, 59, 255 архивы фотографий, сайты, 193 аспекты проектирования, 170 аспекты редизайна, 28 аудит контента, 135 аудитория возможности, 41, 82, 214 изучение, 41, 78, 212 индивидуальные профили, 78 креативный бриф и, 94 оповещение о редизайне, 258 определение, 30 проектирование для пользователя, 177 рекламная стратегия и, 258 сведения о, запрашивание, 70 структурирование сайта и, 131
362
Базовый процесс обзор, 39, 63 план вступительной встречи, 123 технологическая схема, 36-38 фаза визуального оформления и тестирования, 50, 170 фаза запуска и сопровождения, 58, 248 фаза определения проекта, 40, 68 фаза производства и контроля качества, 53, 204 фаза разработки структуры сайта, 46, 130 безопасность сайта, укрепление, 62, 276 брандмауэры, 277 брендинг, 26, 64, 75, 88, 90, 126, 132, 137,184, 245, 313 броузеры и визуальный дизайн, 180 быстродействие, пропускная способность, 83, 177 бюджет QA-тестирования, 239 возможные проблемы, 100 время и, 104, 320 контроль качества и, 231 обзор, 43 поправки к, 100 предъявление счетов, 99 разбухание проекта и, 100 составление, 99 форма для дополнительного финансирования, 109 что и как оценивать, 101, 106
в веб-сайты A List Apart, онлайновый журнал, 226 Adam Moore Photography, 155 Altoids Too Hot, 84 Amazon.com, 84 Art Institute Online, 178 Artist Booking International, 261 away.com, 322
Алфавитный указатель Baby Center, учебный пример, 22-23 Banana Republic, 154 Bobby, 215 Casey Claybourne учебный пример, 308-309 Cooking.com, 155 DiverseWorks учебный пример, 200-201 Etrade, 156 Expedia.com, 321, 331 Food.com система слежения, 275 учебный пример, 280-281 Gomez.com, 327 Gomoll Research Design Inc., 81 Google, 154 Hit Box, 85 Husk Jennings Advertising, веб-агентство, 285 Inspiration, 147 Internap, учебный пример, 126-127 Janus Funds, 261 учебный пример, 244-245 JimHeid, 115 K2 Skates, учебный пример, 166-167 LiquidMedium, учебный пример, 64-65 Lord of the Rings, 85 lynda.com, 189 Macromedia, 83, 178 Dreamweaver 4, 179, 230, 273 Section 508 Accessibility Suite, 215 SiteSpring, 118 календарь, 113 My Discount Broker, 156 Net Mechanic, 273 OnlineOpinion (OpinionLab), 274 Petsmart.com пример МЕТА-данных, 264 Phinney/Bischoff Design House, 89 Purina.com пример МЕТА-данных, 264 Search Engine Watch, 267 Server Check Pro, 269 SmartMonkey Media, 133 Smug, 261 учебный пример, 32-33
Алфавитный указатель Stat Market, 85 Timeslice, 105 Travelocity.com, 321 United Airlines, 323 useit.com: Jakob Nielsen's Website, 286 Visio, 147 Web Position Gold, 262 Web Review, 130 Web Site Garage, 273 Web Standards Project, 226 World Wide Web Consortium и проблема доступности, 215 архивы фотографий, 193 готовые коды, 225 инструменты для моделирования на бумаге, 157 инструменты для отслеживания ошибок, 239 информация о регистрации сайта, 259 обзор принципов и стратегии контроля качества, 233 веб-стандарты, 226 ведомость клиентских технических требований, 41, 54, 206 важность, 212 структура файлов и, 217 целевые спецификации, 208 Вейнман, Линда (Weinman, Lynda) о способности дизайнеров решать проблемы, 189 верификационное тестирование, 236 версии сайта и низкая пропускная способность, 178 верхний регистр и поисковые системы, 267 взаимодействие с клиентом, 212 важность, 29 последствия задержки контента, 216 визуальный дизайн, 171, 199 Flash и, 178, 189 Мае или PC, 171, 176 броузеры и, 180 варианты, показ клиенту, 182-187 выверка, 52 графические шаблоны и, 193 информационный дизайн и, 132
363 визуальный дизайн контрольный лист, 183 контрольный список задач, 199 концепции, разработка, 174 отзывы пользователей, 177 представление клиенту, 182, 186 проверка состояния, 216 размеры экрана, 179 разумный дизайн, 51, 172 руководство по стилю оформления, 196 Сигел Дэвид о, 180 тест на беглый просмотр, 182 фаза структурирования и, 171 цели, анализ, 173 включение включений, 224 вложенные фреймы и контроль качества, 236 внесетевые конкуренты, анализ, 320 внешний хостинг, 277 внутреннее программирование потребности, выяснение, 42, 79, 86 внутренние разработки интеграция, 231 карта сайта, создание, 146 протосайт, 190 возрождение сайта запуск сайта, 61, 264 мягкий запуск, 258 обзор, 257 регистрация в поисковых системах, 61, 259 рекламный план, 61, 258 время бюджет, анализ конкурентов и, 320 отслеживание, 44, 101, 104, 214 оценка стоимости, 101 распределение времени по этапам, 102 распределение бюджета, 106 вступительная встреча, 122 вторичная аудитория, 30 вторичное содержимое, 139 выверка визуального дизайна, 52 выход из задачи при юзабилити-тестировании, 301
364 выяснение, этап фазы 1 анализ отрасли, 41, 60, 90, 312 аудитория возможности, 41, 82, 214 изучение, 41, 78, 212 важность, 123 контрольный список задач этапа выяснения, 90, 125 обзор, 41, 70, 91 опрос клиента, 41, 70 потребности внутреннего программирования, 42, 79, 86 Финней Лесли об этапе выяснения, 88 эксплуатационный опрос, 76
г гиперссылки плохие, 273 сохранение, 262 глобальные элементы, обработка установка стандартов, 197 Гомолл, Кейт (Gomoll, Kate) о профилировании пользователей, 80 графика, разрезание на части и оптимизация, 55, 220 графики работ инструктажи по сопровождению, 256 обзор, 108 план поставки контента, 138 подробный график с компонентами, подлежащими сдаче, 110 составление, 44, 108 эксплуатационная поддержка, 272 графические карты ссылок и поисковые системы, 266 графические шаблоны, 222 описание, 223 содержимое, 195 создание, 53, 193 сравнение с вариантами дизайна, 193 файлы для производства, 194 группа, формирование проектной, 44, 114
Алфавитный указатель
д демонстрационная площадка организация, 45, 114 представление вариантов дизайна, 182 детали и уточнения, список, 97 динамические сайты контейнеры для содержимого, 229 план интеграции с внутренним интерфейсом, 217, 231 документация аудит контента, 136 бланк для тестирования, 303 варианты визуального дизайна, 174 ведомость клиентских технических требований, 208-211 график работ, 111 детали и уточнения, список, 98 итоговый отчет, 306 калькуляция, 106 карта сайта, 142-145 контрольный лист визуального дизайна, 183 креативный бриф, 94 макет, 150 опросный лист клиента, 72 отслеживание и архивирование, 59, 255 перечень особенностей, 325 план анализа конкуренции, 319 план контроля качества, 234, 237 план поставки контента, 140 план эксплуатационной поддержки, 272 план юзабилити-тестирования, 293 пользовательские сценарии, 160 послетестовый опрос, 304 расширенный технический опросный лист, 87 руководство по стилю оформления, 196 производственная часть, 251-252 соглашение об именовании, 146-149 сохранение документации, 101
Алфавитный указатель таблица особенностей конкурентов, 332 техническая спецификация, 86 форма для дополнительного финансирования, 109 эксплуатационный опрос, 77 дополнительное финансирование, форма, 109 достойные ссылок сайты, 266 доступность сайтов, 178, 215 World Wide Web Consortium и проблема доступности, 215 Дункан, Лей (Duncan, Leigh) об определении проблем и стратегии редизайна, 30
3 загрузка и включение включений, 224 задержка поставки контента, 47, 216 закладки, сохранение, 262 заключительная встреча, 60, 256 заключительная проверка, 240 замораживание контента, 228 заполнение страниц, 56, 228 запуск сайта, 61, 264 мягкий запуск, 258 регистрация в поисковых системах, 61, 259 рекламный план, 61, 258 затраты формальный анализ отрасли, 312 юзабилити-тестирование, 290 Зельдман, Джеффри (Zeldman, Jeffrey) о веб-стандартах, 226
И иерархическая структура карты сайта, 145 изменения в проекте контроль над клиентом, 183 подпись клиента, получение, 45 разбухание проекта, 100 форма для дополнительного финансирования, 109
365 изображения, прослеживание происхождения, 193 индивидуальные исследования конкурентной группы, 328 индивидуальные профили пользователей, 78 инструктажи по сопровождению, 256 инструменты для моделирования на бумаге, 157 отслеживания ошибок, 239 проверки работы сайта, 273 создания МЕТА-данных, 263 интеграция с внутренними разработками, 217, 231 интерактивные макеты, 157 интранет-сайты поиск участников тестирования, 296 информационный дизайнер, 116, 130-134 информация о регистрации сайта, 259 информация, полученная от клиента, 41, 72, 77 испытательные стенды, 238 итоговый отчет конкурентный анализ, 330 юзабилити-тестирование, 306
к калькуляция проекта, 106 карта сайта, 141 внутренний интерфейс и, 146 иерархическая структура, 145 карта старого сайта, 144 программы для создания, 147 разбухание проекта и, 141 соглашения об именовании и, 146 формат сверху вниз, 142 формат слева направо, 143 каскадные таблицы стилей (CSS), 225, 227 категоризация конкурентной группы, 320, 324 квалификация контент-менеджер, 47, 117, 134, 139, 141 группа сопровождения, 296
366 конкурентный анализ, 313 ответственный за контроль качества, 232 создание HTML, 205 юзабилити-тестирование, 289, 301 клиенты графики работ и, 108 демонстрационная площадка, 114, 118 копирайтер, 117, 134, 139, 141 неформальное тестирование и, 237 определение, 248 опрос клиента, 70-77 план проекта, подпись, 97 получение одобрения дизайна, 51 подписи, 45, 97, 101 понимание до начала кодирования, 212 представление визуального дизайна, 182-187 разбухание проекта и, 42 согласование целей, 71 сотрудничество с, 76 сроки поставки контента, 139 технические требования, 79 возможности, 20, 82 цели редизайна, 92 кодирование вручную в сравнении с WYSIWYG, 205, 228 команда эксплуатационная поддержка, 268 компоновка HTML-шаблоны, создание, 56, 222 графика, разрезание на части и оптимизация, 55, 220 заполнение страниц, 56, 228 интеграция с внутренними разработками, 231 невидимое содержимое, включение, 56,229 обзор, 55, 204 облегченные сценарии, 56, 224 сложные функциональные возможности, введение, 57
Алфавитный указатель конкурентная группа внесетевые конкуренты, включение, 320 индивидуальные исследования, 328 категоризация, 320, 324 неформальное юзабилити-тестирование, 328 определение, 318 конкурентный анализ Gomez.com, 327 внесетевые конкуренты, 320 внутренняя команда, 314 итоговый отчет, 330 обзор, 29, 60, 312, 316, 319, 334 определение процесса, 316 опытный пользователь в отрасли клиента, становление, 315 отрасли и особенностей, 312 сравнение, 313-314 проведение анализа и тестирования, 326 составление перечня особенностей, 324 консультации специалистов, 28, 289 контактная информация, 76 контейнеры для содержимого, 145, 229 контент аудит существующего, 135 визуальный дизайн и, 180 готовый для Сети, 140 задержка поставки, 47, 216 замораживание, 214, 228 контент-менеджер, см. копирайтер невидимое содержимое, 56, 229 определение тематики, 134 план поставки, 138-140 подготовка к расширению, 138 проверка состояния, 214, 228 разработка, 134 структурирование, 138 эксплуатационная поддержка и, 278 контроль версий, 222 контроль за компонентами, 193 контроль за поправками, 100 контроль качества важность, 231 неформальный, 236
Алфавитный указатель ошибки, расстановка приоритетов и устранение, 239 полуформальный, 238 серверы и, 235 создание плана, 233, 237 стандартные процедуры проверки, 234 формальный, 238 фреймы и, 236 юзабилити-тестирование и, 236 конфиденциальность, 138 концепции, разработка, 51, 174 копирайтер, 117, 134, 139, 141 креативный бриф, 31, 43, 75, 93-95 Кэссирер, Чэд (Kassirer, Chad) о понимании клиента до начала кодирования, 212
М макеты интерактивные, 157 навигация, именование и маркировка, 153 основные маршруты пользователей, определение, 49, 157 пользовательские сценарии, 159 содержимое, 150 создание, 49, 149 юзабилити-тестирование, 289 маркетинг, 88 маркировка, 49, 153 маршруты пользователей, основные определение, 49, 157 масштаб проекта, 75, 214 ожидания и реальность, 207 масштабируемость и структура файлов, 219 материалы, готовые для Сети, 140 мониторинг серверов, 269 мягкий запуск, 258
н навигация именование и маркировка, 153 обеспечение, 49, 153
367 навигационная структура и разбухание проекта, 141 навигационные модели, 153-156 надбавка к расчетной стоимости, 100 наем контент-менеджера, 47, 117, 134, 139 экспертов конкурентный анализ, 313 юзабилити-тестирование, 289 наименования HTML, 148, 149 направленная навигация, 153, 154 настройка опроса клиента, 71, 75 невидимое содержимое, 56, 229 незыблемая дата запуска, 257 необходимость внутреннего программирования, уточнение, 217 неформальный контроль качества, 236 клиенты и, 237 юзабилити-тестирование и QA, 236 нефункциональные маршруты, 158 Нильсен, Якоб (Nielsen, Jakob) о сокращенном юзабилити-тестировании, 286
о обзорный график работ, 110 облегченные сценарии, 56, 224 обратная связь, 45, 258, 274 общий профиль аудитории, 78 опасные клиенты, 74 опрос клиента, 41, 70-74 эксплуатационный опрос, 76 опросы по электронной почте и онлайновые, 120, 122 оптимизация графики, 55, 220 опытный пользователь в отрасли клиента, становление, 315 организационные наименования, 148 основная функциональность, тестирование, 190 основные маршруты пользователей, определение, 49, 157 отбор участников юзабилити-тестирования,295-297
368 ответственный за контроль качества, 117, 233 ответственный за производство, 116 откат, 265 отслеживание бюджета, 101 времени, 44, 100, 104, 214 документации, 255 ошибки вопиющие, 240 обнаружение, 240 неформальный контроль качества и, 237 расстановка приоритетов и устранение, 239, 265 «страница не найдена», 262
п пароли, 277 первичная аудитория, 30 передача сайта, 59, 249 документация, отслеживание и архивирование, 59, 255 заключительная встреча, 60, 256 инструктажи по сопровождению, 60, 256 пакет для, создание, 59, 254 производственная часть руководства по стилю оформления, 250-253 перепроектирование Дункан Лей о, 30 советы для успешного редизайна, 28 технология и стратегия, 27 цели и причины, 26 перерасходы, счет за, 214 перечень особенностей, 324 план анализа конкуренции, 319 контроля качества, 233, 237 поставки контента, 47, 138 проекта детали и уточнения, список, 97 компоновка, 45 создание, 96
Алфавитный указатель сравнение с предложением, 96 эксплуатационной поддержки, 272 юзабилити-тестирования, 293 планирование, 43, 69, 96 бюджет, составление, 43, 99 важность, 28 график работ, составление, 44, 108 демонстрационная площадка, организация, 45,114 инструктажи по сопровождению, 60, 256 компоновка плана проекта, 45 отслеживание времени, 44, 104 проверка качества, 57, 233 проектная группа, формирование, 44, 114 рекламная стратегия, 61, 258 эксплуатационная поддержка, 272 юзабилити-тестирование, 45, 120, 158, 255, 288, 292 подпись клиента получение, 45, 97, 101 поисковая навигация, 154 поисковые механизмы TITLE-теги, 262 поисковые системы как сделать сайт достойным ссылок на него, 266 регистрация в, 259 сокрытие от, 267 полуформальное тестирование, 238, 291 пользователи, см. также аудитория высокоскоростная категория, 83 дизайн для, 177 опросы по электронной почте и онлайновые, 120, 122 разумный дизайн, 51, 172 тест на беглый просмотр, 182 фокус-группы, 80, 121, 122, 177, 285 пользовательские сценарии, 157 понимание клиента, 212 последовательная навигация, 153, 155 послетестовый опрос, 305 права на использование изображений, 193
Алфавитный указатель предельных сроков, определение, 44 предъявление счетов, 99 применение облегченных сценариев, 56, 224 примеры редизайна, учебные Baby Center, 22-23 Casey Claybourne, 308-309 Diverse Works, 200-201 Food.com, 280-281 Internap, 126-127 Janus, 244-245 K2 Skates, 166-167 LiquidMedium, 64-65 Smug, 32-33 приоритеты, расстановка устранение ошибок после запуска, 239, 265 проблемы и стратегия редизайна, определение, Дункан Лей о, 30 проверка дизайна, 171 заключительная, 240 качества, 57, 232 практичности сайта, 121 функциональности, 52, 192 программист/специалист по внутреннему интерфейсу, 117 программное обеспечение, инвестиции в, 171 программы для регистрации в поисковых системах, 262 создания карты сайта, 147 проектная группа необходимость навыков в HTML, 205 пропускная способность, быстродействие (bandwidth), 83, 177 протосайт достоинства, 190 необходимость, 191 описание, 171, 172 функциональность, тестирование, 192 профилирование пользователей, 78, 80
р рабочий лист креативного брифа, 95 разбиение на разделы, 135 разрезание на части, графика, 55, 220 разбухание проекта, 42, 100, 108, 141 размер файлов, 225 размеры экрана, 179 разработка замораживание, 249 концепций, 51, 174 разумный дизайн, 51, 172 распределение бюджета, 99, 106 расстановка приоритетов и устранение ошибок, 239 расширение, подготовка к, 138 расширенный технический опросный лист, 87 регистрация в поисковых системах, 61, 259, 262 редакторы WYSIWYG, 205 кодирование вручную в сравнении с, 228 редизайн, см. перепроектирование юзабилити-тестирование и, 288 «резиновые» страницы, 179, 198 рекламная стратегия, 61, 258-260 ресурсы по юзабилити-тестированию, 301 ресурсы с готовыми кодами, 225 руководитель проекта, 116 руководство по стилю оформления, 196, 250
с серверы демонстрационные площадки на, 118 контроль качества и, 235 мониторинг, 269 Сигел, Дэвид (Siegel, David) о визуальном дизайне, 180 сложные функциональные возможности, введение, 57 Смит, Карл (Smith, Carl), 285 советы для успешного редизайна, 28
Алфавитный указатель
370 соглашения об именовании, 49, 146-149, 251 состояние проекта, оценка, 55, 205 возможности аудитории, пересмотр, 214 дизайн, проверка, 216 контент, проверка, 214 план интеграции с внутренним интерфейсом, уточнение, 217 планируемый масштаб проекта и реальность, 207 рекомендации, составление, 206, 207 сохранение документации, 101 специализация, Джим Хейд о, 115 специалисты технические консультации с, 28 привлечение, 86 способность дизайнеров решать проблемы, Вейнман Линда о, 188 сроки сдачи, предельные определение, 44 задержка, 108 с точки зрения контента, 46, 134 определение тематики, 134 аудит существующего контента, ( 135 план поставки, 138 сайта, 48, 141 соглашение об именовании, 146 создание карты сайта, 141 структура, 144 страницы, 49, 149 аспекты навигации, 49, 153 единообразие маркировки и именования, 49, 153 макеты, создание, 49, 149 основные маршруты пользователей, 49,157 стандартизация обработки, установка, 197 старый сайт аудит текущего контента, 135 карта сайта, 144 страница-заставка, 267
страницы, заполнение, 56, 228 стратегия, определение, 30 структура сайта, 46, 130, 165 визуальный дизайн и, 171 иерархическая карта сайта, 145 информационный дизайн, Фио Ани о, 132 информационный дизайнер, задачи, 134 контейнеры для содержимого, 145, 229 контент, структурирование, 47, 138 основные маршруты пользователей, 157 интерактивный способ моделирования, 157 пользовательские сценарии, 159 проверка на бумажных прототипах, 157 подготовка к расширению, 138 соглашения об именовании, 146 создание макетов, 149 навигация, 153 содержимое, 150 файловая, формирование, 217 сфера деятельности анализ, обзор, 42, 60 схемы фреймов, 252, 253 счетчик бюджетного времени, 104
т таблица особенностей, 332 таблицы для планирования эксплуатационной поддержки, 272 таблицы стилей, преимущества, 226 теги, 56, 141, 222, 229, 230, 267 ALT, 178, 215, 229, 230, 266, 267 МЕТА-данные, 77, 178, 239, 252, 267 инструмент для создания, 263 примеры, 264 создание и внедрение, 230 TITLE, 251, 229, 230, 260-264, 267 текущий сайт аудит контента, 135 включение в конкурентный анализ, 320
Алфавитный указатель тест на беглый просмотр, визуальный дизайн, 182 тестирование, 54 доступности сайтов, 215 заключительная проверка, проведение, 240 квалификации эксплуатационной команды, 269 начальных HTML-файлов, 223 обзор, 57, 204, 231 пользователями, 120 функциональности, 190, 192 техническая спецификация, 86 технические возможности аудитории определение, 41, 82 анализ, 83 технические потребности, 82 определение, 79, 86 технические специалисты привлечение, 86 технология, которая работает, 27 третичная аудитория, 30
У укрепление безопасности сайта, 62, 276 Уорд, Эрик (Ward, Eric) как сделать сайт достойным ссылок на него, 266 успешность сайта, оценка, 62, 274 уточнение, этап фазы 1, 42, 92 участники юзабилити-тестирования, подбор, 295
Ф фаза визуального оформления и тестирования (3) контрольный список задач, 199 обзор, 50, 170, 198 фаза запуска и сопровождения (5) контрольный список задач, 279 обзор, 58, 248, 277 фаза определения проекта (1) контрольный список задач, 125 обзор, 40, 69, 123
371
фаза производства и контроля качества (4) контрольный список задач, 243 обзор, 53, 204, 242 структура файлов, формирование, 217 фаза разработки структуры сайта (2) контрольный список задач, 165 обзор, 46, 130, 164 файлы для производства, 194 контроль версий, 222 размер, 225 Финней, Лесли (Phinney, Leslie) о брендинге и этапе выяснения, 88 Фио, Ани (Phyo, Ani) об информационном дизайне, 132 фокус-группы, 80, 121, 122, 177, 182, 285 фон,180 формальное тестирование, 238 неформальное тестирование в сравнении с, 291 форматирование кодов, 251, 252 формирование проектной группы, 114 формирование структуры файлов, 217 фреймы контроль качества и, 236 поисковые системы и, 267 функциональные возможности сложные, введение, 57 тестирование, 192 функциональные маршруты, 158
X хакеры, обнаружение, 276 Хейд, Джим (Heid, Jim), 27 о распределении обязанностей и специализации, 115 хит, 274 хостинг, внешний, 277
ц цвет, 176, 198 цветовой куб отвечающий требованиям веб, 176 забудьте о, 181
Алфавитный указатель
372 целевые группы, см. фокус-группы цели анализ целей сайта, 51, 173 клиента, обобщение, 70 согласование, 71 опрос и, 74, 75 креативный бриф, составление, 93 технические требования, 79 юзабилити-тестирование, 307 цены иллюстраций и фотографий, 193
ш шаблоны HTML, создание, 56, 222 графические, создание, 193 шрифты и графические шаблоны, 196
э эксплуатационная поддержка безопасность, укрепление, 62, 276 внутренняя и внешняя команды, 270 возможности команды, оценка, 62, 269 обучение, 60, 256 контрольный список задач, 279 обзор, 61, 248, 268, 277 опрос клиента и, 75 эксплуатационный опрос, 76 ответственность за решение проблем после передачи сайта, 250 план, разработка, 62, 272 руководство по стилю оформления, 196 структура файлов и, 217 успешность сайта, оценка, 62, 274 эксплуатационный опрос, 76
Эрик У орд (Eric Ward) о том, как сделать сайт достойным ссылки на него, 266 этап определения процесса анализа особенностей, 316 конкурентная группа, 318 категоризация, 320 формирование плана исследований, 318
ю юзабилити, определение, 285 юзабилити-тестирование, 54, 284, 296, 307 важность, 286 затраты, 290 книги и ресурсы по, 301 конкурентной группы, 328 контроль качества и, 236 Нильсен о, 286 планирование, 158, 255, 293 преимущества, 307 проведение в 4 этапа, 290 анализ данных и составление рекомендаций, 305 выход из задачи, 301 итоговый отчет, 306 один на один, 290 план и подготовка, 292 подбор участников, 295 послетестовый опрос, 304 предложения, заметки, 303 проведение сеанса, 301 профили участников, 297 сбор данных, 302 сценарий, 294 старый сайт и, 288 формальное и неформальное, 291 цели и, 307
