seg 3210 user interface design & implementation

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik

1Unit E-Guidelines(c) elsaddik

SEG 3210

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/

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


Unit E: Design Guidelines

1. A General Meta-Guideline2. Modèle d'interaction et éléments d’interaction3. Techniques de coder l’information et design visuel4. Response Time5. Feedback and Error Handling6. Command-Based Interfaces7. Menu Driven Systems8. Keyboard Shortcuts9. Forms-Based Interfaces10. Organizing a Windowing Interface11. Question and Answer Interfaces12. Information Query Interfaces13. Voice I/O14. Natural Language Interfaces15. Other Types of I/O16. Localization and Internationalization17. On-Line Help18. Guidelines and Standards Documents

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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!

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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

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 Entrée de commande

• MenusMenus

• FormulairesFormulaires

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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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

• commande + menu + formulaire + question–et-réponse

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


3. Techniques de coder l’information 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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


3. Techniques de coder l’information 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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


Usage des couleurs

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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


more less

more less

• 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

Usage des couleurs

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


Saturation

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

Original image(un-retouched)

+ 25 Saturation

+ 40 Saturation - 40 Saturation

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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

Original image(un-retouched)

- 20 Hue

- 40 Hue

+ 100 Hue

+/- 180 Hue

Hue (Tonalite)

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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

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é (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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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(G+B), 0.866(G-B))

• Notez que trois vecteurs égaux donneront toujours une saturation de zéro (l'origine)

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


Règles d’utiliser les couleurs

• 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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik



• 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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik



• 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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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

Les significations des couleurs

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


• 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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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

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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


Considérez les rapports de fond/premier plan:• Le premier plan et le fond devraient contraster dans la tonalité, la

saturation et l'éclat

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

Texte jaune sur un fond blanc ou

Effets des couleurs

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


Quelques bonnes icônes aident à renforcer le modèle conceptuel de l’utilisateur• Toujours, toujours, toujours demandez-vous la nécessite Toujours, toujours, toujours demandez-vous la nécessite

d’avoir des icônes 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 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

L’utilisation des icônes

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik



• 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 Ils sont de manière permanente montrés • Il y a beaucoup d'options possibles que l'utilisateur peut Il y a beaucoup d'options possibles que l'utilisateur peut

choisirchoisir • Rendez les icônes grandes quand

• L'utilisateur doit juste choisir qu’entre une ou deux L'utilisateur doit juste choisir qu’entre une ou deux icônes icônes

• L'icône est une partie centrale d'un message que L'icône est une partie centrale d'un message que l'utilisateur doit regarder maintenant 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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


• 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


ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


Avantages d’utiliser Icônes

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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


Avantages d’utiliser 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.

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


Désavantages d’utiliser 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 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.

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


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

SunWeb: User Interface Design for Sun Microsystem's Internal Web

ww

w.s

ite.

uo

ttaw

a.ca

/~el

sad

dik


Thank You!