iPhone et la navigation Web en mobilité
Jeudi 10 janvier 2008 ? Par Fred Nassar
Déjà plus de 70 000 personnes en France ont craqué pour le bijou d'Apple, un succès attendu qui risque bien de bouleverser les usages du Web en mobilité. Chacun de nous connaît les caractéristiques de l'iPhone grâce au buzz médiatique dont il a profité depuis son annonce par Steve Jobs en janvier dernier. l'équipe d'Axance s'est intéressée à son usage en tant que terminal Web de poche.
Si l'iPhone propose des applications Web intégrées (Mail, YouTube, GoogleMaps etc.) aux interfaces dédiées, qu'en est-il de la navigation Web ? En quoi les innovations de l'appareil et de son navigateur imposent-elles certains usages ?
Un écran trop petit pour surfer confortablement
L'immense majorité des sites Web est conçue pour un affichage sur un écran relativement grand (au moins 13 pouces), avec une résolution élevée. L'écran de l'iPhone ne fait que 3,5 pouces, soit une surface d'affichage presque 5 fois moins importante qu'un écran 17 pouces. L'affichage d'une page en plein-écran est possible mais celle-ci est illisible, à moins de zoomer pour atteindre la partie qui nous intéresse.
C'est là que le Multi-Touch intervient. L'intérêt de cette technologie est de permettre la manipulation directe des éléments sur l'écran, sans passer par un périphérique externe. Il devient ainsi possible de zoomer dans la page en touchant l'écran de deux doigts, la manipulation étant pour le moins impressionnante. Une fois de plus, Apple démocratise un nouveau système de pointage comme elle l'avait fait il y a vingt ans avec la souris. (Bruce Tognazzini, du Nielsen Norman Group en parle dans cet article).
Toutefois, cette interface se prête davantage à la manipulation d'images : agrandir un détail ou recadrer une photo est un vrai plaisir sur l'iPhone. Sur une page riche en contenus textuels, cette manipulation s'avère laborieuse. Lire une ligne de texte oblige souvent l'utilisateur à "scroller" sur l'écran, en faisant glisser son doigt de droite à gauche : un comportement proche du fameux "scroll horizontal", banni par tous les concepteurs Web depuis des années. (Lire à ce sujet le Top 10 des erreurs de design Web par Jakob Nielsen en 2002, ces règles n'ont pas pris une ride.)
Apple a tenté de contourner ce désagrément par l'ajout d'une fonction "Double Tap" : l'utilisateur pointe deux fois de suite sur une zone (comme une double-clic) et le logiciel recadre automatiquement la page sur la partie souhaitée. Malheureusement, cette possibilité n'est pas toujours très précise et ne fonctionne que sur les sites qui respectent strictement les standards W3C (XHTML, CSS). De plus son utilisation reste assez hasardeuse : impossible pour l'utilisateur de prédire la zone qui sera agrandie.
La taille de l'écran représente donc un frein à l'utilisation confortable de l'iPhone en tant que terminal Web. Certes les pages s'affichent comme sur un ordinateur de bureau, mais la lecture nécessite l'utilisation de fonctionnalités nouvelles.
L'absence de multi-fenêtrage
Nous le constatons pendant nos tests, les utilisateurs sont habitués à ouvrir plusieurs pages simultanément, à en diminuer certaines pour les consulter ultérieurement, ou seulement pour les mettre de côté. Les plus experts utilisent aussi les onglets pour consulter plusieurs pages dans une seule fenêtre.
Sur l'iPhone, pas de multi-fenêtrage, ni d'onglets : tout se passe sur l'écran principal. Il est pourtant possible d'ouvrir plusieurs fenêtres grâce à un système qui ressemble à un carrousel. Seulement pour retrouver une page, il faut les faire toutes défiler, un comportement linéaire en rupture avec le principe des multi-fenêtres propres à nos OS de bureaux.
De même, l'ouverture d'une pop-up occasionne la fermeture automatique de la fenêtre en cours de consultation et l'ouverture d'une nouvelle fenêtre dans le carrousel. L'animation ? pourtant explicite ? se révèle assez gênante, et oblige l'utilisateur à pointer une icône pour retrouver sa page d'origine.
Système de pointage au doigt : les liens, trop petits
Même la navigation par liens est remise en question sur l'iPhone. Impossible de "cliquer" sur un lien si celui-ci n'est pas correctement isolé. Comme nous le rappelle cette page du site d'Apple dédiée aux développeurs, le fait de pointer avec son doigt diffère de l'usage de la souris : les boutons bien délimités qui occupent plus de place à l'écran sont préférables.
Ce détail bouleverse certaines règles de la conception Web. D'ordinaire, le bouton était privilégié pour des actions impliquantes pour l'utilisateur, alors que le simple lien amenait l'internaute sur une nouvelle page. Sur l'iPhone, le bouton semble avoir gagné la bataille, même si des alternatives existent pour permettre un pointage plus rapide (notamment l'affichage de liens séparés, présentés sous forme de liste).
Concernant les boutons, l'esthétique d'Apple impose une forme bien particulière aux boutons de navigation. Ceux-ci prennent la forme de flèches orientées à droite ou à gauche de l'écran, en fonction de l'action attendue (page suivante ou précédente).
Les interactions avec les formulaires
On peut ici saluer le travail d'Apple. Les éléments de formulaires sont facilement accessibles et l'affichage s'adapte en fonction de l'élément manipulé. Si on pointe une liste déroulante, les options apparaissent sous forme d'un rouleau que l'on peut scroller. Aussi, quand on sélectionne un champ de saisie, le clavier apparaît automatiquement.
Malgré ces efforts, certains sites posent problèmes, notamment ceux qui proposent des formulaires complexes : l'agenda pour les réservations d'hôtels ou le formulaire sécurisé pour accéder à ses comptes bancaires sont conçus pour un affichage sur grand écran. Lorsqu'une action de l'utilisateur a une incidence à l'autre bout de la page, on passe à côté du fait du niveau de zoom.
Bien que la sélection soit facilitée, la validation des formulaires se révèle malaisée. Par exemple, lorsque l'utilisateur en a fini avec le clavier, il doit pointer le bouton "Terminer" pour le voir disparaître et naviguer à nouveau sur la page. Il faut ensuite pointer le bouton de validation pour soumettre réellement le formulaire : une opération en deux étapes, qui ralentit considérablement l'utilisateur.
Le clavier virtuel : moins efficace qu'un clavier réel mais au potentiel intéressant
Une étude de notre partenaire américain UserCentric (membre de l'UX Alliance) démontre que le clavier de l'iPhone se révèle moins efficace qu'un clavier physique. Les utilisateurs soumis aux tests font davantage de fautes de frappe, et sont sensiblement plus lents avec un iPhone qu'avec un PDA classique. Nos homologues américains concluent ainsi que l'iPhone ne convient pas pour un usage intensif du clavier.
Le clavier virtuel a pourtant un fort potentiel pour s'adapter au contexte d'usage. Par exemple, lorsque l'on souhaite accéder à un site via la barre d'adresse URL du navigateur, le clavier propose un raccourci ".com" qui n'apparaît pas à l'écriture d'un e-mail ou d'un SMS. Aussi le bouton de validation change en fonction de la situation : "Accéder" pour une URL, il se transforme en "Google" pour lancer une recherche.
Afin de faciliter l'utilisation du clavier, Apple a trouvé une astuce : un appui sur une touche donne lieu a une confirmation par le grossissement du bouton qui se répète juste au-dessus du pouce. Ainsi, l'utilisateur peut suivre sa frappe et corriger plus rapidement ses erreurs. L'autre trouvaille est l'effet loupe qui intervient lorsque l'on souhaite corriger une faute au sein d'un texte. La loupe s'affiche et suit les mouvements du doigt pour placer plus précisément le curseur.
Reste que l'utilisateur (expert ou non) sera toujours plus à l'aise avec un vrai clavier, qui permet une saisie plus intuitive. Les dactylos ont l'habitude de se repérer sur le clavier grâce aux reliefs et à la proximité des touches. Ainsi, ils peuvent travailler les yeux fermés? Un exercice impraticable sur l'iPhone.
L'iPhone ouvre la voie à de nouveaux usages de l'Internet en situation de mobilité. Le lancement de nombreux sites dédiés à l'appareil prouve qu'il est nécessaire d'adapter l'information et son traitement pour faciliter sa consultation. D'une certaine manière, Apple impose de nouvelles règles de conception auxquelles l'utilisateur devra lui aussi s'adapter.
A lire ailleurs :
? Ars Technica (en anglais) ? iPhone interface analysis from an actual usability expert. Gasp!
? Ask Tog (en anglais) ? The iPhone User Experience: A First Look
? Formats Ouverts ? Le Web mobile : le retour des sites « optimisés pour » ?
