Que faire pour que le Responsive Design ne fasse pas chuter vos conversions.

responsive-design-conversion

Comme nous en avions déjà parlé dans notre article « augmenter vos conversions sur mobile »généralement, le mobile convertit moins que le desktop.

Or, aujourd’hui, de plus en plus de sites ont un design responsive. C’est une bonne chose, mais le problème de conversion vient du fait que la réflexion est souvent « desktop-first », puis adaptée au mobile. Les usages sont rarement adaptés aux interactions tactiles, aux usages mobile, et cela va provoquer une frustration chez l’utilisateur.

Alors que faire ?

Dans un premier temps, il faut comprendre ce que vient faire un utilisateur sur votre site mobile, et pourquoi il utilise son mobile.

Par exemple, si j’accède à un site d’un restaurant depuis mon mobile, il y a de fortes chances que je cherche en priorité le numéro de téléphone ou l’adresse, plutôt que la biographie du chef, ou encore le menu détaillé à télécharger en pdf…ces derniers étant plutôt des usages desktop, réalisés lors de la comparaison du choix d’un restaurant.

Voici des éléments à prendre en compte pour optimiser votre site responsive

1. Optimisez la taille des images

Les images vont souvent être gérées par le responsive mais parfois le rendu ne sera pas adéquat, l’image peut même être déformée.

Pour qu’elles fassent parties intégrantes du design mobile leur affichage doit être pensé spécifique pour un affichage mobile, et prendre en compte les besoins de lisibilité. Il sera pertinent de réduire fortement leur taille au profil du texte. Dans l’exemple ci dessous le slider est compressé suite à l’affichage responsive.

audilo-arquen-mbile

 

Nous voyons la différence avec le desktop :

audilo-desktop-arquen

La navigation est également perturbée avec tous les éléments de menu caché dans un « burger ».
La question à se poser ici est donc, par exemple : Est-ce que le premier élément à pousser sur mobile est bien cette offre promotionnelle ?

Voyons une bonne pratique :

Sur le site desktop les deux images prennent de la place et sont les éléments dominants de la page. Le texte est affiché en blanc sur le côté droit.

hermès-desktop-arquen

 

Sur mobile, les images sont toujours visibles mais ne représente plus qu’un tiers de la page, le texte est alors placé au dessus en noir sur fond blanc.

hermès-mobile-arquen

L’usage à une navigation mobile a donc été particulièrement réfléchi, l’utilisateur n’en sera que plus satisfait !

2.  Simplifier la navigation

Autre exemple avec Nike. Il y a un vrai travail sur la refonte de la navigation sur mobile.

Sur la version desktop nous avons une navigation supérieure avec les autres marques de Nike (Jordan, Hurley, Converse), la connexion à son compte et choix de la langue. Le menu de navigation est ouvert et propose 6 catégories avec une barre recherche.

nike-desktop-ux-arquen

Sur la version mobile on voit que de nombreux éléments ont été supprimés, et que la navigation mobile garde les éléments essentiels :

  • Recherche
  • Panier
  • Menu, qui est placé en haut à droite pour un accès facile avec le pouce

L’image est retravaillée pour un affichage optimal, et le bouton call to action « Voir la collection » plus visible sur fond blanc.

nike-mobile-ux-arquen

Autre exemple intéressant: Welcome office.

Ici sur la version desktop nous pouvons voir un affichage classique avec une large barre de navigation qui contient toutes les catégories.

welcome-office-desktop

La version mobile met en avant des CTA clairs et adaptés au mobile :

  • Demandez notre catalogue
  • Appeler nous de 9h à 18h (Pratique pour un usage mobile)
  • Dommage que « Fourniture de bureau et mobilier de bureau » n’ai pas d’utilité.

Nous voyons en bas de page des catégories de produits couramment utilisées accessibles simplement et rapidement à l’aide de pictogrammes.
La partie Navigation et le Slider ont été retirés.

welcome-office-mobile

 

Pmu.fr effectue également un travail d’adaptation au mobile efficace avec des clés d’entrées très visuelles identifiable instantanément :

pmu.fr-mobile

La version desktop conserve un affichage plus classique, et pour le coup, moins clair :

pmu.fr-desktop

Pensez à vos utilisateurs et aux usages !

En résumé, oui désormais le trafic mobile dépasse le trafic desktop / tablette, il faut donc :

  • Se concentrer sur le mobile, mais pas au détriment de l’expérience desktop.
    • Parfois des refontes de sites récentes prennent une approche mobile first et dégradent l’usage desktop en ne faisant qu’un simple adaption.
  • Le mobile et le desktop vont avoir des usages différents il faut donc, dans la mesure du possible, adapter les différents affichages du site et limiter les « transpositions » responsive en réorganisant les différents éléments.
  • Il peut être pertinent de créer de nouveaux blocs de contenu qui seront utilisé uniquement sur mobile par exemple : Cela s’appel de Design Adaptive.
  • Toujours réfléchir aux usages mobile : L’utilisateur a moins de temps, une connexion potentiellement moins rapide, et sera souvent en situation de mobilité (transports en commun, etc.).

N’hésitez pas à consulter nos autres articles ou à nous contacter 🙂