# Devoir #2 Interfaces

Lien vers [notre Miro du devoir 2, non modifiable](https://miro.com/app/board/o9J_lU_jCwM=/)
Lien vers [notre Miro du devoir 4, modifiable](https://miro.com/app/board/o9J_lNZWfg4=/)
Lien vers [notre GitLab du devoir 4](https://gitlab.com/ntnco/greenscan)
Lien vers [notre Google Docs du devoir 4](https://docs.google.com/document/d/1GTTxFC4n2YO7vE26aYcxx6Xp2anixTkwFXDVruZKYzw/edit?usp=sharing)

## Noms et matricules
Eric Blais `1067982`
Antoine Colson Ratelle `990432`
Brad Pai `20130312`
Karl-Emmanuel Bastarache `20067724`
Thalie St-Jacques `20074387`

## Pre-design
### Exercice 2.1 : choix du sujet
Nous avons choisi l'application d’épicerie permettant de suivre l’impact environnemental de chaque article.
### Exercice 2.2 : description du problème que l'app va résoudre
Notre application répondra au problème suivant : il est difficile pour un consommateur de connaître l'impact environnemental du produit tout au long de son cycle de vie. Nous proposons de rendre cette information facilement accessible via une application mobile.

### Exercice 2.3 : description des buts au niveau de l’utilisabilité et de l’expérience utilisateur du design
* Efficience : notre application a pour but d'offrir rapidement et facilement à l'utilisateur l'information sur l'impact environnemental des produits alimentaires qu'il choisit. En ce sens, l'efficience est l'une des dimensions les plus importantes de notre design. Le lieu principal où l'application sera utilisée risque d'être une épicerie. Cette dernière contient beaucoup de distractions et les utilisateurs y sont souvent pressés. Il faut donc que l'application soit rapide à utiliser et qu'elle conduise au but visé en peu d'étapes.
* Efficacité : il est important que notre utilisateur atteigne son but d'obtenir des informations justes et significatives. Le domaine de notre application se limite aux produits alimentaires qui ont un code-barre. En ce sens que lorsqu'un utilisateur demandera une information sur un produit alimentaire populaire ayant un code à barre, il devrait l'obtenir.
* Satisfaction : Allant de pair avec l'efficacité, notre application devrait être plaisante pour ses utilisateurs. Ainsi, des couleurs et des formes agréables, symétriques et branchées (à la mode) permettront que l'utilisateur vive une expérience satisfaisante. Rappelons qu'un utilisateur qui voit une tonne d'informations sur un même écran sera frustré, ce qui exige aussi un certain minimalisme dans l'affichage de l'information.
* Facilité d'apprentissage : notre application, de par sa nature, sera simple d'usage et d'apprentissage. Les actions possibles seront peu nombreuses et un court tutoriel accompagnant l'utilisateur, au besoin, aura rapidement fait de lui apprendre les options les plus subtiles de notre application. Cette dimension est importante, car l'objectif visé par l'utilisateur de notre application ne demande pas un outil compliqué.
* Visibilité : L'utilisateur doit pouvoir voir rapidement l'option qu'il cherche et voir le résultat de sa recherche. Les affordances devront donc être visibles.
* Mémorabilité : La mémorabilité nous intéresse à un degré moindre. En effet, notre application sera si simple que cette dimension sera indirectement respectée.

#### Conflit
On veut que l'utilisateur obtienne facilement toutes les informations qu'il cherche, mais on veut également un affichage minimaliste des informations. Il faut donc trouver un compromis entre afficher trop ou pas assez d'information et fournir une navigation de l'application qui, si possible, permet d'atteindre ces objectifs qui semblent contradictoires.

### Exercice 2.4 : liste des utilisateurs directs et des parties intéressées.
#### Utilisateurs directs
Toute personne qui veut développer sa conscience environnementale pourra utiliser notre application.

Plus précisément, voici quelques utilisateurs directs afin de guider la conception de notre application:
* Parent qui ne dispose pas de beaucoup de temps pour faire l'épicerie, mais qui a tout de même une conscience environnementale, essayant de protéger l'environnement comme il le peut
* Jeune sensible à la question environnementale et qui s'intéresse à l'empreinte écologique des produits populaires qu'il aime depuis toujours
* Personne âgée à la retraite, sensible aux enjeux actuels, qui dispose de beaucoup de temps pour découvrir et apprendre.

D'autres utilisateurs directs moins évidents:
* gérants d'épicerie qui veulent se renseigner sur la performance écologique de leur sélection
* journalistes qui veulent évaluer les épiceries et leur côté écologique.

#### Parties intéressées
* Les grands producteurs de produits alimentaires pourront utiliser notre application pour se faire connaître auprès des utilisateurs de l'application.
* Les épiceries soucieuses d'attirer des clients avec une conscience environnementale pourraient suivre de près les scores attribués aux produits.

### Exercice 2.5 : objectifs utilisateurs
* Réduire l'impact environnemental causé par leur alimentation
* Comparer les produits offerts pour faire de meilleurs choix en ce qui concerne leur empreinte écologique
* Savoir quels produits éviter, écologiquement parlant
* Participer à un mouvement social
* Entretenir une image de citoyen responsable.

### Exercice 2.6 : tâches utilisateurs

Voici nos 7 tâches utilisateurs en ordre de priorité.

#### a) Yvon l'étudiant
Yvon, 17 ans, un jeune étudiant curieux et soucieux de l'environnement. Il se questionne sur les produits qu'il consomme depuis qu'il est tout jeune. Par sa nature investigatrice et pour se donner bonne conscience, Yvon enquête sur l'impact environnemental des produits alimentaires qu'il mange. Lorsqu'il découvre un produit très dommageable pour l'environnement, il regrette amèrement toutes les fois où il en a encouragé la production en le consommant. Il entreprend ensuite de boycotter ce produit. Cependant, il aimerait que l'information sur l'impact des produits soit plus facile d'accès, car Yvon essaye souvent de nouveaux produits. Yvon prend parfois le temps de Googler les produits disponibles en épicerie, mais pas souvent, car il préfère faire son épicerie rapidement.
* note: nous avons mis l'étudiant en priorité à cause qu'il est susceptible d'utiliser l'application très fréquemment. En effet, si on essaye de nouveaux produits fréquemment et on souhaite en connaître l'impact environnemental, on est obligé de faire ses recherches. Une application mobile pourrait permettre à Yvon de faire son épicerie rapidement tout en atteignant son but de satisfaire sa curiosité.

#### b) Manon la mère de famille
Manon, 45 ans, mère de 4 garçons, doit fréquemment faire l'épicerie pour garder ses enfants en bonne santé. Manon est aussi une personne sensible à son empreinte écologique et veut activement participer au mouvement social de la lutte contre l'accumulation du plastique dans les océans. Comme elle a 4 enfants, Manon a une consommation plus élevée que la moyenne. Pour maintenir une image de citoyen responsable, Manon se fie aux étiquettes sur les produits qui affichent une certification environnementale. Elle ne sait pas trop ce que chaque certification signifie, mais elle a la vague impression de respecter l'environnement.
* note: nous avons mis Manon en priorité 2 parce que comme Manon a plusieurs enfants, elle doit forcément acheter des produits qui conviennent à chacun, ce qui implique de faire de nombreux choix. Une application permettant de faciliter les choix environnementaux lui serait très utile.

#### c) Julio le père de famille
Julio est un père écolo du Plateau qui a un mari et 2 enfants. Il souhaite leur préparer de bons petits plats comme à son habitude, mais sa résolution 2021 est de ne plus jamais acheter des choses polluantes, et ce, sans changer la qualité des mets préparés. Il prend toujours des notes dans les journaux sur les produits à éviter pour se souvenir des documentaires choquants qu'il a visionnés. Ainsi Julio consulte son calepin sur ses produits préférés en fonction de leur empreinte écologique. Il prépare des recettes en fonction de cette information et ses bons petits plats font le bonheur de toute la famille. En plus, il veut impliquer ses enfants dès leur plus jeune âge (5 ans et 9 ans) dans le choix des aliments écologiques.
* note: nous avons mis Julio en priorité 3 parce qu'il a une famille, ce qui implique une utilisation assez fréquente de notre app. Son besoin d'obtenir de l'information rapidement serait facile à combler par une application.

#### d) Pierrette la personne âgée
Pierrette, 76 ans, est retraitée et habite seule dans une maison pour personnes âgées. Tous les jours, l'après-midi, elle passe quelques heures dans sa balançoire préférée de la résidence aux côtés de ses trois amies, Jacqueline, Sylvie et Mariette. Comme à leur habitude, elles discutent du documentaire qu'elles ont écouté la veille à la télé. Hier, elles apprenaient que tous les produits vendus en supermarché n'ont pas la même empreinte écologique. Il se trouve que Jacqueline adore les petits gâteaux au chocolat fourrés à la crème Boston marqués du nom de son supermarché favori. Pierrette, quant à elle, préfère le même type de gâteaux, mais vendu par Vachon. Pendant leur conversation, elles n'arrivent pas à déterminer lequel de ces produits est le meilleur pour l'environnement, ni même quelle distance a parcouru le produit avant de rejoindre les rayons du supermarché.

#### e) Samwell l'écolo daltonien
Samwell, 36 ans, est daltonien, donc il confond le rouge et le vert. Il se considère comme très "vert", mais n'est pas très éduqué sur l'impact environnemental des produits qu'il achète. Puisque c'est la façon la plus simple de se documenter, il écoute des documentaires de temps en temps sur la provenance des aliments. Lorsqu'il fait l'épicerie, il se fie à sa mémoire pour déterminer à quel point les produits sont respectueux de l'environnement.

### Exercice 2.7 : contextes d’usage possibles
* Lieu et heure : l'application pourrait être utilisée à l'épicerie, pendant les heures d'ouverture du commerce, pour rechercher les codes-barres des produits. Elle pourrait aussi être utilisée à la maison, à toute heure, pour rechercher des produits par nom ou par code barre.
* Luminosité extérieure : les épiceries offrent généralement un très bon éclairage. L'utilisateur doit prendre une photo pour lire le code-barre du produit, donc un environnement lumineux est favorable. L'utilisateur pourrait aussi vouloir se documenter dans des endroits plus sombres.
* Réseau : lorsque l'utilisateur n'est pas chez lui, il est possible que sa connexion internet soit manque de vitesse et de fiabilité.
* Luminosité de l'écran : il est possible que l'utilisateur ait une batterie faible dans son cellulaire, donc que la luminosité de l'écran doive être basse.

### Exercice 2.8 : besoins/requis du design
#### Fonctionnels:
* Trouver l'information sur un produit en mémoire en moins de 0,5 seconde.
* Occuper un maximum de 500 mégaoctets d'espace sur l'appareil mobile.
* Ajuster les scores écologiques en fonction de l'emplacement entré par l'utilisateur.

#### De données:
* Les données proviennent toutes d'organismes non gouvernementaux, tels que Greenpeace Canada et Équiterre.
* Les données personnelles des utilisateurs (localisation, texte entré, items scannés) ne sont stockées sur aucun serveur.

#### D'environnement physique:
* Une quantité de lumière adéquate à l'endroit où se trouve l'objet à scanner est nécessaire pour la fonctionnalité "Lire un code-barre".
* Le code-barre de l'objet à scanner doit être détectable (pas trop endommagé, d'une longueur par largeur minimale d'environ 1x1 cm).

#### D'environnement social:
* L'application doit être traduite en français et en anglais.

#### D'environnement technique:

* L'utilisateur doit avoir une bonne connexion pour pouvoir obtenir de l'information sur de nouveaux items (qu'ils soient scannés ou recherchés)
* Le cellulaire doit être capable de lire les code-barres
* Le téléphone utilisé doit pouvoir rouler l'OS Android 11.0+
* Le téléphone utilisé doit être muni d'une caméra

#### Caractéristiques d'utilisateur:
* L'utilisateur doit avoir la capacité motrice de manipuler un téléphone mobile et une caméra, ainsi que la capacité cognitive de repérer un code-barre.
* L'utilisateur doit avoir un minimum de connaissances et d'aptitudes avec les appareils électroniques (pouvoir ouvrir l'appareil, ouvrir des applications de base, prendre des photos).
* Besoins spéciaux : certains utilisateurs ont des contraintes physiques (ex.: une seule main, arthrite, daltonisme, etc). Ceux-ci devraient être capables d'utiliser l'application.

## Section 3 : Premier design

### Exercice 3.1 : prototypes jetables
### Choix clés en commun pour les deux prototypes jetables
* Lecture de code-barres
* Liste pour comparer
* Gros bouton pour que l'activité principale soit évidente
* Hiérarchie peu profonde pour ne pas se perdre dans les différentes activités
* L'élément central est de lire un code-barre, qui est commun à tous les exemples d'activité

Prototype A, vue 1: page d'accueil | Prototype A, vue 2: page de scan
:-------------------------:|:-------------------------:
 | 

Prototype A, vue 3: page de chargement | Prototype A, vue 4: page de succès
:-------------------------:|:-------------------------:
 | 

Prototype A, vue 5: page de comparaison de produits | Prototype A, vue 6: popup informatif pour un produit
:-------------------------:|:-------------------------:
 | 

Prototype A, vue 7: animation "shrink" avec une poubelle qui glisse vers la gauche | Prototype A, vue 8: défilement des produits
:-------------------------:|:-------------------------:
 |

Prototype B, vue 1: Page principale | Prototype B, vue 1: Confirmation d'article scanné
:-------------------------:|:-------------------------:
 | 

Prototype B, vue 2: Page secondaire contenant la liste des articles | Prototype 2, vue 2: Animation pour 'Produit similaire suggéré'
:-------------------------:|:-------------------------:
 | 

Prototype B, vue 2: Animation pour supprimer un article | Prototype B, vue 2: Recherche d'un article avec la barre de recherche
:-------------------------:|:-------------------------:
 | 

Prototype B, vue 3: Information plus détaillé sur un article spécifique | Prototype B, vue 4: Résultat pour l'article recherché avec la barre de recherche
:-------------------------:|:-------------------------:
 | 

### Exercice 3.2 : analyse de l'efficacité

#### PROTOTYPE A
Notre prototype permettra à Yvon d'obtenir rapidement de l'information sur les produits à éviter à l'épicerie. Il permettra aussi à Manon de comparer les produits et de faire des choix plus éclairés. Dans les prochains paragraphes, nous discutons en détail des choix derrière notre design.

##### Vue 1
Sur la vue 1, nous avons choisi de mettre notre logo en gros, pour éviter toute confusion avec d'autres applications. Un item du jour est présenté afin d'apporter des suggestions, une de nos tâches fréquentes. Cette affichage d'item sera repris dans d'autres vues. On y voit une photo de l'item, un score d'impact environnemental bien en vue, et un petit bouton "..." qui affiche un pop-up contenant des informations sur les facteurs ayant affecté le score (emballage jetable, émissions de CO₂ lors de la production, transport, etc.). Un gros bouton "Lire code-barre" est bien en vue. Il n'y a donc que deux éléments interactifs sur tout cet écran et ils sont bien indiqués. Ceci est représentatif de notre souci, présent dans tout le design, de réduire le nombre d'affordances visibles afin de garder l'opération de l'application simple et mémorable.
Il ne devrait pas y avoir d'ambiguité sur la fonction du bouton de lecture de code-barre. Le bouton "..." utilise un symbole qui évoque bien sa fonction: donner plus d'information. Le tout devrait être assez mémorable et efficient.
##### Vue 2
Deux signifiants différents sont utilisés pour indiquer l'état de la lecture de code barre: le X et le rectangle lumineux au centre de l'image donnée par la caméra. En mettant ombrageant toute l'image sauf un rectangle au centre, l'app suggère naturellemetn d'y placer le code barre. Le X est un feedback clair que l'appareil ne capte pas encore un code-barre lisible. Une instruction textuelle clarifie encore plus ce qui est demandé de l'utilisateur. Le logo apparaît dans le coin gauche, en haut, afin de permettre un retour à la page d'accueil (l'association devrait être facile à faire étant donné le gros logo sur cette page). On peut sortir de cette vue en appuyant sur le bouton "précédent", une action qui devrait être un réflexe naturel pour quiconque utilise fréquemment son cellulaire.
##### Vue 3
Même principe que pour la vue 2: l'icône dans le coin droit de l'image offre un feedback clair en utilisant un symbole très commun: une roue qui tourne; indiquant qu'un processus est en cours. Une instruction texte clarifie ce qui est demandé de l'utilisateur. Il n'y a aucun autre élément distrayant sur l'écran.
##### Vue 4
Cette vue apparaît brièvement lorsque le code barre a été lu avec succès. Comme pour les deux précédentes, un feedback clair est donné par l'icône au coin de l'image et un peu de texte indique ce qui vient de se passer. Cela rendra la transition à la vue 5 moins surprenante.
##### Vue 5
L'écran principal de l'application, en quelque sorte. C'est là qu'on affiche tous les items dont le code barre a été lu. L'affichage des items a déjà été décrit en détail pour la vue 1. Cet interface est simple à apprendre car il réutilise des élément de la page d'accueil et la majorité des interactions se fait avec un seul bouton: celui qui permet de lire et comparer plus d'items, situé en bas comme pour les autres vues. Son opération sera efficiente car il n'y a qu'un bouton à appuyer pour ajouter un item. Lorsque beaucoup d'items sont présents, on peut glisser le doigt sur l'écran pour faire défiler les affichages, une action très fréquente et naturelle sur un cellulaire.
##### Vue 6
Ce "pop-up" informatif ne contient qu'un bouton et liste de façon succincte les facteurs qui ont influencé le score de l'item. On garde ça très court car un rayon d'épicerie avec toutes ses distractions n'est pas le moment propice pour lire un long texte. On veut rendre l'information rapide à obtenir (pour optimiser l'efficience). Un seul bouton "Retour" est visible.
##### Vue 7
Appuyer à n'importe quel autre endroit sur un item de manière prolongée (plus qu'un simple "tap") va faire rétrécir légèrement l'affichage de l'item et fait apparaître un icône de flèche qui mène à une poubelle dans le coin de l'affichage. En même temps, l'utilisateur remarquera que l'affichage est glissable de gauche à droite car celui-ci bougera subtilement avec les mouvements de son doigt. Ce sont plusieurs signifiants redondants pour indiquer clairement l'affordance de se débarrasser d'un item en le faisant glisser hors de l'écran. On évite ainsi de rajouter un bouton par item, ce qui polluerait l'écran en y ajoutant beaucoup d'éléments interactifs. Cette fonctionnalité (enlever un item) a été jugée comme importante pour faciliter les comparaisons (l'utilisateur pourrait systématiquement enlever les items avec un mauvais score, par exemple).
##### Vue 8
Ici, on démontre simplement qu'avec une longue liste, les items du bas disparaissent derrière le bouton de lecture pour signaler à l'utilisateur qu'il peut faire défiler la liste.

##### Récapitulation pour le prototype A

De cette analyse des vues, on tire quelques conclusions sur le design. Premièrement, dans toutes les vues, il y a un fort souci de réduire le nombre d’affordances visibles (éléments interactifs). Cela rend l’application simple à apprendre, car peu d’options sont offertes. Cela force l'utilisateur à se concentrer sur le petit nombre d'actions possibles. Ainsi, en utilisant d'une certaine manière le principe de contraintes, la réduction du nombre d’affordances visibles rend l’opération de l’application efficiente. De plus, l’absence de confusion contribue à rendre l’application simple à apprendre et à utiliser, ce que nous avons réussi à faire en choisissant stratégiquement nos signifiants. En effet, dans la mesure du possible, notre application fait appel à des conventions communes aux applications grand public. Ces conventions sont renforcées par des signifiants évidents afin de réduire le nombre d’affordances visibles. Cette conception minimaliste nous a aussi permis d'avoir une bonne visibilité, mais il est encore possible de réduire le nombre de signifiants pour la version final sans perdre en facilité d'apprentissage (voir section 3.3). Ensuite, nous avons fait appel au principe de feedback, particulièrement pour l'action de lire un code-barre. Celle-ci n’étant pas aussi intuitive que celle d’appuyer sur un bouton, une attention particulière a été portée pour informer efficacement l'utilisateur du résultat de ses actions et de l'état du système. Finalement, en ayant fait bon usage des affordances, nous avons rendu l’application efficace pour plusieurs types d’utilisateurs: les scores bien indiqués permettent à ceux qui le veulent de comparer rapidement les items et les pop-ups détaillés permettent à ceux très soucieux de leurs choix d’en apprendre plus sur l’impact des produits qu’ils achètent. Ainsi, les objectifs de nos tâches priorisées sont atteints.

#### PROTOTYPE B
L'application présentée au prototype B supporte aussi bien les tâches d'Yvon que celles de Manon, de Julio ou de Pierrette.

Pour Manon, l'utilisation de notre application devrait se faire de manière spontanée, dans le contexte de ses courses au supermarché. Comme Julio, elle est sensible à la trace qu'elle laisse sur l'environnement. Elle veut savoir si ce qu'elle met dans son panier est ce qu'il y a de mieux en termes de respect de l'environnement. Notre application répond efficacement à ce besoin. Entre deux rayons, elle n'aura qu'à se saisir son téléphone et ouvrir l'application. C'est tout: déjà, elle est prête à scanner le code-barre d'un article qui se trouve devant elle. Aucune seconde n'est perdue, aucune action n'est de trop.

Pour Yvon, qui mène une vie moins pressée que Manon, par contre, nous avons ajouté une vue où davantage de renseignements peuvent être obtenus sur l'empreinte écologique d'un produit. Cet ajout n'affecte en rien l'efficience du processus pour Manon, tout en satisfaisant la soif de connaissances d'Yvon.

##### Vue 1
L'élément le plus important sur la page d'accueil est la taille importante du bouton qui déclenche la fonctionnalité principale de notre application: lire un code-barre. Sa taille importante le rend visible pour l'utilisateur. Sur ce même bouton, un aspect de feedback est pensé. Lors du scan réussi d'un produit, en plus du message de succès qui s'affiche au milieu de l'écran, le bouton envoie un signal sensoriel, une vibration au pouce de l'utilisateur. Encore sur le bouton, on ne peut manquer le signifiant indiquant l'affordance à l'utilisateur: tenir le bouton, c'est lire un code-barre. Soulignons que l'espace blanc dans cette vue serait occupé par l'image captée par la caméra du cellulaire.

Le deuxième élément intéressant est la présence de deux petites billes. L'une pleine, l'autre vide. La bille pleine indique à l'utilisateur la vue sur laquelle il se trouve et de ce fait, lui signifie une affordance, celle de pouvoir changer la vue en glissant son doigt vers la droite ou vers la gauche. Par souci de conformité avec l'expérience ordinaire d'un utilisateur d'appareil mobile, le côté vers lequel est glissé le doigt correspond à la direction de défilement de l'écran vers l'autre vue.

Le dernier élément à souligner dans cette vue est la barre de recherche. Puisqu'une fonctionnalité importante de notre application est la comparaison, on permet à l'utilisateur de rechercher des produits sans avoir à les scanner. Cette affordance est visible dès le premier regard.

##### Vue 2:
Cette vue supporte la fonctionnalité permettant de comparer les produits. Ici, la plupart des affordances sont signifiées.

D'abord, afin de comparer rapidement tous les items, l'utilisateur peut cliquer sur le bouton "Trier par ordre écologique" (le texte agit comme signifiant). La flèche en gras qui suit indique la direction de l'ordre de la liste.

Ensuite, pour retirer un item, l'utilisateur peut, comme sur la plupart des listes présentées sur un appareil mobile, glisser un item vers la gauche et cliquer sur la corbeille rouge qui se découvre. L'utilisateur est informé du succès de son action par un feedback on ne peut plus clair: l'item disparaît.

Encore, l'utilisateur pourra ajouter des items similaires à ceux qu'il a déjà entrés dans sa liste pour les comparer. Ces items seront proposés par l'intelligence artificielle qui les aura considérés comme étant suffisamment comparables à ceux de la liste de l'utilisateur. Cette sélection aidera l'utilisateur en lui permettant de trouver des produits auxquels ils n'avait peut-être pas pensé. Le signe "+" signifie cette affordance qu'est l'ajout d'un produit similaire.

Enfin, l'utilisateur peut cliquer sur un item pour découvrir les faits importants affectant la cote écologique du produit visé. Ce clic est accompagné d'un feedback visuel, comme si l'utilisateur "appuyait" sur un bouton. Cette affordance conduit l'utilisateur vers notre troisième vue.

##### Vue 3:
Ici, rien de spécial. Le design répond parfaitement aux attentes d'un utilisateur ayant affaire à cette vue. Le nom du produit sur lequel il a cliqué est en gras, de grande taille et au milieu de l'écran. L'utilisateur sait donc qu'il est au bon endroit. Le score du produit, ici, comme le titre, frappe l'oeil de l'utilisateur. Si l'utilisateur veut plus que l'ordre relatif de l'impact environnemental des produits qu'il trouve dans sa liste triée à la vue 2, il reçoit bien en vue la note absolue donnée au produit lorsqu'il clique dessus. Enfin, pour les plus curieux, les plus intéressés et pour ceux qui ont le plus de temps, on retrouve les explications justifiant la note juste au-dessous d'elle. La proximité de ces deux derniers éléments les lie et aide l'utilisateur à former un modèle conceptuel où ces éléments sont liés.

##### Vue 4:
Notre dernière vue n'apporte ni nouvelle fonctionnalité, ni nouveau concept d'utilisation. Tant mieux, nous ne voulions pas surcharger l'utilisateur. Tout ce qu'il connaît déjà des vues précédentes se trouve ici. Le signe "+" indique qu'il est possible d'ajouter l'item dans la liste. Cliquer sur l'item permet de voir sa fiche descriptive. Le titre, en haut, au centre de l'écran, a encore pour effet de signifier à l'utilisateur où il se trouve. La flèche dans le coin supérieur gauche est un standard et offre le comportement attendu: elle ramène à la vue précédente.

### Exercice 3.3 : nouveau prototype

Notre analyse commune des prototypes A et B nous a conduits à ne garder que les features essentielles de l'app. Cela nous a permis d'éliminer les signifiants non nécessaires pour garantir une expérience utilisateur aussi agréable et satisfaisante que possible.

Les pages qui suivent sont en couleurs afin de bien rendre le côté esthétique et à la mode du design, élément important de la satisfaction des utilisateurs.

Comme les images ci-dessous sont des captures d'écran, certaines transitions ne pouvaient pas être exprimées avec des flèches. Nous avons donc verbalisé les transitions entre les vues lorsque nécessaire.

<img src="https://i.imgur.com/ESiEKQx.png" style="zoom:50%" />

A. Accueil. L'utilisateur peut lire un code-barre (diagramme B), faire une recherche (diagramme G), ou obtenir plus d'information sur l'item du jour (diagramme F).

B. Lecture de code-barre. L'utilisateur peut cliquer sur le logo (action toujours possible dans l'application) ou faire "précédent" sur son téléphone pour retourner à la page d'accueil. La lecture d'un item qui ne se trouve pas dans la base de données envoie au diagramme C, sinon on procède au diagramme D.

<img src="https://i.imgur.com/8BdW45U.png" style="height: 400px" />

C. Succès d'un scan, mais item non trouvé. Le bouton renvoie au diagramme B.

<img src="https://i.imgur.com/lwzbc1S.png" />

D. Succès d'un scan. Les items lus subséquemment s'ajoutent au début de la liste. Les affordances de la page d'accueil sont toujours présentes.

<img src="https://i.imgur.com/nRTpJ90.png" style="height: 400px" />

E. Enlever un item de la liste. Faire glisser l'item vers la gauche ou vers la droite le fera disparaître de la liste.

<img src="https://i.imgur.com/OXOo9Oy.png" style="height: 400px" />

F. Quand l'utilisateur clique sur le score de l'item. Le bouton renvoie au diagramme D (ou au diagramme A si on était à la page d'accueil).

G. Recherche. À la fin de la recherche, l'item trouvé est ajouté au début de la liste dans le diagramme D.