stanford hci group / cs147 u 04 october 2007 intro to human- computer interaction design scott...
TRANSCRIPT
![Page 1: Stanford hci group / cs147 u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/1.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/2.jpg)
![Page 3: Stanford hci group / cs147 u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/3.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/4.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/5.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/6.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/7.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/8.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/9.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/10.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/11.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/12.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/13.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/14.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/15.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/16.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/17.jpg)
Service Design
![Page 18: Stanford hci group / cs147 u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/18.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/19.jpg)
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,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/20.jpg)
![Page 21: Stanford hci group / cs147 u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/21.jpg)
![Page 22: Stanford hci group / cs147 u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/22.jpg)
![Page 23: Stanford hci group / cs147 u 04 October 2007 Intro to Human- Computer Interaction Design Scott Klemmer tas: Marcello Bastea-Forte,](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e435503460f94b36d99/html5/thumbnails/23.jpg)
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