We have now come to the final plane of Jesse James Garrett’s The Elements of User Experience. So far we have looked at:
- The Strategy Plane – balancing the objectives of the site with the user needs – The Strategy Underpinning a Website
- The Scope Plane – functional and content requirements – Understanding Your Website Potential
- The Structure Plane – interaction design and information architecture – Information Architecture – Solving Your Website Content Puzzle
- The Skeleton Plane – Interface, navigation, and information design – Sitemaps, Wireframes, and the Marketing Funnel
Lastly, we cover the Surface Plane – the sensory design. Besides ensuring each plane begins with the letter S, Garrett points out that design can cover, the way we arrange and present the skeleton can appeal to multiple senses. This is true depending on the product. For our purposes though, we are really concerned with visual design.
Design needs to be thought of in terms of what looks good vs what works well. It is of no benefit to any benefit to having the best looking website if users can not find the information or products they are looking for in the shortest path possible. Therefore the design needs to support the strategy. The design needs also to convey the identity of the business, which is also a strategic goal.
Human eyes crave direction and stimuli, and Garrett identifies a number of techniques we can use to attract and direct attention. The first is contrast and uniformity. Contrast is effective in focussing attention on areas of the site we want to lead them and how we can group elements together that belong together. For example, the navigation bar of a website is often a bolder colour than the main body of the site. Call to action buttons and feature content areas are designed to stand out and take the eye in a desirable direction. Uniformity ensures consistency and reduces visual confusion over what is being communicated. Consistency in design elements that communicate brand identity should be applied to every single element or groups of elements.
A large part of conveying contrast and consistency as well as brand identity is in the use of colour and typography. We have looked at these elements in an earlier post about Thinking Design. Colours and fonts can communicate messages to the associations we have developed in our brains, however when including brand identity into the consideration, we are restricted by the colours and typography that suit the brand. Ideally, these will have been to some extent setup in a brand style guide. If not, there is the opportunity to develop one to ensure the consistency is served across all digital media. Again, ideally, a brand will have contrasting colour opportunities and the typography will lend itself for clarity and consistency. The typography also will require a clear and easily legible font for body content. Fonts also require contrast to set headings and call to actions from general content.
That brings our journey from the strategy through to the surface. We can see how a change in any plane needs to be carried through later planes and checked against earlier planes for compliance. If a change does not benefit strategy, and the strategy is not altered, is it worth doing? What is the evidence? This makes The Elements of User Experience an extremely sturdy framework for any product or design project, and it certainly proves its value in website design and development.
