Et on reparle des bibliothèques de modèles de conception

Pour compléter ma précédente liste de User Interface Patterns Library (cf. Vive les librairies de modèles de conception d’interfaces) je vous propose de découvrir une nouvelle bibliothèque qui s’illustre par son interface : Quince.

Les modèles sont ainsi répartis par tâches, tags et types de wireframe. À chaque mode de classement correspond une interface, ici la recherche par tâches :

La recherche par xx chez Quince

La recherche par tâches chez Quince

Là, la recherche par tags :

La recherche par tag de Quince

La recherche par tag de Quince

Et voici enfin à quoi ressemble la fiche d’un modèle de conception :

Un modèle de conception sur Quince

Un modèle de conception sur Quince

C’est donc une interface très originale que nous propose cette bibliothèque de modèles de conception, un peu perturbante au départ mais finalement assez simple d’utilisation. Voici en tout cas un bon moyen de faire évoluer les mentalités et notamment les à priori vis à vis des interfaces riches. (via Usability Post)

DAB + RIA = WF

Vous n’aimez pas les écrans des distributeurs automatiques de billets (DAB) ? Vous préfériez des interfaces plus riches (RIA) ? Alors vous aimerez sûrement les nouveaux automates de Wells Fargo (WF). Cette banque américaine a en effet eu recours aux services d’une agence de design (Hot Studio) pour concevoir l’interface de ses nouveaux distributeurs automatiques :That design is money! A better ATM experience from Wells Fargo.

Le résultat est tout simplement bluffant avec des écrans d’une grande sobriété mais à la lisibilité parfaite. Ici la saisie du code PIN :

WF_ATM1.jpg

Et là un écran de confirmation avec un exemple de processus :

WF_ATM2.jpg

Juste pour rigoler je vous propose un avant / après du menu principal :

WF_ATM3.jpg

Rien à redire, c’est du très bon travail et cette nouvelle interface participera grandement à réduire les frictions (incompréhensions, frustrations, erreurs…) et à améliorer l’expérience d’usage.

/!\ Billet initialement publié sur FredCavazza.net.

10 ans d’évolution des interfaces web au service de l’expérience utilisateur

2007 sera une grande année pour les interfaces riches (voir à ce sujet mon précédent billet). Pour célébrer cette révolution à venir, je vous propose de faire une rétrospective sur dix années d’évolution des interfaces web, en incluant un peu de prospective sur l’année à venir.

J’ai résumé tout cela dans ce schéma :

10 ans d'évolution des interfaces web

La page HTML : simple et efficace

La manière la plus simple de réaliser une interface web est d’utiliser HTML. Pour consulter une page web, il faut : un système d’exploitation et un navigateur. C’est simple et efficace, suffisamment efficace pour faire fortune (à l’image d’eBay ou d’Amezon).

L’applet : un peu plus de puissance mais au détriment du confort d’usage

Durant la fin des années 90, sont apparus des micro-applications qui pouvaient être exécutées au sein d’une page web : les applets réalisées en Java. Pour pouvoir les exécuter, il fallait bien évidemment un système d’exploitation, un navigateur, mais également une machine virtuelle. C’est cette dernière qui servait à interpréter le code Java (qui n’a rien à voir avec Javascript).

Les applets permettent de faire plus de chose que le HTML mais au détriment du confort d’usage, car les applets sont lourdes et longues à démarrer (de 1 à 3 secondes) et que la machine virtuelle nécessite souvent des mises à jour intempestives. Quand il s’agit du configurateur en 3D deVolkswagen, ça va, mais quand il s’agit d’un simple calendrier pour choisir une date comme sur le site de la banque Fortis, c’est inadmissible.

Les RIA : le meilleur compromis à ce jour

Puis sont apparues les Rich Internet Applications qui proposaient de bien plus grandes possibilités d’affichage et de manipulation que le HTML. Ces interfaces riches pouvaient être réalisées enAJAX (à l’image du sélecteur de diamant d’Amazon ou du site de GAP) ou en exploitant des technologies vectorielles comme Flash ou WPF/E. Pour les faire tourner, vous devez posséder le bon plug-in (ce qui est le cas de 99% des ordinateurs pour Flash). L’intégration des animations au sein d’une page web est transparente et très performante (à l’image du très bon comparateur deFord Vehicles).

Les widgets : petites mais terriblement efficaces

Plus récemment, des petits modules autonomes sont venus s’installer sur notre bureau : leswidgets. Ces micro-applications nécessitent plusieurs choses pour pouvoir tourner : soit un programme appelé moteur de widget (Yahoo! WidgetGoogle DesktopKapsules sous Linux ou encore le navigateur Opera), soit un système d’exploitation de nouvelle génération comme Windows Vista ou Mac OS X.

Les RDA : l’avenir du logiciel ?

La toute dernière évolution des interfaces web s’appelle les Rich Desktop Applications. Tout comme les applets, les RDA nécessitent une machine virtuelle (Eclipse RCPNetBeansJava Web StartXULRunner de Mozilla, Le futur Apollo d’Adobe ou encore le SmartClient de Microsoft). Ces technologies permettent d’avoir des interfaces aussi robustes que des applications et la simplicité de déploiement des sites web (pas besoin de les installer sur le système d’exploitation).

Plusieurs expérimentations sont en cours autour des RDA : SongBird (un concurrent de iTunes réalisé avec XUL), le Mozilla Amazon Browser (une RDA qui exploite le catalogue d’Amazon) ou encore le module d’eBay réalisé avec Apollo.

Conclusion : le service avant tout

Après ce formidable déballage des technologies toutes plus prometteuses les unes que les autres, je vous propose de faire le constat suivant : Qui avons-nous à gauche du schéma ? Amazon et eBay. Qui retrouvons-nous à droite du schéma ? Amazon et eBay. L’enseignement que nous pouvons en tirer est le suivant : si votre service est bon alors ces différentes technologies (et les plus récentes en particulier) ne doivent vous servir qu’à enrichir l’expérience utilisateur que vous proposez. Par contre si votre service n’est pas performant alors ne rêvez pas, l’interface (quelle que soit la technologie utilisée) ne compensera pas une expérience utilisateur négative.

Je vous laisse méditer là dessus…

/!\ Article initialement publié sur FredCavazza.net.