SEG 3520 Conception et analyse des interfaces usagers

1
SEG 3520Conception et analyse des interfaces
usagers

• 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
Multimedia Communications

• Dr.-Ing. Degree from Darmstadt University of
  Technology, Germany
• Assistant professor in the School of Information
  Technology and Engineering (SITE)
• Director of
• Multimedia Communications Research Laboratory
  (MCRLab)
• Affiliated with
• Distributed Collaborative Environments Research
  Laboratory (DISCOVER)

3
Students Supervision Conf. Organization

• In Progress
• Ph. D. (5)
• MSc. (16)
• Completed
• MSc. (3) Diploma theses (22)
• Conference organization
• PC Member of several workshops conferences
• Vice Chair
• Euro-Par 2003 - International Conference on
  Parallel and Distributed Computing, 26th - 29th
  August 2003 in Klagenfurt, Austria
• Technical Program Chair
• IEEE International Workshop on Haptic Virtual
  Environments and their Applications HAVE2002, and
  HAVE2003
• General Co-Chair
• Second International Workshop on Software
  Engineering and Multimedia Applications,
  Baden-Baden, Germany, August 2000

4
Research Projects Interests

• Research Interests
• Web Engineering
• Multimedia communications
• Tele-Collaborative Environments
• Applications in tele-learning
• Web Services
• Following are some of our research topics
• Reusable hypermedia systems
• Layered learning objects
• Advanced multimedia objects (2D, 2.5D, 3D)
• Web- and XML-Technologies
• Web QoS
• Web Services security and accounting
  (sociability)
• Web services adaptability scalability
  (including context awareness)
• Internationalization support of collaborative
  environment

5
Publications Technology Transfer

• Publications
• Books authored (2)
• "Interactive Multimedia Learning", ISBN
  3-540-41930-6, Springer-Verlag (2001), 200 pp.
• "Open Java Von den Grundlagen zu den
  Anwendungen", (Open Java From Basics to
  Buildings Applications), Springer-Verlag, ISBN
  3540654461 (1999), 790 pp.
• Papers in refereed journal (8)
• Papers in refereed conference proceedings (34)
• Technology Transfer
• Product co-development
• Multibook Springer-Verlag Germany, ISBN
  3-540-66757-1 (http//www.multibook.de ), 2000.
• LOM-Editor (IEEE-Learning Object Metadata editor)
  (http//www.multibook.de/lom/), 2001
• Software license
• (JASMINE Java Application Sharing in Multiuser
  INteractive Environmnets) with S. Shirmohammadi,
  N.D. Georganas and R. Steinmetz. Licensed to
  University of ULM, Germany 2001.

6
Fun

• Question 1
• If you knew a woman who was pregnant,
• who had 8 kids already,
• three of whom were deaf,
• two of whom were blind,
• one mentally retarded,
• and she had syphilis...
• would you recommend that she have an abortion?

7
Fun

• Question 2.
• It is time to elect a world leader, and your vote
  counts. Here are the facts about the three
  leading candidates
• Candidate A
• Associates with crooked politicians and consults
  with astrologists. He's had two mistresses. He
  also chain-smokes and drinks 8 to 10 martinis a
  day.
• Candidate B
• He was kicked out of office twice, sleeps until
  noon, used opium in college, and drinks a quart
  of whiskey every evening.
• Candidate C
• He is decorated war hero. He's a vegetarian,
  doesn't smoke, drinks an occasional beer, and
  hasn't had any extramarital affairs.

8
Fun

• Candidate A
• Franklin D. Roosevelt
• Candidate B
• Winston Churchill
• Candidate C
• Adolph Hitler

• And by the way
• Answer to the abortion question
• If you said yes,
• you just killed Beethoven.

9
Horaires

• Lectures
• LEC 1 Lundi 1600 1730 STE C0136
• LEC 2 Mardi 1300 1430 STE J0106
• Lab.
• LAB Mercredi 0830-1130 STE 2052
• Heurs de Bureau
• Tue 1000 - 1200

10
RÉFÉRENCES

• Les ressources essentielles et les notes de
  lectures du professeur sont disponible
  http//www.site.uottawa.ca/elsaddik/abedweb/teach
  ing/seg3520_w2004.html
• RÉFÉRENCES OPTIONNELLES
• Dix, Finlay, Abowd and BealeHuman-Computer
  Interaction Second Edition, Prentice-Hall, 1998
• Ben ShneidermanDesigning the User Interface,
  Addison Wesley, 1998

11
Barème d'évaluation

• 40 Devoirs et projets
• Devoir 1 - Évaluation de vidéo enregistrée - 15
  - en group de 2 étudiant(es)
• Devoir 2 - Évaluation Heuristique - 5 -
  Individuel
• Devoir 3 Projet de conception et design de UI-
  20 - en group de 2 étudiant(es)
• a) 5 prototype en papier workshops -
  présentation des idées en class
• b) 5 Analyse des tâches
• c) 5 démonstration de linterface présenté au
  professeur
