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

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
• visual design
• behaviour
• interaction
• persuasion
• usability

Content

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.

80/20
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.

Chunking
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.

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.

Hierarchy
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.

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.

Readability
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

With a title like that you would think you were in for some pretty arduous reading. But this book achieves a solid, broad and well researched overview of the key design principles. When I review a book I like to see what others say about it. The criticism this book receives, is focused on the layout (typography and quality of illustrations) and the focus it has on US case stories. However, the core of the book is the text, and it is a well written enormously ambitious work that cites key influencers of design thinking. It crosses the boundaries between design disciplines with ease. It is essential reading if you are a designer, in education or work with those involved in design.

The book is worth the investment because of its breadth of coverage. It also serves as a reminder to why things work the way they do, how we perceive colour, layout and elements of persuasion. To those involved in UX this book is really important because it does not focus on one medium – but several. We need that ability as UX designers to be flexible and adapt to each design challenge. Practical application of our craft is founded in these principles, not being aware of them only sets us up for bigger falls in the future.

Verdict: This book was first published six years ago but it still feels fresh. The design principles are as valid now as they were then and you feel that they are a timeless benchmark to which design work must stand against. This book is an excellent source of reference and inspiration.

Picture courtesy of Pete Karl II

Scott Thomas (@simplescott) opened the event with a keynote that was fascinating and not just because it was about Barack Obama’s presidential campaign. He gave us the insight into the hard hours the team  put into the site and all the elements of the campaign to create a cohesive communication to the American public. What stood out was the multi-disciplinary team behind it and the iterative design process that created such an effective site (he  has a book about the work that you can pre-order here)

Highlights

The conference itself had an interesting mix of speakers. Jason Hobbs shared a thorough case story about Enterprise UX that had some brilliant takeaways about how he distills UX principles to guide the design process. I really like the process of doing this and he took the findings of business analysis from a spreadsheet and card sorted those findings into themes and groups. From this he could extract 12 statements that clarified important strategic aims of the project.

The UX principle process from Jason Hobbs

Leisa Reichelt showed a way of using video to show a group of designers and developers real user testing. Rather than tell the designers she set up a collaborative environment where she showed the user testing in action. This negated many of the pitfalls of the client interpreting data and I can see this as a great way to move towards transparency.

Cennydd Bowles’ talk on Wayfinding was a fast paced, interesting ride through the many elements of this increasingly important area. What I really liked was his concentration throughout on the physical world and his references to Adam Greenfield’s and Timo Arnall’s work. The realisation that we need as a group of UX professionals to see beyond screen based interfaces was captured by the speaker here.

There was also an amusing moment when a member of the audience disliked the use of the word findability, stating she could not see how a jug of water could become findable. To which Cennydd replied: ‘it could if it had wheels’. So not just beyond structure here, but more importantly beyond the screen itself.

Passion, commitment and focus on the future

The presence of so many cultures, and varied talks made for a surprisingly vibrant and enlightening event. This is the EuroIA’s real strength and perhaps why I feel it has a greater meaning in the global sphere. There are few other groups in UX who have such a mix of backgrounds, experience and cultural references to call upon. You can join the community here.

Eric Reiss made clear the site is in development as is the group itself, having recently gained formal legal status as a not for profit organisation. To have such a group formed, that as a UX professional you can call upon, is a great thing for any European working in this field.

What really made the conference a success for me were the people and the enthusiasm they showed (many had paid their own way to attend). This passion was evident all around, and I met a group a people who were highly experienced, knowledgeable and eager to move their discipline on into the future. This progressive feel was even more evident talking to those in corridors or over a drink after the sessions. Not unlike the Miami summit last year, I seem to gain my most important insights from talking with people about how they work and their real experiences. I’m looking forward to next year in Paris.

I am re-posting this in the hope that I can start a bit of a conversation. Unfortunately the combination of my bad Danish and English being potentially off-putting, means I have had no dialogue from anybody about this in Denmark. My hope is by posting it here it can start something – please feel free to comment. In June I gave a talk around the subject of why Usability was dead at the ITU, Copenhagen. The title was to be deliberately provocative, to get those involved with designing interactive products thinking about our work and the challenges ahead of us.

