Les enjeux de l’expérience utilisateur dans la conception web

Le concept d’UX Design est important, car il a un impact direct sur le comportement des utilisateurs, sur la perception de vos produits et services, mais aussi sur la confiance et la fidélité qu’ils vous portent.

Les entreprises et l’expérience utilisateur

Toutes les entreprises devraient placer le client au centre de leur stratégie, c’est le fondement même de l’expérience utilisateur. Mais, seulement 16% des entreprises maîtrise vraiment l’expérience utilisateur de leurs produits.

Pourtant, avec l’évolution du digital, de nouveaux outils permettent aux entreprises d’analyser, de mesurer et de partager les interactions de leurs utilisateurs avec leurs produits. Petit à petit, l’expérience utilisateur devient une stratégie d’entreprise inévitable.

Quelques chiffres clé :

  •  68% des utilisateurs quittent un site internet suite à une mauvaise expérience.
  • 61% des utilisateurs n’achètent pas de produit avec des informations manquantes.
  • 44% des acheteurs partagent leurs mauvaises expériences avec leurs entourages.
  • 50% des Français se connectent sur smartphone.

Source 

L’expérience utilisateur n’est pas qu’une simple tendance, c’est un élément important d’une stratégie d’entreprise, un concept adopté par le monde du web.

Contexte d’utilisation

Pour devenir un bon UX designer, il ne faut pas oublier lors de l’élaboration d’un projet de prendre en compte le contexte d’utilisation. Nous allons voir ensemble, que le contexte est un point très important pour une bonne expérience d’utilisation.

L’environnement d’utilisation

L’environnement dans lequel l’utilisateur se trouve à une influence sur son attention. Que vous soyez avec vos amis, vos proches ou des inconnus, vous subissez des pressions sociales qui affectent votre expérience d’utilisation. Nos comportements sont différents et ont un impact sur nos usages.

Dans les transports, les utilisateurs sont souvent en présence de beaucoup de monde, ils auront tendance à réaliser des tâches moins personnelles qui engagent moins.

Exemple :

Problème : Le site e-commerce réalise 30% de son trafic sur mobile, mais son taux de conversion est bas. Beaucoup de monde quitte la page paiement, car ils doivent insérer leurs informations de carte bancaire.

Solution : nous sommes conscients que l’environnement mobile est souvent lié au stress. Nous pouvons proposer aux utilisateurs un bouton qui leur permet de payer en 1 clic.

Cela apportera une solution au problème et augmentera le taux de conversion du site e-commerce.

L’accessibilité

Les utilisateurs ne se trouvent pas forcément dans les meilleures conditions pour interagir avec correctement avec l’interface. Certaines activités externes ne nous permettent pas d’utiliser un produit dans son intégralité, car notre attention ou nos capacités physiques nous en empêche.

Prenons l’exemple des daltoniens, se sont des utilisateurs qui ne perçoivent pas les couleurs de la même façon qu’un utilisateur classique.

Nous devons donc prendre en compte ce facteur important et donner la possibilité à ces utilisateurs d’avoir accès aux mêmes informations que tout le monde.

Théorie de la Gestalt – Loi de l’ergonomie

La théorie de la Gestalt est une théorie d’origine allemande qui nous permet de définir les principes de la perception des formes.

Devant en environnement complexe, le cerveau va chercher à mettre en former et à donner une structure à ce qu’il perçoit.

Il structure les informations reçues d’une telle façon que cela signifie quelque chose pour nous.

La théorie de la Gestalt se décompose en 6 lois :

Loi de la bonne forme :

La perception d’un environnement qui associe un ensemble d’éléments informes comme une forme simple, symétrique, stable.

Loi de bonne continuité :

Des formes rapprochées sont perçus comme une forme, nous les percevons comme une continuité, comme les prolongements les uns des autres.

 

 

Loi de proximité :

Le cerveau humain à tendance de regrouper les choses qui sont proches, leur proximité est considérée comme faisant partie d’une même forme, l’éloignement suggère une différence.

Loi de clôture :

L’effet de clôture s’active lorsque notre cerveau tente de combler les vides, afin de percevoir dans sa totalité.

Loi de similitude :

Les éléments semblables sont perçus comme une seule forme, car notre cerveau tente toujours de regrouper les choses qui se ressemble même si elles sont éloignées.

Loi du destin commun :

Des éléments ayant une même trajectoire sont perçues par notre cerveau comme faisant partie de la même forme.

Pour appliquer cela à vos interfaces c’est très simple, il vous suffit pour des zones ayant une importance similaire, il est nécessaire qu’ils aient le même aspect graphique.

Pour un formulaire, les champs qui concerne les informations type adresse devront être regroupés dans la même zone, appliquer la loi de proximité, réduisez l’espacement entres les champs pour en faire une seule unité.

Prévoir les conflits de développement dans la conception du projet

Face à une deadline trop serrés, la collaboration entre développeur et UX designer peut devenir catastrophique.

Garder les concepteurs et les développeurs sur la même longueur d’onde est assez compliqué. Donnez leur un site web qui doit être fonctionnel rapidement et les bureaux brulerons.

Nous devons donc concevoir rapidement, de façon transparente pour fournir un site de classe mondiale à la fin ?

Dans cet article, je vous propose quelques conseils du quotidien pour réduire vos maux de tête au travail. Les conseils tirent de mes expériences vécues au cours des dernières années en tant qu’UX Designer.

1 – La conception réactive : système de grille

Vous ne travaillez peut-être pas avec des grilles lors de vos wireframe, voici un problème auquel les développeurs sont confronté.

Définir une largeur à votre grille

Il est utile de commencer son wireframe avec une largeur spécifique à votre grille et de connaître la taille des gouttière exacte pour chaque partie de la grille. Avec cette information, vous pouvez déjà uniformiser votre conception, ce qui vous empêchera de faire des ajustements tout au long de la conception du wireframe.

Si vous définissez un bloc de 50 pixels, il doit être exactement à 50 pixels. Si votre grille a une largeur de 1200px dans son intégralité, elle doit être de 1200px de large. Si vous définissez une base solide à votre projet web et notamment pendant votre wireframe, cela devrais fonctionner sur tout type d’appareil et tout type de système, il est important d’avoir un point de départ en béton.

Ne laissez pas le hasard réaliser vos vues mobiles

Tout semple beau sur desktop, mais attendez… et la vue mobile ?

Dans beaucoup de projets, le développeur doit prendre des décisions sur la composition de la vue mobile…

Pour mieux collaborer sur un projet web, les UX designer doivent impliquer sur le design desktop l’ordre d’empilement mobile. Si le temps le permet, il est extrêmement utile de fournir une maquette fidèle de la vue mobile. Fournir une vue mobile vous permettra d’obtenir une interprétation mobile au pixel près !

Utiliser un système de grille desktop pour la conception d’un site mobile n’a pas de sens. C’est souvent le cas avec les éléments d’interface utilisateur étendus, qui ne se compriment généralement pas bien lorsqu’ils sont placés sur des périphériques mobiles.

En tant qu’UX designer, vous devez résoudre ces problèmes afin que les développeurs du projet ne viennent pas avec des idées en conflit avec vos intentions.

2 – Utilisez des outils modernes pour une représentation précise

Polices de caractères

Dans un premier temps, la cohérence entre les polices de caractères entre Photoshop et le Web n’existe pas.

Souvent, les polices avec lesquelles je travaille sur Photoshop sont complètement éteintes. Même les polices open-source peuvent sembler différentes lorsqu’elles sont comparé sur Photoshop et le Web.

En tant qu’UX designer, nous aurions besoin d’ajuster la conception en fonction du poids des polices. Lorsqu’ils ne sont pas correctement représentes,

En tant que concepteur, vous aurez besoin d’ajuster la conception en fonction du poids des polices. Lorsqu’ils ne sont pas correctement représentés, vous prenez des décisions basées sur des données ou une représentation visuelle de la police qui va être incohérente.

Problèmes de performance

L’un des aspects de la représentation du pixel parfait se rapporte à la façon dont les designers créés la plupart des documents Photoshop.

Utilisons les ombres portées comme exemple.

Photoshop comme vous le savez surement, contient une option d’ombre portée. Les designers ont beaucoup de souplesse lorsqu’ils créent des ombres, ainsi que des masques et autres éléments de conception. Mais quand un développeur recrée ces mêmes ombres sur le web, les options sont beaucoup plus limitées.

Quand un développeur entame la création du front-end d’un site web, il ou elle est très préoccupé par les performances de celui-ci. Chaque fois qu’ils ont besoin d’utiliser une image en PNG transparent ou translucide de 32 bits pour un élément UI, le site prendra plus de temps à charger. Multipliez l’exemple par des centaines de composants et votre site va être très lent.

La solution idéale est de recréer les ombres portées avec CSS.

Vous pouvez créer de nombreux effets avec le CSS, y compris les ombres portées. Si un développeur peut utiliser CSS pour faire des ombres au lieu d’intégrer un PNG. Le coté positif du CSS, c’est qu’il est plus léger, il vous permettra donc d’obtenir un poids de page réduit. En revanche pour la typographie et les ombres portées, ils ne seront pas 

Sur le côté positif, CSS est plus léger, vous permettant d’obtenir des actifs à une taille beaucoup plus petite. En revanche, la typographie et les ombres portées ne seront pas identiques à celles créées en CSS.

Une des images ci-dessus est un PNG, l‘autre est un SVG.

Bien que les deux images soient visuellement identiques, le PNG à un poids de XX ko tandis que le SVG obtient le poids de XX ko seulement. De plus, l’ombre sur le SVG peut être articulée.

3. Prototypes collaboratifs : communication claire et concise.

Lorsqu’on travaille sur des projets sans prototype, la communication autour du projet devient difficile, entre les appels téléphoniques et les notes gribouillées à la vas vite.

Voici un processus de travail pour améliorer la clarté en réduisant la documentation autour du projet et de vos attentes :

  • Au début d’un projet de site web, dite vous que la documentation doit agir comme noyau de connaissances plutôt que d’une encyclopédie. Par exemple, définissez la conception des bases et les principes techniques, puis reportez-vous à d’autres outils pour présenter votre vision du projet. Découvrez une liste d’outils de prototypage ou notre boite à outils pour les projets web.
  • Une fois le projet démarré, créez des flux utilisateurs pour planifier les interactions pour l’ensemble du système. InVision vous permet par exemple d’ajouter des commentaires pour que les développeurs puissent poser des questions et comprendre le système.

Si vous avez trouvé ces conseils utiles, continuez à consulter mon blog. N’hésitez pas à me donner votre avis et à noter les articles.

Je recherche actuellement un passionné du métier d’UX designer pour rédiger des articles sur Blog UX designer.fr. Contactez-moi ici !

 

Mauvaise harmonisation, négatif pour l’expérience utilisateur ?

Aujourd’hui, dans cet article, j’ai souhaité vous parler de l’importance de l’harmonisation ainsi que de la cohérence dans le message d’une entreprise.

Je travaille en ce moment dans une entreprise de jardinerie en ligne, c’est une entreprise qui réalise son chiffre d’affaires que 6 mois dans l’année et qui perçoivent des problèmes de conversion.

Il est donc important pour eux, d’améliorer le taux de conversion des utilisateurs ainsi que l’expérience utilisateur. Après une exploration de leurs différents moyens de communication, il est ressorti un problème d’harmonisation du site, alors que l’entreprise à une charte UX, la majeure partie des interfaces ne correspondent pas à cette charte. Première incohérence, mais qui concerne le design.

Dans cet article, je vais plutôt me concentrer sur les services de l’entreprise, tout d’abord, il est important de garder en tête qu’une entreprise doit avoir le même message tout au long du processus d’achat de l’utilisateur, surtout en ce qui concerne les services.

L’un des risques majeurs, est l’incompréhension de l’utilisateur devant les différentes interprétations, messages de la même entreprise au cours d’un même processus d’achat.

Exemple d’incohérence :

Maintenant, décortiquons le parcours client de l’entreprise, dans un premier temps, je reçois un e-mail de prospection, l’e-mail me propose les dernières offres du moment, je tombe sur les services suivant :

picto_emailling
Très bien, nous avons donc des pictos plus ou moins clair, couleur gris foncé et texte de même couleur, d’un corps plutôt petit.

Ensuite, je clique sur l’une des offres, j’arrive sur le site internet et je me retrouve avec les services suivant :

picto_sitewebNous avons une couleur différente de l’email, et le message n’est pas identique, nous avons un texte gris clair et vert bolder.

Ensuite, je souhaite réaliser une commande, je navigue sur le site, j’ajoute un article dans mon panier et… Je tombe sur de nouveaux pictos service

picto
Donc, nous avons 5 nouveaux pictos, qui ne ressemble pas du tout à la charte de base, ni aux messages engendrai depuis le début du parcours client.

Je valide ma commande et je reçois un e-mail de confirmation de commande, ce qui reste classique. Puis rebelote, nouveaux pictos.
picto_emailling_03
Des pictos en couleurs, qui ne ressemblent à aucun autre pictogramme du parcours client.

Conclusion :

L’harmonisation d’un parcours client est pour moi, un facteur essentiel pour l’augmentation du taux de conversion, car une incohérence dans le message que l’entreprise souhaite dégager peut-être incompris et donc discrédité la maque.

Il est donc important d’uniformiser les différents messages envoyés aux utilisateurs, nous avons pris pour exemple les services de cette entreprise, mais nous pouvons très bien retrouver ces mêmes cas dans différentes entreprises.

Wireframe – Comment communiquer sur la hiérarchie visuelle

L’utilisation de la couleur est l’une des meilleures façons de communiquer sur la hiérarchie visuelle, mais sur un wireframe, il est l’un des pires. La plupart des concepteurs pensent qu’ils ont besoin d’utiliser de la couleur sur un wireframe. Si vous utilisez de la couleur pour afficher le poids visuel, la conception finale pourrait perdre sa clarté.

Noir et blanc : meilleure visibilité pour le wireframe

Il est facile de différencier l’importance d’un élément de couleur sur un wireframe car tout le reste est en noir et blanc. Mais il n’y a aucun moyen de savoir si cet élément aura la même clarté lorsque vous traduisez le wireframe en une maquette.

En effet, une maquette aura beaucoup d’autres couleurs qui entrent en compétition entre elles. Tout élément de couleur sur votre wireframe doit apparaît plus claire. Le poids visuel que vous lui avez donné diminue lorsque d’autres éléments de la page ont aussi la même couleur.

Un autre danger de l’utilisation de la couleur est que beaucoup de designers finissent par compter sur elle comme le principal moyen de montrer la hiérarchie visuelle du projet. Il est facile de faire des éléments qui se distinguent par la couleur.

Autres caractéristiques de la hiérarchie visuelle

En ajoutant de la couleur à votre wireframe, il est difficile d’évaluer l’importance des éléments visuelle. Car la couleur éclipse d’autres attributs hiérarchiques. Lorsque vous évitez la couleur, vous permettez aux éléments du wireframe de se démarquer. Le poids visuel des éléments de couleurs se perd sur une maquette, mais ces attributs restent intacts.

Taille

L’élément le plus gros est celui qui attire le plus notre attention. Pour travailler la taille, un élément a besoin d’être plus grand par rapport aux autres éléments autour d’elle.

Forme

Vous pouvez afficher du contenu sur vos pages, pour mettre en évidence une zone de contenu. Vous n’êtes pas limité à seulement la couleur et la taille. Utilisez également la forme, placer une boîte autour du contenu, cela donne de l’importance à la zone.

Wireframe d'un site internet

Placement

Il y a des zones qui recevront plus d’attention que d’autres. Placer le contenu important dans ces domaines d’attention élevé. Le meilleur endroit pour placer vos éléments importants se trouve, au-dessus du fold, là où les yeux de l’utilisateur se rivent le plus.

Coloriage inverse

La colorisation inversée peut ajouter de la clarté dans la hiérarchie des informations. La plupart des wireframes utilisent des couleurs sombres sur un fond clair. En effet, la plupart des sites utilisent souvent une couleur d’arrière-plan neutre.

Lorsque vous inversez les couleurs, vous appliquez une couleur claire sur un fond sombre. Ceci est un moyen efficace pour communiquer un fond de couleur sans suggérer de couleur spécifique.

En suggérant une couleur sur votre wierframe, l’utilisateur comprend que la couleur aura une incidence sur le reste de la conception.

La colorisation inversé, est souvent utilisée pour les éléments d’interface qui ont besoin d’un remplissage de couleur fort. Boutons, menus et notifications, qui ont souvent besoin de cette clarté visuelle, car les utilisateurs interagissent avec eux.

Une hiérarchie visuelle sans couleur

Si votre hiérarchie visuelle n’est pas claire sans couleur, c’est que votre conception n’utilise pas assez d’attributs. Le wireframe sans couleur vous permet d’évaluer la clarté de votre structure et la mise en page. Un wireframe qui n’est pas clair, est un wireframe qui manque d’une hiérarchie forte. Ajouter de la couleur ne permettra pas une meilleure compréhension.

Outils pour la réalisation de vos wireframe

Il existe des outils qui peuvent vous aider à communiquer sur la hiérarchie visuelle. Ils permettent d’avoir une visualisation du wireframe dans son ensemble. Découvrez la liste des différents logiciels de prototypage.