Module 322 - Concevoir et implémenter une interface utilisateur
Les éléments t'interaction et les conventions d'usage
Partie 1
La maquette d'écran
Idée à prototyper en 1er : formulaire pour connaître l'utilisateur et ses préférences
Créer la maquette (mockup) : Créer le formulaire afin de connaitre les préférences de l'utilisateur
Que va-t'on demander à l'utilisateur ?
Objectifs du cours
- Choisir le bon composant graphique
- Appliquer les bonnes pratiques
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
Fiche de travail
Effectuez l'exercice 1 et 2 de la Fiche de travail - Composants graphiques
Temps: 20 minutes
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)
Champs textuels
Permet à l'utilisateur la saisie "libre" des informations
Exemple :
- Champ de saisie
- Champ de recherche
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
Cases à cocher
Permettent à l'utilisateur de sélectionner une ou plusieurs option indépendantes
Exemple :
- Formulaire d'inscription
- Liste de tâches
- QCM à réponses multiples
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.
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
Interrupteurs
-
Permettent d'activer/désactiver d'une option ou fonctionnalité
-
Fonction purement binaire
Exemple :
- Paramètres de notification
- Mode sombre
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
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
Fiche de travail
Effectuez l'exercice 3 et 4 de la Fiche de travail - Composants graphiques
Temps: 10 minutes
La maquette d'écran
Idée à prototyper en 1er : formulaire pour connaître l'utilisateur et ses préférences
Créer la maquette (mockup) : Créer le formulaire et utiliser les bons composants
Outil : Figma, ajouter les librairies
Périférique : mobile
Travail individuel : chacun travaille sur sa maquette mais les reflexions peuvent se mener à 2
Conseils généraux
- Cohérence
==> Utiliser le même style de bouton pour toutes les actions princiaples comme "Envoyer", Sauvegarder"
- Feedback visuel
==> lorsqu’une action réussit ou échoue, un message clair apparaît (ex. “Fichier téléchargé avec succès” ou “Erreur de connexion”
- Accessibilité
==> S'assurer que le contraste entre le texte et son arrière-plan est suffisamment élevé pour être lisible par les personnes malvoyantes ou daltoniennes.
Boutons
Bonnes pratiques :
- Couleurs distinctes pour les actions principales
- Ajouter un feedback visuel
Champs textuels
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
Sélecteurs de dates
Bonnes pratiques :
- Afficher le format en placeholder (JJ.MM.AAAA)
- Bloquer les dates passées ou non disponibles selon contexte
- Garder la possibilité de saisir la date au clavier, en formattant automatiquement la date
- 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, 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)
Cases à cocher
Bonnes pratiques :
- Utiliser du langage positif
- Label sur la droite, clair et concis
Boutons radio
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
Listes déroulantes
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
Interrupteurs
Bonnes pratiques :
- États on/off distinguables et compréhensibles
- Ajouter une étiquette descriptive
Icônes
Bonnes pratiques :
- Utiliser des icônes universelles et reconnues
- Vérifier la taille des icônes
Les erreurs courantes d'UI
Incohérence
Les erreurs courantes d'UI
Distinction faible des boutons
Les erreurs courantes d'UI
Manque de hiérarchie textuelle
Les erreurs courantes d'UI
Mauvaise iconographie
Les erreurs courantes d'UI
Mauvais alignements
Mauvais alignements
Les erreurs courantes d'UI
Formulaires incompréhensible
Les erreurs courantes d'UI
Composants trop petits pour mobiles
C'est si grave que ça, une mauvaise UI ?
La maquette d'écran
Idée à prototyper en 1er : formulaire pour connaître l'utilisateur et ses préférences
Corriger votre interface selon les bonnes pratiques
Outil : Figma, ajouter les librairies
Périférique : mobile
Travail individuel : chacun travaille sur sa maquette mais les reflexions peuvent se mener à 2
322-5 Les éléments d'interaction et les conventions d'usage - partie 1
By Myriam Fallet
