logo designisvital

Lexique

Pour tout comprendre d'un produit ou d'un projet digital

Vous devriez pouvoir tout comprendre d'un projet


Il s’agit de la capacité pour un site web ou application web à être accessible et utilisable par les utilisateurs au regarde de la capacité de ces mêmes personnes. Par exemple, les personnes ayant des problématiques de handicapes.
Lorsque la beauté d’un produit permet de l'utiliser plus simplement ou de donner l’impression que son usage est plus simple.

"Cela donne à penser que l'utilisateur peut être fortement affectée par l'aspect esthétique de l'interface, même quand ils essaient d'évaluer l'interface dans ses aspects fonctionnels et il il est suggéré que les concepteurs d'interfaces devraient viser non seulement à améliorer la convivialité inhérente, mais aussi rafraîchir la convivialité apparente ou l'aspect esthétique de l’interface."
«La capacité d’un objet à suggérer sa propre utilisation », par exemple, sans qu'il ne soit nécessaire de lire un mode d'emploi. On parle aussi d'utilisation intuitive (ou du caractère intuitif) d'un objet. Le terme d'affordance dérive du verbe "to afford" qui a un double sens : « être en mesure de faire quelque chose » et « offrir ».
Un biais cognitif décrivant la tendance qu'ont les utilisateurs à compter sur une partie d'information mise en évidence. Le plus connu est le "prix conseillé" dans les grille tarifaire (pour les solutions en SaaS par exemple).

Prix conseillé ancrage
Organisation d’une série d’informations, permettant à l’utilisateur de trouver facilement chaque contenu au cours de sa navigation.
Un anti-modèle est une réponse commune à un problème récurrent qui est généralement inefficace et risque d'être très contre-productif. Le terme, inventé en 1995 par Andrew Koenig, a été inspiré par un livre, Design Patterns, qui met en évidence un certain nombre de modèles de conception dans le développement logiciel que ses auteurs considéraient comme très fiables et efficaces.
Le design atomique est une méthodologie permettant de créer des systèmes de design. Il comprend cinq niveaux distincts :

  1. Atomes
  2. Molécules
  3. Organismes
  4. Templates
  5. Pages

Explorons chaque élément :

Atomes
Les atomes sont les blocs élémentaires de la matière. S'agissant de nos interfaces web, les atomes sont nos balises HTML, par exemple un label, un input, un bouton. Les atomes peuvent aussi comprendre des éléments plus abstraits, comme des palettes de couleurs, des polices de caractères, et même des aspects invisibles d'une interface comme les animations. Tels les atomes dans la nature, ils sont relativement abstraits et pas vraiment utiles en eux-mêmes. Toutefois, ils peuvent servir de références dans une bibliothèque de modèles (patterns).

Molécules
Les choses commencent à devenir intéressantes et tangibles lorsque nous combinons les atomes. Les molécules sont des groupes d'atomes reliés les uns aux autres, ils forment la plus petite unité d'un élément composé. Ces molécules ont leurs propriétés spécifiques et servent de colonne vertébrale à nos systèmes de design. Par exemple, un label de formulaire, un input, un bouton ne sont pas très utiles mais la combinaison des trois donne un formulaire qui fonctionne. Construire une molécule à partir d'atomes nous encourage à “faire une chose et à la faire bien”. Les molécules peuvent être complexes, mais en règle générale elles sont formées de combinaisons relativement simples d'atomes.

Organismes
Les molécules nous fournissent les briques avec lesquelles construire, nous pouvons maintenant les combiner pour former des organismes. Les organismes sont des groupes de molécules que l'on associe pour former une section distincte, et qui peut être complexe, d'une interface. Nous sommes de plus en plus dans le concret. Il est probable qu'un client ne sera pas très intéressé par les molécules de notre système de design, mais avec les organismes nous commençons à voir le résultat final de notre interface. Dan Mall, avec qui je travaille sur plusieurs projets, utilise des collages qui articulent des idées à partir de quelques organismes-clés, afin de faciliter les discussions avec les clients en donnant à voir les grandes orientations visuelles - sans avoir à construire de maquette complète. Les organismes peuvent être constitués de types de molécules similaires ou différents. Par exemple, une barre de titre peut être constituée de divers éléments comme un logo, une navigation principale, une barre de recherche, une liste de media sociaux. Une “table de produits” peut être composée de la même molécule (par exemple l'image du produit, son nom et son prix) répétée encore et encore. Construire des organismes à partir de molécules nous amène à créer des composants autonomes, transposables et réutilisables.

