查看完整版本: Magic Ink

紫风铃 2008-4-9 00:38

Magic Ink

Magic InkInformation Software and the Graphical Interfaceby Bret VictorAbstract[url=http://worrydream.com/MagicInk/#p54]#[/url]The ubiquity of frustrating, unhelpful software interfaces has motivated decades of research into “Human-Computer Interaction.” In this paper, I suggest that the long-standing focus on “interaction” may be misguided. For a majority subset of software, called “information software,” I argue that interactivity is actually a curse for users and a crutch for designers, and users’ goals can be better satisfied through other means.
[url=http://worrydream.com/MagicInk/#p55]#[/url]Information software design can be seen as the design of [i]context-sensitive information graphics[/i]. I demonstrate the crucial role of information graphic design, and present three approaches to context-sensitivity, of which interactivity is the last resort. After discussing the cultural changes necessary for these design ideas to take root, I address their implementation. I outline a tool which may allow designers to create data-dependent graphics with no engineering assistance, and also outline a platform which may allow an unprecedented level of implicit context-sharing between independent programs. I conclude by asserting that the principles of information software design will become critical as technology improves.
[url=http://worrydream.com/MagicInk/#p56]#[/url]Although this paper presents a number of concrete design and engineering ideas, the larger intent is to introduce a “unified theory” of information software design, and provide inspiration and direction for progressive designers who suspect that the world of software isn’t as flat as they’ve been told.
Scope and terminology[url=http://worrydream.com/MagicInk/#p57]#[/url]“[b]Software[/b],” as used here, refers to user-facing personal desktop software, whether on a native or web platform. “[b]Software design[/b]” describes all appearance and behaviors visible to a user; it approaches software as a [i]product[/i]. “[b]Software engineering[/b]” implements the design on a computer; it approaches software as a [i]technology[/i]. These are contentious definitions; hopefully, this paper itself will prove far more contentious.
ContentsWhat is software?
[list][*][url=http://worrydream.com/MagicInk/#of_software_and_sorcery][color=#0000ff]Of software and sorcery.[/color][/url] Is “interaction design” the cure for frustrating software, or the disease itself?[*][url=http://worrydream.com/MagicInk/#what_is_software_design][color=#0000ff]What is software design?[/color][/url] Software is not a new and mysterious medium, but a fusion of two old ones.[*][url=http://worrydream.com/MagicInk/#what_is_software_for][color=#0000ff]What is software for?[/color][/url] People turn to software to learn, to create, and to communicate.[*][url=http://worrydream.com/MagicInk/#manipulation_software_design_is_hard][color=#0000ff]Manipulation software design is hard.[/color][/url] Creating software for creating is tricky business.[*][url=http://worrydream.com/MagicInk/#most_software_is_information_software][color=#0000ff]Most software is information software.[/color][/url] People spend more time learning than creating.[/list]Graphic design
[list][*][url=http://worrydream.com/MagicInk/#information_software_design_is_graphic_design][color=#0000ff]Information software design is graphic design.[/color][/url] People learn by looking. Looks are all that matters.[*][url=http://worrydream.com/MagicInk/#demonstration_showing_the_data][color=#0000ff]Demonstration: Showing the data.[/color][/url] Redesigning Amazon as an information graphic.[*][url=http://worrydream.com/MagicInk/#demonstration_arranging_the_data][color=#0000ff]Demonstration: Arranging the data.[/color][/url] Redesigning Yahoo! Movies as an information graphic.[/list]Context-sensitivity
[list][*][url=http://worrydream.com/MagicInk/#contextsensitive_information_graphics][color=#0000ff]Context-sensitive information graphics.[/color][/url] Software trumps print by showing only what’s relevant.[*][url=http://worrydream.com/MagicInk/#inferring_context_from_the_environment][color=#0000ff]Inferring context from the environment.[/color][/url] The outside world can suggest what’s relevant.[*][url=http://worrydream.com/MagicInk/#inferring_context_from_history][color=#0000ff]Inferring context from history.[/color][/url] Memories of the past can suggest what’s relevant.[/list]Interactivity L-^E3L"Mi$J9m
[list][*][url=http://worrydream.com/MagicInk/#interactivity_considered_harmful][color=#0000ff]Interactivity considered harmful.[/color][/url] The user can suggest what’s relevant, but only as a last resort.[*][url=http://worrydream.com/MagicInk/#reducing_interaction][color=#0000ff]Reducing interaction.[/color][/url] Approaches to easing the pain.[*][url=http://worrydream.com/MagicInk/#how_did_we_get_here][color=#0000ff]How did we get here?[/color][/url] The popular focus on interactivity is a vestige of another era.[/list]Intermission yR#CIp
[list][*][url=http://worrydream.com/MagicInk/#case_study_train_schedules][color=#0000ff]Case study: Train schedules.[/color][/url] Designing a trip planner as an information graphic.[*][url=http://worrydream.com/MagicInk/#demonstration_trip_planning_redux][color=#0000ff]Demonstration: Trip planning redux.[/color][/url] Redesigning Southwest Airlines as an information graphic.[/list]Changing the world
[list][*][url=http://worrydream.com/MagicInk/#designing_the_information_software_revolution][color=#0000ff]Designing the information software revolution.[/color][/url] Five steps from artifice to art form.[*][url=http://worrydream.com/MagicInk/#designing_a_design_tool][color=#0000ff]Designing a design tool.[/color][/url] Dynamic graphics without the programming.[*][url=http://worrydream.com/MagicInk/#engineering_inference_from_history][color=#0000ff]Engineering inference from history.[/color][/url] How software can learn from the past.[*][url=http://worrydream.com/MagicInk/#engineering_inference_from_the_environment][color=#0000ff]Engineering inference from the environment.[/color][/url] A platform for implicit communication between software.[*][url=http://worrydream.com/MagicInk/#information_and_the_world_of_tomorrow][color=#0000ff]Information and the world of tomorrow.[/color][/url] Why all this matters.[/list]h[o*b6R@,sE:oh

[img=435,83]http://worrydream.com/MagicInk/p/logo_what_is_software.png[/img]
Of software and sorcery[indent][url=http://worrydream.com/MagicInk/#p44]#[/url]A computational process is indeed much like a sorcerer’s idea of a spirit. It cannot be seen or touched. It is not composed of matter at all. However, it is very real. It can perform intellectual work. It can [b]answer questions[/b]. It can [b]affect the world[/b] by disbursing money at a bank or by controlling a robot arm in a factory. The programs we use to conjure processes are like a sorcerer’s spells.
—Abelson and Sussman, [url=http://mitpress.mit.edu/sicp/][color=#0000ff]Structure and Interpretation of Computer Programs[/color][/url] (1984)
[/indent][url=http://worrydream.com/MagicInk/#p59]#[/url]Merlin had it easy—raising Stonehenge was a mere engineering challenge. He slung some weighty stones, to be sure, but their placement had only to please a subterranean audience whose interest in the matter was rapidly decomposing. The dead are notoriously unpicky.
[url=http://worrydream.com/MagicInk/#p60]#[/url]Today’s software magicians carry a burden heavier than 13-foot monoliths—communication with the living. They often approach this challenge like Geppetto’s fairy—attempting to instill the spark of life into a mechanical contraption, to create a Real Boy. Instead, their vivified creations often resemble those of Frankenstein—helpless, unhelpful, maddeningly stupid, and prone to accidental destruction.^b1\p5hK
[url=http://worrydream.com/MagicInk/#p61]#[/url]This is a software crisis, and it isn’t news. For decades, the usability pundits have devoted vim and vitriol to a crusade against frustrating interfaces. Reasoning that the cure for unfriendly software is to make software friendlier, they have rallied under the banner of “interaction design,” spreading the gospel of friendly, usable interactivity to all who would listen.dw%@&b*V
[url=http://worrydream.com/MagicInk/#p62]#[/url]Yet, software has remained frustrating, and as the importance of software to society has grown, so too has the crisis. The crusade marches on, with believers rarely questioning the sacred premise—that software must be interactive in the first place. That software is meant to be “used.”
[url=http://worrydream.com/MagicInk/#p63]#[/url]I suggest that the root of the software crisis is an identity crisis—an unclear understanding of what the medium actually [i]is[/i], and what it’s [i]for[/i]. Perhaps the spark of life is misdirected magic. A good introduction to the crisis is Alan Cooper’s [url=http://www.amazon.com/gp/product/0672326140][color=#0000ff]The Inmates Are Running The Asylum[/color][/url] (1999). Essential concepts of interactive design are presented in Don Norman’s [url=http://www.amazon.com/gp/product/0465067107][color=#0000ff]Design Of Everyday Things[/color][/url] (2002), Jef Raskin’s [url=http://www.amazon.com/gp/product/0201379376][color=#0000ff]The Humane Interface[/color][/url] (2000), and Cooper’s [url=http://www.amazon.com/gp/product/0764526413][color=#0000ff]About Face[/color][/url] (2003).
What is software design?[url=http://worrydream.com/MagicInk/#p64]#[/url]A person experiences modern software almost exclusively through two channels:
[list][*]She reads and interprets pictures on a screen.[*]She points and pushes at things represented on the screen, using a mouse as a proxy finger.[/list][url=http://worrydream.com/MagicInk/#p65][color=#0000ff]# [/color][/url]Thus, software design involves the design of two types of artifact:
[list][*]Pictures.[*]Things to push.[/list][url=http://worrydream.com/MagicInk/#p66][color=#0000ff]# [/color][/url]These are not brave new realms of human endeavor. We share the blood of cavemen who pushed spears into mammoths and drew pictures of them in the living room. By now, these two activities have evolved into well-established design disciplines: graphic design and industrial design.8Z;n!k+e4e Zgo
[url=http://worrydream.com/MagicInk/#p67][color=#0000ff]# [/color][/url][b]Graphic design[/b] is the art of conveying a message on a two-dimensional surface. This is a broad field, because people have such a variety of messages to convey—identity, social status, emotion, persuasion, and so on. Most relevant to software is a branch that Edward Tufte calls [i]information design[/i]—the use of pictures to express knowledge of interest to the reader.** Edward Tufte, [url=http://www.amazon.com/gp/product/0961392142][color=#0000ff]The Visual Display of Quantitative Information[/color][/url] (2001). Some products of conventional information graphic design include bus schedules, telephone books, newspapers, maps, and shopping catalogs. A good graphic designer understands how to arrange information on the page so the reader can ask and answer questions, make comparisons, and draw conclusions.
[url=http://worrydream.com/MagicInk/#p68][color=#0000ff]# [/color][/url]When the software designer defines the visual representation of her program, when she describes the pictures that the user will interpret, she is doing graphic design, whether she realizes this or not.I9N%e*f,Q| j?r_
[url=http://worrydream.com/MagicInk/#p69][color=#0000ff]# [/color][/url][b]Industrial design[/b] is the art of arranging and shaping a physical product so it can be manipulated by a person. This too is a broad field, because people work with such a variety of objects—cutlery to chairs, cell phones to cars. A good industrial designer understands the capabilities and limitations of the human body in manipulating physical objects, and of the human mind in comprehending mechanical models. A camera designer, for example, shapes her product to fit the human hand. She places buttons such that they can be manipulated with index fingers while the camera rests on the thumbs, and weights the buttons so they can be easily pressed in this position, but won’t trigger on accident. Just as importantly, she designs an understandable [i]mapping[/i] from physical features to functions—pressing a button snaps a picture, pulling a lever advances the film, opening a door reveals the film, opening another door reveals the battery.
[url=http://worrydream.com/MagicInk/#p70][color=#0000ff]# [/color][/url]Although software is the archetypical non-physical product, modern software interfaces have evolved overtly mechanical metaphors. Buttons are pushed, sliders are slid, windows are dragged, icons are dropped, panels extend and retract. People are encouraged to consider software a machine—when a button is pressed, invisible gears grind and whir, and some internal or external state is changed. Manipulation of machines is the domain of industrial design.Z;HrS cj
[url=http://worrydream.com/MagicInk/#p71][color=#0000ff]# [/color][/url]When the software designer defines the interactive aspects of her program, when she places these pseudo-mechanical affordances and describes their behavior, she is doing a virtual form of industrial design. Whether she realizes it or not.
[url=http://worrydream.com/MagicInk/#p72][color=#0000ff]# [/color][/url]The software designer can thus approach her art as a fusion of graphic design and industrial design. Now, let’s consider how a user approaches software, and more importantly, [i]why[/i].
What is software for?[url=http://worrydream.com/MagicInk/#p73][color=#0000ff]# [/color][/url]Software is for people. To derive what software should do, we have to start with what [i]people[/i] do. Consider the following taxonomy of human activity:** There are any number of ways of breaking down the spectrum of human activity. I don’t claim that the subdivision given here is [i]definitive[/i], but that it’s [i]useful[/i]. Consider it a set of basis vectors into the space of human activity. Different basis sets are helpful for reasoning about different problems, but they all describe the same space. ;K*k&yBw,[Nlo
[img=345,103]http://worrydream.com/MagicInk/p/taxonomy.png[/img]s%V^"s+kn,M+U
[url=http://worrydream.com/MagicInk/#p74][color=#0000ff]# [/color][/url]At the present, software can’t do much for physical needs—if your avatar eats a sandwich, you remain hungry. But people are increasingly shifting their intellectual activities to the virtual world of the computer. This suggests three general reasons why a person will turn to software:Vd;w7cr&J m
[list][*]To learn.[*]To create.[*]To communicate.[/list][url=http://worrydream.com/MagicInk/#p75][color=#0000ff]# [/color][/url]I propose that software can be classified according to which of these needs it serves. I will call these categories [i]information[/i] software, [i]manipulation[/i] software, and [i]communication[/i] software.v l jTM+\:j/{
[url=http://worrydream.com/MagicInk/#p76][color=#0000ff]# [/color][/url][b]Information software[/b] serves the human urge to learn. [img=200,107]http://worrydream.com/MagicInk/p/information_model.png[/img] A person uses information software to [b]construct and manipulate a model that is internal to the mind[/b]—a mental representation of information. Good information software encourages the user to ask and answer questions, make comparisons, and draw conclusions. A person would use recipe software, for example, to decide what to cook for dinner. She would learn about various dishes (where “learning” could be as informal as a quick skim for something tasty that contains ingredients on hand), compare her options, and make her decision. In effect, she is constructing an internal understanding of culinary possibilities, and mentally prodding this model to reveal the optimal choice. It’s the same effect she would hope to achieve by consulting a recipe [i]book[/i].,E(|BIT)S
[url=http://worrydream.com/MagicInk/#p77][color=#0000ff]# [/color][/url][b]Manipulation software[/b] serves the human urge to create. [img=200,127]http://worrydream.com/MagicInk/p/manipulation_model.png[/img] A person uses manipulation software to [b]construct and manipulate a model external to herself[/b]—a virtual object represented within the computer, or a remote physical object. Some examples include software for drawing, writing, music composition, architectural design, engineering design, and robot control. Manipulation software can be considered a virtual [i]tool[/i]—like a paintbrush or typewriter or bandsaw, it is used as an interface between creator and artifact.y{1x|5E z-@ o
[url=http://worrydream.com/MagicInk/#p78][color=#0000ff]# [/color][/url][b]Communication software[/b] serves the human urge to communicate. [img=200,121]http://worrydream.com/MagicInk/p/communication_model.png[/img] A person uses communication software to [b]construct and manipulate an internal model that is shared with others[/b]—an understanding synchronized across multiple minds. Examples include software for email, group discussions (whether voice, video, or text), and collaborative working. In terms of raw mechanics, communication can be thought of as [i]creating[/i] a response to information [i]learned[/i]—that is, the external model manipulated by the speaker is the internal model learned by the listener. Thus, this paper will simply treat communication software as manipulation software and information software glued together, and mention it no further.** This dismissal is rather disingenuous—communication software is fundamentally unlike the other two because its user is a [i]group[/i], and a group as a whole can have different goals than any of its constituents individually. The considerations of social software design are well beyond the scope of this paper, but see [url=http://www.shirky.com/][color=#0000ff]Clay Shirky[/color][/url]’s essays, particularly [url=http://shirky.com/writings/group_politics.html][color=#0000ff]Social Software and the Politics of Groups[/color][/url] (2003). This design approach is widespread—email software typically has separate reading and writing modes; messageboards similarly segregate browsing and posting.hx `b`
Manipulation software design is hard[url=http://worrydream.com/MagicInk/#p79][color=#0000ff]# [/color][/url]Manipulation software generally displays a representation of an object—the model—which the user directly manipulates with pseudo-mechanical affordances. Because manipulation is the domain of industrial design, manipulation software emphasizes industrial design aspects.
[url=http://worrydream.com/MagicInk/#p80][color=#0000ff]# [/color][/url]Consider a tool for laying out a small newspaper. The user will spend most of her time performing a number of pseudo-physical operations—writing, drawing, cutting, moving, rotating, stretching, cropping, layering—within a virtual space. The primary design challenge, just as with any industrial design, is to provide affordances that make these mechanical operations [i]available[/i], [i]understandable[/i], and [i]comfortable[/i]. However, in a physical space, each operation would use a specialized tool. Designing a “mega-tool” that cleanly incorporates all operations (and flattens them into two dimensions, and uses only the gestures “click” and “drag”) is a significant challenge indeed.
[url=http://worrydream.com/MagicInk/#p81][color=#0000ff]# [/color][/url]Although manipulation is the focus, good manipulation software must provide superb visualization as well. This establishes the feedback loop that is critical for all creative activity—the manipulator must see the effects of her manipulation. Thus, manipulation software design is also a significant graphic design challenge.
[url=http://worrydream.com/MagicInk/#p82][color=#0000ff]# [/color][/url]For example, the newspaper editor needs to see what a page looks like—close-up, from a distance, and in relation to other pages—and how it [i]would[/i] look in a variety of other configurations. She wants to see misspelled words, lines that are poorly justified or hyphenated, and widows and orphans. She wants to see columns that are short or overlong, and how they can be corrected by changing column width or leading. She wants to know what stories and ads are still on the table, their sizes, and how they can be fit in. She wants to know how recently and how often stories about a given topic have run, and how readers have responded. She wants to know past response to a given ad, as a function of the topics or authors of the stories it was coupled with. Finally, the presentation of all this information must not distract the editor from the primary task of manipulating the layout.
[url=http://worrydream.com/MagicInk/#p83][color=#0000ff]# [/color][/url]Furthermore, the industrial and graphic designs in manipulation software must be in intimate synergy, since it is the graphic design which describes how the object can be manipulated—the mechanical affordances are graphical constructs. Even more graphically challenging is manipulation of abstract objects, such as music or financial data, where the graphical representation must show not only what can be done with it, but [i]what it is[/i] in the first place.** As opposed to painting software, for instance, where the graphical representation can be the artifact itself. This is not a pipe, but it’s close enough.
[url=http://worrydream.com/MagicInk/#p84][color=#0000ff]# [/color][/url]Because of these intertwined design challenges, the design of excellent manipulation software is [i]unbelievably[/i] difficult, and mustn’t be underestimated. Fortunately, for an enormous class of software, manipulation is not only largely unnecessary, but best avoided.y#],E^x(E
Most software is information software[url=http://worrydream.com/MagicInk/#p85][color=#0000ff]# [/color][/url]J.C.R. Licklider once examined how he spent his research time:+E-K'gz[8\zi0?0p
[indent][url=http://worrydream.com/MagicInk/#p45][color=#0000ff]# [/color][/url]In the spring and summer of 1957… I tried to keep track of what one moderately technical person [myself] actually did during the hours he regarded as devoted to work… About 85 per cent of my “thinking” time was spent getting into a position to think, to make a decision, to learn something I needed to know. Much more time went into finding or obtaining information than into digesting it. Hours went into the plotting of graphs, and other hours into instructing an assistant how to plot. When the graphs were finished, the relations were obvious at once, but the plotting had to be done in order to make them so… Throughout the period I examined, in short, my “thinking” time was devoted mainly to activities that were essentially clerical or mechanical: searching, calculating, plotting, transforming, determining the logical or dynamic consequences of a set of assumptions or hypotheses, preparing the way for a decision or an insight.** J.C.R. Licklider, “[url=http://memex.org/licklider.pdf][color=#0000ff]Man-Computer Symbiosis[/color][/url]” (1960).
[/indent][url=http://worrydream.com/MagicInk/#p86][color=#0000ff]# [/color][/url]For Licklider and other early visionaries such as Vanevar Bush and Doug Engelbart,** See Bush’s paper “[url=http://sloan.stanford.edu/mousesite/Secondary/Bush.html][color=#0000ff]As We May Think[/color][/url]” (1945) and Engelbart’s paper “[url=http://www.bootstrap.org/augdocs/friedewald030402/augmentinghumanintellect/ahi62index.html][color=#0000ff]Augmenting Human Intellect[/color][/url]” (1962). the ideal of the then-hypothetical personal computer was a brain supplement, enhancing human memory and amplifying human reasoning through data visualization and automated analysis. Their primary concern was how a machine could help a person [i]find[/i] and [i]understand[/i] relevant knowledge. Although they were generally discussing scientific and professional work, their prescience fully applies in the modern home.
[url=http://worrydream.com/MagicInk/#p87][color=#0000ff]# [/color][/url]Most of the time, a person sits down at her personal computer not to create, but to [i]read, observe, study, explore, make cognitive connections, and ultimately come to an understanding[/i]. This person is not seeking to make her mark upon the world, but to rearrange her own neurons. The computer becomes a medium for asking questions, making comparisons, and drawing conclusions—that is, for [i]learning[/i].
[url=http://worrydream.com/MagicInk/#p88][color=#0000ff]# [/color][/url][b]People turn to software to learn the meaning of words, learn which countries were bombed today, and learn to cook a paella. They decide which music to play, which photos to print, and what to do tonight, tomorrow, and Tuesday at 2:00. They keep track of a dozen simultaneous conversations in private correspondence, and maybe hundreds in public arenas. They browse for a book for Mom, a coat for Dad, and a car for Junior. They look for an apartment to live in, and a bed for that apartment, and perhaps a companion for the bed. They ask when the movie is playing, and how to drive to the theater, and where to eat before the movie, and where to get cash before they eat. They ask for numbers, from simple sums to financial projections. They ask about money, from stock quote histories to bank account balances. They ask why their car isn’t working and how to fix it, why their child is sick and how to fix her. They no longer sit on the porch speculating about the weather—[i]they ask software[/i].[/b]}b^:A3o!`:D
[url=http://worrydream.com/MagicInk/#p89][color=#0000ff]# [/color][/url]Much current software fulfilling these needs presents mechanical metaphors and objects to manipulate, but this is deceiving. People using this software do not [i]care[/i] about these artificial objects; they care about seeing information and understanding choices—manipulating a model in their heads.C3qp8v!p6|0w
[url=http://worrydream.com/MagicInk/#p90][color=#0000ff]# [/color][/url]For example, consider calendar or datebook software. Many current designs center around manipulating a database of “appointments,” but is this really what a calendar is for? To me, it is about combining, correlating, and visualizing a vast collection of information. I want to understand what I have planned for tonight, what my friends have planned, what’s going on downtown, what’s showing when at the movie theater, how late the pizza place is open, and which days they are closed. I want to see my pattern of working late before milestones, and how that extrapolates to future milestones. I want to see how all of this information interrelates, make connections, and ultimately make a decision about what to do when. Entering a dentist appointment is just a tedious minor detail, and would even be [i]unnecessary[/i] if the software could figure it out from my dentist’s confirmation email. My goal in using calendar software to ask and answer questions about what to do when, compare my options, and come to a decision.
[url=http://worrydream.com/MagicInk/#p91][color=#0000ff]# [/color][/url]Consider personal finance software. Entering and classifying my expenses is, again, tedious and unnecessary manipulation—my credit card already tracks these details. I use the software to [i]understand[/i] my financial situation and my spending habits. How much of my paycheck goes to rent? How much to Burrito Shack? If I give up extra guacamole on my daily burrito, will I be able to buy a new laptop? What is my pattern of Christmas spending, and will I have to cut back if I don’t take any jobs for a month? If I buy a hybrid car, how much will I save on gas? I want to ask and answer questions, compare my options, and let it guide my spending decisions.)XfIq[#p4mv
[url=http://worrydream.com/MagicInk/#p92][color=#0000ff]# [/color][/url]Consider an online retailer, such as Amazon or Netflix. The entire purpose of the website—the pictures, ratings, reviews, and suggestions—is to let me find, understand, and compare their offerings. The experience is about building a decision inside my head. In the end, I manipulate a shopping cart, but that is merely to put my mental process to effect, to reify the decision. At the best retailers, this manipulation is made as brief as possible.!ko-m U1F3A7h)y^
[url=http://worrydream.com/MagicInk/#p93][color=#0000ff]# [/color][/url]Even consider reading email. Most current designs revolve around the manipulation of individual messages—reading them one-by-one, searching them, sorting them, filing them, deleting them. But the [i]purpose[/i] of reading email has nothing to do with the messages themselves. I read email to keep a complex set of mental understandings up-to-date—the statuses of personal conversations, of projects at work, of invitations and appointments and business transactions and packages in the mail. That this information happens to be parceled out in timestamped chunks of text is an implementation detail of the communication process. It is not necessarily a good way to [i]present[/i] the information to a learner.
[url=http://worrydream.com/MagicInk/#p94][color=#0000ff]# [/color][/url]Similar arguments can be made for most software. Ignore the structure of current designs, and ask only, “Why is a person using this?” Abstracted, the answer almost always is, “To learn.”
[url=http://worrydream.com/MagicInk/#p95][color=#0000ff]# [/color][/url]So far, this categorization has just been an exercise in philosophy. But this philosophy suggests a very practical approach to software design.Rc Y0p o9T#i
[img=435,83]http://worrydream.com/MagicInk/p/logo_graphic_design.png[/img]Z.j$}(vm)t
Information software design is graphic design[url=http://worrydream.com/MagicInk/#p96][color=#0000ff]# [/color][/url]It might seem like I’m demanding a lot from my software. But it’s not deep magic—no simulations of complex phenomena, no effects on the external world, certainly no sentience or spark of life. I’m asking for software to display a complex set of data in a way that I can understand it and reason about it. This is a well-established problem; it’s the raison d’etre of information graphic design. My demands are perfect examples of graphic design challenges.jTYb$Qy,_H
[url=http://worrydream.com/MagicInk/#p97][color=#0000ff]# [/color][/url]A well-designed information graphic can almost [i]compel[/i] the viewer to ask and answer questions, make comparisons, and draw conclusions. It does so by exploiting the capabilities of the human eye: instantaneous and effortless movement, high bandwidth and capacity for parallel processing, intrinsic pattern recognition and correlation, a macro/micro duality that can skim a whole page or focus on the tiniest detail. Meanwhile, a graphic sidesteps human shortcomings: the one-dimensional, uncontrollable auditory system, the relatively sluggish motor system, the mind’s limited capacity to comprehend hidden mechanisms. A graphic presents no mechanisms to comprehend or manipulate—it plugs directly into the mind’s spatial reasoning centers.
[url=http://worrydream.com/MagicInk/#p98][color=#0000ff]# [/color][/url]For example, consider this train timetable:
[url=http://worrydream.com/MagicInk/#p99][color=#0000ff]# [/color][/url][color=#0000ff][img=597,163]http://worrydream.com/MagicInk/p/train_table.png[/img][/color]
[url=http://worrydream.com/MagicInk/#p100][color=#0000ff]# [/color][/url]This design may be adequate for commuters, whose questions mostly concern when trains arrive at stations. But train system operators have a different set of questions: Where exactly are the trains at any given time? How fast are they moving? Where do two trains cross? (They better not be on the same track at that point!) Where are the trains at the start of the day, and where do they end up at night? If a train is delayed, how do all these answers change? Like some of the software questions above, these questions seem very difficult to answer. But consider this revised timetable design:{-zE tUd$ZsT
[url=http://worrydream.com/MagicInk/#p101][color=#0000ff]# [/color][/url][color=#0000ff][img=558,285]http://worrydream.com/MagicInk/p/train_graph.png[/img][/color]0AF7X\a?X
[url=http://worrydream.com/MagicInk/#p102][color=#0000ff]# [/color][/url]Each train is represented by a distinctly-colored line, with distance along the track plotted vertically and time horizontally. The slope of the line represents the train’s direction and speed; horizontal sections are stops. This graphic incorporates no more [i]data[/i] than the previous one, yet all of the operators’ questions are answered at a glance. Important features such as crossings are [i]emphasized[/i] simply because the eye is naturally drawn toward line intersections. Footnotes are unnecessary; the exceptions are no longer exceptional when seen in context. Should a train be delayed, all revised stops and crossings can be “calculated” simply by drawing a new line.** Graphical train timetables date from the late 1800s. For the origin of this and other classic graphical forms, see Howard Wainer’s book [url=http://www.amazon.com/gp/product/0691103011][color=#0000ff]Graphic Discovery[/color][/url] (2005).
[url=http://worrydream.com/MagicInk/#p103][color=#0000ff]# [/color][/url]Compared to excellent ink-and-paper designs, most current software communicates deplorably. This is a problem of surface, but not a superficial problem. The main cause, I believe, is that many software designers feel they are designing a machine. Their foremost concern is behavior—what the software [i]does[/i]. They start by asking: What functions must the software perform? What commands must it accept? What parameters can be adjusted? (In the case of websites: What pages must there be? How are they linked together? What are the dynamic features?) These designers start by specifying [i]functionality[/i], but the essence of information software is the [i]presentation[/i]..DHV't4Z lD.Ph9{
[url=http://worrydream.com/MagicInk/#p104][color=#0000ff]# [/color][/url]It must be mentioned that there is a radically alternative approach for information software—[i]games[/i]. Playing is essentially learning [i]through[/i] structured manipulation—exploration and practice instead of pedagogic presentation. Despite the enormous potential for mainstream software, accidents of history and fashion have relegated games to the entertainment bin, and the stigma of immaturity is tough to overcome. (The situation is similar for graphic novels.) Raph Koster’s [url=http://www.amazon.com/gp/product/1932111972][color=#0000ff]Theory of Fun for Game Design[/color][/url] (2004) and James Paul Gee’s [url=http://www.amazon.com/gp/product/1403965382][color=#0000ff]What Video Games Have To Teach Us About Learning and Literacy[/color][/url] (2003) deal directly with games as learning tools. Salen and Zimmerman’s [url=http://www.amazon.com/gp/product/0262240459][color=#0000ff]Rules of Play[/color][/url] (2003) and Chris Crawford’s [url=http://www.amazon.com/gp/product/1886411840][color=#0000ff]Art of Interactive Design[/color][/url] (2003) and [url=http://www.amazon.com/gp/product/0131460994][color=#0000ff]Chris Crawford on Game Design[/color][/url] (2003) discuss learning through play in a broader context. [b]I suggest that the design of information software should be approached initially and primarily as a graphic design project.[/b] The foremost concern should be appearance—what and how information is presented. The designer should ask: What [i]is[/i] relevant information? What questions will the viewer ask? What situations will she want to compare? What decision is she trying to make? How can the data be presented most effectively? How can the visual vocabulary and techniques of graphic design be employed to direct the user’s eyes to the solution? The designer must start by considering what the software [i]looks like[/i], because the user is using it to learn, and she learns by looking at it.8n2V2r7d i(_a6~
[url=http://worrydream.com/MagicInk/#p105][color=#0000ff]# [/color][/url]Instead of dismissing ink-and-paper design as a relic of a previous century, the software designer should consider it a [i]baseline[/i]. If information software can’t present its data at least as well as a piece of paper, how have we progressed?n V+f9^,S(R
Demonstration: Showing the data[url=http://worrydream.com/MagicInk/#p106][color=#0000ff]# [/color][/url]Edward Tufte’s first rule of statistical graphic design is, “[i]Show the data.[/i]” All information graphics, statistical or not, must present the viewer with enough information to answer her questions. It seems that many software designers, in their focus on functionality, forget to actually present the data.
[url=http://worrydream.com/MagicInk/#p107][color=#0000ff]# [/color][/url]Consider the information presented when searching a popular online bookstore.** Based on [url=http://www.amazon.com/][color=#0000ff]amazon.com[/color][/url] as of January 2006.
[img=712,424]http://worrydream.com/MagicInk/p/books_original.png[/img]
[url=http://worrydream.com/MagicInk/#p108][color=#0000ff]# [/color][/url]There are a number of graphic design criticisms one could make—the uniform text size and weight results in a solid, oppressive mass; the abundance of saturated primary colors gives a distracting, carnival-like appearance; the text is spread all over the page, giving the eye no well-defined path to follow. However, the most egregious problem is simply that there is [i]not enough information to make any sort of decision[/i].
[url=http://worrydream.com/MagicInk/#p109][color=#0000ff]# [/color][/url]The user’s goal is to find the best book about some particular topic. Given that the books shown are presumably related to this topic, what questions does the user have?
[list][*]Is the book [i]appropriate[/i]? That is, what is it about, and do I care?[*]Is the book [i]good[/i]? That is, what did other people think of it, and do I trust them?[/list][url=http://worrydream.com/MagicInk/#p110][color=#0000ff]# [/color][/url]The answers will be used to compare the available books, and decide upon one to follow up on and possibly buy.O5U:bwV:ye
[url=http://worrydream.com/MagicInk/#p111][color=#0000ff]# [/color][/url]Unfortunately, these questions are completely unaddressed by the information provided. To see relevant information, the user must click on each listing individually. That is, she must navigate by [i]hand[/i] instead of by [i]eye[/i], and must use her memory to compare information across [i]time[/i] instead of [i]space[/i]. m$j$ki1I3^6A
[url=http://worrydream.com/MagicInk/#p112][color=#0000ff]# [/color][/url]The problem is that this graphic was designed as an [i]index[/i] into a set of webpages, but is used as a [i]catalog[/i] for comparing a set of books. The purpose of this graphic should not be to return a list of query matches, but to help the user [i]learn[/i] about books related to her topic of interest.
[url=http://worrydream.com/MagicInk/#p113][color=#0000ff]# [/color][/url]Consider this redesign:
[img=800,559]http://worrydream.com/MagicInk/p/books_redesign.png[/img]
[url=http://worrydream.com/MagicInk/#p114][color=#0000ff]# [/color][/url]Is a book appropriate? A synopsis and table of contents give an overview of the book’s contents. Is a book good? A rating and reviews indicate popular opinion. Because all of this information is on a single page, it can be compared by eye, with no need for memory.g7h?b-Tar:Z/]
[url=http://worrydream.com/MagicInk/#p115][color=#0000ff]# [/color][/url]The standard 5-star rating system is information-weak—it gives only an [i]average[/i]. It can be enhanced with whiskers underneath that indicate the [i]distribution[/i] of ratings. This allows the viewer to differentiate between a book that was unanimously judged middling [img]http://worrydream.com/MagicInk/p/books_stars_1.png[/img] and one that was loved and hated [img]http://worrydream.com/MagicInk/p/books_stars_2.png[/img]—these are both 3-star ratings, but have very different meanings. The viewer can also see whether a highly-rated book got [i]any[/i] bad reviews; in a sea of praise, criticism often makes enlightening reading. As a whole, the whiskers give a visual indication of the number of ratings, which reflects the trustworthiness of the average. The whiskers are unobtrusive, and can easily be ignored by viewers who don’t care about distribution.
[url=http://worrydream.com/MagicInk/#p116][color=#0000ff]# [/color][/url][color=#0000ff][img=200,107]http://worrydream.com/MagicInk/p/books_eyespan.png[/img][/color] Text weight and color is used to emphasize important information and call it out when skimming. Text in grey can be read when focused upon, but disappears as background texture when skimming. All critical information is contained in a column with the [b]width of an eyespan[/b], with a picture to the left and supplementary information to the right. The viewer can thus run her eye vertically down this column; when she spots something interesting, she will slow down and explore horizontally.
[url=http://worrydream.com/MagicInk/#p117][color=#0000ff]# [/color][/url]The user wants to see books related to a topic in her [i]head[/i]. But ideas in the head are nebulous things, and may not translate perfectly to a concrete search term. For this reason, a mini-list of related books is provided for each book. [img=200,52]http://worrydream.com/MagicInk/p/books_related.png[/img] This is similar to a “related words” section in a thesaurus listing—it allows the user to correct a near miss, or veer off in a tangential but intriguing direction.
[url=http://worrydream.com/MagicInk/#p118][color=#0000ff]# [/color][/url]Conventional software designers will worry about functionality—how does the user interact with this graphic? Clearly, other than the “related books” listing, a click [i]anywhere[/i] in a book’s section should reveal details and purchasing options. What else could the user mean by clicking? It’s analogous to pulling the book off a physical shelf.PWu,_H k
[url=http://worrydream.com/MagicInk/#p119][color=#0000ff]# [/color][/url]This is a significant redesign over the original; yet, I consider it a conservative one. A more ambitious design could surely show even [i]more[/i] data, perhaps allowing the user to browse within the book or fully explore the space of related books. A world of possibilities opens up with a simple change of mindset. This is not a list of search results—it is an information graphic. It is for [i]learning[/i].
Demonstration: Arranging the data[url=http://worrydream.com/MagicInk/#p120][color=#0000ff]# [/color][/url]Just as important as [i]what[/i] data is shown is [i]where[/i] it is shown. Unlike the words in a paragraph, the elements in a graphic can be deliberately [i]placed[/i] to encourage spatial reasoning. Unfortunately, most software graphics are arranged to maximize aesthetics, not to bring out useful relationships in the data. (That is, when any skilled thought is given to appearance at all.))B&_w&IYU/ZY
[url=http://worrydream.com/MagicInk/#p121][color=#0000ff]# [/color][/url]Consider this excerpt of a graphic for browsing nearby movie showings:** Based on [url=http://movies.yahoo.com/][color=#0000ff]movies.yahoo.com[/color][/url] as of January 2006. g,j1?tI@'Sx
[img=581,363]http://worrydream.com/MagicInk/p/movies_original.png[/img] eY_VUj
[url=http://worrydream.com/MagicInk/#p122][color=#0000ff]# [/color][/url]If a person is in the mood for a movie, what questions might she have?
[list][*]What movies are showing today, at which times?[*]What movies are showing around a [i]particular[/i] time?[*]Where are they showing?[*]What are they about?[*]Are they good?[/list][url=http://worrydream.com/MagicInk/#p123][color=#0000ff]# [/color][/url]The user will use the answers to compare the available movie showings and decide upon one to go see.;I6[z9K-p
[url=http://worrydream.com/MagicInk/#p124][color=#0000ff]# [/color][/url]Although the above graphic clearly has an information deficiency (What are these movies about? Are they good?), the worst problem is that the data is not arranged in any useful manner. Understanding which movies are playing when involves scanning a pageful of theaters, extracting movies of interest and mentally merging their showtimes. A viewer’s eye might leap erratically around the screen as she compares showtimes of a given movie at six theaters, trying to find the one that best fits her dinner plans.
[url=http://worrydream.com/MagicInk/#p125][color=#0000ff]# [/color][/url]The primary question is, “What [i]movies[/i] are showing today, at which [i]times[/i]?” Given the two spatial dimensions available to us, this should suggest a graphic with [i]movies[/i] along one axis and [i]times[/i] along the other.+X!V1lp\W h
[url=http://worrydream.com/MagicInk/#p126][color=#0000ff]# [/color][/url]Consider this redesign:V6~7f.\NOx~4N
[img=804,365]http://worrydream.com/MagicInk/p/movies_redesign.png[/img]
[url=http://worrydream.com/MagicInk/#p127][color=#0000ff]# [/color][/url]As with the bookstore redesign, enough information is given about each movie to determine its content and quality, although films have enough external marketing that the intent is more to [i]remind[/i] than [i]introduce[/i]. Text weight is again employed to make critical information stand out and supplementary information disappear until focused upon.
[url=http://worrydream.com/MagicInk/#p128][color=#0000ff]# [/color][/url]More interesting is the chart on the right, which plots movie showings by time. To find all movie showings around a particular time, the viewer simply scans her eye vertically down the page. If she is only interested in a particular movie, she looks only within that movie’s range. The current time is indicated by shading the past, providing a springboard for the viewer’s eye; in this example, it is about 4:45.
[url=http://worrydream.com/MagicInk/#p129][color=#0000ff]# [/color][/url]The original design grouped movies by theater; this redesign groups theaters by movie.** I assume that Yahoo! simply mimicked the newspapers, and newspapers arrange by theater for business reasons. The assumption is that the viewer would rather see a particular movie at any theater than any movie at a particular theater. However, to ease correlation of the various movies offered at a given theater, each theater is color-coded. If the viewer prefers to avoid the Gulliver Theater because of sticky floors, the consistent yellow background may help her filter out its showtimes.
[url=http://worrydream.com/MagicInk/#p130][color=#0000ff]# [/color][/url]No theater addresses are shown. The viewer is likely to be familiar with the theaters in her area, and if she isn’t, a simple address would be useless without a map or directions. Presumably, a mouse click or hover over a theater’s name would reveal this information, or perhaps it could be displayed elsewhere on the page.
[url=http://worrydream.com/MagicInk/#p131][color=#0000ff]# [/color][/url]This demonstration and the previous one have attempted to illustrate the power of approaching information software as [i]graphic design[/i], instead of as styling the regurgitation of a database. To design excellent software, however, this mindset is necessary but insufficient. Something major is missing.
[url=http://worrydream.com/MagicInk/#p132][color=#0000ff]# [/color][/url]Very little in the above designs is software-specific. For the most part, the designs would work almost as well on [i]paper[/i]. Modern magic shouldn’t merely match our ancient technology—it should surpass it. We’ve seen how graphic design can improve software, but [i]how can software improve graphic design?[/i]&J olN,eH/rky4X
[url=http://worrydream.com/MagicInk/#p133][color=#0000ff]# [/color][/url]The answer lies with [i]context[/i].s5WS8Ez`:Y
[img=435,83]http://worrydream.com/MagicInk/p/logo_context_sensitivity.png[/img]
Context-sensitive

页: [1]

查看完整版本: Magic Ink