Exemples de conception centre sur lutilisateur Quelques exemples

Exemples de conception centrée sur l’utilisateur Quelques exemples de systèmes inspirés (partiellement) en étudiant les utilisateurs

Exemple 1: Le bureau virtuel

Études de l’organisation des documents dans un bureau physique À retenir! Malone (1983) http: //scholar. google. ca/scholar? q=malone+%22 How+do+people+organize+their+desks%22 • Au moment de l’étude, le bureau virtuel était une innovation récente • Malone voulait identifier des problèmes du papier pour informer la conception d’interfaces virtuelles • Il trouva des “aspects subtiles mais utiles” des documents en papier “qui pourraient être perdus par inadvertance dans la nouvelle technologie” • Les travailleurs de bureau ont de la difficulté à classer les documents en papier, et à identifier quelles catégories utiliser • Les piles et les dossiers sont utilisés pour organiser les documents – Le premier est moins formel, et peut servir de rappel, permettant de remettre la décision de catégorisation à plus tard • Les documents sont placés non seulement pour permettre leur récupération plus tard, mais aussi pour servir comme rappel de tâches à accomplir (et ce pour environ 2/3 des piles)

Les ordinateurs peuvent aider comment ? À retenir! • Permettre aux utilisateurs de remettre la décision de classification à plus tard • Permettre aux documents d’être members de plus qu’une collection à la fois • Classer les documents de façon automatique • Permettre de faire des recherches par mot clé • Permettre d’utiliser les documents comme rappels visuels des tâches à faire

Études de l’organisation des documents sur les ordinateurs À retenir! Barreau and Nardi (1995) • Ont étudié les habitudes utilisateurs reliées à la recherche • Les utilisateurs préfèrent de loin cher “par lieu” (exemple: fureter des dossiers), et font des recherches “logiques” (exemple: par mot clé) seulement en dernier recours • Les utilisateurs ont de la difficulté à se rappeler des noms qu’ils ont donnés aux fichiers • Les utilisateurs se servent des documents comme rappels http: //scholar. google. ca/scholar? q=barreau+nardi+%22 Finding+and+reminding%3 A+file+organization%22 – Laisser un message dans leur boîte à courriel – Mettre des documents à un endroit spécial sur leur bureau virtuel • Les utilisateurs ne classent pas les informations “éphémères” (exemples: listes de choses à faire, mémos) de façon formelle, contrairement aux informations “de travail” ou “archivées” • La gestion d’informations éphémères est un grand défi

Le bureau virtuel • Est-t-il conçu pour supporter les habitudes décrites? Ou simplement comme métaphore familière ? • Est-ce qu’il s’applique aussi bien à un grand nombre de fichiers ? Est-ce que cette approche est “scalable” ?

Piles (Mander et al. 1992, Xerox PARC) http: //scholar. google. ca/scholar? q=mander+salomon+wong+pile+metaphor

Piles (Mander et al. 1992, Xerox PARC) http: //scholar. google. ca/scholar? q=mander+salomon+wong+pile+metaphor

Piles (Mander et al. 1992, Xerox PARC) http: //scholar. google. ca/scholar? q=mander+salomon+wong+pile+metaphor

Michel Beaudouin-Lafon, 2001 http: //scholar. google. ca/scholar? q=%22 Novel+interaction+techniques+for+overlapping+windows%22 Vidéo: http: //www. acm. org/uist/archive/videos/2001/p 153 -beaudouin-lafon. mov

Fold-n-drop (Pierre Dragicevic, 2004) https: //www. lri. fr/~dragice/foldndrop/ http: //scholar. google. ca/scholar? q=dragicevic+%22 Combining+Crossing-Based+and+Paper-Based%22 Vidéo: http: //www. youtube. com/watch? v=VAWn. IGo 9 Kro

Bump. Top (Agarawala et Balakrishnan, 2006) http: //scholar. google. ca/scholar? q=agarawala+balakrishnan+keepin+%22 Pushing+the+desktop+metaphor%22 http: //bumptop. com

Bump. Top (Agarawala et Balakrishnan, 2006) http: //scholar. google. ca/scholar? q=agarawala+balakrishnan+keepin+%22 Pushing+the+desktop+metaphor%22 http: //bumptop. com Vidéos: • prototype: http: //www. youtube. com/watch? v=M 0 ODskd. EPn. Q • version hip-hop: http: //www. youtube. com/watch? v=o. UVp. SY 4 e. BCc • parodie: http: //www. youtube. com/watch? v=k. QL 9 V 2 dn. KFY • présentation TED: http: //www. ted. com/talks/anand_agarawala_demos_his_bumptop_desktop • version commerciale: http: //www. youtube. com/watch? v=6 jho. Ws. Hw. U 7 w

