Designing the Ribbon
Lots of info on the design process that
resulted in the ribbon interface for word
Very relevant to lecture on prototypes and
Prototyping is designed to
Basic Single-Window X
X: The Basics
Basic X Architecture
Events and the Event Loop
1960s: Doug Englebart used a mouse-driven cursor
with multiple (non-overlapping?) windows.
1973: Xerox PAR
Interaction versus Interface
Recall: What is the difference between user
interaction and the user interface?
Interaction is the dialog between user and computer
At the I/O threshold
Interface is the vehicle for dialog
Instructor: Edward Lank
Web Site: www.student.cs.uwaterloo.ca/~cs349/
Text: Building Interactive Systems, Dan R. Ols
Ergonomics vs. Cognetics
Ergonomics: The study of how people (physically)
Cognetics: The study of how people (mentally)
We must master an ergonomics of the mind if
we want to design interfaces that are likely to
CS 349 / SE 382
Please print carefully in upper case letters. For example YOUR NAME
Please print your name neatly in the space above all in upper case block letters.
This exam is designed to take 90 minutes. You have two hours to answ
Time: 4:30 - 5:50p.m.
Permitted Aids: None
Cheating is an academic offense. Your signature
on this exam indicates that you understand and
agree to the Universitys policies regarding
cheating on exams.
Java GUI Programming
A quick-start guide to building Swing applications.
With examples and pictures.
Designed by James Gosling; released by Sun
Microsystems in 1995.
Made open source under GNU GPL in 2
Logical input devices
MVC at widget-level
CS349 - MVC
Widget is a generic name for parts of an interface that
have their own behavior.
e.g.: buttons, progress bars, sliders, drop-down menus,
Widget toolkits overview
Common widget types
Lightweight vs heavyweight widgets
Also called widget libraries or GUI toolkits
Software bundled with a window m
Not that Long Ago
Quick History of Interaction
Programs may ask for input as they run
Example: typical installer script
Current: Graphical User Interfaces
More than just text!
Layout of components can be thought of as
Determining an optimal visual layout (ie, applying
principles of good graphic design)
Applying algorithms that maintain that desired
visual layout through resi
Why Design Custom Widgets?
You design new widgets to
address a need (not
addressed by existing
Many examples of useless
eg: the Segway
Make sure you need a cu
UI Design Process
User Centered Design: Buzz-words,
methodology, state of mind
Important components in User Centered Design
Understanding Users: Scenarios, Functions, Prioritize,
Design the UI: Identify/D
GUIs often allow direct manipulation of onscreen artifacts with the mouse
Need to perform many inside tests to
Easy for rectangles
Not so easy for
for (Item item : displayList)
Event: noun: a thing that happens, especially one of
importance. Example: the media focused on events in
Event: a structure used to notify an application of an
Keyboard (key pre
What should you do when a task will take
Fetching a large image or long list over a (slow)
Factoring a large number
Reading a large file
Searching a directory structure
Visual Design: The Problem
Need to lay out elements
within a window
where is it?
what do I do with it?
position, size, color,
window assignment, etc.
Applications with Multiple Views
Two (or more!) views
is normal. Examples:
outline view, normal
often at the same time
folder view, file view,
Design Patterns/MVC Reprise
MVC as UML (Java Version)
Note that MyView does not need
to implement IView. It could
provide an anonymous inner class
to MyModel instead.
Observer Design Pattern
Creating a Custom Table Using JTable
X Design Criteria 1
The X Window System by Robert W. Scheifler and Gim
Gettys in ACM Transactions on Graphics, Vol. 5, No. 2, April
1986, defines the following design goals for X. See the full
paper on the course web site.
Intro to Java
Designed by James Gosling
Released by Sun Microsystems in 1995.
Originally a proprietary license, but made open
source under GNU GPL in 2007.
Sun and Java acquired by Oracle in 2010.
Modern GUI Systems
Life after X Windows
Apple Macintosh GUI (1984)
High resolution, high refresh graphics display
Pointing device (e.g., mouse)
Windows, Icons, Menus,
CS349 - History
Responsiveness in a Java app
Responsiveness in a web app
CS349 - Responsiveness
User experience is affected by how responsive an application
appears to be to the user.
Designing for human cognitive capabilities.
Memory, perception and cognition.
Jef Raskin, The Humane
Designing devices that fit human abilities:
physical and cognitive.
CS349 - Memory, Perception & Cognition
Cut, Paste, Drag-and-Drop
Cut and paste via the clipboard and drag and drop allows for
(relatively) easy data transfer within and between applications
Expected behaviour of any application
Ubiquitous data transfer method
Thurs June 9, 7:00 -8:50 PM (110 mins)
Closed book, no calculators.
One of: MC 2034, 2035, 2038, 4060
Fry isnt a great role model here.
Focus on lecture material; anything cover
Benevolent Deception in Human Computer Interaction
(Adar et al., CHI 2013)
Malicious Interface Design: Exploiting the User (Conti
and Sobieski, WWW 2010)
Experimental Evidence of Massive-Scale Emotional
Contagion through Social Networks (Kramer et
A (brief) history of interaction
Major paradigms of interaction
Visionaries who inspired advances