It was also to give a few ideas about what I feel we should concentrate on as a practice to ensure our work is sound and that we share a responsibility in getting it right.

Technology is starting to deliver on promises made a few years ago, and many different types appear to be maturing simultaneously. Touch screen technology, RFID, gestural interfaces and the rise of Twitter are all contributing to a shift in user’s perception of what they want from devices and what as UX people we must give them. This distortion is becoming profound.

How has this changed?

The human race is very social. We share experiences and our networks provide the arena for conversations of an engaged audience. The explosion of these networks has gone mainstream; it is no longer considered the domain of the nerd. People are using the web beyond initial expectations and in ways that couldn’t have been foreseen.

You may be in a room with someone but also simultaneously be elsewhere, using Twitter, updating your Facebook, looking something up on Wikipedia. The point is we inhabit different spaces simultaneously. The boundaries between what is here or there are diminishing and that changes many things not least our perceptions of what is usable.

Context and relevance

Wherever you may be, there will be a set of circumstances or situation that defines it – uniquely. The context of an experience has always affected physical interactions but now it affects digital ones too. This context can define how usable a product or service needs to be. A generic usability test will not ascertain if this context is even considered, as such the user testing can even become an irrelevance.

Interfaces now degrade or reveal features dependant on the status of the user. This personalisation is becoming a reality for digital interfaces in a way that was promised years ago. Who we are, influences what we see and how we use it.

The mobile phone is a device that feels context – literally knowing where it is in its environment. It is also socially connected because its definition is on a social level – that of communication with people. A device that is grounded in social interaction and is aware of its location gives many possibilities in terms of design which we have only begun to see. Systems are becoming completely adaptable and adaptive interfaces will be an ever present where personalized experiences are important

The appreciation of the context of a situation and the relevance to the user has surpassed usability as the most important factor of web strategy and design. In many ways usability can become too fixated by methods and attaining results that are scientific in execution. There will be results, but not an optimal solution to the problem. In some situations the tests are a prescribed treatment to an issue that could be dealt with by understanding the context of use and the relevance to the user.

Here can be elsewhere

The worlds that people inhabit are being made by the user and not by the design team. This trend will continue and the interfaces people use will become more bespoke.

We are also aware that components on a page can exist elsewhere, in other domains and other interfaces. So just like users, the elements of a page exist elsewhere, simultaneously. This gives rise to the view, that a person, product or object no longer exists in one place, or in one medium, but it exists simultaneously in multiple ways. In other words the context of the experience makes it unique to us and as a result the usability of an interaction becomes redefined. Again, usability itself is becoming less of a focus as the many different ‘worlds’ we inhabit each have a particular look and feel.

We face a challenge- as technology increases the channels of communication on multiple platforms and devices, the ways we interact with them will become ever more varied and the discipline of usability and user centred design will be stretched in different ways

Behaviour also defines the design

We need to be more aware of why we think how we do, what triggers interactions and behaviours in people to make choices. As UX people we need to be aware of why as much as how systems should be designed. Getting the why will allow us to improve the experience beyond the audience’s anticipation.

Touch, the most natural of interactions will redefine usability and has already taken away many of the hindrances of traditional web applications. This adaptation of technology will take us into new unchartered waters as a UX community. The solutions are more diverse, the implications more complex.

It is important to understand that the ’worldwide web’ was a point in time defined by sitting at a desk viewing the internet through a pc. No longer is it purely the presentation of information though a page view or a one way transmission of information. It is a multiple and complex mix of technologies creating a layer on top of our lives. We are moving from GUI based ways of interacting to a more conceptual view where different technologies, not all screen based and certainly not desk based are having an effect on how we are connected

What steps will ensure we actually flourish in these challenging times?

