1 (c) elsaddik SEG 3520 Conception et analyse des interfaces usagers Prof. Dr.-Ing. Abdulmotaleb El Saddik University of Ottawa (SITE 5-037) (613) x 6277 site.uottawa.ca mcrlab.uottawa.ca

2 (c) elsaddik 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 (c) elsaddik 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 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 (c) elsaddik 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 (c) elsaddik Publications & Technology Transfer Publications Books authored (2): "Interactive Multimedia Learning", ISBN: , Springer- Verlag (2001), 200 pp. "Open Java: Von den Grundlagen zu den Anwendungen", (Open Java: From Basics to Buildings Applications), Springer-Verlag, ISBN: (1999), 790 pp. Papers in refereed journal (8) Papers in refereed conference proceedings (34) Technology Transfer: Product co-development: Multibook: Springer-Verlag Germany, ISBN: ( ), LOM-Editor (IEEE-Learning Object Metadata editor) ( 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 (c) elsaddik 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 (c) elsaddik 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 (c) elsaddik 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 (c) elsaddik Horaires Lectures: LEC 1Lundi 16:00 – 17:30STE C0136 LEC 2Mardi 13:00 – 14:30STE J0106 Lab.: LAB Mercredi 08:30-11:30STE 2052 Heurs de Bureau : Tue: 10: :00

10 (c) elsaddik RÉFÉRENCES Les ressources essentielles et les notes de lectures du professeur sont disponible: ng/seg3520_w2004.html RÉFÉRENCES OPTIONNELLES Dix, Finlay, Abowd and Beale “Human-Computer Interaction: Second Edition”, Prentice-Hall, 1998 Ben Shneiderman “Designing the User Interface”, Addison Wesley, 1998

11 (c) elsaddik 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 l’interface – 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 (c) elsaddik 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 (c) elsaddik Plan du cours Directives pour la conception des bonnes interface usagers Conçoivent des raisons psychologiques Rendant l'interface « visible » pour l’utilisateur 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 (c) elsaddik 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 (c) elsaddik 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 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 (c) elsaddik 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 l’envoyer à 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 d’un 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' si c'est le cas

17 (c) elsaddik 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 (c) elsaddik Devoir 1 - Évaluation de vidéo enregistrée 2.Choisissez un aspect du logiciel Sélectez juste une partie d'un système s'il est complexe. Il faut qu’on 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 (c) elsaddik Devoir 1 - Évaluation de vidéo enregistrée 3.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. L’essai 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 l’utilisateur(s) devrait savoir ou être enseigné les fondations du logiciel Le temps enregistrant en vidéo devrait être 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 (c) elsaddik Devoir 1: Contenu du rapport 1.A description of the software being evaluated in sufficient detail so the marker can understand the rest of the report (2 marks). 2.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) 3.A complete list of malfunctions that you found (1 per line) (5 marks) 4.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 (c) elsaddik 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 (c) elsaddik 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 input or navigation controls (fields, scrollbars, radio button sets etc.) commands, menu items, buttons: These should either alter the look and feel or drive simple stub programs.

23 (c) elsaddik 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 minutes (depending on the number of people in the class) Restrict you presentation to 5-10 minutes

24 (c) elsaddik 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 (c) elsaddik 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 (c) elsaddik Thank You!