авторефераты диссертаций БЕСПЛАТНАЯ БИБЛИОТЕКА РОССИИ

КОНФЕРЕНЦИИ, КНИГИ, ПОСОБИЯ, НАУЧНЫЕ ИЗДАНИЯ

<< ГЛАВНАЯ
АГРОИНЖЕНЕРИЯ
АСТРОНОМИЯ
БЕЗОПАСНОСТЬ
БИОЛОГИЯ
ЗЕМЛЯ
ИНФОРМАТИКА
ИСКУССТВОВЕДЕНИЕ
ИСТОРИЯ
КУЛЬТУРОЛОГИЯ
МАШИНОСТРОЕНИЕ
МЕДИЦИНА
МЕТАЛЛУРГИЯ
МЕХАНИКА
ПЕДАГОГИКА
ПОЛИТИКА
ПРИБОРОСТРОЕНИЕ
ПРОДОВОЛЬСТВИЕ
ПСИХОЛОГИЯ
РАДИОТЕХНИКА
СЕЛЬСКОЕ ХОЗЯЙСТВО
СОЦИОЛОГИЯ
СТРОИТЕЛЬСТВО
ТЕХНИЧЕСКИЕ НАУКИ
ТРАНСПОРТ
ФАРМАЦЕВТИКА
ФИЗИКА
ФИЗИОЛОГИЯ
ФИЛОЛОГИЯ
ФИЛОСОФИЯ
ХИМИЯ
ЭКОНОМИКА
ЭЛЕКТРОТЕХНИКА
ЭНЕРГЕТИКА
ЮРИСПРУДЕНЦИЯ
ЯЗЫКОЗНАНИЕ
РАЗНОЕ
КОНТАКТЫ


Pages:   || 2 | 3 | 4 | 5 |   ...   | 8 |
-- [ Страница 1 ] --

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

Веб-редизайн: книга Келли Гото и Эмили Котлер

Перевод Г. Нифонтовой

Главный редактор

А. Галунов

Зав. редакцией Н, Макарова

Научный редактор А. Михайлов

Редактор Н. Макарова Художник В. Тренда Корректор С. Беляева Верстка Н. Гриценко Гото К. и Котлер Э.

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

ISBN 5-93286-040- Описываемая в книге технология, именуемая Базовым процессом, представляет собой четкую последовательность действий, применимую к любым веб-проектам вновь создаваемым или перепроектируемым, от простых до самых сложных.

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

ISBN 5-93286-040- ISBN 0-7357-1062-7 (англ) © Издательство Символ-Плюс, 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: WORK FLOW THAT WORKS, 1* Edition, 0735710627 by GOTO, KELLY;

COTLER, EMILY, опубликованного Pearson Education, Inc. (New Riders), Copyright © 2002 КЕЛЛИ ГОТО и ЭМИЛИ КОТЛЕР.

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

Издание нерусском языке опубликовано издательством «Символ-Плюс», © 2003.

Издательство «Символ-Плюс». 193148, Санкт-Петербург, ул. Пинегина, 4, тел. (812) 324-5353, edit@symbol.ru. Лицензия ЛП N 000054 от 25.12.98.

Налоговая льгота - общероссийский классификатор продукции ОК 005-93, том 2;

953000 - книги и брошюры.

Подписано в печать 08.01.2003. Формат 70x90 У16. Печать офсетная.

Объем 23,5 печ. л. Тираж 3000 экз. Заказ N Отпечатано с диапозитивов в Академической типографии «Наука» РАН 199034, Санкт-Петербург, 9 линия, 12.

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

Фаза 2: Разработка структуры сайта Определение тематики контента Аудит существующего контента Структурирование контента Создание плана поставки контента Создание карты сайта, Пересмотр текущей организации сайта Определение структуры сайта Установка соглашений об именовании Организационные наименования Наименования HTML Создание макета Содержимое макета Обеспечение навигации Именование и маркировка Определение основных маршрутов пользователей Пользовательские сценарии Резюме фазы 2 Оглавление Глава 5. Фаза 3: Визуальное оформление и тестирование Начало творческого процесса Разработка разумного дизайна Анализ целей сайта Разработка концепций Проектирование для пользователя Представление дизайна и получение одобрения Выверка переходов и функциональности HTML-протосайт Проверка функциональности Создание графических шаблонов Создание руководства по стилю оформления Установка стандартов Резюме фазы 3 Глава 6. Фаза 4: Производство и контроль качества Оценка состояния проекта Составление рекомендаций Запланированный масштаб сталкивается с реальностью Пересмотр возможностей аудитории Проверка состояния контента Проверка состояния дизайна Уточнение плана интеграции с внутренним интерфейсом Формирование файловой структуры Файловая структура и масштабируемость Разрезание на части и оптимизация Создание шаблонов и страниц HTML Применение облегченных сценариев Заполнение страниц Невидимое содержимое Интеграция с внутренними разработками Понимание важности контроля качества (QA) Создание плана контроля качества (QA) Упрощенный/неформальный контроль качества Полуформальный контроль качества Формальный контроль качества Расстановка приоритетов и устранение ошибок Заключительная проверка Резюме фазы 4 Глава 7. Фаза 5: Запуск и сопровождение Передача сайта Завершение создания руководства по стилю оформления сайта Создание пакета передачи 8 Оглавление Отслеживание документации Проведение заключительной встречи Планирование инструктажей по сопровождению сайта Возрождение Подготовка плана анонсирования Регистрация в поисковых системах Запуск сайта Эксплуатационная поддержка сайта Оценка возможностей группы сопровождения Внутренние и внешние группы сопровождения Разработка плана эксплуатационной поддержки Оценка успешности сайта Укрепление безопасности сайта Резюме фазы 5 Глава 8. Юзабилити-тестирование Понимание юзабилити Начало работы Юзабилити и редизайн Когда тестировать Затраты на тестирование Проведение юзабилити-тестов: четырехэтапный процесс Этап 1: План и подготовка Этап 2: Подбор участников Этап 3: Проведение сеанса Этап 4: Анализ данных и составление рекомендаций Резюме главы Глава 9. Анализ конкуренции Формальный анализ отрасли и неформальный анализ особенностей.... Как стать опытным пользователем в отрасли клиента Проведение анализа Этап 1: Определение процесса Этап 2: Составление перечня особенностей Этап 3: Проведение анализа и тестирования Этап 4: Создание итогового отчета Резюме главы Учебные примеры Алфавитный указатель Об авторах UTli Келли Гото (Kelly Goto) - пользующийся успехом лектор и преподаватель в об ласти веб-разработок, информационного дизайна и пользовательской среды. Ее доклады и лекции вызывают неизменный интерес на конференциях и в кулуа рах, на занятиях и в перерывах. Келли удается обсуждать сложные разделы технологии в доступной и даже увлекательной форме. Ранее, будучи отмечен ным наградами креативным директором сайта Idea Integration (www.idea.com), Келли успешно управляла редизайном многих сайтов - от индивидуальных до сайтов корпоративного уровня. В области коммерческого дизайна начиная с кон ца 1980-х (помните, когда инструментом дизайнеров был PageMaker версии 1.0?) Келли работала в качестве креативного директора, дизайнера и продюсера для многих значительных заказчиков, включая Warner Bros. Online, National Ge ographic Online, Adobe Corporation, Paramount Television, Macromedia Corpora tion и Sony Pictures. В настоящее время, возглавляя gotomedia, inc. (www.goto media.com) - онлайновый консультационный центр по проблемам пользователь ской среды и дизайна средств взаимодействия, Келли продолжает развивать но вые методы совместной работы в области цифровых масс-медиа. Когда Келли не привязана к своему ноутбуку, ее можно найти в странах третьего мира, где она не проверяет свою электронную почту.

Эмили Котлер (Emily Co tier) - графический дизайнер, веб-дизайнер, журналист и писатель-романист. Занимаясь дизайном с конца 1980-х (помните ручное вы равнивание и вывод пленок?), она всегда имеет много предложений по работе в печати и в Интернете. Работая главным образом над небольшими сайтами для отдельных творческих личностей и малых предприятий, Эмили специализиру ется на создании (или редизайне) недорогих эффективных сайтов. В числе ее клиентов есть именитые авторы статей в «Нью-Йорк Тайме» Джулия Квинн (Ju lia Quinn) и Сьюзен Андерсен (Susan Andersen), а также много менее известных, но процветающих компаний, включая агентство по заказу билетов Artist Booking International в Лос-Анджелесе, фирму тех нических писателей Pomegranate Consul ting в Денвере и фотоагентство Kira Ste wart Photography в Сиэтле. Постоянный автор публикаций в Publish Magazine с 1998 года, Эмили известна своим легким и ясным стилем, оживляющим сухие темы и приносящим успех страницам журнала.

В настоящее время она совершила боль шой прыжок в своей карьере и перешла в Waxcreative Design (www.waxcreative.com) в Окленде, Калифорния, в качестве креа тивного директора. Ее любимыми способа- Эмили и Келли в усердной работе ми отвлечения от киберпространства явля- над завершением этой книги, ются сноубординг и горы штата Колорадо. май 2001, Окленд, Калифорния Благодарности Мы не одни создавали эту книгу. Если бы к ее написанию имели отношение только Келли и Эмили, это заняло бы по крайней мере вдвое больше времени и не дало бы столь же богатого информационного материала. Мы обязаны мно гим талантливым личностям и должны выразить много благодарностей...

Спасибо нашим семьям (особенно Брайану) и нашим друзьям, которые продол жали любить нас и поддерживать шутками, несмотря на нашу постоянную за нятость и обязательное включение слова «книга» в каждый разговор;

и прости те нас за асоциальное поведение.

