Prototypage.

Présentation au sujet: "Prototypage."— Transcription de la présentation:

1 Prototypage

2 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

3 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, ...

4 Le bureau d’un concepteur

5

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

7

8

9

10

11 Des outils flottants ou optionnels ...

12

13 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

14 Example frame from a movie Storyboard

15

16 Storyboard of a computer based telephone
Computer Telephone Last Name: First Name: Phone: Place Call Help Help-> 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 Call Help Establishing connection-> Computer Telephone Last Name: Greenberg First Name: Phone: Place Call Help Dialling.... Cancel Call connected... Computer Telephone Last Name: Greenberg First Name: Phone: Place Call Help Connected Hang up Call completed...

17 Prototypage en papier Avantages: Vites à faire et à modifier
“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”)

18 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 ?

19 Le « napkin look-and-feel »

20 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 Exemple: KnowledgeNavigator de Apple (montrer la vidéo) Questions: haute ou basse fidelité? Horizontal ou vertical?

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

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

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

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

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

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

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

28 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

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

30 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

31 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

32 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

33 Fenêtres virtuelles La méthode CREDO pour ne rien oublier
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

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

35 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

36 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 LOG350 A2006 Analyse, vision et domaine