Petit lexique UX-UI (partie 2)

 

 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 avons commencé la série le mois dernier avec la première partie, nous la continuons avec les 19 notions suivantes.

#1 _Types de pages et écrans

Gabarit (template, layout en anglais)

Un gabarit nous sert de document de référence qui reprend une même structure des éléments qui le composent.

Par exemple, sur un site média, nous allons créer une page type pour les articles qui sera reprise à chaque fois. Le texte et les images auront leur place attitrée.

Splashscreen

C’est un écran qui s’affiche à l’ouverture d’une application ou bien lors du chargement des données à l’écran.

Cet écran permet de faire patienter l’utilisateur. Le logo de l’application est souvent mis en valeur.

Onboarding

Les étapes d’onboarding sont représentées par quelques écrans pour introduire le produit ou une nouvelle fonctionnalité à un utilisateur lorsqu’il y accède pour la première fois.

C’est une étape importante dans l’expérience que l’on retrouve de plus en plus dans les outils que nous utilisons car elle permet de faire une bonne première impression et de guider vers les fonctionnalités clés.

Landing page

Une landing page est une page internet spécifique. L’utilisateur y accède après avoir cliqué sur une publicité ou un bouton d’action par exemple. Elle a pour objectif de dérouler une campagne marketing pour commercialiser un produit ou un service.

L’utilisateur peut arriver sur une landing page en consultant les réseaux sociaux, une publicité sur un site ou un email.

#2 _Les organismes transverses

Header

Un header désigne le haut d’une page d’un site web. Il est en grande majorité transverse, c’est-à-dire qu’il est présent sur la grande majorité des pages du site.
Il a un double objectif, identifier l’entreprise et présenter la navigation.

Barre latérale (aside ou side bar en anglais)
Une barre latérale permet d’avoir sur le côté de la page un groupe d’actions de navigation ou de contenu.

Footer

Un footer désigne la partie basse d’un site web. Comme le header, on le retrouve à l’identique, en règle générale, sur toutes les pages.

Le footer permet de finaliser le site. Sa conception est donc importante. On peut y faire référer des liens et des textes devant figurer sur toutes les pages, comme les informations de contacts, le plan du site, les mentions légales, …

Fil d’ariane (“breadcrumbs” en anglais)

Le fil d’Ariane permet aux utilisateurs de voir leur emplacement actuel et d’afficher la hiérarchie des contenus. L’utilisateur pourra revenir sur une page consultée au cours de sa navigation plus rapidement.

Hero banner

Un hero banner est une section d’une page internet qui s’étend sur toute la largeur de l’écran.

On l’utilise souvent en haut des pages pour donner envie à l’utilisateur et créer un univers.

#3 _Identité de marque

Le logotype

Un logotype correspond au nom de l’entreprise qui est conçu graphiquement pour la représenter.

On va souvent utiliser une police ou des formes qu’on va personnaliser pour faire transparaître l’identité et les valeurs de l’entreprise.

Logotype Google

Le logomark (= insigne en français)

Le logomark ne comprend généralement pas le nom de l’entreprise. Il s’agit d’une représentation plus abstraite qui va contribuer à renforcer l’identité d’une entreprise.

On utilise souvent un pictogramme très parlant qui permettra au lecteur d’identifier la nature de l’entreprise. D’ailleurs, c’est souvent le logomark qui est repris sur les objets (goodies), les vêtements et autres éléments publicitaires.

Logomark Google

Le logo

Le logo désigne tous les types d’emblèmes qui peuvent représenter une marque. Donc autant les logotypes que les logomarks.

Certains logos sont les deux à la fois, le logo d’UX Republic par exemple. Ils contiennent à la fois un élément textuel stylisé et un élément graphique. Selon l’utilisation, on retrouvera soit le logotype, soit l’insigne soit la combinaison des 2.

Le logo UX Republic

Favicon

C’est l’icône qui s’affiche dans les onglets et les liens ajoutés en favoris dans les navigateurs web.
Le mot favicon est une contraction des termes « favori » et « icône ». C’est un élément graphique destiné à identifier plus facilement les sites dans les listes et barres de favoris de votre navigateur web.

La palette de couleurs

La palette de couleurs est généralement divisée en plusieurs groupes :

●  Les couleurs primaires et secondaires

●  Les nuances de gris

● Les couleurs de statut (succès, avertissement, etc.)

La palette de couleurs permet de créer l’univers d’une marque et d’orienter le consommateur sur ses inspirations.

En définissant une palette, on s’assure d’apporter de la cohérence et de l’homogénéité dans les parcours pour optimiser l’expérience utilisateur.

 

#4 _La typographie

La police

La police de caractère désigne un assortiment de caractères typographiques ayant un dessin particulier (lettres, chiffres, ponctuations, ).

Une police possède 5 caractéristiques que l’on peut faire varier individuellement :

●  la famille

●  la graisse

●  la forme ou le style

●  la taille (le corps)

●  la casse (majuscule, minuscule)

Les fontes (font en anglais)

C’est un ensemble de caractères d’une même police ayant la même famille, la même graisse, la même taille et la même forme. Par exemple, chez UX Republic, nous utilisons la fonte Montserrat.

Les familles typographiques

Il existe 5 familles :

●  Serif : qui englobe les polices à empattement (exemples : Times New Roman, Georgia, Garamond…)

●  Sans-serif : ou polices sans empattement (ex : Helvetica, Montserrat, Myriad…)

●  Cursive : qui sont les polices qui simulent l’écriture à la main (ex: Lucida Handwriting, mais aussi Comic Sans MS (et oui !))

●  Fantasy : polices plus exotiques, décoratives (ex : Impact, Fraktur…)

●  Monospace : polices à chasse fixe (largeur utilisée pour chaque caractère) (ex : Courier New, Lucida Console…)

# Conclusion

Nous nous retrouvons pour la prochaine série, la troisième et avant-dernière, où nous verrons ensemble 3 grandes thématiques : grille et espacements, les notifications et alertes et enfin les différents types de menu sur le web.

Si jamais vous avez loupé la première partie de cette série, je vous invite à consulter ce lien.

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

Source images :
– https://undraw.co/

Nos prochaines formations