Design consistency

Home / Web design / Design consistency

In general, design consistency its about avoiding the user having to think at all times how to do what he wants to, and for that purpose the best way its to make things appear always in the same way, so once learned how the site works, learned forever.

Consistency with other websites

This is one of usability foundations, if your niche websites place a triangle shaped button where it says “Go to checkout” and you decide that this button will be a square and say “Order”, possibly the user will lose a couple of seconds looking for the triangle button he is accustomed to. If users have become accustomed to something through other websites of your niche, copy those “standards” and make life easier for the user. Example: The RSS or share icon in blogs.

Color consistency

Colors provide information about relevance, message type, added options, etc. To avoid confusing users its very important you make sure your site always uses the same color guideline, but also, it really helps a lot to evade our site to look like a rainbow: choose one or two colors and make the design from them on. A color in different tones can give you lots of flexibility, so, usually with 2 colors including black and white you’ll have enough.

Buttons or links consistency

If you decide that normal buttons will be blue and important ones (delete, save, buy) will be orange, make sure to always fulfill this scheme and do not use too many colors or shapes. Following the W3C standards, links should be blue and underlined to be more easily identified.

Typography consistency

Simple, if you use Arial, use Arial, not seven different fonts deppending on the text block or the page where I am. Except with very specific titles or sections, the same font should prevail throughout the site, otherwise it may give the impression that there is no order or coordination between the different authors or departments.

Structure consistency

Surely each section on your site will have its needs, but try to maintain some structure: header, footer, logo, sidebar, contact box, save button, … are things that should remain unchanged over the web although the content is completely different. For example: a product listing its quite different than a product description with its photo and features, but both must have the same header, logo, sidebar and footer.

One more thing: if the save button is normally on the lower right make sure you always place it on there, and don’t do like Microsoft, who change its position on each web so that they can have fun playing their special game “searching the save button“, sure they love it, but don’t risk thinking your users will also.

New releases consistency

I know I am asking the impossible, but if your company gets a new designer with new ideas and seeks to change the design, he should take into account what’s written above, which if you think about it, it’s against innovation. Consistency says: monotony. Innovation says: let’s be ground-breaking. User asks for monotony.

If you really have to change the design from top to bottom, you still can do it in phases. First by changing colors, so the user gets used to the new color information. Then structure, maintaining the position of the most important features (save, buy, …) and finally those last features, so that the user doesn’t get lost and does not have to relearn what he had learned before (older people will thank you).

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *