44

stanford hci group / cs147 u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Embed Size (px)

Citation preview

Page 1: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,
Page 2: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

stanford hci group / cs147

http://cs147.stanford.edu02 October 2008

Mobile

Scott Klemmertas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar,Steve Marmon, Neema Moraveji, Neil Patel

Page 3: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,
Page 4: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Sony Walkman

Page 5: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Car phone

Page 6: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

3.3 billion mobile phones worldwide

Source: Informacon (2007)

Page 7: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Mobile design is evolving rapidly!

Source: Apple, Palm

Newton Palm Pilot iPhone

Page 8: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

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 9: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

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 10: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

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 11: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Prototyping the Palm

Page 12: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,
Page 13: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,
Page 14: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Technology Trends

processing

Page 15: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Technology Trendsdisk

Page 16: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Technology Trendsbandwidth

Page 17: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Technology TrendsRAM

Page 18: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Technology Trends

Devices on Internet

Page 19: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Technology TrendsImaging Resolution

Page 20: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Technology Trends

Display Resolution

Page 21: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Technology Trends

Size of pockets

Page 22: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Technology Trends

Unaided human abilities

Page 23: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

What will we do with Mobile? The same applications?

Different ones?

Page 24: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,
Page 25: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,
Page 26: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Malaysia

Page 27: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Grameen Telecom: Village Phone

Page 28: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

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 appsAlways in your pocket

Page 29: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

What makes mobile design difficult?

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

Page 30: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Limited Attention & Input Interaction

Minimize keystrokes Provide overview + detail Understandable interface at a

glance Design with tasklets Minimum set of functions

Page 31: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Example approach: Nokia Navi-Key

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

Reducing number of buttons

Page 32: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Mobile Input: Lots of Research

Page 33: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

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 34: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

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 35: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

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 36: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Case Study: iPhone inputDesign distinctions

Tactile Input Disambiguation of input Animations

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

PredictiveTouch keyboard

Internet +Music +Phone

Source: Apple

Page 37: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Typing algorithm Model where a user touched on the screen Model the layout of keys and what keys

surround the touch If word not in dictionary (or if an extremely

unlikely word), present alternative While user types, dynamically adjust

target sizes of keys User can accept by simply tapping

‘Space’

Page 38: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

State of the Art: Shapewriter

Page 39: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Service Design

Page 40: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

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 41: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Eye to the Future: Mobile Everywhere

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 42: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Information Appliances

Mobile devices with dedicated purpose

Page 43: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

Mike Krieger’s Sections

…will be in Gates 100

Page 44: stanford hci group / cs147  u 02 October 2008 Mobile Scott Klemmer tas: Amal dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon,

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