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 ?

À vous de voir ! :-)

https://userinyerface.com/

Testez vos connaissances !

• https://www.menti.com/
  • Code : 7158 4882

• https://www.menti.com/alo1w1zsh1qd

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

1. Menus déroulants
2. Menus "hamburgers"
3. 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

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

Exemple - Site Web MST Agency

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

• Form Design Best Practice

• 10 Tips to design forms

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'

1. Les possibilités de paiement sont affichées
2. On peut changer le montant à payer -> pas besoin de revenir en arrière
3. Nom sur la carte
4. Numéro de carte validant le type de carte -> feedback en tant réel
5. Format de la date d'expiration en MM.YY (pourrait être MM/YYYY)
6. Infobulle pour le CCV
7. Bouton explicite et non ambigu, indiquant ce qu'il va se passer
8. 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 !