Aluku Kusouka - Ergonomie

Interaction design ou software design : le dilemme du designer

Oric — Wed, 04 Mar 2009 00:16:00 +0100

http://www.graphpaper.com/2009/02-11_are-we-designing-interactions-or-designing-software entame une réflexion autour de la place du designer et de ses compétences au regard d'un environnement technologique, en l'occurence, celui des applications web.

Toute la question réside dans le rapport entre le designer/l'interface utilisateur et le développeur/l'application (le code) qui lui permet de prendre corps.

En parallèle de la spécialisation de plus en plus marquée entre les métiers, il se dessine le besoin d'outils qui assurent la convergence de ces diverses compétences tout en assurant un niveau compétitif de productivité.

Les frameworks font parti de ces réponses dont les CMS, par exemple, sont une réponses à une problématique de production éditoriale.

Les plus modernes intègrent directement des solutions ergonomiques voire accessibles (dans une certaine mesure) et tout en restant dans un cadre applicatif défini, permettent aux designs de s'exprimer.

Ce qu'il y a de sain dans cette évolution, c'est que designer et développeur doivent apprendre à s'écouter et à trouver des compromis pour assurer la production d'applications de qualité dans un contexte rationnel.

C'est justement cette caractéristique rationnelle qui rapproche le designer web de son métier de designer. Et ça tombe bien puisque le développeur a besoin de s'appuyer sur des règles tangibles pour concevoir des applicatifs efficaces.

Paris Web 2008 - Accessibilité : des volontaires ?

Oric — Sat, 27 Dec 2008 17:07:00 +0100

La présentation d'Aurélien Levy (co-rédacteur du RGAA et nouvellement consultant chez Témésis) et Stéphane Deschamps (expert accessibilité chez France Télécom et ancien président de Paris Web) nous ont fait la conférence sur l'accessibilité sous la forme la plus "live" des deux jours : Accessibilité, des volontaires ?

Au programme

formulaires
liens
daltonisme
audio description
déficience motrice
déficience auditive
déficience intellectuelle
déficience technique
gestion de la langue
qualité de rédaction
etc...

En accessibilité, en particulier quand il sagit des déficiences visuelles, rien ne vaut l'exemple pratique. Aurélien et Stéphane démarrent donc la conférence par une séance d'écoute de synthèse vocal utilisé à différents sites web (valides xhtml strict 1.0 pour certains...). Le résultat est radical.

Non seulement, on découvre un outil qui ne nous est pas familier et nous fait comprendre que sa simple utilisation est déjà un handicap en soit pour leurs utilisateurs.

Ensuite, c'est notre égo qui en prend pour son grade, car même lorsqu'on pense déjà bien faire, on s'aperçoit que la simple validation "automatique" des standards web ne suffit pas. De même, alors que les standards web ont le vent en poupe, leur utilisation est souvent dévoyée pour la simple raison qu'on s'intéressent au code avant de savoir pourquoi on l'utilise : la soupe de DIV ne vaut pas mieux que la soupe de tableau...

Au delà du côté fun de la conférence, les défauts d'accessibilité ont des coûts pour l'utilisateur, qui se retrouvera au mieux fortement géné, au pire complètement bloqué pour exécuter une simple tâche... Ce coût vaut aussi pour les sociétés dans des secteurs concurrentiels car leur clients, non-voyants ou pas, ils les perdront !

La vidéo de "Paris Web 2008 - Accessibilité : des volontaires ?"

Paris Web 2008 : Ergonomie des interfaces riches

Oric — Wed, 24 Dec 2008 16:53:00 +0100

Amélie Boucher a ouvert cette première journée technique de Paris Web 2008 sur un constat récurrent en matière d'ergonomie : Technology changes, humans don't

Partant de ce constat, elle nous rappel que malgré l'engouement actuel pour les interfaces riches, les principes ergonomiques établis depuis bien longtemps restent d'actualité pour produire des interfaces dont la vocation reste in fine de transmettre un service à l'utilisateur.

Le message d'Amélie est donc en résumé "Oui, faites des interfaces riches (ou pas) mais faites les pour vos utilisateurs"

