Quelques termes importants à connaitre 2 #DicoUx

Il y a beaucoup de mots que nous utilisons au quotidien dans le domaine de l’UX/UI design et qui sont importants à connaitre. Nous vous en présentons aujourd’hui quelques-uns.

On-boarding

L’étape « On-boarding » est cruciale pour l’expérience des nouveaux utilisateurs, car c’est la seule chance de les impressionner par la valeur et l’expérience de votre produit. Une bonne conception d’ « On-boarding » aide les utilisateurs à bien démarrer l’utilisation d’une application et à réduire le coût de l’apprentissage. Un « On-boarding » a des objectifs spécifiques adaptés au niveau de familiarité de l’utilisateur avec l’application.

On peut avoir un « On-boarding » lorsqu’on débute dans l’application Duolingo , par exemple, qui commence par le produit et se termine par un formulaire d’inscription. C’est un excellent exemple d’engagement progressif.

Hamburger menu

Quand on parle de « Hamburger menu » ou menu burger on pense généralement à l’icône de menu placé dans un coin supérieur d’un environnement graphique représenter par trois barres horizontales superposées. Un clic sur ce bouton permet de révéler un menu, ce qui le distingue d’une barre de menu qui est toujours affichée.

Pour exemple, nous avons sur notre site un bouton « Hamburger » pour accéder à l’entièreté du contenu présent sur celui-ci.

Lazy loading

Le « Lazy loading » consiste à retarder le chargement ou l’initialisation des ressources ou des objets jusqu’à ce qu’ils soient réellement nécessaires pour améliorer les performances et économiser les ressources système. Par exemple, si une page Web contient une image que l’utilisateur doit faire défiler vers le bas pour la voir, vous pouvez afficher un espace réservé et faire un « lazy loading » de l’image complète uniquement lorsque l’utilisateur arrive à son emplacement. Le chargement différé d’une page Web réduit le poids de la page, ce qui permet un temps de chargement de page plus rapide. Le chargement différé économise la bande passante en fournissant du contenu aux utilisateurs uniquement sur demande. Un exemple concret est instagram qui ne charge ses publications que lorsque l’utilisateur défile par-dessus.

Defect

On parle là d’une situations ou le produit ne fonctionne pas. Il y a trois situations dans lesquelles on va arriver à cet état.

Premièrement, c’est quand le contenu n’a pas pu se charger ou se synchroniser, le produit affiche alors une page d’échec pour informer les utilisateurs des situations actuelles, on appelle ça l’état vide ou page 404.

Deuxièmement, pour aider les nouveaux utilisateurs d’un produit à démarrer l’expérience avec du contenu de démarrage. Le contenu de démarrage montre du contenu par défaut aux utilisateurs pour qu’ils prennent directement connaissance du contenu du produit. Par exemple, lorsque vous aller pour la première fois sur  Tik Tok, il joue directement des vidéos sur le premier écran. L’utilisateur obtient un engagement immédiat avec le contenu. 

Troisièmement,  le contenu éducatif, il a pour but d’aider les utilisateurs à comprendre ce qu’une application sera capable de faire. Il attire l’attention d’une personne sur une partie de l’interface utilisateur et accroît l’engagement avec cet élément du produit. 

 

(le contenu de demarrage c’est vraiment le contenu qu’il y a sur l’appli qui peut interressé l utilisateur et qu’il va ajouter a ses favoris, de ce qui j’ai compris, ce qui ressemble beaucoup. a un des état du onboarding )

(démonstration de votre thème)

Dialogs

Une boîte de dialogue est une fenêtre contextuelle qui informe les utilisateurs sur une tâche et peut contenir des informations critiques, exiger des décisions ou impliquer plusieurs tâches. Elle va apparaît devant le contenu de l’application pour fournir des informations critiques ou demander une décision. Contrairement aux « Snackbars », les boîtes de dialogue désactivent toutes les fonctionnalités de l’application lorsqu’elles apparaissent et restent à l’écran jusqu’à ce qu’elles soient confirmées, rejetées ou qu’une action requise ait été entreprise.

Wireframe

Une « Wireframe » est souvent décrite comme le squelette de l’interface utilisateur éventuelle. Il s’agit d’une esquisse basse fidélité (parfois littéralement une esquisse au crayon et papier) de l’interface utilisateur. Les « Wireframes » transmettent les principales caractéristiques, fonctions et contenus d’une interface utilisateur, sans entrer dans la conception visuelle. La « Wireframe » peut servir de support de discussion avec les commanditaires du site web.

Cards

Les « Cards », aussi dit cartes, affichent du contenu et des actions ne concernant qu’un seul sujet. Elles doivent être faciles à analyser pour rechercher des informations pertinentes et exploitables. Les éléments, comme le texte et les images, doivent être placés dessus de manière à indiquer clairement la hiérarchie. Il y a des cartes pour indiquer les différents symptômes sur le site des yeux des enfants que nous avons réalisé.

Dividers

Le « Divider » est une séparation représentée par une fine ligne qui regroupe le contenu dans des listes et des mises en page claires. Il aide un concepteur à organiser la page et à rendre la mise en page plus claire et plus digeste pour les utilisateurs.

Tooltips

Les « Tooltips » affichent un texte informatif lorsque les utilisateurs survolent, se concentrent sur ou tapent sur un élément. Lorsqu’ils sont activées, les « Tooltips » affichent une étiquette de texte identifiant un élément, donnant une description de sa fonction. Le but d’utiliser des « Tooltips » c’est d’expliquer les principales fonctionnalités du produit à l’utilisateur.

(Par exemple lorsqu’on survol un élément de modification de texte dans Word.)