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

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

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


Pages:     | 1 |   ...   | 2 | 3 || 5 | 6 |   ...   | 8 |

«Келли Гото и Эмили Котлер Веб-редизайн: книга Келли Гото и Эмили Котлер Перевод Г. Нифонтовой Главный редактор ...»

-- [ Страница 4 ] --

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

Оно также должно быть умело организовано.

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

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

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

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

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

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

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

Глава Рис. 4.1. Образец документа Microsoft Word, иллюстрирующего методику аудита Фаза 2: Разработка структуры сайта Убедите клиента проанализировать содержимое текущего сайта во избежание его повторного использования, хотя это и не просто. Аудит контента может по казаться таким неподъемным делом, что клиент будет готов оставить все как есть, лишь бы работы по проекту продолжались. В таком случае можно рабо тать с новыми компонентами контента, а старые добавлять по мере готовности.

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

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

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

• В ходе аудита контента естественным образом происходит его организация.

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

• Ревизия контента - прекрасная возможность подготовить его для поставки по соглашению в проекте. Если какой-то раздел содержимого будет сохранен в новом сайте и не нуждается ни в каком редактировании, можно переместить его файл в каталог для материалов, готовых для поставки. (Аудит контента во время подготовки поставляемых материалов? Кто же откажется от возмож ности убить двух зайцев сразу.) В общем случае просмотр содержимого — задача клиента. Вероятно, ему потре буется помощь в этом, но только клиент может верно проанализировать теку щий контент и решить, что следует изменить или добавить. Однако если реди зайном сайта занимается внутренняя группа, то это ее задача. Не забудьте от разить это в бюджете.

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

информацию)? Если так, то необ Вполне возможно, что клиент уже подготовил спи ходимо предусмотреть политику сок с тематиками контента. Это просто удача. Про конфиденциальности. TRUSTe анализируйте этот список, поправьте, где нужно, {wwwAruste.org) обеспечивает и обсудите, как его лучше детализировать. Если инструментальные средства, ко же клиент и не приступал к этой работе, сделайте торые позволяют ввести полити ку конфиденциальности и озна- ему несколько предложений на выбор (например, комить с ней посетителей, пред- попросите составить план содержимого или специ лагая им обоснованную возмож- ально для этого нанять отдельного копирайтера), а ность доверять свою персональ- затем установите крайний срок. Безо всяких идей ную информацию. Текст полити по поводу контента невозможно далеко продви ки конфиденциальности - э т о нуться с проектом.

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

дневно, невозможно точно запла нировать, что произойдет за два Создание плана поставки контента или три года. Никто не ждет от вас предвидения будущего, но Готовы ли содержимое и структура для продолже при группировании и каталогиза ния работы? Скорее всего, нет. Задержка контен ции контента и обдумывании спо та - самая главная причина отставаний в проек собов навигации оставьте воз можность для логических измене- тах. (Близко следом идут технические трудности, ний. Если вы предвидите добав- ибо даже выпадающие меню DHTML иногда начи ление разделов контента в нают работать на разных броузерах после третьего дальнейшем, продумайте сейчас, или четвертого пересмотра.) Примерно в 99% слу где они будут размещаться.

чаев контент запаздывает. Примите это. Готовь тесь к этому. Расплачивайтесь за это.

Фаза 2: Разработка структуры сайта Нет всеохватывающего решения проблемы за Сроки выполнения держки контента, но можно предложить пару спо Установите для клиента незыб собов ускорить его поставку:

