May 14, 2010
Content design guidelines
We don’t do designs ourselves, we receive them from our clients or partners. Because of this we work with a lot of different designers, all with their own habits which is cool, but after working like this for a few months we realized that we had to streamline this process. Since a couple of weeks we have started to ask every designer that works with us to take the following guidelines.
Three states
Designing with three different content states in mind is crucial for every website or application. Before we started using this guidelines we often found ourselves asking the client or designer how it should look without content or when an error occurs. Since every project is different, three states might be not enough but it’s the least you can have.
Regular state
Most designers only work in this state, they design the website filled with content. But sometimes they forget things in the regular state as well. As as designer you should always keep an eye on the following things:
What if the content block you designed for 5 elements gets filled with 10 elements?
Try to imagine every possible situation, mock things up with lots of data and when it’s almost empty. When designing a pagination, again the same applies: what if there are lots of pages?
What do we need to show when this form is posted successfully?
Showing the form again with a message on the top makes no sense, whenever you have interactive elements think about their different states.
What replaces the signup button and the login form when the user is logged in?
When dealing with user accounts, you need at least four states. Make sure you design the ‘You are not allowed to see this page’-page as well.
Error state
When we develop a form we start with setting up our input validation which throws errors bound to the fields. So while making a form we end op with throwing errors from the first minute. We need a place to display those errors. Make sure the errors are very visible – for example in red – for the users, otherwise they will get frustrated.
User-generated errors are not the only concern though, take care of applications errors as well. For example when the database server is down, we want to show the user a nicely designed page to tell our users we’re on it.
Blank state
Another much overlooked state is the blank state. It can take a while for a site to get filled with content, especially when it has user-generated content. Also when a person signs up for a web application, he gets to see an empty service. At this point a well designed blank state can encourage a new user to start using the website and clearly point out where and how to start. In the book Getting Real by 37signals there’s a whole chapter dedicated to blank states.
Element based
Most web designers design in pages: they start with the homepage, than make a content page and so on. But that’s wrong, by doing so they will focus on fitting the content in the page. That might work for a website with fixed pages and content but what if you need to add a new page? Starting by designing the interface elements and the spacing between those elements brings you a lot further. When a new page needs to be created we don’t need to bother the designer again, we just put the elements together and most of the time it just works out. Especially when your front-end developer is taking over this element based system.
Interaction map
Designing a website is one thing, but designing the interaction of it is as least as important. For example, having different states of buttons (hover, active, …) improves the feel of a website tremendously. To make sure we – the developers – get the interaction right, it might be a good idea to make a short description on any specials you have in mind. Because when we get in a nicely designed website we still have no clue how it should work, so adding an ‘interaction map’ can be a huge timesaver.
