Lexique Ux Ui par 40/60 studio

40/60 studio vous propose le lexique des concepteurs d’interfaces digitales, pour tout comprendre quand vous travaillerez avec un designer UX/UI !

  • Designer d’interface : il travaille sur des expériences digitales. Son rôle est de garantir l’ergonomie et la facilité d’utilisation d’une interface. Il conçoit une expérience fonctionnelle et émotionnelle réussie.
  • UI : de User Interface, l’UI permet de définir l’apparence, le comportement des écrans et ses composants graphiques.
  • UX : de User eXperience, l’UX permet de définir l’expérience globale de l’utilisateur, son parcours d’usage, ainsi que l’architecture de l’information.

UX

  • Brainstorming : c’est une séance de créativité collective. Elle est organisée pour trouver des solutions lors d’un regroupement d’idée. Toutes les idées sont permises, même les plus folles, pour que chacun puisse rebondir dessus.
  • Benchmark/Benchmarking : c’est le recueil d’informations sur les pratiques et les performances des concurrents sur un marché donné.
  • Flowchart : schéma qui permet de représenter visuellement l’enchaînement des décisions et/ou actions prises par un utilisateur. Elle est nécessaire à la construction fiable et logique d’un service, d’une application ou d’un site web.
  • Moodboard : la moodboard, ou planche d’inspiration, est un rassemblement d’images, de textes et de photographies, compilant les tendances appropriées au projet.
  • Sketch : ou croquis effectué à la main, un sketch est une pré-maquette dessinée de l’interface. C’est un outil essentiel pour le designer UX avant de se lancer dans les wireframes.
  • Scénario : un outil de récit subjectif de l’un de vos utilisateurs, permettant de comprendre séquence par séquence comment il intéragie avec votre service
  • Shadowing : c’est une méthode ethnologique d’observation sans intervenir dans le parcours des utilisateurs, comme un ombre qui observe.
  • Storyboard : bande dessinée représentant les différentes actions du scénario.
  • Wireframe : est un schéma de l’écran. Il définit la structure de base des écrans (l’arborescence, composition et la hiérarchie de l’informations).

UI

  • Data visualisation : c’est une représentation visuelle de données complexes afin d’en faciliter leurs compréhension.
  • Ergonomie : dans un contexte numérique, l’ergonomie parle de facilité d’usage, d’usabilité.
  • Flat design : un style de design d’interface graphique caractérisé par son minimalisme. Il se base sur l’emploi de formes simples, d’aplats de couleurs vives et de jeux de typographie.
  • Fluent design : Développé en 2017 par Microsoft, il s’agit d’un style de design se basant sur des caractéristiques de lumière, mouvement, profondeur et translucidité.
  • Header/Footer : header vient de head (tête) et désigne la partie supérieure d’une interface. De la même manière, footer vient de foot (pied) et désigne la partie inférieure de l’écran.
  • Icône/Picto : une icône est un petit pictogramme représentant une action, permettant une meilleure lisibilité de l’interface.
  • Les états (hover — normal — touch) : les transitions appliquées sur les éléments graphiques, tels que les boutons cliquables, les images, etc … Ce sont les interactions visuelles avec notre souris ou notre doigt. Hover : au-dessus de l’élément. Normal : sans interaction. Touch : lorsque nous cliquons ou touchons l’écran.
  • Maquette cliquable : les maquettes cliquables reprennent les écrans dessinés et grâce à la digitalisation des boutons, anime votre application.
  • Material design : Style graphique développé par Google, il est la prolongation du flat design incorporant les ombres, des éclairages et les notions de profondeur de l’écran.
  • Motion design : ou animation graphique. Il permet de mettre en animation tout type d’éléments graphiques afin de dynamiser l’interface.
  • Navbar : contraction de “barre de navigation”, c’est un menu latéral ou horizontal d’un site web.
  • Parcours utilisateurs : les différents parcours possibles et réalistes des utilisateurs en fonction de leur besoin.
  • Pop-in/Pop-up : Le pop-in désigne une petite page qui s’ouvre dans la page où nous sommes. A contrario, le pop-up est une fenêtre secondaire qui apparaît à notre écran.
  • PWA : Une progressive web app est un site internet développé spécifiquement pour les mobiles. Il permet de simuler la même experience qu’avec une application téléchargée.
  • Responsive design : un site web responsive est un site qui s’adapte aux différents terminaux : ordinateurs, tablettes, smartphones.
  • Skeuomorphisme : Un style de design qui imite le réel, en reprenant les codes des matériaux originaux.
  • Scroller : définit l’action de glisser vers le bas de la page. Sur un site web, il est symbolisé par le scroll, à droite de l’écran.
  • Slider : le slider est un élément graphique permettant de moduler une intensité, comme le volume par exemple ou changer de couleur.
  • Spliter ou Devider : c’est un élément graphique qui sépare deux espaces ou deux éléments. C’est une ligne séparatrice indiquant qu’il y a plusieurs zones.
  • Swiper : définit l’action de passer sur le côté. Une interaction très populaire sur des applications comme Tinder.
  • Wording/Nomenclature : la liste détaillée du vocabulaire utilisé dans l’interface.

Chez 40/60 studio, nous accompagnons start-up et grands groupes dans leur démarche d’innovation pour imaginer, créer et développer les services et produits de demain. Nous sommes un cabinet de conseil par le design, c’est à dire que nous vous conseillons et accompagnons jusqu’à la réalisation de vos projets pour que chaque idée devienne réelle, intelligente et désirable.

Pour en savoir plus, retrouvez nous sur www.40-60studio.com

Design hacking

40/60 studio & Feads

40/60 service design studio

Written by

We are a design agency. We create beautiful experiences for our clients and with our client — Human Thinking — Smart Thinking — Design Thinking

Design hacking

40/60 studio & Feads

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade