Skip to Content

A couple weeks back I spent a little time reviewing the past 4 years of my work as a web designer. In thinking about the things I’ve learned and the practices I’ve developed, I jotted down these 7 rules for building web interfaces. These aren’t rules I’ve followed as I’ve gone along, but rather restrospectively the things I believe are important.

1.) Clearly define visual space.

Hierarchy is very important. The user should never have to question what heading heads which block of content; which content a tab changes; or what button submits which form.

2.) Clearly define functional space.

Overlap in functionality from various points in an interface, while appearing to add convenience, actually tends to blur the lines between different functions and processes. If everything is highlighted, nothing is effectively highlighted.

3.) Conventions are friends; don’t cross them.

It is true that there are various times at which the convention ought to be challenged. Namely, if a convention was developed at a time when technology was less capable or if there are obvious and/or frustrating problems with a convention, then yes, of course, challenge that convention. If there are not problems with it, though, don’t mess with it. Seriously, don’t mess with it. It only frustrates your users and makes you look out-of-touch.

4.) Layouts should always follow natural reading and viewing patterns.

This is just common sense. Put stuff where users will look for it: Don’t put form submit buttons above the form. Don’t put action confirmation buttons before content that needs to be reviewed. Keep important, related information in close proximity.

5.) If there is a simple solution to a problem and a complex solution to a problem; always go with the simple.

Simple is better for your users. By the way, it will probably be harder for you.

6.) No artist sits down and paints perfectly a picture from their imagination. You, Mr. Designer, are no different.

Sketch things out, make mockups, test them, update them, and repeat as many times as necessary. If you are afraid to re-work your interfaces—if you’re afraid to scrap them and start over—then don’t expect to ever make anything excellent.

A little aside: many famous paintings have multiple layers of false-starts and reworkings that the artist deemed necessary after seeing the original image they created. It’s just part of the process.

7.) Use your own app; change what annoys you.

This is also just common sense and it will also help you learn your own weak spots and improve as a designer.

As I have done this, I have learned that I have a tendency to make hit areas too small. Almost all of the apps I have built in the past couple years, I’ve gone back and increased the size of buttons, pagination links, and even site-wide text size. You just got to do it.

That’s all. Anyone have anything to add for the good of the cause? Speak up.