sims 213: user interface design & development marti hearst tues, jan 22, 2002
Post on 24-Jan-2016
214 views
TRANSCRIPT
![Page 1: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/1.jpg)
SIMS 213: User Interface Design &
Development
Marti Hearst
Tues, Jan 22, 2002
![Page 2: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/2.jpg)
Administrivia
Course TAs: – Moryma Aydelott & Jean-Anne Fitzpatrick
Grading: – Individual assignments: 20%– Midterm: 30%
(Might be replaced with an individual assignment)
– Project: Many milestone assignments – required, must be done on time,
but not graded –will receive comments/feedback instead. Final project gets a grade at the end – counts 50%
![Page 3: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/3.jpg)
Alternative names for this course
User Interface Design, Prototyping, and Evaluation
Human-computer Interaction
![Page 4: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/4.jpg)
Why is HCI Important?
It can determine who becomes president of the USA!
![Page 5: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/5.jpg)
![Page 6: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/6.jpg)
An Related Problem
Evaluate the figures in a research paper
![Page 7: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/7.jpg)
A Related Problem
What’s wrong with this table?
Redesign: add space between the columns.
![Page 8: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/8.jpg)
Variations on the Theme
![Page 9: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/9.jpg)
Variations on the Theme
![Page 10: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/10.jpg)
Palm Beach Phone Book (a joke)
![Page 11: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/11.jpg)
Problems
The instructions are misleading – Use of the phrase “vote for group” is misleading
Should say “vote for one”– Instructions only on lefthand side
Implies righthand side is different
The interleaving of holes is misleading– Only the president page has this layout– Other offices are one per page (with appropriate instructions)
The sample ballot looks different– No holes – the source of the problem– Did not lead to complaints
![Page 12: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/12.jpg)
![Page 13: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/13.jpg)
![Page 14: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/14.jpg)
Other Issues
People vote infrequently– Have to re-learn the system each time
Rushed, uncomfortable circumstances Palm Beach Demographics: Elderly
![Page 15: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/15.jpg)
![Page 16: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/16.jpg)
![Page 17: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/17.jpg)
How to know if it will work?
Test out the design!– Have real people use it!– Try to match the appropriate demographics– Even a few tries can turn up major problems
![Page 18: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/18.jpg)
An Informal Usability StudyBarbara Jacobowitz, CHI-WEB, Nov 10, 2000
“I was able to print 10 different sample ballots from various sources. Last night, I ran them all by my mother (81) and a group of her friends (70-something to 80's). All are bright, literate, and none are legally blind.
They did reasonably well on 9 of the ballots. On one, 6 marked it incorrectly and didn't realize it, 2 did it correctly, but very slowly, and 2 had to ask me what to do. Guess which ballot it was?.”
Summary of a more formal study of punch-card voting:– http://www.osu.edu/units/research/archive/votedes.htm
![Page 19: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/19.jpg)
Josephine Scott, CHI-Web, Nov 10, 2000
“I spent fifteen years making the voting process accessible and usable for all. I have some very strong feelings as well as considerable experience. …
Usability standards must be higher for voting than any other function for the most obvious reasons. Users--in this case, voters, share the need for the clearest of design and instruction to cast a vote properly. Many do not speak English well, or see well, or are able to decipher difficult design cognitively, but they may be able to make as informed a choice for president as our snobbish "experts" who don't see a problem. …
Bad design like this exacerbates the problem. The glib notion that "there is no problem because you can see the arrow" or that voters who made this mistake must be stupid shows a lack of compassion. Let me suggest that it is simple compassion for the user that informs usability expertise. …”
![Page 20: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/20.jpg)
More evidence that the ballot is misleading (New York Times, Nov 9, 2000)
Percent of ballots thrown out in Palm Beach County for the error of "overvoting" on Presidential candidates: 4.1% (19,120)
Percent of ballots thrown out in Palm Beach County for the error of "overvoting" on Senatorial candidates: 0.8% (3,783)
Percent of ballots thrown out in Sacramento County (CA) for the error of "overvoting" on Presidential candidates: 0.29% (1,147)
Percentage of (unofficial) re-count votes in Gore's favor: 70% (2,520)
Percentage of (unofficial) re-count votes in Bush's favor: 30% (1,063)
![Page 21: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/21.jpg)
Blaming the User
A huge step backwards:– Cokie Roberts (appearing on David Letterman)
“stupidity is not an excuse”
Well-designed user interfaces do not present situations in which it is easy to make mistakes
Alan Cooper’s mantra: software should not humiliate the user
In this class we assume: if the user does something “wrong,” it is the fault of the system designer
![Page 22: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/22.jpg)
Readings
Do indicated readings before the class Required:
– Course Reader (available early next week)– Jakob Nielsen’s Usability Engineering
Strongly Recommended:– Shneiderman’s Designing the User Interface– www.uidesign.net– world.std.com/~uieweb/ – useit.com
There are many other wonderful books and websites
![Page 23: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/23.jpg)
Course Schedule (Tentative)
Intro to HCI UI Design Cycle, User-Centered Design Goals, Personas, Task Analysis, Scenarios Prototyping Design Techniques Heuristic Evaluation Cognitive Issues and Human Abilities Modes Midterm Usability Testing Graphic Design/Multimodal UIs Personalization/Social Aspects/Agents Ubiquitous computing interfaces
![Page 24: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/24.jpg)
Project Schedule (Tentative)Note: there will also be individual assignmentsDates shown are the week the item is due
Project proposals (3rd week) Project personas and goals (4th week) Scenarios, tasks, and initial sketches (5th week) Individual design practice (6th week) Midterm (8th week) Lo-Fi prototype and test (8th week) First interactive prototype (10th week) Class presentation (10th week) Project heuristic evaluation (11th week) Second interactive prototype (12th week) Usability test (14th week) Class presentation (14th week) Third prototype and project writeup (Finals week)
![Page 25: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/25.jpg)
Slide by James Landay
What is HCI?
A discipline concerned with– design– evaluation– implementation
of interactive computing systems for human use
The study of major phenomena surrounding the interaction of humans with computers.
![Page 26: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/26.jpg)
What is HCI?
HumansTechnology
Task
Design
Organizational & Social Issues
![Page 27: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/27.jpg)
What is an Interface?
Difficult to define The window through which the human interacts
with some application on the computer. But …
– really it is more complex than this– part of a larger context of interacting with other
applications, other people, and the physical world.
![Page 28: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/28.jpg)
Slide by James Landay
Who builds UIs?
A team of specialists (ideally)– graphic designers– interaction / interface designers– technical writers– marketers– test engineers– software engineers
![Page 29: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/29.jpg)
Slide by James Landay
An Iterative Process
Design
Prototype
Evaluate
![Page 30: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/30.jpg)
Slide by James Landay
User-centered Design
Take into account– Cognitive abilities– Organizational constraints– Customs and precendent
Keep users involved throughout project
![Page 31: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/31.jpg)
User-centered Design
Standard Approach:– Needs assessment– Task analysis– Initial design
More modern approach (from Cooper’s Inmates book):– Needs assessment– Persona creation– Goal creation– Scenario and task creation– Initial design
![Page 32: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/32.jpg)
Using Personas
Focus on specific aspects of a specific user’s characteristics, needs, and goals– The persona becomes as understandable as a
character in a book or movie
Avoid “elastic user” Design for the center of the distribution
– The perpetual intermediates– Don’t focus on the edge cases
![Page 33: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/33.jpg)
Designing for Goals
Goals are what one wants to do Goals seldom change Tasks are steps to get to the goals
– Tasks change with the technology– Sometimes tasks are the opposite of goals
To get agreement, the lawyer argues To achieve peace, the country sends in troops
Focusing on technology results in designing for tasks rather than goals.
![Page 34: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/34.jpg)
Slide by James Landay
Rapid Prototyping
Build a mock-up of design Low fidelity techniques
– paper sketches– cut, copy, paste– video segments
Interactive prototyping tools– Visual Basic, HyperCard, Director, Flash, etc.
![Page 35: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/35.jpg)
Evaluation
Test with real users (participants)– Formally or Informally
“Discount” techniques– expert evaluation (heuristic evaluation)– walkthroughs
Build models– Less common
![Page 36: SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 22, 2002](https://reader036.vdocuments.mx/reader036/viewer/2022070416/56649d6d5503460f94a4d3c4/html5/thumbnails/36.jpg)
Assignment
Start thinking about projects and team members