Templates
Arrivés à cette étape des templates (gabarits), nous allons laisser de côté notre analogie avec la chimie pour reprendre un langage qui aura plus de sens dans nos échanges avec nos clients. Les templates sont constitués principalement de groupes d'organismes soudés ensembles pour former des pages. C'est ici que nous voyons le design prendre forme et notre mise en page entrer vraiment en action. Les templates sont très concrets et permettent de visualiser nos organismes et molécules abstraits. C'est ici que nos clients commencent à voir le design final se mettre en place. Dans mon expérience, les templates commencent comme des structures HTML et deviennent de plus en plus réalistes jusqu'à devenir le produit final. Bearded Studio à Pittsburgh suit le même process où le design commence avec une première mise en page et gagne lentement en précision jusqu'au résultat final.
Pages
Les pages sont des instances spécifiques des templates. Ici, le contenu devient réel, pour avoir un rendu réaliste de ce que l'utilisateur verra. Les pages représentent le plus haut niveau de fidélité, le plus tangible. C'est à ce niveau que l'on passera le plus de temps dans le process. L'étape de la page est essentielle car c'est ici que nous testons l'efficacité de notre système de design. Tout voir dans son contexte nous permet, si besoin, de revenir en arrière pour modifier nos molécules, organismes et templates afin de mieux répondre au contexte réel. Les pages sont également le meilleur endroit pour tester des variations de templates. Par exemple, vous pourriez avoir envie de montrer ce à quoi ressemble un titre de 40 caractères, ou bien ce que donnent 340 caractères. Que se passe-t-il lorsqu'un utilisateur a un seul achat dans son caddie ou quand il en a dix avec un bon de réduction ? Là encore, ces exemples concrets influencent la façon dont nous allons itérer notre construction.
Un brief est un document de présentation qui résume rapidement un projet en définissant la cible, les contraintes, la problématique et les objectifs. Il sert à avoir une vision globale et rapide d’un projet.
Le cahier des charges est un document écrit et rédigé par le client afin de présenter toutes ses attentes pour son projet. Il détaille toutes les spécificités du projet.
Le Call to action est un élément graphique (le plus souvent sous la forme d’un bouton) qui incite l’utilisateur à faire une action. Lorsque plusieurs call to action sont sur une même zone, on les différencie graphiquement en fonction de leur importance pour l’utilisateur et de notre stratégie.
Solution réutilisable pour un problème de conception récurrent. Lorsque l’on travaille sur un design, certaines problématiques ont déjà été résolues et se regroupent dans des patterns que l’on peut utiliser pour répondre rapidement au besoin.

Par exemple :
- les avis clients sont souvent représentés par 5 étoiles
- la pagination des pages
- le drag and drop
- les breadcrumbs de navigation
Ce sont des éléments qui permettent de rassurer l’utilisateur lors de l’utilisation d’un service. Souvent utilisés en e-commerce lors de la validation d’un panier on peut voir des pictos de type « livraison gratuite » , « satisfait ou remboursé » ...
Elle peut être utilisée suite à la sortie d’un site ou d’une app, le plus souvent sous forme de QCM, afin de connaitre le degré de satisfaction des clients et les axes d’amélioration à envisager.
Methode de recherche qualitative où les comportements sont observés dans les conditions de leur environnement naturel.
Technologie qui enregistre et analyse le déplacement du regarde des utilisateurs afin d’évaluer la qualité de l’interface.
Méthode d’UX design qui consiste à réunir les utilisateurs ou non d’un projet afin de les faire tester un produit, un service … et à mettre en avant leurs avis, à échanger sur le produit afin d’en comprendre les attentes des futurs utilisateurs. On peut ensuite réajuster son design et son expérience utilisateur en fonction des résultats qui en sont tirés.
La gamification consiste à mettre en place un aspect jeu (game) à un site ou une app. L’idée est de transformer une expérience anodine en une expérience plaisante et engageante qui implique l’utilisateur. Ceci qui permet de mettre en place une compétition entre utilisateurs pour gagner en notoriété.
Structure 2D faites de lignes verticales et horizontales permettant de structurer le contenu tel un framework.
Processus priorisant la conversion (métrique). La pratique consiste à regrouper un ensemble de suppositions fondées sur la recherche utilisateur puis à valider les hypothèses grâce à l’idéation, à un produit minimum viable (MVP) et à la définition d’un ou plusieurs personas. L’idée est d’itérer un maximum les tests pour atteindre une boucle vertueuse qui débouche à chaque cycle sur l'améliorations du produit.
Il s'agit d'une approche itérative, progressive et très flexible pour la conception et le développement de produits digitaux.

