Module 322 - Concevoir et implémenter une interface utilisateur

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

Partie 3

Objectifs du cours

Formulaire

Règles et normes

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

• Permet de clarifier les attentes en termes de design
• Permet de s'assurer que le graphisme sera homogène

Règles et normes

Guide de style

Quizz des bonnes pratiques

Effectuez le Quizz suivant : https://qruiz.net/Q/?fipz9v

Temps: 10 minutes

La maquette d'écran

Idée à prototyper en 1er  : formulaire pour connaître l'utilisateur et ses préférences

- Indiquer les champs obligatoire, utiliser des format de saisie et aide à la saisie. Mettre un exemple de feedback à l'utilisateur

- Appliquer les règles et vérifier vos styles afin qu'il soit cohérent partout

Outil : Figma

Périférique : mobile

Travail  individuel : chacun travaille sur

sa maquette mais les reflexions

peuvent se mener à 2

Wooflash

Répondez aux différentes questions liées à la matière enseignée

Connectez-vous à : https://app.wooflash.com/join/Z3DVCPV1