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