Stratégie de design

Le design met en avant votre magasin et votre marque et définit l'affinité de votre public par rapport à votre marque. Mais le but du design spécifique web n'est pas seulement esthétique, il est aussi très important pour l'expérience utilisateur.

L'effet esthétique-fonctionnel adresse la tendance des utilisateurs de percevoir les produits attractifs comme plus faciles d'utilisation : Les humains ont tendance à croire que les choses qui sont plus belles fonctionnent mieux aussi, même si elles ne sont pas réellement plus performantes ou plus efficaces. Cela ne désavoue pas l'ergonomie comme aspect essentiel, mais souligne le fait qu'un design plus esthétique contribue à la perception du magasin comme plus solide et plus facile d'utilisation par les visiteurs.

Lorsque nous avons démarré le développement de la nouvelle génération de notre produit, le design a été l'objectif principal, et pour cela nous avons démarré avec une page blanche. Les principes suivants ont été choisis pour notre stratégie de design :

• Décisions guidées par des données fiables et non pas par des opinions

• Créer un système de design flexible et personnalisable pour un résultat remarquable

• Adhérer aux standards de l'industrie et proposer la cohérence des interfaces

• Créer des interfaces faciles à utiliser et augmenter les conversions

Décisions guidées par les données concrètes

La première cible a été de créer une stratégie de design qui ne soit pas centrée sur des préférences et des préconceptions personnelles, mais autour de données factuelles.

Souvent, les commerçants ou les designers moins expérimentés observent les grandes sociétés sur le marché et essaient de copier aussi précisément que possible, dans l'espoir de copier leur succès également. Parfois il s'agit même de copier des idées qui semblent très ingénieuses depuis des divers sites Internet.

L'inspiration est sûrement une partie intégrante du processus de design. Cependant, copier les autres sites sans une réflexion globale est semblable aux étudiants qui copient leur voisin pendant un examen, sans même réaliser que chacun a un sujet différent.

Dans le processus de design une étape critique est la compréhension des raisons pour lesquelles une idée fonctionne ou pas, pour comprendre les situations où elle peut être vraiment appliquée.

Chez Zento, notre équipe de design suit de près les résultats de recherche sur le design dans l'e-commerce publiés parl'Institut Baymardou d'autres publications, dans le but de comprendre les arguments scientifiques et le contexte dans lesquels un design fonctionne. Cela nous permet de proposer les meilleurs composants de design dans la phase de conception de chaque magasin.

En plus, l'équipe surveille constamment la performance des différents composants en production et exécute des tests A/B pour recueillir des données supplémentaires permettant d'alimenter les futures décisions.

Système de design atomique

Les boutiques en ligne ont des prérequis de design qui dépendent d'une longue liste de facteurs. En conséquence chez Zento nous avons besoin d'un système de design qui puisse offrir la flexibilité nécessaire pour permettre toutes les adaptations nécessaires. La solution est un système de design atomique (en anglais Atomic Design Methodology).

Cette méthode est expliquée par Brad Frost de cette manière : Le design atomique n'est pas un processus linéaire, mais plutôt un modèle mental pour nous aider à concevoir nos interfaces utilisateurs à la fois comme un tout cohérent et en même temps comme une collection de blocs.

Le design atomique est composé par 5 différents stades qui créent ensemble les systèmes de design des interfaces d'une manière plus intentionnelle et hiérarchique :

• Atomes : les blocs fondamentaux pour construire l'interface qui ne peuvent pas être décomposés sans perdre leur sens (exemples : icônes, texte ou images, étiquettes, contrôles de saisie, boutons)

• Molécules : groupes d'atomes fonctionnant comme une seule unité (exemples : panneaux produit)

• Organismes : des éléments d'IU relativement complexes composés de groupes de molécules, atomes et même d'autres organismes (exemples : carrousel de produits, grille produit, en-tête, pied de page)

