1 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. Lecture 1: User Oriented Design
Dec 25, 2015
1CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.
Lecture 1:User Oriented Design
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Hello!
About me– Michael Czajkowski,
• Adjunct Professor, CS Department
– Email: [email protected]– Office: Korman 233– Office hours: Wednesday 5-6pm, or by
appointment. About this course– Course web site:
http://www.cs.drexel.edu/~mczajkow/Courses/cs338-f03
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Who / what / where / when / why / how Prerequisites Lectures Readings Assignments Exams Grading Communication Policies Questions?
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
What’s a Graphical User Interface? In the narrow sense...– a graphical information channel between a
user and computer system/application• e.g., most Windows & Mac applications
– any interface with buttons, menus, etc (“widgets”)
In the broader sense...– ATMs, cell phones, navigation devices, etc.– GUIs don’t have to have standard widgets!– GUIs don’t have to be on your desktop!
This course focuses on the first group,but we’ll keep the second group in mind
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
This course's objectives
This is a GUI Design Course. – In order to pass this class you must
understand not only how to program a GUI, you must also know how to design one.
GUI Programming:– All of the GUI programming done for this
class will be done in the Java programming language, using the Swing library.
GUI Design:– This is the heart of the course. It is much
more important than the programming aspect. How do you design an interface to be usable?
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
GUI Design? Who cares! I want to program GUI Design is not easy! It is a complicated
thourough process involving many people at many levels of an organization.
Its not just for programmers! GUI Design involves cognitive psychology,
graphic arts, human factors engineering, communication, and then programming!
All of this is for one purpose:“If achieving the user's goals is the basis of our
design process, the user will be satisfied and happy. If the user is happy, he will gladly pay us money, and we will succeed at business.” - Alan Cooper
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Who is Alan Cooper? Alan Cooper is the author of our course
textbook, “About Face 2.0: The Essentials of Interaction Design”
Alan Cooper's track record:– Created first serious business software for
PCs.– Father of Visual Basic– Owns a multi-million dollar usability
engineering consulting firm, www.cooper.com– Inventor of the “Goal-Directed” process of
design.• This is the design methodology we will be following!
– Author of many design books including, “The Inmates are Running the Asylum
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Usability Today
Some problems with GUIs today:– software is “rude”
• e.g., inappropriateor derogatoryerror messages
– software makes unwarranted assumptions• e.g., assumes user knows underlying
mechanisms,such as saving to a hard drive
– software is obscure• “Use passive mode on FTP proxy?”
– software exhibits inappropriate behavior• open Word document, print it, close it
— “Save?”
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
To set the stage...
Why do we have these problems?– we have a conflict of interest
• for whom exactly are we developing the system?
– we lack a process• how can we think like engineers to evaluate
user needs and develop appropriate, usable systems?
• one simple, common, but not-so-good process:
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Bad GUIs can ruin a company! GUI Applications must:– 'Be more advanced than our competitor!'
(technology)• Too much of this: Novel. No Desirability.
– 'Be more desirable than our competitor!' (desirable)• Too much of this: Apple. No Viability.
– 'Sustain our company's bottom line!' (viable)• Too much of this: Micro$oft. No Desirability.
In the end: The objective is a product that is desirable, viable, and buildable!
If you get all three just right, you will always win!
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
When Usability Fails When GUIs Fail:– Software does not enhance productivity.– A Productivity Paradox exists.– People can not use their computers
effectively.– People get angry at their computer.– Computers fail to understand what the human
wants from them.– Failures in communication lead to failures in
understanding, which can have negative results.
– You hear many many stories about bad computers.
Lets take a good close look
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Bad Software can have Fatal Results
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Whose Fault, and what can we do?
Programmers made the GUIs, is it their fault?
What about their managers? What about the people at marketing? Whose suppose to do all of this work,
so that GUIs don't turn out bad? Thats what GUI Design is for. It
includes everybody, not just the programmer.
How are we going to Design a usable GUI?
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Goal Oriented Design: High Level
Users have goals in using our GUIs User-centered design involves...– goals: what is the user trying to
accomplish?– needs: what does the user need to do
this?– user constraints: what can/can’t the user
do?– task constraints: what can/can’t be done?– and lots of other things to consider
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Goal Oriented Design: Low Level
Users embody all aspects of being human
Being human means having limitations:– visual attention (e.g., noticing
animation)– visual processes (e.g., reading a word)– motor processes (e.g., mouse
movement)– cognitive processes (e.g., memory)
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Goal Oriented Design
Cooper’s 5-component process:
Each of these is covered in future lectures,
in great detail.
Researchusers &
the domain
Modelingusers &
use contexts
Requirementsuser, business, &technical needs
Frameworkstructure
& flow
Refinementof behavior,
form, context
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Human-computer interaction Human-computer interaction is a discipline
concerned with the design, implementation, and evaluation of interactive systems for human use and with the study of the major phenomena surrounding them.
The HCI lifecycle is an iterative cycle that involves designing and evaluating with “users”as much as possible.
The HCI academic world is huge, thousands of people perform research and achieve accomplishments that serve the purpose of better computer interaction.
A good research link: www.hcibib.org
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Building user interfaces Much of this process is smart, good ol’
software engineering– applicable to the GUI parts of the system– applicable to non-GUI parts of the system
This course focuses on the implementation of the GUI parts
BUT... We always keep in mind the other aspects of the process, particularly design
Use your knowledge of Software Design and engineering here, it applies!
Swing code: very tedious, long, and ugly!
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Mental & implementation models Implementation models describe how we,
as programmers, think about the system– there are many levels to these models– e.g., when you write “x++”, we increment x– but what happens in the processor? cache? ...
Mental models describe how the userthinks about the system– not the same as the implementation model!– e.g., saving changes (Word file vs. file system) – e.g., TV and movie projection– e.g., household electricity
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Represented models
Represented models fall between implementation and mental models
ImplementationModel
MentalModel
RepresentedModels
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Designing for the mental model
Computer Science people build systems.Not surprisingly, then, most systems conform to implementation models.
Book example: Windows file system– drag file within drive (e.g., CC drive)
file moves to new location– drag file to another drive (e.g., CD drive)
file is copied to new location– why? implementation of file system– this puts the burden of understanding low-
level file system details on the user!!!
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Designing for the mental model
Another example: Word references– link number to other part of the document– mental model: this stays linked– implementation model: link gets broken,
but software doesn’t correct — makes you do it!
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
New technology & mental models
Sometimes, new technology warrants breaking old mental models — carefully!
Example: the good ol’ calendar
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
Design & implementation: Summary Good, clean implementations facilitate
good, clean user interfaces.– efficient code leads to faster response– well structured code leads to simple
interfaces(and simple is good! -- easy to learn, remember)
– robust code doesn’t crash Good implementation doesn’t make up
for bad design, and good design doesn’t help a bad implementation.
Implementation & design go hand-in-hand!
CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University. 1
We want to make Good GUIs
When GUIs work well...– shorter training time lower costs– fewer errors less hassle, lower costs– less maintenance less hassle, lower
costs– high transfer lower future costs
In other words...– Good Design saves time– Good Design saves money– Good Design earns happy customers!