Toon Doctor

Storyboarding Skills for User Interface and Experience Design

I often surprise listeners when explaining my contribution to user interface and experience design. As an animator and storyboard artist, I have an unexpected take on UI and UX design. Few people know that wireframing, mock ups and prototyping come from animation and storyboards. There is more to user interface and experience than design, usability planning, and testing.

Good storyboards display an understanding of user experience design. Think of an illustrated instruction manual on how to assemble a piece of furniture. How readers read the information contained will help them assemble their future table or desk with ease faster. Confusing illustrations and transitions between vignettes in an interface affect information sharing.

Storyboards are comic books. Scholars call this art form sequential art. Sequential art is a form of information architecture. Information architecture is the organization of semantic and environmental information. Storyboards allow the transmission of information through visual means. But storyboards have another important feature. They share knowledge in an easy way. Storyboards are proxies for other media. In film and animation, directors use storyboards to share information with crews, and producers.

Storyboards are storytelling tools. When thinking about it, good user interface and experience design is also about telling a story to end users. Wireframes and prototypes, like storyboards, convince and explain sequences of actions and information flows. Wireframes, and prototypes are proxies for other media. A good user interface tells a story about how the user will navigate and experience an app or a Website. When users navigate through an interface I’ve designed without hurdles, they understand my story!

Storyboards also have parallel conventions and methods of transmitting information through their own interfaces. I share information about sounds, dialogues, actions, and visuals through storyboard conventions. These conventions are like the representation of interface elements in a mock up. I have developed my own multimedia storyboards. They mix elements of cinematographic storyboards and electronic interface for apps and Web projects.

One skill that storyboards have given me with in UI and UX is the ability to draw and sketch. I am not limited by a specific prototyping and wireframing software like Axure or Balsamiq. These apps are tools but their mastery should never be the core skill and value a user interface and experience designer adds.

Software change but having an experience eye to design effective interfaces takes time. Mastery of storyboarding skills gives me the confidence to jump in a new interface project. Storyboarding helps me when brainstorming, anticipating, and refining complex interfaces that improve users’ experiences.

Happy Drawing

Hervé Saint-Louis, PhD Student
Faculty of Information (iSchool)
University of Toronto
May 27, 2014