DESIGNER, PROTOTYPER, FOUNDER, STRATEGIST

The UI Stack

Every screen you interact with in a digital product has multiple personalities.

Five, to be exact.

Depending on the context, these personalities are revealed to your customer. In designer-speak, we call these states. And you should consider these states for every screen you make.

That's because following the rules of the UI Stack and the five states helps you create a cohesive interface that’s forgiving, helpful, and human.

Be honest with yourself. When's the last time you created a screen that had only one state? Even if you're creating weather apps (cue Dribbble joke), one state won't cut it.

The reality is that the world in which we live isn’t perfect, and things go wrong. Servers take time to respond. And your customers won’t always use your product the way in which you intended.

So, as a product designer, you’ve got to take these realities into account.

That’s why every screen you’ll design for your product can have up to five states:

-Ideal State

-Empty State

-Error State

-Partial State

-Loading State

As your customer moves through your product's flows, they're also going to move seamlessly between between each state within those flows.

A real-life UI Stack for a messaging app. Each screen transitions seamlessly between each other.

Want to see the UI Stack in action? You can skip there now if you want.

Skip to the UI Stack prototypes

Surprise! It's time for a brief interlude in Internet history. Back in 2004, Basecamp, the company-formerly-known-as-37signals, wrote, for me, a groundbreaking piece entitled "The Three State Solution." (And no, this isn't a plan to end the Israeli-Palestinian conflict). They outlined that every screen should consider three possible states: "regular, blank, and error." This blew my mind. And changed how I thought about design for the web forever.

But things change on the Internet. First, there was the AJAX revolution, second, there came mobile apps. Third came the mass consumerization of technology. Demands and expectations for UIs changed. This is my adaptation of that decade+ idea.

With that noted, let's talk about the Ideal State.

IDEAL STATE

This is the first state I create, since it’s what you want people to see most often. Aptly named, it embodies the zenith of your product’s potential — when your product is providing maximum value and is full of useful, actionable content. It’ll serve as the foundation for every other state you’ll create for this screen. Think of this as the quintessential marketing page or mobile app store screenshot.

Let this state set the tone of each of the other states. Because as you iterate on your core interface, this UI could change completely over time. That’s both the beauty and the risk of iteration.

And this has vast consequences for all of the other states.

All UI states lead to the Ideal State. So start with this first, and let all of the other states fall into place as your designs get closer to solving your customer’s problem.

Still not convinced?  Visit the original post here.