лемые сроки окончательной по • Нанять контент-менеджера. Убедите клиента ставки контента (безотлагатель нанять копирайтера или поручить кому-то из ность помогает). Старайтесь, сотрудников (например, из маркетинговой груп- чтобы это было до начала фак пы клиента) контролировать, собирать, писать тического производства сайта (Фаза 4: Производство и конт и поставлять контент.

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

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

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

План поставки контента следует составить после выбора иерархической структуры контента, но во время этапа создания карты сайта (обсуждаемого далее в этой главе) или даже позже. Последова тельность поставки контента может соответство вать иерархии сайта или - что более дружествен но по отношению к клиенту - может быть перечис лена в порядке готовности содержимого. План по Глава Обновлено 4.08. Рис. 4.2. Образец плана поставки контента. Контент - это не только текст;

в него входят маркетинговые материалы, логотипы, диаграммы, а также специфические дан ные, например МЕТА-информация, данные обработки TITLE-тегов, сообщения об ошиб ках и др. При необходимости поставки клиентом фотографий, иллюстраций или схем определите четкие сроки поставки для каждого компонента Когда текстовые материалы готовы для Сети?

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

тента. Есть два критерия, позволяющие считать по- Вторым критерием оценки готовности текстовых ма лученные текстовые материалы готовыми к опубли- териалов является их тональность. Веб-контент, как кованию в Сети. Во-первых, фактическая поставка правило, менее формален и более дружественен, чем материалов. Материалы, передаваемые клиентом обычные корпоративные брошюры и документы. На проектной группе, должны поставляться в электрон- помните об этом клиенту, чтобы он не просто копиро ном виде в текстовом формате с понятными назва- вал подходящие материалы, а редактировал их. Гото ниями файлов (соответствующими соглашению об вая к опубликованию в Сети подборка материалов именовании). Файлы могут быть в формате.rtf или должна быть короткой и требовать как можно меньше.html. Иногда материалы могут быть посланы в теле прокрутки, кроме того, она должна содержать ссыл сообщения электронной почты, но это не рекомен- ки, которые будут вести к другим частям сайта. Одна дуется, так как некоторые почтовые программы унич- ко некоторые клиенты при этом включают слишком тожают форматирование. Эти материалы должны много ссылок. Это тоже плохо - связей должно быть быть окончательными. Следует четко объяснить кли- лишь несколько и они должны быть уместными;

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

Фаза 2: Разработка структуры сайта ставки контента должен включать первичное со Опасность разбухания держимое (материалы для основных страниц, гра проекта фику), вторичное содержимое (сообщения об Иногда клиенты, понимая, что не ошибках, формы и ключевые слова, если они не могут обеспечить часть контен обходимы) и технический контент (МЕТА-теги, та вовремя, решают просто уб ALT-теги, TITLE-теги и так далее). Перечислите рать эти разделы, считая, что так все максимально подробно, чтобы было понятно, они еще и сэкономят деньги. Ча что должно поставляться, когда и кто ответствен- ще всего это не так, особенно ес ный. Излагайте все четко и ясно. ли эти разделы являются частью основной навигационной схемы.

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

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

Создание карты сайта С ТОЧКИ ЗРЕНИЯ САЙТА Мы были удивлены, узнав, как редко составление Создание карты сайта карты сайта фактически входит в процесс веб-раз- Пересмотр текущей орга работки. На всех конференциях из года в год ауди- низации сайта торию спрашивают, создают ли они для своих про- Установка соглашений ектов карту сайта. Из 800 участников лишь 20 или об именовании 30 поднимают руку. А при вопросе, кто использу ет программу для создания карты сайта, пример но половина этих рук опускается. Третий вопрос:

«Кому из вас нравится используемая програм ма?» — заставляет всех опустить руки.

142 Глава Это существенная деталь. К чему карта сайта? Почему она так важна? Карта сайта - хребет проекта (рис. 4.3, 4.4 и 4.5). Карта сайта отражает визуальное представление структуры сайта, организацию, положение и группировку кон тента и информации. Она связывает, она определяет и она структурирует. Она отображает весь проект: от общей перспективы до мельчайших деталей.

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

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

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

Карта сайта - компонент, подлежащий сдаче. Создав ее, необходимо получить одобрение и подпись клиента. При любом изменении карты сайта следует снова получить одобрение и подпись. Следите, чтобы карта была всегда доступной и обновленной в соответствии с изменениями структуры сайта независимо от то го, насколько трудоемка эта задача. (Подсказка: заложите время на модифика цию карты сайта в бюджет информационного дизайна.) Своевременное обнов Рис. 4.3. Пример карты сайта, построенной в формате сверху вниз Фаза 2: Разработка структуры сайта Рис, 4,4, Пример карты сайта, построенной в формате слева направо с разделением на категории. На карте приведены также условные обозначения для различных ти пов контента Puc. 4.5. Предоставленный кли ентом набросок, который послу жил основой карты сайта, пока занной на рис. 4.4. Он был полу чен по факсу с минимальными пояснениями Глава ление карты сайта важно для ее достоверности, Делайте карту простой поскольку она будет использоваться как справочный документ. Дизайнеры производства HTML и раз Карта сайта должна как можно подробнее показывать взаимо- работчики контента используют карту сайта для связи между страницами. Де- оценки прогресса в своей работе. Одно это - уже лайте ее понятной;

включайте достаточная причина.

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

ли стоит отображать каждую из Здесь может помочь создание карты старого сайта.

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

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

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

ся магазин или произойдет слияние компаний.

Поддержит ли текущая организация информации эти изменения? Если нет (и скорее всего нет), то что следует изменить?

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

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

Фаза 2: Разработка структуры сайта Определение структуры сайта Обычно сайты проектируют и структурируют в иерархическом стиле (рис. 4.7).

Если предусматривается динамическое содержимое (обычно для крупных, слож ных сайтов), добавьте разделы или «контейнеры для контента» и также укажи те их на схеме сайта (рис. 4.8). Начальную страницу поместите вверху, затем основные страницы, а за ними - вторичные. Очень просто.

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

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

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

Например, если речь идет о входе в систему, на схе ме следует только указать точку, где происходит ре гистрация пользователей. Здесь не требуется рас крывать подробности внутренней проверки, связан ные с этой операцией (рис. 4.9). Детализация не с технической, а с функциональной точки зрения (то есть сценарии отказов на вход в систему) зависит от опыта информационного дизайнера и его взаимо действия с технической группой. Рис. 4.9. Фрагмент карты сайта, пока Обсудите карту сайта с техническими специалиста- зывающий страницу, на которой пользо ми. Их одобрение будет свидетельствовать о пра- ватель может видеть точку взаимо вильном понимании вами структуры сайта под углом действия с внутренним интерфейсом (в зрения пользователей. данном случае точку входа в систему) Установка соглашений об именовании Установка стандартов для именования файлов на фазе структурирования по может организовать основные разделы сайта, а это в свою очередь облегчит ра боту всех членов проектной группы и клиента на весь период Базового процес са. Принятие соглашений об именовании — простой, но очень важный шаг при создании карты сайта. «Простой» - значит прямой и понятный. Он не требует никаких официальных вердиктов. Для него не существует никаких «пра вильных способов»;

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

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

Фаза 2: Разработка структуры сайта Программы для создания карты сайта Удивительно (и обидно), что существует очень небо- довать две хорошие программы для создания карты гатый выбор программ - и еще меньший выбор хо- сайта: Inspiration (www.inspiration.com) (рис. 4.10) и роших программ - для создания карты сайта. Соз- Vislo (www.microsoft.com/office/visio). Многие все еще дание или переработка карты сайта - не большая используют векторные программы, подобные Fre хитрость;

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

Рис. 4,10. Пример создания карты сайта с использо ванием програм мы Inspiration.

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

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

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

Глава Организационные наименования Советы относительно HTML-наименований В организационном способе присвоения имен страницам и разделам карты сайта - просто ис Во-первых, не забывайте, что Сеть больше не ограничена пра- пользуют числовые или алфавитно-цифровые вилом «восемь-точка-три». Если стандарты. Дайте начальной странице номер 0. это правило вам не знакомо2, не (это базовая страница). Первичные разделы под на переживайте. Во-вторых, помни чальной страницей обозначьте как 1.0, 2.0, 3.0 и те, что и.html и.htm работают;

так далее. Подразделы в каждом первичном раз это одно и то же. Выберите лю деле обозначьте как 1.1, 1.2, 1.3 и так далее. См.

бое из этих расширений и при схему ниже.

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

страниц может быть изменена со временем.

Конкретное изделие? Исполь зуйте название изделия. Все должно быть логично и ясно. По иск файла не должен требовать привлечения ищеек.

Имеются в виду короткие име на файлов в MS DOS, состоя щие из восьми символов име ни и трех символов расшире ния, - Примеч. науч. ред.

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

aboutthecompany.html about_company.html co_info.html Любое из них приемлемо ~ просто нужна последо вательность и согласованность.

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

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

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

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

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

Содержимое макета Макеты отражают только информацию;

они не включают визуальный дизайн.

Макет может быть простым (рис. 4.11 и 4.12), показывая только компоновку содержимого и навигацию по нескольким основным страницам сайта. Сложные макеты показывают тексты, некоторые функциональные возможности, ссыл ки, навигацию и графическое содержимое в более детальной форме (рис. 4.13).

Макеты отражают больше, чем просто свое содержимое. Они могут показывать также производственные спецификации и основные функциональные возмож ности (DHTML, JavaScript и так далее).

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

Для облегчения задачи создания макетов воспользуйтесь следующим контроль ным списком:

• Изображения/чертежи/иллюстрации • Контент (общее направление содержимого или фактический текст, если он го тов) • Заголовок или глобальная навигация (навигационная панель или общие эле менты, которые появляются на каждой странице) • Функциональные возможности (описание основных функциональных воз можностей страницы) • Первичные ссылки (предполагаемая навигация) • Вторичные ссылки • Мультимедиа (если есть) • Целевой размер окна (например, 800x600;

фактически очертите область и ука жите размеры в пикселах) Фаза 2: Разработка структуры сайта Рис. 4.11. На этом простом макете представлен типич ный формат основного содер жимого и навигации. Прибли зительно размеченные облас ти дают общее представле ние о типе и размещении содержимого Рис. 4.12. Этот простой ма кет - фактически шаблон, содержащий особые метки для целевого размера экрана, а также указатели для лого типа, содержимого, навига ции и некоторых основных функциональных возможнос тей над и под сгибом Глава • Данные для заголовка и подвала (название проекта, название страницы, но мер версии, дата, автор, авторское право) Начните с начала: с начальной страницы. Кроме того, решите, сколько еще ма кетов страниц позволит сделать бюджет и ресурсы группы. Набор макетов мо жет состоять из 5, 50 или 200 страниц, в зависимости от бюджета и способнос тей создателя макетов, а также требований проекта. Рекомендуется сделать ма кет, по крайней мере, начальной страницы и всех основных страниц. Если име ются важные вторичные страницы, особенно если они построены по схеме, которая повторяется во многих страницах, рекомендуется создать и их макет.

Добавьте к каждой странице детали, выявляя особые функциональные потреб ности (например, выпадающее меню или динамически генерируемую навига цию (rollover navigation)) и определяя ссылки, графику и другую информацию.

Если имеется окончательный текст, обязательно используйте его;

но обычно в макетах вместо текста используется заполнитель, которым служат закрашен ные серым прямоугольники, простые строки или грикинг (бессмысленный текст, в качестве которого почему-то3 почти всегда берут латинский текст Lo rem Ipsum). Независимо от типа заполнитель должен правильно показывать раз мер реального текста на странице.

Puc. 4.13. Информация пред ставлена очень специфичес ки. Включены названия, мар кировка, заполнители содер жимого и тексты. Обычно так делают, когда содержи мое и навигация уже хорошо отработаны В качестве заполнителя западными дизайнерами используется кусок латинского текста из философского трактата Цицерона «О пределах добра и зла», написанного в 45 г. до н. э. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником в XVI веке. Он начинается со слов: «Lorem ipsum dolor sit amet, consectetuer adipiscing elit...». - Примеч. науч. ред.

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

На то место, откуда они начали Есть много различных подходов к навигации;

все выполнять задачу? Возвращает они служат тому, чтобы направить пользователей ли пользователя кнопка «Назад»

к желательному действию или через него. Суще- (Back) к предыдущему экрану?

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

Именование и маркировка Четкая система именований не только ясно опре деляет контент сайта, она также определяет атмос феру вокруг компании. Маркировка категорий в навигации по сайту свидетельствует о том, каким образом сайт собирается общаться с аудиторией.

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

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

Глава Навигационные модели Puc. 4.14. Направленная навигация вынуждает сделать выбор сразу на входе. Эта на вигационная модель обычно используется, чтобы разделить аудиторию по соот ветствующим ее интересам разделам содержимого сайта. В случае www.bananarepub lic.com это разделы для мужчин, для женщин, обувь и подарки Puc, 4.15. Поисковая навигация используется, прежде всего, на поисковых или инфор мационных сайтах, в которых лучшим способом перемещения к желаемому контен ту являются ключевые слова. Здесь показан сайт www.google.com Фаза 2: Разработка структуры сайта Навигационные модели Рм-с. 4.16. Навигация с вкладками предлагает пользователю информацию, а не застав ляет искать ее. Напоминающая бумажные папки с разделителями, знакомые каждо му, эта навигационная модель позволяет легко разобраться в строго классифициро ванной информации, как показано здесь на примере сайта www.cooking.com Рис. 4.17. Последовательная навигация ведет пользователя по однозначному, предопре деленному пути. В основной навигации эта модель встречается редко, но ее можно уви деть в местах с последовательностью папок или при просмотре слайдов с помощью кно пок Следующий/ Предыдущий (Next /Previous) или Вперед/Назад (Forward /Back). Здесь показан сайт с фотографиями Адама Мура (Adam Moore) (www.adammoore.com) Глава Рис. 4.18. Взгляните на сай ты www.etrade.com и www.my discountbroker.com. Первый встречает менее вольными, деловитыми входом в систе му («login» ) и перечнем услуг («Customer Services»), в то время как My Discount Broker дружелюбно приглашает в банк («ту bank»), предлага ет поиск в базе данных («My DB» ) и так далее. (Упомяну тые особенности на рисунке обведены) Фаза 2: Разработка структуры сайта Определение основных Выбирайте пути наимень маршрутов пользователей шего сопротивления Желая, чтобы пользователи вы Создание интерактивных макетов - хороший спо- полняли определенную задачу, соб проверить взаимодействие страниц между со- например регистрацию или со бой. Можно сделать страницы информационно на- вершение покупок, не вынуждай сыщенными, но если каждая страница не будет ло- те их проходить через дюжину и гически перетекать в следующую, то сайт не будет более страниц. Излишнее коли чество заполняемых форм и по легким в использовании. Завершив формирование лей, пусть важных для маркетин облика сайта (созданием карты сайта), компонов гового отдела (например, воз ку страниц (созданием их макетов) и определив раст, доход и семейное положе размещение содержимого, можно перейти к сле ние), вызывает у пользователей дующему шагу и продумать маршруты пользова- раздражение и может заставить телей на сайте. Назовите это «бумажными прото- их отказаться от задуманного. Ин типами» или «интерактивными макетами» - это терактивное моделирование при одно и то же: проверка основных перемещений определении пользовательских («щелчков мышью») по сайту на бумаге вместо маршрутов - прекрасный способ HTML. анализа и выбора решения. Нет ли возможности объединить не которые шаги, чтобы регистрация требовала только три или четыре Более подробное описание «HTML для прощелкивания» (HTML экрана? Это было бы менее уто click-thru) (или протосайта, как он назван в книге) см. в описании мительно и повысило бы коли фазы 3: Визуальное оформление и тестирование. Но что касает чество пользователей, заверша ся маршрутов пользователей, обеспечьте их на стадии создания ющих эту задачу.

макетов.

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

проверки. Инструментальные средства для моделирования на бумаге можно бесплатно загрузить на www.infode Бумажные прототипы должны как можно ближе ими sign. com.au/usability/paperprototypinggraphics. html.

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

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

Существует ряд типовых задач:

• Заказ доставки цветов ко Дню Матери.

• Заполнение и подача онлайновой заявки на получение ссуды.

• Поиск и заказ запасных батареек для сотового телефона.

• Покупка домика для птичек, кошечек или собачек.

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

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

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

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

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

Жизнь слишком коротка, бюджеты очень ограничены.

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

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

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

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

Пэйдж Мак-Кормик (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. Puc. 4. Глава Рис. 4.20в Рис. 4.20г Фаза 2: Разработка структуры сайта Рис. 4. Puc. 4.20e Глава Puc. 4.20Ж Рис. 4.20з Резюме фазы Структурирование сайта для перепроектирования - тот этап Базового процес са, на котором выясняются проблемы (такие как несоответствие старой струк туры новому контенту) и определяются способы их решения (как будет проис ходить разбиение информации по разделам). Фаза 2 отвечает на конкретные во Фаза 2: Разработка структуры сайта просы: как будет организована вся структура? (Ответом служит карта сайта.) Что войдет в каждую страницу? (Ответ - макеты страниц.) Как страницы вза имосвязаны друг с другом? (Ответ - интерактивные модели.) Информационный дизайн - критическая стадия любого веб-проекта. Многие совершают типич ную ошибку, пытаясь при редизайне сайта просто приспособить информацию, дизайн и контент старого сайта и, по существу, пропустить этот шаг. Хотелось бы надеяться, что эта глава изменит такое отношение.

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

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

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

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

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

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

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

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

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

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

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

гадать), действительность пока накладывает до вольно жесткие рамки, которые должны учиты Мае или PC?

ваться на всех стадиях веб-разработки - особенно, или даже преимущественно, на этапе создания ви- Для девяноста процентов веб зуального дизайна. сайтов дизайн разрабатывается на компьютерах Macintosh, но В этой фазе процесс разбивается на два парал девяносто процентов пользова лельных направления: пока визуальные дизайне- телей просматривают сайты с по ры создают креативный образ сайта и прорабаты- мощью PC. Рабочие станции на вают идеи его интерфейса, дизайнеры производ- базе PC позволят дизайнерам ства должны проверить функциональные возмож- просматривать разрабатывае ности, которые потребуются для их реализации. мый сайт с позиции основной Означает ли это, что сам визуальный дизайн обхо- массы пользователей. Установи те на мониторах PC наиболее рас дится без тестирования? Конечно, нет: предполо пространенное у пользователей жения должны проверяться на каждой стадии, разрешение (да, это вызовет не чтобы можно было уверенно двигаться дальше и довольство дизайнеров) и контро не столкнуться с тем, что обнаружатся серьезные лируйте, чтобы дизайнеры дей проблемы уже после окончательного одобрения ствительно просматривали свою клиентом. А как быть с контентом и навигацией? работу на этом разрешении.

На бумажных макетах все выглядит работающим, а как будет в среде HTML? Для этого рекоменду ется сформировать протосайт, называемый также «HTML для прощелкивания» (HTML click-thru).

172 Глава Визуальный дизайн и разработка протосайта - отдельные процессы;

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

Хорошо ли оно читается? Нет ли пропусков?

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


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

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

Начало творческого процесса СОЗДАНИЕ Начало творческого К а ж д ы й клиент терпеливо и л и с нетерпением ждет процесса первого п р е д с т а в л е н и я п е р е п р о е к т и р о в а н н о г о Разработка разумного сайта. Но прежде чем это произойдет, проектная дизайна I группа должна провести серьезный мозговой Анализ целей сайта штурм для выработки решений на творческом и I Разработка концепций техническом уровнях (а иногда самым крупным Проектирование для творческим достижением становится техническая пользователя н о в и н к а ). Т в о р ч е с к и е з а м ы с л ы необходимо не Представление дизайна только произвести в большом количестве, их тре и получение одобрения буется проанализировать, обдумать, взвесить. Не 1 1 надейтесь, что редизайн визульного оформления возможно сделать в один прием, и не позволяйте клиенту рассчитывать на это.

Разработка разумного дизайна Визуальный веб-дизайн - это нечто большее, чем только привлекательный интерфейс;

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

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

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

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

Разумный дизайн подвижен. Он работает.

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

Каким задумывался стиль оформления? Серьезным, корпоративным и четким?

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

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

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

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

Существует два различных подхода к тому, как начинать отрисовывать дизайн.

Приверженцы традиционного подхода любят начинать с набросков карандашом или красками на бумаге, а остальные делают пробные серии эскизов сразу на Рис. 5.1. Цветовая палитра, предложенная на ранней ста дии редизайна сайта New Ri ders. В ходе дальнейших работ эта палитра совершенствова лась. Было представлено не сколько ее вариантов. В дан ном случае была выбрана изме ненная версия (см. цветную вклейку у стр. 337) Фаза 3: Визуальное оформление и тестирование компьютере (рис. 5.2 и 5.3). В обоих случаях этот этап является началом разра ботки общей концепции оформления, и, независимо от методики, на этой ста дии Базового процесса визуальные дизайнеры приступают к подбору цветов и размещению объектов. Они начинают опробовать различные варианты. Визу альные дизайнеры должны продумать все идеи, сведя их к двум-трем основным направлениям, и далее развивать их детально.

Рис. 5.2. Предварительные эскизы на бумаге позволяют использовать их в мозговых штурмах в поисках решений. Благодаря этим начальным наброскам дизайнеры быстрее справятся с размещением объектов и созданием направляющих Рис. 5.3. Предварительные варианты оформления, соз данные в программах Free hand, Illustrator или Photo shop (см. цветную вклейку, стр. 337) Глава На начальных мозговых штурмах не забудьте Гамма гамм учесть время загрузки, функциональность и нали Оттенки цветов, даже являющих- чие у пользователей различных броузеров. Рабо ся веб-безопасными, выглядят тайте в тесном контакте с дизайнерами производ слегка по-разному на компьюте- ства HTML, которые помогут в оценке возможнос рах Мае и PC. Одним нравится ти преобразования оформительских идей в рабо яркость Мае, другие - привер тающие веб-страницы для целевой аудитории. Не женцы более естественных и всякое замечательное оформительское решение приглушенных тонов PC. Споры можно эффективно (или вообще) осуществить в никогда не утихнут. Просто пом HTML. Дизайнеры производства очень помогут, ните, что результат будет немно например в выборе шрифтов. Дело в том, что PC го другим, даже если настроить отображает шрифты HTML на 2-3 пункта крупнее, гамму Мае для PC. Перед пока чем Macintosh, a Internet Explorer отображает их зом клиенту загрузите выбран ную палитру на свой сервер и крупнее, чем Netscape. Это реальность. В связи с просмотрите ее на обеих плат- этим для HTML рекомендуется оптимальный раз формах. Возможно, захочется мер шрифта 2. Любой более крупный шрифт везде что-то изменить.

смотрится неуклюже (за исключением броузера Netscape на компьютере Macintosh). Часто дизайне Веб-безопасные - и только? ры создают макеты, которые зависят от конкрет ного кегля шрифта в HTML, но это приводит к Что касается цветового куба, от вечающего требованиям веб-бе- серьезным проблемам при производстве. Веб-про зопасности, - да, люди действи- ектирование, зависящее от размеров шрифта, ни тельно начинают выходить за как нельзя назвать разумным. Графический текст, строгие границы 216 цветов. С те на первый взгляд, мог бы решить проблему, но чением времени (и с переходом нельзя забывать о следующих факторах: а) время на новые версии броузеров) ста загрузки;

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

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

