SEG 3210 User Interface Design

1
SEG 3210User Interface Design Implementation

• Prof. Dr.-Ing. Abdulmotaleb El Saddik
• University of Ottawa (SITE 5-037)
• [phone] x 6277
• elsaddik _at_ site.uottawa.ca
• abed _at_ mcrlab.uottawa.ca
• http//www.site.uottawa.ca/elsaddik/

2
Unit E Design Guidelines

1. A General Meta-Guideline
2. Modèle d'interaction et éléments dinteraction
3. Techniques de coder linformation et design
   visuel
4. Response Time
5. Feedback and Error Handling
6. Command-Based Interfaces
7. Menu Driven Systems
8. Keyboard Shortcuts
9. Forms-Based Interfaces
10. Organizing a Windowing Interface
11. Question and Answer Interfaces
12. Information Query Interfaces
13. Voice I/O
14. Natural Language Interfaces
15. Other Types of I/O
16. Localization and Internationalization
17. On-Line Help
18. Guidelines and Standards Documents

3
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!

4
2. Modèle d'interaction et éléments dinteraction

• 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

5
2. Modèle d'interaction et éléments dinteraction

• 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
  dinformaticiens 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é dutilisateurs
• Évitez d'exiger des utilisateurs de mélanger trop
  de différents modèles d'interaction
• commande menu formulaire questionet-réponse

6
3. Techniques de coder linformation et design
visuel

• Manières de coder l'information
• 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

7
3. Techniques de coder linformation et design
visuel

• 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

8
Usage des couleurs

• Les couleurs sont produites à partir de trois
  couleurs primaires
• Rouge, Vert et Bleu
• Notre oeil est dupé à penser quil ny a quune
  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.

9
Usage des couleurs

• Saturation
• 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
• 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

10
Saturation

• démontrent le commande que la Saturation possèe
  sur la couleur

Original image(un-retouched)
25 Saturation
- 40 Saturation
40 Saturation
11
Hue (Tonalite)

• démontrent le commande que la tonalité a sur la
  couleur finie

Original image(un-retouched)
100 Hue /- 180 Hue
- 20 Hue - 40 Hue
12
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 (0-255)
• HSV emploie souvent une balance de
• 0-360 degrés pour la tonalité (R0, G120, B240)
• 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

http//www-students.biola.edu/brian/csapplet.html

13
Relation entre RVB HSV

• 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(GB), 0.866(G-B))
• Notez que trois vecteurs égaux donneront toujours
  une saturation de zéro (l'origine)

14
Règles dutiliser les couleurs

• Employez la couleur pour les buts suivants
• Pour attirer lattention
• 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

15
Règles dutiliser les couleurs

• 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
  couleur-aveugles
• 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

16
Règles dutiliser les couleurs

• 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
• 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

17
Les significations des couleurs
Colour Western Europe USA China Japan Middle East
Danger, Anger, Stop Joy, Festive Occasions Anger, Danger Danger, Evil
Caution, Cowardice Honour, Royalty Grace, Nobility, Childish, Gaiety Happiness, 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
18
Effets des couleurs

• 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

19
Effets des couleurs

• Ce que vous voyez ici est appelé après image

20
Effets des couleurs

• 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
21
Effets des couleurs

• 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

22
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)
• 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

23
Lutilisation des icônes

• Quelques bonnes icônes aident à renforcer le
  modèle conceptuel de lutilisateur
• Toujours, toujours, toujours demandez-vous la
  nécessite davoir des icônes !!!
• N'employez pas une icône à moins que 95
  d'utilisateurs soient au courant de la tâche et
  quils puissent être capable de l'identifier
• Assurez-vous davoir 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

24
Lutilisation des icônes

• 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 (lt
  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 quentre 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

25
Lutilisation des icônes

• 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 dicônes distinguables

26
Avantages dutiliser Icônes

• Reconnaissance
• Les gens peuvent plus aisément identifier des
  choses que rappeler dinformation é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 despace
  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.

27
Avantages dutiliser Icônes

• 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.

28
Désavantages dutiliser Icônes

• 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 quelle 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.

29
Facteurs affectent la signifiances des Icônes

• 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

30
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, CD-ROM, 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

• 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.

31
Thank You!
???a??st?
Dankie
WAD MAHAD SAN TAHAY
GADDA GUEY