Wireframe E-commerce mobile : l’infographie pratique

Wireframe E-commerce mobile : l’infographie pratique

Si vous vous intéressez au e-commerce mobile il y a de fortes chances que vous vous demandiez comment optimiser votre site e-commerce mobile. Le e-commerce à de nombreux défis mais l’ergonomie des sites mobile est certainement un des plus importants.

En effet, le choix entre responsive web design, application, ou site dédié fait rage. Dans le cas où vous étudiez un site dédié au mobile, il est nécessaire de créer des wireframes e-commerce mobile pour définir précisément le parcours des utilisateurs sur votre site. Mais au fait, c’est quoi exactement des Wireframe E-commerce mobile ?

Définition des Wireframe E-commerce mobile

wireframe mobile Les wireframes, ou gabarits, ou mockups (ces trois mots sont synonymes, en français on utilise souvent le terme « maquettes ») sont des schémas de votre site. Ce sont des maquettes d’interfaces qui vont définir quels sont les éléments à faire paraître sur une page et leur comportement.

Les wireframes sont une étape indispensable avant l’étape « graphiste ».  En effet, un wireframe de M-commerce va permettre de modéliser le comportement attendu des visiteurs sur le site. L’avantage du wireframe étant qu’il reste facilement modifiable. Il est facile de faire des modifications et d’itérer pour obtenir la « bonne » version.

 

Bien modéliser le parcours client en amont à l’aide de wireframes est une bonne pratique de la gestion de projet web.Mais c’est également une bonne pratique pour votre portefeuille car cela va réduire les coûts durant la phase de projet ! En effet, le graphiste aura un cadre clair, les équipes de développement aussi. Bref, en 2018, il est devenu indispensable de faire des maquettes de site mobile avant tout projet.

Pourquoi des wireframes uniquement mobile ?

On l’a vu, pour convertir au mieux, une interface doit être adaptée à l’appareil qu’elle utilise. C’est la même chose sur mobile. Pour convertir des visiteurs en acheteurs, il est nécessaire de proposer l’interface la plus adaptée. Construire une interface mélangeant mobile et desktop est donc à proscrire en 2018. Certes, construire une interface spécialement dédiée au mobile vous prendra un peu plus de temps mais ce sera largement bénéfique à votre projet !

Les outils pour créer des wireframes mobile

Quels sont donc les bons outils pour créer des wireframes e-commerce mobile ? Cet article n’a pas vocation à faire une liste exhaustive des outils car il sont très nombreux mais voici quand même quelques liens.

Quelles étapes pour créer des wireframes mobile ?

Dans le cadre d’une refonte de site, pour créer des wireframes e-commerce mobile, il vous faut suivre quelques étapes.

  1. Analyser la performance actuelle de vos pages dans Analytics
  2. Lister les pages à créer (on vous aide ci-dessous)
  3. Lister les éléments qui seront présent sur chaque page
  4. Définir un seul objectif par page
  5. Placer les éléments définis au point 3  en fonction des priorités du point 4
  6. Faire analyser  votre première version par des utilisateurs
  7. Recommencer jusqu’à satisfaction

Une fois ces étapes accomplies, vous aurez enfin des wireframes e-commerce mobile prêtes à être envoyées à votre graphiste !

Quelles sont les pages à créer ?

Homepage

La homepage, indispensable pour tout projet e-commerce !

Pages catégories

Les pages catégories sont importantes pour afficher rapidement de nombreux produits sur un téléphone.

Pages produits

Les pages produits sont la clef de voûte des sites e-commerce. Le nombre important d’informations à faire rentrer sur cette page est un  vrai défi pour les ergonomes !

Page panier

La page panier est évidement indispensable pour un site e-commerce, pas forcément la plus compliquée à créer mais certainement une des plus importantes quand même.

Tunnel de paiement

Le tunnel de paiement va de la page login au paiement et s’appelle souvent « le checkout ». Pas de paiement, pas de ventes. Indispensable également donc.

Page de recherche

La page de recherche est obligatoire sur mobile aussi, le nombre de recherches étant très important. En plus, les visiteurs utilisant la recherche ont l’habitude plus convertir que les autres.

Compte client

A ne pas oublier, le compte client ! L’internaute ayant réalisé une commande sera en effet content de pouvoir suivre son expédition depuis le back office de votre site mobile.

Infographie sur les wireframe E-commerce mobile

Voici une infographie très claire pour récapituler les différentes pages et vous donner des idées de wireframes. Attention à ne pas les utiliser « telles quelles » et à bien les adapter à vos besoins.

infographie wireframe e-commerce mobile

 

A noter que pour les curieux le site Skeelbox à créer une image assez complète d’une page produit e-commerce sur desktop.

Et vous, allez-vous créer des wireframes pour votre prochain projet de refonte graphite ? Allez-vous créer une interface mobile dédiée ou partir sur un responsive généraliste ?

mobiteam

L'équipe de Mobibot s'occupe de tout ! Rédiger les articles, créer des chatbots et publier ses trouvailles sur les réseaux sociaux ! #Followus

Donnez-nous votre avis !

Publier un commentaire

Commentaire
Nom
Email
Site web