Usaddict - l'ergonomie pratique

Outils de prototypage d'interface

Thierry Bouillot — Wed, 24 Feb 2010 20:00:00 +0100

Avant même d'attaquer pleinement la conception graphique d'une interface, il est nécessaire de poser le tout sur papier... mais cela dépend du coup de vos compétences en la matière! Passez plutôt au numérique, c'est plus propre et y'a pas besoin de gomme!

Pour élaborer rapidement et concrètement l'agencement de l'information (et le zoning) et des fonctionnalités d'une future interface, le maquettage en fil de fer (wireframe) est souvent un passage obligé de l'approche ergonomique. Comme le dit Jean-François Nogier dans son ouvrage : "Le prototypage est la clé de voûte du développement itératif".

Que l'on soit à l'aise ou non avec un crayon à papier, quand un client veut pouvoir se représenter concrètement sa future interface, l'esthétique du wireframe a tout de même son importance. De nombreux outils sont à portée de souris et tout dépend de ce que l'on veut en faire. Je vous en propose donc quelques uns, du plus basique au plus étoffé, du plus statique au plus fonctionnel (n'hésitez pas à nous en suggérer d'autres!).

Les plus populaires
Axure, assurément le meilleur compromis en termes de possibilités de prototypage statique ou fonctionnel et d'architecture de l'information, sans connaissance en programmation. Il génère même du javascript en toute transparence (rendu au format html). Un module supplémentaire permet le partage de prototype en ligne et l'ajout de commentaires aux pages, de code Google Analytics, etc. (module ax-admin). Un dernier argument pour être convaincu est la génération automatique de spécifications fonctionnelles de belle facture;
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
Omnigraffle, une application mac très populaire, orientée plutôt à l'origine pour concevoir de jolis diagrammes et des graphismes vectoriels. Elle tire son épingle du jeu par la possibilité d'échanges avec Visio certes uniquement sur PC, mais également par une très riche bibliothèque d'icônes et de patterns sur Graffletopia. Superfiction le vend très bien sur ce post!
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
Balsamiq Mockup, utilisable facilement en ligne (Flex) ou en logiciel, le rendu ressemble à du dessin bien qu'il reste très efficace (exportable au format png (et xml avec le logiciel)), question de goût;
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
Les valeurs montantes
FlairBuilder, une application AIR plutôt efficace, avec de nombreux patterns personnalisables et configurables. Pour l'instant, il ne peut exporter qu'en image, mais ils promettent d'autres formats (html, flex) et il semble déjà possible d'importer des maquettes réalisées avec Balsamiq Mockups;
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
Justinmind , un autre très bon compromis en termes de possibilités de prototypage statique ou fonctionnel sans connaissance de la programmation,… comme son grand frère Axure ! il a par contre quelques fonctionnalités supplémentaires tels que l’aide au positionnement des objets ou la possibilité de collaboration avec les clients (serveur dédié et ajout de commentaires en ligne). Un point fort qui le démarque également est l'interactivité avec des données sous forme de tableaux par exemple (ex: ajout, modification, suppression);
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
WireframeSketcher, un plugin de l'environnement Eclipse (environnement de développement multilangage et libre), dédié à la création de prototypes. Malgré une liste de patterns assez basiques, il offre un gain de temps sans conteste pour l'intégration et le développement d'application;
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
Encore quelques autres
Pencil Sketching, une extension de Firefox contenant l'essentiel des éléments fonctionnels de tout interface (bouton, liste déroulante, zone de texte, etc.). Vraiment très basique et assez configurable (rendu exportable simplement au format png);
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
MockupScreens, un logiciel de wireframe plutôt basique et facile d'utilisation, générant une maquette fonctionnelle (rendu au format html);
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
Oversite, un logiciel de wireframe assez basique, permettant en particulier de définir l'architecture d'un site web et les liens entre pages, et donc une maquette fonctionnelle (rendu exportable au format html);
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
Gliffy, plutôt généraliste dans la manipulation d'objets, il permet néanmoins un maquettage efficace bien que basique (rendu au format html);
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
Protoshare, uniquement en ligne, ce logiciel permet de créer des maquettes très riches dans un espace collaboratif où les différents intervenants pourront apporter leurs contributions au projet;
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel
Prototype Composer de Serena, un logiciel complet de la définition de l'architecture de l'information à l'interface finale (rendu exportable simplement au format Visio). Toutefois, la richesse des fonctionnalités ne fait pas forcément l'efficacité des maquettes;
Patterns	Fonctionnel	Rapidité	Prix	Le site officiel

Il existe encore un bon petit nombre d'applications susceptibles de vous convaincre de l'utilité du maquettage dans une phase de conception, citons notamment : FluidIA, Foreui, Microsoft Expression - Sketchflow. Certes, d'autres logiciels comme Dreamweaver, Flash, iRise ou Visio permettent de faire des prototypes bien plus puissants et fonctionnels... mais leur maniabilité demande davantage de temps et/ou de connaissances (programmation, interaction avec des bases de données, etc.).

Touche d'humour:
Si vous avez la possibilité d'amener votre porte de frigo en réunion, je vous conseille également guimagnets... une autre manière de faire du maquettage un jeu?!

1ère publication (3/12/2008)
1 - Mise à jour suite au commentaire de Eric-superfiction: Ajout de Gliffy et Protoshare, et ajout de notations détaillées (3/6/2009)
2 - Mise à jour suite aux commentaires de Régis sur de nouvelles fonctionnalités d’Axure et l’arrivée à maturité de Justinmind (8/9/2009)

3 - Mise à jour face à la percée de FlairBuilder et WireframeSketcher, et l'omission volontaire mais temporaire d'Omnigraffle, ainsi que quelques petits ajustements de détails (24/02/2010)

Choisir des couleurs ergonomiques et esthétiques

Thierry Bouillot — Mon, 15 Feb 2010 18:03:00 +0100

En conception d'interface, le choix des couleurs n'est pas toujours chose facile car chacun peut avoir son avis : Le client a ses préférences, l'ergonome a ses recommandations, le graphiste a son style, le marketing ses souhaits, la communication sa charte, le commercial...

Pour prévenir tout conflit et parce qu'Usaddict est pour la paix des équipes de conception, voici quelques outils bien utiles pour guider les choix de couleurs ergonomiques. Car ce qui compte finalement, c'est que l'utilisabilité et le confort de l'utilisateur orientent les recommandations ergonomiques et bien sûr que le client soit pleinement satisfait.

Les couleurs d'une interface participent aux sentiments de confort et d'adhésion de l'utilisateur. Elles vont valoriser l'identité visuelle du "produit" en créant un univers dans lequel l'utilisateur va évoluer. Ce travail de recherche graphique s'appuie idéalement sur une collaboration étroite entre l'ergonome et le designer pour au moins deux raisons :
- le choix des couleurs sera vraiment guidé par les attentes des utilisateurs et les valeurs du produit final;
- la palette de couleurs sera autant à visée esthétique que fonctionnelle ...et Canapé rouge ne tapera plus sur son graphiste ! (cf. "Conseil #3 : Grisonnant")

Voici donc quelques outils et un peu de très bonne lecture avec Smashing Magazine et Usabilis.

