1 Il en existe une démonstration ici :

Transcription

1 PRINCIPE III Rester sur la page Flux Dans son livre, Flow : The Psychology of Optimal Experience, publié chez Harper Perennial, Mihaly Csikszentmihalyi décrit l état d expérience optimale comme le moment où les gens entrent dans un tel état de concentration qu il se crée un état de contrôle naturel. Les athlètes peuvent arriver à cet état qui peut aller jusqu à les rendre inconscients de ce qui les entoure, ainsi qu accéder au dépassement de soi. Le flux, par contre, peut être cassé par la moindre interruption ou la conscience soudaine de l environnement. Les utilisateurs de nos applications web n atteignent, malheureusement, jamais ce niveau de bonheur. En fait, une expérience classique sur le Web se résume à un rafraîchissement de la page à chaque action de l internaute. C est comme si au théâtre, le rideau tombait après chaque phrase d un dialogue. Ce rafraîchissement de page casse artificiellement l action ou vient briser le flux de l internaute. Aveuglement au changement Une cassure peut aussi avoir des conséquences visuelles. J ai récemment emmené mes enfants à l Exploratorium de San Francisco (un musée sur la science pour tous les âges). Une des expositions qui m a attiré était celle qui effectuait une démonstration d aveuglement au changement (change blindness 1 ). Un grand écran affichait l image d une devanture de magasin typique de celles qui existent dans la plupart des zones urbaines, avec son auvent, sa vitrine, sa porte, le tout dans un style bien particulier. Puis, soudainement, une nouvelle image de cette devanture a remplacé la précédente. Cette image comportait une légère différence. Malgré tous mes efforts, il m a été impossible de détecter le changement. Pourquoi? La transition s est effectuée avec un court délai (inférieur à un quart de seconde). Afficher l original, puis un blanc, puis la seconde image a rendu extrêmement difficile de voir les différences entre les deux. 1 Il en existe une démonstration ici :

2 Wikipedia décrit l aveuglement au changement (change blindness 1 ) ainsi : En perception visuelle, l aveuglement au changement est un phénomène qui conduit une personne qui regarde une scène visuelle a échouer dans la détection de grands changements de cette scène. Fort heureusement, l exposition proposait un bouton permettant de supprimer la phase de rafraîchissement de la page. Après avoir appuyé sur ce bouton, j ai pu constater que les changements étaient évidents. Inclure des rafraîchissements de page dans les applications web n a jamais été le souhait des concepteurs de sites, ils y étaient forcés par la technologie. Chaque action engendrait la requête d une nouvelle page, dont la cassure du rafraîchissement. Il était presque impossible de donner une expérience utilisateur fluide avec une perception visuelle en continu. Ce n est plus le cas aujourd hui. Nous aussi avons ce fameux bouton. Le déploiement de techno logies comme Ajax, Flash, entre autres, permet d effectuer des actions et d apporter les résultats tout en restant sur la même page, sans perturber le contexte ambiant. Le principe Rester sur la page correspond à l idée de créer une perception visuelle en continu destinée à améliorer le nirvana du flux. Il est essentiel de toujours se poser la question suivante : est-il possible de créer cette expérience dans le contexte, dans la page courante?. Il peut arriver que la réponse soit Non. Il faut aussi savoir que parfois passer à une autre page est plus logique que rester sur la même. Nous explorerons ces situations dans les chapitres qui suivent. Dans les Chapitres 5 à 8, nous verrons quatre manières de faire rester l internaute sur la page : Calques. Une mini page s affiche sur un calque au-dessus de la page évitant ainsi le changement de page. Incrustations. Les informations et les actions sont directement incrustées dans la page. Pages virtuelles. En dévoilant du contenu et en utilisant des animations, il est possible d agrandir l espace virtuel de la page. Processus par étapes. Au lieu de passer de page en page, il est possible de créer un processus dans la page elle-même. 1 Voir l article en anglais sur :

3 CHAPITRE 5 Calques Les calques ne sont en fait que des pop-up poids plume. Nous utilisons l expression poids plume pour les distinguer d un pop-up classique de navigateur. Un pop-up de navigateur s ouvre dans une nouvelle fenêtre (Figure 5.1). Les calques poids plume s affichent directement dans la page du navigateur (Figure 5.2). Les pop-up à l ancienne sont indésirables pour les raisons suivantes : Ils ouvrent une nouvelle fenêtre qui prend du temps à s ouvrir et consomme des ressources du système. Ils affichent souvent les contrôles de l interface du navigateur (une barre d adresse, par exemple). Pour des raisons de sécurité, Internet Explorer 7 affiche systématiquement cette barre d adresse dans les pop-up. Figure 5.1 Voici à quoi ressemblerait un pop-up avec un calendrier chez Orbitz si le site en utilisait.

