1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to...
-
Upload
alexia-bennett -
Category
Documents
-
view
215 -
download
0
Transcript of 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to...
![Page 1: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/1.jpg)
1
CSCI E-170: L01 February 2, 2002
![Page 2: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/2.jpg)
2
Lecture Plan
Introduction to this class
Introduction to usability
GUI usability:Design Process, Principles & Bloopers
Usability testing
Skills quiz
![Page 3: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/3.jpg)
3
Designing Usable Interfaces
What is the computer interface?(collect on board)
![Page 4: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/4.jpg)
4
Command Line
Originally developed with teletypes & printing terminals
“Glass Teletypes”
xterm, terminal, command.com, cmd.sys
![Page 5: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/5.jpg)
5
WIMP
Windows, Icons, Mouse & Pull-downs Menues
Developed in the late 1970s early 1980s
Typified by:
Overlapping Windows
Lots of graphics
Common interface to all applications on a system.
![Page 6: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/6.jpg)
6
Tiny WIMP
PalmOS
Pocket PC
Symbian
![Page 7: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/7.jpg)
7
Alternative Interfaces: Non-WIMP
Speech
Gesture hands
eye-tracking
Tactile
Dance
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
http://www20.graphics.tomshardware.com/display/20050502/3d_stereo-06.html
![Page 8: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/8.jpg)
8
How do we know if an interface is “usable?”
Usability: “I know it when I see it.”
satisfaction: Interfaces we enjoy using ()
efficiency: Interfaces we are fast at using ()
learnability: Interfaces that we can use without asking for help
errors: Interfaces that we can use accurately
memorability: Interfaces we can use after time
Notice that this is different than “accessible.”
![Page 9: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/9.jpg)
9
Building a usable interface: The Design Cycle
Task Analysis What problem is the user really trying to solve?
Iterative Design (usability spiral)
1. Design
2. Prototype
3. Evaluate
4. Repeat
Keep the customer in the picture!
![Page 10: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/10.jpg)
10
Task Analysis
Observe existing work practices
Create scenarios
Create “customers” / “personas” Sally in accounting
Bob the new user
Discuss ideas with end-users
Show prototypesTry out ideas before committing to software
![Page 11: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/11.jpg)
11
Does Task Analysis Always Make sense?
Q: What is the task that a user in a game is trying to solve?
![Page 12: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/12.jpg)
12
“Doom as a user interface for process management”
2001 Proceedings of the SIGCHI conference on Human factors in computing systems
http://citeseer.ist.psu.edu/chao01doom.html
![Page 13: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/13.jpg)
13
Rapid Prototyping
Build a mock-up
Low-cost techniques:Paper!
Adobe Illustrator / Photoshop
Cheap interfaces:GUI builder
Flash
![Page 14: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/14.jpg)
14
Designing usable interfaces
Jeff Johnson, GUI Bloopers: Don’t and Do’s for Software Developers and Web Designers, Morgan Kaufmann, 2000
![Page 15: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/15.jpg)
15
Focus on the users and their tasks, not the technology
For whom is this product being designed?
What is the product for?
What problems do the users have now?
What are the skills and knowledge of the users?
How do users conceptualize and work with their data?
Principle #1
![Page 16: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/16.jpg)
16
Consider function first, presentation laterDoes not mean “worry about the user interface later!”
Develop a conceptual model
Keep it as simple as possible, but no simpler
Develop a lexicon (***)
Principle #2:
![Page 17: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/17.jpg)
17
Conform to the users’ view of the taskStrive for naturalness
Use the user’s vocabulary, not your own
Keep program internals inside the program
(remember, the implementation can change!)
Principle #3:
![Page 18: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/18.jpg)
18
Don’t complicate the user’s taskCommon tasks should be easy
Don’t give users extra problems to solveConverting a file format from TIFF to JPG for web publishing
Installing program “A” in order to install program “B”
Looking up information one screen to type it on another
Principle #4
![Page 19: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/19.jpg)
19
Promote Learning Inside the InterfaceThink “outside-in,” not “inside-out” — The user wants to solve a problem, not learn how to use your program!
Be careful of ambiguity“He saw the woman with the telescope”
Icons that don’t make sense
Be consistent so there is something to learn!
Principle #5
![Page 20: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/20.jpg)
20
Icon Bars (Principle #5)
What do these icons mean?
How about if we just used text?
![Page 21: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/21.jpg)
21
Deliver information, not just dataDesign displays carefully
The screen belongs to the user
Preserve display inertia
Principle #6
![Page 22: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/22.jpg)
22
The Two Most Important Principles!
Principle 7: Design for responsivenessMany users will forgive a bad interface, as long as it is fast.
Principle 8: Try it out on users, then fix it!Testing and iteration are the keys to good interface design.
In most cases, programmers design for themselves... is that a good thing? Is that a bad thing?
![Page 23: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/23.jpg)
23
SBook: an interface that I designed for myself…
![Page 24: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/24.jpg)
24
User interface strongly affects perception of software
Usable software sells better
Unusable web sites are abandoned
Perception is sometimes superficialUsers blame themselves for UI failings
People who make buying decisions are not always end-users
Rob Miller on UIs
![Page 25: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/25.jpg)
25
You are not the userMost software engineering is about communicating with other programmers
UI is about communicating with users
The user is always rightConsistent problems are the system’s fault
... but the user is not always rightuser’s aren’t designers
User Interfaces are Hard to Design
![Page 26: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/26.jpg)
26
UI’s are half the game:
Myers & Rosson, “Survey on user interface programming”, CHI ‘92
User Interfaces account for 50% of:Design time
Implementation time
Maintenance time
Code Size
(probably more now!)
![Page 27: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/27.jpg)
27
UI Hall Of Shames
http://www.rha.com/ui_hall_of_shame.htm
http://pixelcentric.net/x-shame/
![Page 28: 1 CSCI E-170: L01 February 2, 2002. 2 Lecture Plan Introduction to this class Introduction to usability GUI usability: Design Process, Principles & Bloopers.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649ea45503460f94ba9000/html5/thumbnails/28.jpg)
28
HCI-SEC: Usability & Security
Discussed by Saltzer & Schroeder,then largely ignored until recently.
Why the recent interest?
(class)
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.