Cet article présente les bonnes pratiques de l’interaction de drag and drop sur le web en suivant la chronologie de l’interaction : l’initiation, le déplacement et la validation. Nous verrons qu’un bon guidage est essentiel tout au long de l’interaction.

Initier l’interaction

Avant même de concevoir l’interaction de drag and drop, il faut faire comprendre à l’utilisateur qu’il peut faire glisser des éléments.

Lorsque les premières pages personnalisables, comme Netvibes ou iGoogle, ont été déployées, beaucoup d’internautes se sont sûrement demandés comment les utiliser. Pendant longtemps, Netvibes n’a fourni aucune explication sur le déplacement des modules sur la page. La seule indication était un changement de forme du curseur lorsque la souris survolait un module. La modification du curseur est un comportement standard pour indiquer qu’une action est possible à l’endroit pointé. Cependant ce n’est pas un guidage suffisant et il est nécessaire d’ajouter d’autres indications.

Sur le site Netvibes, seule la modification du curseur indiquait le drag and drop.

Depuis, Netvibes a intégré un tutoriel d’initiation qui apparaît lors de l’inscription au site. Il explique pas à pas la marche à suivre au nouvel utilisateur. Le principe du tutoriel vidéo est aussi souvent utilisé pour pallier à un guidage trop faible au sein de l’application elle-même : la vidéo est une bonne pratique, mais ce n’est pas suffisant.

Un standard s’est imposé pour indiquer le drag and drop, il consiste à matérialiser clairement la zone de réception par des pointillés (là où on glisse un élément). Faire apparaitre des instructions directement dans cette zone améliore le guidage. On suppose qu’une fois que l’utilisateur a effectué une première interaction de drag and drop, il a compris le principe et les instructions n’ont alors plus besoin d’être affichées.

Picasa affiche clairement la zone de réception des fichiers et donne les instructions dans cette zone. Une fois qu’une photo a été glissée, les instructions disparaissent. Remarquons qu’une alternative plus classique est proposée par un bouton.

Recommandations

• Reprendre autant que possible les standards que les utilisateurs connaissent déjà
• Proposer un tutoriel comme une vidéo de démonstration lors de la première utilisation et consultable par la suite au besoin
• Matérialiser la zone de réception avant que l’utilisateur ait débuté le glissement
• Donner des instructions directement dans la zone de réception lorsqu’elle est vide
• Dans la mesure du possible, afficher un texte d’aide en permanence pour expliquer l’interaction de drag and drop
• Afficher un retour visuel au survol de la souris pour faire comprendre que l’objet est déplaçable (changement de forme du curseur, bulle d’aide, etc.)
• En complément du drag and drop, proposer une alternative plus conventionnelle pour réaliser l’action (boutons, menus)

Guider le déplacement

Une fois que l’utilisateur a compris qu’il peut glisser certains objets de la page, il faut continuer de le guider tout au long de l’interaction.

Il est important de donner un retour à l’utilisateur sur la prise en compte de son action de drag and drop. Il faut lui permettre de suivre le déplacement de l’objet. Netvibes matérialise ce comportement en plaçant au bout de la souris une miniature de l’objet. L’emplacement de départ est lui rendu plus pâle pour rappeler à l’utilisateur ce qu’il est en train de manipuler.

Sur Netvibes, au cours du déplacement la page est réduite à une vignette

 Les applications de gestion d’email en ligne les plus populaires permettent de gérer les messages grâce au drag and drop (pour les placer dans un dossier par exemple). Cependant, il est rare de voir des incitations quant à cette possibilité. En conséquence, le drag and drop est perçu comme étant réservé aux utilisateurs expérimentés alors qu’il se veut justement plus “intuitif”.

L’interface doit aussi montrer à l’utilisateur ce qu’il peut faire ou non. Néanmoins, il faut être vigilant car cela peut être contre-productif : dans une ancienne version de Yahoo! Mail, lorsque l’utilisateur commençait à glisser un message, un icône « sens interdit » apparaissait. Plutôt inquiétant. C’est seulement lors du survol d’un dossier que le sens interdit se changeait en feu vert. Nous retiendrons pour le drag and drop, que le retour visuel doit être renforcé sur ce que l’utilisateur peut faire plutôt que sur ce qu’il ne peut pas faire.

Chez Yahoo! Mail, déplacer un message faisait d’abord apparaître… un sens interdit !

Dans la nouvelle version de Yahoo! Mail, au lieu du sens interdit, c’est le nombre de messages glissés qui apparaît : cela porte moins à confusion. Cependant, il manque une indication montrant au survol où il est possible de déposer le message.

Lorsque plusieurs messages sont sélectionnés pour un drag and drop, Hotmail attache une étiquette indiquant le nombre de messages en train d’être déplacés, ce qui conforte l’utilisateur dans la prise en compte de son action.

Recommandations

• Modifier l’aspect de l’emplacement de départ dès que le drag and drop commence
• Donner une apparence particulière à l’objet déplacé (miniature, transparence, étiquette de résumé, etc.)
• Guider d’avantage l’utilisateur sur ce qu’il peut faire plutôt que sur ce qu’il ne peut pas faire

​Valider l’action

L’action de drag and drop est finalisée par un « lâché » de l’élément dans la zone de réception. Ceci à pour conséquence de valider l’action de l’utilisateur. Il faut lui permettre d’anticiper les effets de cette validation.

iGoogle, qui permet de personnaliser la page d’accueil Google, donne à l’utilisateur un moyen de se projeter en modifiant dynamiquement l’agencement des différents blocs lorsque l’utilisateur glisse un module. L’utilisateur a ainsi un aperçu de la disposition qu’il s’apprête à créer : cela lui fournit une aide à la décision.

Sur iGoogle l’utilisateur déplace les modules sous la forme d’un « fantôme » et adapte dynamiquement l’agencement de la page pour que l’utilisateur ait un aperçu du résultat final.

Le réseau social Google+ permet de trier ses contacts en les glissant dans des “cercles”. Dès que le curseur survole un cercle, celui-ci change d’aspect : il grossit, change de couleur et laisse entrevoir les photos des contacts déjà présents dans ce cercle. Dans le même temps, les contacts glissés changent de couleur. Ces modifications d’interface indiquent clairement à l’utilisateur qu’il peut lâcher ses contacts à cet endroit et qu’ils vont alors rejoindre les autres contacts déjà présents dans le cercle.

Sur Google+, la phase de validation du drag and drop est explicite. Notez qu’un texte d’aide est visible en permanence pour expliquer l’interaction.

Enfin, il est bon d’animer la fin de l’interaction, une fois que l’utilisateur a lâché l’élément. En effet, l’objet déplacé est souvent repositionné lorsque l’utilisateur relâche le bouton de la souris (par soucis d’alignement par exemple). L’application web “Scrumy” déclenche une animation pour replacer les éléments à leur place lorsqu’ils sont lâchés en dehors de la zone de réception. L’utilisateur garde alors le contact visuel ce qui augmente la compréhension du comportement de l’interface.

Scrumy, une webapp de gestion permet le drang and drop de post-it. Une fois lâché, une animation replace le post-it au bon endroit .

 Il arrive aussi que l’objet déplacé change de forme ou même disparaisse après un drag and drop. C’est par exemple le cas d’un article sorti du panier sur le site de Panic. L’utilisateur peut gérer son panier par drag and drop : pour ajouter des articles, il les glisse à l’intérieur et pour les supprimer , il les glisse à l’extérieur. Remarquons que lors du déplacement une miniature du produit suit le curseur dès le début de l’interaction.

