A UX design framework to address contextual needs

Photo courtesy of Brandon Shigeta
User flow (user pathways) have become so important to the experience of a site that they go beyond standard best practices.

Their difficulty to architect for, gives rise to the post’s purpose – to form the basis of a contextually based design framework that can be used in UX design problems.

This framework defines the work we do as user experience professionals and the effectiveness of the designs we produce.

Patterns and principles
Design patterns are certainly a start point for an effective design but without an appreciation of context and user behaviour we have a danger of building solutions that are prescribed without an eye on the optimal and most creative solutions.

Design principles have been established for many years, even centuries, and are born through many other disciplines. Notably psychology, fine art, product design and sociology.

Their more abstract application takes away the prescriptive element that patterns can sometimes take. This also becomes more important when you think about the context of UX design in interfaces other than those online. If we think patterns came from common use – look deeper and you realize the successful ones are soundly based upon solid design principles.

The following design principles have been taken from the excellent book Universal Principles of Design. A heavy-weight read which took me a while to digest, not least because of the diverse examples, footnotes and references made throughout.

As a starting point, I am really interested in how you can apply (some of these ancient) principles to modern day design. Here I grouped them and have illustrated some occurrences on the web.

Each principle is worth talking about in the context of user experience design. These foundations are even more relevant in the field of UX, as the design challenges we face are becoming more complex.

I have grouped the design principles into areas that are core to delivering good user experiences. Note the word user here denotes somebody using an interface.

The areas are divided into;


Content is the starting point. A natural place to begin because without it the experience has no basis to go from. Here are six principles that are critically important in the design of user experiences.

The 80/20 rule is a principle we need to always have in mind . For instance on this site 20% of the content is accessed by 80% of the traffic. I have also categorized 100,000 articles using software, where 80*% of the content sat within only 20% of the categories (people wrote for popularity in that case). But be aware of that remaining 20% because they could be the key decision maker in a deal for your business. Create optimised pages with content that ensures visibility between content types and categories. As the principle holds true, cater for it in your content strategy.

Content needs to be broken down into digestible elements. The brain can not take too much information. Headers and formatting can help here and conveying the meaning through a logical progression or flow down a page is essential to achieve a good information design. People need to digest content differently on screen. Font size needs to be large enough to be read and clear enough to communicate to those with visual impairments. Effective chunking allows quicker task completion times. The step system in a sign up is a great example of this.

Depth of processing
This leads nicely on to the depth of processing rule. Cascade the most important elements down the page as people are more receptive at the top. Get the core message over quickly and develop this down the page. Use diagrams to highlight and reinforce points and keep user focus by drawing attention to these areas using visual design techniques. Use of contrast, colour and textual emphasis will help here. Context is the prime focus here and avoid generic elements in the sections relating to why th euser came to this area in the first place.

chunking-sm This page from the Guardian newspaper website shows good use of chunking and depth of processing. The image and font size breaks up the weight of text in the article and the use of white space allows the eye to scan quickly down the page.

The most important elements are brought out – the headline, author, date and use of bullets to describe the key takeaways from the story. The body of the story appears further down the page below the image. The column also allows a segregation from the story content and related content and tools or features.

Five hat racks
The five hat racks is a technique used to help order information quickly. This is an effective principle when deciding how to order elements. It refers to the ability to order all information according to alphabetical standing, time, location, continuum (lowest to highest for example) and categories (how an object relates to another). Of course many jobs require a more involved organisation type but it always helps to have a start point when faced with a large challenge.

The organisation of information that is immediately understandable from a user by placing elements that have a direct correlation to each other conveyed in a visible way. Consider how complex systems like software rely on menus that cascade out, allowing a user to see relationships between controls and how they interact with each other. Hierarchy is a major factor of how people understand systems, controls and relationships.

hierarchy There is something about the cascading menu that is imprinted into every user of a pc, be it Mac or Windows.

The design pattern is so established that for certain sites with vast taxonomies it is the only option to convey the breadth of content and allow a user to explore the inventory in an intuitive way.

Amazon is a great example of this and if you remember the tabs debacle you can see why they chose a safe option that works in a way that stays true to the trinity of  tried, tested and trusted.

However this approach may change with the advent of improved user interfaces and touch technology.

Complex information requires the simplest form of presentation possible. This is transferred down to the language used and is often overlooked when designs of systems are built. Sentence length, word commanality, word length, syllable amount all contribute to if the information is easy to absorb or encounters unnecessary hurdles. Although there is a readability graph that allows a reading age to be calculated from any text, aim to use language that is concise and has clarity when conveying complex instructions, product descriptions or theories. Action buttons and navigation items are easy enough but imagine the challenge of explaining how a search tool works to somebody who has never used the internet.

Next its visual design

Tags: , ,

Comments are closed.