Www.site.uottawa.ca/~elsaddik 1 Unit E-Guidelines (c) elsaddik SEG 3520 User Interface Design & Implementation Prof. Dr.-Ing. Abdulmotaleb El Saddik University.

Présentation au sujet: "Www.site.uottawa.ca/~elsaddik 1 Unit E-Guidelines (c) elsaddik SEG 3520 User Interface Design & Implementation Prof. Dr.-Ing. Abdulmotaleb El Saddik University."— Transcription de la présentation:

1 www.site.uottawa.ca/~elsaddik 1 Unit E-Guidelines (c) elsaddik SEG 3520 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/

2 www.site.uottawa.ca/~elsaddik 2 Unit E-Guidelines (c) elsaddik Unit E : Design Guidelines 1.A General Meta-Guideline 2.Modèle d'interaction et éléments d’interaction 3.Techniques de coder l’information et design visuel 4.Temps de réponse 5.Rétroaction et contrôle d'exactitude 6.Interface de ligne de commande 7.Systèmes a menus 8.Raccourcis de Clavier Contre La Mnémonique 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 www.site.uottawa.ca/~elsaddik 3 Unit E-Guidelines (c) elsaddik Communication entre l'utilisateur et le système Quelques applications ont des modèles très distincts d'interaction. Quelques modèles d'interaction de terrain communal : Interface de ligne de commande Langage naturel Question/réponse et dialogue de question Forme-remplit et des bilans WIMP: Fenêtre Icônes Menus Pointeurs Œil-cheminement (Eye-tracking) Interaction

4 www.site.uottawa.ca/~elsaddik 4 Unit E-Guidelines (c) elsaddik 6. Interface de ligne de commande Manière d'exprimer des instructions à l'ordinateur directement : touches de fonction, caractères simples, abréviations courtes, mots entiers, ou une combinaison Quand créer un langage de commande? Approprié aux tâches réitérées Approprié pour les utilisateurs experts que les débutants Offre l'accès direct à la fonctionnalité de système Les noms de commande et les abréviations devraient être significative Exemple typique: le système d'Unix

5 www.site.uottawa.ca/~elsaddik 5 Unit E-Guidelines (c) elsaddik red rojo green verde blue azul white blanco black negro blue azul green verde red rojo white blanco 6. Interface de ligne de commande: Exemple Un fichier des couleurs contienne : Assortissez-les employant la commande suivante: % sort colours Pour stocker le rendement dans un nouveau dossier nous faisons ceci : % sort colours > colours.sorted

6 www.site.uottawa.ca/~elsaddik 6 Unit E-Guidelines (c) elsaddik Alpha, Fred: 333-6565 Beta, Freddie: 656-0099 Gamma, Fred-George: 111-7676 Zeta, Frederick: 431-0987 6. Interface de ligne de commande: Exemple2 recherche de l'information dans un dossier la commande suivante donnerait une liste alphabétique de toutes les personnes dans le dossier (”telephone”) dont le nom contient « Fred ». % grep Fred telephone | sort Le symbole "|" s'appelle la "pipe." Elle dirige le rendement de la commande de grep dans l'entrée de la commande de sorte

7 www.site.uottawa.ca/~elsaddik 7 Unit E-Guidelines (c) elsaddik Beaucoup de directives pour des langages de commande d'ordres de gestion s'appliquent également à: Voix I/O Langage Naturelle I/O Choix de menu et de nom de champs etc. Command Language (Language de commande)

8 www.site.uottawa.ca/~elsaddik 8 Unit E-Guidelines (c) elsaddik Employez le lexique anglais (des noms et des mots-clés de commande). Les utilisateurs expert et débutant trouvent ce plus rapide par exemple effacer, économiser, rechercher, remplacer N'employez pas pleinement la grammaire anglaise (ordre et règles de la langue) L'anglais n'est pas conformé et ne rend pas un langage de commande d'ordres de gestion dur pour apprendre Pour des commandes textuelles, employez les significations anglaises pour la ponctuation: par exemple ‘.’ signifie fin ‘;’ signifie fin suivie d’autre choses ‘?’ veut dire ‘inconnu’ Mais ne comptez pas sur la ponctuation pour porter la signification c.-à-d. la signification de base devrait être claire à l'utilisateur si la ponctuation étaient dépouillées Un langage de commande d'ordres de gestion devrait-il être comme l'anglais ?

9 www.site.uottawa.ca/~elsaddik 9 Unit E-Guidelines (c) elsaddik Mots Non fréquent et distinctifsinsertdelete Fréquent, mots discriminatoiresaddremove Non fréquent, mots non discriminatoiresambleperceive Fréquent, mots non discriminatoireswalkview Mots Général (fréquent, non discriminatoires) altercorrect Caractères génériques non discriminatoires (nonsense) GACMIK Caractères génériques discriminatoires (icônes) abc-adbcabc-ab Spécification contre la généralité

