SEG 3210 User Interface Design

1
SEG 3210User Interface Design Implementation

• 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
General Stuff

• Lecture
• LEC 1 Tuesday 0830 - 1000 CBY - D207
• LEC 2 Friday 1000 - 1130 CBY - D207
• Lab
• LAB Group1 Monday 1130 - 1430 STE 2052
• LAB Group2 Friday 1130 - 1430 STE 0131
• Office hours
• Tue 1000 - 1200

10
Reference Material

• The professors course notes will be available
  on-line.
• Various web sites are suggested on the course
  web site.
• Optional textbooks
• Dix, Finlay, Abowd and BealeHuman-Computer
  Interaction Second Edition, Prentice-Hall, 1998
• Ben ShneidermanDesigning the User Interface,
  Addison Wesley, 1998

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

16
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

17
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)

18
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

19
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.

20
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

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