ках безопасных шестнадцатирич ных веб-цветов (в ячейке или в фо не) остается еще узкий момент, особенно разница в броузерах.

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

Фаза 3: Визуальное оформление и тестирование Проектирование для пользователя Отзывы пользователей По результатам мозгового штурма арт-директор Используйте любые возможности или дизайнер должны выбрать три-пять направ- для проверки сайта пользователя ми.

Где-то на стадии показа вто лений, согласовав их с дизайнерской группой, и рого раунда набросков визуально сосредоточиться на детализации информации из го дизайна, между начальными и макетов, включая навигацию, глобальные элемен заключительными комментариями ты, контент и так далее. Не забудьте определить, клиента, самое время собрать от когда и где разместить визуально-графические эле зывы пользователей. Хотя на этой менты (например, кнопки и пиктограммы), помо- стадии Базового процесса не за гающие пользователю перемещаться по сайту. планировано юзабилити-тестиро вание, проведение опроса фокус По мере разработки визуального дизайна найдите группы даст очень ценные сведе время для того, чтобы группа верно представила ния. Правильно ли понимается и себе сайт с позиции аудитории. Например, если по интерпретируется навигация? Не тенциальные клиенты в основной массе использу сет ли смысл маркировка элемен ют офисные каналы связи Т1, обратите внимание тов? Всесторонняя ли структура на время загрузки проектируемых страниц. Воз- сайта? Привлекателен ли интер можно, удастся размещать больше графики и фейс? Можно ли двигаться даль меньше текста. А если пользователи выходят в сеть ше или необходимо вернуться и в основном из дома с помощью 56 К модемов? Соз- исправить что-то?

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

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

