Designers Should Think Like Theater Directors

One of the biggest problems I have with UI designers today is that they are still designing pages. We tend to design for a static layout and not for what comes before, after and everything in between. Not only are interfaces breaking 2D barriers they are also becoming more and more fluid. So, we have to start thinking like theater stage designers. I know, I’m sorry, just another discipline to study. I like to use this metaphor as a way to explain state-based design thinking. A concept that forever changed how I think about design.

“Like a theater stage, every element in an interactive layout is designed to keep a user’s focus while it changes.”

Follow me for a minute. When choreographing a theater show, designers have to keep track of everything that is happening on stage, not just the main character. How actors and set pieces are placed and move in and around each other are all critical to harnessing the audiences focus. More importantly, the placement and relationship of objects as they move is very intentional, guiding their eye while the narrative changes. 

And this is the key significance. Like a theater stage, every element in an interactive layout is designed to keep a user’s focus while it changes.

In interaction design, I often refer to Staging as state-based thinking. Historically, designers think about a layout as a “page.” Using the term “page” typically infers a print based medium. While I love print, page designs are flat and void of any relationship between the pages that came before or after. We also often ignore the the fact that so much of the web involves dynamicaly changing content within the page itself. However, if we think in terms of states, we can better prepare for an ever changing experience. A state is simply a moment in time set within a larger sequence of events.

So if we are designing our stage to be adaptable to change, let’s discuss some best practices for ensuring good design while guiding the User from one part of the journey to the next.

1) Design More Than One State at a Time
It’s common practice that a good interactive designer understands the importance of a good user experience. Crafting user stories, information architecture and site maps are tools for understanding the entire user flow–or user journey. 

- Design like an Animator

2) Create a Focus at Each State
- Prioritize
- Design Hierarchy

3) Lead the Eye
- Transition content
- Don’t reload everything

5) Design Objects that Follow Us
- Menu and Navigation
- Wayfinding
- Content as Character (iconography, etc.)

For more about how Staging and how state-based design plays a role in interactive animation, check out Animation Principles for Interactive Designers.