cours 8 - guide de styles UI Flashcards
(30 cards)
UI vs UX
UI fait partie du UX
UX: avant, pendant, après
UI: pendant (police, icone, image, couleurs)
definition omnicanal
même expérience UX à travers les différents canaux, même languages, formats, etc,
=> fluide
CX
Conception de l’expérience client
3 parties du UX
- Stratégie UX
- Recherche UX
- Conception UX
5 éléments de la conception visuelle à considérer - UI
Ligne
Couleurs & teintes
Contrastes (différents typo pour différents messages)
Hiérarchie
Typographie
Lignes 4 éléments
1) marge, espace, colonne
2) gride
3) placement du contenu
4) common screen sizes
Couleurs/teintes 4 éléments
1) couleur primaire, secondaire, tertiaire
2) teinte, nuances, ton
3) harmonies des couleurs
Contrastes 6 éléments
1) par taille
2) par forme
3) par texture
4) par couleur
5) par poste
6) par orientation
Hiérarchie 6 éléments
par taille, par couleur, par typographie, par espacement, par proximité, par répétition, par ligne d’entête, par distribution, par alignement, par perspective
Nommez les 7 lois fondamentales UI anticiper
- Loi de Jacob
- Loi de Fitt
- Loi de Hick
- Loi de Pastel
- Règle Peak-End
- Effet esthétique-utilisabilité
- Effet Von Restorf
Expliquer Loi de Jakob
“comme à l’habitude”, modèles mentaux guident nos interactions
Expliquer Loi de Fitt
La loi de Fitts aide à créer des interfaces plus intuitives et efficaces, en minimisant l’effort physique et mental de l’utilisateur.
Exemples:
- Un bouton large et bien placé est plus facile et rapide à cliquer.
- Un petit lien dans un coin de l’écran demande plus de précision → moins bon pour l’expérience utilisateur.
Expliquer Loi de Hick
Affirme que plus les gens ont de choix, plus il leur faut de temps pour prendre une décision
charge cognitive
Expliquer Loi de Postel
Systèmes doit etre plus robustes, tolérants aux erreurs et compatibles entre eux.
Être flexible: accepte même les formats légèrement incorrects ou inattendus, tant qu’ils sont compréhensibles. ex: format dun numero de telephone
Être rigoureux : respecte les normes et envoie des informations claires et bien formatées.
Expliquer la Règle Peak-End
Il faut soigner les moments clés, surtout les moments forts et la fin du parcours utilisateur
Le “pic” peut être un moment très agréable ou très désagréable.
La “fin” marque souvent l’impression globale que l’on garde.
ex: Un utilisateur peut oublier les petites frustrations si la fin de l’expérience est fluide, satisfaisante et rassurante.
Explique l’effet esthétique-utilisabilité
Le design visuel influence fortement la perception de la qualité.
Une bonne esthétique peut améliorer la satisfaction, la crédibilité et l’engagement de l’utilisateur.
Une belle interface donne une impression de confiance, de fluidité et de simplicité, ce qui peut rendre les utilisateurs plus tolérants aux petits défauts.
Explique l’effet Von Restorff
Pour guider l’utilisateur dans son parcours. Ce qui est différent attire l’attention.
exemple: Dans une liste de produits, un article en couleur vive, ou avec une forme unique, ressortira plus que les autres.
Nommez les 4 meilleurs pratiques d’une conversations numeriques
- Organisation du formulaire
- Étiquettes
- Champs
- Environnement
Organisation du formulaire 5
- afficher en une seule colonne
- garder le principal
- assurer une logique de lecture
- lister les options à la verticale
- afficher toutes les options si <6 (liste de 7 => drop box)
Étiquettes 5
- utiliser une étiquettes claire
- distinguer les étiquettes vs placeholders (couleur)
- garder les libellés courts
- éviter les majuscule (pas full maj)
- regrouper étiquettes et champs (+ condencer)
Champs 5
- être reconnaissable (mettre un box)
- regrouper les champs connexes (facilite la lecture)
- utiliser le bon format (carré pour selectionner plusieurs options, rond pour 1 options)
- ajuster sa longueur (mode de paiement en une ligne)
- différencier les champs (couleur des box pour ecrire vs bouton)
Environnement 4
- afficher le niveau de progression en haut du formulaire (+ d’engagement)
- contectualiser les erreurs (message doit etre en desosus du label, donne accès à trouver une solution au problème)
- Libeller les boutons selon l’action
- distinguer les actions primaires (bouton pour confirmation, X pour sortir)
Nommez 3 caractéristiques d’un système de conception
- guide de style incluant directives, références visuelles et principes de conceptions (lignes, guides de style, normes visuelle)
- bibliothèque de composants réutilisables prédéterminés
- bibliothèque de modèles de composants regroupés ou mise en page
Nommez 3 avantages du systeme conception
- répliquer rapidement les conceptions en réutilisant des composants prédéfinis
- assurer une cohérence visuelle entre les produits, les canaux, et les services
- intégrer rapidement de nouveaux contributeurs individuel
