Download Interfaces and Users - Lecture Slides | CS 338 and more Study notes Computer Science in PDF only on Docsity!
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 1
Lecture 1:
Interfaces & Users
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 2
Welcome!
• About me
- David Breen, Assistant Professor, CS
- Email: [email protected]
- Office: University Crossings 114
- Office hours: Wednesday 4 - 5:30, or email for an appointment.
• About this course
- Syllabus, timeline, & resources on-line... http://www.cs.drexel.edu/~david/Classes/CS CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 3
Who / what / where / when / why / how
• Prerequisites
• Lectures
• Readings
• Assignments
• Exams
• Grading
• Communication
• Policies
• Questions?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 4
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. Dario Salvucci, Drexel University. 5
Why GUIs?
• Can present a lot of information in small
area but still maintain readability
• Can present different types of information
(e.g., pictures, animations)
• Can store “functions” on-screen without
forcing user to remember them
• Can provide “direct-manipulation”
interfaces with various input
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 6
The GUI Life Cycle
Design
Prototype
Evaluate
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 7
Focus of this course
Design Prototype Evaluate Design Prototype Evaluate CS 337: Psych HCI Design Prototype Evaluate
CS 338: GUI
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 8
To set the stage...
• Some problems with GUIs today:
- software is “rude”
- e.g., inappropriate or derogatory error 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. Dario Salvucci, Drexel University. 13
Multidisciplinary nature of GUI & HCI
• Machine side:
- computer science
- engineering
- computer graphics
- operating systems
- programming languages
- software engineering
- development environments
- artificial intelligence CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 14
(Clips)
• http://www.designinginteractions.com/
interviews/BillAtkinson
• http://www.designinginteractions.com/
interviews/StuCard
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 15
Users, users, users
• Today we’ll focus on the “human side.”
Soon we’ll deal with the “machine side.”
• How can we possibly deal with all the
complexity of the human side of GUIs?
- one short answer: It’s hard.
- one long answer: See CS 337.
- our short answer: KEEP THE USER IN MIND! CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 16
• 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)
Users at a lower level
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 17
Users at a higher 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. Dario Salvucci, Drexel University. 18
Example: Web site design
• Jakob Nielsen's
“Top Ten Mistakes in Web Design”
• Is good design really this easy?
• These are really just heuristics that
keep the user in mind!
- Using Frames
- Gratuitous Use of Bleeding-Edge Technology
- Scrolling Text, Marquees, and Constantly Running Animations
- Complex URLs
- Orphan Pages
- Long Scrolling Pages
- Lack of Navigation Support
- Non-Standard Link Colors
- Outdated Information
- Overly Long Download Times CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 19
Research Question of the Day
• When people surf the web, they have goals.
- the goals might be very specific
- the goals might be very general
- e.g., find a cool news article or on-line game
• For typical web browsing, what are users’
goals and how common are these goals?
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 20 Byrne, M. D., John, B. E., Wehrle, N. S., & Crow, D. C. (1999). The tangled web we wove: A taskonomy of WWW use. Human Factors in Computing Systems: Proceedings of CHI 99, 544-551. Reading, MA: Addison Wesley.
Research Question of the Day
• Byrne et al. (1999) created a “taskonomy”
of web browsing
- take users from a diverse population
- observe them in a natural environment
- analyze their verbal protocols & extract goals
• And at the same time...
- perform a task analysis of web browsing
- create categories & subcategories of goals
- e.g., locate word, image, something interesting...
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 25
Dealing with beginners, experts
• Let’s not forget the others!
• Beginners need...
- straightforward “mental model”
- good, concise topical help (need not be long!)
• Experts need...
- lots o’ shortcuts
- directed, specific, unintrusive help CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 26
Personas
• One system won’t make everyone happy
Alesandro’s goals
- Go fast
- Have fun Marge’s goals
- Be safe
- Be comfortable Dale’s goals
- Haul big loads
- Be reliable
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 27
Personas
• How do we develop personas? Research.
- user interviews
- subject-matter experts
- market research surveys
- etc.
• End production: Each persona represents a
class of users in context
- persona is not an “average person”, but an exemplar or “canonical person” with an associated range of behaviors CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 28
Exercise: CS Web Site
• Check out the web site on the next page
• What’s your gut reaction?
- yikes, ugly
- yikes, cool
- just fine
- yawn
• Ok, that’s out of your system.
Now let’s think about our users...
CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 29 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 30 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 31 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 32
Exercise: CS Web Site
• What are some personas for the CS Web?
