Tuesday
Jan202009
Seeing Beyond the McClouds
Tuesday, January 20, 2009 at 11:40PM
The TED talks are great because they give you a fresh perspective. Fresh off the TED video web release schedule is a Scott McCloud video, respected interpreter of the comic idiom.
Scott's books are great, and well worth reading if you're a designer of any form. But there's a seed of an important idea I'd overlooked. I'll use some screenshots of the video…
One limitation of paper is that it breaks the spatial connection between images:
The power of the computer monitor is that it is a virtual window.
However, McCloud argues that adding elements which are time-based, like animation or sound, breaks the time<>space connection:
He suggests instead, is to make better use of the spatial connection and window-ness of the computer display. For example, a comic with parallel plots, could literally be parallel.
He also suggests using the z-axis:
As a note, Steven Pinker's excellent How The Mind Works explains how we have leveraged our mental ability to understand 3D space into understanding time. Evidence is in language like "The deadline caught up with me", "Passing time" and "Look towards the future".
Apples Time Machine interface and the late Jef Raskin's ZUI interface both used the Z dimension as a navigation. I suspect Apple's use of the Z axis to represent time is the best match because of our natural inclination to 'look towards the future' and have 'the past behind us', rather than 'the past beside us'.
McCloud presents some examples of comics that utilize this approach.
And an example of a more dynamic, window-aware comic. A follow-the-arrows type of Choose Your Own Adventure.
But this seems much less readable then the other, much more linear comics, window-approach comics. To me, this would seem a problem of wayfinding*. To better lead the reader through the comic, with better clues and paths, and distant views the entice the reader to move towards one direction or another. This blend of comic, and architecture has the smell of something very exciting when applied to UIs.
What could it be like?
We did this a little in our application "Comic Life", credit goes to Cris Pearson if I recall.
Tooltips that appear when you mouseover and wait on something are also a type of signage.
Growl seems the closest to the visual idea of a PA announcement. It's certainly not widely used yet, and that may be because some usability threshold is yet to be crossed. Audio-wise, I don't know of anything like this.
I guess Help does this job — but perhaps if 'Help centres' were located in appropriate places in the application, they could provide much more context-aware information. For example, if there was a 'Help centre' in an Export window it would be (initially at least) focussed on helping you export a file.
I would sometimes like a Harry Beck-like map to my operating system, or application. I think we probably got into this situation because computer scientists tend to have excellent abilities at keeping mental maps tree-structures and heirachies in their heads. The average person not so.
Image credit:Wikipedia
The computer landscape is pretty barren. It seems anything that's not directly required is thrown out of this clinical place.
Scott's books are great, and well worth reading if you're a designer of any form. But there's a seed of an important idea I'd overlooked. I'll use some screenshots of the video…
One limitation of paper is that it breaks the spatial connection between images:
The power of the computer monitor is that it is a virtual window.
However, McCloud argues that adding elements which are time-based, like animation or sound, breaks the time<>space connection:
He suggests instead, is to make better use of the spatial connection and window-ness of the computer display. For example, a comic with parallel plots, could literally be parallel.
He also suggests using the z-axis:
The Fourth Dimension
As a note, Steven Pinker's excellent How The Mind Works explains how we have leveraged our mental ability to understand 3D space into understanding time. Evidence is in language like "The deadline caught up with me", "Passing time" and "Look towards the future".
Apples Time Machine interface and the late Jef Raskin's ZUI interface both used the Z dimension as a navigation. I suspect Apple's use of the Z axis to represent time is the best match because of our natural inclination to 'look towards the future' and have 'the past behind us', rather than 'the past beside us'.
McCloud presents some examples of comics that utilize this approach.
And an example of a more dynamic, window-aware comic. A follow-the-arrows type of Choose Your Own Adventure.
But this seems much less readable then the other, much more linear comics, window-approach comics. To me, this would seem a problem of wayfinding*. To better lead the reader through the comic, with better clues and paths, and distant views the entice the reader to move towards one direction or another. This blend of comic, and architecture has the smell of something very exciting when applied to UIs.
This is a gentle introduction to how Disney approaches wayfinding. Quote:
Directional signage – labels, ceiling signage, billboards and sandwich boards
Announcements – verbal instructions and guidance
Maps – guide maps and GPS systems
Informational centers – building directories, kiosks, Web sites and phone trees
Layout – layout of pathways, entry ways, exits and landscaping
What could it be like?
Directional Signage
We did this a little in our application "Comic Life", credit goes to Cris Pearson if I recall.
Tooltips that appear when you mouseover and wait on something are also a type of signage.
Announcements
Growl seems the closest to the visual idea of a PA announcement. It's certainly not widely used yet, and that may be because some usability threshold is yet to be crossed. Audio-wise, I don't know of anything like this.
Information Centres
I guess Help does this job — but perhaps if 'Help centres' were located in appropriate places in the application, they could provide much more context-aware information. For example, if there was a 'Help centre' in an Export window it would be (initially at least) focussed on helping you export a file.
Maps
I would sometimes like a Harry Beck-like map to my operating system, or application. I think we probably got into this situation because computer scientists tend to have excellent abilities at keeping mental maps tree-structures and heirachies in their heads. The average person not so.
Image credit:Wikipedia
Layout
The computer landscape is pretty barren. It seems anything that's not directly required is thrown out of this clinical place.
- Any large space, like a file view, should have landmarks. "I put the file next to the pink coconut tree"
- Better paths to lead people though. Literal paths drawn of recommended, and most common travel
- A savannah layout; the human-preferred balance of shelter and space
- What if windows hard edge just soft and blurred, with tantalizing at the edges
- Aren't "folders" simply small "windows" — a view on your stuff in a new way
As always, I'd love to hear what you think. I'm sure there's nothing new here, but am hitting a blank in finding examples.
Reader Comments (5)
Have you read John Siracusa's articles on the Finder at Ars? The spatial metaphor he describes in great detail here take advantage of the same general idea.
Finder's support for custom icons was a way that let you create your own landmarks, and the spatial metaphor lets you place items around those landmarks and has them stay there.
Too bad that doesn't really work that well anymore in the OS X Finder.
That should have been 'takes advantage'.
General signage isn't there, but then, reading text is a conscious effort that distracts from the task at hand, so should be used very sparsely. Also, screen real estate is low, so avoiding unneeded text boxes that only take up space after a user has read them is also a big concern.
Hi Uli!
Love Uli's moose :-) http://www.zathras.de/angelweb/moose.htm
I can't seem to find any article that covers this particularly. Was it this one?
http://arstechnica.com/staff/fatbits.ars/2006/01/26/2673
I agree on Text being used with extreme caution. I most like Culture Code's "Things" app which put explanation text in a handwritten way, which disappears as content is added.
http://skitch.com/keith/bb4a6/things
He didn't write about this particular issue, but in http://arstechnica.com/articles/paedia/finder.ars he describes the general spatial idea, which makes the whole 'landmark' thing possible because it makes window sizes and positions a reliable quantity (http://zathras.de/x2005-05-09.htm). Dunno where I got the association to custom icons from, apart from just having used them that way.
Thanks for the link Uli.
I certainly agree with most of Johns arguments, but the problem to me is it's presented as anecdotal evidence, with little data behind it.
Maybe he can win people over with sheer volume of material :-)