4 118 Interfaces web interactives Grâce aux techniques Flash ou Ajax (HTML dynamique), une application web peut afficher un pop-up sur un calque poids plume dans la page même, ce qui présente un certain nombre d avantages : Les calques poids plume sont des objets légers dans la page. Ils sont faciles à créer et s affichent vite. L interface de ces calques est gérée par l application web et non par le navigateur. Le contrôle du style visuel est total. Le calque peut ainsi mieux s intégrer visuellement à l interface de l application (comparez les Figures 5.1 et 5.2). Figure 5.2 Orbitz utilise un calque DHTML pour le calendrier de sélection de dates. Il ne nécessite pas l ouverture d une autre fenêtre du navigateur ce qui lui permet de s afficher rapidement tout en s intégrant visuellement mieux à la page. Les calques poids plume peuvent servir à poser des questions, obtenir des réponses, présenter une fonctionnalité, montrer un indicateur de progression, donner une instruction ou dévoiler une information. Ils peuvent s activer directement grâce à un événement utilisateur (un clic, un passage de souris au-dessus d un objet) ou être appelés par l application web à diverses étapes de l accomplissement d une tâche. a astuce N utilisez jamais des fenêtres pop-up de navigateur. Elles sont difficiles à contrôler, plus lentes à s afficher et visuellement médiocres. Nous allons passer en revue trois catégories de calques : Calque avec dialogue, Calque avec détails et Calque de saisie.

5 Calques Chapitre Calque avec dialogue Calque avec dialogue remplace les pop-up à l ancienne. Netflix est un bon exemple de Calque avec dialogue tout simple. Dans la section previously viewed movies for sale (films à la vente précédemment consultés), l internaute peut cliquer sur un bouton Buy pour acheter un DVD. Puisque ce client est membre de Netflix, ses informations d expédition et de paiement sont déjà enregistrées dans la base de données. Le récapitulatif de sa commande est ainsi directement fourni sur un simple calque (Figure 5.3). Activation Cliquer sur le bouton Buy amorce le processus d achat. Traitement du calque Le dialogue de confirmation s affiche sur un calque poids plume. Ce dernier est modal (l interaction ne peut se produire que sur le calque), le reste de la page est obscurci. L internaute peut aussi annuler son achat. Figure 5.3 Netflix utilise un pop-up poids plume pour confirmer l achat d un DVD. Il se sert aussi d un Effet Table lumineuse pour indiquer qu il est modal Remarques Comme le calque est un pop-up léger, la confirmation s affiche plus rapidement et l appli cation en contrôle l aspect visuel et l emplacement.

6 120 Interfaces web interactives Effet table lumineuse L une des techniques que l on trouve ici est l Effet Table lumineuse. En photographie, une table lumineuse permet de rétro-éclairer une zone pour visionner des diapositives. Sur le Web, cette technique signifie mettre en valeur quelque chose en le rendant plus lumineux que son arrière-plan. En pratique cet effet s obtient en assombrissant l arrière-plan. Flickr utilise le modèle Effet Table lumineuse lorsque l on fait pivoter les images (Figure 5.4). Figure 5.4 Flickr utilise aussi l effet Table lumineuse pour attirer l attention sur le calque. L Effet Table lumineuse est utile lorsque le Calque avec dialogue contient une information importante que l internaute doit connaître. Le dialogue récapitulatif d achat de Netflix et le dialogue de Flickr sont d excellents candidats. Si le calque contient des informations optionnelles, l Effet Table lumineuse est trop exagéré et ne doit pas être utilisé. Modal ou non Un calque peut, ou non, être modal 1. Un calque modal demande une action à l internaute avant de pouvoir retourner dans l application. Dans l exemple Netflix (Figure 5.3) et celui de Flickr (Figure 5.4), le calque est modal : les internautes ne peuvent pas interagir avec la page principale avant d avoir effectué l action ou annulé le calque. Dans les deux cas, la fonction modale est renforcée par l Effet Table lumineuse. Obscurcir l arrière-plan indique à l internaute qu il n est pas possible d interagir avec cette partie de l interface. Un calque peut parfois ne pas être modal. On en trouve un exemple sur le site de Netflix. Lorsque l internaute ajoute un DVD à sa commande, une confirmation s affiche sous forme de calque (Figure 5.5). Même si l on a l impression que la seule façon de faire disparaître le calque consiste à cliquer sur Close (fermer) dans le coin supérieur droit, en fait, il suffit de cliquer n importe où en dehors de ce calque (sur la zone assombrie) pour le faire disparaître. Dans ce cas, l Effet Table lumineuse sert à attirer l attention de l internaute sur la confirmation et les recommandations. 1 Pour une explication sur ce sujet, voir l ouvrage de Jef Raskin The Humane Interface (2000), 100, 141.