· Design collaboration will become more important between industries and specialisms. We have a responsibility to give advice, and criticism should be followed by constructive suggestions. The most important thing is to create teams that acknowledge other’s skills and to be multi-disciplinary within teams.

· Use a toolbox that can be applied to design problems and realize that not all tools fit all problems and are likely to need multiple areas of expertise

· Context and relevance should help define the idea. Build a relevant experience and not a prescriptive one – don’t let design patterns stifle creativity, use as a base and a starting point – not as a standard, or ‘default thinking’.

· In Usabilty vs Experience – Experience wins. The iPhone is a wonderful device for so many things, but as a phone its quite bad. However, there may be better phones, but few better experiences on a mobile. In social situations typical guidelines go out the window, the experience changes the interaction.

· Knowledge of human behavior will give a greater influence on design and help define a user experience and its success

· Cultural differences will always have impact on how a system is used and its adoption. Too often methodology gets in the way of tackling design problems with innovative thinking because we are bound by history or politics and fear of making mistakes.

· Make sure the design process is flexible – not only for you and your team but also for your customers.

· Ensure the experience lasts beyond the interface – solutions should make life easier, that enriches and give positive experiences. We need to extend the circle of those in UX to work with those disciplines such as ethnographers, anthropologists and psychologists.

Summary

UX is a solution and a process to the challenges we face. But we must be better at collaborating and sharing our skills across disciplines. User experience should not be considered an optional activity but one that is a necessity to any business.

Of course usability will always be a huge factor to what we do, but now there are many more considerations to ensure successful designs and experiences. But a part of Usability (the profession) should die – that of unimaginative testing processes and formulaic thinking. The design challenges we face now are too complex for such dogmatic approaches to user centred design.

See the presentation here

This five minute talk on wireframes is a condensed version of the blog post – the ‘What, when and why of wireframes‘. Hello Group have taken inspiration from the O’Reilly talks which, in turn have taken the idea from a couple of architects based in Tokyo – the Pecha Kucha way of presentation. In short, you have five minutes to tell the story and its an efficient (but pressurised!) method to get a message across. You can see the presentation here with accompanying audio.

Its a great way to do presentations but listen out for the comment right at the end – he was right!

Much of my work exists in strategic reports that may never get funding from sponsors. Ideas that just exist on the page or research that may be implemented when the hardware is there to support it. Wrapped up in non-disclosure agreements, it is a fact of working in this industry. One that you need to deal with if you are going to enjoy the processes of making a good user experience.

Thankfully this year has had a healthy balance of research, strategic design work and tangible UX. It has also resulted in a process within the UX team at Hello that is proving invaluable as we tackle the different types of work described above.

UX Basis is a way of combining the numerous tools available to us and forming a unified process that sits within a digital agency and it’s other important departments – creative, tech and client services. The beauty about the model is it is fully adaptive to any clients needs, can fit with tech’s agile process and incorporates creative and development at key stages in the creation process.

The model is based on the creative process of a four part cycle; plan, act, observe and refine. On top of that is Jesse James Garretts’ five layers model for web development. The added bonus is that it doesn’t need to be a website but it can be any interface. It is purely UX focused but acknowledges the necessary touch points of where we need to engage with other parts of the business. Of course it is not new in terms of tools but it is in terms of making this work in a digital agency. An important factor is that the UX team has this as a manifesto and we stick to it completely. By having an agreed approach we can engage others in a common language.

We are producing cards (and we know they are not a new idea, see the excellent IDEO and the IA summit cards) to help our client services team communicate our methods to customers. It gives them the language necessary and helps cost projects by seeing when to use them and what they are.

It helps the company become more efficient keeps the quality of our work high and ensures transparency with the client. These tools all are valid and are frequently used. There are many more but these we feel are at our core to produce the best results.

The website is here with each tool explained and a poster and cards have also been produced. UX BASIS gathers it all up and makes our process transparent and communicable. It provides anchorage along the way for the journeys our client projects take us on.

It would be great to have your feedback on this – please comment and why not embed the tools in your blog?