A travers différents exemples concrets et riche de son expérience tiré de nombreux tests utilisateurs, elle présente donc des interfaces riches en pointant du doigt leur intérêt et leurs lacunes. Elle nous montre que c'est parfois dans le détail que se cache le rendez-vous manqué entre les efforts techniques déployés pour intégrer une interface et son publique...Dans un contexte concurrentiel ces détails sont dramatiques car ils (les clients) peuvent aller ailleurs pour faire la même chose" !

Donc au programme :

Affordances
Feedback
Respect des habitudes tirées des applications offline
Accompagnement des utilisateurs
Tests utilisateurs
...

Je ne peux que vous conseiller de lire le livre très accessible d'Amélie "Ergonomie Web".

J'ai lu aussi récemment "Designing for interaction" de Dan Saffer un brin plus théorique, avec une partie sur le design de service plus que parlante.

Enfin, on ne peut que recommander le site de Jacob Nielsen "le Pape de l'ergonomie" pour sa richesse en terme d'études de grande envergure sur les utilisateurs dont la pertinence contredit parfois ce qu'on entend ici et là sur "c'est ergonomique !". Sa newsletter est bien pratique pour être un peu au jus de ces dernières publication.

La vidéo de la conférence d'Amélie Boucher

User Focused User Focused User Focused !

Oric — Mon, 10 Mar 2008 00:45:00 +0000

Alors, User Focused ? :)
Pas facile de savoir se situer entre volontarisme et pragmatisme.

Ce billet en 2 partie a le mérite de présenter dans sa 2e partie une échelle en 8 niveaux créée par Jacob Nielsen qui permet de se situer dans sa prise en compte de l'utilisateur dans un projet web. Les liens vers les partie 1 et partie 2

Enfin, une vidéo qui va nous inciter à tous travailler au café cet été :)http://www.joearnold.com/2008/03/paper_prototyping.html ou comment faire le prototype d'un site web avec du papier et des stickers ;)

ROI / ergonomie

Oric — Wed, 27 Feb 2008 01:01:00 +0000

http://www.sqli-agency.com/blogs/ergonomicgarden/index.php?2008/02/25/104-roi-argumentaire-commerciale
Oui mais non, pas de commentaires, lisez, c'est court et c'est suffisamment parlant :)

E-Commerce : Les interfaces riches, oui mais...

Oric — Mon, 25 Feb 2008 01:09:00 +0000

Les exemples d'interfaces riches sur le web se multiplient, en particulier sur les sites de e-commerce où la volonté d'améliorer l'expérience utilisateur devient cruciale pour les entreprises derrières ces vitrines web et cette tendance va s'accentuer dans les mois/années à venir.

Cependant, ce niveau d'interface n'est pas gratuit et demande une mutation des agences web vers une gestion de la production qui s'apparente au génie logiciel (et notre fameux modèle MVC ;) )

Pour en rajouter une couche, avec Adobe et Microsoft les interfaces riche font leur show tous les 2 en 2008 via AIR et SILVERLIGHT ... innocent ? :)

Simple comme...

Oric — Tue, 19 Feb 2008 20:43:00 +0000

Je vais essayer de suivre le fil conducteur de Fred Cavazza en vous listant une série d'articles récents qui, à n'en pas douter, prônent la simplicité pour cacher des choses complexes, un peu comme l'arbre cache la forêt...

http://www.fredcavazza.net/2008/01/10/connaissez-vous-la-simplexite/ pour commencer à définir encore une "porte ouverte" dans la façon de présenter à l'utilisateur des interfaçes complexes sans rebuter les débutants
http://www.fredcavazza.net/2008/01/13/est-ce-la-mode-des-menus-deroulant-riches/ après les bigs menus , Fred nous montres quelques exemples de menus déroulants contenants différents éléments comme des champs textes, des cases à cocher etc... J'aime assez celui de Monster. Ca peut paraître complexe, contrairement à ce que j'ai annoncé, mais je trouve là une solution élégante pour simplifier des formulaires de recherche notamment.
http://www.fredcavazza.net/2008/01/03/un-systeme-de-navigation-3-en-1-chez-burton/ si on le couple avec l'exemple du même article sur http://food.yahoo.com/ (que je n'aime pas particulièrement), on peut obtenir un mixe qui nous donne un fil d'ariane auquel on agrémente pour chaque niveau de navigation un menu déroulant contenant les options de même niveau. Je vois là une façon élégante (ça n'engage que moi :) ) de permettre à l'utilisateur de savoir où il est dans le site (fil d'ariane) en lui laissant la main sur la navigation sans pour autant prendre trop de place. A méditer.

