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

Présentation au sujet: "Exemples de conception centrée sur l’utilisateur Quelques exemples de systèmes inspirés (partiellement) en étudiant les utilisateurs."— Transcription de la présentation:

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

2 Exemple 1: Le bureau virtuel

3 Études de l’organisation des documents dans un bureau physique Malone (1983) http://scholar.google.ca/scholar?q=malone+%22How+do+people+organize+their+desks%22 http://scholar.google.ca/scholar?q=malone+%22How+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)

4 Les ordinateurs peuvent aider comment ? 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

5 Études de l’organisation des documents sur les ordinateurs Barreau and Nardi (1995) http://scholar.google.ca/scholar?q=barreau+nardi+%22Finding+and+reminding%3A+file+organization%22 http://scholar.google.ca/scholar?q=barreau+nardi+%22Finding+and+reminding%3A+file+organization%22 Ont étudié les habitudes des utilisateurs reliées à la recherche Les utilisateurs préfèrent de loin chercher “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 – 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

6 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” ?

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

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

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

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

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

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

13 Vidéos: prototype: http://www.youtube.com/watch?v=M0ODskdEPnQ http://www.youtube.com/watch?v=M0ODskdEPnQ version hip-hop: http://www.youtube.com/watch?v=oUVpSY4eBCc http://www.youtube.com/watch?v=oUVpSY4eBCc parodie: http://www.youtube.com/watch?v=kQL9V2dnKFY http://www.youtube.com/watch?v=kQL9V2dnKFY présentation TED: http://www.ted.com/talks/anand_agarawala_demos_his_bumptop_desktop http://www.ted.com/talks/anand_agarawala_demos_his_bumptop_desktop version commerciale: http://www.youtube.com/watch?v=6jhoWsHwU7w http://www.youtube.com/watch?v=6jhoWsHwU7w BumpTop (Agarawala et Balakrishnan, 2006) http://scholar.google.ca/scholar?q=agarawala+balakrishnan+keepin+%22Pushing+the+desktop+metaphor%22 http://bumptop.com http://scholar.google.ca/scholar?q=agarawala+balakrishnan+keepin+%22Pushing+the+desktop+metaphor%22 http://bumptop.com

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

15 Dessin à ruban (“Tape Drawing”)

16

17

18

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

20 MD = main dominante (souvent, la main droite) MND = main non-dominante (souvent, la main gauche) Changements de mode implicites : MD fixe : ligne droite MD en mouvement : courbe –La distance entre les mains détermine le rayon de courbure Mains proches: grande variabilité MD MND MD Mains lointaines: variabilité diminuée

21 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 3D

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

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

24 Le Apple Newton (≈1993) http://oldcomputers.net/pics/newton-right.jpghttp://cache.gizmodo.com/assets/images/4/2 012/01/d0531a85c7fb57d39ebf0a88dd78778 a.jpg Vidéo: http://www.youtube.com/results?search_query=apple+newton+getting+startedhttp://www.youtube.com/results?search_query=apple+newton+getting+started

25 Pourquoi le Newton n’a pas été un succès ? 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

26 Le Palm Pilot (≈1997) 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? »

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

28 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 160x160 pixels!

29 Le Palm Pilot 1000

30 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 Buts principaux: fiabilité et facilité d’apprentissage

31 Le Graffiti

32 Exemple 4: Redesign de guichets bancaires par IDEO

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

34 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