Karl Parfums : une approche mobile intéressante mais non aboutie

Suite à l'article du JDN : "Le site Responsive Design du mois : KarlParfums", au sein de Spade, nous avons également analysé le site KarlParfums. On l’aime ou on ne l’aime pas.

Karl Lagerfeld ne laisse pas indifférent. Nous on l’adore. La sortie d’une fragrance à son nom est donc un évènement qui mérite un site web à la hauteur du persona et de son univers visuel. Comme de nombreux sites présentant des produits d’enseignes prestigieuses, l’accent est mis avant tout sur un packaging impeccable : visuels de qualité, animations, effets de transition, ... La valeur de la marque passe brillamment. L’agence a fait le choix judicieux d’un « one pager » (l’ensemble des contenus sont listés verticalement sur une seule page). Une approche désormais à mettre au rang des classiques des sites de présentation rapide avec les textes qui apparaissent progressivement, selon le défilement et le fond de la page qui s’animent au rythme de la souris. 

On a aimé

L’approche « Mobile First » de l’agence Emakina France.
On sent l’intention de départ résolument orientée « consultation mobile » avant tout. Du côté des designers web, c’est une philosophie à part entière : orienter la conception du support web dans une approche « d’abord mobile » requiert aujourd’hui encore une ouverture d’esprit de la part des équipes marketing et décisionnaires. 

• La surface de visualisation réduite (l’écran d’un smartphone) exige de porter le focus sur les éléments de contenus prioritaires. Là où une approche classique a parfois le désavantage de s’enliser dans des débats stériles sur «tout» ce qui doit être communiqué. C’est une révolution dans le processus de conception d’un site web, ce qui engendre souvent peur et frilosité. On le voit ici, peu de «blabla inutile», des phrases courtes, des zones de contenus très dégagées les unes des autres. Efficace.
• Elle permet généralement aussi de limiter au minimum le bruit occasionné par des éléments qui dans une approche classique peuvent rapidement s’avérer encombrants. Un exemple clair : le menu a été masqué et n’apparaît qu’au clic sur une icône «hamburger» (3 barres horizontales) devenue univoque pour les habitués de smartphones et autres tablettes.

On a testé

L’intention ne nous semble malheureusement pas totalement aboutie.
Une approche « MobileFirst » n’est pas seulement «philosophique», elle implique également une conception technique adaptée. Et c’est là que le bât blesse.  On pose une hypothèse : le site a été optimisé pour une vue tablette horizontale. On s’étonne au passage du message invitant le propriétaire de tablette de la tourner en mode paysage, la navigation est tout simplement impossible en mode vertical. On n’a jamais été fan de l’approche « please do that to enjoy the experience », il nous rappelle une époque pas si lointaine où le Flash était roi au pays du e-marketing.
Est-ce vraiment à l’utilisateur de s’adapter au contexte et pas l’application? Peut-on dans ce cas parler d’une approche « responsive » du design? Démonstration en 3 points :

1. Une «gesture» alambiquée

Bien que l’interface semble avoir été d’abord pensée pour le mobile, on est rapidement frustré par le mode de défilement des informations sur son téléphone. En vue PC, les comportements ont été enrichi en intégrant un système de «drag & drop»  (cliquer puis déplacer la souris puis relâcher), en plus du scroll et du clic. En mode mobile, le drag & drop a été remplacé par deux boutons qui, quand on les touche déplacent la page au bon endroit. Par contre les éléments qui permettent de faire défiler l’information horizontalement (les « slideshows ») ne sont activables en mobile qu’en touchant de petites flèches à gauche et à droite. Un peu paradoxal quand on connait les effets de glissé sur les mobiles. La surface touchable de ces contrôles est en dessous du seuil recommandé ce qui rend leur utilisation difficile . Si ce site web avait été conçu complètement en mode « Mobile First », on aurait pu espérer que le 1er comportement serait le « swipe » (geste de la main comme pour tourner une page). Sur tablette, le drag & drop a été bizarrement maintenu permettant de swiper de gauche à droite. Pourquoi avoir développé une navigation alambiquée sur PC (le drag & drop) alors que cette énergie aurait pu être consacrée à offrir une expérience utilisateur meilleure en mobile ? L’expérience utilisateur aurait-elle été avant tout pensée pour la version tablette «paysage» ? Ce qui expliquerait la version minimaliste du comportement sur smartphone et les problèmes d’inconfort d’un drag & drop avec une souris. Le dernier point à souligner est la terminologie utilisée dans le menu de navigation qui n’est pas toujours explicite. A plusieurs endroits on se demande si c’est bien par tel élément que l’on va retrouver un des éléments découverts en scrollant sur la page.

