MishraReader — La proposition UX (1)
Médias d’archive : Certaines illustrations ne sont plus disponibles à leur adresse d’origine. Leurs liens d’origine sont conservés ci-dessous.
Pour les lecteurs français : à partir d’aujourd’hui, certains de mes articles seront en langue anglaise. Ils ne seront pas forcément traduits. Je vais créer un flux par langue pour ceux qui souhaitent lire uniquement les billets en français.
Si vous lisez ce billet, vous avez probablement déjà entendu parler de Mishra Reader, installé ou utilisé ce nouveau client RSS Google Reader pour Windows. Ces dernières semaines, nous avons publié plusieurs versions et reçu des marques d’intérêt et des retours très encourageants :
- Des relais sur des sites d’actualité technique comme LifeHacker.
- Plus de 13 000 visites sur notre site.
- Plus de 5 000 installations.
- Plus de 50 demandes de fonctionnalités.
- Quelques maquettes d’écrans envoyées par des utilisateurs : waouh !
- Des personnes qui s’inspirent de nous pour un concept : waouh, deuxième édition !
Dans cet article, je vais parler du projet, de ses origines et de notre travail sur la nouvelle proposition d’expérience utilisateur et de design pour les prochaines versions.
Le contexte
MishraReader est né de l’initiative d’une seule personne, David Catuhe, qui travaille chez Microsoft. Le credo initial était :
Un client Google Reader développé en WPF, avec une attention particulière portée à l’ergonomie et à la fluidité des animations.
Le design actuel, expliqué dans un précédent billet, a été créé par un développeur qui n’est pas designer, en s’inspirant du langage visuel Metro.
Après la première version publique, David a publié le projet en open source sur CodePlex, puis commencé à constituer une équipe pour poursuivre le développement.
Ces dernières semaines, l’équipe s’est divisée en deux pour mener deux travaux :
- Publier la première version bêta.
- Travailler sur l’expérience utilisateur.
C’est ainsi que nous avons commencé à travailler sur l’UX de Mishra.
Le point de départ
L’expérience utilisateur décrite ici est le fruit du travail de deux personnes :
- Olivier Courtois, sur @ocourtois et son blog, consultant et responsable UX chez Bewise.
- Christopher Maneu, oui, moi :), sur @cmaneu et ici, chef de projet et MVP chez Bewise également.
Comme souvent, nous ne partions pas d’une page blanche, puisqu’une première version publique était déjà sortie. Dans notre cas, plusieurs contraintes n’étaient pas simples à gérer.
D’abord, l’existant. À moins de créer une application entièrement nouvelle, il faut toujours tenir compte d’une base existante. Les utilisateurs ont leurs habitudes, et tout jeter pour repartir de zéro n’est généralement pas une bonne approche. Mais nous avons une chance : notre base est encore réduite, avec seulement quelques semaines d’historique. Il n’est pas trop tard pour faire un grand bond.
Ensuite, nous concevons l’interface d’un projet open source. Toute l’équipe travaille sur son temps libre, avec un processus très léger : un membre prend un élément de travail ou une demande de fonctionnalité, l’implémente et l’intègre au code de la prochaine version. Bien sûr, nous discutons des éléments à développer ou non et du comportement attendu de certaines fonctionnalités dans des cas précis. Mais nous sommes tous très autonomes.
La conception UX avance en parallèle du développement des nouvelles fonctionnalités. Il faut donc réexaminer notre proposition tout au long du processus, en tenant compte de ces fonctionnalités et des nombreux retours des premiers utilisateurs. Certains nous envoient même des maquettes Photoshop de leurs idées. C’était ma première rencontre avec un processus de conception « semi-participatif ».
Enfin, et ce n’est pas le moindre point, nous voulons vraiment créer une différence majeure entre Mishra Reader et les autres lecteurs RSS disponibles sous Windows.
Notre proposition
Vous en avez assez d’attendre ? Voici notre proposition de design pour Mishra Reader bêta 2 ! Attendez, quelques consignes avant le départ : ce design est encore en cours de conception. Je préciserai les points qui demandent toujours beaucoup de travail. Nous allons d’ailleurs commencer à l’implémenter… dès maintenant. Nous vous tiendrons au courant lorsqu’une première version sera prête à tester ;).
Lançons Mishra. Comme vous pouvez le voir, quelques éléments ont changé :
Nous avons redéfini l’architecture de l’information, l’expérience utilisateur et le design de l’application. Cela fait beaucoup de sujets à aborder. Dès le premier regard, plusieurs points intéressants apparaissent.
Nous avons retiré l’habillage de fenêtre standard de Windows 7 et repensé l’en-tête. C’était l’une des « fonctionnalités » les plus demandées. Le nouveau design réduit de plus de 60 % la place occupée par l’en-tête. Rien de paranormal, mais ce simple ajustement a un effet considérable.
Le contenu de l’en-tête change aussi légèrement. Le logo de Mishra Reader disparaît, le bouton « À propos » rejoint les paramètres, que nous détaillerons plus tard, et une nouvelle catégorie apparaît : les éléments partagés.
La vue principale
Revenons à la vue principale. Nous avons changé la présentation des flux, des billets et de leur contenu. Dans la version actuelle, la navigation entre catégories, flux et contenu n’est pas naturelle. On commence avec une vue catégorie/flux accompagnée d’un aperçu des billets, puis un clic sur un billet fait passer à une vue flux et contenu.
Dans le nouveau design, nous avons choisi de remettre le contenu au premier plan. La plus grande partie de l’écran lui est toujours consacrée, tout en permettant de changer facilement de catégorie, de flux ou de billet. L’écran est divisé en deux colonnes : la liste des billets et leur contenu.
La liste des billets
La liste présente les flux par catégorie et propose plusieurs actions :
- Ajouter un flux à une catégorie.
- Modifier un flux : nom, catégorie.
- Supprimer un flux d’une catégorie.
C’est un bon début, mais quelques autres actions nous semblent indispensables.
Toutes ces actions restent accessibles dans le nouveau design. On peut aussi marquer comme lus tous les billets d’un flux ou d’un dossier… et vous venez de découvrir une autre action : afficher par dossier, c’est-à-dire par catégorie, ou par flux.
MishraReader bêta 1 propose une actualisation automatique. Avec cette interface, on peut également actualiser la liste à tout moment.
À propos de l’actualisation automatique : Google a créé un protocole de diffusion RSS en mode push nommé pubsubhubbub. C’est un bon moyen d’obtenir des mises à jour en temps réel sans déranger l’utilisateur. Nous pourrions le garder en tête pour de futures versions. Nous sommes un client Google Reader, pas un lecteur RSS :).
Dans un prochain billet, je plongerai dans les détails de cette liste. Jump… :).
Le contenu des billets
Dans la bêta 1, nous avons utilisé le composant NReadability pour retirer les éléments superflus des pages HTML avant de les afficher. Certains utilisateurs ont signalé des problèmes de rendu avec ce composant. Nous les examinons, mais nous avons conservé le principe pour le nouveau design.
La nouvelle vue de lecture ressemble beaucoup à l’ancienne. Elle est mieux intégrée au design, et les actions ont été déplacées dans une « barre d’outils » à droite. Nous avons désormais quatre actions : marquer comme lu, ajouter ou retirer des favoris, partager sur Twitter, Facebook, etc., et garder pour soi avec Instapaper, Read It Later, etc.
Partager le contenu
Le partage doit être rapide et simple. Nous avons conçu un parcours en trois étapes pour partager ou conserver un billet, même si la nécessité de la première étape nous fait encore hésiter. On commence par choisir le réseau sur lequel partager.
On peut ensuite modifier le texte et le lien, ajouter un autre réseau social — il est possible de partager sur Twitter et Facebook en une seule fois — puis cliquer sur Partager.
Pendant l’envoi aux réseaux sélectionnés, on peut reprendre sa lecture, prêt à partager un autre billet.
Il reste beaucoup à montrer
Nous avons encore de nombreux sujets à vous présenter : les paramètres, les animations, l’application du langage Metro aux logiciels de bureau, etc. Nous les aborderons dans les prochains billets.
Donnez-nous votre avis !
Nous avons vraiment envie de connaître votre avis ! Pour nous faire part de vos retours, laissez un commentaire sur ce blog ou, mieux encore :), ouvrez une issue sur le projet CodePlex ou écrivez dans la discussion.