1 (c) elsaddik SEG 3210 User Interface Design & Implementation 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 General Stuff Lecture: LEC 1 Tuesday 08: :00 CBY - D207 LEC 2 Friday 10: :30 CBY - D207 Lab: LAB Group1 Monday 11: :30 STE 2052 LAB Group2 Friday 11: :30 STE 0131 Office hours: Tue: 10: :00

10 (c) elsaddik Reference Material The professor’s course notes will be available on- line. Various web sites are suggested on the course web site. Optional textbooks: 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 MARKING SCHEME 40% Assignments Assignment 1 - Videotaped evaluation - 15% Work in pairs Assignment 2 - Heuristic evaluation - 5% - Individual work Assignment 3 - Interface design project - 20% - Work in pairs a) 5% paper-prototype workshops - presentation of ideas in class b) 5% task analysis and design c) 5% working demonstration - presented to the professor d) 5% design rationale and evaluation 20% Midterm test 40% Final exam To pass the course you need at least 50% of the Final

12 (c) elsaddik Overview of the course The user interface design process. Analyzing the task the user must perform Building metaphors and a conceptual model to help the user The ‘star model’ of software development User-centered design, prototyping Design rationale Evaluating interfaces experiments disciplined observation techniques As an exercise, you will be asked to evaluate the interface of a software product while you study somebody using it.

13 (c) elsaddik Overview of the course Guidelines for good interface design Psychological reasons for guidelines Making the interface ‘visible’ to the user Use of feedback, colour, icons Handling error conditions Undo and graceful exit Controls (widgets) like menus, dialog boxes, radio buttons etc. Command languages Modality vs. non-modality etc. As an exercise, you will design a simple interface

14 (c) elsaddik Overview of the course ALSO in the course: In the lab you will work user interface building software as you develop and test user interfaces. You can use whatever you want, but Java, XML, DHTML, FLASH are recommended You may work on user interfaces for projects you are doing in other courses, but you will have to get permission of the other professor

15 (c) elsaddik Assignments Please stick to deadlines! I reserve the right to deduct marks from late assignments unless you have a reasonable excuse You are responsible to check your for any changes of plan (which is also posted to the web site) Assignment 2 is individual work, the others are group work You should work in groups of two on assignments 1 and 3. NO exceptions Group members must share each phase of the work Each member should learn the same things When you hand in reports, you must state who has done what Otherwise you will loose marks

16 (c) elsaddik Assignment proposals See syllabus for deadline. No marks for this, but you lose 2 marks on the course, if you fail to deliver on Time. Each person hand in: A short description of what you plan to evaluate in assignment 2 (2-3 lines is enough) Each group hand in: Names of group members Your proposal for assignment 1 What you will evaluate Who you will use as users Whether you will use your own camera (and can do the work on your own time) or whether you will need to be scheduled in a lab time-slot, using University cameras Your proposal for assignment 3 What type of software you will design I reserve the right to veto any proposals if I think it is not appropriate. I will contact you by if that is the case

17 (c) elsaddik Assignment 1: Videotaped Co-operative Interface Evaluation See syllabus for deadlines and marking scheme Outline of procedure: 1.Choose a software product to evaluate You can use any software as long as: You are at least somewhat familiar with it. You can find one or two subject users who are not experts You can run the software in an experimental manner (i.e. not a nuclear power plant!) It could be something you are working with, developing etc. It must involve some data input as well as output (does not have to be a GUI) I would prefer it not be a web site; if it is, it must have some interesting complexity (and must not be the same as what you look at in assignment 2)

18 (c) elsaddik Assignment 1: Videotaped Co-operative Interface Evaluation 2.Choose an aspect of the software to focus on Pick just a part of a system if it is complex. The UI that implements one to three tasks that together can be done by an expert in about 20 minutes. Ideally you will work with a highly used or more complex part of a system As the evaluators, you should become familiar with the part of the software you will evaluate Do not forget to sign the Informed Consent Form Available on the course web site

19 (c) elsaddik Assignment 1: Videotaped Co-operative Interface Evaluation 3.Perform a co-operative evaluation and malfunction analysis Follow (in detail) the procedures outlined in module B Remember to do a short dry run (pilot study) so you become comfortable with the procedures and A-V equipment. The dry run must use a different task from the main session. Remember that co-operative evaluation requires both you and the subject user to verbalize. Your subject(s) should not be someone intimately familiar with the software (i.e. not a designer); however the subject should know or be taught the basics of the system Total videotaping time should be minutes Videotape the session (the TA will help with this if needed) You can arrange to borrow cameras from A-V services, although if you do your study with the TA, she can take care of this for several groups at once. Do not hand in the tape with your report, but keep it in case the professor wants to see it. Erase the tape once you get your mark.

20 (c) elsaddik Assignment 1: Content of the Report 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!