Des outils indispensables :

	Color Contrast Analyser (en), permet de comparer deux couleurs en un double coup de pipette (i.e. la couleur du corps de texte et le fond), et de calculer le rapport de contraste. Vous pourrez alors vous assurer que votre interface respecte les normes de la WCAG (Normes d'accessibilité du W3C pour les sites internet et les logiciels) en termes de contraste, de lisibilité et de confort de lecture des textes selon leur taille. Télécharger la version française ici. Léger et sans installation, on peut même l'emmener dans sa clé usb.
	Wearecolorblind.com Un catalogue en ligne de patterns tous compatibles avec les altérations visuelles liées au daltonisme
	Un superbe outil interactif d'Adobe (en flex forcément) pour définir un ton, une ambiance, ou même un esprit, grâce à un large choix de palette à partir de mots clés
	Colorpix Un petit logiciel pourvu d'une pipette et permettant de récupérer très vite les coordonnées d'une couleur sous différents formats (RGB, HEX, CMYK, etc)
	ColourLovers.com Un site français dédié aux palettes de couleurs et leurs usages dans différents domaines de la communication graphiques et multimédia.

Pour aller plus loin :

Smashing Magazine nous offre de formidables articles de fond abordant :
- La signification des couleurs :
Color Theory for Designers, Part 1: The Meaning of Color
- La terminologie associée aux couleurs :
Color Theory For Designers, Part 2: Understanding Concepts And Terminology
- La création de palettes de couleurs :
Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Consulter la présentation de la charte graphique par Usabilis, un document de spécifications d'interface par excellence : La charte graphique

Bonnes inspirations!

Le Kit de Maquettage, un outil pour la conception d'interface

Jules Leclerc — Mon, 25 Jan 2010 14:01:00 +0100

Pour commencer 2010 sous le signe de l’ergonomie, Usabilis a conçu sa carte de vœux sur la thématique du maquettage papier.
Un clin d’œil, mais pas seulement…

Nous recommandons cette pratique de conception. Dans la phase de construction des écrans, elle a pour avantage de lever la barrière de l’outil informatique et de faire participer le client et même l’utilisateur final. C’est convivial, souple et efficace.

Bonne année à tous !

Cliquez ici pour obtenir au Kit de Maquettage d’interface

Quand les pop-in vous embobinent

Thierry Bouillot — Wed, 06 Jan 2010 10:30:00 +0100

Les navigateurs internet disposent tous d’un système anti-pop-up publicitaire. Les spécialistes du marketing direct doivent donc déployer de nouvelles ruses pour dévier les internautes vers les pages publicitaires. Weborama nous offre depuis quelques temps un étonnant exemple de ce type de pratique en détournant le pattern du bouton de fermeture.

Weborama a peut-être compris que les bannières publicitaires sont jugées trop intrusives par la plupart des internautes. La fenêtre pop-in semble être une nouvelle arme du marketing "ciblé" car elle s'ouvre et se ferme plus discrètement. Mais, "il y a tromperie sur la marchandise" !

Pour fermer cette fenêtre, l'internaute clique naturellement sur le bouton rouge en haut à droite de la fenêtre. Or, ce bouton l'envoie vers le site de l'annonceur ! Le détournement de la fonction attendue est original et surtout rusé.

Weborama a joué sur la ressemblance des traits utilisés pour ce bouton : un W blanc pas si loin d'un X, et la couleur rouge en fond ! (cf. Théorie d'Integration des traits). Les patterns évoluent mais restent des références en termes de confort et d'efficacité de navigation tant qu'ils sont bien employés (cf. bonnes pratiques des design patterns).

N'est-ce point une vilaine pratique ? Avez-vous rencontré d'autres détournements de ce genre ?

Petit dictionnaire du design numérique

Thierry Bouillot — Thu, 15 Oct 2009 15:19:00 +0200

Le Petit dictionnaire du design numérique 2009 est arrivé ! Notre designer préféré (Jules Leclerc) y a contribué !

Pour tout savoir sur le design numérique ou parfaire votre vocabulaire en la matière, n'hésitez pas à vous procurer un exemplaire. Il contient 100 définitions des notions clés du design numérique, et est disponible via le lien suivant : www.designersinteractifs.org/dictionnaire/

Design Patterns pour la composition d'interfaces

Thierry Bouillot — Thu, 08 Oct 2009 17:36:00 +0200

Les design patterns sont des schémas de conception, c'est-à-dire des modèles de composants fonctionnels d'une interface répondant à des cas typiques d'interaction. Par exemple, comment présenter un calendrier ou un processus par étapes. Les designs patterns sont un excellent point de départ à un travail de conception.

Nous avions recensés plusieurs sites consacrés aux design patterns et une petite mise à jour s'imposait.

	Yahoo! Design Pattern Library - developer.yahoo.com/ypatterns LE catalogue de Yahoo! et ses design patterns, de quoi justifier leurs bonnes pratiques. Une petite mine d'or!
	We are colorblind - wearecolorblind.com Un génial catalogue de patterns détaillés et surtout compatibles (a priori) avec le daltonisme
	Quince Infragistics -quince.infragistics.com Un très riche et pratique catalogue en Silverlight, à découvrir très vite!
	Welie - welie.com/patterns Une bibliothèque détaillée et riche de design patterns. Des recommandations accompagnent chaque modèle ainsi que des exemples d’interfaces (malheureusement inactif depuis 2008).
	Designing Interfaces - designinginterfaces.com Le site est très riche. Il traite à la fois des sites web et des interfaces logicielles. Il reprend en partie l'ouvrage de Jenifer Tidwell (Designing interfaces, une sacrée référence en la matière).
	UI Pattern - ui-patterns.com/patterns Un catalogue de design patterns avec de nombreux exemples variés issus du web. Il s'enrichit en continu par la contribution de tout un chacun!
	UI Pattern Factory - uipatternfactory.com Une initiative finlandaise d'échange de patterns utilisant carrément Flickr.
	Pattern Browser - patternbrowser.org Un bon gros catalogue de patterns offert par l'Université de Postdam dans la suite de son prédécesseur ci-après.
	Info Design Patterns - interface.fh-potsdam.de/infodesignpatterns/patterns.php Un catalogue à la navigation originale et dynamiques, avec un contenu concis et des démonstrations interactives.
	Open Design Patterns - patterns.holehan.org Un petit catalogue orienté logiciel, basé sur une initiative d'échanges (malheureusement inactif depuis 2008).

Concevoir AUSSI pour les daltoniens

Thierry Bouillot — Thu, 24 Sep 2009 10:57:00 +0200

Il est une anomalie visuelle très peu prise en compte sur internet : le daltonisme. Au moment de la conception d'un site web, le développement oublie souvent que 8% des hommes sont daltoniens... soit presque 1 sur 10 ! Comment prendre en compte cette problématique dans la conception d'interface? A quels outils faire appel?

Le Daltonisme, en bref

Le daltonisme est une affection héréditaire de la vue qui empêche de discerner certaines couleurs, en particulier le rouge (protanomalie) et le vert (deutéranomalie, 8% de la population) (cf. du plus court au plus complet: france5, wikipedia fr & wikipedia en). Anopies et anomalies sont proches dans leur impact sur la perception des couleurs bien que les premières soient un peu plus sévères que les secondes. La perception de certaines couleurs étant partiellement ou totalement altérée, le spectre de couleurs parait moins nuancé alors que la majorité y verra de multiples couleurs et de multiples mots pour les différencier!

