Dans un article précédent nous avons étudié les secteurs d'activité où l'iPad s'est rapidement implanté et les usages qu'il permet. Allons un peu plus loin aujourd'hui. Pour replacer le contexte, une étude de comScore de juin 2011 montrait que l'iPad représentait 89% du trafic mondial de données sur tablette. L'iPad est donc actuellement hégémonique sur ce marché et c'est lui qui définit les conventions d'interactions sur tablettes. Plus globalement, l'usage du PC recule : les ventes ont chuté de 3,2% au premier trimestre 2011 (article de tablette-tactile.net). Celui des tablettes lui explose : 1,45 millions de tablettes vendu en France en 2011, soit plus que les PC de salon ! (article les Echos). Certains, dont Tim Cook le dirigeant d'Apple, pensent que nous entrons dans l'ère post-pc dans laquelle les terminaux mobiles concentreront la majorité des interactions. Puisque cette révolution doit s'accompagner d'une expérience utilisateur de qualité, dans ce nouvel article nous vous donnons quelques conseils pour concevoir une application iPad conviviale. Nous abordons concrètement la dimension ergonomique de l'iPad et les particularités du tactile.
Ne pas réinventer la roue
Les applications interactives n'ont pas seulement investi le champ de la mobilité, elles ont également permis de simplifier leur usage en proposant une interaction plus directe avec l'utilisateur grace au tactile. Si tout est encore possible, car l'iPad en est encore à ses débuts, la règle n°1 à respecter est la simplicité : « Il ne faut pas aller trop loin et ne pas proposer quelque chose de trop compliqué, avertit Jean-Luc Gemo expert mobilité chez Forecomm. L'utilisation doit rester simple : feuilleter, faire glisser, cliquer… ». Jeff Raskin, expert interfaces pour Apple dans les années 70-80, expliquait quant à lui qu'une application informatique est réussie si son interface fonctionne comme l'utilisateur s'y attend, si son intuition lui permet de facilement l'utiliser (source : Intuitive equals familiar). Elle sera alors intuitive si ses éléments et son fonctionnement ressemblent à ce que connait déjà l'utilisateur, à ce qu'il a appris. « Intuitif » est donc pour lui synonyme de « familier ». Concevoir une interface iPad en réinventant fortement ses éléments constitutifs risque donc d'aboutir à une application moins intuitive : les utilisateurs auront plus de difficulté à la prendre en main, l'apprentissage en sera plus long et les erreurs plus fréquentes. Il ne faut donc pas réinventer la roue mais utiliser le même vocabulaire d'interaction qu'Apple définit dans ses standards pour l'iPad. Conventions qui se sont par ailleurs largement répandu sur les autres plateformes. Cela ne veut pas dire que l'originalité est interdite, mais celle-ci ne doit pas aller à contre-courant des habitudes des utilisateurs d'iPad (sauf si votre objectif est la perdition). On évitera par exemple d'inverser la place des fonctionnalités principales. Dailymotion a placé la barre de progression de la vidéo en bas de l'écran alors que sur l'application native iPad celle-ci est en haut et c'est la barre de réglage du volume qui est en bas (que Dailymotion a d'ailleurs supprimé).
Dailymotion a placé la barre de progression à l'opposé du standard iPad
Cette modification semble anodine, mais elle diminue la fluidité d'usage de l'application et n'apporte rien fonctionnellement. Même problème avec l'application iPhone de Spotify (lecture de musique) : le curseur de volume est cette fois présent mais la place des barres est inversée par rapport au lecteur de musique iPhone. À coup sûr, certains utilisateurs vont avancer dans la lecture du morceau alors qu'ils voulaient augmenter le volume (c'est du vécu). De plus Spotify a positionné le bouton « retour » en haut à droite de l'écran alors que le standard iPhone et iPad est de le placer à gauche. Autant de grains de sable qui viennent altérer l'expérience utilisateur.
Spotify sur iPhone a joué au jeu des inversions… pour être original ?
Une autre erreur à éviter est de réinventer les composants de base de l'interaction sur iPad. Vous pouvez voir ci-dessous que l'application Motion X GPS a fait preuve d'imagination en proposant sa propre interprétation du bouton ON/OFF de l'iPad.
Le bouton ON/OFF d'iPad a été dénaturé. Dans quel but ?
Au-delà d'inverser le positionnement habituel libellé/bouton, le composant est relooké à tel point qu'on n'identifie pas immédiatement son fonctionnement à l'inverse de celui de l'iPad : une lumière verte a été ajoutée pour signifier que l'option est activée. Sur le modèle standard cette information est directement visible sur le bouton lui même (couleur bleu). Cette interface est donc incohérente avec les autres applications iPad que l'utilisateur manipule et une fois de plus sans apport fonctionnel. Les concepteurs de cette application ont certainement voulu donner leur identité, leur look à cette application. C'est tout a fait naturel de vouloir se distinguer de la concurrence et sortir du lot, mais pas au détriment des utilisateurs. Il faut trouver le juste milieu. Flipboard pour iPad propose un bon équilibre. L'application a une identité graphique marquée, mais l'utilisateur retrouve ses repères sans difficulté.
L'application iPad Flipboard : un bon compromis entre identité graphique et respect des standards
Sur cet écran le bouton retour est positionné en haut à gauche avec sa forme habituelle, la recherche est accessible en haut à droite là où on l'attend, le curseur du bas qui permet de naviguer dans les pages rappelle celui du diaporama photo iPad, l'icône de rédaction en bas à droite est légèrement modifiée, mais prend la forme habituelle. En résumé, l'application Flipboard est majoritairement cohérente avec les standards iPad mais a créé un univers graphique identifiable.
Recommandations
- Respecter les habitudes de l'utilisateur pour faciliter l'apprentissage
- Réutiliser les conventions iPad pour les fonctionnalités que l'utilisateur rencontre souvent dans les applications
- Appliquer l'identité visuelle de l'application tout en permettant à l'utilisateur de reconnaître facilement les fonctionnalités
Une application iPad n'est pas un couteau-suisse
Une application doit proposer une fonctionnalité principale facilement identifiable. Si elle propose une profusion de services et d'options, elle ne ressortira pas sur l'App store et son but sera mal compris par les utilisateurs. Chaque application devrait pouvoir se résumer en quelques mots : Shazam permet de reconnaitre la musique, Kindle permet de lire des livres, RATP Pure permet de faire un itinéraire… Cela n'empêche pas d'ajouter quelques fonctionnalités secondaires, mais elles ne doivent pas être au même niveau que la fonction principale. Certains éditeurs qui souhaitent proposer plusieurs services n'hésitent pas à multiplier les applications. SNCF propose par exemple SNCF Direct qui permet de suivre le trafic des trains en temps réel, Horaires & Résa pour acheter des billets ou encore Gare360 pour visiter virtuellement les gares. La SNCF propose encore 2 ou 3 applications supplémentaires sur iPhone. Si toutes ces fonctionnalités avaient intégrées une unique application, celle-ci aurait été plus lourde à installer et sa navigation plus complexe.
SNCF a réalisé une famille d'applications iPad et iPhone plutôt qu'une application unique trop dense.
Lors de la définition de l'application, il faut minimiser le nombre de fonctionnalités et supprimer tout ce qui n'est pas réellement utile pour accomplir la tâche principale de l'utilisateur. Rien n'empêchera par la suite d'enrichir l'application en fonction des retours des utilisateurs. Questionner les utilisateurs et faire des tests d'utilisabilité permet d'améliorer les applications.
Recommandations
- Viser une fonction principale par application iPad
- Préférer faire plusieurs applications plutôt qu'un fourre-tout numérique
- Organiser des tests utilisateur pour vérifier la pertinence des fonctionnalités et l'utilisabilité de l'interface
L'originalité à bon escient
L'iPad propose un nouveau mode d'interaction, il faut donc en profiter pour proposer de nouvelles interfaces. L'objectif ne doit pas simplement être de faire une application « cool ». L'application sera réussie si elle allie service utile et convivialité d'usage. Si elle ne propose qu'une interaction amusante mais sans rendre de service, elle sera rapidement oubliée par les utilisateurs. L'application SNCF Horaires/Résa propose par exemple une interaction ludique pour définir un itinéraire de train. L'utilisateur touche d'abord la ville de départ puis celle de l'arrivée. Les champs de saisie des villes sont ainsi remplis. L'utilisateur qui préfère interagir de manière plus classique pourra saisir le nom des villes au clavier dans la partie de gauche. Une fois les 2 villes renseignées, la carte se recentre sur le trajet sélectionné. L'application utilise donc l'apport du tactile pour éviter la saisie clavier qui reste fastidieuse. L'interaction n'est donc pas seulement « cool » mais aussi efficace. Acheter un billet de train devient (presque) un jeu.
Ludique et efficace l'application iPad de la SNCF permet de définir son itinéraire sans le clavier
Recommandation
- Utiliser le tactile comme un nouveau contexte de création qui permet de simplifier les interactions
- Éviter de tomber dans le piège de l'effet pour l'effet, les utilisateurs se lasseront vite
Une navigation simple
Pour la navigation sur iPad on n'appliquera pas les vieilles habitudes du web classique ou du logiciel. Même si l'écran est de taille confortable, l'iPad a hérité de l'iPhone sa logique de navigation simple. D'autre part l'interaction tactile change le rapport à la navigation : taille des éléments, feuilletage… La navigation par « glissement de carte » est un bon procédé qui aide au guidage. Les différents écrans successifs de l'application s'empilent comme des cartes et il est facile de revenir aux différents niveaux de navigation. Cette mise en forme permet aussi d'avoir une bonne vision du parcours fait. Twitter pour iPad propose un bon exemple de cette navigation :
Avec l'application iPad Twitter, les différents niveaux de profondeur de la navigation sont toujours visible à gauche et sont directement touchables.
L'animation va aider à accompagner cette navigation : l'écrans se déplace de droite à gauche pour remplacer l'écran courant. On évitera de montrer trop de niveaux de navigation à la fois. En général un seul niveau est suffisant, puis l'utilisateur « creusera » progressivement dans le contenu. L'application Zinio a la bonne idée de mixer dans le haut de l'écran standard iPad avec la flèche de retour en haut à gauche et le fil d'Ariane du web classique qui permet d'accéder directement aux niveaux intermédiaires. C'est notamment utile quand l'application ne se prête pas à l'empilement de cartes.
Zinio sur iPad propose une navigation simple qui respecte à la fois le standard Apple et un classique du web
À l'inverse, CNBC RT présente un contenu d'écran et une navigation trop dense. Le menu de niveau 2 est constitué de panel agrandissables et scrollable. De plus, la barre du bas « breaking news » et celle des valeurs boursières en dessous sont animées et ajoutent à la confusion de l'écran. Ici, on a voulu densifier le contenu de l'écran, une mauvaise pratique héritée du Web.
Une interface trop dense et animée
Recommandation
- Ne pas calquer les habitudes de conception Web sur l'iPad. C'est un nouvel environnement avec de nouveaux codes
- Proposer une navigation simple et fluide
- Accompagner les changements d'écrans avec des animations qui permettent de comprendre la navigation
- Comme pour toute interface, éviter les animations en boucle à l'écran, elles perturbent la lecture
Le tactile : atouts et contraintes
L'utilisation tactile de l'iPad permet de supprimer l'intermédiaire de la souris et (en partie) du clavier pour interagir directement avec l'interface. La distance entre l'interface est l'utilisateur est réduite. L'avantage de cette interaction directe est la simplicité et l'intuitivité : les manipulations de l'interface rappellent celles du monde physique (tourner des pages, déplacer des éléments au doigt, enfoncé des boutons…). Différentes gestuelles existent pour interagir avec l'iPad, elles sont parfois complexes. Pour faciliter l'apprentissage et l'utilisation de l'application il est préférable d'utiliser les gestuelles simples du tactile.
Gestuelles simples sur iPad
Des gestuelles plus avancées mettant en œuvre des mouvements complexes ou l'usage de 3 à 5 doigts peuvent être utilisés pour des fonctions secondaires qui ne sont pas essentielles à l'usage de l'application. Certaines applications ayant des fonctionnalités très riches, comme par exemple la peinture sur iPad, peuvent nécessiter une gestuelle avancée, mais il faudra alors accompagner l'utilisateur avec des messages lui expliquant comment manipuler l'interface. L'application de dessin SketchBook le fait très bien : quand on lance pour la première fois l'application, une douzaine de pages expliquent à l'utilisateur comment manipuler l'interface pour dessiner.
Explication de la gestuelle sur l'application iPad SketchBook
Il est d'autant plus important d'expliquer à l'utilisateur comment fonctionne l'application qu'il n'y a pas de survol en tactile. Quand en web classique une petite bulle permet de savoir à quoi sert tel ou tel composant, pour l'iPad c'est le guidage directement sur l'interface qui permet d'expliquer son fonctionnement. Les éléments de l'interface doivent donc être facilement identifiés comme « touchables » : n'hésitez pas à démarquer visuellement ce qui est interactif du reste. Pour être facilement touchés les composants de l'interface doivent aussi être de taille suffisante et être positionnés à des emplacements accessibles sur l'interface. Sur iPad 1 et 2 il est préconisé d'avoir des éléments touchables non-contigus au minimum de 25 pixels (5mm) de hauteur par 38 pixels (7,6mm) de largeur. Entre ces éléments il sera nécessaire de laisser un espace d'au moins 10 pixels (2mm). Si les éléments sont contigus (comme une liste), la hauteur minimale passe à 42 pixels (8,4mm). On utilisera des dimensions plus importantes pour les zones fréquemment utilisées et les actions principales.
iTunes sur iPad : la hauteur des zones contiguës ou non est suffisante pour la manipulation tactile
À l'inverse, les actions engageantes, comme par exemple la validation d'un formulaire de virement bancaire, doivent être présentées sur des plus petits éléments (liens, petits boutons). Il serait en effet mal venu qu'une fausse manipulation entraine une dépense non souhaitée. Pour les actions irréversibles, comme la suppression définitive d'un élément, il est important de renforcer le contrôle de l'utilisateur par un message de confirmation. Ainsi, si l'utilisateur appuie par mégarde sur une zone de l'écran, ce qui arrive souvent en tactile, il aura toujours la possibilité d'annuler son geste.
L'application Photos d'iPad demande à l'utilisateur de confirmer son appui sur la corbeille : un bouton rouge « supprimer » apparaît.
Sur un écran tactile, les différentes zones de l'interface ne sont pas atteignables avec la même facilité. L'accessibilité des objets est à la fois relative à la taille de l'écran et à l'utilisation d'une ou deux mains. Comme le montre le schéma suivant, les éléments situés en bas de l'écran sont facilement atteignables alors que l'accès aux informations situées aux extrémités supérieures et notamment à gauche est plus contraignant.
Les zones facilement accessibles sur iPad
En tactile l'idéal est donc de placer les actions récurrentes ou principales dans la partie basse de l'écran. À l'inverse les actions occasionnelles ou engageantes seront plutôt à positionner dans la partie haute. La position des éléments a aussi un impact sur la fatigue qui n'est pas négligeable en tactile. On évitera d'obliger l'utilisateur à faire des mouvements longs de manière répété. D'autant plus que sur écran tactile la main de l'utilisateur masque toujours une partie de l'interface. En effet, pour aller appuyer sur la partie haute de l'écran l'utilisateur occulte une bonne partie de l'application. Il faut donc veiller à ce que les éléments tactiles soient disposés de telle sorte que les interactions tactiles puissent être effectuées sans nuire à la visibilité de l'écran. Comme on peut le voir avec l'exemple qui suit, l'application du Parisien.fr oblige l'utilisateur à interagir en haut de l'écran ce qui est plus fastidieux et masque l'interface. L'Expansion.com propose une navigation basse plus aisément manipulable et avec un masquage réduit.
Lors de la conception pour iPad il est primordial de prendre en compte la fatigue engendrée par le mouvement du bras et l'effet de masquage de l'interface. D'autre part il ne faut pas oublier que l'utilisateur voudra utiliser l'application en position portait ou paysage. Il faut donc proposer l'agencement le plus optimal dans les deux orientations et profiter de ces 2 formats d'interface pour enrichir l'expérience utilisateur. Par exemple l'application Notes attribut toute la surface de l'écran à la rédaction en mode portrait et fait apparaître la liste des notes quand l'iPad est basculé en paysage. Le corps du texte reste identique dans les deux orientations pour permettre une bonne lisibilité. Si le texte filait sur toute la largeur de l'écran en mode paysage les lignes seraient trop longues pour offrir un confort de lecture convenable.
L'interface de l'iPad doit s'adapter à l'orientation de lecture
Recommandations
- Il n'y a pas de survol en tactile : veiller à rendre l'interface explicite et ne pas bloquer l'usage. Attention notamment sur le Web (menus au survol…)
- Proposer des gestuelles simples. Les gestuelles complexes peuvent être utilisées pour les fonctions annexes
- Expliquer à l'utilisateur comment manipuler l'interface
- Concevoir des objets de taille suffisante pour le tactile
- Le zoning est primordial : les erreurs de manipulations sont plus fréquentes avec la main qu'avec une souris
- Prendre en compte la fatigue qu'impliquent les mouvements du bras et de la main
- Enrichir l'expérience utilisateur en optimisant les modes portrait ET paysage
Conclusion
Comme cet article le montre, l'iPad révolutionne le marché de l'informatique en proposant une nouvelle interaction qui vient progressivement grignoter des part de marché à l'ordinateur domestique. S'adapter à ce nouvel outil ne s'arrête pas à transposer simplement les interfaces Web classique ou logicielle sur iPad. La simplicité d'interaction, les nouvelles conventions issues du mobile et la dimension tactile en font un tout nouveau contexte à apprivoiser. Note : Nous préparons une formation sur l'ergonomie pour les interfaces mobiles et tactiles. N'hésitez pas à laisser votre e-mail pour être tenu informé !