Userfirst

The user experience and the organic design

francesco — Fri, 23 Dec 2011 18:44:07 +0000

From interior furniture to packaging and from electronic devices to publishing, there is a trend in design where visual elements are shaped and inspired by the context and materials of a real natural environment. The so-called organic design has its roots in architecture and specifically the work of Frank L. Wright, who argued that form and function were one.

“[The organic approach] promotes harmony between human habitation and the natural world through design approaches so sympathetic and well integrated with its site that buildings, furnishings, and surroundings become part of a unified, interrelated composition”.¹

At the core of the organic design there is not only a pervasive influence of natural surroundings but also a specific concern for the final user: if form follows function then objects are designed to be seen as truly respecful of the use they are suppose to satisfy. Also, a pure organic design promotes innovation: design forms should improve what was made in the past without rejecting its inspiration. This brings to the last principle: “the finished product as a unified whole, where every aspect of the design contributes to the final outcome”.²

The organic approach in web design

With specific reference to web design, the organic approach consists in reproducing in a digital format the elements found on a natural environment, their shapes, colors and sometimes behaviours.

We can try to distinguish an organic website by looking at some design elements:

The re-adaptation of paper, wood and other organic textures to give a natural “flavour”
The use of abstract colors and shapes as found in nature to imitate its continuous flow
Single parts of an image (like brushes and graphics) used to create a more complex, extended visual
Common objects placed in a different living context
A minimalist style to catch the essence of each design element (few colour and typographic combinations, large empty spaces, etc.)

Tennessee Vacation – The State’s Official Travel Planning Website – http://www.tnvacation.com/

New York Web Design Company – http://www.dizzain.com/

Get London Reading – http://www.getlondonreading.co.uk/

Aesthetics vs usability

francesco — Wed, 26 Oct 2011 12:44:23 +0000

Can visually beautiful websites also be easy to use?

It’s a typical dilemma when dealing with web communication: is it better to have a well-designed layout or a well-structured organisation of its contents? A usability expert would say: “Your website must be user-friendly, fast-loading and text-oriented, with little or no space left for graphic ‘experiments’.” While a web designer would assert: “Your website must be unique, eye-catching, with extensive use of iconography and other visual elements.” Put in philosophical terms: what comes first – form or content?
This dualism is more theoretical than real, however: case studies and research show that the experience of web users is influenced both by the way content is presented and organised. A nice, original layout is indeed able to coexist with practical navigation functionality. In fact, what makes a website offer a successful (or, indeed, unsuccessful) user experience is ultimately a combination of both.
This final assumption relies on the conclusions of early 20th-century Gestalt psychologists who studied how the brain processes images – and responds to what it sees. Though complex, a brain’s response to images is nearly immediate: we barely need less than one second to decide if a web page (or any visual artifact) deserves a thumbs up or down. This is done in pretty much the same way we decide whether a meal is delicious or not: it is an emotional/affective reaction to external stimuli which are governed in an automatic, unconscious way by the lower centres of the brain. Conversely, concepts like site functionality, structure and content organisation require a cognitive response; a brain’s slower, top-down, more considered reaction.

This second judgement is influenced by our cultural views, learning, experiences and personal preferences.
As with a progressive line, we first get our irrational/emotive perception (visceral reaction). This can persist and also affect our thoughts and opinions on a deeper, rational level – “an effect that lasts long after the slower, conscious behavioural and reflective processes come into action, making you aware of how you feel about what you see.”¹
These two basic reactions elicit different aesthetic models. The expressive model emphasises the originality, creativity and visual richness of a site’s design. While “the classical model stresses orderliness and clarity in design, by using familiar web and print conventions.”²
The prevalence of one model over the other depends mainly on the intrinsic nature of the website: an e-commerce website will be judged more by its content organisation (classical model), while a gallery portfolio is more likely to be viewed and evaluated according to its visual content presentation (expressive model).
Usability experts always adopt the classical model to evaluate a website: their decision is the culmination of accurate and thorough analysis. It’s all about guidelines, tests and standards. By contrast, web designers always return to the expressive model when judging a graphic layout: they look for the right synthesis of all the visual elements – typefaces and icons, colours and pictures. However, this does not mean that we can’t attain a harmonious relationship between these two approaches. As long as the most precise usability analysis isn’t the guarantee of a successful website, a sophisticated graphic design cannot prevent a bad user experience. We simply have to find the right balance.For more information on this topic see:
Visual Decision Making by Patrick Lynch.

^1,2Lynch, Patrick. Visual Decision Making

Which persona are you?

francesco — Tue, 18 Oct 2011 11:57:57 +0000

Building a user-oriented web site

