Projet DIE L’histoire du pneu
Guillaume SCHERMESSER Yoann PIERRE Simon PAPE M1 PSM // 2009 - 2010
L’histoire du Pneu.
E I D t e j Pro
La navigation La navigation est l’essence même d’un site, sans elle le Web ne serait qu’un vaste étalage de pages indépendantes. Il convient donc de lui donner une importance particulière pour qu’elle soit cohérente. C’est elle qui permet d’accéder à l’indexation du contenu que l’on a choisi. Dans notre cas, c’est très important car nous avons travaillé sur un regroupement d’informations suivant les deux personnas que l’on a définit.
Première idée Nous voulions opter pour une frise chronologique horizontale qui serait présente constamment dans la partie haute du site. De ce fait l’utilisateur aurait pu accéder directement à n’importe quelle date qu’il souhaitait. Cependant cette méthode avait un inconvénient, il n’avait pas de précision sur ce que contenait la partie qu’il sélectionnait, car cela rendait la frise trop chargée si l’on rajoutait des informations. Par conséquent nous avons abandonné cette idée. De plus, techniquement cette solution posait des problèmes au niveau des compatibilités entre les différents navigateurs et de la résolution !
Idée retenue Notre interface est désormais plus classique avec un bloc de contenu au centre ainsi que deux menus sur la gauche. En réalité l’un deux n’est pas vraiment un menu, c’est un filtre qui permet d’affiner et trier l’information par catégories. Tandis que l’autre permet à l’utilisateur d’accéder directement à une date voulue, pour rester dans l’esprit de frise (mais ici, simplifiée). En voici un petit aperçu à la page suivante.
Justifications Ergonomiques | M1 PSM Guillaume Schermesser - Yoann Pierre - Simon Pape
1/8
L’histoire du Pneu.
L E I D t e j Pro
Justifications Ergonomiques | M1 PSM Guillaume Schermesser - Yoann Pierre - Simon Pape
2/8
L’histoire du Pneu.
E I D t e j Pro
Affiner l’information L’idée que nous avons retenue correspond à une disposition plus classique sous la forme de bloc de type blog ordonnée du plus vieux (haut de page) au plus récent (bas de page). En effet, cet ordre est préférable à cause des conventions de lecture et de la culture occidentale de nos cibles (de haut en bas et de gauche à droite). Notre interface est désormais plus classique avec un bloc de contenu au centre ainsi que deux menus sur la gauche. En réalité le premier n’est pas vraiment un menu, il s’agit d’un filtre qui permet d’affiner et trier l’information par catégories. Par défaut, les trois catégories sont activées afin de montrer l’ensemble des informations proposées à l’utilisateur. Le texte « Affiner l’information » et les états de survol des boutons d’activation des filtres incitent à leur utilisation… Dans le cas d’une désactivation, l’état visuel des boutons, à savoir l’absence de leur background, est changé. De plus, l’animation de disparition et d’apparition des blocs de texte à la manière de volet déroulant participe au feed-back de l’action de l’utilisateur, il peut voir directement sur quoi il agit et de ce fait n’est pas dérouté.
Pourquoi un système de filtre ?
Sur le web il existe principalement deux catégories d’individus : les flâneurs, qui surfent au travers de liens et les pressés (ou plutôt ceux qui recherchent une information particulière) qui veulent arriver immédiatement à la page clef. De ce fait le système de filtre s’adressera tout particulièrement à la deuxième catégorie qui ne veut pas s’embêter avec les informations qui ne les intéressent pas, celui-ci leur permettra d’y voir plus clair et de trouver directement ce qui les intéresse.
.
Justifications Ergonomiques | M1 PSM Guillaume Schermesser - Yoann Pierre - Simon Pape
2/8 3/8
L’histoire du Pneu.
L E I D t e j Pro
Accès rapide
Pourquoi un deuxième menu ?
Nous pensons que le système de filtre n’est pas suffisant pour satisfaire la navigation de l’utilisateur afin qu’il puisse trouver directement ce qu’il recherche. En plus, cela peut être embêtant de scroller jusqu’à la dernière date qui se trouve en bas de page pour les personnes possédant une faible résolution. Le menu avec la liste des dates apporte donc un confort supplémentaire pour trouver ce que l’on cherche rapidement. Le survol des dates de ce « deuxième menu » affiche la même représentation visuelle, à savoir un texte blanc sur fond rouge pour garder une cohérence entre les dates de ce bloc et la date dans les blocs de contenu. L’utilisateur relit ainsi plus facilement les informations et sait que les deux sont étroitement liés.
Le contenu L’intérêt de notre application est que nous n’imposons pas le contenu à l’utilisateur. C’est lui qui le choisi grâce à notre système de filtre. Bien entendu tout le contenu de base est intégré par nos soins mais par la suite il peut supprimer ce qui ne l’intéresse pas et le faire apparaître à nouveau. Nous avons intégré le contenu dans des petits blocs pour ne pas dépasser 70 caractères et ne pas fatiguer le lecteur. Les différentes catégories sont représentées par plusieurs couleurs afin d’avoir un repère supplémentaire quant à la catégorie lié au sujet. Les couleurs n’ont pas forcément de liens avec les catégories elles ont été choisis pour leurs cotés purement esthétiques.
Justifications Ergonomiques | M1 PSM Guillaume Schermesser - Yoann Pierre - Simon Pape
4/8
L’histoire du Pneu.
E I D t e j Pro
Justification de l’interface Voici à quoi ressemble un bloc de contenu.
Dans la partie supérieure sur la gauche nous avons placé un titre qui résume le contenu présent dans le bloc. Ce titre est bien visible grâce au contraste blanc/bleu foncé. La petite barre verte permet de savoir de quelle catégorie il s’agit. La date placée en rouge à droite fut un sujet à controverse. En effet, nous ne savions pas s’il était judicieux de la positionner ici et de surcroit en rouge.
Explications
Notre sens de lecture va de la gauche à la droite, c’est encré dans notre culture occidentale. De ce fait le titre sera la chose lu en premier alors que ce n’est pas l’information la plus importante. C’est pourquoi nous nous posions la question s’il ne fallait pas mettre la date à gauche. Mais nous avons opté pour avoir quelque chose qui tape à l’œil, c’est-à-dire le rouge avec un exergue de sorte à renforcer l’attraction visuel. Grâce au rouge la date est lut en premier, on la voit tout de suite. Cependant ce choix peut paraître déroutant pour l’utilisateur car cela lui oblige à regarder à droite puis revenir sur la gauche, son regard fait un zigzag. Nous avons essayé de créer un équilibre entre dates et titres. En effet, nous avons deux dispositions différentes (le menu de gauche et le bloc contenu).
Justifications Ergonomiques | M1 PSM Guillaume Schermesser - Yoann Pierre - Simon Pape
4/8 5/8
L’histoire du Pneu.
L E I D t e j Pro
Ici le titre est à gauche et la date à droite....
... tandis que dans ce menu c’est l’inverse.
Nous sommes conscient que changé de disposition peut perturber l’utilisateur dans ses recherches sur le site. Cependant nous avons mis ça en place volontairement afin d’optimiser la navigation pour tous les personnas. En effet, grâce à ces outils l’application arrive à répondre aux besoins d’un public très large. Les éléments de gauche quant à eux resteront toujours présents, ils sont statique. Cela permet à l’utilisateur de ne pas revenir en haut de page tout le temps pour aller à tel ou tel date ou bien filtrer les informations. Il a ainsi le contrôle total de l’information et ce, à tout moment ! L’interlignage de texte présent dans les blocs est assez grand ainsi que l’espacement entre les lettres. En effet, d’après le document de C. Betrancourt un espacement faible et un interlignage inférieur à 2px peuvent diminuer à la lisibilité, car le texte est trop condensé. Les différents paragraphes possèdent des lignes d’environ 10 mots ce qui est, d’après le document de C. Bertrancourt un bon point.
Justifications Ergonomiques | M1 PSM Guillaume Schermesser - Yoann Pierre - Simon Pape
6/8
L’histoire du Pneu.
E I D t e j Pro
Nous avons opté pour afficher des escamots au survol de la souris sur les images. Etant donné qu’il est possible d’avoir deux paragraphes parlant de deux sujets différents, il se pourra donc que l’utilisateur ne sache pas à quel sujet l’image est associée. De ce fait le titre de la partie s’affiche dans l’escamot.
Il nous a également semblé judicieux de mettre en valeur les Noms ou Prénoms présents dans le texte afin que l’utilisateur sache de qui l’on parle tout de suite. En effet, le gras tape à l’œil et donc le regarde sera attiré tout d’abord par le nom ou prénom dont le sujet fait question. Nous avons choisi le gras et non une couleur pour ne pas faire croire que le c’est un hyperlien, le gras signifie uniquement que cette information est importante.
Justifications Ergonomiques | M1 PSM Guillaume Schermesser - Yoann Pierre - Simon Pape
6/8 7/8
L’histoire du Pneu.
E I D t e j Pro
Erratum Un changement de dernière minute doit être fait pour rendre ce projet exploitable pour tous ! En effet, nous avons omis de tester notre interface sur d’autre résolution. Lors de résolution plus faible, la colonne de gauche étant fixe, les dernières dates de l’accès rapide ne sont plus accessibles ! Plusieurs solutions s’offrent à nous : •Ne rien faire : pas optimal ! • Remplacer les dates par un menu déroulant qui complique grandement le nombre d’action de l’uti lisateur et l’activité cognitive car il est obligé d’ouvrir à chaque fois le menu pour accéder à une date • Faire une barre déroulante automatique lorsque le contenu déborde • Jouer sur les marges du bloc de gauche et sur la taille de la police des dates listées La solution retenue est la dernière mais cela affecte grandement l’esthétisme du site ainsi que l’ergonomie générale surtout d’un point de vue de la lisibilité. Nous venons de nous en rendre compte juste à temps avant « publication » mais nous n’avons pas vraiment eu le temps de repenser cette erreur convenablement pour rendre cela complètement transparent ! C’est donc une solution de ‘fortune’ qui limite les dégâts et donne tout de même l’accès à l’utilisateur à l’ensemble du contenu.
Justifications Ergonomiques | M1 PSM Guillaume Schermesser - Yoann Pierre - Simon Pape
8/8