UI/UX

Chapitre 2
Elements de UI

©NESRINE ELLEUCH JALLOULI

ISET RADES ｜ Mastère MPDAM
2022/2023
Aperçu de contenu
Structure

• Eléments Visuels en UI
• Composantes UI
Visuels
 UI: Défintion
UI User Interface ou l’interface utilisateur est un dispositif matériel ou logiciel
qui permet à un usager d'interagir avec un produit informatique.
Il peut s’agir de l’interface d’une application mobile, d’un site internet ou de
tout appareil ou service interactif.
Plusieurs niveaux et éléments servent à instaurer un dialogue humain-machine :
clavier, souris, manettes de jeu, écran, audio etc. La prise en compte de leurs
spécificités dans le cadre d’usage détermine la qualité de l’expérience.
.
•https://cdn2.hubspot.net/hubfs/4641876/Imported_Blog_Media/Screenshot-NEW.png
 Une bonne UI
De manière générale, une bonne interface utilisateur présente des
caractéristiques communes :
• intuitive, facile à comprendre
•Les actions de l’utilisateur du site ou du logiciel entraînent le résultat
escompté
•La navigation et les éléments graphiques sont fluides et pertinents
•Le design est conçu de manière cohérente par rapport à l’image et aux
valeurs de la marques
“A user interface is like a joke. If
you have to explain it, it’s not that
good”.

Martin Leblanc, iconfinder.com

 UI Design
L’UI Design (User Interface Design), est l’étape de conception de l’interface
utilisateur.
Les concepteurs d’interfaces – applications mobiles, sites web, bornes
interactives etc. – participent à leur manière à élaborer l’identité visuelle de la
marque.
L’UI Design peut se définir sous deux angles essentiels et complémentaires :
“Ce qui se perçoit” : vue, toucher, audition, ressenti – avec ce que cela
implique d’émotionnel (interface agréable et esthétique, design émotionnel,
dimension humaine de l’écran…).
“Ce qui optimise l’interaction avec l’utilisateur du produit” :
fonctionnalités requises, qualité des contenus, parcours de navigation intuitif,
architecture de l’information…
Composants

• On distingue un ensemble de
composants utilisés dans les interfaces
•Contrôle de saisie
• Composants de navigation
• Composants informatifs
• Contenaires
• Exemple https://www.mockplus.com/blog/post/ui-elements
 Composants
• Contrôle de saisie
• Boutons
• Zones de texte
• Images et icones (représentent des liens hypertexte ou des boutons)
• case à cocher
• Boutons radio
• Listes et listes déroulantes
• Bouton Bascule ou Toggles
• Composants de navigation
• Barre de navigation
• Menus et menus déroulants
• Barres latérales
• Barres d’onglets ou Tab bars (pour les applications Android ou iOS apps)
• Liste de navigation en accordéon
• Arboresence de Menu en ou Tree Menus
• Fil d’ariane ou Breadcrumbs
• Carousels
• Barre/zone de recherche
• Tags
Composants

• Composants informatifs
• Info bulle
• Barre de progression
• Notifications
• Barre de chargement

• Contenaires
• cartes
• Boite de défilement
• Formulaire
De UI Design
UI
Ce que doit comprendre le UI
 Conception Design 5.
Couleur Mokups
Visuelle Graphique Typographie

• Respecter les principes

• Unité/uniformité: établir une harmonie entre les éléments de la page, de sorte qu'ils
semblent appartenir ensemble et que les utilisateurs ne soient pas distraits par des mises en
page chaotiques (par exemple, mal alignées).
• Gestalt ou psychologie de la forme : utilisez ces principes de perception des objets pour
guider les utilisateurs dans l'interprétation de votre conception.
• Hiérarchie - utilisez le placement, la police, etc. pour montrer l'importance.
• Équilibre - répartir uniformément les éléments.
• Contraste - utilisez des différences de couleur, etc. pour accentuer les éléments.
• Échelle - mettre en valeur les éléments afin d'établir leur importance ou leur
profondeur.
• Dominance - utilisez la taille, la couleur, etc. d'un objet pour le faire ressortir.
 Conception Design 5.
Couleur Mokups
Visuelle Graphique Typographie
Problèmes d’Unité Inconsistance des icones/flèches et du
Inconsistance de couleur et de police
contenu.
Gmail App, 2013.
Problèmes d’Uniformité dans un même site

Inconsistance de couleur et de police

Gmail App, 2013.
Conventions UI

Inconsistance de couleur et de police

Gmail App, 2013.
 Problèmes
Problème d’échelle et absence de dominance
d’Hiérarchie: site Arngren.
Site: Gatesnfences
 Problèmes
Problème de couleur
De contraste.
 Problèmes
Image de background trop présente, absence de contraste
 Conception Design 5.
