First of all, a word of thanks to everybody who has asked questions via comments, twitter or e-mail. I will take the time to answer all questions that could interest the user experience community in a special article.

Dushan (http://www.ressources-marketing-internet.com/), whom I want to thank, wants to have some more details on the relevance of analysing a screen using shades of grey.

When a user visits a website, his visual system plays an essential role: without it, the brain wouldn’t receive any of the information that is displayed on the screen.

The visual information penetrates the eye, where it is captured on the eye’s retina. There are two kinds of captors: the so-called cones and sticks.

The retina has about 125 million sticks and 5 million cones. There are three kinds of cones (red, green and blue) but there is only one kind of stick, and that one can only see shades of grey.

That’s the first reason why a screen analysis in shades of grey is important: less than 1% of receptors is capable of treating colours.

The sticks also capture the luminosity of the different zones of a web page, and as such, capture all contrasts. When we talk about contrasts, what we really talk about is variations of light intensity. The sticks are mainly in the zone of peripheral vision.

99% of the eye captors (sticks) treat the information of a web page in shades of grey. 1% of captors (cones) treat the colours. The latter are located in the Fovea zone.

Only a few are located in the peripheral vision.

On a 1024 screen, the foveal vision – we are simplifying things here -, the eye (foveal vision) only sees clearly about 7% of the width of a page. This is the net zone, which consists almost exclusively of colour captors.

The other 93% of the page is seen with a lot of sticks and very few cones. As a result, colours lose their vivacity and vision becomes more and more blurred, as we move further away of the point at which the eye is looking.

So, in short:

Most of the screen will be blurred and information on the colours is progressively lost in favour of information on the shades of grey. That’s why it is important to analyse screens in shades of grey.

An example on the design of our new site that will be released in a couple of weeks ☺

The button ‘View Case Study’ is an important one. But will it be seen?

Let’s start with an analysis of the sticks (shades of grey): by fixing each cross on the screen, the button is easily visible by its contrasts in shades of grey.

By simulating the peripheral vision on one of the crosses, the button rests very visible, even when blurred.

So, let’s now have a look at the analysis of the cones (colours): by fixing each of the crosses, the colorimetric information strengthens the contrast of the button’s shades of grey.

In peripheral vision, the button is very visible.

Conclusion:

- Sticks: OK
- Cones: OK

If I want to give visual priority to one button rather than another one, I use the same principles to decrease the visual importance of the elements ‘Interested’ and ‘Stay tuned!’ by decreasing the saliency in shades of grey and by putting no colour whatsoever!

Now, it’s your turn!

Some months ago, I posted a simple question on LinkedIn: what does a designer/UX expert do on a daily basis?

In receive a lot of answers and I would like to thank :

Rob (http://twitter.com/rfitzgibbon), Adam (http://x31.net/), Christopher (http://subtxt.us/website/), Elizabeth (http://www.elizabethdavis.net/), Paul (http://www.design.philips.com/), Chris (http://www.chriswillet.com/), Beth (http://www.tandemseven.com/), Aimee (http://www.treetopcreative.com/), Georges (http://uxsurvey.wordpress.com/), Paul (http://www.virtualfloorspace.com/), Paul (http://uxarchitecture.wordpress.com/), Alexander (http://shelter.nu/), Kirk (http://www.homeaway.com/), Tony (http://tmoura.carbonmade.com/) for their answers.

So, here a typical day in the life of a designer/UX expert :

Get into work, fire up the Mac and launch all the programs I’ll need for the day.

Make coffee or some juice while the machine loads stuff like Photoshop, Illustrator, InDesign, Entourage, iChat, … Without coffee I am useless.

My workday centers around 7 general activities:

1. Interview stakeholders / gather requirements: this could be remote or in-person. Document meeting notes.

2. Brainstorming meetings: these are the get-togethers with coworkers to discuss solutions for clients, how to structure a sales pitch, that sort of thing.

3. Research/information gathering/heuristic evaluation: reading stuff, browsing the web for successful websites, print-out screenshots and evaluate current website.

4. Schematic creation:  this is building blueprints, site maps, wireframes, process flows, using tools like Axure, Visio, Mindmanager. What’s being built and why will depend on the particular project.

5. Design creation: this is creating screens with Illustrator, Photoshop, … 5% design, 95% communication re: the design. I spend most of my day convincing teams to get on board with specific choices, debating with colleagues, championing my and others design directions and gathering momentum for new ideas.

6. Usability testing: when I sit with the client in a soundproof box with a one way mirror and watch a subject take our schematics out for a spin. (Or occasionally have a dead battery in the driveway.) Sometime, when confronted with a usability issue, the only solution is to replace the user.

7. Keeping up on industry trends: again this is mostly browsing the web/mobile/twitter, and its basically just “surfing the digital tsunami”, finding out what’s going on and learn new things and techniques. I’m fortunate to work in an industry in which checking my Facebook account at work isn’t frowned upon but is de rigueur!

After the 8 hours are up, get everything you worked on to a stopping point, clean out the coffeepot, and go home.

Thinks I like doing each day

1. The actual design part of design, implementing those designs so I can see the results of my work.

2. Constructive debate with clients & establishing relationships with them.

3. Client presentations. This is the “dog and pony show” in which we get cleaned up and present our work. Great fun – I love presenting.

4. Discovering a new tool or a new system that makes the production and busywork portion of my job easier/faster so I can spend more time on “1.”.

Things I hate doing each day

1. Paperwork (includes billing, timekeeping, etc.)

2. Accounting (includes billing, justifying costs to a client who got hit with a higher invoice than expected, dealing with vendors who hit ME with a cost higher than expected, etc.)

3. Seeing a client take the “safe” design concept over one that is “better”, usually because the client made the subjective decision in a committee. Customers have expectations, some are healthy while others are not. So the UX Designer is part technology therapist. Managing expectations takes up to 10% of the time – 5% pre-design therapy and 5% post-design therapy!

4. Gratuitous documentation

Don’t hesitate to comment in order to complete this first list.

At a conference, organized for the board of a European company, I specifically emphasized the importance of user experience when you want to succeed in building an online business.

Everything that follows is quite simple and plain common sense. Nothing revolutionary. But it is so easy that a lot of organisations seem to have forgotten all about it.

An organisation has objectives to be met. In order to do so, it can use its means, either in marketing, IT, sales, hr, …

Who is going to allow the objectives to be met? The target group of course!

But the target group isn’t interested in a company’s objectives. It is there to meet its own objectives and no one else’s.

In short, the objectives of one party depend on those of the other party.

The equation is simple: in order to meet your business objectives, you should offer your target group the means that will help it to meet their own objectives. That’s what we call a win-win.

This means it is vital for an organisation to foresee the CONCEPTION when it is developing something (a product, a telephone helpdesk, a website, an e-mailing) in order to generate a maximum TARGET EXPERIENCE, which allows the target group to meet its objectives. This will indirectly allow the organisation to meet its objectives as well.

This point of view is vital: the business results of my team have only been possible because all means the organisation had at its disposal, with TARGET EXPERIENCE as a central point, was used as a means to an end: that of ensuring the relationship between Target and Organisation is a win-win.

In order to anchor the importance of the TARGET EXPERIENCE CONCEPTION, the analogy is the stem of a cherry is useful.

If you take the stem of a cherry, the DNA of the two sides of the stem will lead to two cherries. In order for a digital experience to be a success, the TARGET EXPERIENCE and the CONCEPTION must be two fruits of the same DNA.

In nature, we can’t grow a cherry on one side and a tomato on the other. But in the business world, it is quite common. If an organisation conceives an experience that is disconnected from the users’ objectives, it will harvest something different than it had foreseen.

It is this DNA ‘against nature’ that prevents organisations to realise their online objectives.

The results can easily be observed. If an organisation is not satisfied with its online results, the overall target group probably hasn’t been able to realise its objectives in its dealings with the organisation. It will probably be able to do so with another organisation that has thought about TARGET EXPERIENCE CONCEPTION.

The fundamental notion that allows organisations to create a strong Target Experience is to understand human behaviour.

All principles of a successful TX Conception is based on the automatic analysis of human beings:

-       Current behaviour

-       Habits

-       Behaviour that the organisation wants to generate.

Dans le cadre d’une conférence organisée pour le Board d’une entreprise européenne, j’ai formalisé l’importance de l’expérience utilisateur pour résussir dans le business online.

Tout ce qui va suivre est simple, du bon sens … rien de révolutionnaire. Par contre, c’est tellement simple que beaucoup d’organisations ont perdu ce bon sens.

Une organisation a des objectifs business à atteindre. Pour les atteindre elle a des moyens à sa disposition dsitribués entre le Marketing, IT, Sales, HR, …

Qui va permettre que les objectifs de l’organisation soient atteints ? La cible !

Mais la cible n’a que faire des objectifs business de l’organisation. Ce qui compte pour la cible c’est d’atteindre ses objectifs à elle.

Les objectifs de chaque partie dépendent donc de ceux de l’autre partie.

Donc finallement l’équation est simple : pour atteindre ses objectifs business une organisation a des moyens à disposition pour aider la cible à atteindre les siens. Dans ce cas, c’est du win-win.

Pour l’organisation il est donc primordial, lorsqu’elle conçoit quelque chose (un produit, un support téléphonique, un site web, un emailing, …) de prévoir la CONCEPTION afin de générer une TARGET EXPERIENCE maximale permettant à la cible d’atteindre ses objectifs. Cela permettra indirectement à l’organisation d’atteindre les siens.

Ce point de vue est crucial : les résultats business obtenus par mon équipe n’ont pu être possible que parce que tous les moyens à la disposition de l’organisation avec comme point central la TARGET EXPERIENCE, la conception n’est qu’un moyen pour s’assurer que la relation Target – Organisation soit bien win-win.

Pour bien ancrer l’importance de la TARGET EXPERIENCE CONCEPTION, l’analogie de la queue de cerise est efficace.

Si vous prenez une queue de cerise, l’ADN distribué des deux côtés de la queue de cerise par le cerisier formera deux cerises. Pour qu’une expérience digitale soit une réussite, la TARGET EXPERIENCE et la CONCEPTION doivent être deux fruits de même ADN.

Si dans la nature, ce n’est pas encore possible de faire pousser d’un côté une cerise et de l’autre une tomate, dans le monde du business, cela arrive couramment. Si une organisation conçoit une expérience déconnectée des objectifs des utilisateurs, elle récoltera autre chose que ce qu’elle a prévu.

C’est cet modification de l’ADN qui empêche les organisations d’atteindre leurs objectifs online.

Les résultats sont facilement observables. Si une organisation n’est pas contente de ses résultats online, la cible dans sa globalité n’a probablement pas atteint ses objectifs avec l’organisation, probablement elle le pourra avec une autre organisation qui aura penser une TARGET EXPERIENCE CONCEPTION.

La notion fondamentale permettant de concevoir une Target Experience forte est la compréhension des comportements humains.

En effet, tout le principe d’une TX Conception réussie est basée sur l’analyse des comportements “automatique” des êtres humains :

- comportements actuels
- habitudes réelles de la cible
- comportements que l’on souhaite générer

User Experience Design doesn’t win ADC prices, it wins percentages.(September 17, 2010 – Oliver Reichenstein)

Utilisation des sciences comportementales pour améliorer les landing pages.

Jean-Claude Grosjean (an expert in AGIL methods, which I strongly suggest you read) has recently published the article “Web ergonomics: 8 tips to sell better on the Internet”.

This article talks among others about guiding the eyes by exploiting the Gutenberg diagram (tendency to read from the left to the right, and from the top to the bottom).

I wanted to share some screen composition elements with you: they will indicate the ideal placement of an action button.

To do so, I propose to work with two real examples, which are screens used in Jean-Claude’s article (dailyburn.com & goodbarry.com).

Before working on the best solution for these two screens, it is worthwhile to analyse the two screens using the ErgoSuite filter, a series of tools that predict human behaviour, created by Netway).

Remember that when we first look at a screen, our eyes automatically look at certain zones of the screen. The first zone is the so-called Netway Interface Sweet Spot Zone, the zone in which 90% of the first ocular fixations take place.

This zone is the basis used by our brain to analyse and interpret the composing elements of the interface. To do so, it will use the so-called peripheral vision.

dailyburn.com

• the button stands out very clearly
• it is easy to see it and identify it
• the button is also rather close to the foveal zone (the zone where we have 100% vision)
• we can’t read the text but we can clearly distinguish there are three words in the button.

When analysing the screen using shades of grey (as if we only use the rods of our eyes), we reach the same conclusions.

goodbarry.com

• the button gets lost in the blue at the bottom of the page
• it is not clearly identifiable
• we can’t distinguish the number of words in the button.

The problem is even clearer when we look at the interfaces in shades of grey.

The signal the button will send to our brain is much weaker than the one sent by the dailyburn.com site.

One of the variables defining the right position of a button is its capacity to distinguish itself from the other graphical elements of the screen in peripheral vision mode.

Let’s continue our analysis. Another important factor is whether the button can easily and quickly be clicked.

dailyburn.com

• wherever the cursor, the button is accessible using normal effort (yellow circle).
• even better: the button is easily accessible from all important visual elements (green circles)

goodbarry.com

• if the cursor is in the top main navigation, the action button is accessible using a major effort (orange circle)
• it is accessible using normal effort starting from the main components of the screen (yellow circle).

A second variable determining the position of a button is the ease with which it can be reached from the main screen zones.

To continue our analysis, I propose to analyse the geometrical structure underlying the visual behaviour on a screen.

We have already talked about the determining role on the screen played by the Netway Interface Sweet Spot and the Netway Interface Comfort Zone.

A geometrical analysis of the two sites reveals that 90% of the first ocular fixation will take place in the Netway Interface Sweet Spot, whereas the second fixation will happen in one of the two illustrated zones.

In the case of dailyburn.com, the button has the correct vertical position. However, it could be placed more at the right. Moving the button by a few pixels will align its centre with the second natural zone of ocular fixation.

In the case of goodbarry.com, the button is not only hard to see using our peripheral vision, we also see it is placed too high and too much to the right.

Let’s get back to dailyburn.com. How can we improve the position of the button?

Here’s the result. I leave the conclusion to you

In this case, the button is perfectly placed to fulfil its role in the peripheral vision field.

If the brain of the user decides to take action, he will have identified the button in just a few milliseconds after opening the site. He will easily guide the eyes to the button.

Since it is easy to click the button, the brain will place the cursor close to the button and when the user has to click, it will be easy to do so.

All this of course in a non-conscious way…

Jean-Claude Grosjean (expert en methodes AGIL que je vous conseille vivement de lire) a publié, il y a peu, un article “Ergonomie Web : 8 conseils pour mieux vendre sur Internet“.

Cet article traite entre autre du guidage du regard en exploitant le diagramme de Gutenberg (tendance de lecture de gauche à droite et de haut en bas).

Je tenais à partager avec vous quelques éléments de composition d’écrans afin de vous donner l’emplacement idéal d’un bouton d’action.

Pour être très concret, j’ai décidé de comparer les deux exemples d’écrans fournis dans l’article de Jean-Claude (dailyburn.com & goodbarry.com).

Avant de construire la solution la mieux adaptée pour ces deux écrans, prenons le temps d’analyser les deux écrans actuels par le filtre de l’ErgoSuite™ (boîte à outil software de prédiction du comportement humain créée par Netway).

Pour rappel, le système visuel étant ce qu’il est, lors de la première visualisation d’un écran nous posons nos yeux sur certaines zones de l’écran. La première de ces zones est ce que l’on appelle la Netway Interface Sweet Spot Zone™, zone dans laquelle 90% des premières fixations oculaires se posent.

A partir de cette zone, le cerveau va analyser et interpréter les composants  de l’interface avec ce que l’on appelle la vision périphérique.

dailyburn.com :

• le bouton se distingue très fort et est facilement visible et identifiable.
• le bouton est également assez prêt de la zone de vision fovéale (endroit où l’on voit net à 100%).
• on ne sait pas lire le texte mais par contre on distingue clairement qu’il y a 3 mots dans le bouton.

Si nous analysons l’écran en nuances de gris (comme si on simulait uniquement la vision avec les batonnets des yeux), nous obtenons les mêmes conclusions.

goodbarry.com :

• le bouton se dilue avec le bleu de la bande en bas de l’écran
• le bouton n’est pas directement identifiable
• il est impossible de distinguer le nombre de mots composants le bouton.

Si nous passons l’interface en nuances de gris, le problème s’accentue.

Le signal du bouton au niveau du cerveau sera donc beaucoup moins fort que pour le site dailyburn.com.

Une des variables de la bonne position d’un bouton sera donc sa capacité à être dissocier en vision périphérique des autres composants graphiques de l’écran.

Continuons notre analyse. Un autre facteur important est la capacité qu’à le bouton à être cliqué rapidement.

dailyburn.com :

• peu importe où se trouve le pointeur de l’utilisateur, le bouton sera accessible avec un effort normal (rond jaune)
• mieux, à partir des éléments visuels importants, le bouton est facilement accessible (ronds verts).

goodbarry.com :

• si l’utilisateur a son pointeur situé sur la navigation principale supérieure, le bouton d’action sera accessible avec un effort important (rond orange)
• à partir des composants principaux de l’écrans, le bouton est accessible avec un effort normal (rond jaune).

Une seconde variable de la bonne position d’un bouton sera donc sa capacité à être cliqué avec facilité à partir des zones de l’écran considérées comme importantes.

Pour continuer l’analyse je propose d’analyser la structure géométrique qui sous-tend le comportement visuel sur un écran.

Nous avons déjà vu que le Netway Interface Sweet Spot™ ainsi que la Netway Interface Comfort Zone™ sont deux éléments fondateurs d’un écran.

En fonction de la géométrie des deux sites évalués, si la première fixation oculaire se pose à 90% dans le Netway Interface Sweet Spot™, la seconde fixation va se poser dans l’une des deux zones illustrées.

Nous voyons que dans le cas de dailyburn.com, le bouton est bien placé verticalement mais pourrait être déplacé vers la droite de quelques pixels pour avoir son centre aligné avec la seconde zone naturelle de fixation oculaire.

Dans le cas de goodbarry.com, en plus d’être peu visible en vision périphérique, le bouton est placé trop bas et trop à droite.

Revenons à dailyburn.com. Comment pouvons-nous améliorer le positionnement du bouton?

Voici ce que cela donnerait. A vous d’évaluer le résultat

Dans ce cas, le bouton est parfaitement placé pour jouer son rôle d’attracteur visuel dans le champ de vision périphérique.

Si le cerveau de l’utilisateur décide de passer à l’action, il aura pu identifier le bouton dans les quelques premières milisecondes après son arrivée sur le site.  Il sera donc aisé d’envoyer l’oeil sur le bouton.

L’effort de pointage étant facile, le cerveau placera le pointeur à proximité du bouton et lorsqu’il devra cliquer, l’acte sera aisé.

Tout cela de manière non consciente

Gestalt theories are a tool behavioural experts can use to predict how a user’s visual system will respond in front of a screen.

Today, let’s discover the fifth of a total of seven principles and talk about the law of symmetry.

A set of shapes will be better perceived when the individual elements are symmetrical.

Thanks to this principle, shapes can be grouped around an axis (vertical and/or horizontal). The axis in itself can also be a shape. This allows the brain to better guide the foveal fixations on the screen.

The geometry of a screen starts with the fixation of the priority vertical and horizontal axes. The intersections will allow for the placement of the priority graphical elements.

The principles of symmetry, closure, good continuation, proximity and similarity enable the natural focus on the appropriate graphical elements of the screen.

Sometimes, when secondary graphical elements compete with the priority elements, the expert will adapt the Gestalt principles in order to diminish the emphasis on these secondary elements.

I’ve used these techniques when I was working on the Ethias site. I have emphasized the attention onto the priority graphical elements (the green and orange zones), thanks to the combined application of the Gestalt principles, whilst diminishing the attention to the non-priority zones.

In the case of Ethias, the green objects are symmetrical to the central element. When you take a closer look, you will see that the central green object is located in the so-called Netway Interface Sweet Spot™.

In the AXA screen, this principle is present but the objects are placed too closely together. As a result the brain will not be able to identify a set of different graphical elements but will perceive just one shape.

That’s why it is important to take into account the effects of the peripheral vision when creating screens. Without doing so, the Gestalt principles will lose their effectiveness.

Have an excellent week!

Les théories de la Gestalt font partie de la trousse à outils des experts en sciences comportementales afin de prédire comment le système visuel d’un utilisateur va répondre face à un écran.

Je me propose de t’emmener découvrir le cinquième des sept principes : la symétrie.

Un ensemble de formes sera mieux perçu si les formes composant l’ensemble sont symétriques entre elles.

Ce principe permet de rassembler des formes autour d’un axe (vertical et/ou horizontal). L’axe peut être constitué lui-même par une forme. Ceci permet au cerveau de pouvoir mieux orienter les fixations fovéales sur l’écran.

La géométrie d’un écran commence par la fixation des axes prioritaires verticaux et horizontaux. Les intersections de ces axes permettront de placer les composants graphiques prioritaires.

Les principes de symétrie, de clôture, de bonne continuation, de proximité et de similarité permettront donc d’attirer naturellement l’attention vers les composants graphiques adéquats de l’écran.

Il arrive que lorsque des composants graphiques secondaires risquent d’entrer en concurrence avec des composants graphiques prioritaires, l’expert détourne les principes de Gestalt pour diminuer l’emphase sur les éléments secondaires.

J’ai utilisé ces techniques lors de la construction du site Ethias. J’ai accentué l’attention sur les composants graphiques prioritaires (les blocs verts et orange) grâce à l’application combinée des principes de Gestalt tout en diminuant l’attention sur les zones non prioritaires.

Pour le site Ethias, les objets verts par exemple sont symétriques par rapport au composant central. Si tu observes bien tu verras en plus que l’objet vert central se trouve dans la « Netway Interface Sweet Spot ».

Pour l’écran de AXA, ce principe est présent mais les objets sont trop proches les uns des autres : le cerveau ne pourra pas les identifier comme un ensemble de composants graphiques différents mais bien comme une seule forme.

Il est donc important de bien penser aux effets de la vision périphérique lors de la création d’écrans car sans cela, les principes de Gestalt perdront de leur force.

Passe une excellente semaine.