• d) 5 design rational et évaluation
• 20 Examen de mi-session
• 40 Examen final
• La moyenne pondérée des examens doit être
  supérieure à 50 pour que les devoirs et projets
  comptent

12
Plan du cours

• Le processus de conception des interfaces usagers
  .
• Analysant la tâche l'utilisateur doit exécuter
• Conception basée sur la construction des modèles
  conceptuels et métaphores pour aider
  l'utilisateur
• le modèle star (star model) de
  développement de logiciel
• Ingénierie rationnelle d'un logiciel
• Utilisateur-centré (User-centered) conception et
  prototyping
• Évaluation des interfaces
• Expériences
• Raisonnement de conception usant des techniques
  disciplinées d'observation
• Comme exercice
• vous serez invité à évaluer l'interface d'un
  produit de logiciel tandis que vous étudiez
  quelqu'un qui l'emploie.

13
Plan du cours

• Directives pour la conception des bonnes
  interface usagers
• Conçoivent des raisons psychologiques
• Rendant l'interface visible pour
  lutilisateur
• Utilisation de la rétroaction, les couleurs, les
  icônes, le sons
• Traiter les conditions d'erreur
• Commandes (widgets) comme les menus, les zones de
  dialogue, les boutons par radio etc...
• Langages de commande
• Modale contre non-modale fenêtres
• etc...
• Comme exercice
• vous concevrez une interface simple

14
Plan du cours

• Encore dans le cours
• Dans le laboratoire vous développez software pour
  examinez des interfaces usagers
• Comme langage de programmation vous pouvez
  utiliser la langue que vous vouliez, mais Java,
  XML, DHTML, FLASH sont recommandés
• Vous pouvez travailler aux interfaces usagers
  pour des projets que vous faites dans d'autres
  cours, mais vous devrez obtenir la permission de
  l'autre professeur

15
Devoirs

• NB Aucun retard ne sera toléré !
• Je me réserve le droit de déduire des notes si
  les devoirs sont remis en retard à moins que vous
  ayez une excuse raisonnable
• Vous êtes responsable pour examiner votre email
  pour assurer tous les changements de plan (qui
  est également signalé au site Web)
• Devoir 2 est un travail individuel, les autres
  sont travail en groupe
• Vous devriez travailler dans des groupes de deux
  sur les tâches 1 et 3. AUCUN exception
• Les membres du group doivent partager chaque
  phase du travail
• Chaque membre devrait apprendre les mêmes choses
• Quand vous donnez les rapports, vous devriez
  énoncer qui a fait quoi
• qu'autrement vous perdiez des marques

16
Proposition des Devoirs

• SVP Voir le syllabus pour la date-limite. No
  points pour ceci, mais vous perd pas 2 marks sur
  le cours, si vous manquez de me lenvoyer à
  l'heure.
• Chaque personne doit envoyer
• Une description courte dans de ce que vous
  projetez évaluer dans la tâche 2 (2 ou 3 lignes
  est assez)
• chaque groupe doit envoyer
• Des noms des membres de groupe
• Votre proposition pour la tâche 1
• ce qui vous évaluerez
• qui vous emploierez comme utilisateurs
• si vous emploierez votre propre camera ou si vous
  avez besoin dun camera d'université
• Votre proposition pour la tâche 3
• quel type de software vous concevrez l
• Je réserve la droite au veto a toutes les
  propositions si je pense que ce n'est pas
  approprié.
• Je vous contacterai par l'email si c'est le cas

17
Devoir 1 - Évaluation de vidéo enregistrée

• SVP Voir le syllabus pour la date-limite (15)
• Contour de procédé
• Choisissez un produit de logiciel pour vous
  évaluer
• Vous pouvez employer n'importe quel logiciel
  aussi longtemps que
• Vous êtes au moins quelque peu familier avec le
  logiciel.
• Vous pouviez trouver un ou deux usagers soumis
  qui ne sont pas des experts
• Il faut que vous puissiez utiliser le logiciel
  d'une façon expérimentale
• Le logiciel pourrait être quelque chose que vous
  travaillez avec, développant etc...
• Le logiciel doit impliquer l'entrée de quelques
  données comme produit
• Si le logiciel est un site Web, il doit avoir une
  certaine complexité intéressante (et ne doivent
  pas être les mêmes que ce qui vous regardez dans
  la tâche 2)

18
Devoir 1 - Évaluation de vidéo enregistrée

• Choisissez un aspect du logiciel
• Sélectez juste une partie d'un système s'il est
  complexe.
• Il faut quon a un à trois tâches qui ensemble
  peuvent être faites par un expert en environ 20
  minutes.
• Idéalement vous choisissez une partie complexe ou
  très utilisez du système
• en tant dévaluateur, vous devriez vous
  familiariser avec la partie du logiciel que vous
  évaluerez
• n'oubliez pas de signer la forme Informed Consent
  Form
• disponible sur le site Web de cours

19
Devoir 1 - Évaluation de vidéo enregistrée

• Exécutez une évaluation coopérative et l'analyse
  de défaut de fonctionnement suit (en détail) les
  procédures décrites dans le module B du cours
