Mon 14 Nov 2005
Comics & The Art of User Interface Design
Category : Commentary/comics.txt
You can find inspiration in the unlikeliest places. I discovered "Understanding Comics - The Invisible Art" by Scott McCloud, while reading Daniel ("Free Agent Nation") Pink's book "A Whole New Mind".
Scott McCloud shows how comics work by deconstructing the medium into its constituent parts, most of which work invisibly in telling a story. For example, there's this concept called "closure", whereby the reader is able to predict what is going to happen, or realised what had happened, simply because we all have a shared understanding of how things work in life.
The artist exploits closure to eliminate things that need not be said, to control the pace of the story, which in turn, controls tension or heightens the drama of the story telling. The story, in fact, happens between the panels of the comic strip, and the reader becomes the co-author of the story by exercising his imagination.
Look at how this works in the Mac's Finder interface. The icons for files, folders and the trash can are metaphors for how things work on a physical desktop. Rolling that thing we call a mouse, our imagination allows us to slip into the metaphor and explore that environment. Closure allows us to predict what will happen when we pick up a file and place it in the trash.
Scott McCloud shows how the pace of a story quickens when the drawings are made less representational and more iconic (i.e., more cartoonish"). He uses the following framework to describe how our mind moves from what is perceived by the eye to its representation as meaning and ideas inside our brains :
Comics work their magic in that area across The Language Border along The Representational Edge, where words and iconic pictures combine to tell a story in the quickest and most economical way.
If you think about it, there's where user interface design occurs, too. We, as information systems designers and consultants, need to understand how to use metaphors and words and icons in combination to shortcut the trip from representation to ideas so that a user can learn to use a system in the shortest possible time and with the least amount of user-interface clutter. We have a lot we can learn from comics.
First, like comic book artists, we need to start with a purpose. We need to decide what the big idea is, i.e., what we want to convey.
These form the contents and we need to decide, next, how we want to present that. That's form. That's the interface design.
Third, we need to understand the idiom, the vocabulary of styles, gestures and other constructs that, for a Cocoa programmer, say, would include things like switches, panels, pop-up menus and radio buttons.
Fourth is structure. We we need to put it all together, deciding "what to include, what to leave out, how to arrange, how to compose the work". That's what we do when we work in Interface Builder.
Fifth is craft - "constructing the work, applying skills, practical knowledge, invention, problem solving, getting the job done" - e.g., what we do in Xcode.
Finally, the surface. Production values, finishing what the user sees.
All art - painting, writing, theatre, film, sculpture or any other art form including user interface design - follow this path, from idea and form to craft and surface. But everything starts from having a clear purpose.