Prototypage

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
(No Transcript)
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
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
Des outils flottants ou optionnels ...
12
(No Transcript)
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
(No Transcript)
16
Storyboard of a computer based telephone
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
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?

20
Systèmes de prototypage expérimentaux

• SILK (Sketching Interfaces Like Krazy)

21
Systèmes de prototypage expérimentaux (suite)

• DENIM
• Montrer la vidéo

22
Prototypage physique

• Pour les interfaces matérielles
• Exemple Les phidgets physical
  widgets(montrer la vidéo)

23
Exemple Phidget Un capteur RFID téléphone
cellulaire
24
Exemple PhidgetJeu dexercise avec Tetris et
des poids
25
Prototypage physique (suite)

• ExempleBUG (buglabs.net)

26
La méthode des fenêtres virtuelles(Lauesen et
Harning 2001)
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 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

28
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

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

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

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

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)
33
Fenêtres virtuelles CREDO check
Guest Stay Room RoomState ServiceRec. ServiceType
Missing window data
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 . . .
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 (!) -gt des boutons plus
  faciles à accéder

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