SEG 3210 User Interface Design & Implementation

1. SEG 3210User 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/

2. Unit E: Design Guidelines • 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

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

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

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

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

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

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

15. Règles d’utiliser 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 d’utiliser 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

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

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. L’utilisation des icônes • 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

24. L’utilisation 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 (< = 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

25. L’utilisation 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 d’icônes distinguables

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

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

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

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! Ευχαριστώ Dankie WAD MAHAD SAN TAHAY GADDA GUEY