Les 10 caractéristiques clées de la méthode Agile sont :

  1. L'implication de l'utilisateur actif est impératif
  2. L'équipe doit être habilité à prendre des décisions
  3. Exigences évoluent, mais le délai est fixe
  4. Exigences de capture à un niveau élevé; léger et visuelle
  5. Développer les petits, les rejets supplémentaires et itérer
  6. Mettre l'accent sur la livraison fréquente de produits
  7. Remplir chaque fonction avant de passer à la prochaine
  8. Appliquer la règle 80/20
  9. Le test est intégré tout au long du cycle de vie du projet - test de détection précoce et souvent
  10. Une approche de collaboration et de coopération entre toutes les parties prenantes est essentielle

methode agile
La méthode des 5 pourquoi est utilisée en expérience utilisateur, en posant 5 fois de suite la question « pourquoi ? » à son interlocuteur / son utilisateur, on essaye d’en déduire au mieux quels sont les motivations les plus profondes de celui-ci, ainsi que ses problématiques. De cette façon il est possible de cerner ses attentes.
Conception du site ou de l'application qui met l’accent sur la partie mobile du produit. Cette pratique consiste à designer d’abord les écrans sur mobile, puis à tendre vers des écrans de plus grande taille.
Processus en 4 phases : Trigger (déclencheur), Action, Reward (récompense), Investissement.
Exemple :
- Trigger : L’utilisateur reçoit une notification pour aller voir un nouveau cours en ligne
- Action : L’interface propose la visualisation du cours
- Reward : Une fois le contenu consumé, l’utilisateur gagne des points
- Invest : Avec les points gagnés, l’utilisateur gagne des badges mettant en valeur l’investissement temps passé ou le nombre de cours suivi par exemple.
Un mood board est une planche de tendance, reprenant l’axe créatif que l’on souhaite emprunter pour son projet. Celui-ci peut-être fait sous forme de collage ou bien en version numérisé. Il peut aussi se faire via Pinterest sur un tableau dédié à votre projet.
L’onboarding se présente le plus souvent sous la forme d’une succession de 3 à 5 écrans successifs à l’ouverture d’une app. Il résume le fonctionnement de l’app et aide l’utilisateur à la prendre en main.
Utilisateur type représentant un groupe cible pour un site, une marque ou un produit. Le personas est le client idéal que l'on souhaite voir sur son site ou application. Il est par exemple décrit de cette façon :

« Clara, femme dynamique et célibataire vivant en agglomération, plutôt CSP++ ayant faire des études longues. Elle passe peu de temps à faire X mais est très familier avec Y. Clara n’a pas le temps à allouer à Z…. »
On parle de site web responsive lorsque le site s'adapte parfaitement aux terminaux mobiles et tablettes. Au delà de l'adaptation du contenu et du design qui doit permettre un affichage et une lecture aisée, les éxigences du responsive tendant à vouloir créer des contenus et les afficher spécifiquement pour le mobile. Ces nouvelles façons de pensée le responsive viennent notamment d'une réflexion sur l'usage et les contextes d'utilisation des terminaux. Une UX spécifique à chaque device doit pouvoir être proposé en fonction des attentes utilisateurs.
Généralement connu sous la loi de Pareto, la règle des 20 / 80 consiste à dire que 20% des causes entrainent 80% des effets. Par exemple, 20% des clients entraînent 80% du chiffres d'affaires. Une varitante connue est la méthode ABC.
Diagramme qui hiérarchise et défini le nombre, la nature et la structure de chaque page (ou écran) d’un site ou d’une application.
Utilisé en ergonomie informatique, l'exercice collaboratif permet de catégoriser des objets, des termes ou des pages d’un site, afin de les structurer intelligemment.
Il s’agit du design d’interface utilisateur, c’est à dire ce qui concerne toute la partie visuelle et graphique de l’app ou du site. L’UI s’attache à respecter la charte graphique tout en mettant en oeuvre ce qui est défini au niveau de l’UX (expérience utilisateur)
Utilisabilité : Permet d’évaluer si un site ou application est simple ou difficile à utiliser.
Méthode de conception qui consiste à mettre l’utilisateur au centre de la réflexion afin de répondre au plus près de ses besoins.
Carte ou map graphique qui décrit et représente le parcours de vos utilisateurs ainsi que l’ensemble des interactions qu’ils peuvent avoir avec les différents « touchpoints ».
Le design d’expérience utilisateur est une méthode de design qui consiste à placer l’utilisateur au centre de la réflexion de design au moment de la conception du projet. On se focalise alors sur les attentes et les contraintes des utilisateurs d’un site ou d’une app, pour permettre une meilleure expérience et fidéliser / augmenter sa clientèle.
Un wireframe est une maquette / une ébauche rapide (sous format papier ou vectoriel) d’un site ou d’une app qui permet de définir quels seront les principaux éléments à mettre en place dans le design.


Une question ?


ECRIVEZ-NOUS !