Directives de conception et principes de conception (Design guidelines, design principles) Des énoncés qui donne des conseils sur comment procéder; des.

Slides:



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

Primary French Presentation 2 Saying How You Are.
Lest We Forget N’oublions jamais
Quelle est la question?.
Verbe + infinitif. I. Le futur proche = La construction: ___________ + _______________.
Verbe + infinitif (to post). Quels sont les deux parties du futur proche? ___________ + _______________ ___________ + _______________.
Quelle est la question?.
Créer un document LES FONCTIONS ENREGISTRER LES FORMATS Retour au menu principal.
Les pronoms rélatifs Its the glue that holds sentences together…which makes it all possible!
H IRE E MBAUCHE. 1.POSITION – State the position you want filled in the TITLE. 2.JOB REQUIREMENTS – Let interested candidates know what you are looking.
Les noms des partenaires ____________________________________ ____________________________________ Partie A: Notre thème est: ______________________________.
Les Médias Sociaux au R tary World
LibGuides, Mai Sommaire du test 2. Observations 3. Recommandations 4. Prochaines étapes.
Directives de conception et principes de conception (Design guidelines, design principles) Des énoncés qui donne des conseils sur comment procéder; des.
Le passé composé avec “avoir” (pg )
Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit
Les choses que j aime Learning Objective: To know how to use j aime to talk about things I like to do.
Directives et principes de conception tirées du livre Designing Interfaces: Patterns for Effective Interaction Design de Jenifer Tidwell Chapitre 1.
Des énoncés qui donne des conseils sur comment procéder; des règles
Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)
Pour mieux écrire. 1. Do not use on-line translators (except as a dictionary for a single word) 2. Be very careful using a dictionary (be sure youre finding.
Look at the following sentences and tell me if they are in the past or the present tense 1. I go to the swimming pool every Thursday. 1. I go to the swimming.
Core Module 10 Advocacy: Engaging the Public Association des conseils scolaires des écoles publiques de l’Ontario (ACÉPO) Association franco-ontarienne.
ROLE PLAY The role play is about communication and exchange of information. It is not the time for a LONG conversation! You can get full marks for very.
UEO 3: Langue des affaires Semestre 6 Mme. Mountain.
© Copyright Showeet.com S OCIAL M EDIA T HINKING.
-Utilisation du logiciel Download helper -Utilisation de la vidéo -Utilisation d'un exercice via Hot Potatoes.
The one exception:  All verbs that end in –er are regular, with one exception.  That is aller which means “to go.”
Transition Unit Personal Information Lesson 1
Les pronoms relatifs.
Popular Mobilization Creating a mass movement to take action and put pressure on decision makers for social change Créer une masse critique d’acteurs.
Mes Vacances : Révision
INDIVIDUAL ORAL AB INITIO.
Les Mots Interrogatifs
French 101 Important Verbs. The most important French verbs – avoir (to have), être (to be), and faire (to do/make) They are used in some of the ways.
Français 1441 Chapître 3 Révision d’Examen.  Someone tells you where things on campus are located. You listen and fill in the blank with the missing.
La magie des Illusions optiques
Pile-Face 1. Parlez en français! (Full sentences) 2. One person should not dominate the conversation 3. Speak the entire time The goal: Practice! Get better.
Français 2, 5 janvier 2015 Describe your holiday break, use the past tense. Things you did or ate. What is the difference between here and there? Sage.
Warm up Traveling is often fun; write five sentences about your best vacation; where did you go and what wonderful memories you still remember. ( use.
Activities for the first week of the École 1 unit.
Create a Voki for yourself that speaks French.
Unit 1 – Greetings and Salutations
La mémoire(1): Comment bien travailler
Your team’s name. Préselection file You have just downloaded the preselection file: it’s the first step for you to win the challenge! In this file, you.
GCSE Speaking Assessment Presentation Based Discussion In your first GCSE Speaking Assessment, you are being interviewed by your French friend for their.
Bienvenue and Welcome to Our French II Live Lesson! We will begin shortly!
Welcome everyone.
Instructions for using this template. Remember this is Jeopardy, so where I have written “Answer” this is the prompt the students will see, and where.
Let’s enjoy making Session 2. Let’s enjoy making: Session 2 Les déménageurs sont arrivés !
Object pronouns How to say “him”, “her”, “it”, “them”
Vendredi 7 novembre Français III-IV Citations : « Je sais que je devrais être raisonnable, mais quand on raisonne en amour c’est comme si on le pesait,
Gestion des déplacements professionnels SAP Best Practices.
Français 2, 27 octobre 2014 Ouvrez vos livres á la page 43. Use these sentences to describe your floor plan. What do you get if you cross an alley cat.
Répétez! Bonjour!. Je m’appelle ________. Et toi ? Tu t’appelles comment? Répétez!
On conjugue! [Avoir et Etre] It is very important to learn and practise using the conjugations of verbs in French.
LES PRONOMS RELATIFS. QUE FONT LES PRONOMS RELATIFS? Les pronoms relatifs lient deux phrases pour faire des phrases plus complexes (ce qui est très important.
Stephen Gagné, DTM Laura Gagné, DTM.  Evaluation method  Test speaker  Break-out work groups  Evaluations  Evaluations of evaluations.
U NITE 7A: E CHAUFFEMENT 1 L E PREMIER OCTOBRE Le mot juste Fill in each blank with an appropriate vocabulary word. 1. M. Tremaine doit ( must ) avoir.
Comptes les points noirs !!! Elles sont droites ou courbées, les lignes?
Persuasif. 12.5% of test (1/8) You will read a source, interpret a graphic and listen to an audio source. YOU MUST REFERENCE ALL 3 SOURCES IN YOUR ESSAY!!!!!
Formation.
Journal Grade only – Introductory Journal Entry Mon week-end  Students were asked to write a paragraph detailing a minimum of 5 things they DID.
L’outil de suivi des incidents et des demandes
AVOIR Quick review of the conjugation of the verb AVOIR  J’ai  tu as  Il/elle a  Nous avons  Vous avez  Ils/ells ont.
OBJECT PRONOUNS WITH THE PASSÉ COMPOSÉ Page 122. Placement  With all object pronouns, placement is the same. DirectIndirectPlaces De+ nouns or ideas.
Echauffement: mardi, le vingt-quatre janvier, deux mille douze Translate the following sentences into French: 1. We go to the store.  Nous allons au magasin.
O WHY IS IT IMPORTANT TO PLAN AHEAD FOR THE FUTURE?
Courrier électronique ( s) Some features of s: Boîte de messagerie - Inbox Nouveau message -- New message Dossiers - Folders Suprimer - Delete.
Transcription de la présentation:

Directives de conception et principes de conception (Design guidelines, design principles) Des énoncés qui donne des conseils sur comment procéder; des règles Exemples (Hansen 1971) –Connaître ton utilisateur –Minimiser le besoin de mémoriser Exemple: permettre de selectionner graphiquement au lieu de mémoriser des codes –Optimiser les opérations Exemple: avoir des racourcis clavier –Concevoir en vue des erreurs possibles Exemple: toujours permettre un undo

Dautres exemples … Rubinstein et Hersh (1984) –..... –2. Separate design from implementation –..... –4. Develop an explicit use model –..... –87. Articulate the evaluation goals –..... –93. Videotape real users

Tog On Interface (livre de Bruce Tognazzini, 1991) Présente 200 directives reliées à la conception des interfaces sur le Macintosh, touchant les sujets suivants: –The Design Process –Positively Determining System Behaviour –Positively Influencing User Perceptions and User Behaviour –Promoting Consistency –Making the Interface Visible –Reducing or Eliminating Navigation –Conceptual Models and the System Image –Human-Computer Conversation, Vocabulary –Screen Objects, Menus, Icons, Fonts, Error Messages –User Testing –Minimizing Impact of New Releases on Old Users

Macintosh Human Interface Guidelines...describes the way to create products that optimize the interaction between people and Macintosh computers (Apple Computer, Addision-Wesley, 1992) –Ch. 1: Human Interface Principles –Ch. 2: General Design Considerations –Ch. 3: Human Interface Design and the Development Process –Ch. 4: Menus –Ch. 5: Windows –Ch. 6: Dialog Boxes –Ch. 7: Controls –Ch. 8: Icons –Ch. 9: Color –Ch. 10: Behaviors –Ch. 11: Language

Dautres exemples … Les principes de Joel Spolsky ( ) –A user interface is well-designed when the program behaves exactly how the user thought it would. –If your program model is nontrivial, it's probably not the user model. –Every time you provide an option, you're asking the user to make a decision. –Users Dont Read the Manual. –In fact, users dont read anything. –Users cant control the mouse very well. –Users cant remember anything.

Les premiers 6 chiffres sont une espèce de numéro de compte Les 5 derniers chiffres, dans ce cas, veulent dire Bourse pour étudiant canadien de 3e cycle – Je suis obligé de garder une liste de ces codes magiques dans un fichier ASCII que je consulte à chaque fois que je remplis ces formulaires Si on remplaçait ce formulaire avec un site site, quelle serait une meilleure façon de saisir ces numéros ?

Directives et principes de conception On distingue entre … –Les directives de conception: plus précises, plus détaillées, sappliquent dans moins de cas mais disent plus précisément que faire. Exemple: Toujours mettre le bouton « Okay » à gauche du bouton « Annuler » dans les boîtes de dialogue. –Les principes de conception: plus généraux, plus fondamentaux, plus vagues; sappliquent dans plus de cas mais peuvent être moins évidents à appliquer. Exemples: Tester avec des vrais utilisateurs. Les utilisateurs ont une mémoire à court terme limitée à seulement 7±2 choses (voir « The Magical Number Seven, Plus or Minus Two » de George Miller)

Directives et principes de conception Avantages: –Stimulent des idées –Servent comme listes de vérification qui donnent des conseils utiles –Peuvent être utilisés pour évaluer une interface (évaluation heuristique) Désavantages: –Parfois erronés –Il y a parfois des contradictions entre deux directives ou deux principes, nécessitant des compromis –Souvent trop vagues ou bien trop spécifiques pour linterface devant nous –Peuvent être trop nombreaux Exemple: Smith et Mosier: 679 (!!) directives (1984)

Des principes de Shneiderman: 8 règles dor 1. Être cohérent (« consistent ») –Les mêmes suites dactions pour des tâches semblables –Les mêmes termes employés à différents endroits pour référer au mêmes concepts –Les mêmes couleurs, polices, emplacements, widgets, etc. utilisés dans des situations analogues –Exemples dexceptions: Boîte de dialogue pour confirmer avant de supprimer un fichier (pour les autres actions, on na pas normalement besoin dune étape de confirmation) Ne pas montrer les mots de passe qui sont entrées

8 règles dor de Shneiderman (suite) 2. Concevoir pour différents utilisateurs –Donner des explications pour les utilisateurs néophytes –Offrir des racourcis de claviers pour les experts –Concevoir pour des utilisateurs qui nont pas de Souris Clavier Vision parfaite Contrôle parfaite de leurs mouvements Etc.

8 règles dor de Shneiderman (suite) 3. Donner un retour visuel informatif –Un retour pour chaque action de lutilisateur –Pour des actions infréquentes et/ou majeures, donner un retour visuel plus important 4. … 5. … 6. Permettre de faire « undo » –Ça encourage lutilisateur dexplorer linterface –Rend les erreurs moins graves –Exemple: selon Aza Raskin, nos logiciels ne devraient jamais complètement effacer un fichier 7. … 8. …

Quelques directives de conception du prof. Ronald Baecker (modifiées by M. McGuffin) …

Principes de conception de Baecker Be humble, and iterate often –You wont get it right the first time … –Or the second time either :-) –(Exemples: facebook, gmail, …) Follow a user-centered design process –Study work practice –Observe users as they use a system –Ask users with surveys, questionnaires, interviews –Try to put user(s) on the design team

Principes de conception de Baecker Use multidisciplinary design teams –Software –User interface design –Social/behavioral science –Visual/graphic design –Domain expertise

Principes de conception de Baecker Really know the user –Who is a typical user? Who are all the users? –Observe, ask, have users participate on design team Employ the users knowledge –Communicate with appropriate metaphors Exemple: livre électronique qui permet de tourner et feuilleter des pages Example: dans le domaine financier, utiliser le vert pour les gains, le rouge pour les pertes –Speak the users language The users jargon, not computer jargon Example: Points and picas for typographers Movie authoring software: NTSC Timecode HH:MM:SS:FF

Principes de conception de Baecker Build a mental model in the users mind –Begin with the metaphor –Example: Images made of pixels (painting program) or lines (drawing program) –Example: Financial data on a gridded worksheet with rows and columns (spreadsheet) Design for varieties of user expertise –Example: novice and experienced users (e.g. shortcuts) –Example: user customization (adaptable interfaces) –Example: individual use, and collaborative use

Principes de conception de Baecker Exploit new hardware paradigms –Example: mobile devices linked at high-bandwidth –Example: speech I/O, non-speech audio –Example: Novel 3D input / output devices Communicate visually and articulately –Focus the users attention Infobulles et dautres informations situées au curseur Méthodes subtiles pour attirer lattention (couleur; animations très restraintes) –Communiquer de linformation par des moyens visuels pour permettre de remarquer des patrons et filter visuellement

Interface de réservation de voyage (Sabre Travel Booking) AvantAprès

Principes de conception de Baecker Respond to the users actions in a way that is clear and comprehensible –Speed and predictability of response –Complete, terse, comprehensible feedback –Hidden system state (modes) kept to a minimum Example: Cut and Paste Example: hitting Undo and not knowing what will be undone Orient the user in the world –Where am I? Where have I been? Where can I go? –Example: Web sites with and without site maps –Example: Online form with and without indication of number of steps to perform

Principes de conception de Baecker Anticipate that users will have problems –Huge varieties of users, tasks, contexts –Need to anticipate and, if possible, prevent errors –Need for online help, error handling, training, support Minimize user frustration –Consistency whenever possible –Error messages should use language that reduces defensiveness Make your design simple –Elegance and simplicity aid everyone involved the designer, the implementer, and the user

Remarque Si vous avez à concevoir une interface de genre X, essayer de trouver des directives (ou même des principes) de conception spécifiques à X. Exemples: –Conception de site web –Conception dappareil mobile –Conception de logiciel pour Mac OS X Question: comment / où en chercher ?

Questions Seriez-vous capables de distinguer entre un principe de conception, et une directive de conception ? Quels sont les avantages de ces directives et principes ? Les désavantages ?

Un exemple pour discussion …

Je me sers du site web du FQRNT peut-être une fois au 6-12 mois. Je dois aller chercher où me loguer …

La page principale. Où sont les champs pour saisir mon identifiant et mot de passe? Pas facile de trouver où cliquer (les couleurs et la taille du lien ne ressortent pas). Est-ce que la page a besoin dêtre si chargée dinformations?

Une erreur, entraînée par une des actions les plus fréquentes. Ça commence mal.

Je devrais pas plutôt voir cette page comme première étape? Est-ce que la page a besoin dêtre si chargée dinformations?

Longlet Rapport final du chercheur semble prometteur, mais permet seulement de lire un document, qui nest pas le rapport final. Accès au dossier du chercheur financé ressemble au lien cliqué il y a 3 pages précédentes. Il fallait que je lise tout sur la page, que je fasse une recherche pour le mot approuver (sans succès), et que je téléphone quelquun pour demander où cliquer et que jenvoie par courriel à cette personne une capture décran de mon fureteur web (15 minutes perdues par deux personnes).

Est-ce que le lien Cliquez ici pourrait avoir un nom plus déscriptif ? Le couleurs sur ce site ne semblent pas tellement cohérentes dune page à lautre. (Brun, vert, bleu, orange, rouge, …)

Comparons à un site qui a plus dutilisateurs …

Grâce à un cookie, le site se rappelle de mon identifiant.

Contrairement au site précédent, celui-ci est probablement utilisé par beaucoup dutilisateurs quotidiens qui sont très habitués à linterface et la disposition des informations. Le site peut donc se permettre de montrer beaucoup dinformations et davoir une interface assez chargée. Toutefois, on remarque que les activités et les messages récents sont mis en évidence au centre de la page, et par les icônes rouges en haut qui ressortent visuellement.

Si vous aviez à (re)faire la conception du site web précédent, comment pourrez-vous éviter les problèmes présentés (et dautres problèmes semblables) ? – Gardez dans lesprit que les profs sont seulement un des utilisateurs du site.

Y a-t-il des directives (ou des principes) de conception que nous pouvons proposer pour guider la conception des futures sites web ?