Exemple 2: Dessin à ruban (“Tape Drawing”)

Dessin à ruban (“Tape Drawing”)

Digital Tape Drawing (Balakrishnan et al. 1999) http: //scholar. google. ca/scholar? q=balakrishnan+fitzmaurice+%22 Digital+tape+drawing%22 Vidéo: http: //www. dgp. utoronto. ca/~ravin/videos/uist 99_tapetool. mpg

MD = main dominante (souvent, la main droite) MND = main non-dominante (souvent, la main gauche) À retenir! On peut changer de mode (ligne droite, courbe) de façon implicite : • MD fixe : ligne droite • MD en mouvement : courbe – La distance entre les mains détermine le rayon de courbure MD MND Mains proches: grande variabilité MND Mains lointaines: variabilité diminuée MD

Réactions des utilisateurs • Démonstrations à 5 studios de conception d’autos, en France, en Angleterre, et aux États-Unis • Environ 20 artistes ont essayé le système – Avec 1 minute d’instructions, les résultats des artistes étaient supérieurs à ceux des réalisateurs du système qui avaient des heures d’expérience. – L’habilité des artistes s’est montrée malgré les limitations technologiques (câbles; problèmes de calibration et de bruit) – Utilisation de gestes habituels, par exemple: regarder le long d’une ligne • Ont demandé une version 3 D

Le Tape Drawing en 3 D (Grossman et al. 2002) http: //scholar. google. ca/scholar? q=grossman+balakrishnan+%223 D+curves+with+digital+tape+drawing%22 Vidéo: http: //www. dgp. utoronto. ca/~ravin/videos/chi 2002_principle 3 dcurves. mpg

Exemple 3: Les assistants numériques personnels (PDAs, ou "Personal Digital Assistant")

Le Apple Newton (≈1993) Vidéo: http: //www. youtube. com/results? search_query=apple+newton+getting+started http: //oldcomputers. net/pics/newton-right. jpg http: //cache. gizmodo. com/assets/images/4/2 012/01/d 0531 a 85 c 7 fb 57 d 39 ebf 0 a 88 dd 78778 a. jpg

Pourquoi le Newton n’a pas été un succès ? À retenir! • Les “focus groups” ont dit que le reconnaissance d’écriture serait super ! • La reconnaissance d’écriture n’était pas assez fiable • Dispositif trop gros • Trop dispendieux

Le Palm Pilot (≈1997) À retenir! Besoins de base: • Taille: peut aller dans une poche de chemise • Prix: 299 $ • Capable d’être synchronisé avec un ordi de bureau • Vitesse: doit être aussi rapide qu’un bloc notes de papier. Aussi : – Aucun curseur d’attente – Aucune boîte de dialogue d’erreur, surtout les messages du genre « Error xyz, Abort or Cancel? »

Le Palm Pilot • Taille: peut aller dans une poche de chemise Prototype en bois:

Le Palm Pilot Directives de conception adoptées: • Less is more • Avoid adding features • Strive for fewer steps • Simplicity is better than complexity Le « Zen de Palm » Écran de 160 x 160 pixels!

Le Palm Pilot 1000

Le Graffiti, pour saisir le texte • Idée: au lieu de reconnaître l’écriture, reconnaître des gestes de façon fiable • But principal n’est pas la vitesse de saisie • Buts principaux: fiabilité et facilité d’apprentissage À retenir!

Le Graffiti

Exemple 4: Redesign de guichets bancaires par IDEO

“Future of Self-Service Banking” (IDEO, BBVA) http: //www. youtube. com/watch? v=x-DLQp 9 xb 20

Observations • Le redesign a commencé avec de l’observation des utilisateurs, et a passé par des prototypes en carton servant à simuler des cas d’utilisation • Tourné de 90° pour interagir en privé • Une seule fente pour l’argent et les reçus • Affichage personnalisé des options et des comptes les plus utilisés par l’utilisateur • Des animations pour montrer quand l’argent va sortir

Exemple 5: “One laptop per child” http: //one. laptop. org/

Le laptop XO

Le laptop XO

Le laptop XO • Écran réversible permettant 3 modes d’usage: laptop, tablette, et console portable (“gamepad”) • Clavier scellé pour protéger contre le sable et l’eau • Manivelle en option pour charger la pile • Antennes pour réseau maillé (“mesh network”) • Couleurs distinctives pour éviter les vols • Prix ciblé: 100 $ • Linux avec logiciels éducatifs (dessin, musique, photos, programmation)