I had started to describe the effects of Gestalt used by my team when they were developing screens.

Excuse me for having you wait so long before coming back on it, but the past year, I’ve had but very little time to write new posts.

So, here it is, at last: the rest of the series.

The idea is to position a zone above another one in order to create the perception that the smaller one, the one above, is in fact real content, whereas the bigger zone behind it works as a background.

It is one of the elements that increase the saliency of an element within a page.

It goes without saying that this principle in itself will not be enough but it complements the principles of similarity, proximity, good continuity, …

Just have a look at the two analysed screens.

On the central buttons of the Ethias site, the set of basic principles is strengthened by the principle of Smallness/Area. This gives the buttons added saliency.

Tout d’abord merci à tous pour les questions posées par comment, twitter ou email. Je prendrai le temps de traiter, par un article adapté, les demandes qui peuvent intéressé la communauté des professionnels de l’expérience utilisateur.

Dushan (http://www.ressources-marketing-internet.com/), que je remercie, souhaite avoir des précisions sur la pertinence de l’analyse d’un écran en nuances de gris.

Lorsqu’un utilisateur parcoure un site web son système visuel est très important puisque sans lui le cerveau ne recevrait aucune information de l’écran présenté dans le navigateur.

Les informations visuelles pénètrent dans l’oeil et sont réceptionnées par des capteurs sur la rétine de l’oeil. Il y a deux grands types de capteurs : les cônes et les batonnets.

Dans la rétine il y a environ 125 millions de batonnets pour 5 millions de cônes. Si les cônes sont de 3 types (rouges, verts et bleus), les batonnets sont d’un seul type et ne permettent de voir qu’en nuances de gris.

Voici donc une première raison pour laquelle l’analyse d’un écran en nuances de gris est importante : moins de 1% des récepteurs sont capable de traiter les couleurs.

Les batonnets sont également responsables de capter la luminosité des différentes zones d’une pages web présentées sur l’écran : les contrastes. En fait lorsque l’on parle de “contraste”, on fait référence à des variations d’intensité lumineuse. Les bâtonnets sont majoritairement dans la zone de vision périphérique.

99% des capteurs de l’oeil (bâtonnets) traitent les informations d’une page web en nuances de gris.

1% des capteurs (cônes) qui traitent les couleurs sont rassemblés en majorité dans une zone appelée Fovéa, seuls quelques cônes sont situés en vision périphérique.

Sur un écran 1024, en simplifiant, un oeil voit net (vision fovéale) sur 7% de la largeur de la page. Cette zone nette contient presque exclusivement des capteurs traitant les couleurs.

Les autres 93% de la page sont vue avec beaucoup de bâtonnets et peu de cônes. Donc les couleurs perdent leurs vivacités et la vision devient de plus en plus floue au fur et à mesure que l’on s’écarte de l’endroit où l’oeil regarde.

Si on résume :

La majorité de l’écran est vue de manière floue, en perdant progressivement des informations sur les couleurs au profit des nuances de gris. Voilà la raison pour laquelle analyser les écrans en nuances de gris est important.

Un exemple sur le design de notre nouveau site qui sortira dans quelques semaines

Le bouton “View Case Study” est important, sera-t’il vu?

Commençons par l’analyse des bâtonnets (nuances de gris) : en fixant chacune des croix placées dans l’écran, le bouton est facilement visible par son contraste en nuances de gris.

En simulant la vision périphérique sur une des croix, le bouton reste très visible même flou.

Continuons maintenant avec l’analyse des cônes (couleurs) : en fixant chacune des croix, l’information colorimétrique vient renforcer le contraste en nuances de gris du bouton.

En vision périphérique, le bouton est très bien visible.

Conclusion :

- Bâtonnets : OK
- Cônes : OK

Si je veux donner une priorité visuelle à un bouton plus qu’à un autre, J’utilise les mêmes principes pour diminuer l’importance visuelle des éléments “Interested” et “Stay tuned !” en diminuant la saillance en nuances de gris et en ne mettant aucune couleur.

A vous de jouer !

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)

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

Behavioral Sciences applied to Landing Page Design.

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