Design et expérience utilisateur

Design général et UX

General Design and UX

Le design est la somme de tous les éléments d'un magasin en ligne qui composent l'interface utilisateur (IU) et qui, ensemble avec la navigation et les fonctionnalités, définissent l'expérience utilisateur (UX).

La création d'un design centré sur le client comporte plusieurs étapes suivies par un professionnel : le processus commence toujours avec la compréhension des besoins de l'entreprise, de la marque, de la vision et des acheteurs cible, rechercher la compétition sur la même verticale et concevoir un plan pour le design et le fonctionnement du magasin. Une fois ces étapes franchies, le processus de design continue avec les décisions sur le style.

Guide de style

Dans cette étape le designer décide la typographie, la palette de couleurs et les règles d'espacement qui seront utilisées partout dans le design. Cela assure non seulement la conception unitaire du processus entier mais aussi la cohérence de toutes les pages du magasin en ligne.

Guide de style

Les principaux composants du système de design de Zento

  • Typographie : polices de caractères, épaisseur, taille, hauteur de lignes et espacement des lettres pour textes standards, titres et sous-titres

  • Couleur : choix des couleurs principales et secondaires, des couleurs dérivées et des niveaux de gris

  • Iconographie : jeu d'icônes utilisées pour les contrôles et les actions

  • Mise en page : remplissage, espacement des éléments et des grilles d'affichage pour toutes les dimensions des équipements supportés

  • Composants de l'interface utilisateur et leurs états pendant l'interaction : boutons, liens, éléments de formulaire, notifications, onglets et dialogues

Avec une large variété de styles pour tous les composants disponibles pour les choisir ou pour les personnaliser complétement, l'aspect et la convivialité de votre boutique peuvent être adaptés pour fournir une excellente expérience client, sans aucun compromis sur la cohérence visuelle.

Navigation

Avec le système de design établi, l'étape suivante est de décider la navigation de l'interface. Selon la structure des catégories du magasin et de la façon dont les utilisateurs s'attendent de naviguer sur le site, la première décision majeure concerne l'organisation et l'affichage de la navigation.

Zento propose un large éventail évolutif de mises en page. Selon le nombre de catégories sur chaque niveau de navigation ou la profondeur de celle-ci, le design le plus approprié peut être employé dans chaque cas. Suivant les attentes de la verticale de votre affaire et des utilisateurs, le design sera configuré de telle manière à permettre une descente rapide dans l'arbre des catégories ou à proposer une approche de navigation guidée.