7 Calques Chapitre Figure 5.5 Netflix utilise un calque non modal avec l Effet Table lumineuse pour attirer l attention sur la confirmation et les recommandations. L Effet Table lumineuse renforce la notion de mode séparé. Il n est donc pas obligatoire dans le cas de la plupart des calques non modaux. À titre d exemple, référez-vous à la Figure 5.2, le calendrier Orbitz. Ce calque ressemble plutôt à un widget intégré à la page, il ne serait donc pas très adéquat de l alourdir avec un Effet Table lumineuse. a astuce Utilisez l EFFET TABLE LUMINEUSE pour accentuer la fonction modale d un calque ou attirer l attention sur une information particulière. Rester dans le flux Les calques représentent un bon moyen de ne pas envoyer l internaute sur une autre page. Il peut ainsi rester dans le contexte initial. Toutefois, puisque ces calques s affichent rapidement et sont faciles à produire, il est parfois tentant de les utiliser sans modération ce qui à force risque de casser le flux dans lequel se trouve l internaute. Anti-modèle : boîtes idiotes Alan Cooper énonce un principe simple : N arrêtez pas le mouvement avec des idioties. 1 1 Cooper, Alan et Robert Reimann. About Face 2.0: The Essentials of Interaction Design (Wiley, 1995), 178.

8 122 Interfaces web interactives Il décrit que dans le contexte du flux, interrompre l utilisateur sans raison est une erreur : Une forme répandue mérite une attention particulière... Le fl ux est un état naturel et les gens passent dans ce mode sans qu il faille beaucoup les pousser. Ce passage demande toutefois un certain effort lorsque le fl ux est cassé. Une interruption, comme la sonnerie du téléphone le casse, tout comme un message d alerte. Certaines interruptions sont inévitables, ce qui n est pas le cas de la plupart d entre elles... Interrompre le fl ux d un utilisateur sans une bonne raison revient à stopper le mouvement avec des idioties et correspond à la forme la plus brutale de rupture. 1 C est clairement un anti-modèle qu il faut absolument éviter. Nous appelons ces catégories de calques des Boîtes idiotes. Un des exemples les plus flagrants de Boîte idiote est la manière dont certains calques de confirmation étaient utilisés sur Yahoo! Photos. Quand l internaute sélectionnait une série de photos pour les glisser-déposer dans un album, il ne recevait pas une confirmation, mais deux (Figure 5.6). Glisser-déposer On ajoute des photos à un album en glisser-déposer. Glisser au-dessus L album ne donne aucun signe comme quoi il constitue une cible valide. 1 Cooper, Alan et al. About Face 3: The Essentials of Interaction Design (Wiley, 2007), 228.

9 Calques Chapitre Calque ajouter une photo Un calque de confirmation demande à l internaute s il est vraiment sûr de vouloir déposer les photos sur l album. Calque Ajout terminé Le calque répète ce qui vient juste de se passer. Oui, les photos ont été ajoutées! Album après avoir déposé Notez qu il n y a aucune différence sur l album avant/ après le dépôt. Figure 5.6 Yahoo! Photos se sert d un calque superflu pour communiquer à l internaute ce qui se passe quand il dépose une photo dans un album. Le problème fondamental, ici, est le manque d invitation et de retour d informations au bon moment. Ce manque d information quand l internaute glisse une photo au-dessus de l album (pour signaler qu elle sera déposée dans l album Paris06 ) et après l avoir déposée est souvent rattrapé par un usage intensif de calques pop-up indiquant des évidences. Nous reparlerons ultérieurement plus en détail de ces concepts. a astuce Faites attention aux moments intéressants d une interaction, vous éviterez ainsi d utiliser une BOÎTE IDIOTE. Utiliser les alertes JavaScript Se servir des mécanismes d alerte intégrés au navigateur pour une confirmation est tentant. Ces boîtes d alerte présentent deux inconvénients. D abord, elles n ont jamais le même aspect d une plateforme à l autre. Sous Microsoft Windows, elles s affichent au centre de la fenêtre du navigateur, sur Mac elles glissent depuis la barre de titre. Selon l emplacement de l action, l internaute devra peut-être déplacer beaucoup plus loin sa souris pour refermer la boîte d alerte (Figure 5.7).