К ЧИТАТЕЛЯМ

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

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

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

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

Микеланджело Капраро, Дункан Мак-Алестер

ВВЕДЕНИЕ

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

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

ДЛЯ КОГО ПРЕДНАЗНАЧЕНА ЭТА КНИГА

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

Важно помнить, что описываемые здесь понятия применяются в среде Flash MX, но это книга не по Flash MX. Предлагаемая теория может быть применима почти ко всем мультимедийным приложениям - Java, Director, DHTML, а также к будущим версиям Flash.

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

Обычно, когда разработчики переходят к новой версии Flash, прежде всего, страдают пользователи. Они заходят на узел и первое, что видят - это кнопку с надписью Загрузите Flash 5 или Для просмотра этого узла вам необходим Flash 5. Вы как член сообщества разработчиков Flash должны приложить все усилия и объяснить пользователю не только то, что ему нужно для просмотра узла, но и то, почему необходимо установить новый модуль. Раньше это делалось просто: устанавливалось сообщение: Вам необходим проигрыватель Flash 5 и все. Но ведь большинство пользователей даже не в состоянии отличить Flash 5 от Flash 2 и не могут сказать, какая версия у них сейчас установлена. И никаких объяснений относительно того, почему нужно установить самый последний модуль.

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

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

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

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

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

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

Ах, вы еще не уверены в том, нужна ли вам она? Тогда продолжим:

ДЛЯ КОГО НЕ ПРЕДНАЗНАЧЕНА ЭТА КНИГА

Эта книга не для тех, кто хочет освоить ActionScript. На рынке имеются десятки изданий, которые способны обучить вас этому лучше нас. Настоящая книга о практичности и проектировке дизайна во Flash. Если вы дизайнер, который хочет изучить ActionScript, обратитесь к книге Брендана Дэвеса (Brendan Dawes) Flash ActionScript for Designers: Drag, Slide Fade (издательство New Riders).

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

ЦЕЛЬ КНИГИ

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

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

КАК РАБОТАТЬ С КНИГОЙ

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

• Раздел I. Выставочный узел Х╝парта Ботура.
• Раздел II. Дизайн узла GroceryClick.com.
• Раздел III. Узел разработчика Wind-Automata.

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

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

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

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

ТЕРМИНОЛОГИЯ

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

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

GUI. Аббревиатура от Graphical User Interface (графический интерфейс пользователя); произносится как "гуи". GUI заменил интерфейс командной строки (приглашение DOS и оболочку в UNIX-мире). В нем появилась возможность взаимодействовать с компьютером при помощи таких устройств ввода, как мышь и трэкбол. Теперь пользователь, обращаясь к пиктограммам и меню, может выполнять относительно сложные операции более удобными и знакомыми способами. Графический интерфейс впервые был применен компанией Xerox PARC в системе STAR, но позже получил поддержку в компании Apple (компьютеры Macintosh) и стал широко применяться такими известными компаниями, как Microsoft.

Пользовательский интерфейс. Более обобщенный, чем GUI, термин, относящийся к "реальным" объектам мира образов компьютерного пользователя. Например, кнопки на вашей микроволновке - это пользовательский интерфейс управления печью. В данной книге пользовательский интерфейс связан с визуальной частью программы, с которой работает пользователь для взаимодействия с компьютером. Другими словами, это кнопки и пиктограммы на экране, позволяющие воздействовать на программу.

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

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

Личности. Данный термин, используемый при разработке взаимодействия пользователя, был предложен специалистом по практичности и автором ряда книг Аланом Купером (Alan Cooper). Это очень эффективный "ролевой" метод проектирования пользовательского интерфейса. Основной смысл понятия личности заключается в следующем: вместо того, чтобы разрабатывать что-либо для целой демографической группы (скажем, для женщин в возрасте от 18 до 29 лет), вы создаете подробные образы, предположим, трех женщин в возрасте от 18 до 29 лет. Для большей эффективности образ должен быть как можно более детализирован, вплоть до цвета волос и любимого фильма. Такие вещи, как повседневные занятия, число членов семьи, должность на работе, даже фотография, взятая из рекламы в журнале или у кого-то из хороших знакомых, - все это очень поможет в определении выбранной личности и в окончательном решении относительно того, какой именно интерфейс следует проектировать для данной аудитории. Одна из самых главных причин, почему этот метод

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

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

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

