SEG 3520 Conception et implémentation d’interfaces usager

1. SEG 3520Conception et implémentation d’interfaces 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. Unit E: Design Guidelines • A General Meta-Guideline • Interaction Styles vs. Interaction Elements • Coding Techniques and Visual Design • 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. 10. Organisation des interfaces en fenêtres Une fenêtre est un contenant que les concepteurs utilisent pour organiser l’information 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. Types de fenêtres • Page principale (Primary window): • Est une fenêtre dans laquelle l’interaction principale de l’usager 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. 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. Types de fenêtres • Fenêtre d’utilité: • 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 d’utilité 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 d’outils qui est utilisé pour sélectionner un outil graphique. (tool palette that is used to select a graphic tool. )

7. 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. 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 d’outil et barre de boutons (Toolbar and toolbar buttons) • Scrollbar • Content pane Picture from Java Look and Feel Design Guidelines http://java.sun.com/products/jlf/ed2/book/index.html

9. Conception de fenêtres multiples • Avantages • Les fenêtres optimisent l’utilisation de l’espace d’affichage. Windows optimizes the use of limited display space: • Plus d’informations 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 • L’usager 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 l’esnsemble de fenêtres dans lesquelles on travaille (Automatic facilities for organizing window working sets) • Sauve du temps et facilite l’administration 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 d’alterner entre les fenêtres • Dû au fait que les usagers se perdent facilement (Due to getting lost) • La taille de l’écran d’affichage et de la résolution sont des limitations • Perte du temps dans le réarrangement des fenêtres • L’usager peut être confus par l’alternation

10. 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. Directives générales pour réarranger les fenêtres • S’assurer que l’arrangement des fenêtres peut être changer seulement par l’usager • 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 l’usage des fenêtres secondaires optionnelles • Comme alternative, utiliser plusieurs fenêtres primaires ou menus • Permetter à l’usager de sauver l’arrangement des fenêtres d’une exécution à une autre dans un programme • Permettre le choix de quoi faire à l’ouverture 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. 11. Interfaces question / réponse • Concept • Étape 1: le système demande une question, l’usager 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 d’une procédure ou d’une 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. 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. 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 à l’utilisateur 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. 12. Interfaces de recherche • Concept • Rechercher de l’information • 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 d’article correspondant apparaît • L’usager en sélectionne un pour afficher le formulaire (The user selects one to display a filled form)