Www.site.uottawa.ca/~elsaddik www.el-saddik.com 1 Unit E-Guidelines (c) elsaddik SEG 3520 Conception et implémentation dinterfaces usager Prof. Dr.-Ing.

Présentation au sujet: "Www.site.uottawa.ca/~elsaddik www.el-saddik.com 1 Unit E-Guidelines (c) elsaddik SEG 3520 Conception et implémentation dinterfaces usager Prof. Dr.-Ing."— Transcription de la présentation:

1 www.site.uottawa.ca/~elsaddik www.el-saddik.com 1 Unit E-Guidelines (c) elsaddik SEG 3520 Conception et implémentation dinterfaces usager 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 www.el-saddik.com 2 Unit E-Guidelines (c) elsaddik Unit E : Design Guidelines 1.A General Meta-Guideline 2.Interaction Styles vs. Interaction Elements 3.Coding Techniques and Visual Design 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 www.site.uottawa.ca/~elsaddik www.el-saddik.com 3 Unit E-Guidelines (c) elsaddik 10. Organisation des interfaces en fenêtres Une fenêtre est un contenant que les concepteurs utilisent pour organiser linformation vue par les utilisateurs dans une application - A window is a container that designers use to organize the information that users see in an application Les actions d'interface en fenêtre incluent: Action ouverte (Open action) Action fermée (Close action) Action de dimension (Resize action) Action de bouger (Move action) Avancement ou activation (Bring forward or activation)

4 www.site.uottawa.ca/~elsaddik www.el-saddik.com 4 Unit E-Guidelines (c) elsaddik Types de fenêtres Page principale (Primary window): Est une fenêtre dans laquelle linteraction principale de lusager avec les données ou le document a leiu (is a window in which the user's main interaction with the data or document takes place) Une application peut utiliser un nombre illimité de fenêtre principale, qui peuvent être ouverts, fermés, minimisés ou ajustés indépendemment. (An application can use any number of primary windows, which can be opened, closed, minimized, or resized independently)

5 www.site.uottawa.ca/~elsaddik www.el-saddik.com 5 Unit E-Guidelines (c) elsaddik Types of Windows Fenêtre secondaire: Une fenêtre supportive qui dépend de - (is a supportive window that is dependent on) Une fenêtre principale ou (a primary window or) Une autre fenêtre secondaire (another secondary window)

6 www.site.uottawa.ca/~elsaddik www.el-saddik.com 6 Unit E-Guidelines (c) elsaddik Types de fenêtres Fenêtre dutilité: Est une fenêtre dont le contenu affecte une fenêtre principale active -is a window whose contents affect an active primary window Contrairement aux fenêtres secondaires, les fenêtres dutilité reste ouverts lorsque les fenêtres principales sont fermées ou minimisées. -Unlike secondary windows, utility windows remain open when primary windows are closed or minimized. e.g. Palette doutils qui est utilisé pour sélectionner un outil graphique. (tool palette that is used to select a graphic tool. )

7 www.site.uottawa.ca/~elsaddik www.el-saddik.com 7 Unit E-Guidelines (c) elsaddik Types de fenêtre Fenêtre aplatie (Plain window): Est une fenêtre sans une barre de titre ou barre de fonctionnalités -is a window with no title bar or window controls Typiquement utilisée pour les écrans déclaboussure -typically used for splash screens

8 www.site.uottawa.ca/~elsaddik www.el-saddik.com 8 Unit E-Guidelines (c) elsaddik Composantes de base d'interface dans des systèmes en fenêtres Barres de titre (Title Bars) Window Frame Barre de menu/ Menus (Menu bar/Menus) Barre doutil et barre de boutons (Toolbar and toolbar buttons) Scrollbar Content pane Picture from Java Look and Feel Design GuidelinesJava Look and Feel Design Guidelines http://java.sun.com/products/jlf/ed2/book/index.html

9 www.site.uottawa.ca/~elsaddik www.el-saddik.com 9 Unit E-Guidelines (c) elsaddik Conception de fenêtres multiples Avantages Les fenêtres optimisent lutilisation de lespace daffichage. Windows optimizes the use of limited display space: Plus dinformations peuvent être accessibles. - More information can be accessible Les usagers peuvent utiliser plusieurs ressources sur lécran simulatanément pour compléter une tâche. - Users can use multiple sources on screen simultaneously to complete a task: Supportent les multitâches. - They give the user freedom to multitask Les systèmes en fenêtres permettent la standardisation des interfaces à travers plusieurs applications - Windowing Systems allow standardization of interfaces across many applications Lusager peuvent se déplacer facilement entre les applications et apprendre rapidement à utiliser les nouvelles applications - The user moves easily between applications and quickly learns to use new applications. Facilités automatiques pour organiser lesnsemble de fenêtres dans lesquelles on travaille (Automatic facilities for organizing window working sets) Sauve du temps et facilite ladministration de grandes collections de fenêtres (save time and make large collections of windows easier to manage) Ils se prêtent à la manipulation directe (They lend themselves to direct manipulation) Désavantages: Les usagers exécutent cettaines tâches plus lentement Dû au besoin dalterner entre les fenêtres Dû au fait que les usagers se perdent facilement (Due to getting lost) La taille de lécran daffichage et de la résolution sont des limitations Perte du temps dans le réarrangement des fenêtres Lusager peut être confus par lalternation

10 www.site.uottawa.ca/~elsaddik www.el-saddik.com 10 Unit E-Guidelines (c) elsaddik Modèle de focus des fenêtres Focus de la souris Typique de X-windows L'entrée apparaît partout où la souris se dirige L'entrée peut aller dans une fenêtre en partie obscurcie Avantages: Permet une interaction plus facile avec les fenêtres multiples sans réarrangement Interaction plus rapide dans plusieurs cas Clic au focus Standard en MS-Windows et Macintosh Une fenêtre doit être mise en évidence avant d,accepter une entrée Les entrées vont à cette fenêtre peu importe ou la souris pointe Avantage: Les entrées ne peuvent être mises accidentellement dans la mauvaise fenêtre

11 www.site.uottawa.ca/~elsaddik www.el-saddik.com 11 Unit E-Guidelines (c) elsaddik Directives générales pour réarranger les fenêtres Sassurer que larrangement des fenêtres peut être changer seulement par lusager Garder les fenêtres secondaires à un niveau et limiter leur nombre (Keep secondary windows to only one level and limit their number) Les fenêtres secondaires peuvent être: Fenêtres dans des fenêtres Fenpetres séparées qui dépendent de la fenêtre principale Mettre lusage des fenêtres secondaires optionnelles Comme alternative, utiliser plusieurs fenêtres primaires ou menus Permetter à lusager de sauver larrangement des fenêtres dune exécution à une autre dans un programme Permettre le choix de quoi faire à louverture de nouvelles fenêtres. Positionnement automatique. Arrangement en cascades est meilleur Répondre aux évenements des fenêtres en temps réel Tirer (Dragging), redimensionner (resizing), mettre en avant (bringing to front), fermer, mettre en icônes (iconizing)

12 www.site.uottawa.ca/~elsaddik www.el-saddik.com 12 Unit E-Guidelines (c) elsaddik 11. Interfaces question / réponse Concept Étape 1: le système demande une question, lusager répond aller à létape 1 Les usagers sont faits demandés une série de questions, qui les amène dans une interaction au progrès des étapes dune procédure ou dune méthode (Users are asked a series of questions leading them through an interaction to the progress of the stages of a procedure or method) Les Wizards sont des exemples classiques

13 www.site.uottawa.ca/~elsaddik www.el-saddik.com 13 Unit E-Guidelines (c) elsaddik 11. Interfaces question/réponse Seront toujours nécessaires dans certaines circonstances: Recueillir de l'information où les questions suivantes dépendent souvent des questions précédentes Préparer un formulaire de taxes Faire des sondages Diagnostiques Installation du système Avantages du Question/réponse Mécanisme simple pour fournir des entrées à une application dans une domaine spécifique oui/non, Choix multiple, codes Meilleur pour les nouveaux utilisateurs: Utile dans des domaines restreints pour les utilisateurs débutants

14 www.site.uottawa.ca/~elsaddik www.el-saddik.com 14 Unit E-Guidelines (c) elsaddik Directives Maintenir sur lécran: Un titre décrivant la tâche Une étiquette pour chaque question ou groupe de questions Poser les questions de façon simpel et directe Comme pour les formes et commandes, permettre la correction des erreurs et des défauts e.g. Are you filing jointly with your spouse (yes): Donner à lutilisateur un moyen immédiat de : Revenir pour changer les réponses aux question précédentes Demander pourquoi certaines questions ont été posées Faire le sommaire des informations recueillies jusquà date Quitter ou suspendre la session

15 www.site.uottawa.ca/~elsaddik www.el-saddik.com 15 Unit E-Guidelines (c) elsaddik 12. Interfaces de recherche Concept Rechercher de linformation Structurée (database) ou Non structurée (recherche documentaire) Options pour les interfaces de recherches Langage de recherche Bonne pour les usagers experts: Les langages d'interrogation exigent l'expérience du modèle et de la langue de données (Query languages require experience of the data model and language) Recherches par mot-clé et texte intégrale Le système cherche pour tout article contenant un mot donné Utilisées principalement pour la recherche documentaire Les dialogues de question recherchent l'information des bases de données/ ssystèmes IR Recherche par exemple: Entrer quelques champs dans un formulaire Une liste darticle correspondant apparaît Lusager en sélectionne un pour afficher le formulaire (The user selects one to display a filled form)