La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Prototypage. Sortes de prototypes Servent à la conception, et au tests avec les utilisateurs Sortes de prototypes: – Prototype statique / dynamique –

Présentations similaires


Présentation au sujet: "Prototypage. Sortes de prototypes Servent à la conception, et au tests avec les utilisateurs Sortes de prototypes: – Prototype statique / dynamique –"— 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 dun concepteur

5

6 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

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

17 Prototypage en papier Avantages: – Un maximum de feedback pour un minimum deffort (Snyder) – Vites à faire et à modifier – Ne demande pas dexpertise – Aspect informel encourage la créativité – Ne donne pas limpression au client que linterface est presque finie – Évitent que les concepteurs soient attachés à la conception et quils 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 dOz (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 (http://dub.washington.edu/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 dexercise 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 LOG350 A2006 Analyse, vision et domaine 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 dinformation (« information design »): on soccupe de linformation qui sera présentée à lutilisateur, et non de la façon dinteragir avec On ne met pas de boutons, menus, etc. dans ces fenêtres –Ajouter les fonctionnalités (widgets) par la suite

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

30 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 davoir chaque donnée affichée dans une seule fenêtre, surtout quand les données seront modifiables –Sinon, ça peut nuire à la formation dun 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

31 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 densembles des données dans vos fenêtres!

32 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

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

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

35 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

36 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


Télécharger ppt "Prototypage. Sortes de prototypes Servent à la conception, et au tests avec les utilisateurs Sortes de prototypes: – Prototype statique / dynamique –"

Présentations similaires


Annonces Google