Dans cet atelier, il sera question d'expérimenter les tests A/B. Vous devrez choisir d'améliorer un élément de l'expérience utilisateur sur une manette faite par une autre équipe. On se plonge dans un situation commune où l'on doit améliorer du code existant.

Objectifs

• Améliorer l'expérience utilisateur d'une manette fait dans l'atelier 2.
• Expérimenter les tests A/B.
• Corriger certaines erreurs faites durant l'atelier 2.

Choix de projets

A) Ajout du bouton d'état Play/Pause(feedback) et ajouter une valeur pour volume (feedback). Éq.4 (disponible pour les 2 groupes)

B) Ajouter une hiérarchie visuelle au niveau du contraste et/ou des couleurs. Éq.8 (disponible pour les 2 groupes)

C) Rendre le point de départ plus clair. Ajouter l'état play et pause plus clair. ** (groupe 1 seulement)

D) Ajouter l'état play/pause et mute plus clair. Option pour ajouter seek, volume, etc. Éq.1 (disponible pour les 2 groupes)

E) Rendre RWD (Responsive Web Design) le bouton HELP pour qu'il soit affiché ou non en fonction de la grosseur de l'écran. *** (groupe 2 seulement)

F) Ajout de hiérarchie visuelle et aligner les boutons (mapping). **** (groupe 2 seulement)

G) Bug dans l'affichage au démarrage. 5* (tous les groupes)

H) Augmenté les signifiants, signalisations, les polices de caractères. 6* (tous les groupes)

I) Augmenté la consistance et la hiérarchie visuelle. Fixé le bug (voir console). 7* (groupe 2 seulement)

J) Rendre la manette RWD (Responsive) et ajouter des signifiants pour les directions (bouton). Éq.2 (disponible pour les 2 groupes)

K) Améliorer le mapping au niveau des commandes. Le point de départ est à travailler. Éq.7 (groupe 1 seulement)

L) Ajout de la ligne de temps (fonction supplémentaire) en suivant la maquette de l'itération 2. 8* (groupe 1 seulement)

Plus d'options à venir.

Création du projet

Selon le choix du projet en question. Vous devez demander accès au repository en tant que contributeur.

Une fois que vous aurez accès au projet. Vous devez créer une branche dans github à partir du code de la branche principale ayant cette nomenclature. Atelier3_#étudiant. Vous pouvez également créer une branche à part (version A) si vous ajoutez des logs (historiques) pour calculer le temps écoulé pour faire une ou plusieurs actions.

Logs (historiques)

Il est suggéré d'ajouter les logs pour suivre l'historique des actions de vos utilisateurs.

Exemple en js:

// début de l'action

console.time('nomAction');

// fin de l'action

console.timeEnd('nomAction');

Vous pouvez extraire la valeur dans la console tel quel:

nomAction: 11060.819091796875 ms

Structure du document à remettre

Hypothèses

Énoncé de votre hypothèse.

Quel critère choisir pour valider votre hypothèse?

Efficacité, efficience ou Satisfaction?

Fonctionnalités

Comment implémenter le changement?

Quel changement allez-vous implémenter?

Tests

Scénario de tests.

Utilisation des logs de la console pour faire mon rapports (B).

Sondage de satisfaction.

Grille d'observation (pour trouver le pattern).

Rapport final

Utilisation des chiffres et des commentaires du sondage de satisfaction. Conclusion au niveau hypothèse.

Évaluation - 15% du total de la session

• 10% Maquette(s), travail de préparation (documents, plans, etc.). Les fichiers doivent être dans github.
• 25% Sur la qualité du code: Nom des fichiers, nom des variables, organisation des événements.
• 40% Sur les tests A/B de votre interface. Les fichiers doivent être dans github.
• 25% Sur le rendu final: Est-ce que l'application fait ce que devait faire selon les critères fixées au départ? Si vous dépassez les attentes, vous avez plus de chance d'amasser le maximum de points.

Date limite: 8 avril 2024