Author Archives: Raphaël

A propos de Raphaël

Consultant Freelance en ergonomie et UX depuis 1999 ! Je travaille sur de nombreux supports, des interfaces WIMP à la télévision en passant par les mobiles, le web pour le grand public ou les professionnels.

Démo Windows mobile 7.

Publié le par Raphaël
Dire !

Voila une jolie présentation de Windows Mobile 7.

Si on essaye de faire abstraction de l’effet « démo », il est intéressant de voir que l’approche est radicalement différente des versions précédentes de Windows mobile. Les versions antérieures étaient un portage « historique » de Windows PC, sur mobile.

Cette nouvelle version part sur une tout autre base. Elle est visiblement orientée vers le grand public et tout ce qui fait le succès de l’iPod ou de l’iPhone. On retrouve des choix fondamentaux, à premier vue, comme l’absence de gestionnaires de fichiers et donc des applications qui gèrent leurs données.

Après, le fonctionnement par « grandes feuilles » avec uniquement une partie de la feuille visible à l’écran me paraît intéressant, mais entre l’effet démo et la réalité, il peut y avoir une différence importante. Il faut imaginer la même interface avec énormément de données, de services ou très peu. De même, être innovant avec le grand public n’est forcément adapté.

La concurrence a du bon. Sans oublier qu’un téléphone ça sert à téléphoner avant tout !

Concevoir des IHM pour la télévision.

Publié le par Raphaël
3

Après le web et le téléphone mobile, la télévision est sans aucun doute le nouveau support pour les services interactifs. Que ce soit sur des réseaux propriétaires par l’intermédiaire des «box», ou plus récemment par les télévisions connectées, la concurrence entre les différents acteurs s’affole. Chacun imagine de nouveaux services, du plus simple au plus complexe, lié ou non à la télévision. Dans bien des cas, les interfaces de ces services sont conçues comme des doublons plus ou moins adaptés de services existants par exemple sur le web.

Nous allons donc vous présenter une vue d’ensemble des divers principes de bases qu’il est nécessaire de mettre en œuvre pour concevoir sur la télévision en respectant l’expérience des utilisateurs. Lire la suite →

Prédictologie.

Publié le par Raphaël
Dire !

J’ai utilisé ce terme pour la note « Apple, brevets, IHM et prédictologie ! » et je me suis aperçu par la suite que c’est un mot qui n’est pas dans le dictionnaire. Je me propose donc de le définir !

[Néologisme, féminin, nom commun.] La prédictologie est une pseudo-science qui a pour but de prédire l’avenir à court terme, deux ans maximum, d’un service, d’un produit, d’un marché ou d’une entreprise sur la base de l’interprétation logique de données ou d’informations. L’avis ainsi rendu est souvent péremptoire et accompagné de recommandations.

L’interprétation est souvent biaisée soit par un parti pris sur le sujet, soit par l’utilisation de corrélations illusoires. La validité des données ou des informations utilisées n’est pas souvent vérifiée. Les domaines de prédilection de la prédictologie sont l’informatique et le marketing, mais aucun secteur d’activité n’est épargné.

Exemples :

  • Le 6 octobre 1997, alors qu’Apple était au plus bas, un journaliste demanda à Michael Dell ce qu’il ferait s’il était en charge de la firme de Cupertino. « Qu’est-ce que je ferais ? Je fermerais la boîte et je rendrais l’argent aux actionnaires » avait-il déclaré. Dix ans après la valeur d’Apple est largement supérieur à celle de DELL.

Futurs usages du web et tablettes tactiles ?

Publié le par Raphaël
Dire !

Cet article reprend une réponse que j’ai rédigé pour la liste Ergoihm, une liste de diffusion sur l’ergonomie des IHM. Les questions de l’email initial sont donc en citation.

Il y a plusieurs sujets qui s’entremêlent dans ce que tu dis, mais c’est intéressant d’aborder le sujet de manière globale. Je vais essayer de répondre à tes questions mais une par une !

L’année 2009 a été l’année du développement des réseaux sociaux et communautaires, tels que Facebook ou Twitter, mais aussi l’année de l’internet mobile. L’essor des ventes de téléphones tactiles (et surtout de l’iPhone) nous permet de constater que de plus en plus d’internautes sont aussi des mobinautes.

Je passe sur le Web 2.0 et les réseaux, c’est un peu avant 2009, Facebook a 6 ans ! L’internet mobile se développe, oui, mais il faut définir ce que l’on entend par l’internet mobile. Ce qui est constaté par les opérateurs et les hébergeurs, c’est la surreprésentation de l’iPhone dans les statiques de connexions. Cette différence a probablement plusieurs sources dont la qualité de l’ergonomie de l’iPhone et les forfaits data « illimités » associés à celui-ci. Ce n’est pas uniquement l’écran tactile multitouch qui en est l’explication. L’aspect tactile est un plus, mais 95 % des interactions pourraient aussi se faire avec un stylet ou une souris.

L’internet mobile ce n’est pas seulement du Web sur téléphone mobile mais l’ensemble des connexions data, avec notamment l’utilisation des Apps (applications pour iPhone). Pour prendre un exemple, si tu souhaites lire « Le Monde » sur ton iPhone, tu ne vas pas sur le site du Monde, mais tu télécharges l’apps qui elle-même synchronise le contenu. Donc, ce qui se développe très fortement, plus que le Web mobile, c’est l’utilisation d’applications synchronisant tout ou une partie des données avec un serveur internet, ce en situation de mobilité.

C’est assez amusant de constater cela. Quand j’ai commencé à travailler en 1998, la tendance qui s’est poursuivie depuis, c’était de passer toutes les applications, notamment professionnelles, d’une interface WIMP (Windows, Mac OS) à une interface Web. Cela se faisait non sans mal, avec des problèmes de performance et la nécessité d’utiliser Java. On constate maintenant que le mouvement va dans le sens inverse, vers une « WIMPisation » (versus « Webisation ») des services Web. Sur l’iPhone, tu as une apps pour Facebook, une pour Twitter, une pour chaque journal, une pour WordPress, etc…