178 Глава Рис. 5.4. В целях повышения до ступности создайте версию веб сайта для пользователей каналов связи с низкой пропускной способ ностью. Предоставьте аудито рии выбор между Flash-сайтом и его HTML-версией. Делайте это всегда Фаза 3: Визуальное оформление и тестирование Истина о размерах экрана Размеры видимых областей экрана могут быть раз- Дизайнеры любят работать с разрешением 1024x768, ными: они полностью зависят от собственной систе- так как почти все они имеют экраны с высокой разре мы пользователя. Считается, что сейчас наиболее по- шающей способностью. Но они должны просматри пулярным является разрешение 800x600. Эта уста- вать свою работу на различных мониторах. На мони новка, на которую при модернизации сайтов ориен- торе среднего размера или на своем же, но с другим тируется большинство дизайнеров, на самом деле разрешением (всегда определяемым пользователем) делает видимой только область 760x420. Это прове- может обнаружиться, что правый и нижний края ока рено. Куда деваются остальные пикселы? Их исполь- зываются обрезанными. Чтобы справиться с этой зует броузер. проблемой, делайте дизайн растяжимым, динамичес ки изменяющим размер, масштабируемым, текучим Если вы работаете в Dreamweaver, взгляните на вы все эти термины относятся к страницам, которые спо падающее меню в правой нижней части окна стра собны подстраиваться под ширину окна броузера. Мы ницы (рис. 5.5). Там предлагается несколько разме предпочитаем термин «резиновые», потому что стра ров окна. Выберите любой из них, например такой:

ница и текст растягиваются по всему окну броузера, «760x420 (800x600 maximized)». Такие параметры какого бы размера оно ни было. Dreamweaver 4.0 име настройки помогут дизайнерам реальнее смотреть ет для этого очень удобную опцию (рис. 5.6).

на вещи. Не каждый имеет 21-дюймовый монитор.

Puc. 5.5. Dreamweaver имеет удобное меню в правом углу панели инструментов, позво ляющее быстро оценить истинный размер экрана при создании эскизов или страниц Puc. 5.6. Dreamweaver предоставляет простое решение динамического изменения раз меров в броузере («резиновые» страницы). Опция Make Column Autostretch обеспечивает автоматическое распределение текста HTML-таблицы по ширине окна броузера Глава Дэвид Сигел (David Siegel) о визуальном дизайне и крайне важном посетителе Ориентируйтесь на посетителей. Это дит лишь к трате огромных усилий на следует делать на всех этапах процес- создание потрясающих эффектов, ко са дизайна, но особенно важно на ста- торые даже не могут быть оценены по дии оформления. Вы создаете много сетителями. Упростите сайт насколько набросков, но кому их показать? Кли- возможно, а затем добавляйте обратно енту? Клиент не станет тратить время оформительские эффекты, но только и деньги на эксперименты с сайтом, те, которые одинаково хороши для вас так как заинтересован только в жела- и для посетителей.

емых бизнес-результатах. Необходимо Не конкурируйте с контентом. Никог показать их посетителям. Главное, что да не применяйте узорчатый фон. Фон требуется услышать от клиента, - это должен быть пустым и в спокойных слова: «Нам это нравится», - и оста- тонах. Это не означает, что не допус вить его в покое. Раньше все стреми- кается многое л ойность, но не следует лись получить письменное одобрение пытаться воссоздавать углы, скосы и клиента, чтобы потом, если клиент не размытие. Обычно в этом нет необхо получал желаемые результаты, мож- димости. Никаких 3D. Уже везде, где но было бы напомнить, что ему нрави- есть вкладки указателя, используется лось предложенное. Не становитесь 2.5D, а 3D здесь будет смотреться не злейшими врагами самим себе. Пере- лепо. Веб-сайты создаются не для ми станьте думать о том, что нравится нам молетного прохода сквозь них, поэто (дизайнерам и клиентам), а стремитесь му трехмерность только отвлекает, к тому, что любят посетители. конкурируя с главным - контентом. А контент - это именно то, ради чего лю Прислушиваться к посетителю - вов ди, заказчики и простые пользовате се не означает, что следует забыть о ли, заходят на сайт.

собственных творческих замыслах.

Просто не давайте превалировать сво- Решительно откажитесь от некоторых ему эго. Укротите мысли о своей гени- правил. Перешагните границы свя альности;

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

Вводите новшества. Помните, что бро узеры разрабатывались без расчета на Дэвид Сигел - один из выдающихся ав визуальное отображение. Они пред- торитетов в области интернет назначались для статей по физике. С стратегии. Его книга «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 Com ботать в любой среде. Эта среда - для pany и The Industry Standard.

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

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

легко? Нет? Тогда сделайте эти места более явными. (Замечание:

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



Pages:     | 1 |   ...   | 2 | 3 || 5 | 6 |   ...   | 8 |
 





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

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