10 www.site.uottawa.ca/~elsaddik 10 Unit E-Guidelines (c) elsaddik Spécification contre la généralité Black & Moran 1982 ont découvert que: (82 sujets d'expérience) Non fréquent, discriminatoire ont: Un apprentissage plus rapide Rappel supérieur Mots généraux: La plus basse exécution ( Lowest performance) Mots de non-sens Avez jailli (avec de petits nombres de commandes, les noms distinctifs sont utiles même si ils ne sont pas significatifs)

11 www.site.uottawa.ca/~elsaddik 11 Unit E-Guidelines (c) elsaddik Spécification contre la généralité Les noms de commande spécifiques tendent à être meilleurs que ceux généraux. Les utilisateurs s’en rappellent plus longtemps Les d'utilisateurs ont besoin de moins d'aide par exemple ‘envoyez’ au lieu de ‘transfert’ (‘Send’ vs. ‘Transfer’) Par exemple ‘Insérer’ au lieu d’ ‘Ajouter’ (‘Insert’ vs. ‘Add’) Mais avoir différents noms pour des commandes relatives est embrouillant par exemple peut-être ce qui suit a des significations légèrement différentes ‘créer’, ‘nouveau’ (‘create’ vs. ‘new’) dans ce cas-ci, sélectionnez un de ces derniers comme nom général de commande... et utiliser des commandes d’arguments ou des options pour différencier entre les variantes

12 www.site.uottawa.ca/~elsaddik 12 Unit E-Guidelines (c) elsaddik Command Language (Language de commande) Les noms de commande devraient être familiers Pour les commandes les plus fréquentes, et où aucune ambiguïté ne surgirait, considérez permettre à plusieurs synonymes d'être employé: Les utilisateurs peuvent deviner des noms 10-15% du temps Si on permet trois synonymes anglais communs, les utilisateurs devinent plus de 80% correctement par exemple: e.g. quit, exit, bye, logoff, logout Les mots de commande devraient appeler le modèle mental prévu et aucun autre Évitez les mots qui peuvent être ambigus ou étranger aux utilisateurs e.g. ‘expunge’, ‘execute’, ‘kill’, ‘fatal’

13 www.site.uottawa.ca/~elsaddik 13 Unit E-Guidelines (c) elsaddik Command Language (Language de commande) Évitez les abréviations qui sont trop courtes : par exemple un caractère Il devient dur pour prolonger la langue à l'avenir Fournissez l'appui intelligent aux utilisateurs pour écrire des commandes Permettez de valeurs défaut pour les paramètres qui sont omis Permettez l'édition de commande Édition directe en utilisant la souris Le réaffichage de la dernière commande suivi de l'édition de clef de curseur Permettez l'accomplissement semi-automatique des commandes partielles Étiquette-accomplissement de modèle d'Emacs la pression de l'étiquette essaye de trouver un mot approprié pour accomplir n'importe quelle entrée abrégée présente un menu si plus d'une possibilité Permettez les corrections semi-automatiques d'épellation Fournissez une référence rapide de syntaxe

14 www.site.uottawa.ca/~elsaddik 14 Unit E-Guidelines (c) elsaddik Un langage de commande d'ordres de gestion devrait-il être riche ou minimal ? Minimal? Il y a seulement un mode unique pour effectuer une opération Il n'y a aucune redondance par exemple une langue de commande a ‘delete’ et ‘insert’.... Pour remplacer on supprime et depuis on insert (Replace = delete then insert) Riche? Une langue a beaucoup de manières alternatives d'effectuer une opération Par exemple ‘delete’ + ‘insert’ ‘replace’ de la position 1 a la position 2 ‘substitute’ pattern1 avec pattern2 Fournit de la richesse pour le top 10% de la fonctionnalité et du minimalisation pour le reste Évitez la tentation d'ajouter une variation parce qu'il est facile d'ajouter

15 www.site.uottawa.ca/~elsaddik 15 Unit E-Guidelines (c) elsaddik Stratégies Potentielles D‘abréviation Simple troncation: Employez le premier, le second, le troisième, etc. lettres de chaque commande: vi pour le rédacteur visuel et pleine page Baisse de voyelle avec la troncation simple : Éliminez les voyelles et employez une partie de ce qui reste : cp pour copier des fichiers Première et dernière lettre : Puisque les premières et dernières lettres sont fortement évidentes, employez-les : ST for SORT Première lettre de chaque mot dans une expression : Utilisation avec un plan hiérarchique de conception : cd pour ( change directory) changer de répertoire Abréviations standard d'autres contextes : Employez les abréviations familières : QTY for Quantity; PRT for Print or BAK for Backup Phoniques: Attention de foyer sur le bruit : XQT for Execute

16 www.site.uottawa.ca/~elsaddik 16 Unit E-Guidelines (c) elsaddik Essayez de corriger des erreurs d'orthographe Toutes les transpositions possibles : Haert  Heart Tous les remplacements possibles d'un-lettre : Cous  Cows Toutes les insertions possibles d'un-lettre : Hous  House Toutes les suppressions possibles d'un-lettre Hueart  Heart Insertion de l'espace (1 mot devient 2) Upto  Up to Suppression de l'espace (2 mots devient 1): Specifi cation  Specification

17 www.site.uottawa.ca/~elsaddik 17 Unit E-Guidelines (c) elsaddik La plupart de temps les utilisateurs ne feront aucune erreur, ainsi le mot sera identifié. Quand un mot n'est pas identifié, essayez les transformations ci-dessus pour voir combien les mots connus assortissent. Si seulement un mot connu s'assortit, employez-le. Si plus d'un mot s'assortit, présentez un menu Si aucun mot ne s'assortit, soyez poli! Algorithme pour de corriger des erreurs d'orthographe

18 www.site.uottawa.ca/~elsaddik 18 Unit E-Guidelines (c) elsaddik 7. Systèmes a menus Les menus établissent des capacités humaines pour : Identification Exploration et navigation Problèmes avec des menus : Ils prennent du temps de sélectionner de Les clefs sont plus rapides Ils forcent la structure sur l'utilisateur Les langages de commande et les formes d'ordres de gestion donnent plus de flexibilité Ils peuvent être impraticables quand il y a trop de choix Les zones de dialogue peuvent être meilleures Les menus permanents prennent d’espace sur l'écran par exemple barres de menu (menu bars)

19 www.site.uottawa.ca/~elsaddik 19 Unit E-Guidelines (c) elsaddik Types standard de menus Permanent Dans une barre de menu peut accéder à n'importe quelle commande à tout moment l'information permanente est l'étiquette de menu Dans un formulaire par exemple liste de boutons par radio l'information permanente est la valeur courante (la fenêtre de propriété de Visualbasic) Dans une palette ou toolbar (boutons d'action) peut accéder à n'importe quelle commande à tout moment l'information permanente est une icône d'article de menu peuvent être embrouillant

20 www.site.uottawa.ca/~elsaddik 20 Unit E-Guidelines (c) elsaddik Types standard de menus Pull-down Popup (Contextual) montré par le bouton de souris spécial Peut accéder à une commande rapidement sans curseur mobile Modal Chaque menu est un écran ou un page Web complet

21 www.site.uottawa.ca/~elsaddik 21 Unit E-Guidelines (c) elsaddik Syntaxes pour choisir un article de menu : La plupart des logiciels d'exploitation laissent maintenant tous les deux: 1.Press-drag-release  Serrer-traîner-libérez (Exemple: site web d'UoO) Le menu apparaît en maintenant le bouton de souris tout en se dirigeant à l'étiquette de menu Le menu disparaît si l'indicateur est éloigné du menu ou libéré sur l'étiquette Un article est choisi si l'indicateur libérait là-dessus Désavantage: L'utilisateur peut accidentellement libérer le bouton sur l'article faux Il est fatigant pour maintenir le bouton de menu 2.Click position (Example Powerpoint) Le premier déclic évoque le menu Le deuxième déclic choisit un article Désavantage Non intuitif comment se débarrasser du menu

22 www.site.uottawa.ca/~elsaddik 22 Unit E-Guidelines (c) elsaddik Débutants: Lisez toutes les options, puis décidez Par conséquent, maintenez les menus petits intermédiaire: Balayage à l'article désiré puis choisi Par conséquent gardez les menus bien ordonnes et gardez les articles les plus fréquents en haut Expert: Sautez à l'article (sachez où il est) et puis choisissez Par conséquent maintenez les mêmes articles dans les mêmes positions à tout moment Stratégies d'utilisateur pour choisir un article d'un menu

23 www.site.uottawa.ca/~elsaddik 23 Unit E-Guidelines (c) elsaddik Directives pour la taille de menu Maintenez les menus courts 7 +/- 2 articles, groupes ou articles dans un groupe Ceci n'impose pas la mémoire à court terme humaine Moins que ceci force plus de niveaux de profondeur Plus que ceci fait placer et choisir dur Maintenez les hiérarchies peu profondes Évitez trop de niveaux de submenus niché Un niveau simple de submenus est souvent suggéré comme limite. Certains croient quel les menus peuvent de temps en temps miser un ou deux niveaux plus profond aussi que le nombre d'articles par niveau est peu. Seulement pour les options moins fréquemment on utilise les hiérarchies plus profondes des menus

24 www.site.uottawa.ca/~elsaddik 24 Unit E-Guidelines (c) elsaddik Quand il y a trop d'articles à adapter dans une structure de menu Maintenez les articles les plus importants dans les menus Sacrifice en rendant des menus plus longs, avant de rendre des menus plus profonds. Fournissez des commandes de dialogue Mais considérez de permettre à l'utilisateur d’adapter le système, changeant les teneurs des menus Quelques utilisateurs préfèrent des menus aux dialogue boxes

25 www.site.uottawa.ca/~elsaddik 25 Unit E-Guidelines (c) elsaddik Problèmes avec le menu niché: Plusieurs cliques pour découvrir et/ou placer l'état Ne peut pas découvrir tout l'état immédiatement Avantages par rapport aux dialogue boxes Souvent plus rapidement pour montrer et enlever Exemple: menu niché

26 www.site.uottawa.ca/~elsaddik 26 Unit E-Guidelines (c) elsaddik Quand les normes ou les conventions existent, suivez-les e.g. ‘file’, ‘edit’ and ‘window’ menus Maintenez les menus explicites Donnez à des articles les étiquettes significatives Soyez conformé dans la grammaire et le modèle dans les ensembles d'étiquettes de menu par exemple la liste suivante d'étiquettes est mauvais! ‘up’, ‘go down’, ‘forward’, ‘reverse’ Assurez tous les articles correspondent au nom du menu c.-à-d. des articles de menu devraient être clairement organisés par exemple sur un menu d'insertion, tous les articles devraient être des choses à insérer Assurez les articles correspondent seulement au nom de ce menu (aucun autre) c.-à-d. chaque article peut seulement logiquement être dans un endroit retitrez l'article ou les menus au besoin Empêchez les utilisateurs de rechercher le menu faux Directives des Menu pour assister l’utilisateur

27 www.site.uottawa.ca/~elsaddik 27 Unit E-Guidelines (c) elsaddik Directives des Menu pour assister l’utilisateur Employez les traits de repère pour montrer l'état de cabillots (Use checkmarks to show state of toggles) Employez une triangle pour montrer quand il y a un submenu Employez des points de suspension pour montrer quand l'action ne peut pas être accomplie sans entrer encore d’information e.g. ‘save as...’ Signifie une zone de dialogue modale doit être complété Mais n'employez pas des points de suspension lors de l’ouverture d’une nouvelle fenêtre non-modale Articles de menu relatifs de groupe Groupes séparés par les traits horizontaux Ceci permet à des utilisateurs de concentrer l'attention Bon grouper peut augmenter le nombre total des articles (15-20) Neutralisez les articles qui sont inadmissibles dans le contexte courant ‘Grisez-les’ Ne les enlevez pas à moins que l'utilisateur travaille constamment dans un contexte où un ensemble d'articles n'est jamais valide (par exemple le mode de débutant) Fournissez « tool tip” même sur les articles non-actifs (greyed out)

28 www.site.uottawa.ca/~elsaddik 28 Unit E-Guidelines (c) elsaddik Directives des Menu pour assister l’utilisateur Fournissez un service au support pour retourner au niveau précédent dans les menus modaux à plusieurs niveaux Par exemple aller à la page principale Fournissez la rétroaction évidente ainsi les utilisateurs savent où ils sont dans une hiérarchie de menu par exemple en montrant un page Web plus bas Permettez à l'utilisateur de sélectionner des niveaux plus élevés directement Pour des écrans montrés en raison des choix de menu, montrez l'article de menu que cela a mené à l'écran Assurer toujours que l'utilisateur possède un modèle mental d'où elles sont Employez les menus modaux seulement pour les systèmes qui sont employés pour rechercher les information par leurs catégories Par exemple « direcories on the web » Design la plupart des applications ainsi que les utilisateurs ont accès à toutes les commandes à tout moment Considérez fournir à des menus de débutant avec peu de choix

29 www.site.uottawa.ca/~elsaddik 29 Unit E-Guidelines (c) elsaddik Directives des Menu pour assister l’utilisateur Fournissez un chemin d'accéder à l'aide pour chaque menu et article Ceci facilite explorer et établir le modèle mental des utilisateurs Dynamique de tool-tip/balloon quand le curseur fait une pause au- dessus de l'article Un-clef accès à l'aide sensible au contexte au sujet à celui que le curseur se dirige Permettez la cueillette directe des articles des menus... par opposition à choisissez le nombre de l'article de menu Sur un affichage caractère-basé, employez les clefs de curseur pour choisir. Ceci fonctionne seulement si le nombre d'articles est peu Là où il y a trop d'articles pour permettre le mouvement de curseur, employez de préférence les choix alphabétiques mnémoniques aussi bien que le mouvement de curseur

30 www.site.uottawa.ca/~elsaddik 30 Unit E-Guidelines (c) elsaddik Directives des Menu pour assister l’utilisateur Aidez l'utilisateur à effectuer des actions fréquentes et réitérées Placez les articles de menu les plus utilisés près du dessus Si les fréquences sont égales, ordre les articles par l'ordre normal ou l'ordre a exécuté dans la tâche par exemple les provinces est-ouest sont un ordre normal Si toujours l'égale, passent commande alphabétiquement Mais ne sacrifiez jamais un bon groupement Fournissez les raccourcis de clavier et montrez-les sur le menu Permettez la mise sur pied des raccourcis Fournissez les menus instantanés pour les actions principales Particulièrement si le contexte est sensible c.-à-d. l'action dépend de ce qui est choisi Mais en général, les menus permanents soyez meilleur Considérez fournir le cheminement d'histoire: Quand un menu est montré, placez le curseur sur l'article le plus récent choisi de ce menu PALM operating system fait ceci

31 www.site.uottawa.ca/~elsaddik 31 Unit E-Guidelines (c) elsaddik Directives des menu pour assister l’utilisateur Utilisez les menus dans les formulaires quand on a plusieurs de 3-20 possibilité dans un champs Ceci élimine la vérification des erreurs... et aide l'utilisateur incertain mais considère les combo-boxes dans des applications intensives d’entrée des information

32 www.site.uottawa.ca/~elsaddik 32 Unit E-Guidelines (c) elsaddik 8. Raccourcis de Clavier Contre La Mnémonique Raccourcis de Clavier Une combinaison des clés qui peut être serrée pour faire une tâche, au lieu d'employer la souris pour choisir une option de menu déroulant (pull-down) En d'autres termes: Combinaisons des clés qui activent un article de menu même si le menu pour cette commande n'est pas actuellement montré Raccourcis de Clavier (normalement) se compose de : Un modificateur d'instruction clé et Un caractère clé comme Control-Z, plus a un peu de clés spéciaux comme as F1 et Delete Mnémonique Autre alternative au lieu d'employer la souris Caractère alphanumérique souligné dans: Le titre de menu, menu item, ou autre component d’interface. Activez l’équivalent a un command en serrant simultanément: Le clé « Alt » et Le caractère alphanumérique souligné

33 www.site.uottawa.ca/~elsaddik 33 Unit E-Guidelines (c) elsaddik 8. Raccourcis de Clavier Contre La Mnémonique D’une manière différente aux mnémoniques, Raccourcis de Clavier N’ouvre pas les menus Ils effectuent les actions indiquées directement Puisque tous les raccourcis de clavier sont disponibles à tout moment, vous ne pouvez pas les réutiliser comme les mnémoniques Mnémoniques, Raccourcis de Clavier peuvent sauver du temps et des efforts de changer ente le clavier et le souris pour exécuter simple commande parfois c’est juste trop incommode de déplacer la main - au loin du clavier - et rechercher la souris. En travaillant avec laptop ‘pointer device’

34 www.site.uottawa.ca/~elsaddik 34 Unit E-Guidelines (c) elsaddik 8. Directives pour Raccourcis de Clavier Limitez le nombre de raccourcis de clavier fournissent des moyens alternatifs d'accéder aux mêmes fonctions i.e. menus Ne fournissent pas un raccourci pour toutes les commandes Montrer les raccourcis de clavier en utilisant des abréviations standard pour les noms principaux : Comme Ctrl pour la touche de commande, séparé par des traits d'union N’employez pas la clef de méta (la clef de commande sur la plateforme de Macintosh) pour un raccourci de clavier qu'il n'est pas disponible sur quelques autre plateformes Puisque chaque plateforme fait s'assurer ses propres raccourcis standard, Assurez que tous les nouveaux raccourcis de clavier vous avez créés sont compatibles avec les raccourcis existants sur toutes vos plateformes de cible

35 www.site.uottawa.ca/~elsaddik 35 Unit E-Guidelines (c) elsaddik Mnémoniques communes Menu TitlesMenu Items FileNew, Open, Close, Save, Save As, Page Setup, Print, Exit EditUndo, Redo, Cut, Copy, Paste, Delete, Find, Find Again, Select All FormatFont, Style, Size, Bold, Italic, Underline, Align Left, Align Center, Align Right ViewLarge Icons, Small Icons, List, Details, Sort By, Filter, Zoom In, Zoom Out, Refresh HelpContents, Tutorial, Index, Search, About Application

36 www.site.uottawa.ca/~elsaddik 36 Unit E-Guidelines (c) elsaddik Raccourcis de Clavier communes Ctrl-N New (File menu) Ctrl-O Open (File menu) Ctrl-W Close (File menu) Ctrl-S Save (File menu) Ctrl-P Print (File menu) Ctrl-Z Undo (Edit menu) Ctrl-Y Redo (Edit menu) Ctrl-X Cut (Edit menu) Ctrl-C Copy (Edit menu) Ctrl-V Paste (Edit menu) Delete Delete (Edit menu) Ctrl-F Find (Edit menu) Ctrl-G Find Again (Edit menu) Ctrl-A Select All (Edit menu) Ctrl-H Replace (Edit menu) Ctrl-B Bold (Format menu) Ctrl-I Italic (Format menu) Ctrl-U Underline (Format menu) Ctrl-L Align Left (Format menu) Ctrl-E Align Center (Format menu) Ctrl-R Align Right (Format menu) F1 Help F5 Refresh

37 www.site.uottawa.ca/~elsaddik 37 Unit E-Guidelines (c) elsaddik Raccourcis de Clavier communes Comment déplacer la zone courante de fenêtre ou de dialogue, à une position différente sur l'écran, sans employer la souris ? Appuyez sur (SHIFT + ALT + SPACEBAR) ensuite appuyez M Déplacez la fenêtre ou la zone de dialogue employant les flèches up/down/left/right ensuite appuyez (ENTER) Comment redimensionner la fenêtre courante sans employer la souris ? Appuyez sur (SHIFT + ALT + SPACEBAR) ensuite appuyez S Déplacez la fenêtre ou la zone de dialogue employant les flèches up/down/left/right ensuite appuyez (ENTER) Comment commuter entre plusieurs applications, qui sont ouvertes en même temps ? Press (ALT + TAB) or Press (ALT + ESC)

38 www.site.uottawa.ca/~elsaddik 38 Unit E-Guidelines (c) elsaddik 9. Forms-Based Interfaces Une formulaire est un écran contenant des champs marqués qui doivent être complétés par un utilisateur, généralement par la dactylographie ou parfois en faisant à des choix de menu L’utilisateur est présenté avec un formulaire où les diverses parties doivent être remplir Un formulaire peut être crée en employant: Une chaîne des caractères dactylographiées par un utilisateur (User-Typed strings: ) La validation est nécessaire Le concepteur pourrait indiquer la syntaxe désirée visuellement (c.-à-d., pour une date DD/MM/YY). Choix d'une liste Tous les choix permis peuvent être détaillés L'utilisation d'un menu iconique par exemple, réduira des erreurs dues à la dactylographie.

39 www.site.uottawa.ca/~elsaddik 39 Unit E-Guidelines (c) elsaddik 9. Forms-Based Interfaces Tâche principale pour le concepteur: Disposition d'écran efficace  Évitez l'image de fond (Avoid clutter )  Suivez un modèle cohérent dans tout le système, Tâche principale pour l’utilisateur : Entrez l'information aussi rapidement et exactement que possible  Incluez seulement l'information qui est vraiment nécessaire pour accomplir les tâches d'utilisateur Comprenant ce qui doit être entré Recherche information particulière Vérification de l'exactitude d'information entrée Confirmation pour voir si l'information est appropriée ou correcte  Aidez l'utilisateur à se sentir en control du système Prendre des décisions correctes  Incluez toute l'information nécessaire pour prendre une décision

40 www.site.uottawa.ca/~elsaddik 40 Unit E-Guidelines (c) elsaddik Directives pour design data entry fields Permettez un nombre illimité de caractères dans un champs, si possible Si l'utilisateur continue la dactylographie, utilisez le défilement Là où la longueur des champs est : Assurez que les utilisateurs peut savoir la longueur Évitez de combiner des lettres et des nombres dans un système de codage Les utilisateurs seront enclins aux erreurs de transcription Quelques erreurs communes : O (lettre) vs. 0 (nombre) I (lettre) vs. 1 (nombre) B (lettre) vs. 8 (nombre) Z (lettre) vs. 2 (nombre)

41 www.site.uottawa.ca/~elsaddik 41 Unit E-Guidelines (c) elsaddik Directives pour design data entry fields Fournissez l'accomplissement de l'entrée partielle non ambiguë épellation correcte permettez les abréviations permettez tab-completion avec l'affichage du menu partiel Mais demandez à l'utilisateur de confirmer la correction Permettez l'entrée majuscule ou minuscule : Abed = ABED = abed Permettez n'importe quel format pour l'entrée de date : problème avec de date comme: 05.07.70 July, 5 th 1970 or May, 7 th 1970 ?? Permettez aux utilisateurs d'écrire n'importe quelle unité de la mesure e.g. ‘in’, ‘cm’ etc. exécutez les conversions automatiquement

42 www.site.uottawa.ca/~elsaddik 42 Unit E-Guidelines (c) elsaddik Directives pour design data entry fields N'exigez pas zéros au début Permettez les décimales, les nombres entiers et les fractions pour des valeurs de non-nombre entier exécutez les conversions automatiquement Préremplissez des champs avec des valeurs par défaut si possible : Valeurs précédemment écrites ou entrée i.e. quand l'édition des données a chargé d'une base de données Défauts historiques (en ne montrant pas un enregistrement) Ce que cet utilisateur a entré le plus récemment Ce que cet utilisateur entre (habituellement) ‘ Valeur raisonnable ’ défauts E.g. ‘Canada’ comme pays Distinguez visuellement les données précédemment entrée d'autres de valeurs par défaut

43 www.site.uottawa.ca/~elsaddik 43 Unit E-Guidelines (c) elsaddik Directives pour design data entry fields Assurez les articles fréquemment entrée peut être rapidement dactylographié e.g. ‘y’ pour ‘yes’ et ‘n’ pour ‘No’ même lorsqu'il y a une check box Suivez à règles conformées de justification : toujours left justify textes et codes Alignez les valeurs décimales sur la virgule décimale Right justify les valeurs numérique (pas de codes ou valeurs avec une virgule décimale ) Fournissez les ‘buttons’ pour incrémenter ou décrémenter des nombres Pour les nombres qui prennent leur valeur d’une très grande liste, fournissez les glisseurs. SEE Example: Applet (Disk scheduling)

44 www.site.uottawa.ca/~elsaddik 44 Unit E-Guidelines (c) elsaddik Bouts pour aider des utilisateurs à choisir des ensembles discrets de valeurs Ceux-ci sont souvent stockés intérieurement comme ’codes’ : E.g. Product code Postal code Province code Credit card number SIN Réduisez l'utilisation des codes de rendre une interface plus directs

45 www.site.uottawa.ca/~elsaddik 45 Unit E-Guidelines (c) elsaddik Bouts pour aider des utilisateurs à choisir des ensembles discrets de valeurs Automatically break up long codes into 3-4 character chunks Telephone number: ( _ _ _ ) _ _ _ – _ _ _ _ (613) 562 – 5800 Social Security Number: _ _ _ – _ _ _ – _ _ _ (000 – 000 – 000) Times: _ _ : _ _ _ _ (11:30 AM) Date: _ _ / _ _ / _ _ _ _ (03/21/04 indicates March, 21 1969) fournissez un exemple à la droite du champ d'entrée laissez le curser sauter au prochain champ Mais prenez garde des nombres étrangers qui peuvent avoir différents modèles standard Ne contraignez pas l'entrée Ajoutez les espaces ou les tirets si l'utilisateur les omet

46 www.site.uottawa.ca/~elsaddik 46 Unit E-Guidelines (c) elsaddik Tips to help users choose from discrete sets of values Employez les widgets suivants pour éviter des utilisateurs devant apprendre par coeur et écrire des codes Quand un article peut être sélectionné : Lists / Combo boxes / Field menus Quand il y a un grand nombre d'articles Quand les articles peuvent changer de temps a temps Radio buttons (exclusive-or) Prend plus d'espace Quand plusieurs articles peut être sélectionné : Check boxes Lists qui permettre plusieurs choix Prend plus d'espace

47 www.site.uottawa.ca/~elsaddik 47 Unit E-Guidelines (c) elsaddik Tips to help users choose from discrete sets of values Si des codes étranges doivent être stockés intérieurement, traduisez-les en valeurs mnémoniques utilisables sur l'écran e.g. si 1-13 sont employés intérieurement pour la province ou les codes de territoire, permettent des noms alphabétiques Traduisez en tant que valeurs internes nécessaires Fournissez la rétroaction graphique au sujet de l'option actuellement choisie (si possible)

48 www.site.uottawa.ca/~elsaddik 48 Unit E-Guidelines (c) elsaddik Tips about field captions, labels and descriptive text Gardez field labels simple e.g. ‘Home address:’ et non plus ‘Enter home address’ Gardez labels non ambiguë et précise e.g. ‘Required delivery date’ et non plus ‘date’ Distinguer captions des champs d’entrée (input fields) les champs d'entrée devraient être les seuls qui sont blancs avec une boîte autour d'eux Employez un mélange de lettre minuscule et majuscule en texte Evitez: HOME ADDRESS  Home address Par ce qu’il est plus lent pour lire et distrayant Là où le format de l'entrée est important, fournissez une sélection d'exemple à la droite du champ d'entrée e.g. (Last, First Middle) Fournissez tool tips ou balloon de texte d’aide pour chaque champ. Ceci apparaît au fond de l'écran quand le curseur est dans un champ Comme avec les menus

49 www.site.uottawa.ca/~elsaddik 49 Unit E-Guidelines (c) elsaddik Tips about field captions, labels and descriptive text Rendez les instructions ou le texte descriptif simple et clair Employez les phrases et les mots courts (5ème année scolaire) Employez des expressions positive, et pas négative Bad: Do not press until data is entered Better: Enter data, then press Employez le voix active Bad: The message is sent by pressing Better: To send message, press Laissez les instructions dans l'ordre chronologique Bad: Press after typing name Better: Type name, then press Décrivez les actions séparées dans des phrases séparées Bad: Enter data and press Better: 1) Enter data 2) Press return to accept

50 www.site.uottawa.ca/~elsaddik 50 Unit E-Guidelines (c) elsaddik Tips about field captions, labels and descriptive text Rendez les instructions ou le texte descriptif simple et clair (2) En décrivant des actions, décrivez les conséquences Bad: Press when done Better: To add to database, press Décrivez les résultats avant les actions Bad: Press to add to database. Better: To add to database, press Maintenez les paragraphes courts 2-4 phrases Séparez les paragraphes par un interligne Maintenez 26-50 caractères dans un ligne Si vous employez des colonnes, placez 4-5 espaces entre les colonnes Évitez la mise d'un trait d'union(Tele-phone  Telephone ) Employez l’indentation (forme de points) pour organiser le texte

51 www.site.uottawa.ca/~elsaddik 51 Unit E-Guidelines (c) elsaddik Tips about arranging sets of fields Groupez les champs ou d'autres widgets quand il y a plus de 7 dans un dialogue ou une fenêtre Unifie les groupes thématiquement Gardez les groupes visuellement séparée Séparez en utilisant des lignes et de l'espace (vide) Employez ombrager ou colorez derrière des groupes Considérez marquer des groupes N’utilisez pas trop de groupes (3 - 5 est bien) Si un dialogue est encore encombré (confondant) après avoir groupé, considérez à l'aide des écrans multiples Surtout pour les débutants Mais gardez les articles relatifs sur le même écran

52 www.site.uottawa.ca/~elsaddik 52 Unit E-Guidelines (c) elsaddik Tips about arranging sets of fields Groupez les articles logiquement (Evitez groupements par hazard) Employez les ordres normale si possible (par exemple ordre standard dans les adresses) Groupez alphabétiquement Seulement affichez les éléments d'écran que l'utilisateur doit certainement voir Cachez les éléments qui sont seulement parfois nécessaires Faites les apparaître quand le système indique qu’ils sont vraiment nécessaire I.e. évitez de forcer l’utilisateur à décider au sujet des corrélations parmi des champs e.g. If field A has ‘4’ then field B must be filled in Have Field B automatically appear in real time when field A is filled in

53 www.site.uottawa.ca/~elsaddik 53 Unit E-Guidelines (c) elsaddik Tips about arranging sets of fields Align sets of fields consistently Align the left sides of input fields Align the right sides of captions (followed by a few pixels then the input field) Especially if captions differ substantially in length Indicate when fields are optional e.g. using a * for the mandatory fields But question why you are gathering the optional data * Family name:___________________ * names: ______________________ * Address:____________________ ____________________ * Telephone:______________________ Sex:___ Data of Birth:_______________ (yyyy/mm/dd) Social Ins. Number:_______________

54 www.site.uottawa.ca/~elsaddik 54 Unit E-Guidelines (c) elsaddik Tips to aid the user work within a screen When a form is first entered, place the cursor over the most likely first input position Should normally be the first field in the top left corner Unless pointing out the position of an error Always allow the user to go back and edit already- entered data Use tab and tab-back (shift-tab) for motion between fields Place fields that will not change at the end so user does not have to tab through them Optional fields Fields with rarely changed default values

55 www.site.uottawa.ca/~elsaddik 55 Unit E-Guidelines (c) elsaddik Tips to aid the user work within a screen Ensure the text cursor can only rest on editable (unprotected) fields And make sure protected fields look visually distinct Where there are columns of similar data, arrange tab order to be column-by-column if possible i.e. down the left, then down the right When each line contains a record, and each record has several editable fields, tab order should be a record at a time i.e. left-to-right, then top down Place instructions at the top of a form When it is necessary to describe how to use a form (See also discussion of how to display error messages, in the section on error handling)

56 www.site.uottawa.ca/~elsaddik 56 Unit E-Guidelines (c) elsaddik Tips to aid navigation between dialogs Provide navigational instructions in the same place on all dialogs i.e. where to go next, what to do when done Place at the bottom, unless users typically just glance at screens In on-screen navigational instructions Be brief Use consistent style Indicate how to go back Indicate where going back would go e.g. ‘To return to inventory items, press ESC’ Provide on-line help about each screen

57 www.site.uottawa.ca/~elsaddik 57 Unit E-Guidelines (c) elsaddik Tips to aid navigation between dialogs Label each dialog clearly Indicate how the user got here Indicate the page number of multi-page forms (e.g. wizards) Ensure similar dialogs look sufficiently different to prevent confusion A label is not enough e.g. ‘employee information’ vs. ‘customer information’ Ensure data loaded from the database looks different from data being newly entered or modified - E.g. use a different font, colour, boldness etc

58 www.site.uottawa.ca/~elsaddik 58 Unit E-Guidelines (c) elsaddik Thank You!