Couleur Mokups
Visuelle Graphique Typographie
• Éléments (Source https://www.interaction-design.org/literature/topics/visual-design)
• Lignes (droites / courbes / géométriques / organiques), permettent de créer des divisions, des textures et des
formes.
• Formes - créer des zones fermées / autonomes.
• Espace négatif / espace blanc - utilisez la zone vide autour d'une forme «positive» pour créer un effet de
figure / de fond ou calmer le dessin dans son ensemble.
• Valeur - utilisez cette option pour définir la relation entre la clarté et l'obscurité, généralement via une source
de lumière pour créer des ombres et des reflets.
• Couleur - utilisez-le pour définir le thème / le ton et attirer l'attention.
• Texture - utilisez cette option pour définir la surface d’un objet..
• Différencier entre:
 Conception Design 5.
Couleur Mokups
Visuelle Graphique Typographie

Valeur
Utilisation de texture, blanc et Volume
 Conception Design 5.
Couleur Mokups
Visuelle Graphique Typographie

Texture Espace, couleur, valeur, contraste

Conception Design 5.
Couleur Mokups
Visuelle Graphique Typographie

• Hiérarchie:
• sur un Site, l’utilisateur peut effectuer plusieurs tâches/actions en même temps et voir plusieurs
informations
• Application: Une seule action à la fois, hiérarchie plus dégagée.
• Organiser les informations pour une lecture plus facile
• Créer une hiérarchie visuelle: F, Z, …
• Utilisez un layout: Responsive Grid, card, Tile Windows
 Conception Design 5.
Couleur Mokups
Visuelle Graphique Typographie

• Couleurs: Choisir les bonnes couleurs pour votre projet est très important en raison
des associations mentales avec les émotions et les significations. Il est également
important de suivre les couleurs de la marque et de les utiliser à bon escient en
fonction du design que vous souhaitez créer et du message que vous souhaitez
partager.
• Suivre la règle
• 60% dominant, 30% secondaire et 10% pour accentuer la couleur.
 Conception Design 5.
Couleur Mokups
Visuelle Graphique Typographie

UI: Couleurs: Source: https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753

 Conception Design 5.
Couleur Mokups
Visuelle Graphique Typographie

• La conception graphique: combiner des images, de la typographie ou des graphiques

animés.
• La conception graphique vise à poursuivre la perfection des pixels. Cela permet de
garantir que les textes ont un crénage parfait et que les couleurs sont conformes aux
directives de la marque. Le graphisme est une discipline spécialisée, et un certain
niveau de savoir-faire et un ensemble de compétences spécialisées (telles que la
typographie et la théorie des couleurs) sont nécessaires pour produire de superbes
graphismes. Il est souvent mélangé avec la conception visuelle.
Icones
Icones
 Icones
• Peut porter un sens, qui n’est pas le même que l’image, mais à laquelle on
associe
 Icones
• L’image peut être associée/connecté à une action dans l’interface
Icones
 Conception Design 5.
Couleur Mokups
Visuelle Graphique Typographie

• Une maquette est une maquette ou une maquette grandeur nature d'une conception
utilisée à des fins de démonstration, d'évaluation de conception, de promotion et à
d'autres fins. Des maquettes destinées à montrer l'aspect final du design avec des
détails visuels, tels que les couleurs et la typographie.
• Les wireframes, maquettes et prototypes sont souvent mélangés, mais ils ne
représentent que les différentes étapes du flux de conception. Un wireframe est un
moyen peu fidèle de présenter un dessin, il décrit les structures et les mises en page.
Contrairement à une structure filaire, une maquette ressemble plus à un produit fini
ou à un prototype, mais elle n'est ni interactive ni cliquable.
• Les maquettes sont utilisées pour offrir une gamme d'options pour structurer les
écrans dans les applications. Outre les mises en page, ils aident à organiser le contenu
et à rendre l'interface utilisateur compréhensible.
 UI: Mauqette

https://www.mockplus.com/blog/post/mobile-app-
wireframing-guide
 UI: Mauqette

https://www.mockplus.com/blog/post/mobile-app-
wireframing-guide
 UI: Maquette, quels outils (Source https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-
2017-46d59be0b3a9)

• Mockplus iDoc
• MockFlow
• Balsamiq

• Invision
• Flinto • Axure RP
• Framer • Proto.io
• RapidUI • Atomic
• Principle • UXPin
• Adobe XD • Hype 3
• Origami • ProtoPie
 Conception Design
Couleur Mokups Typographie
Visuelle Graphique

• La typographie est une force motrice dans toutes les formes d'art de la communication. C'est l'art et la
science du style, de l'apparence et de la structure des polices qui visent à fournir une copie esthétique et
facilement lisible aux lecteurs. La typographie permet d'ajouter une puissance d'impression à vos messages
sur un projet imprimé ou sur écran.
• Une bonne typographie doit:
• Fonctionne bien dans différentes tailles;
• Avoir des formes de lettres faciles à distinguer;
• Avoir une hiérarchie reconnaissable pour une meilleure perception.
• De plus, de nos jours, la conception de l'interface utilisateur dépend en grande partie de la conception de
mouvement, ce qui crée des commentaires instantanés de l'utilisateur cruciaux pour toute interface
utilisateur. Les animations, les effets visuels et les transitions d'écran ont un impact considérable sur la
manière dont les nouveaux utilisateurs interagiront avec l'application.
 Conception Design
Couleur Mokups Typographie
Visuelle Graphique

• La typographie permet de décrire ce que nous ne pouvons pas représenter, schématiser

• Démocratie
• Gouvernement, élections,
• Dans le Web
• Menu, instructions, noms, boutons
• Une bonne typographie doit:
• bien Fonctionner dans différentes tailles;
• Avoir des formes de lettres faciles à distinguer;
• Avoir une hiérarchie reconnaissable pour une meilleure perception.
Fonte
Conception Design
Couleur Mokups Typographie
Visuelle Graphique

• Peut être utilisée pour le Logo, brand (marque)

• Forme, identité reconnue et individuelle
• Google, Samsung, Dell, Coca Cola, Netflix
•
Fonte
 Police de caractères
• Pas d’ambiguité dans le sens, la signification
Fonte