Avec en plus l’avènement des tablettes tactiles en 2010, je me dis que notre façon de naviguer sur internet va devoir elle aussi évoluer.

Nos modes d’interaction avec internet et les usages qui en résulteront devront eux aussi changer.

Qu’en pensez-vous ?

Tu utilises le verbe « devoir », mais en quoi l’arrivé d’une nouvelle technologie peut elle crée une obligation morale de changer tes habitudes ? Une technologie nouvelle ne va faire évoluer les usages que si l’utilisateur y trouve son compte.

Que tu reçoives la télévision, par la fibre optique, l’adsl, la TNT ou en Hertzien, tu te vautreras de la même manière dans ton canapé et consommeras autant de bières en regardant le tournoi des six nations ! Par contre, si tu peux avoir un magnétoscope qui se programme à distance, supprime les pubs et enregistre automatiquement ta série préférée (exemple : TIVO http://www.tivo.com) cela va avoir un impact fort sur ton usage de la télévision. (How Do People Really Interact With TV? Naturalistic Observations of Digital TV and Digital Video Recorder Users, Darnell, M, J., 2006). L’adoption d’une technologie se fait surtout si l’efficience, pour des usages existants, est améliorée.

Je me pose aussi la question de l’impact des tablettes tactiles ? Elles sont à mi-chemin entre un téléphone tactile et un ordinateur portable. Plus maniable mais moins puissant qu’un ordinateur portable (sans prendre en compte les netbooks), moins pratique qu’un téléphone…

Je pense que ces tablettes peuvent considérablement changé notre façon de naviguer mais aussi d’appréhender ce qu’est un ordinateur en général.

Quand tu dis moins pratique, tu veux sans doute dire moins « ergonomique » ? Sachant l’ergonomie se définit pour un outil, une population, une tâche et un contexte. Donc en mobilité, la tablette est moins pratique que le téléphone pour téléphoner… ou écrire ?

Alors, déjà il y a tablette et tablette, tactile et pas tactile. Pour faire simple, ce qui émerge sur le marché actuellement, c’est :

  • Les ebook ou les tablettes spécialisées comme le kindle d’Amazon pour la lecture.
  • Les tablettes PC, c’est un PC, sans clavier ni souris, sous Windows (ou Linux), avec un écran tactile.
  • et l’iPad qui est un iPhone en plus grand, sans le téléphone.

Les ebooks, ils ne remplacent pas l’ordinateur mais le livre ou le journal, comme l’iPod a remplacé le Walkman. C’est un périphérique. Donc ça n’a pas d’impacts sur la perception de l’ordinateur. Les tablettes PC, le clavier et la souris sont remplacés par un écran tactile, mais à part cela, il y peu de changement. Le fonctionnement est similaire à un PC. L’interface est semblable.

Dernier cas, l’iPad, là c’est un peu plus intéressant car ce n’est pas un Mac amputé de son clavier et de sa souris. Mais la base est l’iPhone, donc un produit grand public pour un usage quotidien,avec une prise en main qui se doit d’être évidente. Cette facilité de prise en main est notamment due à l’absence de gestionnaire de fichier.

Effectivement, cela va sans doute changer la perception de l’informatique pour une partie du grand public, qui va avoir un « ordinateur » mais sans les difficultés de prise en main d’un OS classique.

Les interface en ligne de commande.

Publié le par Raphaël
Dire !

J’ai rédigé initialement cette définition pour le petit dictionnaire du design numérique.

Les interfaces en ligne de commande sont nées avec l’informatique. Initialement, des paquets de données étaient envoyés à l’ordinateur. Ces paquets donnaient à la fois les informations et les traitements à effectuer, sans aucun contrôle de l’utilisateur. Avec des programmes de plus en plus en complexes, de plus en plus long, il a été nécessaire d’établir un « langage » pour que l’utilisateur puisse donner des instructions à la machine et avoir un retour.

Les interfaces en ligne de commande nécessitent donc que l’utilisateur apprenne un langage. Ce langage est généralement composé d’une syntaxe précise. Par exemple, sous Unix :

commande options fichiers_ou_données

Une commande désigne généralement un programme qui peut être paramétré avec des options et qui s’applique sur un fichier ou des données. Les instructions ainsi établies peuvent être imbriquées et donc décrire des traitements complexes en peu de lignes.

Une fois le langage connu et maîtrisé par l’utilisateur, ce type d’interface peut devenir extrêmement efficace et plus performant pour certaines tâches qu’une interface graphique.

De l’ergonomie de l’iPad ?

Publié le par Raphaël
2

Ou « Pourquoi l’iPad va plaire à ta mère ? »

C’est le premier titre que j’avais en tête, s’il est un peu plus racoleur accrocheur, il est quand même un peu trop réducteur. Donc à moins d’être isolé dans un monastère copte sur une ile grecque sans électricité, depuis 6 mois vous savez qu’Apple va sortir une tablette, un gros iPhone sans le téléphone !

Suite à cette annonce, de nombreux blogueurs plus au moins influents ont commencés à critiquer l’iPad à tour de bras, parce qu’il manquait telle ou telle fonction, que ça ne supportait pas Flash, que jamais un truc aussi nul se vendrait, etc… Une deuxième vague a commencé à faire entendre sa voix et elle dit, à juste raison : « l’iPad n’est pas fait pour les geeks. ». Il faut bien le reconnaitre, c’est effectivement un produit pour le « vrai » grand public, qui va largement marcher sur les plates-bandes des ebook, et autres netbooks.

Qu’est qui fait l’ergonomie de l’iPad ?

Je rappelle qu’on ne peut définir l’ergonomie d’un outil que pour un public donné, pour une tâche et dans une situation. L’ergonomie n’est jamais absolue.

Il y a fort longtemps, quand j’étais à la fac, je faisais du soutien en informatique. La principale difficulté, que je rencontrais,  était d’expliquer le systéme de gestion des fichiers, afin que les étudiants n’enregistrent pas leurs travaux n’importe où. Ils rencontraient de réelles difficultés à construire un modèle mental fonctionnel de l’ordinateur et plus précisément de la sauvegarde de fichiers.

Sur l’iPad, comme sur l’iPhone, il n’y a pas de gestionnaire de fichiers. Ce sont les applications qui gèrent leurs données. Quand l’utilisateur veut écrire un mail, il ouvre Mail. Pour gérer ses photos, il ouvre Photos, sans avoir à connaître l’emplacement des fichiers. L’utilisation est donc orientée vers l’action, la tâche et non vers la gestion des données. Cette absence de gestion de fichiers est d’autant plus pertinente qu’aujourd’hui les données peuvent être stockées n’importe où, aussi bien sur un disque qu’au fin fond d’Internet.

Voila, cherchez pas plus loin, c’est ce qui fait la différence entre l’OS des iphones/iPads et la très grande majorité des éventuels concurrents (linux, windows mobile, Jolie Cloud,…). Le coût à l’entrée pour l’utilisateur qu’est la compréhension de la gestion des fichiers disparait. Il peut faire ce qu’il veut directement. La prise en main et la satisfaction sont donc grandement améliorées.

Donc pour le grand public, de 7 à 97 ans, qui n’est pas née avec un ordinateur au bout des bras, pour une utilisation de loisir ou de bureautique simple, l’iPad devrait être un excellent outil !

PS : comment mettre en avant un produit sur un site avec la méthode Apple ?

Oui, il n’y a que l’iPad sur la page d’accueil et la barre de navigation en haut.

Discussion autour de la typographie.

Publié le par Raphaël
Dire !

Petite discussion concernant la typographie et les choix qui peuvent être faits sur le sujet.

Sérif versus sans sérif.

Les polices de caractères avec sérif ont une ligne de base plus marquée renforcée par les « pieds » des caractères. Ceci aide l’oeil du lecteur à se déplacer horizontalement. Sans sérif et sérif peuvent être combinés sur une même page

  • sérif est souvent plus facile à lire dans le corps du texte.
  • sans sérif peut être utilisé pour créer un contraste.
  • la résolution et la couleur influencent ces choix.

Combiner les polices de caractères.

Quand on combine plusieurs polices de caractères, il est important de décider à l’avance comment elles vont s’harmoniser ou contraster. En général, il ne faut pas utiliser plus de deux polices de caractères sur une même page. Une excellente typographie est invisible et elle n’entrave ni la lecture, ni l’information. Un surplus de polices de caractères sur une même page distrait le lecteur, crée une intrusion visuelle qui ralentit le processus de lecture.

Contraster par l’engraissement.

Combiner des polices avec différents engraissements peut créer un contraste très pratique. Par exemple entre un Helvetica gras et un Times normal. Mais attention, certaine police avec des engraissements différents peuvent apporter trop de contraste ou une trop grande complexité visuelle.

Considérer la qualité de l’affichage.

La qualité de la publication ou de l’affichage varie énormément : Imprimante laser, vidéo, écran, télévision, etc… Donc dans le choix de la police de caractères, de sa taille, de ses variations, il faut prendre en compte le média de parution final et son effet sur la lisibilité. L’italique généralement illisible sur les écrans informatiques mais peut être très lisible sur support papier. Avec une mauvaise qualité de sortie, les sérifs des petites polices de caractères peuvent disparaître ou les très petites lettres en gras peuvent être pleines.

Espacement des lettres.

Quand les lettres sont trop près, elles sont difficiles à distinguer les unes des autres, et donc sont moins lisibles. Quand les lettres sont trop espacées, le regroupement des lettres devient difficile pour l’oeil. L’espacement varie en fonction des lettres qui l’encadre. L’espacement optimal n’est pas mesurable, il doit être au moins égal à un pixel ou à la largeur du trait du caractère.

Espacement des mots.

Quand les mots sont trop proches, ils sont difficiles à distinguer les un des autres, et donc sont moins lisibles. Quand les mots sont trop espacés, le regroupement des mots devient plus difficile pour l’oeil. Quand l’espace est plus grand entre les mots qu’entre les lignes, l’oeil du lecteur se dirige vers le bas de la page au lieu de parcourir la ligne.

Espacements des lignes.

L’espace entre les lignes du texte doit être proportionnel à la taille des caractères. Les ascendants d’une ligne et les descendants de la ligne précédente ne doivent pas se toucher. Il faut donc au moins deux pixels entre chaque ligne. On peut aussi améliorer la lisibilité en augmentant l’espace entre les lignes en fonction de la largeur de la colonne.

Longueur des lignes, largeur de colonnes.

La longueur correcte d’une ligne est celle permettant à l’oeil de passer facilement d’une ligne à l’autre sans confusion et de continuer à lire les lignes suivantes. Pour une page affichée sur un écran, il est conseillé de faire des lignes de 60 à 80 caractères.

Justifié ou aligné à gauche.

Traditionnellement, les textes sont présentés justifiés en particulier dans la presse écrite car cela permet au regard de glisser sur la page pour ne s’arrêter que sur les titres. Mais une colonne justifiée peut avoir des espaces inégaux entre les mots, créer des « rivières » ou des espaces blancs verticaux à l’intérieur des paragraphes. Les « rivières » font que l’oeil se déplace vers le bas de la page au lieu de continuer sur la ligne. De plus une colonne justifiée à un contour rectangulaire qui ne permet pas au lecteur d’utiliser les bords pour se repérer facilement d’une ligne à l’autre. Si les colonnes doivent être justifiées, il faut mieux qu’elles soient relativement larges, car plus elles sont courtes plus les espaces risquent d’être déformés.

Contraster une police.

Accentuer une police permet de faire ressortir un mot ou un passage important dans un texte. Il y a trois manières de base pour accentuer une police :

  • Gras ou EXTRA gras.
  • Italique : l’italique étant plus difficile à lire, il est déconseillé sur les écrans ou pour les passages longs.
  • MAJUSCULE : l’utilisation des majuscules pour souligner n’est pas habituellement une bonne idée, car les mots en majuscule forment un rectangle ce qui a pour conséquence de rendre plus difficile pour l’oeil la différentiation entre les groupes de lettres.

Polices de caractère décoratives.

Les polices décoratives ont un graphisme particulier qui s’ajoute à la forme de la lettre. Par exemples :

Elles doivent être utilisées avec précaution. Ces polices transmettent un message, un style ou une idée dans leurs formes. Il faut donc que ce message soit bien celui que l’on veut faire passer avec le texte. De plus, leurs formes particulières les rendent beaucoup moins lisibles.

Blanc sur noir ou noir sur blanc : contraste positif ou négatif.

Le blanc sur noir est moins lisible que le noir sur blanc. Pour une même taille, les lettres blanches apparaissent plus petites que celles qui sont en noires. Il est donc préférable d’utiliser un contraste positif ce qui diminue également les problèmes de reflet sur les écrans.

Lisibilité versus Visibilité.

La visibilité est bonne si dans une page, on peut trouver ce que l’on cherche. La lisibilité est bonne si on peut lire facilement le texte. La visibilité dépend donc de la mise en forme et du design de la page. Une bonne utilisation de la typographie la rend lisible. La lisibilité est déterminée par :

  • la police de caractères
  • la qualité de l’affichage
  • la longueur des lignes
  • l’espace entre les lettres, les mots et les lignes
  • la justification ou l’alignement à gauche
  • la couleur
  • le mouvement

Apple, brevets, IHM et prédictologie !

Publié le par Raphaël
Dire !

Apple est une société qui dépose de nombreux brevets. Une bonne partie de ceux-ci ont pour sujet les IHM. La rumeur du moment concerne une éventuelle tablette mac qui serait un croisement entre iPhone et un iMac. Ces rumeurs se basent notamment sur toute une série de brevets déposés depuis plusieurs années.

Les brevets.

Concernant les brevets, il faut savoir plusieurs choses. La législation en Europe et aux USA sur les brevets n’est pas la même. En Europe le caractère innovant du brevet est primordial. Vous ne pouvez pas breveter quelque chose de trivial. Aux USA, il est plus facile de déposer un brevet un peu sur tout et n’importe quoi. Il « suffit » que personne ne l’ai fait avant vous.

Il existe deux grands types de brevets :

  • Le premier est le brevet classique portant sur une innovation qu’une société souhaite protégée.
  • Le deuxième type de brevet, qu’on pourrait surnommer « tires de barrage », a pour but d’occuper le terrain, d’empêcher les concurrents d’innover, d’agir. Il reprend souvent un brevet innovant (d’une autre société) , le modifie un peu en changeant des détails ou/et son domaine d’application. Il quadrille ainsi tout autour du premier brevet, pour empêcher toutes les variations.

Un dernier type de brevet, que peut se permettre une société comme Apple, c’est le brevet « poudre aux yeux », c’est un brevet innovant ou non mais qui ne sera jamais mis en œuvre. C’est souvent le fruit de travaux annexes ou d’hypothèses invalidées. Le but étant simplement de faire croire qu’on suit certaines pistes alors qu’on est déjà passé à autre chose.

Les brevets concernant les IHM.

Il est intéressant de lire par exemple le brevet US20060026535 déposé par Apple pour une éventuelle tablette, afin de comprendre ce que l’on peut breveter en matières d’IHM (Interface Humain Machine). Une IHM seule est difficilement brevetable, c’est souvent la combinaison d’un dispositif physique avec une IHM pour un usage plus ou moins précis qui est brevetée.

Illustration d'un brevet IHM déposé par Apple.

Donc là, un exemple de navigation dans une mosaïque de photo, sur une tablette avec une roue type « iPod ». Mais cela pourrait aussi servir pour un iPod nano, sans molette, avec un écran tactile.

Illustration d'un brevet d'IHM déposé par Apple.

Comment tourner les pages sur un livre électronique ?  Ça peut paraître simple à première vue, mais il faut en réalité définir tout le geste : un léger mouvement, une page de « tournée »; un mouvement plus rapide, plusieurs pages de « feuilletées »; si le doigt est reposé, le mouvement est arrêté, etc… C’est cette somme de détails qui va faire la différence et la qualité finale de l’interaction.

Et la prédictologie !

He bien pas de ça chez nous, Monsieur !

Il faut bien voir que même si ce brevet est exploité pour une éventuelle future tablette, il y aura nécessairement un décalage. Le brevet peut être utilisé partiellement. Il comprend aussi des clauses qui ne sont pas illustrées. Des termes assez vagues sont utilisés, par exemple « input device » (« périphérique d’entrée »). L’ensemble fait que ce brevet donne une grande l’attitude d’interprétation. En imaginant aussi qu’il peut être combiné avec d’autres brevets ! La durée de vie d’un brevet étant de 20 ans, il peut aussi tomber dans l’oubli avant de ressortir dans dix ans pour un autre dispositif.

Si nous reprenons les 3 types de brevets évoqués au début  :

  • Innovant : modérément, mais c’est plus proche de la spécification fonctionnelle de haut niveau que d’un travail de recherche pur.
  • « Tires de barrage » : Oui, là, très clairement, si un concurrent avait l’idée de faire une tablette en hybridant un ipod, un iphone, un netbook et/ou un ebook, c’est raté ! Le terrain est pris.
  • « Poudre aux yeux » : Ce n’est pas à exclure. Apple peut avoir étudié le sujet et l’avoir invalidé ou repoussé. Cela s’est déjà vu par le passé.

Encore quelques jours de rumeurs ou quelques années ! En attendant, il est possible de prédire une présentation pour le 27 janvier 2010, en espérant entendre la phrase rituelle « One more thing » !

En conclusion.

La lecture de brevets est très intéressante et apporte de nombreuses informations et idées. Mais, ça ne permet de définir les prochains produits d’une société. Il serait aussi pertinent de se poser la question de l’usage et de la cible marketing, pour tenter de deviner l’apparence d’une éventuelle tablette Apple.

Sources :

Macbrains Blog d’infos sur les brevets Apple en français.

Recommandations concernant la typographie.

Publié le par Raphaël
Dire !

La typographie est un aspect important du design de l’interface. Une bonne typographie est la base d’un bon design. Avec les centaines de polices de caractères (et leurs déclinaisons : italique, condensé, etc.) qui existent, il est difficile de trouver la bonne police qui correspond à l’usage que l’on veut en faire.

Le choix d’une police de caractères a un impact direct sur la manière dont est lue et perçue une information. La police de caractères peut augmenter la qualité d’une interface ou affaiblir l’utilisabilité du produit. Le contexte d’usage de la typographie est aussi important que son application.

L’oeil humain ne lit pas les lettres une par une, ou les mots un par un. Il bouge le long d’une ligne de texte, groupe le texte de manière à former des groupes d’information compréhensibles. Ce déplacement de l’oeil durant la lecture est un mouvement par saccade. La police de caractères affecte directement ce processus, en facilitant ou non les regroupements qu’effectue l’oeil, et donc cela à un impact sur la lecture et la compréhension.

Il est souvent dit qu’une bonne typographie est invisible. Mais le choix de la police de caractères en fonction du propos et du contexte demande une certaine expérience.

Evolution du "A"

Recommandations.

On considère que la taille des polices affichées sur écran est identique à la taille de celles qui sont imprimées sur papier.

Généralités.

  • Attribuer à chaque fonte un seul usage pertinent et cohérent.
  • Utiliser les fontes fournies en standard par le système.

Choix d’une police de caractères.

  • Utiliser des polices sans sérif pour les titres, les libellés et les fontes utilisées par le système.
  • Utiliser des polices avec sérif pour les textes.
  • Utiliser des fontes de caractères dont la largeur se situe entre 50% et 100% de la hauteur.
  • Utiliser des polices sans sérif et non grasses pour les fontes de petites tailles (inférieure ou égale à 10 points).
  • Utiliser les polices bien formées plutôt que les polices stylisées ou décoratives.

Utilisation des variations d’une police de caractères.

  • Utiliser une taille appropriée : l’angle de vue doit être situé au minimum entre 0°16′et 0°22′ soit 3 et 4 millimètres à 60 cm pour une lettre capitale. D’où une taille 12 pour travail normal sur écran. En considérant que les polices affichées à l’écran ont une taille identique à celle imprimée sur papier.
  • Ecrire en minuscule (avec la première lettre en majuscule en français) tous les textes, même les titres, les libellés ou les titres de fenêtres.
  • Ne pas utiliser l’italique pour l’affichage sur écran.
  • Pour contraster, il faut, de préférence, mettre la police de caractères en gras.
  • L’espace entre les lettres doit être d’au moins un pixel.

La mise en forme.

  • Pour un affichage sur écran, les lignes doivent faire entre 60 et 80 caractères.
  • Pour un document, ne pas utiliser plus de 2 polices de caractères, 3 tailles et 2 variations. Au total, il doit y avoir maximum 8 fontes différentes et de préférence 6.
  • Aligner à gauche le texte plutôt que de le justifier.
  • Utiliser un contraste positif : écrire en noir sur fond blanc ou gris clair.
  • L’espace entre les lignes doit être proportionnel à la largeur des colonnes. Il doit être supérieur ou égal à deux pixels.
  • L’espace entre les mots doit être inférieur à celui entre les lignes.
  • Structurer les textes de manière à donner un rythme à la lecture à l’aide de paragraphes, de lignes blanches, de retraits.
  • Hiérarchiser l’information à l’aide des polices et de leurs variations.

Loi de Hick.

Publié le par Raphaël
1

J’ai rédigé initialement cette définition pour le petit dictionnaire du design numérique.

La loi de Hick, ou loi de Hick-Hyman, est un modèle qui décrit le temps qu’il faut à un utilisateur pour prendre une décision en fonction du nombre de choix à sa disposition.

Pour prendre une décision, l’utilisateur va catégoriser les choix sous la forme d’une arborescence, regroupant les choix similaires. Il va en suite déterminer quelle branche de l’arborescence suivre, jusqu’à arriver à un choix unique. Cela donne un temps de réponse logarithmique. Une sélection choix par choix aurait donné un temps de réponse linéaire.

Concrètement, appliquée aux interfaces, la loi de Kick implique que :

  • Si l’on ajoute un élément à une liste proposant un faible nombre de choix, le temps de réponse va fortement augmenter.
  • A contrario, si on ajoute un choix à une liste de choix déjà longue, le temps de réponse va faiblement augmenter.
  • Un nombre de raccourcis trop important (par exemple : sur une page web, ou sur une télécommande) demandera un temps de recherche plus élevé que la navigation classique.

La formule mathématique est la suivante :

T = b log2(n + 1)

  • T : le temps de réponse.
  • b : une constante expérimentale en fonction de la situation.
  • n : le nombre de choix. Le +1 correspond à la décision de répondre ou non.

Loi de Hick, temps de réponse en fonction du nombre de choix.

Source :

  • Hick, William E.; On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4:11-26, 1952.
  • Hyman, Ray; Stimulus information as a determinant of reaction time. Journal of Experimental Psychology, 45:188-196, 1953.

TV Connectée, Orange & LG

Publié le par Raphaël
Dire !

Pour une fois qu’il est possible de communiquer sur un travail que j’ai réalisé,  je ne vais pas me priver !

Le contexte.

Orange et LG ont signé un partenariat pour intégrer dans les téléviseurs LG connectés (à Internet), un portail Orange présentant donc des contenus et des services.

La mission.

Spécifier les interfaces pour plusieurs de ces services à partir de zéro, en prenant en compte à la fois les nouvelles contraintes techniques, les délais relativement court, le graphisme et le positionnement marketing.

La réalisation.

Deux actions ont été menées en parallèle.

  • Il a été nécessaire de spécifier un guidelines pour les interfaces utilisateurs. Pour chaque type de service, en fonction de sa structure (nombre de rubriques, profondeur, fonctionnalités), un modèle a été créé. Les règles de navigations ont été formalisées.
  • Dans le même temps, il a fallu spécifier les services de manières itératives avec le graphisme et l’équipe de développement qui découvraient aussi la plateforme elle-même encore en évolution.

Il a été aussi nécessaire de convaincre certains interlocuteurs de la nécessité de faire simple, pour répondre à la situation d’usage (La télévision : moyens d’interactions réduits, vigilance faible,…) . Les délais, 3 mois, étaient assez courts vu le nombre de difficultés à gérer, mais l’équipe qui a travaillée dessus étant assez restreinte et chacun étant un expert dans son domaine, ça a très bien fonctionné.

Le résultat.

Pour voir le résultat, allez sur le portail Orange Innovation. C’est encore un prototype qui sert pour la démonstration, mais très proche du rendu final.

Orange, TV Connectée, Cinéma

Orange, TV Connectée, 24/24actu

Revue de presse : Le figaro,  Neteco, SVM le mag

Définitions concernant la typographie.

Publié le par Raphaël
Dire !

Quelques définitions avant parler de typographie.

Définition d'un caractère

Corps.

Cela renvoi à la hauteur de l’élément central d’une lettre minuscule. En anglais, cela est aussi appelé « x-height » car c’est l’équivalent de la hauteur d’un x en minuscule. Le corps n’est pas la taille en point.

Ascendant et Descendant.

L’ascendant est la partie de la lettre minuscule qui est au-dessus du corps. Le descendant est la partie de la lettre minuscule qui est au-dessous du corps de la lettre.

Sérif et sans Sérif.

Le sérif est l’excroissance qui existe aux extrémités de certaines polices de caractères. Une police droite (sans excroissance) se dit « sans sérif ».

Exemple :

Oeil.

L’oeil correspond à l’espace situé à l’intérieur d’une lettre.

Approche, espacement entre les caractères.

On entend par là l’ajustement de l’écart entre deux lettres de manière à donner l’impression que toutes les lettres sont à égale distance.

Variations.

Il existe différentes manières de faire varier une police de caractères.

  • alléger
  • engraisser
  • condenser
  • étendre
  • mettre en italique

Certaines polices ont des variations supplémentaires comme différents niveaux d’engraissement, avec ou sans sérifs.

Fonte d'imprimerie

Caractères d'imprimerie en métal. (© Willi Heidelbach)

Fonte.

Se dit de l’ensemble des caractères d’une police ayant une taille et une ou plusieurs variations données. En plus de l’alphabet et des marques de ponctuation, certaines fontes incluent des symboles et des caractères spéciaux comme & ou $. Le terme « fonte » fait référence aux pièces de métal utiliser autrefois dans l’imprimerie.

Taille.

La taille de caractère réfère à taille en point. Deux polices en taille 12 peuvent avoir une hauteur de corps différente et donner l’impression que l’une est plus grande que l’autre.

Exemple :

Mais si on mesure la distance entre le haut des ascendants et le bas des descendants, pour ces deux polices de même taille, elles sont égales. Toutefois, pour les polices de caractères vectoriels, on note de légères variations.

Variation de pression : Les pleins et les déliés.

Très tôt, les créateurs de polices de caractères ont essayé d’imiter la forme des lettres écrites à la main. Le résultat est que les caractères ont des parties plus épaisses (les pleins) et d’autres plus fines (les déliés). Ces variations d’épaisseurs sont créées suivant une « diagonale de pression ».

Cet article a été initialement écrit en 1999.

Retour sur investissement (ROI) et ergonomie.

Publié le par Raphaël
1

La question du retour sur investissement est souvent posée dans le cas de prestations sur le facteur humain et l’ergonomie. En effet, si le coût d’un ergonome est facilement chiffrable, le coût de sa « non-intervention » est lui beaucoup plus difficilement chiffrable. Les coûts liés au développement, la commercialisation et à la mise en place des services sont naturellement intégrés dans les projets.

Mais la prise en compte des facteurs humains dans les projets est souvent négligée. C’est pourtant une des principales causes d’échec ou de surcout des projets. Un rapport du Groupe Standish (1995), montre que seulement 16,2 % des projets sont réalisés dans le respect des délais et des budgets, 52,7 % sont remis en question en terme de budgets, de délais ou de fonctionnalités, 31,1 % sont annulés. Les raisons de ces échecs sont principalement l’absence de participation des utilisateurs (12,6 %) et des besoins incomplets (12,7 %). Le principal facteur de succès évoqué par les cadres des directions informatiques, est la participation des utilisateurs (15,9 %). Si les dernières versions de ce rapport montrent des améliorations notables, notamment grâce aux méthodes de développements agiles, le problème de fond reste présent.

Les principaux gains.

Quels sont donc les apports de l’ergonomie dans un projet permettant de gagner de l’argent ou d’éviter d’en perdre ? Les principaux gains apportés par l’intégration d’une démarche en ergonomie dans un projet sont à séparer en deux catégories :

Les ROI internes liés au fonctionnement de l’entreprise :

  • Une prise en compte des problèmes de design en amont, avant de développer.

“Savings from earlier vs. later changes: Changes cost less when made earlier in the development life cycle. Twenty changes in a project, at 32 hours per change and [a minimal] hourly rate of $35, would cost $22,400. Reducing this to 8 hours per change would reduce the cost to $5,600. Savings = $16,800.” (Human Factors International, 2001)

  • Une réduction des temps de développements, par exemple, de 33 à 50 %.
  • Une réduction des temps de formation d’au moins 25 %.
  • Une réduction importante du nombre d’erreur, une augmentation de la productivité.

Les ROI externes liés aux clients :

  • Une augmentation des ventes.
  • Une diminution des appels au support client de l’ordre de 66 %.
  • Une augmentation de la satisfaction des utilisateurs.

Les ROI internes.

Une étude ergonomique menée en amont des phases de conceptions va permettre de synthétiser les besoins utilisateurs. Elle permettra donc d’éviter le développement de fonctions inutiles et permettra d’avoir une interface utile et utilisable. Les éventuelles formations pour l’utilisation du service ne porteront plus sur l’utilisation de l’interface du service , mais bien sûr les connaissances nécessaires à la réalisation des tâches. De même les appels à la hotline ne concerneront plus des problèmes de compréhension des IHM, mais bien de réels soucis techniques. Donc nous obtiendrons logiquement une augmentation de la satisfaction des utilisateurs, qui peut se traduire par moins de stress ou moins de turnover chez les professionnels. Nous observerons aussi une diminution des erreurs et donc une augmentation de la productivité, une meilleure efficience.

Un exemple : Une intervention chez SUN comparant les bénéfices et les couts de l’intervention d’un ergonome :  gain = 153 millions $ (fichier PDF, 250 ko) , Archive Web : Bénéfices, Coûts sauvés

Cost of a Usability Study

To calculate the cost of a usability study, consider:

  • Inhouse usability staff
  • Time spent by staff (usability people, developers) x wage
    rate (same units)
  • Additional variable costs (contractors, usability lab rental,
    travel)
Cost of inhouse usability staff:
Loaded headcount (salary, benefits, vacation time, office
space, phones, equipment)		 $120,000/year
Hours per work year (40 hours/week x 48 weeks) 1,920 hours/year
Hourly wage ($120,000/1,920) $62.50/hour
Time spent on usability test by usability engineer (planning,
implementation, analysis, recommendations)		 160 hours
Time spent by interface designer on redesign 60 hours
Time spent by development engineers for usability activities 22 hours
Total staff costs (160 + 60 + 22 = 242 x $62.50) $15,125
Costs of a fully-equipped lab:
Participant recruiting @ $100/participant (9 participants x
$100)		 $900
Participant compensation @ $50/participant (9 x $50) $450
Videotapes @ $5/each (9 x $5) $45
Percentage of lab and equipment costs = amortized cost of
lab/hour ($200/hour x 20 hours)		 $4,000
Total lab costs $5,095
TOTAL COST of doing a usability study:
Staff cost + lab costs = $15,125 + $5,095 = $20,220

Cost Savings After Doing a Usability Study

To calculate the cost savings after doing a usability study, consider the following:

Calculate support call costs:
Support call $200/call
200,000 product Version 1 sold
Support calls due to usability problems = 580,000 x $200/call $116 million
Support calls/product sold 2.9 calls/product
Usability engineering done on Version 2
300,000 product Version 2 sold
Support calls to to usability problems = 260,000 x $200 $52 million
Support calls/product sold 0.87 calls/product
Reduction on support calls 2.03/product
Support call cost savings due to increased usability:
2.03 calls/product x 300,000 x $250/call		 $152.25 million
Calculate increased productivity (inhouse):
Task A improved by 3 minutes
Task A performed 5 times/day
200 users perform Task A
Hourly wage (from loaded head count) $62.50/hour
200 users x 3 minutes x 5 = 3,000 minutes saved/day 50 hours saved/day
50 hours x $62.50/hour $3,125
Annual amount saved through increased productivity:

$3,125 x 240 work days/year

 $750,000/year
  • Cost of usability study : 20 220 $
  • Cost savings after doing a usability study (support call cost savings + increased productivity) : $152.25 million + $750,000 = 153 million $

Les ROI externes.

Jakob Nielsen a réalisé plusieurs études depuis 2003 (en 2008) sur l’impact de l’ergonomie sur les sites de e-commerces. Ces études montrent un impact fort entre la reconception d’un site et ces ventes.

La première étude porte sur 42 sites dont l’utilisabilité a été mesuré sur une échelle spécifique avant et après la reconception. l’utilisabilité a été augmenté en moyenne de 135 %. La même étude en 2008 montre une augmentation de seulement 88%. Le niveau de base étant déjà en moyenne plus élevé en 2008 qu’en 2003.

Ces études mettent en évidence les effets suivants :

Mesure Moyenne des augmentations
sur l’ensemble des projets.
Vente / taux de conversions 100%
Traffic / compte utilisateur 150%
Performance utilisateur / productivité 161%
Usage de fonctions spécifiques. 202%

Un retour sur investissement de 5 (reçus) pour 1 (dépensé) est avancé pour le marketing, les chiffres avancés seraient de l’ordre de 60 pour 1 en termes d’ergonomie, pour certains auteurs, mais aucune étude précise ne vient étayer ces chiffres. Les exemples cités sont souvent flatteurs, mais pas nécessairement irréaliste. Par exemple :

Diamond Bullet, a Foraker company, redesigned the architecture of a state government portal site that increased users’ success at finding information from 72% to 95%, reduced their time in finding information by 62%, and resulted in significantly higher user satisfaction ratings. This led to an estimated savings of at least $1.2 million per year for the citizens of the state and increased revenue for the state estimated to be at least $552,000.

En dehors des projets internes à certaines entreprises, il est visiblement difficile d’établir le coût des modifications liées à l’ergonomie et l’impact réel sur les bénéfices, car certains ne sont mesurables qu’a très long termes (la fidélité des clients,…).

Mon expérience.

Pour illustrer cela, nous avons quelques exemples vécus. Nous ne pourrions pas nécessairement chiffrer le ROI sur chacune de ces interventions mais cela peut donner une idée des cas possibles.

En 2001, nous avons été appelés « d’urgence » pour travailler sur une application de gestion des comptes clients. L’application était à destination de divers utilisateurs professionnels (vendeurs en boutique, chargé de clientèle en centre d’appels, SAV…). Elle permettait la création de nouveaux comptes clients. Cette application venait d’être rejetée par les utilisateurs « beta-testeurs », pour des problèmes d’interfaces. Après une analyse de l’activité sur les différents terrains, le constat était simple :

  • Une partie des postes de travail était équipée de « vieux » ordinateurs sous OS2/warp, Netscape 3, deux polices de caractères et  avec des écrans en 800×600 pixels.
  • Le processus de création de comptes était relativement linéaire, mais nécessitait une relecture avec le client avant validation.

Ces contraintes n’avaient pas été prises en compte dans la conception de l’IHM. Il a donc fallu notre intervention, le développement de la nouvelle interface, la livraison puis la validation par les utilisateurs. Le projet a donc pris 3 à 4 mois de retards, avec tous ce que cela implique de coûts supplémentaires.

Sur plusieurs projets, une part non négligeable du travail a été de rationaliser l’organisation des écrans et des interactions en créant des modèles de pages et aussi des « widgets » réutilisables pour plusieurs fonctions du service. Cela permet en amont de diminuer les développements et du côté des utilisateurs de s’approprier plus rapidement le service.

En conclusions.

Les sites d’e-commerce ont bien compris que l’ergonomie était un des facteurs clefs de succès même si tous n’ont pas encore pris la mesure de ce qu’était réellement une proche centrée sur l’utilisateur, l’activité et non sur le client. Dans le domaine des services et des applications professionnelles, la bonne intégration d’une approche centrée sur l’activité des utilisateurs dans les projets est simplement synonyme de réussite. Le retour sur investissement est souvent sans commune mesure avec l’investissement.

Chaque sou dépensé dans l’ergonomie vous sera rendu au centuple, mon bon seigneur !

N’hésitez à donner vos expériences sur le sujet.

Les sources.

Return on Investment for Usable User-Interface Design: Examples and Statistics, Marcus, A, 2002.http://www.amanda.com/resources/ROI/AMA_ROIWhitePaper_28Feb02.pdf (103KB). De nombreux exemples et une bibliographie importante.

Bias, R.G. and Mayhew, D.J. (Eds.). Cost-Justifying Usability. Academic Press, Boston, 1994. Il est régulièrement cité en référence. Disponible en partie sur Google books. 2éme édition sur amazon.

Human Factors International (2001). Some client experiences. Retrieved October 10, 2001, from www.humanfactors.com/library/casestudies.asp.

Anybody Can Do Usability.

Publié le par Raphaël
Dire !

Un article de Jakob Nielsen : Anybody Can Do Usability.

« Usability is like cooking: everybody needs the results, anybody can do it reasonably well with a bit of training, and yet it takes a master to produce a gourmet outcome. »

Que je traduirai par : « L’ergonomie c’est comme la cuisine : tout le monde a besoin du résultat, chacun peut la faire raisonnablement  bien avec un peu d’entrainement et pourtant il faut un grand chef pour obtenir un repas gastronomique. »

La comparaison me parait assez vrai !

Appel d’offre « inéquitable » à la SNCF.

Publié le par Raphaël
3

Le sujet que je vais évoquer là est plus qu’inquiétant. Mon but est bien d’avertir la communauté sur ces pratiques.

Pour situer le problème, les appels d’offres « inéquitables » sont des appels d’offres ou les annonces qui

  • Fixent un prix sans concertation des professionnels et produisent du dumping, ou rémunération faible, entraînant une activité professionnelle déficitaire ;
  • Demandent la fourniture d’un projet sans rémunération de dédit s’il n’est pas retenu ;
  • Ne respectent pas les droits d’auteur en ne fixant pas de limite d’utilisation, en exigeant une cession définitive pour une utilisation maximum sans contrepartie financière à sa juste valeur.

Cette « pratique » est relativement répandue dans le monde du graphisme et du design, mais fermement combattue par les organisations professionnelles. Par exemple, l’alliance française des designers blacks liste un certain nombre d’appels d’offres.

Par contre, c’est la première fois que je le vois apparaître dans le domaine de l’ergonomie et de la conception d’IHM. Pour rentrer dans le vif du sujet.

L’appel d’offre « inéquitable ».

La SNCF a lancer en septembre un « concours de développement d’interfaces tactiles (ou multitouch) à destination des développeurs, ergonomes indépendants, start-up, Web agencies et autres SSII. Objectif de celui-ci : inventer une nouvelle façon de vendre des billets de train en boutique SNCF en utilisant les interfaces multitouch Windows 7 et Microsoft Surface. »

C’est clairement un appel à projet non rémunéré doublé de ce qu’on pourrait appeler « un vol de propriété intellectuelle ».

Je vous livre juste l’article 10 du règlement concernant la propriété intellectuelle :

  • La SNCF est propriétaire de tous les droits de propriété intellectuelle relatifs aux interfaces soumises par les Participants ou aux concepts ergonomiques développés dans le cadre du Jeu.
  • Le titulaire garantit à la SNCF la jouissance paisible des droits qui lui sont cédés contre tous troubles, revendications ou évictions quelconque. Il garantit notamment la SNCF contre toute action en contrefaçon de tiers.
  • Dans l’hypothèse où une interface ou un concept ergonomique pourrait être considéré comme une œuvre susceptible d’être protégée sur le fondement du droit d’auteur, l’ensemble des droits patrimoniaux attachés à cette œuvre sont cédés, à titre gratuit, à la SNCF qui en devient propriétaire.
  • Le candidat ne pourra donc en aucun cas se retourner vers la SNCF si les concepts ergonomiques développés se retrouvent en toute ou partie dans les interfaces développés ultérieurement au concours par la SNCF.
  • La SNCF ne prend et ne prendra aucun engagement contractuel avec aucun des participants sur les suites données à ce jeu.

les liens sur 01.net qui est partenaire :

En conclusion, la SNCF se donne droit récupérer les bonnes idées, des gagnants ou non et d’en faire ce qu’elle veut. J’ai bien une dizaine de termes ou d’expressions pour qualifier ça, mais je doute qu’ils enrichissent la discussion !

Je trouve que ce type de concours dévalorise profondément la profession en demandant du travail gratuit. J’ai réellement du mal à comprendre l’intérêt de répondre à de tels concours et donc de les cautionner. Si quelqu’un pouvait m’expliquer ?

En complément.

Les résultats ont été publiés. Ils donnent lieu à un vote. Comme on pouvait s’y attendre, on trouve de très belles vidéos de communication ou de cinéma. Mais en terme d’ergonomie, en regardant de plus prés les vidéos, en ne s’intéressant qu’aux IHM, c’est d’une platitude absolue. Il n’y a rien de nouveau. Ce qui n’est pas étonnant, car les participants ne vont pas consacrer des moyens importants pour les trouver de bonnes idées à donner à la SNCF. Cela rejoint le sujet que j’ai déjà évoqué, pour innover il faut du temps et de l’argent.