12/12/2012
PLAN
(cid:1) Mémorisation des informations (cid:1) Principes de base (cid:1) Types d’interaction (cid:1) Composants d’une interface graphique (cid:1) Aide et gestion des erreurs
2
LÉMENTS DDDD’’’’UNEUNEUNEUNE INTERFACE EEEELÉMENTS INTERFACE INTERFACE INTERFACE LÉMENTS LÉMENTS
Raoudha CHEBIL
MÉMORISATION DES INFORMATIONS
MÉMORISATION DES INFORMATIONS
(cid:1) L’utilisateur est bombardé par une grande quantité
d’informations
(cid:1) Mémoire à court terme :
(cid:1) Capacité limitée
(cid:1) La mémoire de l’utilisateur met en œuvre des processus de sélection, d’organisation et de stockage des informations.
(cid:1) Mémoire à long terme :
(cid:1) Capacité supposée illimitée (cid:1) Difficulté d’accès aux données
(cid:1) Connaître ces processus et les prendre en compte
Concevoir des
interfaces
qui
facilitent
la
mémorisation
Évènement
Informations reçues stockées temporairement
perdues
Examinées
ou
3
Mémoire à court terme
4
Mémoire à long terme
1
12/12/2012
MÉMORISATION DES INFORMATIONS
PLAN
(cid:1) Tout ce qui excède quelques minutes de rétention et qui n'a pas été évacué passe de la mémoire à court terme à celle à long terme.
(cid:1) Réciproquement, les informations stockées dans la mémoire à long terme peuvent être rappelées dans la mémoire à court terme pour être traitées.
(cid:1) Mémorisation des informations (cid:1) Principes de base (cid:1) Les types d’interaction de (cid:1) Les
composants
l’interface
(cid:1) Le concepteur doit présenter les informations de manière à ce qu'elles transitent aisément de la mémoire à court terme vers la mémoire à long terme.
graphique
(cid:1) Aide et gestion des erreurs
5
6
PRINCIPES DE BASE
LISIBILITÉ DES COULEURS
(cid:1) Limiter les items de menus à 7 (cid:1) Etablir des liens entre éléments (couleurs, format, emplacements) (cid:1) Utiliser des messages concis (cid:1) Ne pas présenter d’informations inutiles (cid:1) Accéder à l’information souhaitée en 3 clics
(cid:1) Loi de Fitts
le temps pour atteindre une cible dépend de la distance et de sa taille
(cid:1) Syndrome de l’oisillon
les utilisateurs ont tendance à rejeter les systèmes non familiers Problème pour l’évolution des logiciels, les innovations
(cid:1) Interface intuitive
utilisable dès la première fois, sans formation
7
(cid:1) Privilégier un bon contraste caractères/fond
(cid:1) Caractères sombres sur fond clair (cid:1) de préférence caractères noirs sur fond blanc
(cid:1) Éviter certaines combinaisons de couleurs (cid:1) Limiter le nombre de couleurs (7 maximum) (cid:1) Faire attention à la portabilité des couleurs
(cid:1) selon les écrans (penser au nombre de couleurs des écrans) (cid:1) selon les personnes :
choisir des couleurs faciles à
distinguer daltonisme : 8-10% des hommes, 0,5% des femmes
8
2
12/12/2012
Publicité
SIGNIFICATION DES COULEURS
LECTURE À L’ÉCRAN
(cid:1) Respecter les habitudes culturelles (cid:1) en occident : rouge = stop / vert = go (cid:1) en chine : rouge = joie
(cid:1) Utiliser les couleurs pour signifier quelque chose
(cid:1) 1ère visualisation de l’écran : parcours en Z (cid:1) Ensuite : parcours sélectif (cid:1) Meilleure visibilité et accessibilité au centre de l’écran
(cid:1) même type d’information (cid:1) types d’information différents couleurs contrastées (cid:1) types d’information similaires
même couleur
couleurs peu contrastées
9
10
AFFICHAGE DE TEXTE
RECOMMANDATIONS
Typographie
(cid:1) gras, italique, souligné ralentissent la lecture (cid:1) MAJUSCULES moins lisibles que minuscules
(cid:1) Mettre en évidence les éléments importants (cid:1) Regrouper les commandes en fonction
(cid:1) de leur signification (cid:1) de l’objet auquel elles se rapportent
11
12
3
12/12/2012
TYPES D’INTERACTIONS
(cid:1) Langage naturel (cid:1) Langage de commande (cid:1) Menus (cid:1) Formulaires (cid:1) Requêtes (cid:1) Manipulation directe
13
14
PLAN
(cid:1) Mémorisation des informations (cid:1) Principes de base (cid:1) Types d’interaction (cid:1) Les
composants
de
l’interface
graphique
(cid:1) Aide et gestion des erreurs
LANGAGE NATUREL
LANGAGE DE COMMANDE
(cid:1) Dialoguer en langage naturel (réel ou via le clavier) (cid:1) en théorie, le moyen le plus attractif de communiquer (cid:1) en pratique,
très peu utilisé (surtout pour commandes de
complexité restreinte)
(cid:1) Ecrire une ligne de commandes (avec syntaxe et
vocabulaire)
(cid:1) Accès direct aux fonctionnalités du système pour les
experts mais pas utilisable par des novices
(cid:1) Difficultés
(cid:1) Analyse du langage naturel (cid:1) Problème des ambiguïtés (cid:1) Reconnaissance vocale
Avantages (cid:1) concision (plus grande qu’en langage naturel) (cid:1) structuration (cid:1) possibilité d’extensions (définition de macros, scripts)
15
Inconvénients (cid:1) nécessite un apprentissage et une pratique régulière 16
4
12/12/2012
MANIPULATION DIRECTE
MANIPULATION DIRECTE
(cid:1) Représentation permanente à l’écran
(cid:1) des objets (cid:1) des actions possibles
(cid:1) Actions physiques sur les objets
(cid:1) pointer et cliquer (cid:1) illusion de travailler directement sur les objets
(≠transmettre une commande)
(cid:1) Opérations
(cid:1) rapides et réversibles (cid:1) avec effet visible immédiatement
17
(cid:1) Avantages
(cid:1) plus fort engagement de l’utilisateur (cid:1) impression d’agir sur l’environnement (cid:1) plus faible distance entre la conception du monde et la
façon dont il est représenté à l’interface
(cid:1) Inconvénients
(cid:1) manque d’abstraction (cid:1) difficulté de représenter des opérations abstraites (cid:1) encombrement de l’écran (tous les objets) (cid:1) ambiguïté du sens des icônes (cid:1) jugée moins rapide par les experts
18
PLAN
Publicité
(cid:1) Mémorisation des informations (cid:1) Principes de base (cid:1) Les types d’interaction de (cid:1) Les
composants
l’interface
graphique
(cid:1) Aide et gestion des erreurs
WIMP : Windows, Icons, Menus, Pointers
19
20
5
12/12/2012
FENÊTRES
Barre de titre
MULTI-FENÊTRAGE
Barre de menu
Barre d’outils
o Sans superposition : mosaïque
o Avec superposition (cid:2)Problèmes
Informations masquées Temps d’accès à la fenêtre masquée
o Hiérarchique
fenêtre d’application avec fenêtres filles
21
Barre d’état
22
MULTI-FENÊTRAGE
RECOMMANDATIONS MULTI-FENÊTRAGE
Intérêt : environnements multitâches
Différentes stratégies de gestion du multi-fenêtrage
Organisation
(cid:1) Autoriser les recouvrements ou basculement de
fenêtres pour les utilisateurs expérimentés
(cid:1) Utiliser le tuilage pour les utilisateurs occasionnels
Exemple : encyclopédies grand public
(cid:1) Mosaïques de fenêtres (tuilage) (cid:1) Fenêtres alternées (cid:1) Fenêtres chevauchantes (recouvrement) (cid:1) Fenêtres zoomables
Découpage en fenêtres
(cid:1) Organiser le découpage en fonction de la tâche :
regroupement cohérent des informations
(cid:1) Limiter la quantité d’information à mémoriser d’une
23
fenêtre à l’autre
24
6
12/12/2012
ICÔNES
Intérêt
(cid:1) rapidement identifiables (cid:1) compacts : peu de place dans l’interface
Problème : affordance
(cid:1) L’affordance exprime la capacité qu’ont les symboles à représenter les fonctions qu’ils désignent, autrement dit, la facilité qu’aura l’utilisateur à les manipuler à l’aide d’un dispositif de pointage
(cid:1) Icônes : affordance non triviale
ICÔNES CONSTRUCTION
Méthodologie (cid:1) Identifier toutes les commandes à icônifier et les créer en même
temps
(cid:1) Limiter les icônes aux commandes fréquentes (cid:1) Toujours valider la conception par une expérimentation
Règles de construction
25
26
ICÔNES : GUIDELINES
MENUS
Quelques recommandations perceptuelles
(cid:1) Nombre limité d’icônes sur l’interface (dégradation à partir de
12)
(cid:1) S’assurer que le caractère sélectionné de l’icône est bien
visible
Qu’est-ce qu’un menu? (cid:1) Zone où on précise ses choix pour orienter l’interaction
Intérêt
Publicité
Favoriser l’identification des icônes
(cid:1) Structurer
suivant une organisation logique cohérente donc aisément compréhensible et mémorisable
fonctionnalités
du système
les
o S’assurer que les icônes sont bien distinguables les uns des autres o Grouper les icônes par famille o Cohérence des représentations dans un groupe donné
Limitation
Privilégier l’association icônes/texte
27
(cid:1) Manque de rapidité : utile surtout aux utilisateurs novices et
occasionnels (prévoir des raccourcis pour les experts)
28
7
12/12/2012
MENUS : GUIDELINES GÉNÉRAUX
MENUS : GUIDELINES GÉNÉRAUX
(cid:1) Se baser sur la sémantique de la tâche pour organiser
les
menus…
(cid:1) Grouper les menus d’une manière cohérente
(cid:1) Préférer des menus larges aux menus profonds
(cid:1) Utiliser des items comme noms pour les sous-menus
(cid:1) Utiliser des noms d’items brefs (mots clés)
(cid:1) Autoriser les retours en arrière et tout autre raccourci
(cid:1) Autoriser les sauts au menu précédent et au menu principal
(cid:1) Ne pas oublier l’aide (online ou non) sur l’utilisation des menus
29
30
POINTAGE
POINTAGE
Affectation de commandes aux boutons (cid:1) Cohérence : le rôle des boutons souris doit être constant (cid:1) Intégrer les rôles classiques de boutons
(cid:1) Bouton gauche : sélection (cid:1) Bouton droit : affichage menu contextuel
Double clic (cid:1) La commande associée à un double clic doit être cohérente
avec celle associée au simple clic sur le même bouton
(cid:1) Aucune fonction ne doit pouvoir être invocable que par
31
double-clic
32
8
12/12/2012
PLAN
AIDE
(cid:1) Mémorisation des informations (cid:1) Principes de base (cid:1) Les types d’interaction de (cid:1) Les
composants
l’interface
graphique
(cid:1) Aide et gestion des erreurs
33
34
GESTION DES ERREURS : PRÉVENTION
GESTION DES ERREURS : CORRECTION
35
36
9
Sources :
(cid:1) Jean-Yves Antoine, Ergonomie des interfaces Homme
Machine
(cid:1) Stéphanie Jean-Daubias, Les éléments d’une IHM
37
12/12/2012
10