http://www.fredcavazza.net/2008/01/10/est-ce-la-mode-des-blogs-minimalistes/ j'aime assez l'idée, à force de vouloir tout mettre au même endroit ça fait mal aux yeux !
Keep it simple, stubborn !
http://www.fredcavazza.net/2008/01/10/simple-et-efficace-n%c2%b08-la-tasse-avec-indicateurs-de-choix/ parce que vous le valez bien ;)

BBC : nouvelle home en DHTML/AJAX - version bêta

Oric — Tue, 19 Feb 2008 02:04:00 +0000

http://www.bbc.co.uk/home/beta/

La BBC a mis sa prochaine home à disposition du publique.
Ce n'est qu'une version bêta, mais elle est tout à fait fonctionnelle et donne une bonne idée de l'orientation recherché côté utilisateur.

Cette home, présente plusieurs point d'intérêts, technologiques, fonctionnels et sociologiques...

http://www.bbc.co.uk/home/beta/

Cette home, présente plusieurs point d'intérêts, technologiques, fonctionnels et sociologiques...

Pour ceux qui connaissent déjà, le positionnement des blocs à la Netvibes semble devenir petit à petit un standard pour tout ce qui concerne les interfaces dîtes "riches".
C'est plus qu'une tendance, car au delà du gadget il y a la question de l'idendité numérique que chaque internaute revendique à différents niveaux dont le plus connu reste l'avatar que l'on retrouve dans les forums, jeux vidéo, etc...

Sur cette home de la BBC, cela se traduit par les options avancées de personalisation qui sont proposées à l'internaute de façon intelligente.
En effet, la home est proposée avec un style par défaut et une disposition de l'information par défaut.
L'internaute peut ne pas y toucher du tout et surtout revenir à cet état quand il veut.

