The
Ultimate
Business Machine

Technology, business
and innovation.

And, not least, about
the Mac.

Weblog Archive Cutedge

by: Bernard Teo








Creative Commons License

Copyright © 2003-2012
Bernard Teo
Some Rights Reserved.

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.

... like that shower scene in Psycho ... do look up Computers as Theatre.

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.

I've always felt that, one day, my interest in art, in the lives and works of the painters - Paul Klee, Moholy-Nagy, Monet, Van Gogh - and the film makers - Fassbinder, Ingmar Bergman, Alfred Hitchcock - will find a link with the work I'm doing in information technology. With McCloud's Picture Plane - "the entire history of the visual arts belongs in this space" - I think I've found the key.

Posted at 1:14PM UTC | permalink

Mac@Work
Put your Mac to Work

Sivasothi.com? Now how would you do something like that?

Weblogs. Download and start a weblog of your own.

A Mac Business Toolbox
A survey of the possibilities

A Business Scenario
How we could use Macs in businesses

VPN Enabler for Mavericks

MailServe for Mavericks

DNS Enabler for Mavericks

DNS Agent for Mavericks

WebMon for Mavericks

Luca for Mavericks

Liya for Mountain Lion & Mavericks

Postfix Enabler for Tiger and Panther

Sendmail Enabler for Jaguar

Services running on this server, a Mac Mini running Mac OS X 10.9.2 Mavericks:

  • Apache 2 Web Server
  • Postfix Mail Server
  • Dovecot IMAP Server
  • Fetchmail
  • SpamBayes Spam Filter
  • Procmail
  • BIND DNS Server
  • DNS Agent
  • WebDAV Server
  • VPN Server
  • PHP-based weblog
  • MySQL database
  • PostgreSQL database

all set up using MailServe, WebMon, DNS Enabler, DNS Agent, VPN Enabler, Liya and our SQL installers, all on Mavericks.