Le principe de la moindre surprise

Le principe

En tant que développeur et concepteur d’interfaces en général, je suis très attaché au principe de la moindre surprise et après avoir vu une réaction sur le nouveau design de For Evolution je me suis dit que j’allais parler un peu de ce concept. Oui il y a un concept, même wikipedia est d’accord avec moi.

Il existe des règles très simples en terme de développement d’applications “classiques” en fonction des plates formes. Par exemple sous Windows Ctrl+S va sauvegarder, F11 va afficher l’aide et Alt+F4 va quitter l’application. Sous Mac, Pomme + “,” va ouvrir les préférences, le coin inférieur droit affiche 3 traits si la fenêtre est redimensionable…

Il est impensable que Ctrl+S quitte une application, n’est-ce pas ?

Et bien ce qui est vrai dans les logiciels classiques est aussi vrai pour les applications web.

Des exemples !

C’est en général des trucs très bêtes, mais prenons l’exemple de http://lovelylisting.blogspot.com. Je vous laisse regarder et on en parle après :

L’allure générale du site nous dit “je suis un blog”, le header précise même “je suis un blogspot” pour les plus connaisseurs. Alors pourquoi le menu est à gauche ? De plus pourquoi a-t-on droit a une publicité avant le contenu de ce fameux menu ? Surprenant donc moins efficace, non ? Ce n’est peut être que moi, mais en naviguant sur ce site j’étais franchement stressé par ce menu mal placé.

Dans un autre style, on commence a voir des sites prenant la main sur le double clic. Par exemple vous double cliquez sur un mot et cela va vous amener sur une autre page en rapport avec ce lien. Surprenant car en général un double clique implique la sélection de la ligne ou du mot !

Au niveau des blogs, des lois de ce type s’appliquent, comme par exemple : je veux retrouver le lien “poster un commentaire” tout en bas de mon billet. Si je clique dessus le billet s’ouvre et je pourrais voir la liste complète des formulaires suivie d’un formulaire. Quand cette logique est perturbée, comme par exemple avec blogger qui vous emmène vers une page tout a fait différente pour déposer des commentaires, l’utilisateur a plus de mal a suivre et donc le processus est moins efficace.

Au niveau d’un commentaire de blog ce n’est pas très gênant, mais dans un site marchand où “taux de transformation d’une action = $$$”, cela change tout !

Ce sont ainsi souvent des petits détails qui semblent évident à tout le monde mais que certains créateurs d’applications oublient parfois. Encore une fois mon but ici n’est pas du tout de vous expliquer tous les détails. Tout d’abord car je ne les connais pas et qu’ils seraient très difficiles à indentifier, et ensuite parce que ça serait bien trop long à lire !

A la place, voici quelques exemples en vrac :

• Les champs “login / password” sont soit cachés soit en haut à gauche (ou à droite)
• La checkbox a gauche du texte descriptif et pas à droite
• Le bouton “suivant” à droite, le bouton “précédent” à gauche
• Un lien réagit a son survol, ou, au minimum, le curseur change
• Un bouton a un léger effet de relief
• Si FAQ il y a, un lien sera répété en bas de page. Pareil pour les informations de contact
• Un formulaire n’est pas sensé être sauvegardé avant d’avoir appuyé sur “sauvegarder”. Je ne suis pas fan de la sauvegarde dynamique en direct
• Un lien s’ouvrira dans la même fenêtre que la page sauf si il est précisé le contraire
• Cliquer sur le logo du site renvoi à la page d’accueil
• Cliquer sur “Entrée” au clavier sauvegarde le formulaire, appuyer sur “Tabulation” change de champ dans l’ordre
• Un lien vers un flux RSS est toujours précédé du petit icône correspondant
• Un long chargement doit être anticipé par une barre de chargement ou un message annonciateur, surtout si un paiement est en jeu
• La catégorie sélectionnée dans un menu sera mise en avant

Un exemple rapide d’utilisateur surpris avec Google il y a quelques années. Dans le temps la page de Google simple et épurée avait troublé les utilisateurs. En effet ils attendaient “le reste de la page” alors que la page était déjà chargée ! Ils ne s’attendaient juste pas à ce que la page soit si… vide !

Google a donc du trouver une feinte pour contourner ce problème en retombant sur ce que les utilisateurs connaissent bien : en bas d’une page, il y a le copyright. Ils ont donc rajouté un petit copyright a la fin, et d’un coup les utilisateurs testés s’y sont retrouvé :

(vu sur grokdotcom)

Un dernier exemple du roi de la transformation : Amazon.

On remarque que le drop-down des catégories ainsi que le champ de recherche sont des champs de formulaire “classiques”. Pas de modifications ici comme sur certains sites qui vont totalement redesigner ces éléments.

Seul graphique différent ici : le bouton “Go”. Ici le fait est qu’il est juste après le champ de recherche, inclu dans une sous boîte de couleur bleue sombre laisse clairement entendre qu’il est lié à la recherche. De plus on voit un effet de relief ce qui, associé au fait que au survol le bouton va réagir, permet d’identifier l’élément comme étant un bouton de formulaire.

La couleur est également très différent du reste (orange sur bleu), ce qui met bien en avant que ce bouton n’est pas la pour rigoler : il va faire quelque chose, ce n’est pas un simple lien comme le “Panier” juste à côté.

N’oubliez pas

En bref, si l’utilisateur sait à quoi s’attendre avec les divers éléments de la page, c’est bien. Si il sait d’avance ou trouver ces différents éléments, c’est encore mieux ! Eviter toute surprise à l’utilisateur est une des clés d’une application utilisable.

Ces billets parlent du même sujet :

• Nouvelle version de ForEvolution.fr
• Economie du Web: La futur crise d’Internet en 9 points !
• Web 2.0 : Concours de synchronisation des services internet !
• Simplification des services Internet
• De la publicité dans les vidéos YouTube
• Blogs: Cycle de vie d’un billet de la rédaction à la diffusion!
• Et vous, comment bloggez-vous ? De la rédaction à la diffusion