www.site.uottawa.ca/~elsaddik 1 (c) elsaddik seg 3210 user interface design & implementation...
TRANSCRIPT
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
1(c) elsaddik
SEG 3210
User 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/
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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)
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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 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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
5(c) elsaddik
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.
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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?
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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.
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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.
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
9(c) elsaddik
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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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.
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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 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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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 email if that is the case
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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)
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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 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.
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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.
• 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.
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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 20-30 minutes (depending on the number of people in the class)
• Restrict you presentation to 5-10 minutes
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
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)
ww
w.s
ite.
uo
ttaw
a.ca
/~el
sad
dik
26(c) elsaddik
Thank You!