Au quotidien, en mission, je suis amenée à échanger avec différents acteurs d’un projet. En fonction du poste et de l’appétence pour la discipline de l’UX-UI design, chacun a une connaissance différente des termes utilisés.
Au fil des missions, j’ai donc compilé un grand nombre de notions et c’est un vocabulaire que j’aurai aimé avoir quand j’ai débuté et que j’ai donc consolidé au fur et à mesure pour aider les futurs étudiants ou novices dans le digital.
Je vous ai donc préparé une série d’articles où chaque notion sera expliquée pour que vous puissiez vous y référer.
Nous continuons la série avec cette troisième partie et les 21 notions qui la composent. Si jamais vous souhaitez consulter les deux premières parties en amont, voici les liens : partie 1 et partie 2.
#1 _ Grille et espacements
Grille
La grille est un référentiel pour construire la structure des pages et hiérarchiser les informations. C’est un des exercices à s’atteler en premier lorsqu’on crée nos wireframes et nos maquettes ; et cela pour chacun des devices.
Ligne de base
La ligne de base permet d’avoir un repère lorsqu’on place un bloc de texte et pour déterminer quel interlignage choisir.
Point de rupture (breakpoint en anglais)
Un point de rupture est un palier. À partir d’une certaine largeur de la fenêtre, la mise en page et la disposition des contenus pourra varier pour s’adapter à l’espace disponible.
Espacements
Les espacements entre les différents éléments et contenus de vos interfaces sont très importants. En adaptant correctement les espaces, vous arriverez à créer un confort de lecture et à limiter les risques d’erreur.
- Margin : Contrôle l’espace entre l’élément actuel et les autres éléments de la page
- Padding : Contrôle l’espace entre le contenu et la bordure de l’élément.
Border-radius
La propriété “border-radius” est une propriété en CSS qui permet de définir l’angle des coins d’un élément. Chaque angle peut être défini différemment pour créer une forme inégale ou bien chaque angle peut avoir la même valeur. On retrouve des border-radius sur différents éléments d’une interface : un fond, une carte, un bouton, ect. Le choix du border-radius aura un fort impact sur le sentiment global de l’interface. Il est donc important de comprendre les propriétés que chacun offre.
J’ai écrit un article pour être guidé dans le choix du border-radius qu’on utilise en UI design : je vous partage ici le lien.
#2 _ Notifications et alertes
Toast / Snackbar
Le toast et la snackbar sont des composants qui permettent d’informer l’utilisateur d’une action en cours. Ce sont des notifications “in app”, contextuelles et qui sont non-obstructives (elles apparaissent, en général, que quelques secondes avant de disparaître).
Elles permettent de donner un message court sur quelque chose qui est en train de se passer (par exemple, un état).
- Toast : donne un feedback sur ce qui est en train de se passer actuellement
- s’affiche et disparaît sans action nécessaire de l’utilisateur
- il y a uniquement un message d’information (sans action)
- peut être contextuel plus largement au niveau de l’application
- Snackbars : affiche des alertes, des actions complémentaires
- on peut la faire disparaître manuellement grâce à un geste ou un bouton
- des actions contextuelles à l’action sont proposées
- doit être lié au contexte de l’écran affiché ou à l’action en cours
Fenêtre modale / non modale
- Fenêtre modale : s’ouvre au-dessus del’application et ne permet pas à l’utilisateur d’interagir avec la fenêtre d’application située « en dessous » (la fenêtre à l’origine de l’ouverture), tant qu’elle reste ouverte.
- Fenêtre non-modale : s’ouvre au-dessus de l’application également mais on permet à l’utilisateur de continuer à interagir avec la fenêtre d’application située « en dessous », sans avoir nécessairement à la fermer.
Pop-up / Pop-in
- Pop-up : est une fenêtre qui s’affiche au-dessusdu contenu. Celle-ci est ouverte par votre navigateur et non pas par le site. Tant que l’utilisateur ne la ferme pas, il est bloqué.
La pop-up est utilisée pour afficher des messages publicitaires, un avertissement ou une notification. - Pop-in : est une fenêtre qui s’affiche au-dessus du contenu également. Leur fonctionnement est similaire aux pop-ups. La différence est qu’elle se déclenche grâce au code du site internet et non pas du navigateur. La pop-in est utilisée pour afficher du contenu lié au site internet comme des images, des photos, des vidéos, …
Pop-over
Une pop-over peut être utilisée pour afficher un contenu par-dessus un autre. Par exemple, le descriptif d’une localisation sur une carte lorsque vous cliquez sur une ville.
Notifications push
La notification push est un message d’alerte envoyé par le serveur (qui “pousse” de l’information) à un utilisateur par le biais d’une application mobile.
#3 _ Les différents types de menu
Il permet de rassembler les entrées d’un site derrière un unique bouton.
Tab-bar
La tab-bar apparaît en bas d’une application mobile et permet aux utilisateurs de se déplacer rapidement entre les principales pages d’une application.
Conclusion
Nous nous retrouvons pour la prochaine série, la quatrième et dernière, où nous verrons ensemble une grande thématique : les composants de mise en page, des formulaires et d’action.
Si jamais vous souhaitez approfondir vos connaissances et pratiquer la conception d’une interface web, le centre de formation UX Republic propose une formation “UI Design, les fondamentaux”. Voici le lien pour en savoir plus.
Alexa CUELLAR, UX Designer @UX-Republic
