CDB Web Design

While pondering one night, I decided to download some key UX points from my mind onto paper (well, Bamboo Paper on the iPad). The points cover digital design for web and touch screen devcies. I’m pretty sure I’ve heard/read these points before but I thought I’d put them in my own words anyway. This is what came out:

Principle categories:

1. Layout and compsition
2. Size and hierarchy
3. Colour and contrast
4. Content consistency
5. Dynamic interaction

A breakdown of each area:

1. Layout and composition:

• Know the intended medium and audience.
• Whitespace is your friend.
• All elements should retain consistent margins/padding where possible.
• Layout should not be repetitive unless the content dictates that it be so (like a list of products).
• Elements of greater importance should be higher/sooner and preferably larger.
• Rows should not have repetitive column structures as the user moves down an interface. Row 1, column 1 should not have direct replication in row 2, column 1 unless the content of row 2 is directly related to the content of row 1.

2. Size and hierarchy:

• Headers should look like headers. They should be substantially larger than body copy and there should be a clear visual hierarchy in header elements.
• H2, H3, H4 headings should be used in proportion to their importance. H1 should only be used once, H2 sparingly, etc, as per the diagram here.
• Regular paragraph text should not stand out more than headers and hyperlinks.
• All elements should fit into a visual hierarchy that will be easy for people to understand. Complexity and disorganisation causes confusion.

3. Colour and contrast:

• Stick to a limited but well balanced colour palette that gives good contrast.
• Text should always be high contrast, normally black/dark grey on white. Black on white is a friend in any situation.
• Imagery should be rich and colourful to give good visual contrast to the simple, informative text content framework that you’ve constructed.
• Links should always look like links, and preferably be blue if the brand colours of the website allow for it. Try to avoid red links, they look negative/preventative even if your brand colours are red.
• Links should have a small, bright icon on their left side to make it simple for users to spot a link. If there’s a list of links keep it limited to preferably three links per list.

4. Content consistency:

• Text and images in close proximity must relate to each other.
• Similar content should look and behave in a similar fashion.
• Set a precedence early on in a user journey for how links should look/behave and stick to those rules.
• Images should be in a consistent style wherever possible, unless the purpose of your project is to produce a product with varied images, such as an online image storage library like iStockPhoto

5. Dynamic interaction:

• Where appropriate, provide movement, animations and transitions to enhance the user experience.
• Take care where interactions are added. Advanced interaction is generally used in the discovery part of a journey like when choosing a product. Anything too fancy should be avoided at key stages of journeys like a checkout or registration form, but facilities like inline form validation benefit from clean, well made transitions.
• Small touches make a big difference. Animation soup should be avoided so that users don’t get too distracted from their task and so that the weight of the page/interface you’re creating doesn’t become too large in code terms.
• Consider differences between touch screens, smartphones and desktop/laptop interactions. If one design caters for all, that’s excellent and rare, so you may have to make two or three versions of a website.