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