La suppression est matérialisée par une animation en forme de “nuage” lors du lâché. Ceci conforte l’utilisateur en lui montrant que son action à bien été prise en compte.

Sur le site de Panic, l’utilisateur peut supprimer des articles de son panier en les glissant à l’extérieur. Une animation en forme de “nuage” confirme la suppression. Néanmoins l’indication expliquant ce mode de suppression est trop discret (texte gris à gauche).

Recommandations

• Lors du drag and drop, faire ressortir la zone où l’élément peut être déposé lorsque celle-ci est survolée.
• Montrer dynamiquement un aperçu du résultat de l’action
• Après le drag and drop, animer la fin du déplacement pour garder le contact visuel ce qui augmente la compréhension du comportement de l’interface.
• Si le drag and drop consiste à dupliquer l’objet et non le déplacer de l’emplacement initial, dupliquer l’objet sur le curseur dès le début du déplacement.
• Maximiser la taille des zones de réception et minimiser la distance entre les éléments à déplacer et la zone de réception (d’après la loi de Fitts, l’interaction sera plus rapide donc plus facilement réalisable).

Conclusion

Le drag and drop est de plus en plus fréquent sur le web. S’il est correctement mis en oeuvre, il peut améliorer l’expérience utilisateur car il simule des comportements du monde physique et permet de manipuler directement les objets.

Reste qu’avant de concevoir une interface web avec drag and drop, il faut se poser la question de sa légitimité car parfois des boutons ou des cases à cocher sont plus efficaces et explicites pour l’utilisateur. Attention à l’effet de mode !

Peu d'activité sur twitter ces derniers temps de notre coté. Nous avons été très occupés par nos missions, la rédaction de notre ouvrage Ergonomie des interfaces : la 5ème édition et la sortie du nouveau site usabilis.com.
Voici donc les twitts de l'équipe Usaddict de ces 5 derniers mois. Une manière de vous faire partager autrement, tout ce qui touche à l'ergonomie des interfaces : tendance, innovation, curiosité, etc.

La voix off

La manière la plus évidente de palier l'absence d'écriture sur un site consiste à utiliser la voix off. Accueillir le jeune enfant avec une mascotte animée expliquant le contenu participe en outre à son installation immédiate et émotive dans l'univers proposé. Malheureusement, et probablement pour des raisons économiques, fort peu de sites ont recours à une telle introduction.

Sur Sesame Street une mascotte indique où cliquer

En revanche les boutons d’entrée dans les rubriques sont très souvent sonorisés au passage de la souris. Sur tfou.fr on entend ainsi « Dora », « Babar » ou « Franklin » au survol de leurs illustrations. Notons une bonne idée présente sur ce site : La possibilité de couper le son d’une boucle musicale tout en conservant ces indications de navigation.

Sur tfou il est possible de régler les effets sonores

Recommandations

• Accueillir l'enfant avec une voix off expliquant rapidement le contenu et les principaux boutons (les boutons «  Retour » et «  Quitter » n'ont pas besoin d'être expliqués
• Au passage de la souris sur un bouton, déclencher une voix off décrivant son action
• Donner la possibilité de couper les boucles musicales

Boutons d’actions

Les boutons de navigation par mascotte et par thématique sur le site Tfou

L'accès aux activités d'un site pour enfant se fait généralement via une mascotte ou une icône comme un pinceau pour le coloriage ou une pièce de puzzle pour les jeux. Les boutons doivent se démarquer et être explicites : grande taille, encadrement, couleur qui contraste avec le fond. La taille est importante, elle renforcera la présence des boutons et incitera les enfants à cliquer. Les boutons seront d’autant plus faciles à cliquer qu’ils seront grands : les enfants ne sont pas toujours très habiles avec une souris dès 3 ans ! D’autre part, si le site est utilisé sur tablette les boutons seront compatibles avec une utilisation tactile s’ils sont suffisamment gros : minimum 1cm de diamètre. Ici, comme ailleurs, la Loi de Fitts s'applique !

La signalisation des boutons d'action se doit d'être particulièrement claire dans des environnements où tout est graphique. En effet, il arrive que les boutons se confondent avec des éléments de décor. BayaM résout cette question en proposant le contenu principal dans une partie de l'écran. Tout le reste de la page est plongé dans l'ombre. Ainsi les boutons de navigation sont traités sur un mode mineur mais ils se détachent dans l'espace et s'éclairent au passage de la souris. 

Sur BayaM, les boutons de navigation sont bien séparés du contenu. Ils s'éclairent au passage de la souris.

Si l'enfant doit impérativement cliquer sur un bouton pour continuer sa visite, il est recommandé de le faire bouger et/ou clignoter. Autre astuce pour signaler les boutons d'action : les animer au passage de la souris.

Une charte d'animation (design d’interaction) est importante à mettre en place afin qu'ergonomie et esthétique ne se court-circuitent pas. On évitera par exemple d’animer des éléments qui ne sont pas directement concernés par l’activité de l’enfant, cela détournerait son attention. De même il est déconseillé de diffuser des animations en boucle, elles sont lassantes et peuvent dans certains cas créer une gêne visuelle.

Plusieurs sites soignent la lisibilité et la maniabilité sur les lecteurs vidéo. Les boutons « Lecture/Pause », « Avancer » ou « reculer » sont dessinés en très gros. La bonne idée du site Tfou consiste à proposer uniquement deux boutons : « Lecture/Pause » et « Plein écran ». Néanmoins, le site n'a pas masqué les boutons natifs de la vidéo (ici en blanc sur noir), il persiste donc une incohérence.

Tfou-3-6.fr affiche en grande taille les deux uniques boutons de son lecteur vidéo.

Recommandations

• Une fois entré dans une activité, proposer un nombre réduit de boutons
• Dessiner de grands boutons détachés du fond et distincts des éléments du décor
• Proposer de larges zones de clic qui doivent être compatibles avec le tactile
• Animer les boutons au passage de la souris
• Sur un lecteur vidéo, supprimer les boutons «  Avancer » et «  Retour » pour simplifier l’utilisation

Rubriquage et navigation

Pour les sites internet pour enfants, on évitera les menus classiques de navigation et d’autant plus les menus déroulants, ils sont trop complexes. Comment montrer alors la richesse de son contenu ? Tfou propose un double accès au contenu : l’enfant peut cliquer soit sur un personnage soit sur une activité (jeux de lettres ou de chiffres, vidéos, etc.) pour aboutir au même contenu. Cela permet la flexibilité avec les différentes perceptions que peuvent avoir les utilisateurs.

Sur certains sites, la profusion est telle que des sous-rubriquages s'imposent et il faut parfois trois ou quatre clics avant d'accéder à un contenu. À vrai dire, même un adulte s'y perd. Jakob Nielsen, expert mondial en ergonomie, aborde ce point dans son article Children's Websites: Usability Issues in Designing for Kids (en) :

« Alors qu’un excès de navigation est ennuyeux et déroutant pour les adultes, cela peut être dévastateur chez les enfants. »

BayaM a choisi la sobriété. Sur le grand arbre de l'accueil, quatre activités seulement sont proposées et mises à jour régulièrement. Sur l'écran de l'activité choisie, un bouton « + »permet d'accéder aux archives présentées sous forme de tableaux de vignettes. De chaque côté du grand arbre, des flèches jaunes permettent d'accéder à d’autres univers. Néanmoins, ces flèches se fondent avec l’arrière-plan, elles risquent de ne pas être vues par certains enfants. Il serait aussi intéressant de mener un test utilisateur avec des enfants pour vérifier la compréhension de l’icône « + » qui semble abstraite.

Les archives sur BayaM : une présentation simple

Un autre site très performant mérite qu'on s'y arrête. Il s'agit de poissonrouge.com créé et actualisé depuis dix ans par un artiste anglais et une ergonome française. L'enfant clique sur l'un des éléments de décor qui constitue le bric à brac de la Une. Certains clics déclenchent une animation amusante sans quitter l'écran, d'autres font entrer dans une activité, d'autres encore mènent vers un nouvel écran regroupant plusieurs activités. Dans tous les cas, il n'y a jamais plus de deux boutons de navigation : un bouton contextuel pour revenir sur un écran regroupant une thématique d'activités et un bouton « poisson rouge » pour revenir à l'accueil. Une telle simplicité impose évidemment de se brider sur le nombre d'activités proposées. Cette navigation minimaliste n’est pas sans rappeler celle qu’on trouve sur iOs : iPad et iPhone.

Cependant, il arrive que le bouton poisson change d’emplacement d’un écran à l’autre. La navigation perd donc en cohérence, aussi épurée soit-elle.

Aucun écran ne comporte plus de deux boutons de navigation sur Poissonrouge.com

Recommandations

• Eviter une navigation trop profonde : 2 à 3 étapes maximum
• Permettre différents moyens d’accéder aux activités
• Toujours placer les boutons de navigation (retour, accueil…) au même endroit

Le clic

Rappelons que les enfants sont novices dans l’utilisation de l’outil informatique. Pour cette raison, il est important de pouvoir jouer et naviguer en utilisant uniquement le clic gauche et éviter l’usage du scroll. La plupart des sites internet pour enfants représentent la souris par une flèche stylisée beaucoup plus grosse que le curseur classique. Cela permet de l’adapter au graphisme du site et de faciliter son utilisation. Il est également important de proposer des zones de clic suffisamment larges afin d’éviter les erreurs de manipulation. 

Comme Poissonrouge.com, il est aussi possible de proposer une interaction exploratoire : c'est en cliquant ou survolant au hasard que l'on fait danser des abeilles, chanter les poupées ou que l'on dessine la carte des étoiles. La promenade se révèle pleine de surprises et l’amusement est au rendez-vous.

Recommandations

• Utiliser uniquement le clic gauche
• Éviter l’utilisation du scroll
• Prévoir que le survol n’existe pas en tactile (iPad et autres tablettes) : selon les cas on pourra le doubler par le clic
• Une navigation exploratoire ajoutera de la surprise

Le mode plein écran 

Il n'est pas rare que les sites pour enfants s'ouvrent en plein écran. L'environnement y gagne en esthétique et cette pratique limite les clics intempestifs qui emmèneraient les enfants sur d'autres sites (favoris…). La navigation de l’enfant sécurisée et le parent rassuré.

Avec BayaM aucun navigateur n'est ouvert puisqu'il s'agit d'une application à télécharger : l'accès se fait via une icône sur le bureau. L'enfant navigue dans un environnement fermé. Les parents peuvent également paramétrer la durée de jeu de leur enfant.

BayaM s’ouvre en plein écran, il faudra appuyer sur « Echap » ou quitter l’application pour en sortir

Conclusion

Si l’ergonomie est essentielle pour toute interface informatique, elle est fondamentale pour les sites et les applications pour les jeunes enfants. Bien qu’ils apprennent vite, ceux-ci n’ont pas encore assimilé tous les standards de l’informatique et du Web. Au delà des recommandations que nous avons présentées dans cet article nous conseillons vivement le test utilisateur. Il permet de vérifier directement avec les enfants s’ils comprennent bien l’interface et s’ils s’y amusent… C’est ce qui importe, finalement !

"Ergonomie des Interfaces" est la 5ème édition de « Ergonomie du logiciel et design web ».

Cette cinquième édition a été profondément remaniée afin de prendre en compte les nouveaux dispositifs d’interaction et accompagner tous les concepteurs d’interfaces sur les différentes phases de la démarche de conception ergonomique.

Ré-édité depuis 10 ans

Délibérément pragmatique, cet ouvrage, dont la première édition a été publiée en 2001, a été lu, relu, exploité et utilisé par de nombreux chefs de projet, développeurs et concepteurs d'interface.

En 10 ans, les interfaces et l’informatique en général ont beaucoup évolué. Nous ne pouvions plus réduire la conception des interfaces aux logiciels et au web. Désormais, les interfaces se déclinent également sur d’autres dispositifs, en particulier les smartphones et les tablettes tactiles.

Les dix ans de l’ouvrage correspondent aux dix ans d’Usabilis. Dix années au cours desquelles nous avons mis en œuvre les recommandations et les méthodes de ce livre. Ces expériences partagées sur des projets variés nous ont montré l’importance et la richesse des regards croisés et de la multi-disciplinarité pour concevoir une interface réussie. Nous avons donc décidé d’écrire cette 5ème édition à trois afin que chacun puisse apporter sa propre sensibilité à l’ouvrage.

Pour cette cinquième édition, nous ne pouvions plus conserver cette dichotomie logiciel/web qui ne correspondait plus à la réalité du terrain. C’est pourquoi, nous avons choisi une présentation transversale du processus de conception, indépendamment des dispositifs d'interaction.

Les premières éditions de l’ouvrage ont été construites à partir du support des formations Usabilis et des cours de Jean-François Nogier. La cinquième édition s’est enrichie de l’expérience acquise lors de nos interventions auprès des équipes de développement et des éditeurs de logiciel.

Il était donc naturel d’introduire des exemples concrets d’applications pour lesquelles nous avons mis en œuvre la démarche ergonomique. Nous remercions nos clients qui ont accepté de dévoiler ainsi une partie de leurs « secrets de fabrique ».

Un guide pratique pour la conception des interfaces

Véritable guide de conception, les lecteurs y trouveront, chapitre par chapitre, des réponses aux questions qu'ils se posent au fur et à mesure de la réalisation de l'interface. Depuis le ciblage de l'application, jusqu'aux choix graphiques, en passant par la conception du système de navigation et les éléments d'interaction, les concepteurs d'interface sont accompagnés dans les différentes phases de leur projet.

Illustrée par de nombreux exemples, cette 5ème édition intègre désormais les interfaces mobiles ainsi que les recommandations pour le e-commerce.

L’audience

"Ergonomie des Interfaces" s'adresse à toutes les personnes impliquées dans la conception et le développement d'applications : logiciels, sites web, applications mobiles ou tactiles, en particulier les responsables de la maîtrise d'ouvrage et des spécifications de l'interface homme-machine.

>> Lire un extrait

Auteurs

Jean-François Nogier

Ce livre est le fruit du parcours professionnel de Jean-François Nogier. Tout d’abord au centre scientifique IBM France, il a mené des recherches sur la communication entre l’homme et la machine. Ensuite à Thales, il a eu l’occasion de participer au développement de centres de contrôle aérien et des postes de travail pour les aiguilleurs du ciel. Puis, comme web manager, il a coordonné les activités web de la filiale Thales ATM.

En 2002, Jean-François Nogier fonde Usabilis, qui depuis 10 ans, accompagne les maîtrises d’ouvrage dans la conception des interfaces des services en ligne et des produits logiciels.

Thierry Bouillot

Passionné par la rencontre de la psychologie cognitive et le monde multimédia, Thierry Bouillot s’est associé naturellement à cet ouvrage. Formé à la recherche fondamentale en psychologie cognitive, il a d’abord étudié les mécanismes de l’attention en laboratoire universitaire à Angers, Bruxelles et Toulouse. Lors de son doctorat, il participe à la mise au point des méthodes d’évaluation ISO pour PSA Peugeot Citroën.

Thierry a rejoint Usabilis en qualité de consultant en ergonomie informatique, spécialiste de la conception d’interfaces et de l’expérience utilisateur ; il est également chargé de l’éditorial et de l’animation du blog Usaddict.

Jules Leclerc

Designer d’interaction, Jules Leclerc est issu d’un parcours dans la conception de produits innovants et d’interfaces graphiques. Formé à l’École de design Nantes Atlantique, sa priorité est de concevoir une interaction de qualité à travers une démarche centrée sur l'utilisateur.
Il débute son parcours professionnel dans la société Violet pour laquelle il travaille sur l’interaction du lapin Nabaztag. Il intègre ensuite une agence de communication dans laquelle il est responsable de la partie numérique.
Aujourd’hui consultant en ergonomie et design chez Usabilis, il intervient sur la conception de logiciels, sites web, applications mobiles ou interfaces TV.

Les incontournables

Ergonomie des interfaces, 5ème édition Jean-François Nogier, Thierry Bouillot et Jules Leclerc Dunod, 2011 Sortie en octobre 2011

