SEG 3520 Conception et impl

1
SEG 3520Conception et implémentation
dinterfaces usager

• Prof. Dr.-Ing. Abdulmotaleb El Saddik
• University of Ottawa (SITE 5-037)
• [phone] x 6277
• elsaddik _at_ site.uottawa.ca
• abed _at_ mcrlab.uottawa.ca
• http//www.site.uottawa.ca/elsaddik/

2
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
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
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
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 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
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 doutil 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/b
ook/index.html
9
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
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

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