Module 322 - Concevoir et implémenter une interface utilisateur

Les éléments t'interaction et les conventions d'usage

Partie 3

Objectifs du cours

Citez les règles à observer pour l’affichage des champs obligatoire
Expliquer la notion de formats de saisie
Mettre en place des feedbacks dans un formulaire
Respectez les règles en matière de design et guides de style

Formulaire

Champs obligatoire
Format de saisie
Aide à la saisie
Feedback à l'utilisateur

Règles et normes

Règles en matière de design
Guide de style

Formulaire

Un formulaire est composé de BEAUCOUP d'éléments différents
- Composants
- Feedback
- Interactions
Des fautes de conception peuvent être flagrantes, d'autres subtiles
Certains éléments sont « évidents » et directement explicites
Certaines interfaces nous rendent la vie plus facile durant leur utilisation.

Formulaire

Champs obligatoires

Informations que l'utilisateurs doit impérativement remplir

Indication visuelle
Explication claire
Validation immédiate

Formulaire

Champs obligatoires

Faut-il indiquer les champs obligatoires ?
- Surcharge le formulaire avec les mots obligatoires/optionnel ?
- L'astérisque rend peu esthétique un formulaire ?
- Trop de répétition dans le formulaire ?

Les (mauvaises) solutions de certains designers :

Indiquer en haut du formulaire "Tous les champs sont requis sauf indication contraire"
Ne marquer que les champs optionnels
D'autres... choisissent de ne rien faire !

Formulaire

Champs obligatoires

Pourquoi c'est un problème ces (mauvaises) solutions :

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 OBLIGATOIRES !

Formulaire

Champs obligatoires

Deux écoles pour indiquer un champs obligatoire :

L'astérisque (*)
- Incontournable et connue
- prend peu de place et distinguable
- recommandé d'utiliser du rouge ou couleur contrastée, éviter les couleurs pâles/grises

Le texte "Requis" / "Obligatoire" placer en placeholder

Formulaire

Champs optionnels

Pas obligatoire de les indiquer

Réduit certes la charge cognitive de l'utilisateur s'ils sont indiqués

Ne pas les spécifier n'est pas problématique

Formulaire

Champs obligatoires et optionnels

Dans un formulaire de connexion, il est évident qu'il est nécessaire d'indiquer un login et mot passe. Ne pas le spécifier ne serai pas une faute de conception....

Dans un formulaire d'inscription, chaque site requiert des champs et informations différentes. Il faut les préciser !

Formulaire

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

Certain designer donnent la responsabilité à l'utilisateur de formatter eux-mêmes leurs saisies...

Formulaire

Format de saisie

Respecter les conventions : +41 78 121 34 56

Utilisation de masques de saisie : un masque pour un numéro de carte bancaire limite la saisie à 16 chiffres et ajoute automatiquement des espaces

Correction automatique : Si possible, autorisez le système à corriger automatiquement des erreurs courantes, comme les majuscules ou l’ajout d’un espace à la fin.

Formulaire

Format de saisie

Permet d'éviter les incertitudes des utilisateurs
- Dois-je formatter moi-même ma saisie ?
- Quel symbole dois-je utiliser ?
- Ma saisie sera-t-elle valide avec des symboles ?

Permet de diminuer les erreurs de saisie

Permet de corriger et vérifier facilement sa saisie

Formulaire

Format de saisie avec masque de saisie

Visible avant la 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

Formulaire

Aide à la saisie

Accompagne l'utilisateur en fournissant des informations supplémentaires ou des suggestions pendant le remplissage

Placeholder
Message d'erreur en temps réel
Texte d'aide
Autocomplétion

Formulaire

Feedback utilisateur

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

Formulaire

Feedback utilisateur

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 : Message, animation, surbrillance, changement de couleur
- Sonore: Notification par un son, musique
- Haptique: Vibration sur un smartphone

Renforce la confiance entre l'utilisateur et son interface

Sans feedback -> risque de se sentir perdu ou incertain

Formulaire

Feedback utilisateur

Feedback de réussite : Message de réussite
- "Votre formulaire a bien été envoyé"
Feedback d’avertissement : Entraine des conséquences
- "En poursuivant, vous allez supprimer définitivement cet élément"
Feedback d’erreur : où se situe l’erreur, pourquoi
- "Le mot de passe saisi ne respecte pas les critères requis"
Feedback d’information : neutres n’implique pas d’action.
- "Les nouveaux articles seront disponibles demain"
Indicateurs de progression : un indicateur visuel de progression peut aider l’utilisateur à savoir où il en est dans le processus.
Feedback en temps réel : permet de corriger des erreurs immédiatement, sans attendre la soumission finale.

Formulaire

Feedback utilisateur

Cas pratique

Effectuez le Cas pratique 2 - Formulaire

Temps: 10 minutes

Règles et normes

Règles en matière de design

Ensemble de principes aidant à créer des interfaces utilisables
- La cohérence
- La simplicité
- La visibilité
- Le feedback

Standards clés
- Appliquer le WCAG 2.2
- Tailles minimales : texte 16 px
- Zones tactiles ≥ 44×44 px
- Longueur de ligne 45–75 caractères
- Hiérarchie des titres respectés
- Application des lois (Hick, Fitts, Tesler)

Règles et normes

Guide de style

Aussi appelé charte graphique

Document standardisant les éléments visuels et interactifs d'une interface utilisateur

Permet d'assurer une cohérence visuelle et fonctionnelle

Essentiel pour la collaboration entre
les designers et les développeurs

Règles et normes

Guide de style

Un guide style se compose souvent des éléments suivants :
- Les couleurs
- La typographie
- L'iconographie
- Les grilles et mises en page
- Les composants UI