L’article de référence d’Alex Faaborg sur la quantification de l’utilisabilité est à la fois simple et exhaustif (http://uxmag.com/articles/quantifying-usability). Je reprend ci-dessous les principes qui devraient conduire au développement orienté utilisateur.
- ux-feedback: les interfaces devraient fournir un retour d’information à propos de son état actuel. Les utilisateurs ne devraient jamais douter de l’état dans lequel est le système.
- ux-implementation-level: les interfaces ne devraient pas être organisées en fonction d’implémentations ou de technologies sous-jacentes si cela devaient être illogique ou demander à l’utilisateur d’avoir accès à des informations additionnelles qu’il ne pourrait trouver dans l’interface lui-même.
- ux-jargon: les utilisateurs ne devraient pas à avoir à comprendre de la terminologie liée à l’implémentation (ce principe est un cas particulier de ux-implementation-level).
- ux-control: les utilisateurs devraient toujours avoir la sensation de contrôler leurs logiciels. (Ce principe est souvent la nemesis de ux-interruption, particulièrement dans les cas où les développeurs supposent que les utilisateurs veulent plus de contrôle qu’ils n’en veulent réellement).
- ux-undo: les actions devraient pouvoir être annuler pour que les utilisateurs gardent le contrôle (Ce principe est un cas particulier d’ux-control).
- ux-consistency: en générale, les logiciels devraient être consistant par eux-même, et de consistance externe avec des interfaces similaires du niveau de connaissance dont les utilisateurs disposent.
- ux-error-prevention: les interfaces devraient probablement essayer de prévenir l’arriver des erreurs
- ux-mode-error: les utilisateurs ne devraient pas rencontrer d’erreurs à cause de l’état de l’interface qui est différent de celui qu’ils s’attendaient à avoir. (Ce principe est un cas particulier d’ux-error-prevention).
- ux-error-recovery: les interfaces devraient aider de manière proactive les utilisateurs à gérer les erreurs à la fois utilisateurs et technologiques. (Un cas préférable est bien sûr que le principe ux-error-prevention soit effectif afin que les erreurs n’arrivent pas).
- ux-discovery: les utilisateurs devraient être capables de découvrir des fonctionnalités et des informations en explorant visuellement l’interface, ils ne devraient pas être forcés à mémoriser des informations. ( Ceci est souvent la nemesis d’ux-minimalisme car les éléments visibles additionnels diminuent la visibilité relative des autres éléments à afficher).
- ux-efficiency: les interfaces devraient être aussi efficient que possible, minimisant la complexité des actions et la surcharge de temps pour terminer une action.
- ux-minimalism: les interfaces devraient être aussi simple que possible, à la fois visuellement et dans l’interaction. Les interfaces devraient éviter la redondance (Ce principe est souvent la nemesis d’ux-discovery car en retirant ou en cachant les éléments profondément dans l’interfaces cela oblige l’utilisateur à utiliser plus sa mémoire que sa capacité d’identification).
- ux-interruption: les interfaces ne devraient pas interrompre l’utilisateur. Les interfaces ne devraient jamais poser une question à l’utilisateur, question auquel il n’est pas préparer à répondre à cause d’une mauvaise utilisation d’ux-control. En général, le logiciel devrait parler que quand on lui pose une question.
- ux-tone: les interfaces ne devraient jamais blâmer l’utilisateur ou communiquer avec lui de façon négative ou dramatique.
- ux-natural-mapping: les contrôles devraient être placés dans la position correcte, localiser relativement à l’effet qu’ils sont supposés faire.
- ux-affordance: les contrôles devraient exprimer visuellement comment l’utilisateur devrait interagir avec eux.
- ux-visual-hierarchy: les contrôles qui sont les plus important ou les plus courant devraient avoir des caractéristiques visuelles importantes comme la taille ou le contraste pour avoir une position dominante et un poids visuel plus fort que les autres contrôles (Ce principe est une adaptation d’ux-discovery).
Je rajoute quelques exemples ci-dessous de bonnes ou de mauvaises pratiques:
- ux-feedback: passage en mode offline sur google document
Google docs offline (blogoscoped .com)
- ux-implementation-level: la page de wikipedia pour la gestion des homonymes de Mercure : http://en.wikipedia.org/wiki/Mercury
- ux-jargon: Page de l’installateur de volume de stockage dans les NAS de Synology qui propose soit de gérer en automatique soit des options avancées avec le RAID:
Synology assistant d’installation Rapide ou Personnalisé (www.info-mods.com)
- ux-control: la barre de menu qui reste toujours en haut des différents logiciels est un bon exemple de point d’accroche visuel pour l’utilisateur. Il sait que son menu est toujours en haut:
Menu Google Documents (www.01audio-video.com)
Todo: le bouton annuler un téléchargement ou d une opération longue pour laisser à l utilisateur le contrôle de la situation.
- ux-undo: Bouton d’annulation par exemple dans un interface Android pour remplacer la confirmation de l’annulation
Bouton d’annulation de l’action entreprise (developer.android.com)
- ux-consistency: la structuration de la barre d’application dans encore une fois Android est un exemple à suivre pour toute nouvelle application.
De Gauche à Droite: Bouton Home, Barre d’action, 2 actions récurentes et le menu d’actions addictionnelles (developer.android.com)
- ux-error-prevention: le champ de formulaire Html pour la gestion de la date avec un calendrier est un exemple de prévention de l’erreur de saisie:
- ux-mode-error: gestion de la déconnexion alors que l’utilisateur édite des pages
Fenêtre de login alors que l’utilisateur gère le contenu de son WordPress (make.wordpress.org)
- ux-error-recovery:
Après l’édition en offline dans Google Documents, synchronisation avec le document en ligne (faaabulous.fr)
- ux-discovery: le bouton d’autres actions disponibles est un bon exemple
A côté du bouton d’action principal, un bouton/menu pour des actions additionnelles (blockchain.info)
- ux-efficiency: Les actions les plus classiques doivent être mise en avant pour simplifier l’utilisation
La notification d’Android contient les actions classiques pour l’utilisateur lui évitant d’ouvrir l’application pour choisir de les faire (developer.android.com)
- ux-minimalism: les interfaces d’Apple sont connus pour être simplifiés à l’extrême pour donner une clarté à l’utilisateur et aussi aérer l’interface pour amener le focus sur l’élément important
Interface illustrant le concept de Negative space (nickkolenda.com)
- ux-interruption: l’auto complétion est un bon exemple de la non-interruption de l’action de l’utilisateur pour lui proposer une fonctionnalité
Interface d’auto-complétion pour la saisie de texte
- ux-tone: les recommandations de style d’écriture pour Wikipedia ou pour les interfaces Android
- .ux-natural-mapping: Toute les interfaces qui sont basés sur des actions tactiles sont bien souvent naturelles. L’utilisation de case à cocher en début de ligne pour proposer la multi sélections de différents éléments afin de leur appliquer une action commune est un exemple de fonctionnement naturel :
Bouton cocher pour déplacement vers la poubelle avec menu au dessus (codex.wordpress.org)
- ux-affordance: le bouton DropDown de bootstrap avec le triangle indiquant que des choix sont possibles en cliquant dessus.
Bouton Danger avec Dropdown (jquery-plugins.net)
- ux-visual-hierarchy: première page de Google qui propose la recherche avec 2 boutons
Page de démarrage de Google avec le champ de recherche central et les 2 boutons (cdn1.tnwcdn.com)