In This Issue:

INFORMATION ARCHITECTURE
-  Should AJAX Wireframes be Different?

VISUAL EXPLANATION
-  Visualizing Algebra
-  Animations, Small Multiples and Alex Rodriguez

DEVELOPMENT AND IMPLEMENTATION
-  The World Cup on Mobile Phone

 
INFORMATION ARCHITECTURE

Should AJAX Wireframes be Different?
Posted by Henry Woodbury

Kevin Hale at Particletree has a pair of articles on prototyping and wireframing AJAX applications. These are excellent primers for web designers interested in working with AJAX developers. I learned some CSS details that will help me out. However, I think Hale misses one key point of prototyping and wireframing almost entirely.

That point is risk management. When a design is still under review, when process steps are still being determined, box wireframes and bitmap design comps allow an information architect and designer to develop ideas quickly and revise or even abandon them with minimal pain. At Dynamic Diagrams we prefer to avoid coding designs until we have agreement on all the major elements of the interface. If we can do at least some usability testing with bitmaps, that's even better.

But what of the demands of the interactive AJAX-driven interfaces that Hale describes? One risk-free way to show AJAX interactivity is to present work you've already done, perhaps from your own development library. Once stakeholders agree about the types of interactivity they want, an actual interface can almost always be modeled as a sequence of static wireframes, convertible to static bitmaps: Here are the elements at point x; Here they are at point y. More useful than a working prototype at this stage may be a workflow diagram that shows an entire sequence of steps in one view:

This diagram shows the interaction of different user types with a help ticket, describes when that object changes status (open, under review, closed), and identifies which pages in the process have multiple functions -- crucial information for an AJAX developer to understand.

All this said, there (usually) comes a time when a project advances beyond wireframes and design comps to coding and development. At this point, for the web designers working with AJAX developers, Hale's advice makes a lot of sense.

http://particletree.com/features/a-designers-guide-to-prototyping-ajax/
http://particletree.com/features/ajax-wireframing-approaches/

 
VISUAL EXPLANATION

Visualizing Algebra
Posted by Chris Jackson

My daughters aren't old enough to experience the joys of algebra yet, but when they are I plan to revisit Oliver Steele's blog for some inspired thinking on how to explain algebra visually. Steele's post Visualizing Basic Algebra begins with line drawings representing the associative property for addition:

and the commutative property for addition:

He then illustrates the commutative, distributive, and associative properties for multiplication using squares and cubes. These illustrations could be recreated on a kitchen table with building blocks; they're tactile (unlike algebra). By making the conceptual visual, they provide that "Yes, I see it now!" moment.

Steele's post continues by showing visualizations for some more complex algebra concepts: the Product of Alternates, Triangle Numbers, and this one for the Difference of Squares, which states that the difference between perfect squares always is odd:

Steele's visualizations result from his asking the question, "What would a proof that stayed grounded in visuospatial concepts look like?" In a few years, when one of my daughters grapples with her first algebra problem, I plan to ask her, "What might the problem look like?"

http://osteele.com/archives/2004/12/visualizing-basic-algebra

 
Animations, Small Multiples and Alex Rodriguez
Posted by Henry Woodbury

Baseball fans may be interested in this analysis of Alex Rodriguez's current power dropoff.

Visual explanation fans may be interested in swing instructor Jeff Albert's use of video clips (in the form of animated gifs) and small multiples to support his analysis. The video clip discussion, focused on subtle differences in hip rotation, is fairly technical. More interesting, visually, is Albert's use of spray charts as small multiples. A spray chart is a scale diagram of a ballpark with a player's hitting denoted by location and outcome (g for groundout, f for flyout, s for single, h for home run, etc.). Presenting spray charts from 2002 to 2006 (2004-2006 reproduced below), Albert shows that Rodriguez's home run sprays look different when he is hitting better.

http://baseballanalysts.com/archives/2006/08/the_shifting_sw.php

 
DEVELOPMENT AND IMPLEMENTATION

The World Cup on Mobile Phone
Posted by Henry Woodbury

It's like the early days of Web design, but more so. Design Interact describes how Yahoo planned and delivered its mobile device site for the 2006 World Cup. The goal was to make a site that could work on as many browser-enabled phones as possible. The problem was the baffling idiosyncrasies of those devices:

"The Web browsers on phones vary from basic to super basic," explains Keith Saft, senior interaction designer at Yahoo! Mobile. "They also have these eccentric bits of HTML and CSS that they don't support, and there aren't really any standards or consistency across phones."

With production also came usability testing. And here, surprisingly enough, the team did not try to achieve perfect layout and content consistency on every phone. Instead, it wanted to make sure that users understood something it called "design intent."

http://www.designinteract.com/features/yahoofifa/

 
BUSINESS

Reverse-Engineering Utopia
Posted by Lisa Agustin

It's time to catch up on summer reading. The Knowledge@Wharton site offers an excerpt from Idealized Design: How to Solve Tomorrow's Crisis...Today, in which authors Russell L. Ackoff, Jason Magidson, and Herbert J. Addison propose what seems to be a simple idea: "the way to get the best outcome is to imagine what the ideal solution would be and then work backward to where you are today." According to the authors, this "ensures that you do not erect imaginary obstacles before you even know what the ideal is."

The book is based on the collective experiences of the authors. Ackoff's seminal experience began on a side trip he took in 1951 to visit an acquaintance at Bell Labs. While there, he inadvertently became part of an all-hands meeting called to innovate the telephone communications system -- a system that had not introduced a revolutionary contribution since 1900.

Tasked with improving the system as a whole rather than its individual parts, the six sub-system teams were instructed to design whatever integrated system they wanted, subject to only two constraints: technological feasibility and operational viability.

Interestingly, Ackoff noted that after his involvement ended and these design teams continued their work:

They anticipated every change in the telephone system, except two, that has appeared since then. Among these are touch-tone phones, consumer ownership of phones, call waiting, call forwarding, voice mail, caller ID, conference calls, speaker phones, speed dialing of numbers in memory, and mobile phones. They did not anticipate photography by the phone or an Internet connection.

http://knowledge.wharton.upenn.edu/article.cfm?articleid=1540

- - - - - - - - - - - - - - - - - - - -

For more information about Dynamic Diagrams and our services, please visit our web site at http://www.dynamicdiagrams.com or email us at info@dynamicdiagrams.com. If you are not currently a subscriber to this newsletter, you can subscribe at http://dd.dynamicdiagrams.com/wp-register.php.

To unsubscribe from this newsletter, please email news@dynamicdiagrams.com with the word "unsubscribe" in the Subject line.

Dynamic Diagrams, Inc.
146 Clifford Street
Providence RI 02903
Tel: 401.223.1233
Fax: 401.223.1234
http://www.dynamicdiagrams.com