Благодарим издательскую группу New Riders - Стива Вейсса (Steve Weiss), Дэви да Дуиера (David Dwyer), Линду Бамп (Linda Bump), Дженнифер Еберхардт (Jen nifer Eberhardt), Криса Нельсона (Chris Nelson), Одри Дойл (Audrey Doyle), Эл лен Бутчарт (Ellen Butchart), Уила Круза (Wil Cruz), Джейка МакФарланда (Ja ke 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), Эунис Мойл (Eu nice 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 He id), доктору Якобу Нильсену (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, и отдели- Netscape выпустила свой первый броузер, лись от нашей материнской компании в и мы внезапно поняли, что наше оформ надежде сформировать совершенно но- ление и интерфейсы могут по-разному вую информационную среду. В одно выглядеть для разных пользователей.

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

сайта HotWired.com представлял собой значительный скачок от того уровня, на Это взгляд в прошлое. Сейчас легко за каком он был прежде. Мы оптимизиро- даваться вопросом: «Что, если бы?» Но вали свой сайт, чтобы сделать его более видя сегодня миллионы сайтов, проходя легким в использовании и быстрее загру- щих через множество этапов редизайна, жаемым. Мы тратили время на анализ я чувствую уверенность, что Сеть может новых технологий и того, что они пред- становиться только лучше. А с такой лагают. Электронные претензии все же книгой - удобной в использовании, лег продолжали прибывать. кой для чтения и с конкретными приме рами типовых проектов, а также с полез В конце концов, мы поняли очевидное ными профессиональными советами веб-сайты могут и должны соответство это случится намного быстрее.

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

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

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

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

лагающей возможность уменьшить те Предисловие Мы не вдруг решили, что редизайн веб-сайтов является сейчас подходящей те мой для книги. Концепции этой книги развивались и были прямым результа том методологии процесса, возникшей благодаря участию Келли в ежегодных конференциях Thunder Lizard (www.thunderlizard.com). С 1997 г. Келли актив но выступает на этих конференциях с докладами о технологии веб-дизайна на всех ее стадиях. Поскольку тенденции рынка сместились от реинжениринга к редизайну веб-сайтов, стала очевидной необходимость осветить моменты, от носящиеся к этой области. И на каждой конференции задавался вопрос: «Когда вы собираетесь написать книгу?» Материалы лекций Келли в PDF-формате всег да широко и свободно распространялись, но ясно, что этого было недостаточно, и в 1999 г. вопрос о книге был задан снова. Вот тогда родилась идея: редизайн веб-сайтов. Но идея оставалась лишь идеей. Она была слишком грандиозна для одного человека.

Дуэт Келли и Эмили возник за кофе с рогаликами. Эмили, посетившая один из докладов Келли на технологической сессии Thunder Lizard, взяла у нее интервью для статьи в Publish Magazine, индустриальном периодическом журнале, для которого она писала несколько лет. Прочитав статью Эмили, Келли поняла, что нашла того, кто может помочь ей превратить идею в книгу.

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

Келли Гото (kelly@gotomedia.com) Эмили Котлер (emily@waxcreative.com) Лето Введение Технология проекта - это запланированная последовательность выполняемых действий.

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

и описываемый здесь процесс, называемый «Базовым процессом»

(Core Process), - это технология, которая действительно работает. Она основана на личном опыте и квалификации авторов книги и была проверена и применена в ре альном мире, в реальных проектах, на опыте которых она оттачивалась.

Технология проекта (workflow of a project) - это запланированная последователь ность выполняемых действий. Это процесс, который шаг за шагом решает намечен ные задачи. Эта книга является путеводителем, показывающим, как сделать это без лишней суеты и лишних затрат. На ее страницах в доступной и пригодной для прак тического использования форме представлен полный, от начала до конца, план ре дизайна веб-проекта. В книге описывается именно процесс;

здесь нет излишних про поведей и наставлений.

Авторы не предлагают эту методологию как непреложный закон, высеченный на камне. Наши читатели - не «чайники» (и эта книга не для «чайников»);

они сами решат, когда стоит прямо следовать предлагаемым советам, а когда что-то в них из менить.

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

Авторы будут рады откликам читателей по поводу рекомендуемых инструментов.

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

Введение У ч и т ы в а я занятость читателей, к н и г а построена так, чтобы ее м о ж н о было читать с любого места или с на- На заметку чала, отложить в любой момент и л и просто просмот- Помимо редизайна эта книга по реть, поискать в ней что-то конкретное и л и читать под- может и в изначальной разработ робно. Отдельными вставками в к н и г у включены со- ке веб-сайта. Предлагаемые ме веты и дополнительная и н ф о р м а ц и я по теме. Некото- тоды и инструменты легко моди р ы е с в е д е н и я м е с т а м и п о в т о р я ю т с я. Это с д е л а н о, фицируются и обеспечивают на потому что многие читают книгу по темам, а не после- дежную технологию и в этом слу довательно, и авторы старались, чтобы ч и т а т е л и не чае. При разработке нового сайта П Р О С Т О игнорируйте информа упустили что-то важное.

цию, относящуюся к редизайну, Б а з о в ы й процесс состоит из п я т и ф а з, подробно об- а фокусируйтесь на Базовом про с у ж д а е м ы х в главах 3 - 7. Кроме того, Б а з о в ы й про- цессе.

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

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

Для кого эта книга?

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

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

Кто вы?

Являетесь ли вы дизайнером, единственным вебмастером фирмы или владельцем ком пании, пытающимся перевести присутствие компании в Сети на новый уровень, - эта 18 Введение книга для вас. Если когда-нибудь вы огорчались из-за того, что веб-проект работал неэффективно («Мой клиент принес мне содержимое сайта с пятинедельным опозда нием, да к тому же дату запуска сайта не сдвинуть»), - эта книга для вас. Если вы приступаете к выполнению своего первого веб-проекта (от уровня «Это тот шанс, ко торый я давно ждал» до «А что же, собственно, нужно делать?»), принимая руко водство веб-сайтом вашей компании или формируя для этого специальный новый от дел, - эта книга для вас.

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

Эта книга поможет многим - от бывалого профи до новичка. Те, кто уже имеют су щественный опыт, вероятно, настроят под себя Базовый процесс на предмет соот ветствия собственному проекту и существующим процессам. Для новичков эта кни га - прекрасное место для старта;

прямо здесь они найдут весь процесс целиком.

К какому типу относится ваша компания?

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

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

Кто является клиентом?

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

Если ваша компания является дизайнерской фирмой или компанией веб-разработ чиком, то клиент будет внешним - это компания, заключившая с вами контракт.

Это довольно обычная работа с клиентом.

Для компаний, имеющих собственных разработчиков, клиент является внутренним.

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

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

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

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

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

В книге предлагается обзор технических соображений, которые должны быть ясны и понятны, чтобы читатели смогли оценить границы собственного проекта. Кроме того, читатели обеспечиваются примерами опросных листов, предложениями и сове тами - все это нацелено на то, чтобы помочь в определении всех технических потреб ностей конкретного веб-сайта и в оценке реалистичности предстоящей реконструк ции с учетом располагаемых средств. Здесь указаны также моменты Базового про 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.

Введение Эта книга - не руководство по юзабилити-тестированию Опять же, в этой книге освещается технология. Безусловно, здесь довольно часто говорится о юзабилити-тестировании. Мы очень-очень сильно уверены в его значи мости. Некоторые подробности обсуждаются в главе 8, но главным образом они ка саются подхода к управлению проектом и технологии. Глубокое философское об суждение этой темы дано в книге Якоба Нильсена (Jakob Neilson) «Designing Web 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 Директор по дизайну (редизайн):

Эллисон Аппен (Allyson Appen) URL: www.babycenter.com Арт-директор (редизайн):

Проектная группа: Внутренняя Шеннон Миллер (Shannon Miller) Директор по дизайну (первоначальный Руководитель проекта (редизайн):

дизайн): Джонатан Таттл (Jonathan Tuttle) Алиса Коэн Рейтер (Alissa Cohen Reiter) Руководитель проекта (первоначальный дизайн): Джон Стросс (John Stross) ПРЕДЫДУЩИЙ BABYCENTER.COM [ПРЕЖНИЙ, ПОЗДНЕЕ И ЕЩЕ ПОЗДНЕЕ] Прошел через несколько этапов, пока раз вился от пилотного проекта в значимый коммерческий веб-сайт. Каждый редизайн основывался на оценке интересов потре бителей. (1997-1999) Учебный пример BabyCenter.com специализируется на информации о беременности, младенчестве и раннем детстве, а так же о товарах для мам и младенцев. Главная задача ком пании состояла в создании в Интернете наиболее пол ного информационного ресурса для будущих и моло дых родителей.

СОВРЕМЕННЫЙ BABYCENTER [ПЕРЕПРОЕКТИРОВАННЫЙ] Ввел членство с известной системой сообщений и ссылками. Перепроектированный сайт стал практич нее в использовании благодаря более простому ди зайну, который сохранил несколько удачных элемен тов прежнего сайта, включая эффективное использо вание персонализации. (2000) Результат: Наличие собственных специалистов обеспечивает быстрое реагирование на интересы пользователей и непрерывное усовершенствование, включающее рост персонализации и представление содержания.

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

В том числе и для редизайна.

Ключи к успешному редизайну Почему именно эта книга и именно сейчас?

Присмотритесь к Сети. Сколько из регулярно посещаемых вами сайтов изменили свой облик за последние год или два? Несколько? Да, мы это тоже заметили.

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

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

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

Почему именно эта книга и именно сейчас? Потому что она необходима.

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

Если что-либо из перечисленного применимо к вам (а это лишь некоторые из мно жества примеров), вы, вероятно, раздумываете, что следует делать дальше. Возмож но, вы не уверены, как и каким образом это сделать. Каков процесс?

Брендинг (от англ. branding) - продвижение торговой марки. - Примеч. науч. ред.

Ключи к успешному редизайну Процесс должен существовать.

Между тем, Сеть никого не ждет, даже вас, и ваши конкуренты могут просто обойти вас на виртуальных милях.

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

Представляем технологию, которая работает Множество факторов может вызвать неудачу или задержку проекта: непредвиден ные технические проблемы, неорганизованность клиента, плохо продуманные цели и сроки, небрежно составленный бюджет. Многие сталкивались с этим - или как ди зайнеры, или как управляющие, или в обоих качествах. «Дизайнеры крайне нуж даются в руководстве по технологии процесса», - сказал Джим Хейд (Jim Heid), пред седатель конференции Thunder Lizard. - На нашей конференции по веб-дизайну Кел ли окружила целая толпа после ее докладов по технологии;

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

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

Эта книга является четким, понятным, промышленным технологическим планом.

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

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

Это вовсе не требует стольких усилий. Решением является эта книга. Эта книга по может.

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

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

непременно необходимо учитывать здесь должны звучать литавры, - ДЕ СЯТЬ ЭФФЕКТИВНЫХ СОВЕТОВ ДЛЯ УСПЕШНОГО РВДИЗАЙНА.

Десять советов, представленные в этой главе, охватывают многие аспекты: пла нирование, промышленное позициони СОВЕТ 6 СОВЕТ рование, аудиторию, юзабилити, тех нологию, контент2, масштабируемость и другие. Все это будет обсуждаться Своевременно консультируйтесь Не пренебрегайте юзабилити здесь и на последующих страницах. с техническими специалистами тестированием Этот перечень ни в коем случае нельзя считать исчерпывающим;

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

терфейса). Это поможет сэкономить лите проблемы в этой области и пос Редизайн - это событие. Ориентируй время и избежать головных болей в тарайтесь справиться с ними при ре тесь на потребность. И держите все разгаре работ. Технические специ- дизайне. Ничто не дает более ясной под контролем, пока делаете это.

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

