[TechDays 2012] : Mise en pratique de l’ergonomie et du design sur Mishra Reader

Le 7 février 2012, Microsoft a lancé son évènement phare de l’année en France : les TechDays cuvée 2012, placés sous le signe (entre autre) de l’expérience utilisateur. A ce sujet, voici un compte rendu d’une session sur la mise en pratique de l’ergonomie et du design sur une application opensource : Mishra Reader. Quels sont les secrets qui ont permis la fabrication de Mishra Reader ? Quelles méthodes et techniques ont été mises en place pour garantir la meilleure expérience utilisateur ? Comment garantir tout ceci avec des performances étonnantes ? Lisez la suite pour tout savoir !

Cette session était animée par Olivier courtois (Bewise) consultant UX, et Cyril Sansus (Bewise) Responsable Nouvelles Interfaces Utilisateurs. Tout commence par une présentation de l’application, et de son objectif. Mishra Reader est un lecteur de flux RSS, écrit en WPF et ayant comme cahier des charges : être ergonomique et joli.

Génèse et Méthodologie

Une première version est releasée le 26 juillet 2011 puis rendue publique sur codeplex le 1er août 2011. Actuellement, le projet est en beta 2, version dont l’interface et la charte graphique ont été entièrement revues. Le focus a été mis sur l’expérience utilisateur.

Une démonstration de la beta1 nous est montrée. Olivier et Cyril mettent l’accent sur les défauts de cette version, en particulier sur le focus sur les fonctionnalités de l’application et non son usage qui a entraîné une faiblesse, une diminution de l’expérience utilisateur.

Olivier nous détaille ensuite la méthodologie utilisée pour faire face à cette problématique :
Il faut tout d’abord éviter le syndrome du non choix : lorsque l’on confie le design d’une interface au développeur, celui-ci fait à l’instinct et n’est pas guidé par des choix. L’interface doit être conçue par des créatifs, des designers et ergonomes.

Méthodologie

Un slide amusant nous présente ensuite ce que l’on appelle le “gribouillis de la conception”, qui se décompose en trois phases :
1. Recherche
On va analyser la concurrence : Reader dans ce cas concret, et rechercher des tendances (visuelles). On appelle ceci également de l’innovation incrémentale.

2. Itérations
Celles-ci permettent d’arriver à un résultat final optimum et d’éviter l’effet tunnel pour le client (un petit parfum d’agilité 😉 ).

3. Mise en oeuvre
On parle ici de MVP : Minimum Viable Project. Il faut comprendre les usages, pour déterminer les fonctionnalités essentielles et se concentrer dessus : lire des flux ! La célèbre règle du 80/20 est appliquée (dans ce contexte, 20% des fonctionnalités sont utilisées 80% du temps)

Implémentation, nouvelle version

L’implémentation de cette méthodologie a pour conséquence la simplicité de l’application. Simple et efficace, comme on dit. La session continue avec une seconde démonstration, de la version actuelle (beta2). Les orateurs nous expliquent en 3 points ce que la team a voulu faire avec cette beta :

Authenticité
donner un coté “humain” afin de rendre l’application agréable et d’imposer une nouvelle référence. Cyril nous montre qu’on peut y parvenir simplement en utilisant un vocabulaire adapté et une petite touche d’humour (exemple avec le désormais célèbre Siri). Un exemple nous est montré dans Mishra Reader, avec l’option “quantity of items downloaded”, quantifiée non pas numériquement, mais avec un ordre de grandeur plus littéraire, abstrait, de “few” à “a lot“. Ce genre de petit détails peut faire toute la différence.
être digital mais pas seulement : Ici, l’équipe a voulu donner un look plus concret avec pour exemple le design du séparateur, façon reliure de livre.

Élégance : travail de l’esthétique et du design
Cela a un double objectif : cela augmente considérablement la satisfaction de l’utilisateur, mais cela contribue également à créer une image de marque reconnaissable. Un exemple avec des carrés de couleurs nous est montré. Dès que l’on nous parle d’opérateurs mobiles, tout le monde reconnaît et identifie les marques, en se basant uniquement sur leur couleurs.

Vivant
Un point très intéressant est mis en avant : la performance perçue. Pour améliorer le coté “vivant” de l’application, il faut augmenter celle-ci. Ici, tout est dans le ressenti. Pour des performances identiques, l’utilisateur a l’impression que la nouvelle version est plus performante que l’ancienne, par le simple fait d’avoir des animations qui vont amener un résultat. Un très bon exemple est cité : Google Instants. Il arrive dans ce cas qu’on en vienne même à dégrader les performances réelles, pour augmenter la performance perçue !
Second point, il faut apporter du sens. Lorsque l’on utilise des animations, il faut qu’elles aient du sens (exemple avec un élément qui disparaît à l’écran). Utiliser intelligemment et avec parcimonie ces animations est la clé d’une application vivante !

Olivier conclut sa partie sur ce conseil synthétique : “Soyez authentique, élégant et vivant !”. La seconde partie de la session aborde la phase d’intégration, expliquée par Cyril.

Intégration

L’intégration est l’étape qui va convertir les artefacts créés par les designers, graphistes, ergonomes (images, mock up, …) en styles, templates, xaml. Expression blend, est l’outil dédié à cette étape. Après une démonstration de Expression Blend, Cyril nous expose en détail les 3 étapes de l’intégration.

Layouting

Cette étape permet de structurer l’interface. On y définit :

  • les layouts, (grids et stackpanels 99% du temps)
  • les alignements
  • les marges

Petite astuce : pour définir des valeurs par défaut en mode design dans des textes bindés, il faut utiliser la property “fallbackValue”.

Styles & Templates

C’est dans cette étape que l’on habille l’interface. On y définit :

  • la colorimétrie, c’est-à-dire la palette de couleurs utilisées
  • la taille et le choix des polices
  • les styles pour les TextBlock
  • les styles par défaut des contrôles

Cyril rappelle qu’il faut faire un découpage efficace des fichiers : exemples ici avec checkbox.xaml, colors.xaml, qui vont contenir respectivement l’ensemble des styles pour les checkboxes, et l’ensemble des couleurs définissant la colorimétrie.

Animations

Dernière étape, où l’on va dynamiser l’interface. On y définit :

  • les States et triggers
  • le Storyboard
  • les Easing functions
  • Deux chiffres à retenir : 150 et 350. Ce sont les temps (en ms) mini pour respectivement percevoir une animation, et faire un effet de slide. Deux easing functions à retenir : exponential et cubic, les plus naturelles.

    La session se termine et les deux speakers nous invitent à essayer MishraReader, dont le code source est téléchargable sur codeplex. Une session au final très intéressante, animée avec dynamisme par deux orateurs chevronnés. Well done!

    Vous pouvez tester MishraReader ici : mishrareader.codeplex.com

Nombre de vue : 36

AJOUTER UN COMMENTAIRE