Think about states

Website it’s not a picture. Website is a application with rich interaction. Each element of site has a lot of states. But sometimes we forget about it. It’s bad for us, for client and for users of course.

For example: I took little feature — “Like” button. It’s popular feature and you can see it on a many sites in internet. How it’s work? If you like some post on site, you can click on “Like” button of this post. So, you added vote on this post, but you read this post and understand — “This post is not cool”. After that, you take off your vote back. Sad story…

Ok, what we have? I see two state: “Not voted” — basic state, when user didn’t voted on post, “Voted” — when user voted. It’s two general states for this feature. But that is not all…

When I was watching on this component on website I thinking about all states of this “Like” button.

CSS states

Button is HTML element and we know each element in DOM has five CSS states (CSS Pseudo-classes). I talk about:

• :active — selects the link while it is being activated
• :hover — when the mouse cursor rolls over a link, that link is in it’s hover state and this will select it.
• :focus — defining hover styles for links is great, but it doesn’t help out those who used keyboard navigation to get to the link
• :visited — selects links that have already been visited by the current browser.
• :disabled — selects inputs that have the disabled attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector.

I think current situation doesn’t require “visited” CSS state. So, we have two general states and each general state have four CSS states. Hmm… In total we have ten states for the “Like” button.

Ok, I take in my hands “Sketch” and try creating all states.

Well, I made this. You can see all states on picture above. Each state of component has another view. Ok, but…

Interaction

At the beginning of the article I wrote about interaction. What I mean. Button it’s only view, but when you click on button and magic happens. Wow. Under the hood we have a mechanism for changing and saving of current state. When you click on button a browser sends a request on the server. Server is processing request and a sends response on client (browser).

When request was starting we must switch state to in “Loading”, because we don’t know how many time needed to completed this request. But user must know his request is processing. Ok, plus two states yet…

Any request will be finished. But how, it’s another question. Have two ways: request successfully completed and request failed. If request successfully completed then button will be change the general state for self. For example from “Voted” to “Not voted”. But sometimes on the server something went wrong and request will end with error. In this situation we need to notify user about this problem. So, we have additional state “Fail”.

You can do this or not, it your chose. But user must know what happening. No matter how you show it. Sometime you can get different errors and for each error you can have different solve. It’s normal.

I attach picture above with all states of component like style guide for action.

Ability of access

Also, we forget about ability of access to concrete feature. For example if guest will watching post, he/she can’t vote and we must show for guest only count of “likes” without any action or another way (like opening popup window with login form, it’s good practice) it’s no matter. Has matter only that it’s another state of component for guest.

Outcome

I described small example, but this easy feature has a lot of states. In real world, you have a web application with rich interface and features. Often designers and developers forget about it, and quality of product is down.

If you making a design, you must remember about all states of components. It’s making life is easy for developers.

So, my main goal in this article it’s remind you about wealth of states on website. Don’t forget about it…