• Rappelez-vous de faire une courte essai général
  (étude préliminaire) ainsi vous devenez
  confortable avec les procédures et les
  équipements Audio Visuels.
• Lessai général doit employer une tâche
  différente de la session principale.
• Rappelez-vous que l'évaluation coopérative exige
  tous les deux vous et l'utilisateur de
  communiquer.
• Votre utilisateur(s) ne devrait pas être
  quelqu'un intimement au courant du logiciel
  (c.-à-d. pas un concepteur) toutefois
  lutilisateur(s) devrait savoir ou être enseigné
  les fondations du logiciel
• Le temps enregistrant en vidéo devrait être 20-30
  minutes
• Vous pouvez utiliser camera du services
  Audio/visuel. Le TA puisse prendre soin de ceci
  pour plusieurs groupes immédiatement.
• Ne donnez pas la bande avec votre rapport, mais
  gardez le au cas où le professeur voudrait le
  voir. Effacez la bande une fois que vous obtenez
  votre marque.

20
Devoir 1 Contenu du rapport

• A description of the software being evaluated in
  sufficient detail so the marker can understand
  the rest of the report (2 marks).
• A summary of the procedures you used to do the
  evaluation (3 marks)
• When, where and how did you set up the software
  to be evaluated?
• What did you ask the subject to do?
• What happened as the evaluation proceeded?
• Here you should provide sufficient detail so the
  marker can see that you followed good procedures
  and handled procedural problems well .This is not
  the protocol (transcript)
• A complete list of malfunctions that you found (1
  per line) (5 marks)
• A discussion of the four most significant
  malfunctions (5 marks). For each provide at least
  the following
• An excerpt of the protocol
• i.e. a verbatim transcript of 5-15 lines
  describing what the user did and said, what you
  said and what happened (around the time the
  malfunction occurred)
• You can embellish this with a picture
  illustrating the malfunction if this makes it
  clearer
• The results of malfunction analysis
• Brief recommendations for changes

21
Assignment 2 Heuristic Evaluation of a Web site

• Individual work See syllabus for deadlines etc.
• Pick a web site outside the university that has
  at least 20 pages and some interesting complexity
  (not just displaying information, but allowing
  you to interact with the system)
• Skim through the textbook and the course notes
  section E looking for design guidelines
  regarding
• Graphic design, use of colour, fonts, icons etc.
• Response time
• Form design and windowing
• Study the web site and identify the 10 most
  important problems.
• For each problem, perform a malfunction analysis
  as described in the notes.
• Record the following
• Problem description (a paragraph of text plus a
  printout of the part of the web page that had the
  problem circle the problem areas)
• Results of the malfunction analysis
• A couple of lines describing what you think could
  be done to fix the problem

22
Assignment 3 Interface Design

• Group work See syllabus for deadlines etc.
• You will build a prototype of a very small system
  (or component) of your choice
• You will use design techniques and guidelines
  from the course.
• The prototype need not have underlying
  functionality, but you should be able to navigate
  the UI
• The system should normally have a graphical user
  interface (windows, icons, menus, pointer etc.)
  and both data input and data output
• Exceptions to this with instructors consent and
  only in cases where a non-GUI interface would be
  appropriate
• Suggested size
• 4-12 screens, dialogs, pages or windows
• If you have a single screen, functionality must
  be more than just a few fields.
• 20-40 input or navigation controls (fields,
  scrollbars, radio button sets etc.)
• 10-20 commands, menu items, buttons These should
  either alter the look and feel or drive simple
  stub programs.

23
Assignment 3 Milestones

• Milestone a) Paper prototypes
• Short presentation followed by class discussion
  (we call these workshops) See syllabus for
  presentation times
• Describe in 1 slide the task the user will
  perform
• Show (Moke-up or hand-drawn !!) sketches of the
  windows, screens or dialogs and orally describe
  how the user will interact with the system
• You should use PC or overheads slides (if
  hand-drawn)
• You may show more than one alternative design
• Classmates and the professor will comment on your
  work
• What they liked
• Constructive criticism
• You will have 20-30 minutes (depending on the
  number of people in the class)
• Restrict you presentation to 5-10 minutes

24
Assignment 3 Milestones

• Milestone b)
• Task analysis and second iteration of design. See
  syllabus for due date
• Contents
• Task analysis (1-2 pages)
• Several paragraphs describing the functionality,
  and why you are planning to do things this way
  (i.e. the conceptual model)
• Sketches of the design as modified following the
  presentation
• Milestone c)
• Prototype demonstration (Functioning prototype)
  See syllabus for times
• The professor will try out your prototype for
  about 10 minutes

25
Assignment 3 Milestones

• Milestone d)
• Design rationale and evaluation
• Contents
• Screen shots of your final design (to remind us
  how it works)
• Design rationale for key decisions (2-3 pages).
  Use a methodology from unit D part 5
• Short discussion of how you evaluated your
  prototype (any method will do. 1-2 pages)

26
Thank You!
???a??st?
Dankie
WAD MAHAD SAN TAHAY
GADDA GUEY