Renaud JOLY

Le nombre moyen d’applications téléchargées par un utilisateur d'Ipad est de 20. On conçoit aisément que le surfeur ne va pas télécharger l’application de chaque site qu’il découvre. Personnellement, les sites qui insistent sur le téléchargement de l’application lorsque l’on arrive avec un Ipad c’est juste… gonflant. Comme les pop-ups « Inscrivez vous à ma newsletter ». Il est à mon avis beaucoup plus judicieux d’offrir un accueil confortable au visiteur de passage que d’essayer de lui passer la bague au doigt de force.

Dans cette optique, voici quelques réflexions afin de soigner l’usabilité de votre site sous Ipad.

Pas de Flash. Pas de plug-in

On en a assez parlé lors du lancement de l’Ipad. Pas de flash ou de plug-in exotique afin d’éviter le gros carré vide au milieu du site. Et croyez-moi, ce n’est pas une grosse perte.

Une vitesse de connexion plus lente

Ne pas oublier que le visiteur arrive avec une connexion limitée. C’est majoritairement du WiFi (beaucoup surfent à domicile) mais ce peut être de la 3G. Plus un site est rapide plus il est confortable. Plus un site est confortable, plus il transforme. Virez tout ce que vous pensez être indispensable, et ne conservez que ce qu’il l’est pour votre visiteur.

Portrait ET paysage

Le truc avec l’Ipad c’est qu’on peut l’utiliser en étant debout, assis, allongé, sur son canapé, dans son jacuzzi, dans son lit, sur les toilettes... Le tenir à la main ou le poser sur un support. C’est d’ailleurs pour cela qu’on le préfère à l’ordinateur qui impose de rester scotché derrière un bureau. Votre site doit s’afficher en portrait et en paysage. Testez-le dans les deux sens.

La revanche du scrolling vertical

Oubliez tout ce que l’on vous raconte depuis 10 ans. Le scrolling vertical c’est génial… sur Ipad – et le scrolling horizontal aussi. C’est intuitif, c’est smooth, c’est facile. On peut remercier Apple d’avoir fait sauter ce verrou. Plus d'obligation de bourrer tout le contenu de la page dans le cadre initial. Le site d’Apple illustre d’ailleurs parfaitement ce propos.

Un montage fluide

Votre site Internet doit être utilisable à la fois sur l’écran de l’ordinateur fixe, du portable, et de la tablette tactile. La résolution de l’Ipad est actuellement de 1 024 × 768 pixels. On annonce déjà une version HD de 2048 x 1536 pixels – à l’état de rumeur pour l’instant mais cette évolution semble inévitable. Cela multiplie les combinaisons résolution d’écran / navigateur / OS. Pour plus de souplesse il est souvent recommandé d’utiliser un montage fluide, ou élastique plutot que fixe pour la mise en page.

Keep it simple

Roll over, layer complexes, listes déroulantes peuvent déjà êtres désagréables sur l’interface d’un ordinateur classique. Sur tablette c’est pire. Il faut être prudent avec ce type d’artifices. Cela peut générer des bugs sur les différentes combinaison hardware / software et beaucoup d’inconfort. Essayez donc de cliquer sur un layer ou de scroller une liste déroulante avec le pouce en tenant l’Ipad a deux mains.

Taille des polices

La taille des polices web ajustées pour l’écran d’ordinateur donne un texte de taille réduite pour la lecture sur Ipad. Il faut donc agrandir mais pas trop. En effet des polices plus grandes occupent rapidement l’espace - qui reste restreint - et la fonction zoom est standard. Il peut être utile d’imprimer des maquettes en taille réelle afin de se confronter au résultat.

Il va zoomer à chaque fois

L’habillage texte autour de l’image perturbe. Pour l’alignement, mon impression est que ca passe mieux texte justifié / image centrée. Pour voir vos images, pour lire vos textes, votre utilisateur va zoomer. Il va double-cliquer sur la zone qu’il veut agrandir et l’Ipad va élargir la colonne touchée à tout l’écran. Pensez-y lors de la mise en page et testez abondamment cette fonctionnalité. Notez au passage que votre visiteur ne verra pas les bannières publicitaires qui disparaissent du champ.


Vue avec mon Ipad lorsque je zoome sur Clubic

La souris à l’index

L’index offre une surface de contact plus importante que la souris. De surcroit le fait d’avancer la main vers l’écran afin de le toucher masque partiellement la zone visée. Cela génère systématiquement des erreurs lorsque des zones cliquables sont proches les unes des autres. Et une erreur de clic lance le téléchargement d’une page en Wifi / 3G – donc lentement – ce qui est vite agaçant. Se méfier également des tailles des champs dans les formulaires, il faut les toucher avant la saisie. Résumons : ni trop petits, ni trop proches.


L'interface Google pour Ipad

La vie sans clavier

Tout ce qui peut être fait avec ou sans clavier doit être fait sans. Le clavier n’est pas le point fort des tablettes, ni de l’internaute – testez donc votre vitesse de frappe. Premiers concernés par la saisie de texte, les moteurs de recherche web contournent cette difficulté de plusieurs manières : auto complétion, suggestion via des liens contextuels, recherche à la voix. L’assistance fluidifie et oriente l’action.

La couleur et le contraste

Ecran brillant, fortement contrasté, couleurs vives, attention aux rendus trop agressifs pour les yeux. Il faut doser la lumière avec parcimonie, savoir éviter le traditionnel blanc sur noir qui claque et fatigue rapidement le lecteur. Ajouter imperceptiblement de la texture ou du bruit dans les couleurs de fond apaise. A tester également le rendu en extérieur, mais pas de miracle à attendre en plein soleil.

Tester les fonctionnalités critiques

La force d’une chaine dépend de celle de son maillon le plus faible. Il vous faut tester les zones critiques de votre site Internet : moteur de recherche, checkout, panier, ouverture de compte, sélection de produit, formulaire, etc. Et les tester en condition challengeante. Ne partez pas du principe que votre utilisateur sera assis face a un Ipad vertical incliné de manière optimale et qu’il aura à disposition ses deux mains, des jumelles et une tentacule pour réussir à passer votre checkout. Allongez-vous sur le dos avec votre Ipad à bout de bras et débrouillez vous !

Concilier des formants aussi différents, c’est possible ?

Probablement pas. C’est pour cela qu’il faut le faire. Le succès des interfaces touch – Iphone, Android, Ipad, Ipod - est réel : on estime que presque ¼ des internautes US utiliseront une tablette en 2012. L’Ipad restera probablement un produit haut de gamme mais la concurrence abaisse les prix et les usages se démocratisent. Des usages qui se propagent en dehors de la tablette loisirs : usages professionnels, lieux publics, incrustation dans le mobilier. L’interface touch influence également les ordinateurs comme le montre Mac OS X Lion. Il existe une logique de convergence. L’interface touch est multiple, contraignante, exigeante. Mais au final, c’est ce niveau d’exigence qui la hausse au dessus de l'ordinateur et garantit son succès auprès de l’utilisateur final.

Plus d’infos
How Ipad affects the way we design websites
Ipad : a savior for webdesign too
Designing for Ipad, reality check
How the tablets are driving new web design trends
Fixed vs fluid vs elastic layout : What's the right one for you ?
Les utilisateurs de tablettes
Les ventes d'Ipad
Mon Scoop.it sur l'Internet mobile

Quelques sites à visiter avec votre Ipad
http://mocoloco.com/
http://www.spin.com/
http://www.apple.com/fr/ipad/