Take your personal data: age, sex, job position, location. Then add something genuine that tells us more about your everyday life: stories, quotes, anecdotes, computer usage habits and goals. And there you have it: a persona. According to Alan Cooper, pioneer of user-centered design, “personas are hypothetical archetypes, or ‘stand-ins’ for actual users that drive the decision-making for interface design projects”. We are not talking about real people, of course. Rather, they result from personal information pertaining to web users (or any high-tech consumers), collected through interviews and other qualitative research methods.
Say, for example, that we want to build a website dedicated to sports-car drivers. We could start by displaying cutting-edge images of some of the best car brands on the market, along with editorial reviews, test drives and news from the car manufacturers. But without involving the would-be final users, we cannot be sure we are meeting their actual needs and preferences. We could end up delivering something they can already find on the shelves of the newsstand: the online version of a printed magazine.
Instead, what about asking a panel of sports-car drivers what they like most in a car? Its unique style, comfort, performance or maybe the options? They could also perhaps add details about their own driving experiences: places to go, a picture of themselves in their cars, meeting with other sports-car enthusiasts? This and other qualitative information, together with personal data, could be used to make the profile of a web user (aka a web persona).

In the attempt to define a profile for our website, the elements that are most pre-valent amongst the interviewees combine to form the primary persona, i.e. our most likely web user, and the one that all designers and developers should keep in mind when building websites. Less prevalent details might instead define the secondary personas – users with different needs and web habits – even though they are still part of our audience. There could even be negative personas; those whose characteristics do not match with our profile. What is relevant is the rigorous method used to collect all this information. Here are the key points identified by the guru of usability, Alan Cooper, in his best-selling book The Inmates Are Running the Asylum¹:

Pull together a one- to two-page precise narrative description for each persona.
Identify workflow and daily behavioral patterns, using specific details, not generalities.
Detail two or three technical skills to give an idea of computer competency.
Include one or two fictional details about the persona’s life – an interest or a habit – that make each persona unique and memorable.
Don’t use someone you actually know as a persona; create a composite based on interviews and research data.
For a new project, don’t recycle a persona from a previous project; interview and create new personas for each project.
Keep the number of personas created for a project relatively small – usually between three and seven, depending on the interface project.
Develop a believable archetype so the design team will accept the persona.

For more information on this topic see:

¹Cooper, Alan.
The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity. Indianapolis: Sams, 1999. 261 pp.
Putting Personas Under the Microscope
cooper.com/journal/personas
The Origin of Personas
cooper.com/journal/2003/08/the_origin_of_personas.html
Getting from Research to Personas: Harnessing the Power of Data
cooper.com/journal/2002/11/getting_from_research_to_perso.html

After WWW comes the GGG

francesco — Tue, 18 Oct 2011 11:55:10 +0000

A natural evolution of freedom of communication on the internet

When the World Wide Web (WWW) launched on 6 August 1991, it wasn’t merely intended as an information repository where people could read relevant content. Its inventor Tim Berners-Lee conceived it also as a medium that people could contribute to, exchanging their experiences, thoughts and points of view with those who had similar interests. In other words: the social network.
If the main idea of the internet was to facilitate communication among people, we should then go back to this proposal and expand it to a more sophisticated and useful level. In other words, we should exchange tastes, opinions, beliefs and so on to allow other people to enrich our – and their – experience with suggestions and comments based on a mutual relationship.
Rather than being a network, however, the web becomes a graph – the difference being not in the content itself, but the way it is used, shaped and exchanged. As Berners-Lee pointed out: “People would put a document on the web for one reason, but it would end up being found by people using it in completely different ways […] so the Net and the Web may both be shaped as something mathematicians call a Graph, but they are at different levels. The Net links computers, the Web links documents. Now, people are making another mental move. There is realization now, ‘It’s not the documents, it is the things they are about which are important’.” And this is where the new definition of the web as a Giant Global Graph (GGG) comes in.
For example, if I want to buy a concert ticket for my favourite artist or band, I would visit their personal web page or an online ticket service.

I could then inform my friends on a social network that I am going to the concert and ask if they want to join me. Or, if the concert is sold out, I could place a post on an online bulletin board to see if anyone has a spare ticket.
Already, there are plenty of web resources that allow me to do this – from e-mail accounts to discussion forums, instant messaging (IM) applications to
social network aggregators. However, all these resources require separate registration which means I have to log in several times at different URLs to place my content. Not only is this frustrating in itself – especially for non-web 2.0 addicts like myself – but the real obstacle is the fragmentation that exists between all these applications.
Currently, developers and content editors are working towards finding an open-source API (Application Program Interface) so that the user can experience the web on multiple levels at the same time. One example is the Google-sponsored OpenSocial project – a standard specification for hosting applications and widgets (portable bundles of code that perform simple functions) inside social networks. Already with this new standard, my Facebook status can be delivered simultaneously to my Skype, Twitter and Digg accounts.
Obviously this is something which benefits everyone: developers, content providers and end-users.
Developers will no longer be frustrated with compatibility issues and code portability among different infrastructures and languages. Instead, they will be able to focus on what the application does, rather than how.
Content providers will be able to get a positive return, in terms of corporate image and social awareness, as they will be able to involve their clients when creating and delivering information on the web.
And finally, end-users can broaden and enrich their web experience by sharing their preferences for certain things – thus creating little communities of aficionados.
For more information on this topic see: