Please enable JavaScript.
Coggle requires JavaScript to display documents.
Module Design des interfaces - Coggle Diagram
Module
Design des interfaces
UX
User Expérience
retour global utilisateur sur le module
Donald Norman est le père du concept
S'applique à tout ce qui peut être expérimenté et testé
Un designer observe les émotions suscités par le produit
stratégies mise en place pour faciliter l'utilisation, la simplicité et la lisibilité du produit à travers un questionnement défini
Focus sur l'utilisateur
Recherche de l'agréable et l'intuitif
Exemple de ce qui est traité : observation de l'utilisateur à la facilité d'utilisation
UI User Interface
Interface utilisateur
Domaine plus ancien que l'UX
Complémentaire à l'UX mais n'est propre qu'au numérique
Le designer prend en compte ce qui se rapport à la présentation, à la convivialité, à l'esthétisme, et à l'interaction du produit avec l'utilisateur
recherche de l'agréable et de l'intruif
Exemple de ce qui est traité : couleur, icone, structure, typographie, animation
L'UI aide l'UX et l'UI fait partie de l'UX
Conception et évaluation
8 critères ergonomiques
Créateurs du concept : Bastien et Scapin
GUIDAGE
Ensemble des moyens des moyens mis en oeuvre pour permette à l'utilisateur de se repérer dans le module
incitation
Lisibilité
Feedback immédiat
Objectif concepteur :
aider et inciter l'utilisateur à parcourir le module
CHARGE DE TRAVAIL
Simplicité de l'interface
Pertinence des fonctionnalités
Travail de lecture limité
Objectif concepteu
r : Rendre l'utilisation peu couteuse cognitivement pour le disponible pour l'information de fond
HOMOGENEITE ET COHERENCE
Cohérence globale esthétique
Même vocabulaire utilisé
Système stable et prévisible pour l'utilisateur
Objectif du concepteur :
Rendre l'expérience utilisateur fluide en évitant toute déstabilisation ou questionnements
CONTROLE EXPLICITE
Utilisateur doit être persuadé qu'il a le contrôle
Contrôle qu'a lieu l'utilisateur sur l'action, au moment où il le demande
Objectif concepteur
: Renforcer la confiance de l'utilisateur dans son appropriation du module
SIGNIFIANCE DES CODES ET DENOMINATIONS
Objectif concepteur :
Faciliter l'apprentissage par une sémantique appropriée (proche du public)
Ex : mots utilisés cohérents avec le public et le contente abordé
Simplicité dans les dénominations et les icones
ACTIONS ADAPTABILITE
Flexibilité
L'interface adapté au contexte (support utilisé, conditions d'utilisation, besoins intrapersonnels)
IHM : Prise en compte de l'expérience utilisateur sur une population variée
Objectif concepteur
: offrir une liberté d'utilisation pouvant s'adaptant aux différents types d'utilisateurs et à leurs besoins
COMPATIBILITE
Proximité avec l'activité réelle
Objectif concepteur :
faciliter l'apprentissage , la mémorisation en étant en adéquation avec la réalité de terrain de l'utilisateur (donner du sens et du concret)
Logique système liée à la logique utilisateur
Parler le même langage et
Respecter les conventions de la plateforme
GESTION DES ERREURS
Qualité des messages d'erreurs : messages explicites qui permette d'identifier d'où vient le problème
Correction des erreurs : facilité et simplicité dans la correction
Ex : mettre en valeur une information manquante
Protection contre les erreurs : prévention et anticipation
Ex : griser les qui ne sont pas remplis, mettre un message de prévention de perte de données en cas de changement d epage
Objectifs concepteurs
: favoriser une expérience positive et performante d'utilisation du module
3 phases de méthodes de conception
Phase l'analyse
Identifier population cible et dans quel environnement elle va évoluer
Spécifier les exigences liées à l'utilisateur et à l'organisation
A l'aide de questionnaire ou animation de focus groupe
Phase de conception
Conception d'une première maquette/prototype
Boucle itérative avec l'utilisateur
Prototype : peu coûter à réaliser et qui évolura grâce à l'évaluation
Phase d'évaluation
Mesure de l'utilisabilité : test utilisateurs
Permet de valider ou infirmer les choix concepteurs
Renvoie à une évaluation tout au long du cycle de vie du produit
Design de la structure externe
Adaptabilité
Agencement de l'écran
: stratégie de la lecture en Z
Connaissance de l'écran
: accessibilité des zones ave la stratégie de fixation sélective
Ce qui est centré est le plus visible et accessible
Conception des fenêtres
réflexion sur la manière dont les utilisateurs vont utiliser le tuilage et le recouvrement pour gérer une tâche pleinement et optimiser l'occupation de l'écran
Conception des fenêtre = choix de l'affichage
Charge de travail et contrôle explicite
Charge de travail
Utilisation du langage de l'utilisateur
Simplicité, concision
Informations utiles et appelant à l'action
Caractère non équivoque des mots
Contrôle
IDEM critères ergonomique
accès sur du design et de la fonctionnalité
Guidage et l'assistance
Conseiller, orienter, informer et conduire l'utilisateur de ses interactions avec l'interface
Messages et fenêtres pop up (associer schéma de fenêtre et type de contenu (recommandations de clarté, illustration d'exemple, titres explicites, liste a puces, rédaction claire)
Aide : Permettre l'exploration de l'interface en lui donnant un accès rapide, des feedback immédiats, l'état d'avancement ou fil d'Ariane (éviter les impasses)
Mise en place possible d'un agent pédagogique qui permet l'assistance (éviter les personnages et privilégier un objet, animal, avatar) (ex : chalet un feu)
Design graphique des interfaces :
Aspect relatifs au texte
Taille et Mise en forme
Taille 16 minimum
Cohérence entre les élements
Fonction gras pour metrte en évidence
Proscrire le souligné et l'italique
Bloc de texte
privilégier texte de qq lignes longues (plutôt que nombreuses lignes courtes
Ecrire ne minuscule
Privilégier les liste à puce
Police
lisibilité (police droite dans serif)
Homogénéité des polices, 3 polices max
Proximité et ressemblance
Regrouper infos par locailsation ou format
La place du texte dans l'espace : ex proximité des notions pour faciliter la compréhension
Les couleurs
Nombre 3 ou 4 maximum
Grouper les infos selon leur importance et choisir la saturation des couleurs en fonction d el'importane
Utiliser des contrastes, ex : éviter les fonds texturés
Respecter les sens donné aux couleurs : ex bleu sérénité, rouge passion
Règle des 60 - 30 - 10
60 couleur maitresse
30 deuxième couleurs
10 couleurs complémentaires
Ex :
Roue chromatique
Ex :
Vérificateur de contraste
Les icones
Jouent un rôle dans l'intégration/l'ancrage des connaissance
S'assurer de la plus-value des icones : choisir à bon escient (Formes et couleurs sont connotées)
Favorise le fait de rentrer dans l'univers du module
Ex :
icones cohérents
Affordance et intuitivité
Affordance perceptible
Icione et action attendue clairement identifiable
Affordance dissimulée
Pas forcément évident du premier cout : ex détournement d'objet
Amener de la surprise à laquelle ils n'auront pas pensé
Afffordance trompeuse
Ex : afforeuse trompeuse mettre un interupteur à la place d'une poignée de porte pour rentrer
Son
Attire l'attention et dynamise le module
Doit toujours être doublé de l'écrit
Les infos écrites et auditives doivent êtres similaires
Exemple
Article
Pour aller plus loin