Вы. В попытке отделить "пользователя" и нашу "личность" от вас, читателя, мы будем называть вас просто местоимением "вы". Да, слишком неиндивидуально, но, по крайней мере, вам будет ясно, о ком идет речь!

ОБ АВТОРАХ

Дункан Мак-Алестер (Duncan McAlester) живет на побережье Тихого океана и мечтает когданибудь уйти на пенсию. Но пока что он зарабатывает себе на жизнь тем, что проектирует и программирует в принадлежащей ему компании Breathe (www.breathedesign.com). Кроме того, он обучает основам проектирования интерфейса студентов Калифорнийского университета, а также ведет классы в Институте искусств Южной Калифорнии (его альмаматер). А еще Дункан любит посидеть в соседнем кафе и пообщаться в неофициальной обстановке с группой пользователей Flash (иногда заходит туда лишь для того, чтобы поздороваться). Он интересуется дизайном, мультимедиа, проектированием интерфейсов, и у него редко когда находится свободная минутка для отдыха.

Микеланджело Капраро (Michelangelo Capraro) занимается проектированием пользовательских интерфейсов уже более семи лет. За время своей трудовой деятельности он работал на многих клиентов - от больших корпораций и киностудий до мелких заказчиков. Свою карьеру он начал с разработки дизайна мультимедийных компакт-дисков в Macromedia Director, а впоследствии перешел в индустрию развлечений, проектируя Web-узлы, посвященные отдельным кинофильмам и телепрограммам. После создания в Лос-Анджелесе фирмы, занимающейся дизайном и проектированием (попутно участвуя в других бесконечных проектах), Микеланджело переехал в Северную Калифорнию, где трудился в команде разработчиков пользовательских интерфейсов компании Be Inc. Сейчас он занимает должность визуального дизайнера в компании PalmSource, Inc.

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

О ТЕХНИЧЕСКИХ РЕДАКТОРАХ

Даниэль Килер (Daniel Keeler) - журналист и редактор с невообразимо длинной карьерой. Когда он не занимается тем, что редактирует, переписывает или попросту рвет на мелкие части написанное Дунканом и Микеланджело, то выполняет обязанности главного редактора международного финансового журнала. Кроме того, Даниэль управляет издательской компанией Celerity Media. На момент работы над этой книгой он так и не решил, убирать со своего узла (www.celertymedia.com) абсолютно бесполезную и недружелюбную Flash-заставку или нет.

Тодд Маркс (Todd Marks), в прошлом учитель средней школы, объединившись со своими партнерами по байдарочному спорту Бретом Рампатой (Brett Rampata) и Уолтом Рампатой (Walt Rampata), возобновил работу над брошенным когда-то проектом digitalorganism. Будучи вице-президентом данного проекта, Тодд занимался такими продуктами, как Flash ActionScript, Lingo и т.д., вставляя наиболее удачный код в различные разработки, в том числе в узел самого проекта digitalorganism. Благодаря Тодду, digitalorganism, помимо того, что получил ряд наград, победил по трем номинациям на фестивале Flash-фильмов. Тодд является сертифицированным разработчиком, редактором и соавтором нескольких книг по Flash. Он читает лекции по ActionScript, PHP и С++ в университете города Джорджтаун и в нескольких организациях Macromedia.

Крис МакГрегор (Chris MacGregor) -дизайнер в компании MacGregor Media в Хьюстоне, штат Техас. Он консультирует своих клиентов, проживающих в различных странах, относительно того, как повысить практичность их Flash- и Web-проектов. Будучи блестящим специалистом, он пытается всячески расширить сферу применения Flash. Крис является владельцем Flazoom.com - популярного узла, посвященного Flash, и автором многих специализированных статей. В прошлом году компания Macromedia выпустила документ по практичности Flash МакГрегора под названием Разработка дружественного интерфейса во Flash (Developing User-Friendly Flash Content).