Контент (от англ. content) - (зд.) содержимое, наполнение сайта, информация на сайте. - Примеч. науч. ред.

Ключи к успешному редизайну СОВЕТ 3 СОВЕТ 4 СОВЕТ Разрабатывайте Привлекайте вашу текущую Анализируйте свою для пользователей, аудиторию конкуренцию а не для инвесторов Объективно рассмотрите свою от- Привлекайте к процессу редизайна ба расль. Посмотрите на сайты конкурен- Если веб-сайт неудобен для использо зу своих текущих пользователей. Не тов, как они работают. Сравните их вания, ваше присутствие в Сети рис отпугивайте их внезапными изменени кует потерпеть неудачу. Очень часто возможности и услуги. Оцените, что ями;

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

или инвесторов. Не ошибитесь, беря венный. Выясните, чем ваш сайт от в расчет не ту аудиторию. Знайте сво личается от конкурирующих.

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

СОВЕТ 8 СОВЕТ 9 СОВЕТ Продумайте все в целом;

Четко представляйте желаемые Осознайте значимость сосредоточьтесь на этапах результаты своевременной поставки контента Взаимодействие играет ключевую Не пытайтесь сделать все сразу;

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


над одной и той же страницей, пользу и своевременно передавать ее. Не ется одной и той же терминологией.

умаляйте значимости планирования в работе с контентом сайта.

Глава Лей Дункан (Leigh Duncan) об определении проблем и стратегии редизайна Когда компании не могут ясно выразить, Во время редизайна можно и разориться.

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

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

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

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

больше уверенности в успехе проекта.

• Обзор бизнес-плана • Оценка текущего состояния Лей Дункан, ветеран этой отрасли с 10 летним стажем (с недавнего времени • Видение будущего состояния заведует е-коммерцией в KPMG Consul • Проверка и тестирование аудиторией ting) и глубокими знаниями е-коммер • Планирование контента и сервисов ции на разных платформах, консульти • Креативный бриф3/стратегия дизайна ровала по стратегии е-бизнеса и марке тинга, дизайну и управлению контен • Технический подход к реализации том клиентов мирового уровня, • Маркетинг и бизнес-планирование включая Target Corporation, Proctor & Gamble, Chevron, 1-800-FLOWERS и Ame Эти задачи хоть и не являются исчерпы rica Online.

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

32 Учебный пример Smug Клиент: Smug URL: www.smug.com Проектная группа: fearless.net, Нью-Йорк Издатель: Лесли Гарполд (Leslie Harpold) Бюджет: Ноль долларов и два одобрения ПРЕДЫДУЩИЙ SMUG.COM [ПРЕЖНИЙ] использовал иконки для вы деления различных категорий рассказов и произведе ний. Ряд простых ссылок адресовал к заархивирован SMUG.COM [ПРЕЖНИЙ] ОБЪЯВЛЕНИЕ О НО ным в хронологическом порядке материалам.

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

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

