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.

Slides:



Advertisements
Présentations similaires
Été INF1025 Driouch Elmahdi
Advertisements

Abes agence bibliographique de l’enseignement supérieur Les scripts.
Gestion des événements (suite)
Au programme du jour …. Ce que vous navez pas encore vu Constantes et variables de classe Main et Tests Utilisation de lAPI Existence des packages Existence.
interaction in the .LRN platform
FORMATION OUTILS « FONCTIONS »
Conception et mise en page
ALLUMER L’ORDI 1 Appuyer sur le bouton du disque dur
Interface Homme Machine IHM Pro
Introduction aux CMS.
Formation Microsoft® Office Access 2007
Vidéogramme séance 2 du 13 février 2012 Les Fenêtres Windows Micro Informatique au Cellier Joseph HOHN Séance du 13 février 2012 Sur le thème de Découverte.
PubMed Trucs et astuces…
Emploi d’un logiciel de présentation graphique : PowerPoint
Développement d’applications web
Site Web, Octobre Sommaire du test 2. Observations 3. Recommandations 4. Prochaines étapes.
Page 1 Introduction à ATEasy 3.0 Page 2 Quest ce quATEasy 3.0? n Ensemble de développement très simple demploi n Conçu pour développer des bancs de test.
1 Micro Informatique au Cellier Nous présenterons l usage de la souris et à travers ce diaporama, nous présenterons l usage du système dit des « fenêtres.
Mode plan – Table des matières
Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit
Création d'un diaporama Création d'un diaporama
Templavoila_framework Une révolution Cyril Wolfangel.
28 novembre 2012 Grégory Petit
Publispostage Menu Outils / Lettres et publipostage
Créer une interface graphique avec Photoshop.
A la découverte de la bureautique et des fichiers.
FICHIERS : Définition : Algorithme général:
Introduction : Single Display Groupware Kid Pad : exemple de Multiple Input-devices Première étude sur le Multiple Input-devices Seconde étude sur le Multiple.
Un patron de conception
1 Unit C Analyse de Tache (c) elsaddik SEG 3520 Conception et implémentation dinterface usager Prof. Dr.-Ing. Abdulmotaleb.
© Petko ValtchevUniversité de Montréal Janvier IFT 2251 Génie Logiciel Notions de Base Hiver 2002 Petko Valtchev.
Nous finissons Je regarde.. Le Présent Ils vendent.
ALLUMER L’ORDI 1 Appuyer sur le bouton du disque dur
 Sil vous plait suivis le “tutorial” dans les pages suivantes. Vous avez toutes la classe pour le finir.  Ouvrir un nouveau feuille de calculs dans.
Création et présentation d’un tableau avec Word 2007
Gestion des fichiers et dossiers
PROGRAMMATION INFORMATIQUE D’INGÉNIERIE II PRO-1024.
1 Unit E-Guidelines (c) elsaddik SEG 3520 User Interface Design & Implementation Prof. Dr.-Ing. Abdulmotaleb.
PROGRAMMATION INFORMATIQUE D’INGÉNIERIE II
-Utilisation du logiciel Download helper -Utilisation de la vidéo -Utilisation d'un exercice via Hot Potatoes.
 Objet window, la fenêtre du navigateur
Outil de conception d’applications WPF Anciennement « Interactive Designer » Orienté « intégrateur graphistes » Particularité : Blend tm est une application.
WORKING WITH ESL LEARNERS BY: NICOLLE MARTIN. ESSENTIAL QUESTIONS: How can we maximize the learning potential of our ESL students? Is it an added task?
1 Unit E-Guidelines (c) elsaddik SEG 3210 User Interface Design & Implementation Prof. Dr.-Ing. Abdulmotaleb El Saddik University.
Let’s go back to the verb endings. What are our 3 infinitive endings? ER IR RE What is an infinitive? An unconjugated verb In other words, a verb in the.
Les Mots Interrogatifs
Cours sur le DOI COULET Alban GREMONT Baptiste GIDO2A Le 13/12/2007.
ÉCOLE POLYTECHNIQUE CONCOURS 2010 Workshop NSERC scholarship application 23 avril 2015 École Polytechnique.
Iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 21 Charte graphique.
Création JJ Pellé novembre 2014Musique : David Schombert.
1 Session de formation Windows 8.1 Bienvenue !. Module de formation 1 2 Sujets : Naviguez dans Windows 8.1 Découvrez les bases de la nouvelle interface,
1 Session de formation Windows 8.1 Bienvenue !. Module de formation 2 2 Sujets : Gérez les applications et le multitâche Trouvez et épinglez des applications.
Conception des pages Web avec
Unité 6 Leçon B. Forming yes/no questions  To form a yes/no question in French in the simplest way, add a question mark at the end of the sentence, and.
Dreamweaver Séance 1.
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
Présentation Dreamweaver 8 (1) Nina BOUAZIZ et Matthieu DI RUSSO SI28.
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
French 1 Chapter 2 Grammar 2
SI28 – Ecriture interactive et multimédia Sylvain Slaton – Pierre Laporte.
Introduction au HTML Qu’est ce que le HTML ?
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver.
Visual Information Solutions IDL 7.0 Pour une utilisation optimale d’IDL.
Abes agence bibliographique de l’enseignement supérieur Les scripts.
Transcription de la présentation:

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) x 6277 site.uottawa.ca mcrlab.uottawa.ca

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

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

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

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)

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

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

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

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)