Module 322 - Concevoir et implémenter une interface utilisateur
Éléments d'interactions et les conventions d'usage
Composants graphiques
- Élément visuels
- Permettent la communication et interaction avec le système
- Points de contact principaux entre utilisateur et logiciel
- Facilite l'exécution d'actions spécifiques
Boutons
- Très utilisés
- Déclencher une action spécifique au clic
Exemple :
- Bouton de soumission (Submit)
- Bouton d'appel à l'action (CTA = Call To Action)
Bonnes pratiques :
- Couleurs distinctes pour les actions principales
- Ajouter un feedback visuel
Boutons
Champs textuels
- Permet à l'utilisateur la saisie "libre" des informations
Exemple :
- Champ de saisie
- Champ de recherche
Bonnes pratiques :
- Texte d'exemple ou un placeholder
- Visibilité suffisante/Contraste entre texte et arrière-plan
- Feedback visuel lorsque l'on est dans le champ
Champs textuels
Sélecteurs de dates
- Permet de sélectionner des dates précisement
- Utilisation d'un calendrier visuel
- Formatage de la date automatique
- Evite les erreurs de saisie
Exemple :
- Formulaire de réservation
- Calendrier
Sélecteurs de dates
Bonnes pratiques :
- Afficher le format en placeholder (JJ.MM.AAAA)
- Bloquer les dates passées ou non disponibles selon contexte
- S'assurer que le sélecteur soit accessible via clavier et compatible avec les lecteurs d'écran
- S'assurer que la navigation soit aisée dans le calendrier
- Si une plage est nécessaire, permettre une sélection facile
- Utiliser des contrastes pour indiquer les dates clés (jour actuel, dates sélectionnées, dates non disponibles)
- Garder la possibilité de saisir la date au clavier, en formattant automatiquement la date
Sélecteurs de dates
Cases à cocher
- Permettent à l'utilisateur de sélectionner UNE OU PLUSIEURS OPTIONS INDÉPENDANTES
Exemple :
- Formulaire d'inscription
- Liste de tâches
- QCM à réponses multiples
Bonnes pratiques :
- Utiliser du langage positif
- Label sur la droite, clair et concis
Cases à cocher
Boutons radio
- Permettent à l'utilisateur de choisir UNE SEULE OPTION parmi plusieurs
Exemple :
- Sélection du sexe à la création du profil utilisateur
- Choisir un mode de paiement
- Choisir une seule réponse à un QCM.
Bonnes pratiques :
- Regroupement logique
- Utiliser des labels explicites
- Toujours présélectionner une option (la + courante)
- Permettre de sélectionner "Aucun" si c'est voulu
Boutons radio
Listes déroulantes
- Permettent de choisir une ou plusieurs options parmi une liste
- Gagner de la place dans l'interface
Par exemple :
- Sélection d'un pays
- Filtres de recherches
Bonnes pratiques :
- Afficher une option par défaut significative
- Faciliter l'ouverture du menu
- Assurer la lisibilité des options sur les petits écrans (mobiles)
- Utiliser la liste déroulante lorsque les options sont nombreuses
Listes déroulantes
Interrupteurs
- Permettent d'activer/désactiver d'une option ou fonctionnalité
- Fonction purement binaire
Exemple :
- Paramètres de notification
- Mode sombre
Bonnes pratiques :
- États on/off distinguables et compréhensibles
- Ajouter une étiquette descriptive
Interrupteurs
Icônes
- Représentations graphiques simples
- Illustrent des actions ou concepts
- Supprime le besoin de texte
Exemple :
- Une loupe
- Les 3 lignes horizontales superposées
Bonnes pratiques :
- Utiliser des icônes universelles et reconnues
- Vérifier la taille des icônes
Conseils généraux
- Cohérence
- Accessibilité
- Feedback visuel
Choisir le bon composant
- Sélectionner le composant approprié
- Faciliter l'interaction de l'utilisateur
- Rendre l'expérience intuitive et fluide
- Réfléchir au contexte
Choisir le bon composant
Exemples :
-
"L'utilisateur aura un choix limité et défini d'options"
- Checkbox
- Liste déroulante
- Bouton radio
-
"Il aura une liberté de saisie"
- Champ textuel
-
"Il pourra sélectionner plusieurs choix"
- Checkbox
- Liste déroulante (à sélection multiple)
-
"Il ne sélectionnera qu'un choix
- Bouton radio
- Liste déroulante
-
"Combien de choix y a -t-il ?
- Beaucoup -> Liste déroulante
- Peu -> Bouton radio
-
"Il devra sélectionner une date
- Sélecteur de dates
Les erreurs courantes d'UI
1. Incohérence
Les erreurs courantes d'UI
2. Distinction faible des boutons
Les erreurs courantes d'UI
3. Manque de hiérarchie textuelle
Les erreurs courantes d'UI
4. Mauvaise iconographie
Les erreurs courantes d'UI
5. Mauvais alignements
Les erreurs courantes d'UI
6. Formulaires incompréhensible
Les erreurs courantes d'UI
7. Composants trop petits pour mobiles
C'est si grave que ça, une mauvaise UI ?
Testez vos connaissances !
Navigation
- Permet à l'utilisateur de se déplacer dans une interface
- Aide les utilisateurs à atteindre leurs objectifs et trouver ce qu'ils cherchent
- Une mauvaise navigation peut frustrer les utilisateur et les pousser à quitter le site ou l'application
Principes de bases :
- Facilité de compréhension
- Cohérence
- Accessibilité
Navigation principale
- Interface contenant les liens vers les contenus les plus importants
- Typiquement situé en haut ou à gauche de la page
- Permet de trouver rapidement les contenus en quelques clics
- Le contenu "important" varie selon le type de site.
Navigation secondaire
- Complète la navigation principale
- Donne accès à des sections ou informations moins prioritaires
- Prend en charge les utilisateurs cherchant des informations complémentaires
Fil d'Ariane
- Chemin textuel montrant où se situe l'utilisateur dans la hiérarchie du site
- Permet de revenir rapidement à des niveaux supérieurs de la navigation et à comprendre la structure du site
- Utile sur des sites complexes où les utilisateurs peuvent se perdre facilement
Représentation des menus
- Essentiels au sein d'une application ou site web
- Permet à l'utilisateur de trouver les éléments qu'il cherche facilement
- Menus déroulants
- Menus "hamburgers"
- Menus fixes
Menus déroulants
- S'ouvrent lors d'un clic ou un survol de souris sur un élément principal
- Dévoilent des sous-entrées
- Utiles aux sites avec beaucoup de sections et/ou sous catégories
- Adaptés au sites "Desktop"
- Navigation structurée, hiérarchisée et organisée
Menus hamburger
- Disposent d'une icône à 3 lignes horizontales
- Souvent trouvés sur les applications mobiles
- Cachent les options pour économiser de l'espace à l'écran
- Offre un design propre, léger et minimaliste
Menus fixes
- Menus toujours visibles
- Généralement en haut de page
- Permet un accès rapide aux sections principales du site en tout temps
- Idéal lorsque l'accès constant à certaines sections est nécessaire
- Fonctionnent bien sur Desktop et tablettes
- Peut réduire le nombre de clic et de déplacement nécessaire
Concevoir un bon menu
- Clarté des libellés
- Organisation logique
- Adaptabilité
Éléments d'interactions et les conventions d'usage
Partie 2
Interaction
- La manière dont les utilisateurs interagissent avec un produit
- Une bonne interaction doit être intuitive et fluide
- L'interaction se divise en 5 dimensions
- Les mots (1D)
- Les représentations visuelles (2D)
- Les objets physiques et l'espace (3D)
- Le temps (4D)
- Le comportement (5D)
Interaction - 5 dimensions
-
Les mots (1D)
- Les textes que l'utilisateur voit et avec lesquels il peut intéragir
-
Les représentations visuelles (2D)
- Les éléments visuels aidant à la compréhension
-
Les objets physiques et l'espace (3D)
- Les périphériques et interfaces matériels dont l'utilisateur se sert pour interagir avec le produit
-
Le temps (4D)
- Les éléments d'interactions qui changent au fil du temps
-
Le comportement (5D)
- La façon dont l'utilisateur effectue une tâche et la réponse du système à ses actions.
Interaction - 5 dimensions
Types d'interaction
| Ordinateur | Mobile |
|---|---|
| Clic simple | Appui bref |
| Double clib | Scroll |
| Clic maintenu | Appuyer longuement |
| Etats de survol | Balayage |
| Touches de raccourci | Etirer |
| Touche clavier TAB | Pincer |
| Voix | Rotation 90° |
| Secousse | |
| Voix |
Micro-interaction
- Petites animation ou réponses du système à une action de l'utilisateur
- Apporte une touche d'interactivité, fluidité et de réactivité
- Offre souvent un retour immédiat à l'utilisateur
- Renforce la confiance de l'utilisateur envers le produit
Objectifs :
- Confirmer une action
- Donner un feedback
- Indiquer le statut d'une action
- Guider l'utilisateur
Micro-interaction
La micro-interaction suggère, elle ne s'impose pas
Elle doit servir à :
- Indiquer une direction
- Mettre en avant un changement
- Situer l'utilisateur
- Souligner un élément
- Véhiculer une information
- Accompagner l'utilisateur
- Apporter une identité
Une micro-interaction apportera donc de la vie à une interface et peut renforcer la personnalité et identité de la marque.
Feedback
- Informe l'utilisateur de l'état du système, indique si l'action a été prise en compte ou fournit des instructions de correction
- Communication visuelle, sonore ou haptique
- Renforce la confiance entre l'utilisateur et son interface
- Sans feedback -> risque de se sentir perdu ou incertain
Feedback
Les feedbacks les plus courants :
-
Message de succès
- Confirme l'action de l'utilisateur
-
Message d'avertissement
- Met en garde l'utilisateur des conséquences indésirables
-
Message d'erreur
- Informe l'utilisateur d'un problème
-
Message d'information
- Fournit des informations "neutres"
Feedback
"Le feedback est un indicateur immédiat de la réussite ou de l'échec d'une action de l'utilisateur."
Un bon feedback...
- Renforce la confiance
- Aide à corriger les erreurs
- Guide l'utilisateur
Feedback
Le feedback peut prendre plusieurs formes
-
Visuel
- Message, animation, surbrillance, changement de couleur, ...
-
Sonore
- Notification, branchement USB, ...
-
Haptique
- Vibrations, activation d'un bouton, ...
Feedback
Les modèles mentaux
- Représente la façon dont une personne comprend et anticipe le fonctionnement d'un produit ou système
- Les modèles mentaux se forment sur les expériences et connaissances passées des utilisateurs
- Prendre en compte les modèles mentaux permettra une prise en main facile et réduira le besoin d'apprentissage
Les modèles mentaux
Les modèles mentaux
Modèle mental de la navigation
- Savoir où l'on est
- Savoir ce que l'on peut faire
- Savoir où l'on va ou ce qui va se passer
- Savoir d'où l'on vient ou ce que l'on a fait
L'affordance
- La capacité d'un objet ou un système à évoquer son utilisation, sa fonction
- Aide à savoir à quoi s'attendre d'une interface utilisateur
- Lorsque les affordance sont exploitées, l'utilisateur sait quoi faire simplement en regardant
L'affordance
- Une affordance est construire à partir des modèles mentaux qui existent dans le monde physique
- ... mais sont également utilisées avec des produits digitaux
FICHE DE TRAVAIL - 10'
Les types d'affordances
- À l'aide du fichier FT02...
- Par 2, regroupez les bonnes définition et images d'exemple en fonction des types d'affordances
- Les définitions et images vous sont données, à vous de les mettre au bon endroit
Les lois d'interaction
Loi de Hick
Plus une personne est confrontée à des choix, plus elle mettra de temps à prendre une décision
- Réduction d'option, regroupement, présélection, division en sous-groupe, ...
Les lois d'interaction
Loi de Tesler
Chaque application possède une complexité inhérente qui ne peut être supprimée ou masquée
- Alléger la complexité en à l'aide de traitements en arrière-plan
Les lois d'interaction
Loi de Fitts
Le temps nécessaire à une personne pour déplacer un curseur vers une zone cible est fonction de la distance et taille de la cible
- Rapprocher les options les plus utilisées vers la zone d'interaction principale
Orientation
- Capacité de l'utilisateur à savoir où il se trouve dans l'application ou le site à n'importe quel moment
- Permettre à l'utilisateur de savoir d'où il vient et où il peut aller ensuite
- Faciliter le retour en arrière ou la redirection, sans avoir à recommencer
Orientation
- Indicateurs visuels clairs
- Fil d'Ariane
- Navigation cohérente
Ordre
- La manière dont les éléments sont présentés les uns par rapport aux autres
- Aider l'utilisateur à comprendre où porter son attention
- Simplifier la navigation et minimiser la confusion
- Organiser l'interface pour naviguer facilement
- Éviter de surcharger cognitivement l'utilisateur
Ordre
-
Hiérarchie visuelle
- Contraste de visibilité entre éléments principaux/secondaire
- Titres, hiérarchie, emplacement logique
-
Alignement et espacement
- Éléments alignés, espacés
- Cohérence
- Facilite la lecture
-
Regroupement similaire et présentation logique
- Regroupement en catégories
- Organiser les informations
Désignation
- La manière dont chaque élément est identifié et nommé
- S'assurer que chaque élément soit compréhensible, identifiable et sans ambiguïté
- Étiquettes claires et descriptives
- Icônes avec textes d'accompagnement
- Langage simple et direct
- Consistance dans l'étiquetage
- Cohérence des couleurs et des styles
CAS PRATIQUE
- En individuel - Analysez ce site
- Faites un "rework" de ce formulaire sur Figma
- Dans un document texte, expliquez les éléments que vous avez identifiés comme faux et expliquez votre raisonnement de solution.
- Recréez le en veillant à n'oublier aucun élément
- Aidez-vous des bonnes pratiques que l'on a vu
- Allez-y étapes par étapes
- Structure -> Disposition -> Composants -> Interactions -> Styles -> Détails
- Travail autonome et seul, mais aidez-vous si besoin (dans le calme 😄)
- Retour sur Teams : PDF + Fichier Figma + document texte
Éléments d'interactions et les conventions d'usage
Partie 3
(je n'ai toujours pas acheté l'abonnement)
Correction du formulaire
- Aucun placeholder
- Aucune icône
- Département incompréhensible
- Lieu de travail indéfini
- Regroupement illogique
- Pas d'infobulles d'aide
- Pas d'affichage conditionnel
- Mauvais choix de composants
Correction du formulaire
Correction du formulaire
Correction du formulaire
Correction du formulaire
Super le message de confirmation...
Formulaires
- Un formulaire est composé de BEAUCOUP d'éléments différents (composants, feedback, interactions, ...)
- Des fautes peuvent être flagrantes, d'autres subtiles
- Les éléments "évidents" ne nous marquent plus
- Les fonctionnalités nous facilitant la vie ne nous marquent plus
Champs obligatoires
- Informations que l'utilisateurs doit impérativement remplir
- Indication visuelle
- Explication claire
- Validation immédiate
Le grand débat
- Faut-il indiquer les champs obligatoires ?
- Surcharge ?
- Moche ?
- Répétitifs ?
Certains designers font appels à deux alternatives :
- Indiquer en haut du formulaire "Tous les champs sont requis"
- Ne marquer que les champs optionnels
D'autres... choisissent de ne rien faire !
Pourquoi c'est un problème...
- Les gens ne lisent pas les informations
- Même s'ils les lisent, ils pourraient les oublier
- Les gens doivent scanner le formulaire pour déterminer si un champ est requis ou pas
La solution est simple : MARQUEZ LES CHAMPS !
Comment les marquer ?
Deux écoles...
- L'astérisque (*)
- Le texte "Requis" / "Obligatoire"
L'astérisque
- Incontournable, connu
- Prend très peu de place et est distinguable du label
- Recommandé d'utiliser du rouge ou une couleur contrastée par rapport au label
- Éviter les couleurs pâles, grises et à faible contraste.
Les champs optionnels
- Pas obligatoire
- Réduit certes la charge cognitive de l'utilisateur
- Ne pas les spécifier n'est pas problématique
Le contexte est important
- Dans un formulaire de connexion, il est évident qu'il est nécessaire un login et un mot passe. Ne pas spécifier n'est pas catastrophique. Mais vaut mieux prévenir que guérir :-)
- Dans un formulaire d'inscription, chaque site requiert des champs et informations différentes. Il faut les préciser !
Format de saisie
- Défini la manière dont les données doivent être entrées
- Aide à structurer les données et à éviter les erreurs courantes
- Evite à l'utilisateur la charge de formater lui-même son entrée
- Donne un retour visuel direct à l'utilisateur
Beaucoup de designer donnent la responsabilité à l'utilisateur de formatter eux-mêmes leurs saisies...
Incertitude
- Dois-je formatter moi-même ma saisie ?
- Quel symbole dois-je utiliser ?
- Ma saisie sera-t-elle valide avec des symboles ?
- Risque d'erreur accrue
Difficulté de correction
- Si les utilisateurs choisissent de ne pas formater leurs entrées, toute erreur sera plus compliqué à corriger !
Les masques de saisie
- Permet à l'utilisateur de n'entrer que les caractères nécessaires
- Le masque s'occupe d'insérer les données dans le bon format
Aide à la saisie
- Accompagne l'utilisateur en fournissant des informations supplémentaires ou des suggestions pendant le remplissage
- Placeholder
- Texte d'aide
- Autocomplétion
- Message d'erreur en temps réel
Feedback utilisateur
- Feedback de réussite
- Feedback d'erreur
- Indicateurs de progression
- Feedback en temps réel
Bonnes pratiques
Exercice en commun - 5-10'
- Ce formulaire a été amélioré, expliquez POURQUOI ce sont des améliorations ? En quoi ces changements sont bénéfiques ?
Exercice en commun - 5-10'
- Les possibilités de paiement sont affichées
- On peut changer le montant à payer -> pas besoin de revenir en arrière
- Nom sur la carte
- Numéro de carte validant le type de carte -> feedback en tant réel
- Format de la date d'expiration en MM.YY (pourrait être MM/YYYY)
- Infobulle pour le CCV
- Bouton explicite et non ambigu, indiquant ce qu'il va se passer
- Icône de cadenas -> sécurisé -> confiance !
CAS PRATIQUE
- Vous devez réaliser un formulaire pour l'inscription à un service nommé "ÉcoMobilité"
- Dans cet exercice, vous devrez mettre en pratique ce qu'on a vu pour faciliter la vie de l'utilisateur !