СОВРЕМЕННЫЙ SMUG.COM [ПЕРЕПРОЕКТИРОВАННЫЙ] отказал ся от графики в пользу упрощения благодаря недавно созданному инструменту для управления контентом.

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

Результат: Хорошо отлаженное обновление. См. цветную вклейку, стр. 340- 2 Зак. Один процесс, подходящий для всех Базовый процесс: всесторонний план для групп любых типов и компаний всех видов с различными бюджетами.

36 Глава Видеть - значит осмысливать.

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

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

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

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

Базовым процессом могут воспользоваться группы любых типов и компании всех видов с различными бюджетами. Flash или HTML, сложные функцио нальные возможности или ничего, кроме динамической смены графики на Ja vaScript (rollovers), редизайн сайта или создание абсолютно нового веб-предста вительства... у всех сайтов есть общие требования к построению. Все веб-проек ты должны быть тщательно распланированы и охарактеризованы. Для каждо го требуется организация контента и планирование структуры. Всем необходим эстетический дизайн. Все проекты требуется реализовать. Все нуждаются в за пуске. Все сайты. Все до единого.

Базовой процесс предусматривает все необходимые шаги. В книге описано, что должно быть сделано (обязательно), что также можно сделать (дополнительно) и чего следует остерегаться. Кроме того, авторы настоятельно рекомендуют два дополнительных процесса - юзабилити-тестирование сайта (см. главу 8 «Юза билити-тестирование») и анализ конкуренции (см. главу 9 «Анализ конкурен ции»). Если позволяют время и деньги, то при адаптации Базового процесса стоит включить и эти шаги.

Далее в этой главе представлена версия Базового процесса в виде обзора на ма нер Cliff Notes. 1 Однако не забывайте наставления школьных учителей: «Не полагайтесь только на один обзор!» Здесь не приводятся никакие подробности, никакие объяснения, почему и как. Эти сведения даются далее в соответству ющих главах. Там обсуждаются инструменты и схемы, а также другая полез Cliff Notes - популярный на западе вид методического материала для студентов, конспективно излагающего какую-либо книгу в виде ее краткого обзора. Такие брошюры имеют яркую черно-желтую расцветку и выполнены в едином формате. Примеч. науч. ред.

Глава ная информация. В то время как последующие гла вы детализированы, данная глава - лишь краткий обзор. Она только знакомит с Базовым процессом.

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

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


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

Фаза 1 - самая большая фаза Базового процесса.

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

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

ВЫЯСНЕНИЕ Распространение/сбор/анализ опросов Сбор имеющихся у клиента материалов Изучение аудитории Выяснение технических возможностей аудитории Выяснение потребностей внутреннего программирования Распространение/сбор/анализ опросов Собирайте информацию. Опросный лист клиента (Client Survey) и эксплуата ционный опросный лист (Maintenance Survey) должны быть вручены клиенту в начале работ по проекту. Это четкие и всесторонние анкетные опросы, которые помогут клиенту сформулировать ожидаемые результаты. Собранные данные позволят понять аудиторию и задачи сайта. Оба опроса полностью приведены в этой книге, а также могут быть загружены с www.web-redesign.com.

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

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

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

Возможности аудитории определяют такие данные, как платформа, быстро действие связи, типы языков программирования, плагины. Расширенный оп рос, или ведомость клиентских технических требований (Client Spec Sheet), сле дует вручить клиенту вскоре после начала работы над проектом. Ведомость кли ентских технических требований — производственный элемент. Часть ее вклю 42 Глава чена в обсуждение фазы 4, а полностью ее можно Будьте готовы к разбуха загрузить с ivww.web~redesign.com.

нию проекта Вникните в концепцию разбуха Выяснение потребностей ния проекта (Scope Creep) и по внутреннего программирования думайте, как это на нем отразит ся. Медленное, неизбежное раз- Это необязательный шаг — только для тех, кому бухание проекта - от того, каким это необходимо. Являясь достаточно простым ин он был определен вначале, до че- струментом, расширенный технический опросный го-то заметно большего - случа лист (Expanded Tech Check) предлагает клиенту не ется почти с каждым проектом.

