Module 322 - Concevoir et implémenter une interface utilisateur
Les éléments t'interaction et les conventions d'usage
Partie 2
Objectifs du cours
-
Mettre en place une navigation
-
Citer les types de menus
-
Créer une orientation dans un formulaire
-
Respectez l’ordre dans un formulaire
-
Expliquer la designation
-
Citer les 5 dimensions d’une interaction
Navigation
Orientation
Ordre
Désignation
Interaction
Menus
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
- Essentiels au sein d'une application ou site web
- Permet à l'utilisateur de trouver les éléments qu'il cherche facilement
- Menus déroulants
- Menus "hamburgers"
- Menus fixes
Représentation des menus
Menu déroulant
- 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
Représentation des menus
Menu 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
Représentation des menus
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
Représentation des menus
Concevoir un bon menu
- Clarté des libellés
- Organisation logique
- Adaptabilité
Représentation des menus
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
Navigation cohérente
Maintenir les mêmes éléments de navigation sur toutes les pages permet de ne pas désorienter les utilisateurs. Le fait que les menus soient toujours au même endroit améliore la fluidité de l’expérience
Indicateur visuel clairs
Utiliser des onglets ou un menu qui montrent la section active. Cela peut inclure des changements de couleur ou des icônes sur les éléments sélectionnés.
Orientation
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
Orientation
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, taille et couleur
- 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
Ordre
La maquette d'écran
Idée à prototyper en 1er : formulaire pour connaître l'utilisateur et ses préférences
- Ajouter une navigation / menu (aidez-vous du trie par carte)
- Ajouter une orientation dans le formulaire
- Respecter l'ordre dans votre formulaire
Outil : Figma
Périférique : mobile
Travail individuel : chacun travaille sur sa maquette mais les reflexions peuvent se mener à 2
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
Désignation
Les modèles mantaux
- 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
Désignation
Les modèles mantaux
Désignation
Les modèles mantaux de l'Hamburger Menu : icône composée de trois lignes empilées, est largement utilisé car il économise de l’espace à l’écran et offre un accès clair et rapide a la navigation
Désignation
Modèle mental des boutons précédant et suivant : Les flèches gauche et droite sont utilisées pour naviguer respectivement en arrière et en avant, un modèle mental culturellement acquis qui permet aux utilisateurs de comprendre intuitivement leur fonction
Désignation
Modèle mental de la barre de menu : La barre de menus, généralement en haut des applications, suit le modèle mental selon lequel cliquer dessus donne accès à toutes les options disponibles de l’application.
Désignation
- 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
Désignation
- Une affordance est construire à partir des modèles mentaux qui existent dans le monde physique
- ... mais sont également utilisées avec des produits digitaux
L'affordance
Fiche de travail
Effectuez l'exercice 1 de la Fiche de travail - Les type d'affordance
Temps: 10 minutes
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
-
Les mots (1D)
- Les textes que l'utilisateur voit et avec lesquels il peut intéragi
- Exemple: Sur un bouton de formulaire, le texte « Envoyer »
-
Les représentations visuelles (2D)
- Les éléments visuels aidant à la compréhension
- Exemple: L’icône d’une enveloppe pour indiquer « message »
-
Les objets physiques et l'espace (3D)
- Les périphériques et interfaces matériels
- Exemple: souris ou scroll avec le doigt
-
Le temps (4D)
- Les éléments d'interactions qui changent au fil du temps
- Exemple : Une barre de progression lors du téléchargement
-
Le comportement (5D)
- La façon dont l'utilisateur effectue une tâche et la réponse
- Exemple: message de confirmation
Interaction
Interaction
Exemple d'états d'interaction d'un champs texte (1D et 2D)
Interaction
Exemple d'états d'interaction avec un périférique (3D)
| Ordinateur | Mobile |
|---|---|
| Clic simple | Appui bref |
| Double clib | Scroll |
| Clic maintenu | Appuyer longuement |
| Etats de survol | Balayage |
| Touches de raccourci | Etirer |
| Touche clavier TAB | Pincer |
| Voix | Rotation 90° |
| Secousse | |
| Voix |
Interaction
Les lois de l'interactions
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, ...
Interaction
Les lois de l'interactions
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
Interaction
Les lois de l'interactions
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
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
Les micro-interactions
Interaction
Les micro-interactions
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.
La maquette d'écran
Idée à prototyper en 1er : formulaire pour connaître l'utilisateur et ses préférences
- Ajouter une navigation / menu (aidez-vous du trie par carte)
- Ajouter une orientation dans le formulaire
- Respecter l'ordre dans votre formulaire
- Enrichir votre interface avec la
désignation et les interactions
Outil : Figma
Périférique : mobile
Travail individuel : chacun travaille sur sa maquette mais les reflexions peuvent se mener à 2
322-6 Les éléments d'interaction et les conventions d'usage - partie 2
By Myriam Fallet
