Applications des principes ergonomiques
Liste de produits

Ce qui est en italique concerne d'autres pages de l'application.

Modèles/Références

Ce type de liste a été inspiré des applications :

• Amazon sur Android
• Leclerc sur Android

Objectifs

La liste des produits doit permettre à l'utilisateur :

• De lister tous les produits de son frigo
• De trouver facilement un produit périmé (les produits périmés s'affiche en rouge)
• De trouver facilement un produit ouvert (les produits ouverts ont une indication "ouvert")
• D'afficher uniquement les produits qui l'intéresse (affichage par catégorie)
• D'ordonner les produits comme il le souhaite (présence de différents tris)
• De trouver rapidement un produit
• De trouver facilement la quantité de chaque produit (mise en valeur de la quantité en rouge)
• De trouver facilement le nom du produit (mise en valeur du nom du produit en gras)

Améliorations possibles :

• Mise en valeur de la date d'expiration
• Couleurs et design en général.
  Le gris a l'avantage d'être sobre et d'être vu par tous le monde (daltonien y compris).

Qualité de la page

Apprenabilité

L'utilisateur est normalement en mesure de comprendre directement à quoi correspond cette page et de comprendre les informations qu'elle comporte.

Observabilité : Les tris et l'affichage optionnels changent instantanément dès qu'il y a une modification. Le nombre de produits changent en bas de page lorsqu'il y a plus ou moins de produits affichés (lors d'une recherche par exemple).

Consistance : Tous les produits s'affichent de la même façon.
Dans d'autres pages, les tri dans un "select/option" et l'affichage par catégorie dans des checkbox sont aussi utilisés.
Les produits du frigo sont toujours affichés de la même façon (image à gauche, puis nom, date de péremption en bas du nom et diverses autre chose à droite si nécessaire)
La place des éléments est également gardée: options à gauche, infos utile en bas, affichage des ordre de tri puis des type d'affichage, etc.
L'accueil est toujours en haut à gauche.

Familiarité : Les images correspondent à des images prises des magasins.
Ce type de liste est inspiré d'applications existantes.

Les catégories et les zones sont testées pour savoir si l'utilisateur les reconnaît facilement.

Flexibilité

Les différents tris et l'affichage permet de rendre plus flexible l'affichage.
L'utilisateur peut afficher les produits qu'il souhaite.
La recherche augmente davantage cette flexibilité.

Robustesse

Ce n'est que de l'affichage, les erreurs restent très limitées voire inexistantes.
Les modes de tris sont prédéfinis et l'utilisateur n'a besoin que de cocher/décocher pour l'affichage.
Il peut modifier de nouveau le mode de tri qu'il souhaite et revenir à un affichage précédent sans problème.

Lorsqu'il n'y a rien dans le frigo ou que les options choisies ne concernent aucun produit, un message est affiché pour l'utilisateur.

Règles de conception

Les 8 règles d'or

1. Consistance : OK
2. Raccourcis : Les raccourcis n'ont pas été modélisés
3. Retour informatifs : En bas de page
4. Dialogue : Pas concerné
5. Réversibilité : OK
6. Prévention et traitements des erreurs : Pas concerné
7. Causalité : OK
8. Réduire la surcharge cognitive : OK

Raccourcis Cette application, rappelons le, est normalement une application qu'on trouve sur tablette (il n'y a donc pas de clavier "réel"). Les raccourcis s'il y en a se feront donc avec des mouvements de doigts, la voix ou des petites nuances sur l'appui de l'écran qui ne sont pas modélisable/testables ici.

Surcharge cognitive Pour chaque produit il y a que 3 infos : le nom, la quantité, la date d'expiration.
On peut en rajouter, sans trop en mettre pour ne pas surcharger la page.

Principes ergonomiques et agencement de l'écran

La "guideline pour interface utilisateur" utilisé est :

• Les options sont à gauche : zone assez visible et très accessibles
• Le contenu principal est au centre : zone très visible et très accessible
• Les informations en bas : zone peu visible et peu accessible
• Options et informations ont les mêmes code couleurs
• La couleur de fond d'ensemble et plus foncée.
• Le contenu est le plus clair.
• Tout ce qui doit être surligné se fait en bleu clair.
• Les informations du contenu qui doivent ressortir sont en gras (et si besoin dans une autre couleur.)

Polices et couleurs

Police : Une police utilisée : Arial. Il n'y a pas de long texte dans la page, cette police suffit.

Couleurs :

• 3 couleurs principales : 3 nuances de gris.
• 2 couleurs pour le texte : Blanc pour les options/infos. Noir pour le contenu.
• Une couleur pour les liens (et choses surligné)
• D'autres couleurs peuvent être utilisés pour mettre en valeur des éléments