Designing Nothing
Check out Dribbble on any given day and you’ll see plenty of gorgeous UI concepts, with perfectly placed pixels and impeccable balance. I mean, I know it’s what initially drew me to Dribbble. But over time I started to notice a common thread throughout a lot of the designs I was seeing. As aesthetically pleasing as they were, I noticed that many of them seemed to be highly impractical.
One of the most common criticisms of UI designs on Dribbble is that a lot of them don’t consider real-world usage or actual implementation. Available data, content length, and information density aren’t always as consistent or predictable as we make it seem in Photoshop. A good design will work even when the content isn’t as perfect as planned, while a great design will work when there’s no content at all.
On the product team at 50onRed, we’ve started using what we call “standing pages” or “standing states”. These are basically the state of a page or widget where the data/content that would usually be there isn’t, either because it hasn’t been populated yet, or the because user hasn’t utilized a particular feature. The term came about from the page or widget’s need to “stand” on it’s own, without content.
A good design will work even when the content isn’t as perfect as planned, while a great design will work when there’s no content at all.
Since we’ve implemented standing pages, we’ve seen a noticeable drop in users who are confused or unsure how to proceed through the system. Let’s take a look at a couple examples of how standing pages have improved usability on our Traffic Platform.
Making ‘Create a Campaign’ Easier
On previous iterations of our platform, long before I came aboard, new users were dumped into our UI with no idea of what to do. They hadn’t created their first campaign, yet were met with an empty table and some disabled buttons, left to guess what they needed to do next. Needless to say, this created a lot of confusion among our userbase. So when we began to look at how we could iterate to make things more intuitive, the concept of standing pages came up.
Above is the new experience we designed for creating a user’s first InText campaign. Rather than strand the user in a blank interface, with no cues as to what to do next, we instead introduce a standing page with a brief product overview, as well as provide some helpful support documentation for them to get started. We’ve also made “Start Campaign” the only CTA on the page, further reducing confusion about what to do next. Once they’ve created their first campaign, they’ll see the normal InText UI from then on out. The same pattern applies to our Search and CPV products, as well.
Clarifying Referrals
When we decided to offer a referrals program for new accounts, it was important that our users were 100% clear on what they needed to do to get referral credit. In the design below, if a user hasn’t yet received any credits, we use it as an opportunity to reiterate the process of earning them.
By providing additional direction in the absence of content or data, we’re able to reinforce desired behaviors, and provide the user a chance to perform an action they may have otherwise overlooked, or abandoned altogether.
Nothing Is Important
It’s not enough anymore to just create one state for a UI and let your users figure out the rest. Hell, one of the key principles of usability is keeping the user informed, alleviating confusion. We need to be designing for every variation of every situation a person might experience, whether it’s an empty data table or a missed onboarding step. A little bit of messaging where none existed before can go a long way toward making a UI more intuitive. It’s this bit of thoughtfulness that truly separates the good designs from the great ones.
