Les parts de marchés des terminaux « autre que PC » augmentent, et il devient de plus en plus critique d’avoir un site bien adapté à chaque terminal.
Pour les tablettes, le problème est le suivant :
Il faut prendre en compte le fait que la tablette peut être tenue horizontalement et verticalement.
Si la tablette est en mode vertical, on a bien moins de pixels en largeur. Il faut donc un site qui s’affiche correctement, avec une petite largeur.
Si la tablette est tenue en mode paysage, on est pratiquement sur une largeur standard… Mais même là, ça se discute : la tablette est quand même un petit écran, et il n’est pas raisonnable d’avoir la même version du site, pour un ordinateur qui a un écran de plus en plus grand, et une tablette, qui a un écran compris entre 7 et 10 pouces.
Bon, mais au delà ces éléments, le problème majeur, c’est d’adapter l’ergonomie à la tablette.
Avez vous remarqué qu’avec une tablette, ou un smartphone d’ailleurs, on n’a pas de souris ?
On remplace le clic par le doigt, ça, c’est bon.
Mais par contre, on n’a rien pour remplacer le déplacement de la souris.
Donc, toutes les fonctions accessibles via ce déplacement ne fonctionnent plus.
Exemples : plus de menus déroulants qui s’ouvrent au survol de la souris, ni d’image qui change, ni de zoom automatique, …
Bref, un site bien fait pour un PC ne fonctionne plus sur ces environnements.
La solution ? Pas le choix, de mon point de vue : il faut une déclinaison spécifique du site.
Dans cette déclinaison, on va travailler l’adaptation du contenu à l’écran, et en plus, on va repenser la navigation, de manière à ce qu’elle soit agréable à utiliser depuis une tablette tactile.
Au niveau technique, on n’est pas obligé de tout refaire. Si la boutique est bien développée, avec en particulier une architecture MVC, cela permet d’adapter principalement la partie Vue, et moins les autres développements.
Alors, quelle est l’utilisabilité réelle de votre boutique en ligne sur une tablette ?
Il y a longtemps – j’ai beaucoup de cheveux blancs – j’ai travaillé sur un produit, WebSphere Every Place – produit qui a été placé, dans notre communauté, dans la « Never_Again_Liste » tellement sa mise en oeuvre était proche de la mise en oeuvre d’une usine à gaz toxiques!
Sérieusement, l’idée – géniale au demeurant – était de n’avoir qu’un site, avec une couche middleware qui effectuait à la volée, les adaptations aux terminaux qui y accédaient. Outre la mise à jour des bibliothèques « devices », jamais à jour, la nav, restait ce qu’elle était – que l’on tourne l’écran ou pas …
Ce que tu décris, la rotation de l’écran est justement un des trucs les plus fun que je connaisse, notamment donner au site un coté, dynamique (des nouvelles associées à la rotation, voire de l’interractivité.
Donc avoir un site par famille de devices (au moins au niveau V 😉 me parait un minimum ne serait ce que par rapport à la sacro sainte « User Expérience » une nav sur iPhone n’est pas une nav sur iPad et pas une nav sur Safari/MAC.
On revient, comme le disait récemment lors d’une matinée 01 eCommerce, Catherine Barba, à des basiques de « conception de parcours clients ».
Toutefois je pense que le must est justement d’utiliser les caractéristiques propres des tablettes et autres smartphones, et proposer aux « utilisateurs » des nouvelles expériences.
Et sinon, je suis pas fana des sites ou le mouvement de la souris déclenche des ouvertures plus ou moins controllées de pop up ou autres menus … le coté guirlande de noêl … bof
Quand j’ai pensé à ma première e-boutique, je pensais déjà aux fonctionnement sur tablettes numériques car je souhaitais pouvoir faire des démos à mes partenaires. Surtout pour ce soucis de passage de la souris sur un élément sans effectuer de clic.
Pour le menu, j’ai opté pour un « menu à la canal plus » comme je le disais dans mon brief. Des sous-catégories qui s’ouvrent au clic et décale le contenu pour éviter de les faire chevaucher et perdre en lisibilité.
J’espère que c’est réussi même si on a encore quelques bugs. 🙂
http://www.kathymom.fr pour voir le résultat.
Ciao.
Il est possible de faire/refaire son site avec un template dit « Responsive Design » comme le template Bootstrap de Twitter.
Une chose est sure suivant sa thématique, le nombre de visiteurs sur des terminaux autre qu’un PC/MAC peut augmenter de façon considérable très rapidement.
C’est simplement des adaptations nécessaires, mais on est pas obligé de supprimer toutes les techniques un peu sympa qui sont correctement interprétées par les navigateurs récents de tous types
Etant donné le nombre de personnes qui utilisent une tablette aujourd’hui, il est en effet très important d’avoir son site internet adapté à cet usage.