• Modèles : pages qui combinent des composants dans une disposition précise et qui définissent et renforcent la structure sous-jacente du contenu (exemple : la structure d'une page)

• Pages : instances spécifiques de modèles qui visualisent l'interface utilisateur (IU) avec du contenu réel et relevant (le produit final)

Le système de design de Zento garde plusieurs versions de chaque atome (contrôle de saisie, bouton, titre etc.). Ces atomes peuvent être groupés ensemble dans des composants qui peuvent avoir également plusieurs variations. Ces dernières peuvent être fusionnées dans une des multiples variations des organismes disponibles, et ainsi de suite. Une sorte de jeu de briques de construction pour le design.

Cohérence et standards

Le bénéfice implicite d'un système de design atomique est la cohérence des interfaces construites avec : puisque la même variation d'un atome (une saisie de texte par exemple) est utilisée dans tout le site, l'utilisateur aura aussi une expérience cohérente.

Une des heuristiques d'utilisabilité de Jakob Nielsen (le cofondateur de Nielsen Norman Group) est Cohérence et Standards : Les utilisateurs ne devraient pas avoir à se demander si certains différents mots, situations ou actions signifient la même chose. Suivez les conventions de la plateforme.

Cela est crucial pour assurer que l'interface utilisateur reste prévisible et compréhensible.

Deux types de cohérence s'appliquent au design de l'expérience utilisateur :

1. Interne : il s'agit de maintenir la cohérence interne de l'interface utilisateur (en adhérant aux traitements visuels habituels)

2. Externe : maintenir la cohérence à l'extérieur du produit ou du magasin et suivre des modèles auxquels les utilisateurs sont déjà habitués

La cohérence interne est assez claire : si certains éléments de design sont utilisés par votre boutique, ils doivent être utilisés partout dans le site ; l'icône du panier doit être la même sur toutes les pages, les éléments des formulaires doivent utiliser les mêmes styles, couleurs et doivent être utilisés de la même manière etc.

L'explication la plus facile de la cohérence externe utilise la loi de Jakob (Nielsen) : Les utilisateurs passent leur temps en majorité sur d'autres sites. Cela veut dire que les utilisateurs préfèrent que votre site fonctionne de la même manière que tous les autres sites qu'ils connaissent.

Vos visiteurs ont des attentes par rapport à l'implémentation d'une fonction et l'emplacement d'une action. Si un design passe outre ces conventions l'utilisateur est forcé d'apprendre une nouvelle convention, ce qui augmente la charge cognitive. Cela ne veut pas dire que vous ne pouvez pas outrepasser une convention, mais si vous le faites vous devez vous assurer que cela vaut la peine et que le modèle ou la solution proposés sont meilleurs et restent faciles à comprendre.

Ergonomie pour plus de conversions

Aujourd'hui, les utilisateurs attendent que les magasins qu'ils visitent soient rapides et intuitifs, peu importe l'équipement utilisé pour se connecter. C'est un fait connu qu'une mauvaise expérience est une des principales raisons pour lesquelles les utilisateurs ne sont pas convertis en acheteurs, et que cela est particulièrement important sur les mobiles. Parfois cela provoque un abandon immédiat pour la compétition. D'autres fois cela est perçu de manière plus subtile : cela n'a pas l'air de fonctionner, je reviendrais plus tard sur mon ordinateur, l'effet étant le décalage ou l’abandon ultérieur de l'achat. Dans tous ces scenarii, votre magasin va perdre une commande au bout d'un coûteux processus d'acquisition.

Avec l'avènement et la croissance exponentielle du commerce mobile, avec parfois des utilisateurs uniquement sur ce type de sites, concevoir votre magasin pour les smartphones ne peut pas être une décision tardive.

La stratégie de design Zento démarre en pensant d'abord à l'acheteur mobile : les composants de design sont conçus, configurés et optimisés pour les affichages mobiles et tactiles ; les interfaces sont prévues avec des éléments pour suggérer les composants non visibles sur la page ; les mises en page incluent ou pas des éléments additionnels pour s'ajuster à la taille de l'écran disponible pour le visiteur - écran d'ordinateur ou équipement mobile.

Le design d'interfaces faciles à utiliser sur tout équipement et dans n'importe quel contexte est au cœur de notre stratégie de design.

Le design ne se réduit pas aux mises en pages esthétiques ou à des animations harmonieuses, il s'agit d'abord de comprendre vos utilisateurs, de leur faciliter la navigation et de leur fournir la meilleure expérience possible. Avec cette stratégie le design apporte plus de conversions et augmente vos ventes en ligne.