Prototypage

Sortes de prototypes Servent à la conception, et au tests avec les utilisateurs Sortes de prototypes: – Prototype statique / dynamique – Prototype de haute fidelité / basse fidelité – Prototype horizontal / vertical

Prototypes en papier Basse fidelité Vites à faire et à modifier Peuvent utiliser le papier, les transparences, les collants (“post-its”), les cartes en carton, les ciseux, ruban gommé, crayons, stylos,...

Le bureau d’un concepteur

Exemples … can create pre-made interface components on paper eg, these empty widgets were created in visual basic and printed out: buttonsmenualert box combo box tabs entries list box

Des outils flottants ou optionnels...

Storyboarding a series of key frames – originally from film; used to get the idea of a scene – snapshots of the interface at particular points in the interaction

Example frame from a movie Storyboard

Storyboard of a computer based telephone Computer Telephone Last Name: First Name: Phone: Place CallHelp Help-> Computer Telephone Last Name: Greenberg First Name: Phone: Place CallHelp Dialling.... Cancel Call connected... Computer Telephone Last Name: Greenberg First Name: Phone: Place CallHelp Connected Hang up Call completed... Return Help Screen You can enter either the person's name or their number. Then hit the place button to call them Call by name-> Computer Telephone Last Name: Greenberg First Name: Phone: Place CallHelp Establishing connection->

Prototypage en papier Avantages: – “Un maximum de feedback pour un minimum d’effort” (Snyder) – Vites à faire et à modifier – Ne demande pas d’expertise – Aspect informel encourage la créativité – Ne donne pas l’impression au client que l’interface est presque finie – Évitent que les concepteurs soient attachés à la conception et qu’ils hésitent de la changer – Évitent que les utilisateurs hésitent de suggérer des gros changements – Permettent les utilisateurs à participer dans la conception Exemples: PICTIVE (“Plastic Interface for Collaborative Technology Initiative through Video Exploration”, Muller 1992), une technique de conception participatoire (“participatory design”)

Exercise en classe ! (distribuer les descriptions des exercises) Pourquoi garder des détails secrets de votre participant eventuel ? Dessiner vos … – Fenêtres – Dialogues – Menus – Curseur(s) – Messages d’erreur – Images “vidéo” N.B.: pas un “storyboard”, mais plutôt montrer l’écran de départ et ensuite montrer la réaction aux entrées du participant

Exercise en classe ! (suite) Tester avec un utilisateur Rappelez à votre participant de penser à haute voix (la technique “think aloud”) Montrer ce qui arrive en réponse aux actions du participant Expliquer le moins possible ce qui arrive ou pourquoi, à moins que le participant soit bloqué ou complètement “dans le champ” Prenez en note les problèmes rencontrés par l’utilisateur (exemples: erreurs, sources de confusion) À la fin de la session, échangez des commentaires et des suggestions librement

Exercise en classe ! (suite) Avez-vous observer beaucoup de problèmes ? – Plus de problèmes que vous aurez pensé au départ ? Est-ce que vos deux participants ont eux des problèmes différents ? – Donc, vaudrait-t-il la peine de tester avec encore plus d’utilisateurs ? Si vous aviez à refaire cet exercise, qu’est-ce que vous auriez fait différemment ?

Autres techniques de prototypage Pages web (HTML) statiques Images – Visio – Adobe PhotoShop, GIMP, Adobe Illustrator, Paint.NET (permettent de travailler avec des couches (“layers”)) (Démonstration de GIMP) Outils de présentation – Director Du code exécutable, sans fonctionalité – VisualBasic, Java, C++ (Qt), etc. – Il existe des outils glisser-déposer pour créer une interface graphique avec des widgets standards (Exemple: NetBeans pour le Java) Questions: lesquels de ces techniques sont statiques / dynamiques, basse / haute fidelité, horizontal / vertical ?

Le « napkin look-and-feel »

Autres techniques de prototypage (suite) Le prototypage par la technique du “Magicien d’Oz” (“Wizard-of-Oz”) – Exemple: simulation de reconnaissance de la voix parfaite Le prototypage par vidéos – Utiles pour montrer une vision – Exemples (montrer les vidéos): KnowledgeNavigator de Apple – Questions: haute ou basse fidelité? Horizontal ou vertical? Interfaces pour écrans volumiques Wearable interface: « 6th sense » Nokia Morph Microsoft 2019

Systèmes de prototypage expérimentaux SILK (Sketching Interfaces Like Krazy) Landay et Myers 2001

Systèmes de prototypage expérimentaux (suite) DENIM ( – Montrer la vidéo

Prototypage physique Pour les interfaces matérielles Exemple: Les phidgets – “physical widgets” / Greenberg et Fitchett 2001 (montrer la vidéo)

Exemple Phidget: Un capteur “RFID” + téléphone cellulaire

Exemple Phidget: Jeu d’exercise avec Tetris et des poids

Prototypage physique (suite) Exemple: BUG (buglabs.net)

La méthode des fenêtres virtuelles (Lauesen et Harning 2001)

LOG350 A2006 Analyse, vision et domaine 31 Fenêtres virtuelles Introduction Lauesen propose de concevoir l'interface utilisateurs en deux étapes –Concevoir des fenêtres virtuelles, montrant les données, en fonction des tâches Correspond à la conception d’information (« information design »): on s’occupe de l’information qui sera présentée à l’utilisateur, et non de la façon d’interagir avec On ne met pas de boutons, menus, etc. dans ces fenêtres –Ajouter les fonctionnalités (widgets) par la suite

LOG350 A2006 Analyse, vision et domaine 32 Fenêtres virtuelles Processus de construction des fenêtres 1.Partir des tâches les plus fréquentes et les plus importantes 2.Regrouper les données dans quelques fenêtres virtuelles 3.Continuer les étapes 1 et 2 pour d'autres tâches 4.Si les données sont dans une fenêtre déjà existante, essayer d'accomplir cette tâche avec la même fenêtre 5.Si des données manquent à une fenêtre, augmenter celle- ci, si possible

LOG350 A2006 Analyse, vision et domaine 33 Fenêtres virtuelles Règles de construction Utiliser le moins de modèles de fenêtre possible Utiliser le moins d'instances de fenêtre possible pour une tâche –Surtout pour les tâches importantes/fréquentes –Évitez les séquences étape-par-étape extrèmes (exemple: les « Wizard ») Essayer d’avoir chaque donnée affichée dans une seule fenêtre, surtout quand les données seront modifiables –Sinon, ça peut nuire à la formation d’un bon modèle conceptuel Les fenêtres virtuelles peuvent être plus petites que la taille réelle de l'écran –Plus tard, elles pourront être combinées

LOG350 A2006 Analyse, vision et domaine 34 Fenêtres virtuelles Règles (suite) Une vue d'ensemble aide énormément l'utilisateur: –à savoir où il est rendu –à réduire le nombre d'étapes de navigation –à prendre plus rapidement une décision … donc, essayer de donner des vues d’ensembles des données dans vos fenêtres!

LOG350 A2006 Analyse, vision et domaine 35 Fenêtres virtuelles Règles (suite) Baser les fenêtres sur des objets, pas sur des actions. Commencer par nommer les fenêtre par des noms d'objets plutôt que des nom de fonctions –"chambre", "dossier client", "profile" –pas: "entrer une réservation de chambre", "consulter un dossier client" Une tâche peut correspondre à plusieurs fenêtres virtuelles, et une fenêtre virtuelle peut permettre plusieurs opérations de base

LOG350 A2006 Analyse, vision et domaine 36 Fenêtres virtuelles La méthode CREDO pour ne rien oublier CREDO –C: Création –R: Reading –E: Editing –D: Deleting –O: Overviewing Vérification: sur un plan des données, ajouter chaque lettre, en passant chaque écran en revue, pour ne rien oublier (Pas nécessaire pour T2)

LOG350 A2006 Analyse, vision et domaine 37 Fenêtres virtuelles CREDO check Fig 6.5B CREDO check Create, Read, Edit, Delete, Overview StayCRE CRED r re OCREDO R Rooms Breakfast Service charges Data model versus virtual windows: Guest Stay Room RoomState ServiceRec. ServiceType Missing window data Entity Virt. window roomID Notes: RoomState: personCount editable through Stay, all states through Rooms. Breakfast: roomId... CREDO re O rCReDO R CREDO Missing fncts DO O (C) D (Pas nécessaire pour T2)

LOG350 A2006 Analyse, vision et domaine 38 Conception des fonctionnalités (widgets, interactions) On repart avec chaque tâche, en ordre d'importance –On identifie des « boutons » (peut-être, en fait, des commandes de menu) pour les différentes opérations (traitement) à effectuer recherche, création, ajout, sauvegarde, efface, calcul, envoie, … –Les actions plus importantes / fréquentes, et moins dangeureuses (!) -> des boutons plus faciles à accéder

LOG350 A2006 Analyse, vision et domaine 39 D'écrans virtuels à Réels Passage au réel On procède à l'assemblage fenêtres virtuelles en écrans réels On peut regrouper plusieurs fenêtres dans un seul écran, gardant des séparations visuelles (encadrement, couleurs, distance, …) –Regrouper les fenêtres virtuelles d'une même tâche –Regrouper les fenêtres virtuelles séquentielles –Optimiser les transitions/navigations