James Kelway on Information Architecture, User Experience, Web and Iterative Design

Previously I introduced a UX framework and wrote about the first element – content.  This post is about visual design, perhaps the most immediately emotive ingredient to user experience. Seeing is believing, and what our eyes see immediately tells us if we either like or dislike what they are receiving. It has a sway on the other 5 elements of the UX framework as it is something that is very tangible and creates instant feeling in a person. As UX designers we need to be aware of the importance of visual design as a doorway to incorporate the other equally important facets in our work. Visual design, like it or not, is still king when it comes to the first few seconds that a user interacts with a product or service.

Saul Bass, the legendary graphic designer and film maker, described design as ‘thinking made visual’. In many ways visual design should communicate the more complex considerations of a solution in an immediately accessible way.Aesthetic usability Think about a website that you like and there will probably be a good deal of visual design that helps you in understanding its content better, what it offers and how easy it is for you to use. Aesthetic usability is a quality that arguably Apple have made very much part of their product offering. Consider their most successful devices, (iMac,iPod and iPhone) and there is an immediate attraction to getting to know the product, even before you really know what it can do. As there is an emotive connection (one of delight or intrigue) it affords the product a level of forgiveness within the user when the product or system fails.

We can also see this in many websites today, the Whale fail of Twitter being a notable one. As the website about the image says:

This image brings a human touch to a moment of frustration…

An attractive design is initially perceived as being easier to use and tends to garner a loyalty and forgiveness in a user group that promotes positive relations between people.

Alignment
An ingredient of aesthetic usability, particularly in web pages or screen based interfaces, alignment is a design principle that is often either overlooked or considered a standard aspect of good design. However it does warrant special consideration especially as its importance is the reason why the grid is such a defacto standard in page design, for both the offline and online worlds. As alignment is the norm, where elements on a page break out it causes visual tension – the exception creates a focus on an element on the page.

This is a good example of a site that uses a grid but, with the use of graphics and juxtaposition, breaks it with visual trickery.Even using a small colour palette it effectively does its job of engaging the user and encourages interaction. The visual design gives dynamism. The content of the site is for the Digital Research Centre in Dublin but the site goes some way in getting you interested way before you start to read the content.

Colour
Despite so many people being colour blind it still has a key role in giving meaning to elements on a screen or in the physical world. Colour, and importantly hue and saturation, have effects on the way interfaces are used and perceived by users. Contrast gives users a guide – the more saturated the hue of a colour – the more important the priority. Similar contrast types are seen as part of the same group or importance. The use of contrast is one of the ingredients of visual design that is not immediately the most noticeable but is certainly one of the most notable to attract attention and produce focus in a user.

The designers of Barack Obama’s website agonized for days over the correct shade of blue that would come to be synonymous with the campaign and eventually the Obama brand.Throughout the site, the use of key colours, for calls to action, are used strategically to either prompt or persuade (the red here used sparingly) or to educate and inform (the muted blue grey in the right hand column). The actual colour palette is limited and correct colour usage should always be used in this way. Too much colour variation produces visual noise and confusion.

Consistency
The site mentioned above also exhibits consistency on a huge and intricate scale. The elements within the design are part of a larger code that communicates a meaning that is consistent across all touch-points. In this case the font was used throughout the campaign from signs to captions to all types of visual communication. It is a great way of maintaining a focus to the message, unmistakably it is from Obama. This way of maintaining the message is used throughout the physical world and is a subtle stamp of quality that underpins many good user experiences.

Golden ratio To enhance the aesthetic quality of an object or interface design the golden ratio is a good principle to explore largely because of its prevalence in nature, art and architecture.Areas where visual appeal have been long established and unquestioned can provide a good basis to explore in designs where other factors are not compromised. There is something simplistic, natural and appealing about design that exhibits the ratio of 0.618 within its form. It is only a little over half way but it is enough to give some balance to the eye, making the design inexplicably interesting.

Highlighting and Legibility
Effective use of typography,font size and style can guide a user when used well or lead to confusion when it doesn’t follow consistency. Presenting a message in a particular way can reinforce the impact of the message. Ensuring it is easy to read, uses the appropriate size and clarity and can only help in getting the message across. In many cases the artful use of typography often does this job brilliantly as it implicitly considers legibility and accessible text as part of its remit. That is obviously when it’s purpose is to convey a message and not make a statement.

Image courtesy of theBudman84

You may not agree with this statement from the Information Architects but you can not deny the power of typography to not only deliver the message with clarity but also with meaning.These are just words but the strength of type, colour, style and size give the statement more depth and authority. When a website or interface has legibility problems it is often reviled instantly. People deserve a basic level of accessibility  and this area is one to pay attention to first when thinking about visual design for improved user experiences.

Modularity The real strength of modular design is an ever-present in web pages and web applications. Smaller services or applications that form a larger, more complex system, have really found their niche in the iPhone and contribute to the success of the product.Highly bespoke and tailored user experiences are achievable by offering the platform that can be adjusted to individual user needs. Personalisation is achievable giving much more engaging experiences and the visual design should accommodate this need.

Occam’s razor
This principle states that the unnecessary abundance of features decrease the effectiveness of the designed solution. When considering feature creep in many mobile phones the lack of this principle can be seen very easily. If two solutions are placed side by side, and both are equal in terms of what they can deliver but one is simple and the other is complex, then the design that exhibits simplicity wins because it is practical.

The Flip video camera is one of the best sellers on Amazon and part of its success is its no frills point-and-shoot capability. All non-essential features have been removed and stripped down to the power button, record, play, delete, zoom, lens, microphone and speaker. The only other feature is a 2 inch screen and USB arm.It is an exercise in concentrating on the absolute necessity of the object to create a product that is relevant to the user and suitable for their context of use. Screen interfaces need to reveal the interface in a manner that is contextually relevant to the user. Intelligently giving the user what they need, when they need it. Tailor-made digital experiences will define future UX work.

Proximity and Similarity
Parts of the Gestalt principles of perception -  proximity is based on the premise that when elements are grouped or clustered together they are considered related to one another and those which are spaced apart are considered unrelated. When this is used well, it has the power to convey meaning in a way that is instant and may override other principles that are present on a page. For this reason the grouping of elements needs to be considered carefully and will often need to work alongside other principles. The Fritz Hansen website groups furniture by type and encourages an interaction with the elements.

This site also uses similarity – the visual look of objects resembling each other which produces a feeling of belonging to one another (even though the furniture has been designed by different designers). Strongest grouping effects are seen with elements that use similar colours and shapes. In this instance the same perspective and use of neutral colours give a feeling of cohesiveness.

Symmetry Simon Page’s illustration captures the attractive qualities of symmetrical forms that are often seen in nature. Symmetrical elements arranged to make a pattern of reflection, transition or rotation is an instantly recognizable way to achieve a great aesthetic quality, and often beauty.Simon Page is a visual designer who manages to have that innate ability to produce stunning visual designs. So much so, I wonder what his work would look like if he designed an interface for a client. Would it be usable? Would it be organized correctly, or communicate in the user’s language? Would it give a great experience? I have a feeling that it would, because of his ability as a visual designer. Visual design is so important because we are easily stimulated and manipulated by visual cues. An awareness of this important theme to a UX framework is essential and if we are calling ourselves UX designers we need to consider this as a part of our toolbox. Next up: behaviour

Tweet

Tags: Design principles, ux, visual deign

This entry was posted on Tuesday, November 10th, 2009 at 11:39 pm and is filed under Design principles, Visual design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. if(function_exists("tweet_button")) { echo tweet_button('jameskelway', 'none'); }