БЛАГОДАРНОСТИ

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

Большое спасибо замечательным специалистам из группы New Riders, для которых нет лучшего комплимента, чем просто сказать: "Они знают свое дело" - Стиву Вейсу (Steve Weiss), который серьезно воспринял мое предложение и организовал нашу первую встречу в Лос-Анджелесе; Дебре Хиттел-Шоаф (Deborah Hittel-Shoaf) и Терезе Гиин (Theresa Gheen) - редакторам, всячески поддерживающим нас; Линде Лафлейм (Linda Laflamme) - редактору по разработкам, исполненной замечательных идей, заботливой и терпеливой; Дэвиду Дваеру (David Dwyer), издателю из New Riders, который был настолько любезен, что подписал контракт и предоставил ту самую фотографию для Internet; Крису МакГрегору (Chris MacGregor) и Тодду Марксу (Todd Marks), которые не входят в штат New Riders, но были нашими техническими редакторами, а следовательно, проделали огромную работу.

Отдельная благодарность Деннису Боку (Dennis Bock), моему учителю по компьютерной грамоте с третьего по шестой год обучения, который познакомил меня с Apple IIe, AppleBASIC и привил любовь к компьютерам; Эрни Велку (Ernie Welke), моему учителю в младшей и средней школе, который показал мне, что искусство - это нечто большее, нежели космические корабли, нарисованные мною в школьной тетрадке; Гари Бирчу (Gary Birch), профессору мультимедиа в колледже и моему руководителю, который постоянно вдохновлял меня. Не будь я знаком с вами, я вряд ли писал бы это сегодня. Спасибо Шахраму Аараби (Shahram Aarbi), Энди Скотту (Andy Scott) и Инди Трехану (Indi Trehan), обучившим меня математике и физике (правда, я очень часто вместо того, чтобы изучать эти предметы в школе, рисовал комиксы про Бэтмэна); Джессике (Jessica) и Аарону (Aaron) - за то, что они поддерживали в отличном состоянии нашу квартиру. Ребята, вы просто замечательные!

Выражаю свою признательность Дэвиду Бэкхаму (David Beckham) - за его фантастический свободный удар, Майклу Оуэну (Michael Owen) - за те три гола, Свену Г╝рану-Эриксону (Sven Goran-Erikson) и остальной английской команде - за то, что они не дали мне впасть в послефутбольную апатию, которая обычно приходит после проигрыша любимой команды.

Спасибо Генриетте Кохн (Henriette Cohn) и Питеру Сантенгели (Peter Santangeli) из компании Macromedia за то, что они прикрывали меня, пока я был в дороге.

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

И наконец, спасибо тебе, читатель. За то, что ты потратил свое время и выслушал все, что мы хотели сказать.

- Дункан Мак-Алестер

Прежде всего, я хочу поблагодарить Дункана - за то, что он не только выбрал меня в качестве соавтора, также за то, что он замечательный художник, а главное - друг на протяжении многих лет. Спасибо Даниэлю Килеру (Daniel Keeler), преобразовавшему наши слишком беспорядочные, неорганизованные мысли в по-настоящему читабельный текст, и с которым было так приятно работать. Спасибо моим друзьям и моей семье, с которыми я почти не общался на протяжении последних нескольких месяцев. Вы были очень терпеливы, пока я работал над книгой. Спасибо! Огромная благодарность моим родителям, объяснившим мне цену работы. Выражаю признательность Дебу (Deb), Линде (Linda) и Терезе (Theresa) из New Riders. Вы поддерживали и побуждали меня делать то, что сам я никогда бы не смог сделать. Спасибо Дэвиду (David) и Стиву (Steve) из New Riders, за веру в идею создания этой книги и за то, что позволили нам, дизайнерам, делать то, что мы лучше всего умеем делать - проектировать. Большое спасибо Тодду Марксу (Todd Marks), который, прос

- Микеланджело Капраро