Réussir son application e-commerce sur iPad

Réussir son application e-commerce sur iPad Le premier ouvrage de la collection JDN Premium rassemble tous les conseils ergonomiques nécessaires à la création d'une interface performante et décortique les applications existantes grâce à l'eyetracking. Extraits.

Premier guide de la collection JDN Premium, écrit par les experts de la société Miratech, "Réussir son application e-commerce sur iPad" rassemble tous les conseils ergonomiques nécessaires à la création d'une interface performante et décortique les applications existantes grâce à l'eyetracking.  Quelles sont les spécificités de la navigation et de l'achat sur tablette ? Quelles sont les mises en page qui fonctionnent ? Quelles sont les erreurs à ne pas commettre ?

 

Page d'accueil : l'exemple d'eBay

L'application d'eBay se distingue par la présence d'un logo en plein centre de la page. Les concepteurs ont fait le choix de mettre en avant une gamme de produit et de permettre à l'utilisateur d'accéder directement à la zone des achats.

 

ebay
Carte de chaleur de la page d'accueil de l'application d'eBay © JDN Premium

 La page épurée permet à l'utilisateur de se concentrer sur un produit et de ne pas être perdu. Attention tout de même à ne pas trop simplifier la page d'accueil au détriment de la visibilité du contenu. On doit pouvoir comprendre les principales possibilités qu'offre l'application dès le
premier regard.

 La prise en compte des préférences du client est aussi une des forces de cette application. En permettant à l'utilisateur de choisir sa catégorie de prédilection, par le menu central, on lui facilite sa navigation puisque des produits lui correspondant s'afficheront dès sa connexion.

 Le logo eBay, très design, est plébiscité par les utilisateurs et rapidement vu. C'est paradoxalement l'un des points faibles de cette application. En effet, vous n'avez pas besoin de mettre en avant le logo, au contraire d'un site Internet. La personne utilisant cette application l'a téléchargée et sait donc où elle se situe. Pas besoin de le lui rappeler avec un si gros visuel, vous perdez de la place et du temps d'attention de l'utilisateur.

 Le menu, élément central, est bien compris mais peu visible. L'utilisateur doit dérouler le menu pour avoir une idée de ce que contient l'application. De plus, l'iPad s'utilisant avec les doigts, le bouton du menu doit être plus gros.

 Les éléments secondaires (barre en haut), bien que ne focalisant pas l'attention, sont tout de même bien vus. Mais les termes utilisés ne sont pas tous compris ("parcourir", "récent"). Pensez à utiliser des symboles et des termes évocateurs.

 

Menu : l'exemple de La Redoute

L'application iPad de La Redoute propose un menu en pleine page. Ici pas de place pour un logo, un produit en promotion ou une information annexe. L'utilisateur est directement plongé dans la navigation de l'application.

 

laredoute
Trajet du regard des utilisateurs de l'application de La Redoute. © JDN Premium

 

 Quelle rigueur ! 12 images de la même dimension et harmonisées entre elles (coloris, police de caractère) indiquent les catégories de produits proposés par l'application. La structure de l'application est ainsi très explicite pour l'utilisateur qui la découvre. Le ton est donné, ainsi que l'ambiance générale qui règnera tout au long du parcours de l'utilisateur. Notons également que le contenu de chaque catégorie est expliqué par la photo qui l'accompagne.

 La seule image qui ne correspond pas à une catégorie se différencie par sa couleur sombre et l'absence de photo (zone "Toutes nos marques"). L'utilisateur comprend aisément que l'action qu'elle engendre est d'une nature différente des autres.

 Différencier un élément attirera forcément le regard de vos utilisateurs. Les concepteurs de l'application de La Redoute voulaient sans doute différencier le bouton "Toutes nos marques" mais pas forcément le mettre en avant par rapport aux autres. Or c'est de cette manière que les