Ensuite, il peut dans un premier temps modifier la place des blocs contenant l'information. Il choisit donc sa propre
pertinance.
Cette fonctionalité est disponible d'emblée (pas d'action explicite pour l'activer) et reste cohérente avec la mission du site (informer) puisqu'on propose à l'internaute de définir sa propre logique de lecture de l'information (un peu comme un lecteur de journal papier qui va sortir les pages sport , avant d'entamer le reste du journal).

Cette logique se retrouve dans le panneau "customise homepage" où l'internaute choisi le type d'information qu'il veut avoir à disposition ou non.

Enfin, cette logique de customisation est appuyée par le lien "display options" (en haut de page à gauche) qui là propose, non plus de manipuler l'information,
mais bien de personaliser son "look", tout comme pour un avatar de jeu, on va définir sa coupe de cheveux, la couleur de peau, sa taille, sa carrure, etc...

Cette distinction entre "customise" et "options" est importante car elle permet de respecter d'une part les internautes occasionnels ou traditionnels qui ne seront pas perturbés par des "gadgets" et trouveront rapidement les informations qui les intéresse, et d'autre part les internautes plus expérimentés qui recherchent plus à se distinguer et pour lesquels les options d'affichages sont un confort voire un luxe nécessaire pour marquer leur différence et s'approprier l'espace dans lequel ils évoluent.

Cette distinction s'opère de nouveau à l'intérieur du groupe expérimenté, où, via les presets et customise, qui propose encore 2 niveaux de profondeur dans la personnalisation.

Il faut toutefois soulever 2 points primordiaux à ce projet :

Cette mécanique ne fonctionne correctement que parce qu'elle est cohérente avec la mission du site. Une grosse erreur aurait été de faire du "bling bling 2.0 AJAX" à tout prix, en mettant en avant les options d'affichage alors que l'internaute vient avant tout chercher de l'information.
On peut noter que certains blocs "widget" gagnerait à être distingué graphiquement des autres, voire de manière générale, on devrait pouvoir associer graphiquement les blocs (couleur de l'entête) par thème afin d'alléger la charged'analyse de l'internaute.
Le développement d'une telle interface ne s'improvise pas. Il sagit ici d'un applicatif JS qui, s'il doit être pérenne et évolutif,demande une vraie maîtrise objet du javascript.

De plus elle s'accompagne d'une architecture particulière côté serveur qui doit être également bien pensée si l'on veut que le site soit
"dégradable" et utilisable par les moteurs de recherche sans en faire un usine à gaz...

Les menus déroulant et l'accessibilité

Oric — Tue, 19 Feb 2008 01:53:00 +0000

Problématiques de l'accessibilité des menus déroulants dans les site web
http://blog.alsacreations.com/2006/10/17/291-accessibilite-menus-deroulants

Retours d'un test d'utilisabilité effectué sur le menu de navigation du site du premier ministre http://www.veblog.com/fr/2001/0203-pm-gouv-fr.html L'article date de 2001 mais reste pertinant.
Il faut tout de même garder à l'esprit que les critiques émises sur la version "menu déroulant" peut être éventuellement imputé à la façon dont à été conçu/implémenté le dits menu et donc pas nécessairement à la techno utilisée...

La pub et l'ergonomie des sites web

Oric — Tue, 19 Feb 2008 01:47:00 +0000

http://www.ergolab.net/articles/publicite-web-ergonomie.html

Le site d'Amélie Boucher nous fourni un article très complet sur l'impact de la publicité dans les sites web d'un point de vue ergonomie.

L'article insiste sur la nécessité de prévoir l'intégration des pubs au moment de la conception globale du site et ce afin de, au mieux, conforter l'utilisateur (et rendre la pub efficace), ou au pire de le respecter (et donc de ne pas le faire fuire de VOTRE site et son contenu).

L'article est agrémenté d'exemples concrets et présentent quelques formats de pub intéressants.

Voilà, encore une fois, c'est l'intérêt pour l'utilisateur qui est mis en avant et donc l'utilisabilité du site qui en découle...

Les internautes scrollent !!!

Oric — Tue, 19 Feb 2008 01:44:00 +0000

oui, les internautes scrollent ! Et ce n'est pas moi qui le dit :

http://www.lesbonnesfrequentations.com/2007/11/16/defilement-vertical-le-mythe-du-rabat/ [FR] fait un rapide tour de la question.

http://www.boxesandarrows.com/view/blasting-the-myth-of [EN] écrit par Millissa Tarquini
(juste la Directrice du design chez AOL depuis plus de 10 ans), nous propose une courte étude et complète.

oui, les internautes scrollent ! Et ce n'est pas moi qui le dit :

http://www.lesbonnesfrequentations.com/2007/11/16/defilement-vertical-le-mythe-du-rabat/ [FR] fait un rapide tour de la question.

http://www.boxesandarrows.com/view/blasting-the-myth-of [EN] écrit par Millissa Tarquini(juste la Directrice du design chez AOL depuis plus de 10 ans), nous propose une courte étude et complète.

Elle s'appui entre autre sur des études de chez ClickTale [EN] : http://blog.clicktale.com/2006/12/23/unfolding-the-fold/ [EN]et la mise à jour http://blog.clicktale.com/2007/10/05/clicktale-scrolling-research-report-v20-part-1-visibility-and-scroll-reach/ [EN], http://blog.clicktale.com/2007/12/04/clicktale-scrolling-research-report-v20-part-2-visitor-attention-and-web-page-exposure/ [EN]

Le terme "Fold" utilisé dans l'article, désigne cette ligne virtuel au delà de laquelle l'internaute doit scroller pour voir le contenu d'une page web.

En résumé :

Le "fold" idéal n'existe pas car même en déterminant une tranche acceptable (pour une résolution donnée), elle ne concerne au final que moins de 26% des internautes et tombe à 10% pour une hauteur précise
Les internautes scrollent à partir du moment où ils trouvent du contenu intéressant (ce pour quoi ils viennent sur votre site) et à condition qu'on leur suggère que la page continue (repères graphiques), comme le montre l'exemple de TMZ où détail intéressant, le lien "WAIT THERE'S MORE !" (lire la page 2) se situe uniquement en bas de page après tous les articles...
Contrairement aux idées reçus, le bas de page est largement exploité par les internautes
Il faut distinguer les pages "transactionnelles" (ie. formulaire d'inscription, validation d'un achat en ligne etc...) des pages de contenus. Dans les premières, l'internaute veut aller vite donc il est préférable là d'éviter le scrolling