SEG 3210 User Interface Design & Implementation

SEG 3210User Interface Design & Implementation Prof. Dr.-Ing. Abdulmotaleb El Saddik University of Ottawa (SITE 5-037) (613) 562-5800 x 6277 elsaddik @ site.uottawa.ca abed @ mcrlab.uottawa.ca http://www.site.uottawa.ca/~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)

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

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

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.

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?

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.

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.

General Stuff • Lecture: • LEC 1 Tuesday 08:30 - 10:00 CBY - D207 • LEC 2 Friday 10:00 - 11:30 CBY - D207 • Lab: • LAB Group1 Monday 11:30 - 14:30 STE 2052 • LAB Group2 Friday 11:30 - 14:30 STE 0131 • Office hours: • Tue: 10:00 - 12:00

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

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

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.

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

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

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

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 email if that is the case

Assignment 1: Videotaped Co-operative Interface Evaluation • See syllabus for deadlines and marking scheme • Outline of procedure: • 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)

Assignment 1: Videotaped Co-operative Interface Evaluation • 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

Assignment 1: Videotaped Co-operative Interface Evaluation • 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 20-30 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.

Assignment 1: Content of the Report • 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

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

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.

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

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

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)

Thank You! Ευχαριστώ Dankie WAD MAHAD SAN TAHAY GADDA GUEY

SEG 3210 User Interface Design & Implementation