Transcript Document 7407744

SEG 3210
www.site.uottawa.ca/~elsaddik
User Interface Design & Implementation
Prof. Dr.-Ing. Abdulmotaleb El Saddik
University of Ottawa (SITE 5-037)
(613) 562-5800 x 6277
elsaddik @ site.uottawa.ca
abed @ mcrlab.uottawa.ca
http://www.site.uottawa.ca/~elsaddik/
1
Unit E-Guidelines
(c) elsaddik
www.site.uottawa.ca/~elsaddik
Unit E: Design Guidelines
2
Unit E-Guidelines
(c) elsaddik
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
A General Meta-Guideline
Modèle d'interaction et éléments d’interaction
Techniques de coder l’information et design visuel
Response Time
Feedback and Error Handling
Command-Based Interfaces
Menu Driven Systems
Keyboard Shortcuts
Forms-Based Interfaces
Organizing a Windowing Interface
Question and Answer Interfaces
Information Query Interfaces
Voice I/O
Natural Language Interfaces
Other Types of I/O
Localization and Internationalization
On-Line Help
Guidelines and Standards Documents
www.site.uottawa.ca/~elsaddik
1. A General Meta-Guideline
Ne faites pas confiance à ces directives!
• Pensez en termes d'utilisateur et sa tâche
• par exemple exécutez une analyse des tâches et les walkthroughs
cognitifs
• Evaluer, évaluer, évaluer
• Vous découvrirez des exceptions aux directives
• Comprenez le raisonnement derrière les directives
En outre,
les directives ne sont pas approfondies!
3
Unit E-Guidelines
(c) elsaddik
2. Modèle d'interaction et éléments d’interaction
www.site.uottawa.ca/~elsaddik
Modèle d'interaction:
• Le modèle ou la collection de techniques par lequel un
utilisateur interacte avec un système informatique.
• Arrangements généraux dans tout l'UI pour des choses telles
que:
• Entrée de commande
• Menus
• Formulaires
Les éléments d'interaction sont les composants de:
• Différents commandes et arguments
• Étiquettes spécifiques de menu, submenus, articles de menu
• Champs spécifiques, légendes, boutons radio
4
Unit E-Guidelines
(c) elsaddik
www.site.uottawa.ca/~elsaddik
2. Modèle d'interaction et éléments d’interaction
Historiquement, les modèles d'interaction ont assorti des
tâches aussi bien que ils bidon dans des contraintes
technologiques
• Premières interfaces commande-basées
• Conçu pour être utilises par les experts
(les peu d’informaticiens de l’époque étaient tous des
experts)
• Interfaces en forme de formulaires
• Conçu pour être utiliser par les vendeurs
• Les interfaces plus supportive de nos jours
• Voulu par une plus large variété d’utilisateurs
Évitez d'exiger des utilisateurs de mélanger trop de
différents modèles d'interaction
5
Unit E-Guidelines
(c) elsaddik
• commande + menu + formulaire + question–et-réponse
3. Techniques de coder l’information et design visuel
www.site.uottawa.ca/~elsaddik
• Manières de coder l'information:
6
Unit E-Guidelines
(c) elsaddik
• Clignotement (Blinking)- peut causer des accès
épileptiques
• Bordures (autour des groupes d'articles)
• Éclat (Brightness)
• Couleur
• Police (famille, ‘boldness’, italiques etc...)
• Icônes
• Étiquettes des textes (Text labels)
• Disposition (par exemple indentation)
• Ombrageant et effets 3-D (profondeur)
• Forme (Shapes)
• par exemple symboles
• Taille (de plus grands articles contre de plus petits
articles)
• Graphiques ou d'autres diagrammes
3. Techniques de coder l’information et design visuel
www.site.uottawa.ca/~elsaddik
Associer les techniques de codage
• Aucune information ne devrait être perdue si une
technique de codage (par exemple couleur)
étaient enlevées
• Par exemple, employez la couleur, les icônes
ou l'éclat pour souligner quelque chose qui
est dite en utilisant le texte
• N'employez pas plus de 2 ou 3 techniques de
codage a la fois
Employez un concepteur ou un artiste pour
optimiser des conceptions de visuel
7
Unit E-Guidelines
(c) elsaddik
www.site.uottawa.ca/~elsaddik
Usage des couleurs
8
Unit E-Guidelines
(c) elsaddik
• Les couleurs sont produites à partir de trois couleurs primaires:
• Rouge, Vert et Bleu
• Notre oeil est dupé à penser qu’il n’y a qu’une seule couleur
• Dimensions indépendantes de couleur qui peuvent être
employées pour le codage (le système de HSV)
• Tonalité (hue)
• Position de la couleur dans le spectre: bleu, violet, rouge,
orange, jaune, vert
• Un code pour la tonalité pourrait suivre le spectre:
• commencent avec le rouge a 0
• vert a 0.33
• bleu a 0.66
• et s'enveloppant autour du rouge a nouveau à 1.0.
www.site.uottawa.ca/~elsaddik
Usage des couleurs
• Saturation:
more
less
• Pureté de la couleur - les couleurs pastel sont impures,
elles mélangent le rouge, le vert et le bleu
• rouge pur contre le rose contre le blanc
• vert pur contre le vert pâle contre le blanc
more
less
• Valeur ou éclat:
• Quantité de lumière: Intensité. C'est une mesure de la façon
dont 'lumineux 'la couleur est
• noir contre vert foncé contre vert clair
• noir contre rouge foncé contre le rouge lumineux
9
Unit E-Guidelines
(c) elsaddik
Saturation
www.site.uottawa.ca/~elsaddik
démontrent le commande que la Saturation possèe sur la couleur
Original image
(un-retouched)
+ 25 Saturation
+ 40 Saturation
10
Unit E-Guidelines
(c) elsaddik
- 40 Saturation
Hue (Tonalite)
www.site.uottawa.ca/~elsaddik
démontrent le commande que la tonalité a sur la couleur finie
11
Unit E-Guidelines
(c) elsaddik
Original image
(un-retouched)
- 20 Hue
+ 100 Hue
- 40 Hue
+/- 180 Hue
www.site.uottawa.ca/~elsaddik
Relation entre RVB & HSV
• Le RVB (RGB) est souvent mesuré sur une échelle de 0-100
• Le HTML emploie une balance hexadécimale de 00 à FF (0255)
• HSV emploie souvent une balance de:
• 0-360 degrés pour la tonalité (R=0, G=120, B=240)
• 0-100% pour la saturation
• 0-100% pour valeur ou éclat
• La figure suivante montre valeur de 100% avec la saturation
indiquée par le la rayon et tonalité par l'angle
12
Unit E-Guidelines
(c) elsaddik
http://www-students.biola.edu/~brian/csapplet.html
Relation entre RVB & HSV
www.site.uottawa.ca/~elsaddik
• Ce qui suit est la même figure avec la valeur à 66%
• Formules de conversion :
• Valeur
• = max(R, G, B)
• Saturation
• = 100 * (V - min(R, G, B)) / V
• Tonalité
• = angle de l'addition de vecteur des composants de R, V, et de B
• = atan( R - cos(60) * G - cos(60) * B, sin(60) * G - sin(60) * B)
• = atan (R-0.5(G+B), 0.866(G-B))
13
Unit E-Guidelines
(c) elsaddik
• Notez que trois vecteurs égaux donneront toujours une
saturation de zéro (l'origine)
www.site.uottawa.ca/~elsaddik
Règles d’utiliser les couleurs
14
Unit E-Guidelines
(c) elsaddik
• Employez la couleur pour les buts suivants
• Pour attirer l’attention
• Aides en recherchant des tâches
• Pour communiquer l'organisation et le rapport
• Quels articles vont ensemble :
• par exemple tous les hospitalisés, contre tous les
patients
• par exemple chaque troisième ligne dans une liste
• par exemple tous les points clés sur ceci glissent
• Pour indiquer l'état
• par exemple qui les éléments sont prêt
• Pour vendre le système
• les utilisateurs aiment la couleur
www.site.uottawa.ca/~elsaddik
Règles d’utiliser les couleurs
15
Unit E-Guidelines
(c) elsaddik
• Employez la couleur économiquement
• La couleur peut distraire si non utilisée correctement
• Conception dans le monochrome d'abord
• Employez les remplir-modèles standard au besoin (pour
remplacer des couleurs)
• Rappelez-vous que quelques personnes sont couleuraveugles
• Utiliser tout au plus 2-4 couleurs pour les applications normales
• Colorez seulement quelques articles
• Fournissez une légende pour indiquer la signification du couleur
• Permettez aux utilisateurs de travailler leurs couleurs préférées
• Employez les couleurs à significations constantes dans toute une
application
• Choisissez l'ensemble de couleurs soigneusement
• Ils devraient mutuellement différer dans la tonalité, la saturation et
l'éclat
• Excepté en utilisant ces derniers en tant que techniques
indépendantes de codage
Règles d’utiliser les couleurs
www.site.uottawa.ca/~elsaddik
• Employez les couleurs pour aider l'information exprès comme
suit:
• Pour exprimer le contraste, employez les couleurs contrastantes :
• Employez les couleurs légères sur le fond foncé
• Employez les couleurs foncées sur le fond clair
• Pour exprimer la similitude, employez les couleurs semblables
• Pour souligner, employer des couleurs lumineuses et saturées (par
exemple, rouge)
• Pour De-souligner, employer l'obscurité, couleurs insaturées (par exemple,
gris)
• Employez une gamme de tonalités (bleu au rouge) pour indiquer une
continuite
• Pour exprimer le poids ou la profondeur, employez les couleurs saturées et
foncées
• Pour exprimer la proximité, employez des couleurs saturées, lumineuses
et/ou plus rouges
• Considérez les effets émotifs des couleurs
16
Unit E-Guidelines
(c) elsaddik
• Les utilisateurs préfèrent généralement les couleurs pastel et les couleurs
légèrement plus foncées
• saturé lumineux sont ennuyant
• Les rouges, les oranges et les couleurs plus lumineuses semblent plus
gais
Les significations des couleurs
www.site.uottawa.ca/~elsaddik
Colour
17
Unit E-Guidelines
(c) elsaddik
Western
Europe &
USA
China
Japan
Middle
East
Danger,
Anger, Stop
Joy, Festive
Occasions
Anger, Danger
Danger, Evil
Caution,
Cowardice
Honour,
Royalty
Grace, Nobility, Happiness,
Childish, Gaiety Prosperity
Sexual
Arousal,
Safe, Go
Youth,
Growth
Future, Youth,
Energy
Fertility,
Strength
Purity, Virtue
Mourning,
Humility
Death,
Mourning
Purity,
Mourning
Masculinity,
Calm,
Authority
Strength,
Power
Villainy, (dirty
work)
Masculinity,
Calm
Death, Evil
Evil
Evil
Mystery,
Evil
www.site.uottawa.ca/~elsaddik
Effets des couleurs
18
Unit E-Guidelines
(c) elsaddik
• Les couleurs saturées et les couleurs d'opposition (red/green,
yellow/blue) causent des images différées une fois utilisées
ensemble
• Regardez cette image pendant au moins 20 secondes
Effets des couleurs
www.site.uottawa.ca/~elsaddik
Ce que vous voyez ici est appelé après image
19
Unit E-Guidelines
(c) elsaddik
Les gens voient les couleurs opposées, ou une image
négative parce que regarder une couleur pendant une
période prolongée fatiguera les tiges et les cônes des yeux
Effets des couleurs
www.site.uottawa.ca/~elsaddik
Considérez les rapports de fond/premier plan:
• Le premier plan et le fond devraient contraster dans la tonalité, la
saturation et l'éclat
Texte jaune sur un
fond blanc ou
le texte bleu sur un fond noir, sont difficile de lire
en raison du niveau bas du contraste entre la
figure et la terre
quelques combinaisons de couleur, telles que bleu et
rouge, forment des illusions une fois placé ensemble
20
Unit E-Guidelines
(c) elsaddik
www.site.uottawa.ca/~elsaddik
Effets des couleurs
21
Unit E-Guidelines
(c) elsaddik
• Images de couleur d'affichage sur un fond achromatique:
• noir, gris ou blanc
• Images achromatiques d'affichage sur un fond de couleur
• Affichage à grande brillance aident les utilisateurs de distinguer
les objets colorés dans le premier plan
• Les objets de premier plan semblent plus saturés
• Rappelez-vous les utilisateurs Couleur-Aveugles (la plupart du
temps les hommes): (couleurs de fond-/premier plan)
• rouge-vert (la forme la plus commune)
• jaune-bleu (une version plus rare)
• Consultez ISO9241 pour des normes internationales sur
l'utilisation de couleur
www.site.uottawa.ca/~elsaddik
Ensemble de polices de caractères
• Choses qui peuvent être exprimées en utilisant différentes polices:
• Humeur (facétieux, sérieux, démodé, etc.)
• Importance
• Organisation de matériel
• par exemple entrée dactylographiée contre des instructions
contre des titres
• Limitez le nombre de polices et de modèles dans n'importe quel écran
à 2 ou 3
• Employez une police de sans-serif pour la plupart du texte d’écran
• Particulièrement les petits caractères
• À de basses résolutions d'écran, les serifs causent une confusion
• This is a serif font (Times)
• This is a sans-serif font (Arial)
•
•
22
Unit E-Guidelines
(c) elsaddik
This is really tiny text in a serif font
This is really tiny text in a sans-serif font
• Employez une police de serif pour la plupart des textes imprimés
• Évitez les polices de fantaisie
• Donnez une signification cohérente à chaque police et taille
www.site.uottawa.ca/~elsaddik
L’utilisation des icônes
23
Unit E-Guidelines
(c) elsaddik
Quelques bonnes icônes aident à renforcer le modèle conceptuel
de l’utilisateur
• Toujours, toujours, toujours demandez-vous la nécessite
d’avoir des icônes !!!
• N'employez pas une icône à moins que 95% d'utilisateurs
soient au courant de la tâche et qu’ils puissent être capable
de l'identifier
• Assurez-vous d’avoir des icônes aussi simples que
possibles
• Assez d'information pour transporter le message et pas plus
• N'utilisez pas des frontières ou des vrilles fantaisistes
• Trop de détails cause les utilisateurs à
• prendre plus de temps dans l'identification
• Devenir plus intéressés par la jolie image
• Maintenez les icônes distinctes l'une de l'autre
• Réalisez les essais pour assurer chaque icône peut
seulement être interprété comme signifiant une commande
www.site.uottawa.ca/~elsaddik
L’utilisation des icônes
24
Unit E-Guidelines
(c) elsaddik
• Si vous utilisez la perspective ou l'éclairage, maintenez la
direction et l'orientation conforme
• Maintenez le nombre d'icônes sur un écran bas (< = 7)
• Pensez soigneusement à la taille des icônes
• Rendez les icônes petites quand:
• Ils sont de manière permanente montrés
• Il y a beaucoup d'options possibles que l'utilisateur peut
choisir
• Rendez les icônes grandes quand
• L'utilisateur doit juste choisir qu’entre une ou deux
icônes
• L'icône est une partie centrale d'un message que
l'utilisateur doit regarder maintenant
• Ajoutez seulement la couleur aux icônes en tant que point
culminant
• Bases les icônes sur les fil-armatures noires et blanches
• Employez seulement une ou deux couleurs par icône
www.site.uottawa.ca/~elsaddik
L’utilisation des icônes
25
Unit E-Guidelines
(c) elsaddik
• Conception des icônes
• Tenez compte des différent états d'icône
• Évitez les lignes ‘jaggy’
• Considérez les différentes formes de Pixel
• Bâton au modèle graphique d'une plateforme
• Concevez avec la plus basse qualité d'écran à
l'esprit
• Faites attention aux couleurs
• Employez des couleurs subtiles
• Utilisez une petite palette
• Ne comptez pas sur la couleur pour donner
l'information
• N'oubliez pas les moniteurs en noir et blanc
• Concevez des groupes d’icônes distinguables
www.site.uottawa.ca/~elsaddik
Avantages d’utiliser Icônes
26
Unit E-Guidelines
(c) elsaddik
• Reconnaissance
• Les gens peuvent plus aisément identifier des choses que
rappeler d’information écrite.
• Identifier une icône sur un écran est beaucoup plus facile
que d'essayer de se rappeler une commande de textes.
• Rechercher sur un écran
• Il est généralement plus rapide de trouver l'icône
appropriée plus rapidement qu'une fonction dans une
liste de textes
• Compacité
• Les icônes prennent normalement moins d’espace sur
l'écran que si les fonctions correspondantes étaient décrites
en utilisant du texte.
• Compréhensibilité
• Si l'icône a été soigneusement choisit, elle peut
habituellement être facilement comprise par un utilisateur
moyen.
www.site.uottawa.ca/~elsaddik
Avantages d’utiliser Icônes
27
Unit E-Guidelines
(c) elsaddik
• Universalité
• Beaucoup d'icônes sont relativement langue et/ou
culturellement indépendantes, ainsi elles peuvent être
employées sur des versions internationales de logiciel sans
processus coûteux de traduction et de réécriture
• Différences culturelles
• Les étudiants occidental utilisent le visage pour montrer
leur émotions,
• Pas les étudiants orientaux
• Disponibilité
• Pas trop difficile d'obtenir les icônes prêtes à l'emploi, pour
pratiquement toute fonction, à partir des médias tels que le
Web et les collections clip-art.
www.site.uottawa.ca/~elsaddik
Désavantages d’utiliser Icônes
28
Unit E-Guidelines
(c) elsaddik
• Ambiguïté
• Si l'icône n'a pas été bien conçue, il ne peut y avoir aucune
manière pour que l'utilisateur moyen devine même ce
qu’elle représente.
• Dépendance
• sur l'utilisateur, la tâche et le contexte
• Chaque individu donne leur propre signification à une
icône, et cette signification dépendra de ce que cet
individu sait déjà
• Ne peut pas toujours complètement remplacer des mots
• Dans les situations complexes
• Coût
• Il est difficile et coûteux pour concevoir une icône nouvelle
qu'on peut être sûr sera interprété correctement par les
utilisateurs.
www.site.uottawa.ca/~elsaddik
Facteurs affectent la signifiances des Icônes
29
Unit E-Guidelines
(c) elsaddik
• Context
• Si le contexte est une tâche assez spécifique, alors il devrait être
relativement simple de concevoir une icône efficace et non ambiguë
• Par exemple, choisissant la couleur des textes - assez spécifique
• Par exemple, Undo - difficile à représenter graphiquement
• Text
• Parfois l'addition du texte peut faciliter dedans pour l'interprétation de
l'icône.
• Peut être inclus de manière permanente ou peut apparaître quand
l'indicateur est placé au-dessus de l'icône
• Concept
• Concret représentant le vrai objet ou l'abstrait
• Concret plus facile que l'abstrait
• Par exemple l'impression des documents est une opération concrète;
les objets sont plus faciles que les actions
• Discriminable
• Aucune deux icônes ne devraient être si semblables que l'utilisateur
pourrait confondre une avec l'autre
• Par exemple on devrait pouvoir distinguer facilement entre les icônes
www.site.uottawa.ca/~elsaddik
SunWeb: User Interface Design for Sun Microsystem's Internal Web
– Signification Prévue: Ce qu'il y a de neuf (tableau
d'affichage)
– Examinez Les Interprétations Des Utilisateurs: , tableau
d'affichage, tableau d'affichage, blanchisserie
• Signification Prévue: Avantages. Les Utilisateurs du test
Interprétations: Le champ de santé, argent, santé est cher, le plan de
la santé de Clinton, hôpital, ne savent pas, des avantages
• Signification Prévue: Catalogue de produit, utilisateurs du test
• Interprétations: Système orienté, disque, CD, ordinateur, CDROM, CD-ROM
• Signification Prévue: Outils spécialisés (boîte à outils). Test
• Les Interprétations Des Utilisateurs: Briefcase, information
personnelle, Briefcase, boîte à outils, Briefcase
30
Unit E-Guidelines
(c) elsaddik
• Signification Prévue: Vue géographique de la compagnie
(succursales dans différents endroits).
• Examinez Les Interprétations Des Utilisateurs: Monde,
vue globale, planète, le monde, la terre.
www.site.uottawa.ca/~elsaddik
Thank You!
31
Unit E-Guidelines
(c) elsaddik