Toutefois, il convient de rester vigilant car les daltoniens n'ont que rarement des affections sévères et sont surtout fort habitués à leur propre référence en termes de perception des couleurs!

Quelques exemples des affections les plus sévères en comparaison avec la vision normale:

Vision normale

Deuteranopie (8% des hommes)

Protanopie (1% des hommes)

Tritanopie (proche de 0%)

Attention: le fond blanc devrait normalement être également impacté par l'affection.

Sur la base du graphisme "Chroma" - Jules Leclerc

Des outils pour la conception

	Color oracle Simulateur de daltonisme sur tout l'écran de l'ordinateur (il s'intègre dans la barre des tâches de Windows; il existe également pour Mac et Linux) http://colororacle.cartography.ch/
	CONTRAST-A-WEB V2.0 Application permettant des compositions de couleurs tout en vérifiant leurs compatibilités avec les normes de contraste, de lisibilité du référentiel WCAG 2.0. http://contrast-a.dasplankton.com (version en ligne) http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&offeringid=10763&marketplaceid=1 (version application air)
	Vischeck Plugin pour photoshop, très pratique, pour appliquer les affections les plus sévères aux images de votre choix. http://www.vischeck.com/
	ColorDoctor Application simulant les diverses daltonismes en prenant en compte les niveaux de gris et les caractéristiques des couleurs http://www.fujitsu.com/global/accessibility/assistance/cd/
	ColorSchemeDesigner Application en ligne dédiée d'abord à la recherche de nuance mais qui, comme beaucoup dans le même genre, propose de visualiser les variantes de daltonisme. http://colorschemedesigner.com/
	SimDaltonism Application pour MacOsX, simulateur des variantes de daltonisme et équivalent en simulation à ColorOracle http://michelf.com/projects/sim-daltonism/

Blogs sur l'ergonomie (fr)

Thierry Bouillot — Thu, 10 Sep 2009 11:14:00 +0200

Rester attentif aux métiers de la conception d'interface et à l'ergonomie n'est pas chose facile... et pourtant de nombreux professionnels partagent expériences et flâneries numériques à travers leur blog.

En voici quelques-uns de la sphère francophone :

	AccessiBlogue - accessibiliteweb.com/accessiblogue Blogue (québécois) promoteur de l'accessibilité des contenus Web aux personnes handicapées et vieillissantes, de la normalisation (WCAG, SGQRI, etc.) et enjeux.
	Designers interactifs - designersinteractifs.org L’association des designers et autres professionnels des médias numériques, fait la promotion régulièrement des initiatives et des actualités du design numérique « sous forme matérielle (téléphone, objets connectés, etc.) et immatérielle (interfaces web, logicielles, jeux, vidéos, etc.)
	Ergologique - ergologique.com Blog proposant des conseils pratiques et originaux autour de la conception centrée utilisateur, l’utilisabilité, etc.
	Ergonomic Garden - sqliagency.com/blogs/ergonomicgarden Les experts ergonomie du groupe SQLI abordent des questions concrètes de la démarche ergonomique dans l’accompagnement de projets informatiques.
	Ergonomie, Ruby on Rails et Architecture de l’information web (2.0) : Le blog de Frédéric de Villamil - t37.net Frédéric de Villamil, QA Manager, nous livre une belle variété d’actualités pour les métiers liés à l’ergonomie du web.
	Ergophile : Analyse de l’ergonomie web - ergophile.com Jacinthe Busson nous fait découvrir des actualités, des découvertes et bien des étonnements sur l’ergonomie et l’expérience utilisateur.
	Expressions.be - expressions.be Gaetano Palermo nous fait partager sa passion pour l’écriture dans les différentes formes et expressivités qu’elle revêt à travers le web.
	Frédéric Cavazza : fredcavazza.net Dans ce blog, Fred Cavazza nous fait partager ces découvertes, réflexions et tendances du web, de l’utilisabilité, du e-marketing et web 2.0.
	InterfacesRiches : interfacesriches.fr Encore (!) un blog de Fred Cavazza (et quelques autres contributeurs), cette fois-ci sur l’actualité des interfaces riches et des dernières tendances, que ce soit sur les aspects fonctionnels et businness.
	SimpleWeb : simpleweb.fr Autre blog de Fred Cavazza, où est fait la part belle à tout ce qui touche à la simplification et l’utilisabilité des interfaces web, logiciel et plus si affinité
	RichCommerce : richcommerce.fr Oui (!), encore un blog de Fred Cavazza, plus spécialisé dans le domaine du commerce électronique, sur l’usage des applications riches et de leur apport en termes d’interactivité et d’attractivité
	Kiouv.fr, utilisabilité et bonnes pratiques sur le Web – kiouv.fr Cédric Magnin recueille réflexions et actualités autour de l’utilisabilité dans le quotidien du web et des bonnes pratiques.
	Linearis, Blog : linearis.fr/blog Maël Poulain, web designer, anime ce blog original et surprenant entre anecdotes, actualités et web design.
	Le blog de pascal Magnenat - pascalmagnenat.ch Pascal Magnenat nous fait partager son regard attentif et surprenant sur l’expérience utilisateur et tout ce qui touche d’une manière générale aux interactions homme-machine.
	QualityStreet - qualitystreet.fr Jean-Claude Grosjean, facilitateur des méthodes et des processus de développement logiciel, nous livre des clefs de la gestion de projet à travers notamment l’ergonomie des I.H.M., les personas et les méthodes agiles.
	60 questions - blog.60questions.net Jean-Marc Hardy livre son expérience et ses réflexions sur les bonnes et mauvaises pratiques en matière de conception de sites web, avec un accent particulier pour les innovations qui permettent d’enrichir ou de simplifier le Web.
	SuperFiction : marketing interactif, experience utilisateur, conception multimedia - superfiction.net/blog Eric DI POL nous propose régulièrement des actualités autour du marketing interactif et de la conception d’interface multimédia.
	Utilisabilité.info : Le blog de Stéphanie Le Rouzic - utilisabilite.info Stéphanie Le Rouzic attire notre attention sur les actualités, la pratique de l’utilisabilité et des méthodes de conception centrée utilisateur.

Je m'empresse de vous en lister quelques autres d'ici peu, mais n'hésitez pas à me faire part des vôtres!

1. Mise à jour : rectificatifs d'adresse pour le logo d'AccessiBlogue et l'url d'ErgonomicGarden

Mise à jour: "Outils de prototypage d'interface"

Thierry Bouillot — Tue, 08 Sep 2009 12:18:00 +0200

Petite mise à jour du post "Outils de prototypage d'interface" (anciennement "Maquettage express") suite à vos commentaires.

Ferrari met l'ergonomie de l'avant pour la promotion de son nouveau bolide

Loïc Nunez — Fri, 04 Sep 2009 15:21:00 +0200

Ferrari produit des véhicules de rêves…et ergonomiques. Cet effet d’annonce n’est pas anodin dans l’univers du luxe et de la performance. L’ergonomie, si elle devait avoir un parti pris, serait plutôt celui de la fonctionnalité, alors que le marché du luxe, l’univers de Ferrari, préfère communiquer sur d’autres dimensions. La fonctionnalité ne ferait pas rêver.

Le monde évolue. Il admet des réalités inavouables hier. Le luxe sans le côté fonctionnel, utile et acceptable, n’est plus. Ainsi, le monde ‘froid’ de l’ergonomie se découvre un nouveau militant, au travers d’un marchand de rêve qu’il n’est nul besoin de nommer.
En 2003, une recherche sur un projet Européen m’avait conduit dans les bureaux de Pininfarina en Italie. Notre contact sur place me faisait comprendre que son entreprise voulait mettre l’emphase sur l’ergonomie de ses tableaux de bord. Je n'ai pas sauté sur l’occasion, mais il disait vrai. Les résultats sont là, voyez la photo du tableau de bord de la nouvelle 458 Italia.

(image HD originale ici)
Extrait tiré de l'article de la revue EVO :
"Quant à l'ergonomie, Ferrari déclare qu'il s'agit là de : Un pas en avant significatif dans le concept d'interface ergonomique entre la voiture et son pilote ». Le cheval cabré dévoile quelques nouveaux clichés de sa nouvelle sensation et un certain nombre de détails à propos de ladite ergonomie du poste de pilotage. Les principales commandes sont regroupées sur le volant, tandis que le reste des actionneurs se situe sur deux petites avancées du tableau de bord de part et d'autre du volant, toutes deux tournées vers le conducteur" (lire la suite sur l’article original)

Les 10 conseils de l'été

Thierry Bouillot — Tue, 28 Jul 2009 12:04:00 +0200

Profitez de l'été pour garder votre esprit en éveil... quelques principes d'ergonomie tirés du blog dexodesign.com...

1/ Comprendre le problème avant de le résoudre (et éviter les maquettes faites à la va-vite).

2/ Faire des essais avant de peaufiner (et bien faire la différence entre les souhaits et les spécifications - "sélection" vs. "combo-box").

3/ Valider la conception et l’ergonomie avant de se lancer dans la réalisation technique (codage).

4/ Bien détailler les fonctionnalités et les processus plutôt que chercher à produire en quantité.

5/ Faire passer la facilité d’utilisation avant la simplification des méthodes de développement.

6/ Un prototype approuvé par des utilisateurs vaut plus que les points de vue d’experts.

7/ Ne pas s’obstiner à recopier les erreurs précédentes sous prétexte de cohérence.

8/ Éviter les erreurs.

9/ Le contexte est important (Où suis-je ? Comment suis-je arrivé ici ? Où puis-je aller ensuite ? Où en suis-je maintenant ?

10/ Les espaces sont utiles (« ...plus vous ajoutez de contenu, plus vous vous détourner de l’essentiel. Chaque élément nouveau sur la page réduit votre attention de l’ensemble. » - Paul Boag).

Traduit du blog dexodesign.com

Ressentir à distance la texture d'un objet

Loïc Nunez — Fri, 24 Jul 2009 19:59:00 +0200

Révolution du Web marchand ou gadget de plus à collectionner sur nos tablettes ?

Tout pourrait dépendre de la finesse sensorielle qu'offre le périphérique, et de la perception qu'en auront les clientèles des sites Web offrant ce feedback.

Encore une fois, revenons en aux sources de l'analyse : déterminer dans quels contextes d'usages une telle information sensorielle serait utile, appréciée, comprise, acceptée... A partir de là se dessineront les applications potentielles. En plus du commerce, de nombreux domaines pourraient être concernés, comme les environnements de conception, les jeux, l'archéologie, la physique, etc.

Billet tiré d'une nouvelle sur Technaute

Une vision du futur made by Microsoft

Loïc Nunez — Fri, 10 Jul 2009 12:10:00 +0200

Des interfaces innovantes, des modes d'interactions avancés, des contextes d'usages très variés...Microsoft, comme beaucoup d'autres centres de R&D à travers la planète propose une vision du futur à + 10 ans. Ces outils augmentent la réalité en superposant des informations qui normalement ne seraient pas accessibles aux usagers. Sommes-nous prêts à faire le saut dans une réalité enrichie mais plus complexe ? Séquence futurologie en vidéo.

Y a-t-il un usager dans la salle ?

Loïc Nunez — Wed, 25 Feb 2009 16:58:00 +0100

J'ai la nette impression que le monde informatique évolue beaucoup plus lentement qu'il ne le pense. Je me rends compte que c'est un domaine très jeune comparé à d'autres comme le monde automobile par exemple. D'ailleurs, cela ne viendrait à l'idée d’aucun constructeur de mettre en vente ses voitures sans s'être assuré qu'il y a avait un réel besoin pour son modèle, et sans l'avoir testé et retesté. Et nous, dans le monde informatique, on continue à dire que ces analyses de besoins et ces tests utilisateurs ne sont pas essentiels, que ça coûte cher, que ça prend du temps, et j’en passe.

Retour en arrière.
J'ai en mémoire le projet d'un client sur une application dédiée aux ressources humaines. L'objectif était d'installer un nouveau système au sein d'un important groupe permettant de gérer tous ses processus RH. Population concernée : plus de 120 000 personnes à travers le monde...
18 mois après le début du projet et quelques mois après les premières mises en ligne, on m'appela pour comprendre ce qu'il se passait avec 'certains usagers' qui auraient des difficultés d’usages…

Proposition d’une méthode "traditionnelle" :
- analyse experte, basée sur les usages identifiés au sein du groupe ;
- entretiens d’observations sur sites avec les différents types d'usagers pour mieux comprendre leurs contextes d'usages, et surtout leurs activités et besoins réels
- tests utilisateurs avec les différents profils d'usagers
- prototypage fonctionnel incluant les recommandations ergonomiques
- charte ergonomique

Anecdote principale : En écoutant la synthèse de ce que faisaient réellement les usagers, leurs besoins et enjeux réels, l’équipe projet était abasourdie. Le décalage entre ce qui a été formalisé par des "groupes de travail experts métiers" et la réalité du terrain était abyssal. La fameuse différence entre le travail prescrit et le travail réel ! Par ailleurs, le système développé était principalement une liste de fonctionnalités, sans réels regroupement des contenus et fonctionnalités par processus et activités fondamentales. Les usagers devaient donc, à grand frais cognitifs, se construire une représentation mentale du système afin de réaliser le mieux possible leurs activités au quotidien.

Conclusion du client : beaucoup de temps et d'énergies pour discuter de détails métier, sans s'assurer que les fondamentaux, les usagers finaux, soient suffisamment considérés.

Fin de l'histoire : le client était finalement ravi de la démarche et décida d'inclure un ergonome dans chaque nouvelle phase de son projet. L'objectif étant de toujours confronter les besoins réels des usagers avec la vision des experts métiers du groupe, responsables des cahiers des charges de chaque projet…

Note : gain de temps, d'efficacité, de validité, de performance...une méthode "traditionnelle" qui a finalement du bon dans le monde informatique, vous pensez-pas ?

7 clés de l’entretien d’utilisabilité

Thierry Bouillot — Mon, 05 Jan 2009 13:11:00 +0100

L’entretien est au cœur d'une grande variété de méthodes utilisées en conception centrée utilisateurs tels que le focus group, l’enquête contextuelle ou le test utilisateurs. L’intervieweur aguerri peut mener des entretiens pour mettre en évidence les éléments les plus pertinents du point de vue des participants sur une tâche ou un produit, avec l’habileté de ne pas introduire de biais. Michael Hawley propose 7 clés de l’entretien d’utilisabilité dans un article sur UXmatters, dont voici une traduction libre.

La rédaction de scripts d’entretien permet à l’ergonome de vérifier les questions et relances afin d’obtenir des réponses utiles et non-biaisées de la part des participants. Ce qui fait que les compétences de l’intervieweur impactent directement sur la qualité et la précision des résultats et donc des décisions ultérieures sur la conception. La situation la plus critique est sans nul doute en plein entretien quand il est nécessaire de réagir rapidement pour une nouvelle intervention. D’après l’expérience de Michael Hawley, c'est là que le potentiel d'introduire des biais est le plus grand. D’autant que l’entretien n’est pas fait que de questions, car il s’agit aussi de prendre en compte le langage du corps, détecter l’auto-censure ou trouver le bon équilibre entre la conduite de l’entretien et l’écoute du participant.

Les 7 clés de l’entretien

1. Définir les attentes.

Généralement, les participants ne sont pas familiers du processus de conception centrée-utilisateur. Le recruteur aura pu leur donner une brève description du sujet de l’entretien, mais il est très probable que les participants n'ont pas une idée claire du pourquoi de leur présence. Ils peuvent être anxieux, nerveux ou sceptique quant à vos intentions, ce qui peut influer sur les réponses qu’ils donneront. Afin de minimiser cet impact, assurez-vous de décrire le but de l'entrevue, votre rôle dans le processus de conception, et comment l’entretien va se dérouler. Y compris des détails tels que la raison de votre prise de notes ou comment vous exploiterez les résultats.

2. Se taire et écouter.

En tant qu’ergonome, il vous est facile de vous imprégner du script d’entretien que vous avez construit, de toutes les questions que vous vous voulez poser, et de vos propres idées sur les points saillants à mettre en évidence. Il est facile de diriger la conversation et passer à travers l'interview à un rythme qui est trop rapide à suivre pour un participant. D’après l’expérience de Michael Hawley, les participants soulèvent souvent les points les plus intéressants seulement une fois qu'ils ont eu l’opportunité (et donc le temps) d'intégrer et de réfléchir à la question. L’écoute appropriée implique de minimiser les interruptions et de ralentir le rythme de l'entretien pour donner aux participants la possibilité de confirmer leurs déclarations ou de fournir d’autres impressions.

3. Éviter les questions biaisées.

Poser des questions fermées ou biaisées est vraiment trop facile. Même une simple question comme Comment appréciez-vous ce processus ? suggère inconsciemment aux participants qu'ils devraient apprécier plus ce processus qu’ils ne devraient le déprécier. Dans notre volonté d’interaction, ce genre de questions échappent parfois aux plus aguerris des intervieweurs. Quelques exemples :

Pas bien	Bien
Comme appréciez-vous cet écran de connexion ?	Que pensez-vous de cet écran de connexion ?
Est-ce que cette fonctionnalité vous paraît utile ?	Trouvez-vous cette fonctionnalité utile ou inutile ? Pourquoi ?
Trouvez-vous que c’est une bonne idée ?	Est-ce que pour votre travail, cela pourrait être vraiment pratique ou au contraire pas du tout pratique ?

4. Être sympathique.

Le script d’entretien est certes utile, car il aide à se souvenir de tous les points à traiter. Mais se contenter de lire le script peut avoir un effet négatif sur le dialogue entre un enquêteur et un participant. Résultat: le dialogue est formel, sans implication des participants qui répondent au plus vite, au plus simple possible, afin de passer à la question suivante. De bout en bout, il est nécessaire de développer une relation amicale et un style ouvert avec les participants : regarder dans les yeux, se rappeler du nom de chaque participant, adopter un style décontracté qui favorise la liberté de pensée et de prendre en compte toutes les réponses des participants.

5. Mettre de côté ses hypothèses.

Il est dans la nature humaine de laisser sa propre perception d'un sujet donné influencer vos questions et même les réponses que vous attendez de la part des participants. Vous pouvez aussi être biaisé par les réponses que vous avez entendues d'autres participants précédemment dans l’étude. Même s’il est impossible d'éviter totalement ces influences, il est préférable de se les rappeler avant de commencer l’entretien afin d’en minimiser les effets ensuite. Cela vaut en particulier pour les derniers entretiens d’une session, pour garder l’esprit ouvert et réceptifs à d'autres points de vue.

6. Éviter les généralisations.

Dans de rares circonstances, il peut être approprié de demander aux participants de prendre la parole au nom d'autrui ou de prévoir la manière dont certains groupes de gens réagiraient à certaines situations. Pour autant, les meilleurs entretiens sont ceux dans lesquels les participants parlent de leurs propres expériences et préférences. L’ergonome doit détecter quand les participants tendent à généraliser leurs réponses ou de répondre au nom des autres. Dans de tels cas, l’ergonome doit poliment demander aux participants de parler de leurs propres expériences.

7. Ne pas oublier le non-verbal.

Les participants ne communiquent pas uniquement verbalement. Le langage corporel et le ton de la voix transmettent beaucoup de choses sur leur « niveau de confort » avec l'entretien en général, leurs points de vue sur une tâche ou un produit, leurs opinions sur l’ergonome ou simplement l'objectif de l’étude. Les ergonomes qui se concentrent trop intensément sur leur script et manquent ces signes non-verbaux, risquent de ne pas détecter la nervosité, la crainte ou le scepticisme de certains participants. L’ergonome doit reconnaître ces indices et réactions émotionnelles. Il doit être suffisamment souple pour adapter la session et veiller à ce qu’il puisse interpréter correctement les réponses des participants et obtenir le fruit de ses efforts.

Conclusion de Michael Hawley

Comme Dumas et Loring le notent dans leur excellent livre "Moderating Usability Tests", il est difficile de réaliser une parfaite session d’entretiens. Chacun d'entre nous apporte son lot de préjugés et de mauvaises habitudes qui peuvent limiter la fiabilité et l'efficacité des résultats. Cela est particulièrement vrai pour les derniers entretiens, lorsque vous êtes susceptibles d'être fatigué ou que vous avez déjà votre idée sur les résultats de l’étude. Mais en s’imprégnant d’une liste de bonnes pratiques, vous devriez minimiser l'impact de ces écueils et de maximiser le rendement de vos efforts.

Une bibliographie:

Dumas, J. and Loring, B. Moderating Usability Tests. San Francisco: Morgan Kaufmann, 2008.
Hackos, J. and Redish, J. User and Task Analysis for Interface Design. New York: Wiley, 1998.

Firefox, le complice de l'ergonome

Thierry Bouillot — Mon, 15 Dec 2008 11:24:00 +0100

Alors que des navigateurs comme Chrome ou Safari se focalisent sur la facilité d'utilisation et la rapidité d'interprétation des pages web, Firefox reste l'outil incontournable des professionnels du web. Et pour cause, il fourmille d'extensions devenues pour certaines "incontournables". Pour la pratique de l'ergonomie au quotidien, Firefox est sans nul doute notre meilleur ami! Voyez plutôt cette liste d'extensions sans pareil!

Globalement, ces extensions intéressantes concernent les maquettes, les gabarits et l'accessibilité. Certaines nécessitent une connexion pour accéder aux services en ligne. Il y a encore d'autres extensions bien sûr, notamment certaines qui se limitent à quelques compétences en un icône plutôt qu'à un grand nombre de fonctionnalités en une seule barre. Tout dépend du besoin!

Maquettage

	Pencil: permet de créer des prototypes (au format epz et png) simplement et grâce à des éléments classiques des interfaces web et logiciels;
	Colorzilla: récupère le code couleur d'un pixel de la page selon différent format (RGB, Hexadecimal, etc.), avec la possibilité de zoomer au besoin et de cibler l'endroit du code source où se trouve le pixel ciblé (grâce à l'extension FIrebug);
	Fireshot et Screengrab! font des copies d'une page entière ou d'une zone particulière (une sorte de Snagit léger); il y a également Pearl Crescent Page Saver Basic avec un peu moins de fonctionnalité;
	MeasureIt: permet de mesurer une zone rectangulaire particulière de la page en pixel;

Gabarits

	Firebug: permet d'afficher le code source d'une page de manière hiérarchique, afin notamment de cibler une zone particulière de la page. Il permet également de mesurer le temps nécessaire au chargement et à l'interprétation des différents éléments d'une page;
	Web developer: une barre dotée d'un nombre incroyable d'outils tels que cibler et obtenir des informations sur les éléments et leur hiérarchie dans la page, modifier la css en direct, activer/désactiver (css, javascritp), valider la propreté du code et cibler les erreurs, etc., l'extension la plus complète pour les professionnels du web;
	Feng GUI HeatMap Creator: génère le rendu des déplacements et zones d'attention visuelle, à la manière de l'eye-tracking. L'algorithme est basée sur des modèles classiques de l'attention visuelle en psychologie cognitive et des résultats d'études oculométriques ;
	Quick Locale Switcher: permet de modifier la langue préférée par Firefox pour afficher une page, quand la détection de la langue existe pour le site visité;
	IE tab: permet l'affichage d'une page selon le moteur d'Internet Explorer (lorsque ce dernier est installé sur le pc);
	IE NetRenderer: génère une image de la page selon le moteur d'Internet Explorer et les versions 5.5, 6, 7 (et 8 bêta).

Accessibilité

	TAW3: une initiative espagnole qui génère, en un click, l'ensemble des problèmes d'accessibilité selon une analyse basée sur le WCAG 1.0;
	Firefox Accessibility Extension, Ocawatoolbar et WAVE toolbar proposent chacune une barre d'outils complète pour identifier les différents types d'éléments qui font défaut en terme d'accessibilité, et offrent les validateurs de code classiques;
	Yellowpipe Lynx Viewer Tool et Fangs: permettent de visualiser une page comme le visualiseur textuel Lynx, telle qu'elle sera visible ou interprétée pour un mal-voyant;
	Fire Vox: est un synthétiseur vocale permettant de lire autant le contenu de la page visitée (selon la position du curseur ou de la sélection de la souris) que les menus de Firefox lui-même. La voix est par défaut en anglais, et il est possible d'y intégrer une voix française pour 30€;
	Juicy Studio Accessibility Toolbar:génère un tableau des contrastes de couleurs utilisés sur une page selon les propriétés d'affichage et le respect de la norme WAI-ARIA; ColorChecker propose de vérifier dans le même esprit si deux couleurs sont suffisamment contrastées.

Pour plus d'outils ne se limitant pas à FIrefox, allez voir ici chez le W3C. Nous ferons prochainement un post sur les recommandations en accessiblité en particulier.

Certaines extensions ne sont pas encore portées sur Firefox 3, mais il est possible de désactiver la vérification de la version du navigateur pour leur permettent de fonctionner (comment faire ici).

Couleur, design et ergonomie

Paul Petit — Fri, 07 Nov 2008 19:46:00 +0100

Deux livres et un lien utiles à la conception des interfaces. Pour ma part, je m'en sers au quotidien.

Universal Principles of Design

Mon livre préféré sur le Design
Universal Principles of Design par William Lidwell, Kritina Holden, et Jill Butler

Kuler

Un outil très pratique pour trouver des harmonies de couleurs
>> kuler.adobe.com

Designer's guide couleur

Ce livre de Shi Bukawa et Takaha, malheureusement épuisé, permet de sélectionner les bonnes harmonies de couleurs.

Paul Petit
Designer d'interfaces

Quand Microsoft soigne ses utilisateurs… et ses clients (2/2)

Thierry Bouillot — Thu, 06 Nov 2008 19:30:00 +0100

Début 2007, Microsoft a sorti coup sur coup Windows Vista et Office 2007, en jouant la carte de l’innovation ergonomique et des choix de conception parfois déroutants au premier abord. Pour assumer pleinement leur nouvelle vision de l’interface et détourner les critiques, la firme de Redmond s’attache à montrer que ses utilisateurs sont précieux et qu’elle répond toujours mieux à leurs besoins : pour Vista, le Mojave Experiment (1/2) et pour Office, le Ribbon.

Le Ribbon d’Office

La suprématie de Microsoft n’est pas en reste avec sa suite bureautique loin devant la concurrence, OpenOffice s’est fait distancer brusquement . La sortie d’Office 2007 a largement surpris avec son nouveau bandeau (i.e. The Ribbon) ou les SmartArts.

Finis les menus aux mille et une fonctions catégorisées par type d’action, les intelli-menus sensés alléger et prioriser selon les besoins l’affichage de ces fonctions, voici venu le temps de la navigation à onglets aux fonctions iconifiées. Les sous-sous-menus ont disparus et le graphisme est exploité pleinement pour prioriser autrement les fonctions récurrentes : seulement 8 onglets (facilité de mémorisation et principe de proximité gestalien).

A titre de comparaison les bandeaux des versions 2003 et 2007 :

Office 2003

Office 2007

Clairement déroutant aux premiers usages, le ribbon finit par s’apprécier avec le temps : toute nouveauté a besoin d’être appropriée. Profitant de cette remédiation de l’agencement des fonctionnalités, on retrouve les petits icônes classiques de la mise en forme du texte mais surtout de plus gros icônes pour bon nombre d’autres fonctions (facilité de lecture et de pointage souris). Les SmartArts apportent leur lot de graphisme innovant pour enrichir la présentation des tableaux ou des diagrammes. La mise en forme du texte ou des objets est devenue dynamique pour prévisualiser avant d’appliquer tout nouveau format (contrôle de l’action par l’utilisateur).

Toutefois, Microsoft ne peut s’empêcher de défendre sa nouvelle vision de l’interface et des choix de conception. Jensen Harris (Program Manager de l'équipe User Experience) en arrive presque à devoir se justifier en reprenant d’abord tout l’historique de la suite bureautique puis en montrant leur volonté d’être attentif aux besoins de leurs utilisateurs. Sa dernière présentation vidéo en décrit la démarche ("The Story of the Ribbon" en vidéo, 90 min, au format wmv de 146Mo), un résumé en quelques diapos existe également (The Story of the Ribbon, format pdf, 19Mo). Vous laisserez-vous convaincre ?

L’intérêt de sa présentation est sans nul doute de comprendre comment ils ont pu repenser une suite bureautique aussi populaire et en même temps si chargée de fonctionnalités. Il apparaît qu’ils se sont laissés aller à certains tâtonnements au regard de certaines moutures. Il n’est pas certains que l’utilisateur ait été inscrit en amont de la démarche ergonomique tel qu’il semble le promouvoir… Quoi qu'il en aura coûté, c'est l'utilisateur qui doit désormais prendre le temps de réapprendre cette nouvelle façon d'interagir avec cette suite!

Quand Microsoft soigne ses utilisateurs… et ses clients (1/2)

Thierry Bouillot — Mon, 27 Oct 2008 13:00:00 +0100

The Mojave Experiment :

Dernière en date, cette étude made in Microsoft pour faire taire les idées reçues et l’influence des avis négatifs sur le public concernant Windows Vista. Partant de l’idée que rien ne vaut l’expérience utilisateur, cette étude présente la future mouture de Windows avec le doux nom de « Mojave ». Microsoft s’est lancé dans une campagne marketing de 300 millions de dollars pour réhabilité leur système d’exploitation et rétablir la vérité sur Vista. Il faut dire aussi que ce système d’exploitation a souffert dès sa sortie de vives critiques au point que certains constructeurs informatiques ont proposé rapidement un downgrade permettant de retourner à Windows XP, du jamais vu !

Un site web dédié (ici), flanqué d’une très belle mosaïque interactive de 70 extraits vidéos, nous incite à penser qu’il faut simplement le voir pour le vouloir ! (“If people could see Windows Vista’ firsthand, they would like it”).

La méthode en 3 étapes:

- Ils ont demandé en caméra cachée à des utilisateurs ce qu’ils pensaient de Windows Vista, est-ce qu’ils l’avaient déjà utilisé ou vu ? Quelle note ils lui donneraient ?
- Ils ont ensuite montré la soi-disant future interface de Windows pour la tester un peu et se faire leur propre idée
- Et finalement, ils ont confessé à ces utilisateurs qu’il s’agissait de Windows Vista !

Voyez plutôt :

la vidéo de l'étude Mojave

Résultats

Les testeurs ont attribué une note de 8,5/10 à Mojave contre 4,4 pour Vista, et même près de 90% des testeurs ont été satisfait de Mojave et plus de 80% d'entre eux le recommanderaient à un ami.

Le Mojave Experiment préfigure une campagne à l’assaut de sa concurrence Il s’agit ni plus ni moins qu’une réponse à la vague de publicité d’Apple reprenant justement les associations d’idées faites à l’égard de leur concurrent principal. On nous présentait un jeune homme plein de vitalité, d’innovations et d’ouverture (un mac) au côté d’un quadragénaire cravaté (un PC) maladroit, coincé et souvent malade. Souvenez-vous :

une compilation des publicités récentes d'Apple contre Windows

Alors, avec le recul et surtout de l'expérience, vous en pensez quoi de Vista?

Écran géant, double écran

Céline Uguen — Thu, 09 Oct 2008 22:14:00 +0200

Des outils « en vogue », des contraintes spécifiques

Une évolution technologique

Au fur et à mesure de l'évolution des tâches réalisées grâce à différents logiciels et applications, les besoins en visualisation d'information affichées en simultané augmente. De plus, la possibilité de produire à des couts « raisonnables » des écrans plats, TFT ou LCD, permet de faire disparaître la « barrière naturelle » de la profondeur des écrans CRT: un écran TFT de 21 pouces en 2008 sera globalement aussi fin qu'un 15 pouces. De ce fait, on peut observer un accroissement important des diagonales des moniteurs aujourd'hui proposés.

Une évolution des besoins

Mais des configurations spécifiques apparaissent, notamment avec l'apparition des salles de contrôle pour la surveillance de process (industrie laitière, production d'engrais, ou, plus simplement, centrales nucléaires). Ces configurations proposent le plus souvent de multiples écrans, chaque écran étant dédié à la surveillance de l'évolution d'un paramètre ou d'une étape donnée du process. Ces configurations en « écran multiple » sont aujourd'hui courtisées par d'autres types de secteur d'activité que la surveillance de process, et notamment, dans le secteur des services, de la création graphique... Dans certains cas, des « effets de mode » seraient observables, avec l'implantation d'écrans surdimensionnés ou d'écrans dédoublés (voire plus) sans tenir réellement compte des besoins utilisateurs réels.

La recherche d'une amélioration de la productivité

La tentation d'un passage vers un écran « dédoublé » pourrait provenir notamment de diverses études, ayant conclu que l'implantation de ce type de matériel pouvait permettre un accroissement de la productivité significatif, évalué souvent à 10% de gain environ.
Ce gain est à considérer avec prudence: en effet, ce type de matériel correspond à des problématiques spécifiques de tâches multiples. Une mauvaise étude de ces besoins spécifiques, et des besoins fonctionnels métier, pourra amener le choix d'un matériel ne répondant pas à la problématique des utilisateurs.

Avantages et inconvénients: liste non exhaustive

On peut déjà distinguer quelques avantages et inconvénients de ce type de matériel.

Un pré-requis fondamental sera d'apprécier si l'ensemble des applications sont bien compatibles avec le nouveau matériel choisi. Passer à un écran « surdimensionné » ou à un écran « double » va nécessiter que les paramétrages des différentes applications utilisées sur ces écrans puissent amener à un affichage correcte des éléments désirés. Un exemple pratique: dans le cas d'une gestion électronique de document, permettre l'affichage de document en « portrait » peut être pertinent dans une optique de comparaison des deux documents. Dans une intervention menée actuellement, ce paramétrage s'est révélé initialement impossible, les documents ne pouvant s'afficher que "dans la largeur", en mode "paysage". Les tests utilisateurs étaient donc forcément tronqués (l'utilisateur ne pouvant pas réaliser l'ensemble des actions pertinentes demandées, comme afficher deux documents de façon à en permettre une lecture aisée), et décevants. Même chose pour le test sur écran dédoublé: l'application de visualisation de documents refusait obstinément de passer d'un écran à l'autre en fonction des besoins.

Pour une liste un peu plus concise d'éléments à prendre en compte (cette liste étant bien sûr évolutive):

La configuration à 2 écrans

Dans les points positifs

- permet de jouer avec une configuration en mode portrait et l'autre en mode paysage si le matériel est bien choisi (transition aisée d'une configuration à l'autre);

- permet une meilleure séparation/contextualisation de l'information: (je consulte sur l'écran A et je renseigne un formulaire sur l'écran B, ou encore : Documentation sur A, Espace de travail sur B, Espace de test sur C) Vu le prix des écrans, il est parfois même souhaitable de penser à 3 écrans, en fonction des caractéristiques des métiers et activités concernés.

- Il est donc nécessaire de s'assurer de l'utilisation de configurations d'écrans homogènes. Si 2 modèles différents sont achetés, on risque des problèmes de colorimétrie ou de résolution. Dans tous les cas, il faudrait que les écrans soient accordés en termes de colorimétrie par exemple. Dans la même idée, on peut du coup faire des réglages écran (contraste et luminosité par exemple) différents, en fonction des applications utilisées ou du type de document affiché sur un écran ou sur un autre, afin de favoriser le confort visuel de l'utilisateur.

- favorise le travail collaboratif, car il sera possible de tourner un des écrans pour un petit powerpoint improvisé ou pour montrer quelque chose au collègue d'en face (si le pivot est bien conçu, évidemment).

Dans les points négatifs:

- ne permet en général pas un chevauchements de fenêtres, ce qui peut constituer une forte gêne ; peut poser souci pour la navigation "à la souris" entre les deux écrans (difficulté de repérage de la souris, souris qui « décroche » d'un écran à l'autre...);

- peut amener aussi des contraintes cervicales majorées, en fonction de la surface totale du champ à couvrir d'un point de vue visuel; dans le même ordre d'idée, la question du positionnement des périphériques peut se poser, notamment pour la place du clavier et de la souris en fonction des applications utilisées. Ceci amène aussi une réflexion sur le poste de travail en tant que tel, son assise... pour une utilisation optimale des deux écrans.

- du point de vue visuel, l'absence de continuité entre les deux écrans (bordure plastique de la dalle) peut également se révéler gênante pour certains utilisateurs.

- enfin, peut porter à confusion si en plus on utilise des bureaux virtuels.

La configuration avec utilisation d' 1 écran "surdimensionné"

Dans les points positifs

- intéresse les services achat et logistique, car c'est théoriquement plus facile à gérer (et entretenir...); permet une meilleure continuité car il n'y a pas les cadres ou la distance que tu trouves entre les configurations avec 2 moniteurs ;

- dans le cas de grands écrans, certains permettent d'afficher 2 feuilles A4 quelque soit l'orientation et laisse de plus un peu d'espace pour du menu ou des palettes/fenêtres flottantes ;

- Intéressant en cas d'utilisation de logiciels qui fonctionnent avec des dialogues flottants ou non modaux (dans le cas d'une boîte de dialogue, la fenêtre parente est toujours accessible, même lorsque la boite de dialogue est ouverte), permettant ainsi une disposition des différentes fenêtres ouvertes "à la guise" de l'utilisateur sur l'ensemble de l'écran.

Dans les points négatifs

- peut poser un gros souci dans le cas de très grands écrans pour l'implantation des bureaux de façon à conserver une bonne distante œil/tâche,

- la question de l'adéquation de la résolution de l'écran avec les différentes applications qui y sont utilisées est alors un élément à étudier finement (caractères « baveux »).

- pour les personnes portant des verres progressifs: il devient alors très difficile de permettre à l'utilisateur de disposer de l'ensemble des informations pertinentes « dans le cadran inférieur des lunettes ».

- Ceci pose alors une vraie question pour la conception des postes de travail devant accueillir ce matériel, au vu de la population potentiellement utilisatrice, et notamment une moyenne d'âge augmentant "naturellement", et une augmentation des utilisateurs porteur d'une correction visuelle. Dans une intervention récente, un service comptait environ 20% de personnes présentant une correction visuelle, et parmi elles, 7 portaient des verres progressifs.

- Plus l'écran est grand, plus la surface de déplacement de la souris est importante: l'utilisateur peut alors la perdre par une accélération réflexe du maniement de la souris. Il en résulte perte de temps et agacement, mais aussi (en fonction notamment des réglages de la sensibilité de la souris, et de l'habituation de l'utilisateur) des contraintes supplémentaires sur le poignet, voire le membre supérieur dans son ensemble.

- Dans un même ordre d'idée, il est nécessaire de parcourir une plus grande distance avec la souris pour retrouver les icônes, les fenêtres et les menus qui « entourent » l'écran.

- L'apparition « désordonnée » (dans l'idée de « là où on ne l'attend pas ») des fenêtres sur l'écran large peut aussi amener perte de temps et déconcentration.

- La nature ayant horreur du vide, un écran plus grand peut amener à une ouverture simultanée d'un plus grand nombre de fenêtres, ceci complexifiant ensuite l'activité. Il est alors nécessaire de revoir ses habitudes de travail pour ne pas se « noyer » sur les fenêtres.

Je remets ci dessous également les liens vers divers articles qu'une ergonome intéressée par la question avait eu la gentillesse de me communiquer (en anglais).

Effects of Visual Separation and Physical Discontinuities when Distributing Information across Multiple Displays, Desney S. Tan1 and Mary Czerwinski (PDF)
>> http://research.microsoft.com/~marycz/ozchiphyssep03.pdf?0sr=a
Two Screens Are Better Than One, Suzanne Ross
>> http://research.microsoft.com/displayArticle.aspx?id=433&0sr=a)
The Large-Display User Experience, George Robertson and al. (PDF)
>> http://research.microsoft.com/vibe/pubs/CGA2005-LargeDisplayUX.pdf?0sr=a
Partitioning Digital Worlds: Focal and Peripheral Awareness in Multiple Monitor Use, Jonathan Grudin (PDF)
>> http://research.microsoft.com/research/coet/Multimonitor/chi2001/paper.pdf?0sr=a)
Interaction Design for Large Displays, Swaminathan & Sato (PDF)
>>http://portal.acm.org

Usaddict - l'ergonomie pratique

Outils de prototypage d'interface

Les plus populaires

Les valeurs montantes

Encore quelques autres

Choisir des couleurs ergonomiques et esthétiques

Des outils indispensables :

Pour aller plus loin :

Le Kit de Maquettage, un outil pour la conception d'interface

Quand les pop-in vous embobinent

Petit dictionnaire du design numérique

Design Patterns pour la composition d'interfaces

Concevoir AUSSI pour les daltoniens

Le Daltonisme, en bref

Des outils pour la conception

Blogs sur l'ergonomie (fr)

Mise à jour: "Outils de prototypage d'interface"

Ferrari met l'ergonomie de l'avant pour la promotion de son nouveau bolide

Les 10 conseils de l'été

Ressentir à distance la texture d'un objet

Une vision du futur made by Microsoft

Y a-t-il un usager dans la salle ?

7 clés de l’entretien d’utilisabilité

Les 7 clés de l’entretien

1. Définir les attentes.

2. Se taire et écouter.

3. Éviter les questions biaisées.

4. Être sympathique.

5. Mettre de côté ses hypothèses.

6. Éviter les généralisations.

7. Ne pas oublier le non-verbal.

Conclusion de Michael Hawley

Firefox, le complice de l'ergonome

Maquettage

Gabarits

Accessibilité

Couleur, design et ergonomie

Universal Principles of Design

Kuler

Designer's guide couleur

Quand Microsoft soigne ses utilisateurs… et ses clients (2/2)

Le Ribbon d’Office

Quand Microsoft soigne ses utilisateurs… et ses clients (1/2)

The Mojave Experiment :

La méthode en 3 étapes:

Résultats

Écran géant, double écran

Des outils « en vogue », des contraintes spécifiques

Une évolution technologique

Une évolution des besoins

La recherche d'une amélioration de la productivité

Avantages et inconvénients: liste non exhaustive

La configuration à 2 écrans

Dans les points positifs

Dans les points négatifs:

La configuration avec utilisation d' 1 écran "surdimensionné"

Dans les points positifs

Dans les points négatifs