9 Golden Rules that Every Web Designer Must Follow

1. Strive for consistency

The first rule is to not confuse your users. They are the most important part in your process. You should try to keep your call to actions and words similar from one page to the next. Users don’t have to wonder if some words, actions or situations mean what they should mean.

In simple words, you should use the elements across your application consistently. This goes for typography, typeface choices, images, textures, colors, icons, and buttons.

To give you an example of a website that has figured out how to have a consistent design, check out Geckoboard.

• First, the most prominent element of the website: the green! Beautifully and consistently used from the logo to the headers to the links to the buttons.
• The typography is perfectly aligned.
• The icons and illustration all seem to come from the same family, creating harmony.
• The animations are all consistent.

2. Cater to universal usability

As a designer, you need to know the needs of your users. Having them in mind, you will be able to design for plasticity, facilitating the transformation of content. If you do this, you will be able to further add features in two directions. You can add features for experts, such as shortcuts, function keys, macro facilities, hidden commands. And you can add extra features like explanations for novices. Basically, the interface design can be enriched and the system quality improved.

Keep in mind that the user’s desires to reduce the number of interactions will increase only if the frequency of use will increase.

To give you an example, me and my team have been using Quip since it launched and we were able to see how it evolved gradually and according to the needs of the users. Right now, there are a lot of functions that come naturally to use for us. And a new user can learn them by checking their explanation:

3. Offer informative feedback

You should tell the users what’s going on and not keep them guessing. Every user should be informed by the system about what’s happening. The less the users have to guess the better. And this can be done by giving them feedback in a reasonable time. For frequent and minor actions, the response can be modest while for infrequent and major actions, the response should be more substantial.

One great example of this is the way MailChimp interacts with its users while inside the platform. Their monkey says congrats for example when you have successfully sent a campaign.

4. Design dialogs to yield closure

In order for the users to not get confused, the system should speak more on their terms and less with special system terms. Sequences of actions should be organized into groups with a beginning, middle, and end. If you give informative feedback when a group of action is completed, this will make your users feel motivated and relieved because they accomplished something. And this way, they will prepare for the next group of actions.

To give an example of this, you can see the way AirBnb directs the action of adding a listing. At any moment, you know how many steps you have completed, how many details you have to give until you are able to publish and why you are giving that information. In general, wizards are great at doing this in web design.

5. Error prevention

For sure, you have also walked in the shoes of a user somewhere and you hate errors. Even worse, you don’t like to think that you have done something wrong. Having this in mind, you should try as hard as possible to design your system in a way that the user cannot make a serious mistake. And, if an error occurs, the system must be able to fast detect it and offer a simple solution for dealing with it.

One of the simple example for this is your 404 page. If your users wander off to an invalid link on your website, you should offer them a nice page to let them know this; and also offer them the possibility to do something else (like going to the home page or searching). Tumblr has a nice example of a 404 page.

6. Permit easy reversal of actions

This is a single and simple action and it refers to the undo and redo functionality. And as much as possible all the actions should be reversible. Knowing that errors can be undone encourages users to explore unfamiliar options. It also makes the users feel less anxious about anything that may happen.

Dropbox, for example, let’s you undo the delete action. In case you accidentally deleted a file, you can easily get it back.

7. Support internal locus of control

Experienced users desire to feel that they are in full control of the system and that the interface responds to their actions. They don’t like to be surprised with changes in familiar behavior or feel as though they are unable to reach their desired result. So you should design the system in a way that makes the users feel like they are the initiators of actions and not the responders.

A great example of a site that does this really well is InvisionApp. All the actions that you can take inside the platform feel like your own options. You can control the images and the way the tie to each other or where you leave and respond to feedback.

8. Reduce short-term memory load

The fact that humans have a limited capacity for processing information requires a simple interface. You should avoid displays in which the users must remember some information from one screen and use it on another screen. Multiple page displays should be consolidated, window-motion frequency should be reduced, and sufficient training time should be allotted for sequences of actions.

A negative example that comes to mind is MailChimp. At some point, they verify if the data associated with your account is still real. You get prompted with a screen showing data you have previously inserted, like your name, email and telephone. After clicking ok, you see a screen in which you need to insert a phone number that they sent to your number. By this time, I had already forgotten the number I have for my account and didn’t know if I will receive a text or not; nor how to get back. A simple notice stating the number on which the text was sent would have solved the short-term memory problem.

A better example can be found in the Google 2-Step Verification:

9. Help and documentation

If you think that it’s better if the interface is used without documentation, you should think twice. You should provide help and documentation to your user. This way it will be easier to search something and to focus the attention of your users on some precise steps.

Take Uber for example. The application is extremely easy to use, but you may still come up with a question. They make finding the answer very easy: