stanford hci group / cs147 u 04 october 2007 intro to human- computer interaction design scott...

23
stanford hci group / cs147 http:// cs147.stanford.edu 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano

Upload: gerard-chandler

Post on 27-Dec-2015

217 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

stanford hci group / cs147

http://cs147.stanford.edu04 October 2007

Intro to Human-ComputerInteraction DesignScott Klemmertas: Marcello Bastea-Forte, Joel Brandt,Neil Patel, Leslie Wu, Mike Cammarano

Page 2: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,
Page 3: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Mobile design is evolving rapidly!

Source: Apple, Palm

Newton Palm Pilot iPhone

Page 4: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

There was the Newton …

Source: The Simpsons, Wikipedia

Apple NewtonMessagePad Newton

screen displaying a Note with text, "ink text", a sketch, & vectorized shapes

Photograph of screen displaying Checklist, some bullet points checked and/or "collapsed"

The Newton OS GUI

Page 5: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

The Newton had problems

The Original Apple Newton's handwriting recognition was made light of in The Simpsons episode Lisa on Ice

“Hey, Take a memo on your Newton”

“Beat Up Martin”

“Baahh!”

Source: The Simpsons, Wikipedia

Design Issues Recognition (relied on it too much, didn’t work

well enough) Physical size (too big) Connectivity (not much)

Page 6: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

The Palm Pilot improved on themDesign Wins

Recognition: simple graffiti Physical size: fits in the front pocket Connectivity: easy sync

Source: Palm 1000 Retrospective, Palm V, Rob Haitani in Moggridge, Designing Interactions. Ch. 3. From the Desk to the Palm. http://www.designinginteractions.com/interviews/RobHaitani

Rob Haitani, Palm OS[Designs] what should be most prominent based on frequency of use, and strives to make the most often used interactions accessible in a single step.

HotSync

Graffiti

Pocket size

Palm OS

Jeff Hawkins, Palm[What about the Foleo?]

Page 7: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

iPhone keeps goingDesign distinctions Tactile Input Disambiguation of input Animations

Multi-touch | Mac OS X | Wireless | Accelerometer | Proximity Sensor

PredictiveTouch keyboard

Internet +Music +Phone

Source: Apple

Page 8: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

A Prediction about Mobile “All appliances evolve until they

have a clock” “All apps evolve until they have e-

mail”…

“All mobile devices will evolve until they have network connectivity”

Page 9: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

What makes mobile design exciting?

Many Design Choices Think different from GUI/Web Swiss army vs. dedicated Pen/speech modalities Integrate with other tasks Social apps

Page 10: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

What makes mobile design difficult?

Design constraints Limited attention/Interactions bursty Screen size small Form factor Limited network connectivity Speech / pen / multimodal

Page 11: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Ideas for dealing with limited attention

Minimize keystrokes Provide overview + detail Understandable interface at a

glance Design with tasklets Minimum set of functions

Page 12: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Example approach: Nokia Navi-Key

Source: Scott Jenson, The Simplicity Shift. Cambridge University Press, 2002.

Reducing number of buttons

Page 13: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Example approach: Blackberry Optimized for e-mail and simple text

apps

Source: Research In Motion

Page 14: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Mobile Algorithm: Disambiguation w/ Dictionary Dictionary based (such as T9,

PocketPC) e.g., 2-2-5-3 able 2-2-5-3-0 cake 2-2-5-3-N-0 bald 2-2-5-3-N-N-0 calf 2-2-5-3-N-N-N-0

Lots of “N” = NextSource: Microsoft, MacKenzie, I. S., Kober, H., Smith, D., Jones, T., Skepner, E. (2001). LetterWise: Prefix-based disambiguation for mobile text input. Proceedings of the ACM Symposium on User Interface Software and Technology - UIST 2001, pp. 111-120. New York: ACM.

Page 15: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Mobile Algorithm: Disambiguation w/ Predictive Predictive (such as BB SureType,

Letterwise) e.g., t-h- e A% i B% o C% u D% …

Source: Microsoft, MacKenzie, I. S., Kober, H., Smith, D., Jones, T., Skepner, E. (2001). LetterWise: Prefix-based disambiguation for mobile text input. Proceedings of the ACM Symposium on User Interface Software and Technology - UIST 2001, pp. 111-120. New York: ACM.

Page 16: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Comparison between Dictionary and Predictive

Source: MacKenzie, I. S., Kober, H., Smith, D., Jones, T., Skepner, E. (2001). LetterWise: Prefix-based disambiguation for mobile text input. Proceedings of the ACM Symposium on User Interface Software and Technology - UIST 2001, pp. 111-120. New York: ACM.

                                                                     

Figure 11. Comparison of entry rates (wpm) with practice for LetterWise, T9, and Multitap. (Note: LetterWise and Multitap figure are from Figure 6. Simulated T9 figures are fromFigure 10 with 0.85 frequency of words in dictionary)

Page 17: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Service Design

Page 18: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Eye to the Future: Sensor Networks

Live Ad Hoc Sensor Network showing Light Intensity

A handful of network sensor 'dots'

Lots of 'dots' - getting ready for the big demo

Source: UC Berkeley Smart Dust Program, Largest Tiny Network Yet, http://webs.cs.berkeley.edu/800demo/

Page 19: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Eye to the Future: Mobile Device Proliferation

A 2002 study calculated there were around 4.2 million CCTV cameras in the UK - one for every 14 people.

"If you go forward 50 years, you are probably talking about one million forms of sensor per person in the UK," he said.

This was a conservative estimate, he said. "More aggressive" calculations suggest there could be 20m sensors per person.

Source: BBC, “Sensor rise powers life recorders”

There could be one million sensors per UK resident by 2057

There could be one million sensors per UK resident by 2057

Page 20: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,
Page 21: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,
Page 22: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,
Page 23: Stanford hci group / cs147  u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,

Further Reading

Studio 7.5, Designing for Small Screens

Mizuko Ito, Personal, Portable, Pedestrian

Rich Ling, the Mobile Connection Christian Lindholm, Mobile Usability Matt Jones, Mobile Interaction

Design