Nous sommes fiers de vous présenter cet ouvrage, fruit du travail de notre équipe (Usaddict et les consultants d'Usabilis) !
Depuis 5 éditions, il s'adresse à toutes les personnes impliquées dans la conception et le développement d'applications : logiciels, sites web, applications mobiles ou tactiles, en particulier les responsables de la maîtrise d'ouvrage et des spécifications de l'interface homme-machine.
Illustrée par de nombreux exemples, cette 5ème édition intègre désormais les interfaces mobiles ainsi que les recommandations pour le e-commerce et fait la synthèse des différentes règles à suivre en matière d'ergonomie des interfaces. Du ciblage de l‑'application aux choix graphiques, en passant par la conception du système de navigation et les éléments d'interaction, les concepteurs d'‑interface sont accompagnés dans les différentes phases de leur projet interactif.

Usability Engineering Jakob Nielsen Academic Press, 1993

Usability Engineering introduit l'approche de développement itératif centrée utilisateur. Jakob Nielsen y présente les méthodes et les principes directeurs conduisant à optimiser la conception d'applications logicielles et sites web. L'accent est mis sur la conduite des phases de prototypage et les tests d'utilisabilité, étapes clés de la conception d'un logiciel.

Designing Interfaces Jenifer Tidwell O'Reilly Media, 2011 Nouvelle édition

Certainement le livre traitant d'interfaces le plus vendu au monde. Designing Interfaces liste les bonnes pratiques et recommandations pour concevoir une expérience utilisateur de qualité. Chaque exemple est accompagné de conseils pratiques facilement applicables.
Les chapitres décrivent des concepts clés de la conception qui sont souvent mal compris comme l’affordance, la hiérarchie visuelle ou l'utilisation de la couleur. Le livre propose aussi une méthodologie pour réaliser une interface de qualité.
Site du livre : www. designinginterfaces.com

Designing the User Interface, 5ème édition Ben Schneiderman, Catherine Plaisant, Maxine Cohen et Steven Jacobs Addison-Wesley, 2009.

Cet ouvrage, plus généraliste, est probablement l'un des mieux réussis sur le sujet. Ben Shneiderman y aborde les différents aspects de l'interaction homme-machine aussi bien sous l'angle de l'utilisabilité que sous celui des techniques de développement et de la recherche. Depuis la 1ère édition de 1986, de nombreuses contributions ont fait de cette ouvrage une référence.

Conception de sites web

Zéro prise de tête Steve Krug Dunod, 2001.

Ne vous fiez pas à son titre racoleur, ni à ses illustrations de BD : « Zéro prise de tête » est un excellent ouvrage pour apprendre l'ergonomie web. Avec le souci d'aller rapidement à l'essentiel, Steve Krug nous explique, dans un langage clair et imagé, comment concevoir des sites web. S'appuyant sur des exemples vécus, il donne des conseils pratiques pour mener des tests d'utilisabilité et intégrer la pratique de l'utilisabilité dans la conception d'un service en ligne.

Ergonomie Web : Pour des sites web efficaces Amélie Boucher Eyrolles, 2009.

Ce livre développe les questions que les concepteurs de site Web doivent se poser pour séduire et fidéliser leurs internautes. Dans un style vulgarisé, les concepts et les principes de la conception Web sont décrits. Généraliste et illustré c'est une boite à outils complète et en français pour veiller aux critères de l'ergonomie Web. 

Réussir son site web en 60 fiches, 3ème édition Jean-Marc Hardy et Gaetano Palermo Dunod, 2010, 3ème édition

Destinée principalement aux chefs de projet web, la check-list de 60 points clés élaborée par Jean-Marc Hardy couvre l'ensemble des éléments qui concourent à la qualité d'un site web. Partant du principe qu'un site de qualité est un site utilisable, elle est principalement orientée sur la perception du site du point de vue des internautes. La check-list couvre à la fois les aspects techniques de réalisation du site, l'ergonomie, le design graphique, le contenu et les aspects marketing. Chaque point est détaillé par des recommandations, des études de cas, ainsi que de nombreuses références.

Professional Web Design L'équipe de Smashing magazine John Wiley & Sons Inc, 2011

Ce livre regroupe une sélection des meilleurs articles sur la conception web publiés sur le site Smashing Magazine en 2009 et 2010.
L'ouvrage présente les lignes directrices à suivre pour réussir un projet Web professionnel, y compris la communication avec les clients. On y trouve des conseils sur la conception d'interfaces utilisateur pour les applications Web et même des règles de réseautage professionnel !
Le livre présente des conseils d'experts, et il permet également d'apprendre à argumenter et répondre à la critique sur la conception.

Web Navigation: Designing the User Experience Jennifer Fleming et Richard Koman O'Reilly & Associates, 1998

La navigation est un élément fondamental pour réussir un site Web. Pourquoi tant de gens se perdent sur ​​le Web ? Comment un site Web peut-il être plus adapté à l'internaute ?
Ce livre explore la conception de navigation en profondeur, abordant l'utilisabilité, le design d'interface et présentant des cas pratiques. Différents domaines sont abordés : divertissement, e-commerce, sites d'information ou encore les sites communautaires. Des sites populaires sont passés au crible pour montrer les bonnes et les mauvaises pratiques.

Web Site Usability : A Designer's Guide Jared Spool, Terri DeAngelo, Tara Scanlon, William Schroeder et Carolyn Snyder Series in Interactive Technologies, Morgan Kaufmann, 1998.

Jared Spool et ses colaborateurs experts en ergonomie présentent leurs recherches sur l'utilisabilité des site Web. Clairement écrit et bien illustré le livre présente 50 tests d'utilisabilité passés sur 9 sites. Il décrit les bonnes et mauvaises pratiques de la conception Web. Les résultats sont surprenants, beaucoup des conclusions vont à l'encontre de la vision habituelle de la conception Web. En s'appuyant sur l'utilisation réelle des sites par des internautes, l'ouvrage aide les concepteurs de sites Web à améliorer l'ergonomie.

Représentation de l'information

Information Dashboard Design: The effective visual communication of data Stephen Few O'Reilly Media, 2006.

Les tableaux de bord (dashboard) sont devenus très populaires dans les logiciels et les applications Web. Par une conception synthétique, ils permettent à l'utilisateur de visualiser des informations importantes immédiatement.
Néanmoins, la mise en forme d'un tableau de bord doit répondre à certaines règles pour être facilement lu et compris. Si les règles de représentation de l'information ne sont pas suivies, l'utilisateur risque de mal comprendre les données affichées, voire de faire des erreurs d'interprétation. D'autre part, si un tableau de bord ne parvient pas à montrer rapidement à l'utilisateur ce qu'il doit savoir, il ne sera pas utilisé. Peu importe que les graphiques soient graphiquement soignés ou en 3D, il faut avant tout que l'interface soit lisible.
À travers des exemples concrets et une réelle pédagogie sur les concepts de représentation des données, ce livre guide le lecteur dans la conception des tableaux de bord.

Data Flow: Visualising Information in Graphic Design Robert Klanten et Gilles Berton Thames & Hudson, 2009 – une nouvelle édition est parue en 2010

Afin d'optimiser la compréhension de l'interface, l’information est très souvent présentée sous une forme graphique. Le mode de représentation des informations est essentiel pour la conception des interfaces web et les tableaux de bord.
Data Flow est une source abondante d’exemples de mise en forme graphique de l’information. Au-delà des schémas archétypiques tels que les camemberts et les histogrammes, l'ouvrage présente différents types de diagrammes adaptés à des cas particuliers.
Sur 256 pages, le livre présente l’art de transformer des données informationnelles complexes en représentation visuelle lisible.

Méthodes pour la conception centrée utilisateur

About Face : The Essentials of User Interface Design Alan Cooper et Robert Reimann Wiley, 2007

About Face 3 est une des références en conception centrée utilisateur depuis sa 1ère édition (1995). Cooper et Reimann définissent les principes de conception des interfaces en mettant l'utilisateur et ses buts comme préalable à toute démarche de conception. Il en découle notamment la méthodes des personas dont Cooper est l'un des précurseurs en ergonomie, mais également de nombreuses recommandations pour le logiciel, le web et les nouvelles interactions d'aujourd'hui.

Information Architecture for the World Wide Web Louis Rosenfeld, Peter Morville O'Reilly Media, 2006 3ème édition

L’architecture de l’information est une phase clé dans la conception des interfaces. Néanmoins, elle est souvent négligée ce qui conduit à produire des logiciels et sites Web où se perdent les utilisateurs. Cet ouvrage est un classique du domaine, il donne les bases méthodologiques pour construire une architecture de l’information adaptée aux utilisateurs. L’édition de 2006 est enrichie d’exemples, scénarios et bonnes pratiques.

Mesure de l'utilisabilité des interfaces Thierry Baccino, Catherine Bellino et Teresa Colombi Lavoisier-Hermès, 2005.

Ouvrage de référence, il décrit de manière précise et détaillée les différentes méthodes d'évaluation ergonomique. Pour chaque méthode, une fiche présente le protocole à mettre en place, le matériel à utiliser, ainsi que tous les détails pratiques de mise en oeuvre. Principalement destiné à un public professionnel, cet ouvrage constitue un état de l'art précis des principales méthodes expérimentales employées en ergonomie. Une lecture conseillée à tous ceux qui souhaitent conduire des évaluations ergonomiques.

Human-Computer Interface Design Guidelines C. Marlin Brown Ablex, 1988.

Cet ouvrage de référence contient des centaines de conseils pratiques et règles pour concevoir des logiciels à travers une méthode orientée utilisateur. L'auteur examine les questions liés à l'utilisabilité des interfaces mais aussi aux périphériques et supports utilisés.

Principles and guidelines in software user interface design Deborah J. Mayhew Prentice-Hall, 1992.

Deborah J. Mayhew est l'une des premières à avoir rassemblé et défini les grands principes de la conception en ergonomie informatique. Il s'agit encore d'un ouvrage de référence malgré son âge, notamment parce qu'il décrit de manière méthodique les interactions homme-machine et des guides de styles pratiques pour concevoir des interfaces logicielles.

The psychology of human-computer interaction Stuart K. Card, Thomas P. Moran et Allen Newell Lawrence Erlbaum Associates, 1983.

Cet ouvrage, malgré son âge (!), reste un incontournable de l'ergonomie informatique et des facteurs humains, notamment pour tous les concepteurs d'interface qui n'ont pas une formation solide en psychologie. Les auteurs définissent les interactions homme-machine à travers les connaissances de la psychologie cognitive. Les parallèles entre le cerveau humain et celui de l'ordinateur sont subtilement décrits déjà à l'époque, en particulier dans la modélisation du processeur humain.

Effective Prototyping for Software Makers (Interactive Technologies) Jonathan Arnowitz, Michael Arent et Nevin Berger Morgan Kaufmann, 2006.

Le Prototypage (appelé aussi "maquettage") est une phase essentielle du processus de développement d'un produit informatique. Cette étape permet de réduire les erreurs d'utilisabilité et de diminuer les coûts de développement.
Ce livre guidera les concepteurs de logiciel pour construire des prototypes efficaces et suffisamment réalistes pour valider les choix de conception.
On y trouve : une méthode de prototypage en plusieurs étapes, des modèles et exemples, une variété d'outils de prototypage qui ne nécessitent pas de compétences techniques ou graphiques pour être utilisés.

Universal Principles of Design William Lidwell , Kritina Holden et Jill Butler Rockport Publishers Inc., Revised edition (30 janvier 2010)

Que ce soit une campagne marketing ou une exposition dans un musée, un jeu vidéo ou d'un système complexe d'information, la conception d'un produit est l'aboutissement de nombreux concepts et de pratiques variées issus de disciplines différentes.
Le livre propose une approche globale et pluridisciplinaire de la conception. Richement illustré, il décrit clairement chaque concept de conception avec des exemples visuels de cas pratiques. Règle du 20/80, autosimilarité, storytelling, chaque concept majeur est abordé et propose aux lecteurs d'élargir leurs connaissances en conception.

Essais et prospective

The Invisible Computer Donald A. Norman MIT Press, 1998

Donald Norman reconnaît que l'ordinateur personnel permet flexibilité et puissance, il déplore aussi ses limites : «L'ordinateur personnel est peut-être la technologie la plus frustrante jamais inventée» écrit-il.
Il propose de faire disparaitre le PC et de le cacher dans l'infrastructure : caché dans les murs, dans les tableaux de bord de voiture, et tenant dans la paume de la main. Son message est clair, les outils informatiques doivent nous servir et ne pas être une contrainte.

The Inmates Are Running the Asylum Alan Cooper Sams, 1999

Dans ce livre qui aborde l'impact obscur des technologies sur nos vies, Alan Cooper explique avec provocation que les programmeurs doivent sérieusement réévaluer le processus de développement d’un logiciel qui aboutit à proposer des fonctionnalités hostiles à l’utilisateur final.
Car pour l'utilisateur moyen, la multiplication des fonctionnalités est un grand fardeau, renforçant la perception de difficulté souvent associée à l'informatique.
Cooper ironise et exagère souvent le trait dans son ouvrage, mais le propos est instructif.

Designing Interactions Bill Moggridge MIT Press, 2007. Téléchargement gratuit sur le site designinginteractions.com

Cette ouvrage s'intéresse à la conception de produits interactifs, et s'adresse peut-être d'abord aux concepteurs qui souhaitent prendre du recul sur leur pratique. Bill Moggridge retracent l'évolution des idées de leur inspiration à leur mise en oeuvre, à travers des success stories.

Mise à jour 30/09/2011 :
 - Ajout des ouvrages de Louis Rosenfeld et Peter Morville (Information Architecture), A. Boucher (Ergonomie web) et B. Moggridge (Designing Interactions), que nous avions omis.

Dans cet article nous abordons comment ce nouveau marché influence déjà les usages, le besoin d’interactivité et bien sûr la conception d’interface. Certains secteurs comme la presse y voient déjà de nouvelles opportunités pour mêler interactions tactiles et contenus interactifs.

La presse se rue sur les tablettes tactiles

Le succès des tablettes auprès du grand public ne sera bientôt plus à démontrer. Ce que grand nombre d’entreprises ont rapidement compris. Les éditeurs de presse en tête, qui ont vu dans les smartphones et tablettes, un moyen de redynamiser leurs ventes. Les Echos (réalisé par visuamobile) ont été dans les premiers à lancer leur application iPad, rapidement suivis par Télérama (telerama.fr/ipad) ou encore Libération.

Application Les Echos pour iPad

NewsCorp (entreprise de presse fondée par le célèbre Rupert Murdoch) a même lancé en juin un magazine uniquement dédié à l’iPad, The Daily (article de generation-nt.com). Le magazine Les clés de la presse, dédié aux éditeurs de presse, a même créé une page Facebook sur l’iPad (facebook.com/Cles.de.l.ipad.pourlapresse), croyant dur comme fer aux avantages de la tablette pour la presse. Et il n’est pas le seul ! (article de l'observatoiredesmedias.com)

Un engouement qui ne se limite pas aux entreprises de presse écrite. France 24 a réalisé des documentaires spécialement dédié aux tablettes (article de readwriteweb.com) et ABC News met ses archives dans une e-librairie consultable sur tablette (article de actualitte.com).  L’édition s’intéresse elle aussi de près aux tablettes (article de 20minutes.fr). La Réunion de musées nationaux a développé une application permettant de consulter le catalogue de l’exposition Monet sur l’iPad et aussi un outil dédié aux plus jeunes, pour accompagner l’exposition d’Odilon Redon (article de idboox.com).

  
  
Application iPad de l'exposition d'Odilon Redon

La tablette, à la fois magazine, livre, ordinateur et TV

Confort d'usage

Mais pourquoi un tel engouement ? Pour le confort d’utilisation, tout d’abord. Parce que, finalement, de par son format (un petit A4), sa légèreté (aux alentours de 600g pour l’iPad 2), l’utilisateur a l’impression de tenir en main un livre ou un magazine. Un magazine au design agréable, avec un écran de qualité, à l’interface graphique soignée.
Des fonctionnalités que l’utilisateur active ou non, selon ses désirs, depuis son canapé ou en situation de mobilité. C'est certainement l'une des clés du succès : la posture d'usage est libérée dans l'habitat. Plus besoin de s'installer derrière un bureau ou d'attendre que l'ordinateur portable s'allume laborieusement pour accéder à Internet, jouer ou ajouter un évenèment à son agenda. Quel que soit son âge, étant donnée la simplicité d’utilisation, tout le monde est susceptible d'utiliser l'iPad : il existe des applications pour les bébés (article sur enfant.com) et pour les séniors (article sur habitat-social-connecte.fr).

Utilisation centrée application

Le confort d'usage n'est pas la seule explication à cet enthousiasme sucité par les tablettes. L'interface centrée sur l'usage est une composante fondamentale du succès. Avec l'iPhone, puis l'iPad, Apple a proposé une nouvelle vision de l'interaction informatique. En effet, grâce au système d'exploitation mobile (iOS) l'utilisateur interagit très simplement avec ses contenus et services. Ici, pas d'explorateur de fichiers qui oblige l'utilisateur à ouvrir une succession de dossier pour trouver et éditer un document, mais une interaction directe par application. L'utilisateur ouvre une application qui propose un usage précis et lui permet de profiter de ses contenus, sans avoir à ce demander « où est ce fichier »,  « où est installé ce programme ? », « Avec quel logiciel ouvrir ce fichier ? » etc. C'est donc toute la perception du fonctionnement du système qui est largement clarifiée. D'autre part, l'installation des applications est elle aussi facilitée en comparaison d'un ordinateur classique.
Ce nouveau paradigme d'interaction commence d'ailleurs à s'appliquer aux systèmes d'exploitation (voir OS X Lion de Apple). On peut donc imaginer que les tablettes et smartphones, sous diverses formes, pourraient succéder aux ordinateurs. Indicateur de cette tendance : en 2010 il s'est vendu plus de terminaux mobiles que d'ordinateurs (article CNN).

Des contenus vivants

Pour la presse, comme pour l’édition, c’est l’occasion de proposer un contenu interactif sur un support qui ressemble à un livre, un rapport avec le support qu’on ne retrouve pas avec l’ordinateur. (Alertbox de Nielsen sur la lecture sur tablette). « Les tablettes offrent une interactivité particulière qui permet de retomber dans un monde plus matériel, explique Thomas Bijon, du département multimédia de la Réunion des musées nationaux (RMN). Alors que la souris de l’ordinateur crée de la distance, l’écran tactile permet d’établir un contact charnel avec le matériel. » Et la qualité d’image de l’iPad permet de proposer une mise en image de qualité, ce qui n’était pas vraiment possible avec le livre numérique, en noir et blanc.

Application iPad de la réunion des musées nationaux

De belles interfaces avec des contenus interactifs, le véritable plus par rapport aux supports papier : le lecteur peut visionner des vidéos, écouter des sons, lancer des diaporamas, prendre des notes, marquer des pages, accéder au fil de sa lecture aux notes de bas de page… Les possibilités sont multiples ! RMN voit un autre gros avantage pour les beaux livres numériques qu’il publie : celui de proposer les photos des œuvres présentées en haute définition, pour que le lecteur puisse faire des zooms et voir de près le travail de l’artiste. Et cela à un moindre coût : quand le livre papier sur l’exposition Monet coûte 9 euros, le livre numérique disponible sur l’iPad n’est qu’à 4,99 euros. De même, le Télérama numérique ne coûte que 1,99 euros contre 3 euros pour la version papier.

Si ces fonctionnalités d’interactivité existent généralement pour les smartphones, les tablettes offrent l’avantage du grand écran qui permet plus de confort et donc une consultation prolongée. Si bien que certaines entreprises les utilisent pour faire des démonstrations en magasin : les tablettes ne remplacent pas que les ordinateurs et les livres, mais aussi les plaquettes de présentation !

Chez France 24, on pense même que les tablettes concurrencent la télévision, de par leur simplicité d’utilisation, leur confort visuel et la possibilité qu’elles offrent de choisir le programme que l’on souhaite regarder. C'est une combinaison entre l'avantage qu'offre Internet de pouvoir visionner des programmes à la demande et le confort du canapé jusqu'ici réservé au téléviseur.

Application de France 24 pour iPad

Et ils ne s’y trompe pas puisque qu’une étude rapporte que les utilisateurs de tablette passeraient jusqu’à 5 fois plus de temps sur les sites de news que les internautes avec leur pc (article sur presse-citron.net).

Recommandations pour la conception des applications tactiles

• Proposer une application pour tablettes tactiles en accord avec son secteur d’activité (un livre de recettes interactives pour Nestlé Dessert, un compagnon de voyage pour le Guide du Routard…)
• Apporter un réel plus à l’utilisateur en utilisant les possibilités d’interactivité et dépasser ce qu’apporte un support statique
• Séduire et privilégier l’utilisateur par une navigation immersive et des contenus originaux
• Réduire les fonctionalités de l'application pour aller à l'essentiel et rester simple

Des marques et des griffes

Pour communiquer, les marques investissent bien entendu sur les tablettes. C’est aussi l’occasion de créer du buzz en proposant des applications ludiques. C'est le cas de Friskies…
Devant tant de caresses pour ces tablettes, les chats risquent de se sentir délaissé ! Friskies s’est donc chargé de réduire ces potentielles frustrations en proposant une application dédiée à nos amis à poils, voyez plutôt :

Conclusion

Les possibilités d’interactions des tablettes sont donc multiples et visent la simplicité. Les entreprises qui ont lancé leurs applications ne s’y sont pas trompées. Même si pour l’instant l’objectif est plutôt un objectif d’image, les utilisateurs de tablettes n’étant pas très nombreux. La rentabilité n’est donc pas encore au rendez-vous mais il n’était pas possible pour certaines grandes entreprises (les éditeurs de presse en tête) de passer à côté d’une telle innovation. « Pour la presse, il y a un véritable enjeu de présence : il faut être présent sur l’iPad, insiste Jérémie Engel, pdg de l’agence spécialiste des terminaux mobiles Visuamobile. D’une manière générale, les marques ont appris que les tablettes faisaient partie de la stratégie multi-écran, au même titre que les smartphones aujourd’hui ou que les TV connectées demain. » D’autant plus que cela pourrait leur permettre de toucher des cibles de jeunes et/ou de technophiles qui ne sont pas naturellement lecteurs de presse ou visiteurs d’expositions de peinture. « Nous espérons donner aux techlovers l’envie de s’intéresser à l’art », déclare Thomas Bijon (RMN).

Dans un prochain article nous aborderons de manière plus précise l'interaction que proposent les tablettes et les recommandations ergonomiques (tactiles) qui en découlent.

Les design patterns sont des schémas de conception, c'est-à-dire des modèles d'interface répondant à des cas typiques d'interaction. Les design patterns permettent d'avancer rapidement lors de la conception en fournissant des gabarits qu'il suffit d'adapter et d'assembler pour construire l'interface.

Notre dernière liste de librairies et sa mise à jour commençaient à dater un peu, voici une nouvelle mise à jour plus complète.

Au menu de cet article : des librairies de patterns pour trouver des solutions ergonomiques (ici), des galeries de patterns pour s'inspirer (ici), et des librairies interactives pour se faire une idée (ici).

Les librairies de patterns

Les librairies ont l'avantage non seulement de proposer de nombreux patterns, mais surtout d'en expliquer l'usage. Car chaque pattern permet de répondre à un besoin en termes d'interaction et de solutions ergonomiques.

Les nouvelles librairies

Patternry

Des patterns actuels, avec une explication sur leur usage en contexte. Patternry, initiative finlandaise, a su s'imposer depuis quelques années en proposant une actualisation régulière de ses ressources et propose son service de librairie privée (anciennement UI Pattern Factory)

Endeca Design Pattern Library

Une librairie qui mérite de s'enrichir, car ses patterns sont tous actuels. La société américaine Endeca propose une description et le contexte d'usage de patterns devenus assez courant aujourd'hui.

Les librairies incontournables

UI 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!

Pattern Browser

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

Un catalogue dont la navigation originale et dynamique a été récemment renouvelée, avec un contenu concis et des démonstrations interactives.

Designing Social Interfaces Patterns Wiki

Une belle librairie de patterns toujours bien documentée. Les auteurs s'appuient sur leur expérience chez Yahoo! et leur ouvrage sur les pratiques de la conception d'interfaces sociaux.

Blink Design Library

Un blog qui a l'œil sur les usages abusifs de certains patterns. Les mauvaises pratiques sont illustrées et évaluées de manière pertinente.

We are colorblind

Un génial catalogue de patterns détaillés et surtout compatibles (a priori) avec le daltonisme

Quince Infragistics

Un très riche et pratique catalogue en Silverlight, à découvrir très vite ! Doté d’une recherche par tags et de nombreux exemples, le dynamisme de l’interface est une expérience en elle-même.

Welie

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

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).

Open Design Patterns

Un petit catalogue orienté logiciel, basé sur une initiative d’échanges (malheureusement inactif depuis 2008).

Les galeries de patterns pour s'inspirer

Les galeries sont plus des collections – parfois en vrac, d'interfaces web et logicielles. Elles permettent de s'inspirer de ce qui été fait ailleurs, sans apporter de véritables solutions ergonomiques.

Des galeries de patterns et d'interfaces originales

Elements of Design

Une galerie de patterns anciens et actuels, plutôt variée et bien fournie.

Pattern Tap

Une galerie très riche d'exemples de mise en forme et agencement pour de nombreux patterns. Plutôt orientée design, la galerie a plus vocation à proposer des exemples que des recommandations d'usage.

Designmoo

La collection de Designmoo s'enrichit pratiquement chaque jour de patterns au design contemporain. Des icônes aux listes déroulantes en passant par les boutons de call-to-action, toutes les inspirations du moment et à venir sont là.

Des galeries d'interface pour Smartphones

Mobileawesomeness

Une galerie de référence pour la conception d'interface web mobile. Ici pas de place pour les applications dédiées à un modèle en particulier.

CSS Iphone

Une grosse galerie d'interfaces dédiée à l'Iphone. De quoi s'inspirer et trouver l'agencement idéal de ses contenus.

Mobile patterns

Une autre galerie d'interface dédiée essentiellement aux applications Iphone.

Lovely UI

Et encore une autre galerie d'interfaces mobiles qui fait la part belle à l'Iphone. Peut-être plus orientée vers l'esthétisme que les autres galeries.

Pttrns

Et toujours et encore, une galerie d'interfaces Iphone. Les applications sont très variées et chacune a droit à quelques exemples.

Les librairies de patterns techniques

Yahoo! Design Pattern Library

La librairie de Yahoo! propose des patterns depuis longtemps. Elle s'est toujours attachée à décrire leur utilité autant que leur utilisabilité.

Smart GWT Showcase

Cette très riche librairie de patterns en GWT est une des plus utilisées dans le monde. La société Isomorphic propose des solutions d'interaction riche pour les applications légères et sites web injectés d'AJAX. Le showcase permet des démonstrations en ligne de tous ces patterns.

Ext GWT samples

Une autre riche librairie de patterns GWT, concurrente de la précente. La société Sencha offre une collection de patterns riches pour les applications légères et sites web injectés d'AJAX. Les exemples en ligne permettent d'évaluer facilement les solutions d'interaction proposées.

Faciliter la saisie d'une date avec un calendrier

Même informatisé, le calendrier reste la métaphore d'un objet de notre environnement quotidien. Plus il ressemblera à un calendrier papier, moins les utilisateurs auront besoin de l'interpréter et d'adapter leurs connaissances pour pouvoir l’utiliser. Il convient donc de respecter les standards plutôt que de rechercher une nouvelle esthétique, aussi originale soit-elle.

Calendrier en double arc en ciel ; tous les jours du mois de mars sont présents (cf. badusability.com), mais la présentation des données ne ressemble pas à celle du calendrier traditionnel, ce qui rend la sélection plus difficile.

La saisie d'une date est toujours une tâche fastidieuse dans un formulaire : il faut entrer des chiffres alors que le reste du formulaire demande des lettres, et le séparateur, slash ("/"), ne fait pas partie de notre vocabulaire habituel. Au contraire, le calendrier propose une sélection directe et rapide, en un seul clic, pour choisir la date : jour, mois et année. Ce mode d'interaction, beaucoup plus simple que le clavier, permet de réduire de manière notable le risque d'erreur.

Le site d’Air France n'affiche pas l’icône calendrier. Malgré tout, le calendrier se déplie au clic sur la date, ce qui peut surprendre l’utilisateur.

La structure classique du calendrier aide l’utilisateur à se repérer dans le temps. Sur une échelle de temps horizontale, le mois se décline en jours de la semaine auxquelles les utilisateurs associent immédiatement les chiffres de chaque jour du mois à la verticale. Certains sites font le choix de n’afficher que les jours du mois courant alors que d’autres affichent les jours des mois précédents et suivants. Dans ce contexte, seules l'utilité et la facilité doivent guider la conception du mini-calendrier. Les jours ne concernant pas le mois courant peuvent être utiles à l'utilisateur pour se projeter dans le futur sans cliquer sur « mois suivant », voire pour sélectionner plus rapidement une date du mois suivant.

Sur le site voyages–sncf, les jours des mois précédents et suivants sont indiqués dans la recherche de train (à gauche), mais pas dans la recherche d’hôtels (à droite). De même, la date du jour est préremplie pour un train alors que seule la syntaxe à suivre est affichée pour un hôtel.

Pour éviter des espaces blancs peu esthétiques et faciliter le guidage, il est préférable d'afficher les jours précédents et suivants le mois courant. Toutefois, pour éviter toute confusion, ces chiffres doivent être distincts graphiquement (ex: grisés).

Une autre indication classique qui doit apparaitre est le label spécifiant le jour de la semaine. Dans un cadre international, cet élément doit respecter des règles d'usage particulières : en France la semaine commence le lundi tandis qu’aux USA elle début le dimanche. Certains jours particuliers, comme les jours fériés, peuvent également être mis en évidence. Ils sont importants pour certains services associés à un voyage notamment (ex: ouverture de services publics, transports). Ils doivent toutefois être accompagnés d'indications explicites, au survol de la souris par exemple, afin d'apporter une information pertinente et non simplement graphique. Pour certaines activités telles que la réservation de vols ou d'appartement, il peut être judicieux d'aider les utilisateurs à repérer les jours de week-end. Ces dates correspondent à des moments privilégiés pour ce type de réservation. Les jours indisponibles doivent aussi être directement indiqués : spectacle complet, location déjà réservée etc.

Placé au-dessus du calendrier, les libellées permettent à l’utilisateur d’identifier rapidement les jours de la semaine. Certaines agences de voyages, telle Nouvelles Frontières (à gauche), indiquent également les week-ends, moments privilégiés de départ en vacances. Le calendrier de droite indique la disponibilité et les tarifs pour la location d'un appartement. La légende facilite la compréhension.

Recommandations

• Guider l'utilisateur en indiquant la présence du calendrier par une icône
• Présenter les données sous une forme attendue par l’utilisateur : celle d’un calendrier papier découpant le temps en mois, puis en semaine (en ligne) et en jours (en colonne)
• Adapter la présentation du calendrier aux habitudes culturelles des utilisateurs
• Faciliter le repérage de moments clés dans le mois

Faciliter la sélection d’une date

La recherche d’une date peut s’effectuer de deux manières : l’entrée manuelle de la date dans un champ de texte, ou la sélection de cette date par le biais d'un mini-calendrier. Afin de ne pas imposer un mode de saisie et proposer une interface adaptée à tout public, le choix de l’interaction doit être laissé à l’utilisateur. S'il est préférable que le mini-calendrier apparaisse dès le clic dans le champ de saisie, il est indispensable que sa présence n’entrave pas la saisie manuelle. Il peut être ainsi positionné soit en desous soit sur le côté du champ de saisie.

Sur le site d’Opodo, le focus sur le champ de saisie ouvre également le calendrier, mais sans entraver la saisie. Lorsque l’utilisateur entre manuellement une date, celle-ci s’affiche sur le calendrier. Toutefois, les jours du mois précédent et suivant ne sont pas affichés.

Lorsqu’il s’ouvre, le calendrier doit donner un point de départ à l’utilisateur. Par défaut le mois et la date du jour sont affichés, ce qui évite de perturber l’utilisateur et lui donne un point de repère. Les jours sélectionnables du mois peuvent être distincts graphiquement, ce qui guide le choix de l’utilisateur. Lorsque deux dates sont choisies, par exemple pour un aller-retour ou un séjour, il est recommandé d'afficher deux voire trois mois dans le calendrier. Ceci permet à l'utilisateur une meilleure représentation de la période et lui évite une mémorisation des dates car elles sont toutes les deux affichées. De plus, cette disposition évite des clics fastidieux pour chercher une date sur le mois suivant.

Hotels.com propose un double calendrier permettant une vue globale du séjour en distinguant les dates d'arrivée et de départ d'un seul coup d'oeil.

Dans un cadre professionnel, il peut être utile pour les utilisateurs d'indiquer les numéros de semaines. Disposés en début de ligne, ils facilitent la détection rapide des différentes semaines en proposant des indicateurs classiquement utilisés au quotidien. La mise en forme graphique doit faciliter le repérage de ces numéros de semaine au même titre que les lignes composent les semaines.

Le calendrier de cette application web professionnelle indique distinctement les numéros des semaines qui sont graphiquement mises en évidence les unes des autres (alternance de couleur)

Recommandations

• Laisser le choix à l’utilisateur de saisir la date au clavier ou de la sélectionner dans un calendrier
• Eviter les champs de date vides en affichant de préférence la date du jour ou à défaut le format de saisie attendue (ex : jj/mm/aaa)
• Adapter le calendrier aux dates sur lesquelles portent la recherche, par exemple, la sélection d’un vol se fera sur des dates futures uniquement
• Ajuster la taille du calendrier à l’usage, par exemple : pour un séjour de plus d'une semaine, l'affichage d'au moins deux mois est préférable.

Conclusion

Le mini-calendrier s'est rapidement imposé comme une alternative à la saisie fastidieuse des dates au clavier. Dans les formulaires, la saisie peut être une réelle épreuve de précision, notamment pour respecter le format attendu. Le mini-calendrier et la liste déroulante sont les deux seuls éléments d'interface qui facilitent la saisie autant qu'ils assistent les utilisateurs dans le remplissage du formulaire.

Pour que cette aide à la saisie soit effective et efficace, il est important de bien identifier le contexte dans lequel elle peut intervenir. La conception du pattern de sélection de date doit donc suivre une méthode de conception ergonomique.