Is Your Website Design CRAP?

So you've designed a website, or had one designed for you ... you've tested it and it functions correctly ... but something is missing - your website isn't CRAP! That's right, your website should be as CRAP as possible!

What is CRAP?

All design, no matter whether it is print or online really should be CRAP. The word CRAP refers to the 4 major principles of design; Contrast, Repetition, Alignment and Position (or proximity).

Each of these principles has an effect on your design, at least to some extent (and never the same extent on two projects). CRAP is an easy to remember word and if you can remember the main points of each principle then CRAP will help guide you into a more attractive design (than if you don't make it CRAP). Now, as with most things on the web CRAP-ness began as offline design principles - however, I believe they are just as valuable online as offline.

Creating Contrast in Design

In design you should always avoid 2 or more things being "similar" - this is to say that (for example) if you have headings and text you should always make the difference clear. This means not making them a similar font size, and as with in the case on this website the same colour. The main point here is that If it isn't the same make it look different a fairly simple idea :)

So how do you create differences?

    Different Font Styles & Font Sizes

    Different Font or Background Colours

    Underline or Border an Object

    Re-Align an Object

    Space Your Objects

So you've got some ideas on how to create contrast on your website, but that isn't enough because I bet your thinking of some real world examples on your own website(s) and need some help with this. So let's take a look at some real world examples of contrast on the web.

Emphasis of Interaction

Now there are many ways to signify emphasis of user primary interaction, or "calls to action" as they are more widely known. However, I want to look at the worlds number 1 online user interaction (at least in my view) .... Google

<

p style="text-align: center;">Google's user interaction design As always Google have kept design to a minimum and user interaction to a maximum. It is clear here what the call to action is... to search! so the buttons stand out clearly and show the user where to click. When you look at a wider view you can see navigation at the top of the screen on both the left and right but this isn't the main interaction and so is all but ignored by most users.

Highlight Your Notices

Contrasting and highlighting can be very important when things go wrong. We've all seen the windows pop-up errors that appear all over the place (even on the high street) but online error messages are vital. If you are filling in a form online, it gets rejected and you can't find out why easily then you will probably stop filling in the form, for website owners this mean's you've lost a conversion!

Below is an example of a simple error message standing out from it's form.

<

p style="text-align: center;">

<

p style="text-align: left;">Notice how the red border of the box makes the error stand out, this is emphasised even more so by a light red background differentiated from the page background this also makes the text and therefore error stand out.

Repetition of Elements

<

p style="text-align: left;">Repetition of design elements throughout your website(s) creates not just continuity but also an air of professionalism - chopping and changing makes for a second rate interface. Put simply by repetition in this case I am simply talking about "being consistent" in how a site looks, feels and how elements function.

<

p style="text-align: left;">Now generally you will have noticed repetition subconsciously relating to brands, with brands the repetition is dictated in style by brand guidelines. Online this can be a little harder to control for any business, however it is not impossible. The best way to ensure consistency is simply to employ someone as the "controller" or "manager" of your website (or group of) - this will ensure a continued style of user interface.

<

p style="text-align: left;">One of the most consistent of online brands is ... once again ... Google. Can you see how the below or consistent in design?

<

p style="text-align: center;">

Aligning your Content

<

p style="text-align: left;">This is one of the more simply explained CRAP attributes of any design. We all know of the 3 major alignments (mainly because we've all used them on Microsoft Office); Left, Centre & Right. The rule of thumb is simple; Always think about alignment, never randomly align. This is to say as with the above continuity you should always follow your own rules for alignment of elements (and this includes text obviously).

<

p style="text-align: left;">Correctly aligned elements can be used to guide the user through a document or web page, just as incorrectly aligned elements can harm the user experience (and make people turn away in many cases). Users naturally will follow a hard line of an element, so if you are left aligned this is where the user will focus (on the left), and the same with the right. The next natural occurrence is that humans will also follow pages from top to bottom in the search for what they are after (generally skimming content), a more natural flow is from top left to bottom right (as with print on an A4 Page).

<

p style="text-align: left;">Now, do a Google Search ... you will see all text is left-aligned, very little content (if any) is otherwise aligned.

Positioning is Key

<

p style="text-align: left;">Proximity of elements, sounds a little like rocket science... but it isn't. Quite simply I am talking about placing related elements close to each other (primarily navigation/controls). Mentally, things that are positioned closer to each other are subconsciously seen as having a stronger relationship that those far apart.  However, being close doesn't always mean related, this can difference is easily shown by a breakdown header or some other break point.

<

p style="text-align: left;">A clear example of this (once again) can be seen on the latest Google SERP update.

<

p style="text-align: center;">

<

p style="text-align: left;">As you can see Google have added a secondary navigation tool bar to the left of the results (primary tool being the search bar). The proximity of this navigation to the results shows these are related items. Also you can see a clear horizontal rule between the top links and bottom, this shows a split in relation. The lower links are secondary tools for a user to use (my guess is they may look nice but aren't often used).

<

p style="text-align: left;">Following the rules of being CRAP will make for a better website & better user experience all around.

<

p style="text-align: left;">So is your website CRAP? Let SEOAndy know via twitter (@andykinsey)

<

p style="text-align: left;">