Posted by & filed under blog.

Suite aux rencontres utilisateurs et aux différentes informations que nous avons reçu, nous pouvons passer au développement de l’interface.

Les différentes étapes du développement de l’interface

Le développement de l’interface se fait en 3 étapes majeures qui sont :

  • Maquettage papier
  • Codage
  • Validation

Maquettage papier

La première étape du développement de l’interface consiste en la réalisation de maquette sur papiers.

maquettage

Ces maquettes permettent une première modélisation de l’interface. Cette première modélisation est ensuite discutée, analysé et validé.

Le rôle de ces maquettes est essentiel. Il s’agit de mettre en place les éléments que souhaite retrouver l’utilisateur. Quelles informations lui montrer, comment les afficher, quelles sont les textes à afficher, est-ce que l’utilisateur va pouvoir comprendre et utiliser l’interface tout seul etc.

Dans le développement de la plateforme web de Zone-Project, nous nous sommes demandé comment proposer un bon affichage lors de la sélection des filtres et des sources. Par exemple, comment proposer à l’utilisateur de rajouter un groupe de notions à ne pas garder dans les résultats ou à garder obligatoirement?

Notre objectif est de fournir une interface simple, épuré et qui malgré tout réponde aux besoins de l’utilisateur.

Développement

Une fois la maquette papier entièrement réalisé, nous pouvons passer à la phase de développement et de codage.

Ici nous nous confrontons à la réalité qui ne permet pas forcément de réaliser tout ce qu’il est possible de faire en maquette papier. Le framework, le langage utilisé, la façon de programmer, les contraintes graphiques… tout cela intervient au cours de la phase de codage et va nous contraindre à modifier quelque peu les maquettes papier.

Validation

La dernière étape consiste à valider ces développements.

Toute l’équipe de Zone-Project est mise à contribution pour cette validation. Chaque interaction, action, déplacement, etc. est vérifié.

Une fois la validation dans l’équipe faites, nous pouvons aller montrer l’interface aux utilisateurs et partir sur un nouveau cycle de discussion utilisateur/développement.

Le suivi du développement

Toute notre phase de développement est jalonnée et contrôlé par des tickets. Vous pouvez suivre les différents tickets et jalons ici et ici.

Suite à nos réunions avec les utilisateurs, l’équipe de Zone-Project se réuni et défini les différents axes de développement. Chaque axe et points de développement est ensuite ajoutés sur nos outils de tickets et de jalons.

L’évolution de Reador

La sélection des sources

La sélection des sources fut l’une des premières interfaces réalisées.

Figure 5 - Sélection des sources Figure 8 - New twitter

A gauche la première interface de sélection des sources et à droite celle se trouvant actuellement sur Reador.net.

Comportant des éléments trop petits, l’interface de gauche a changé radicalement. On y retrouve toujours les 3 grosses images de Twitter, Google+ et Rss mais la disposition est désormais en ligne et non plus en colonne. La lecture s’en trouve facilité et les éléments peuvent ainsi prendre plus de place.

La sélection des filtres

Figure 10 - filtreFigure 11 - New filtre

A gauche la première interface de sélection des filtres et à droite celle se trouvant actuellement sur Reador.net.

Ici ce sont des problèmes de compréhension qui ont fait évoluer l’interface. La première interface (celle de gauche) était brouillonne notamment au niveau du choix du type de filtre (les trois boutons coloré en haut à gauche de l’interface) et de l’affichage de l’ensemble des filtres (le tableau sur la droite de l’interface). La séparation du choix du filtre en trois gros boutons bien visible de l’utilisateur a permis de faciliter la compréhension de la sélection des filtres. Cette sélection est désormais fluide et intuitive.

L’affichage des articles

Figure 12 - old tag newer tag

A gauche la première interface pour les articles et à droite celle se trouvant actuellement sur Reador.net.

Ici, les tags sont à l’honneur. Gros et intrusif dans les débuts de Reador.net, ils ont évolué vers un affichage plus simple, moins intrusif et beaucoup plus clair. Plus de couleurs différentes. Une seule couleur pour tous les tags.

A noté qu’un affichage plus compact (appelé affichage « card ») ainsi que la possibilité de partager les articles ont été a été implémenté sur Reador.net.