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

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

Les erreurs courantes d'UI

Les erreurs courantes d'UI

Les erreurs courantes d'UI

Les erreurs courantes d'UI

Mauvais alignements

Les erreurs courantes d'UI

Les erreurs courantes d'UI

C'est si grave que ça, une mauvaise UI ?

À vous de voir ! :-)

https://userinyerface.com/

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