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
Vertical prototype
Horizontal prototype
Scenario
Full System
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:
buttons menu alert 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 Call Help
Help->
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...
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->
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”)
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 ?
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?
Systèmes de prototypage expérimentaux
• SILK (Sketching Interfaces Like Krazy)
Systèmes de prototypage expérimentaux (suite)
• DENIM– Montrer la vidéo
Prototypage physique• Pour les interfaces matérielles• Exemple: Les phidgets – “physical widgets”
(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 27
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 28
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 29
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 30
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 31
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 32
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 33
Fenêtres virtuelles CREDO check
Fig 6.5B CREDO check
Create, Read, Edit, Delete, Overview
Stay CRE CRED r re O CREDO R
Rooms
Breakfast
Service charges
Data model versus virtual windows:
Gue
st
Stay
Roo
m
Roo
mSt
ate
Serv
iceR
ec.
Serv
iceT
ype
Mis
sing
win
dow
dat
a
Entity
Virt.window
roomID
Notes: RoomState: personCount editable through Stay, all states through Rooms.Breakfast: roomId . . .
CREDO re O
r CReDO R
CREDO
Missing fncts DO O (C) D
(Pas nécessaire pour T2)
LOG350 A2006 Analyse, vision et domaine 34
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 35
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