participants ont ressenti cet accès.

 Le choix de remplir intégralement la page de boutons uniformisés entre eux a pour effet de diluer le regard et de rendre égales les différentes catégories.

 Cependant cela n'inclut pas les catégories "Literie" et "Meubles, déco, jardin" qui sont quasi invisibles pour l'utilisateur lors des premiers instants de son interaction avec la page. En effet, son regard est naturellement attiré par les photos représentant des visages. En ne proposant aucune hiérarchisation des informations de votre page d'accueil, l'utilisateur pourra passer à côté de certains contenus.

 De plus, tous les éléments dont a besoin un utilisateur à son arrivée sur l'application ne sont pas disponibles ici. Quid des fonctionnalités de l'application ? S'agit-il d'un simple catalogue ou d'un e-shop ? L'utilisateur est forcé à être dans une optique de recherche de produits sans avoir de vue d'ensemble de ce qu'offre l'application et de sa profondeur.

 

Page produit : l'exemple de Booking.com

Les pages produits de Booking.com, et des applications d'hôtellerie en général, sont très chargées car elles doivent contenir beaucoup d'informations (disponibilité, description de l'hôtel, visuels des
chambres...).

booking
Trajet du regard des utilisateurs sur une page produit de l'application de Booking.com © JDN Premium

 

 Malgré la grande quantité d'informations, la page reste claire pour le lecteur grâce à une bonne architecture et des séparations bien marquées. On repère très rapidement les éléments principaux, les photos et le nom de l'hôtel, avant de rentrer dans le contenu. Celui-ci ne rebute pas l'utilisateur grâce aux phrases courtes et aux liens pour avoir plus d'informations. Si vous avez beaucoup de contenu à afficher n'hésitez pas à mettre des résumés accrocheurs qui renvoient vers des pop-up et à utiliser les avantages du tactile comme le swipe.

 La cohérence des liens pop-up (forme, couleur, icône) est bien gardée tout au long de la page. L'utilisateur apprend rapidement et intuitivement leur fonctionnement. Ne changez surtout pas de logique au cours des pages ou même pire, au cours d'une même page.

 Le passage vers d'autres hôtels semblables à celui sélectionné est très rapide et contient un résumé complet et clair. On n'oblige pas l'utilisateur à retourner en arrière pour voir un autre produit. La comparaison entre les produits se fait facilement.

 Le tactile est un outil formidable pour faciliter les interactions, servez-vous en. Pour visualiser les photos, on aurait pu mettre une photo en grand avec des icônes qui montrent qu'un défilement est possible. L'utilisateur aurait pu faire défiler les photos en swipant plutôt que de cliquer sur les vignettes. Le swipe est tellement plus ludique !

 Les icônes en haut à droite ne sont pas toutes compréhensibles. Ainsi le symbole avec l'horloge (consultés récemment) ou celui avec les trois points reliés (partager) ne sont jamais compris par les utilisateurs. N'hésitez pas à accompagner vos icônes de texte pour plus de compréhension. Cela permet aussi d'agrandir les zones de clics.

 Enfin il n'y a aucun moyen de revenir directement à l'accueil ou de comprendre où on se situe dans le site. La perte de référence dans la navigation est la raison principale d'abandon des utilisateurs.

 

Se procurer le guide complet

Le guide complet peut être téléchargé au format PDF à partir du site du Journal du Net pour 49 euros (paiement sécurisé par Paypal ou carte bancaire). Doté de nombreux exemples et illustrations, il explique les secrets des leaders du marché: Amazon, eBay, Lacoste, La Redoute?

  • Quelles sont les spécificités de la navigation et de l'achat sur tablette ?
  • Comment faut-il adapter ses sites et ses applications pour coller au plus près des attentes des utilisateurs ?
  • Quelles sont les mises en page qui fonctionnent ?
  • Comment faire pour transformer le visiteur d'un site d?e-commerce en acheteur ?
  • Quelles sont les erreurs à ne surtout pas commettre ?
  •  

    Cliquez ici pour acheter la version complète du guide

    M commerce / IPad