2. La vidéo, un objet difficilement «mobilisable»

Les différents tests effectués sur le site Karl Parfums concernant la vidéo nous ont montré une fois de plus que ce média reste un casse-tête en mode responsif !Sur iPhone iOS7, la vidéo ne s’est tout simplement pas lancée. Un grand espace noir en «fallback» qui bloque la zone de scroll ou de glissé: ce n’est pas très engageant. Sur HTC Android, la vidéo a fini par se lancer mais après un temps d’attente assez important (test effectué en Wifi, nous n’avons pas testé en 3 ou 4G).On peut évidemment se plaindre de la politique d’Apple de ne pas permettre la lecture de la vidéo directement dans la page HTML (il charge son propre lecteur QuickTime par dessus). Les concepteurs du site ont pourtant réagi de la bonne manière en rendant accessible la vidéo sur tablette via un bouton «Vidéo». Celui-ci a donc le double avantage d’offrir un comportement unique pour les utilisateurs de smartphones tout OS confondus et de proposer à l’utilisateur de charger la vidéo seulement à la demande (en 3G, cela peut faire mal si on garde le même fichier que sur PC). Pourquoi dès lors n’avoir pas étendu ce comportement au smartphone ?

C’est sur PC au final que l’expérience est la plus réussie. Au simple scroll dans la zone d’affichage de la vidéo, celle-ci se lance automatiquement en plein écran, l’effet visuel est très réussi et on profite pleinement de cette expérience multimédia.

3. Le nerf de la guerre, l’optimalisation

C’est généralement l’aspect du projet qui est un peu délaissé car il fait appel à des notions plus abstraites (ou moins perceptibles pour les décideurs). Il est pourtant facilement mesurable par une quantité d’outils disponibles en ligne et, en mode mobile, c’est un paramètre hyper important (la 3G dans le métro versus une bonne connexion LAN au bureau).Un test de rapidité nous montre les faiblesses de l’optimalisation en mobile : des images trop lourdes (possibilité de réduire de 51 % le poids des images sans perte de qualité), des fichiers de codes non compressés. Une autre approche serait d’appliquer le chargement conditionnel des images (si on surfe dans tel contexte on affiche tel format d’image mieux adapté), une approche parfois pénible à mettre en place car on ne dispose pas toujours d’outils appropriés permettant de gérer facilement la multiplication des formats d’images, vidéos, etc.
Dans le cas d’un one pager, le lazy loading nous paraît particulièrement pertinent. Ce système permet de ne charger les contenus qu’au moment de leur apparition sur l’écran lors du défilement. Il permettrait ici d’afficher instantanément une image d’accueil et le temps d’attente imposé sur les différents devices « disparaitrait ». Pas de scroll, pas de chargement. On regrette l’absence de cette approche d’optimalisation sur une page longue et chargée d’images et de vidéos.
Enfin les animations. Indéniablement c’est une couche supplémentaires à gérer dans l’optimalisation du site. Celles-ci ont été supprimées dans la consultation mobile, ce qui est une bonne chose. Sur les vues tablettes et PC, on a trouvé quelles avaient parfois un côté agaçant. Trouver le bon équilibre entre « expérience utilisateur améliorée» et «ralentissement de réactivité des actions » reste un challenge pour les designers de sites web. Notre avis est qu’il y en a peut-être un peu trop : le menu qui apparait/disparait en damier crée parfois un « overlap » désagréable avec le contenu couvert, au défilement on a parfois l’impression qu’il n’y a plus rien qui défile (blocage avec la vidéo) entrainant une hésitation inutile.

En conclusion

Au départ, on retrouve un matériel promotionnel classique: des supports de communication à la hauteur de l’image de marque luxueuse: une publicité vidéo, un shooting photo et une infographie irréprochable. A l’arrivée, compilés dans un site web conçu en « Responsive Web Design », les éléments sont adaptés (ou parfois pas) aux différentes expériences utilisateur. Comme dans de nombreux projets web, nous ressentons dans cet exemple les limites imposées par les priorités des différents intervenants. Nous ne jetons pas la pierre car la gestion de ces priorités au regard des bonnes pratiques reste complexe à l'âge du web mobile. La critique est toujours aisée et l’art difficile.
Il permet au final de souligner les difficultés actuelles de conception de site web : si je conçois pour une expérience mobile réussie, mon site web «répondra-t-il correctement» aux autres contextes ?
La multiplicité des contextes de consultation invite-t-elle les concepteurs à mettre en place des modes de navigation différents ou au contraire à les universaliser ?