сколько вопросов. Если на любой из них дан поло Мелочи добавляются и добавля жительный ответ, то проект нуждается во внутрен ются. Берегитесь на вид незна нем программировании и должна применяться до чительных просьб клиента о мел полнительная технология. Определение термина ких добавках к проекту. Разбуха «внутренний» в контексте этой книги дано во «Вве ние проекта неуловимо;

не успе дении». Расширенный технический опросный ете осознать, как это произойдет.

лист можно загрузить с www.web~redesign.com.

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

удачно, а что неудачно реализовано в обслужива нии. Подробное описание расширенного процесса см. в главе 9.

Уточнение:

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

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

Один процесс, подходящий для всех УТОЧНЕНИЕ: ОПРЕДЕЛЕНИЕ ОКОНЧАТЕЛЬНЫХ ЦЕЛЕЙ Подготовка креативного брифа Подготовка креативного брифа Креативный бриф проекта - сводка всех оформительских и концептуальных за дач. Этот документ еще раз определяет целевую аудиторию, цели пользовате лей на сайте и стратегию взаимодействия с ними. Он также обрисовывает пред лагаемый стиль и общий облик сайта после редизайна. Креативный бриф ут верждается клиентом, а проектная группа руководствуется им в своей работе.

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

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

ПЛАНИРОВАНИЕ Составление бюджета Установка средств отслеживания времени работы Составление графиков работ Формирование проектной группы Организация демонстрационной площадки Планирование юзер-тестинга Компоновка плана проекта Начало работ по проекту Составление бюджета Из всех административных задач самой первой, естественно, является состав ление бюджета, так как он определяет объем, допустимые границы затрат и осу ществимость проекта. Хотя бюджет обычно зависит от того, чем располагает клиент, фактические расходы основаны на времени работы над проектом. Со ставьте реальное представление о ресурсах, распределении времени и опреде лите готовые, подлежащие сдаче компоненты проекта. Воспользуйтесь счетчи ком бюджета (budget tracker) - инструментом, который поможет контролиро 44 Глава вать и отслеживать бюджетные траты. Этот инст Отслеживайте затраченное румент можно найти в описании фазы 1 или загру время зить с www.web-redesign.com.

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

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

фазы 1.

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

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

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

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

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

ставления может быть различной, как и общее количество страниц;

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

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

Фаза 2:

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

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

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

Не соблазняйтесь идеей использования старого человека, который будет контро контента только потому, что это доступнее и про- лировать весь процесс поставки ще. Проанализируйте все имеющиеся материалы: контента. Второй способ заклю чается в СОЗДАНИИ ПЛАНА П0 тексты, рисунки, схемы, мультимедийные компо СТАВКИ КОНТЕНТА. Это специ ненты и так далее. Это прекрасная и необходимая альный график, в котором наме возможность выяснить, чем из прежнего контен чены реальные сроки поставки та можно воспользоваться в новом проекте, а что материалов по мере их готовнос должно быть исключено. ти. Более подробно о контенте сайта см. в описании фазы 2, Структурирование контента Для дальнейшей организации контента исполь зуйте простую, всем знакомую иерархическую структуру с нумерацией разделов римскими циф рами. Определите разделы контента, включая и новые материалы. Можно надеяться, что эту структуру определит клиент, хотя, вероятно, при дется дискутировать по ее поводу. Необязательно иметь всю информацию абсолютно готовой - на писанной, выверенной, полученной, но проектная группа должна быть осведомлена обо всех посту пающих материалах.

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

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

С ТОЧКИ ЗРЕНИЯ САЙТА I Создание карты сайта I Пересмотр текущей организации сайта I Установка соглашений об именовании Создание карты сайта Карта сайта отражает предполагаемые ссылки и основную навигацию по сайту.

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

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

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

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

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

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

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



Pages:   || 2 | 3 | 4 | 5 |   ...   | 8 |
 





 
© 2013 www.libed.ru - «Бесплатная библиотека научно-практических конференций»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.