Considering the 5 States of Web Design

I came across an article by Scott Hurff that highlighted a few different ways to think about process when it comes to designing a website, and I wanted to reiterate the 5 states of site design he expanded upon.

What is a website “state”? Good question! Think of your website as a human being, starting from tiny baby with infinite potential, to a fully functioning adult. Likewise, a website may start off as a blank slate ready to be filled with content, and through the awkward adolescent stage, will eventually reach max potential once it’s been populated with good thoughts and interests.

As a web designer, it’s not probable to imagine your pixel perfect sketch file as fully functioning, and perfectly rendered in the browser at all times, so it’s important to plan for every state your website is likely to experience.

Ideal State

The Ideal state is typically what is designed first. In a perfect world, the ideal state is a designer’s dream; every web component loads perfectly in the browser, and information populates the interface in the way that most benefits the design. And hey, let’s even say that this is the way your site appears to users a majority of the time. Sweet! The ideal state is also what you will base the other 4 states of your site off of.

Empty State

The empty state is probably what your new user will see upon signing up for your product, so it’s important here to put your best foot forward. You have to keep your new customer interested in your platform, and better yet, guide them on how to get started. Evernote has a nice example of this since it is a service that offers different ways to organize a variety of files and information, they have quick tips on how to get started right away.

Error State

Ah yes, the classic 404 page. This is the mean, scary page you will dead-end into if your enter in the wrong URL into your browser, or if a site page has been deleted. Not that it’s necessary to design for this, because there already is a default, but it does tie your site together nicely. It also presents the opportunity for you to navigate your visitors back to safety (i.e. – the actual site).

Partial State

The partial state is the awkward adolescent stage of an interface where it’s only sparsely populated and there is a bit more empty space than is desirable. It is now your job to guide the user towards the ideal state. Linkedin comes to mind when thinking about being motivated to fill out profile information for maximum networking opportunity. In the shot below, you can see how Linkedin uses a little meter on the right-hand side to let you know how full the user’s profile is looking.

Loading State

Loading states are often overlooked but actually quite important. There is an awkward feeling that creeps in when you click on a button or select a movie to play and nothing happens on your screen to indicate that your request is being processed. It’s important to let your user know that yes, things are happening/loading/etc., to hinder frustration and to enhance the overall user experience.

Again, I suggest you take a look at Scott Hurff article here, as he expands upon this a bit more than my generalizations above. Adding this way of thinking to my design process has really helped in navigating away from any unfriendly design states where a user is left to guess how to interact with a platform, and definitely helps in improving overall user experience. If you happen to try it out, tweet @toriamia and let me know! I would love to hear about how you integrate this way of thinking into your design process.

×

Subscribe to Our Newsletter

If you made it this far, you should sign up for our monthly newsletter. Get our latest articles and insights delivered each month.

First Name*

Last Name*

Email*