Quelques exemples de navigations (des dizaines d'options sont disponibles)

Méga-menu par défautMéga-menu par défautMéga-menu traditionnel, parfait pour les boutiques avec une profondeur de trois niveaux et un grand nombre de catégories.
Menu simpleMenu simpleNavigation simplifiée, sans animation du menu, appropriée pour les menus peu profonds.
Méga-menu avec des imagesMéga-menu avec des imagesMenu traditionnel avec des images pour les catégories et les sous-catégories, idéal pour une navigation peu profonde.
Menu verticalMenu verticalUne version de navigation verticale, idéale pour un large choix de catégories avec un premier niveau très chargé.

Sur les équipements mobiles la plupart des mises en page des navigations sont cachées derrière une icône menu à cause des tailles réduites des écrans et de l'absence de la possibilité de survoler les éléments en utilisant une souris. Cependant, la visualisation des menus offre beaucoup de possibilités.

Tiroir simpleTiroir simpleLa navigation traditionnelle à menu latéral qui s'ouvre avec un bouton « hamburger » (à cause de sa forme habituelle)
Tiroir avec des icônesTiroir avec des icônesLa navigation traditionnelle à menu latéral avec des icônes pour les catégories où l'aide visuelle est importante
Navigation utilisant une barre d'outilsNavigation utilisant une barre d'outilsBarre d'outils placée dans la partie basse des écrans mobiles, similaire aux applications natives iOS.
Menu déroulant verticalMenu déroulant verticalLa navigation traditionnelle à menu vertical qui s'ouvre avec un bouton « hamburger »

En-tête

Une fois le style de navigation choisi, l'étape suivante est de finaliser le design du reste de la partie en-tête des pages du site. Mis à part la navigation et le logo du site, l'en-tête contient le lien vers le panier permettant de voir rapidement le nombre de produits déjà choisis, le lien vers le compte utilisateur ou le login pour pouvoir facilement accéder les détails du compte et l'historique des commandes, le lien vers la liste d'envies (si cette fonctionnalité est activée), la recherche, une navigation secondaire si nécessaire, et le principal argument de vente du magasin, qui rend votre proposition unique.

Le style de la navigation permet de décider si celle-ci doit être compacte ou avec plus d'espace blanc, si elle utilise des icônes, du texte ou les deux, si elle utilise une zone ou une icône de recherche, si elle utilise des couleurs contrastantes ou fondues avec le reste du site, ainsi qu'une variété de décisions de mise en page concernant le positionnement et l'ordre de tous les éléments.

Sur les mobiles, la partie en-tête est plus compacte, le but étant de donner accès à l'utilisateur à toutes les fonctionnalités importantes, tout en prenant le moins d'espace vertical possible. Vous pouvez décider si la recherche est affichée ou activée par une icône ou bien si une icône du compte est toujours visible ou cachée dans le menu tiroir de navigation.

Page d'accueil

Pour les visiteurs du site arrivant par la page d'accueil, celle-ci est très importante car elle informe les utilisateurs sur les types de produits vendus dans le magasin et comment celui-ci se différencie de ses compétiteurs. Zento offre une liberté totale pour gérer le contenu de la page d'accueil en utilisant notre fonctionnalité de conception de pages optimisée pour le marketing. Modifier le contenu de n'importe quelle page du site, y inclus de la page d'accueil, est aussi facile que de créer une newsletter avec des actions glisser-déposer.

Le contenu par défaut de la page d'accueil proposé par un designer dans la phase de configuration initiale propose à l'utilisateur un raccourci vers les catégories les plus importantes (très important sur mobiles car celles-ci sont cachées dans le menu), présente les produits, les campagnes et les appels à l'action les plus importants pour le magasin pour promouvoir et communiquer les valeurs de la marque et le caractère unique aux acheteurs. Le but de la page d'accueil est d'attirer l'attention des utilisateurs qui n'utilisent pas immédiatement la recherche ou la navigation pour accéder la page souhaitée et de les guider vers les produits et les catégories qui pourraient les intéresser.

Le fait est qu'un design qui soit toujours correct ou toujours erroné n'existe pas. Plutôt, cela dépend toujours des cas particuliers, de la verticale, du catalogue et de la marque. Même avec le choix très riche de composants et de mises en pages offertes par Zento, prendre les décisions correctes dans une situation concrète fait des designers une partie essentielle du processus de création du magasin.

Les buts des utilisateurs

La transformation des visiteurs en acheteurs n'est pas toujours une ligne droite, votre magasin devant répondre aux besoins des 5 types principaux d'utilisateurs e-commerce :

  • focalisés sur les produits (sachant parfaitement ce qu'ils veulent acheter) ⇒ éléments clés : recherche efficace, accéss facile aux achats précédents, un processus de commande simple et clair

  • en train de regarder (parcourant leurs sites favoris en recherche d'inspiration ou comme passe-temps) ⇒ éléments clés : lister les nouveaux produits, les plus populaires et ceux en promotion, accès facile au catalogue

  • en mode recherche (en train de collecter des informations sur les produits et les prix) ⇒ éléments clés : commentaires utilisateurs, comparaison facile entre différents produits, des paniers faciles à modifier

  • chasseurs de bonnes affaires (cherchent les meilleurs offres possibles) ⇒ éléments clés : affichage des promotions, appliquer automatiquement les réductions de prix lorsque les critères sont réunis

  • acheteurs ponctuels (par exemple les possesseurs de cartes-cadeau, ou en recherche d'un cadeau) ⇒ éléments clés : navigation efficace du site, la possibilité de commander sans s'enregistrer sur le site.

La conception du design en tenant compte des types d'utilisateurs et de leurs buts fournit des arguments valides pour prendre les bonnes décisions et pour proposer une excellente expérience utilisateur.

Voulez-vous en savoir plus ?

Contactez-nous

Ce site web utilise des cookies

Nous utilisons les cookies pour personnaliser le contenu et les annonces, pour fournir les fonctions des plateformes sociales et pour analyser le trafic.

Nous partageons des informations sur votre utilisation de notre site avec nos partenaires média, publicité et analytiques, qui peuvent les agréger avec d'autres informations que vous avez pu fournir ou qui ont pu être collectées pendant votre utilisation de leurs services.

En continuant d'utiliser notre site web vous acceptez l'utilisation de nos cookies.