Designing the iPhone User Experience Suzanne Ginsburg Addison Wesley 2011 Hall of Fame or Hall of Shame Weight Watchers app CSE 441 Advanced HCI Spring 2012 2 Hall of Shame CSE 441 Advanced HCI ID: 732529
Download Presentation The PPT/PDF document "Mobile UI Design * Based in part on cont..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Mobile UI Design
* Based in part on content in Chapter 9-10 of
Designing the iPhone User Experience
,
Suzanne Ginsburg, Addison Wesley, 2011Slide2
Hall of Fame or Hall of Shame?
Weight Watchers app
CSE 441 - Advanced HCI
Spring 2012
2Slide3
Hall of Shame!
CSE 441 - Advanced HCI
Spring 2012
3
Weight Watchers app
What app am I in?
Icon mappings?
Menu non-standard
No
overview+detail
How do I do “My Friends” w/o Log In?Slide4
Mobile UI Design
* Based in part on content in Chapter 9-10 of
Designing the iPhone User Experience
,
Suzanne Ginsburg, Addison Wesley, 2011Slide5
Outline
Review of mobile computing
Smart
phone designResponsive design
Spring 2012CSE 441 - Advanced HCI5Slide6
Mobile Design Constraints & Context
Design constraints
limited attention/interactions
bursty
(sometimes untrue)form factor/screen size small (independent of resolution)natural (ambiguous) input modalities
CSE 441 - Advanced HCI
Spring 2012
6Slide7
Mobile Design Constraints & Context
Design constraints
limited attention/interactions
bursty
(sometimes untrue)form factor/screen size small (independent of resolution)natural (ambiguous) input modalitiesMobile usage contextmobile device with user & onuse gives clues to context… apps give cues (e.g., calendar or job schedule)location gives cuesactivity inference (e.g., adapt to walking)
CSE 441 - Advanced HCI
Spring 2012
7Slide8
Mobile Design Constraints & Context
Design constraints
limited attention/interactions
bursty
(sometimes untrue)form factor/screen size smallnatural (ambiguous) inputMobile usage contextmobile device with user & on use gives clues to context… apps give cues location gives cuesactivity inference Design for limited attentionminimize keystrokesunderstandable at a glance (overview + detail)task-oriented w/ minimum set of functions
CSE 441 - Advanced HCI
Spring 2012
8Slide9
Mobile Design’s Key Moment
iPhone (2007)
Spring 2012
9
CSE 441 - Advanced HCI
App Store (2008)Slide10
Initial Impressions Matter
If people don’t “get it”, they won’t download or they’ll quit after quick look
n
eed to have clear “value proposition” in both app store title, blurb, & app design
Spring 2012CSE 441 - Advanced HCI10Slide11
Initial Impressions Matter
If people don’t “get it”, they won’t download or they’ll quit after quick look
n
eed to have clear “value proposition” in both app store title, blurb, & app design
Give “getting started info”, annotate the UI, or provide an optional demoSpring 2012CSE 441 - Advanced HCItaptivatepostman
GooglecurrentsSlide12
Personalize User Experience
Name
u
se it if known & integral (e.g., social networking)
Settingscommon ones in app & rest in settingsdon’t make dumping ground for extra featurese.g., font size, sound, units, list view, screen orientation, tab content, history, etc.Favorites/Bookmarkssave item for viewing later (sync across platforms)common in content-rich apps (news, photos, recipes) Spring 2012CSE 441 - Advanced HCISlide13
Personalize User Experience
Name
use it if known
Settings
common ones in app Favorites/Bookmarkssave item for viewing later (sync across platforms) Behavioraccess based on app history (e.g., recent searches)Spring 2012CSE 441 - Advanced HCIfoursquareSlide14
Let the Content Shine
Immersive applications focus on content
“The idea is that the content is the interface, the information is the interface — not computer administrative debris.”
– Edward
TufteAccess controls via tap screen, tap button, & scroll upSpring 2012CSE 441 - Advanced HCIKindle readerSlide15
Make Selections Fast & Error Free
Provide smart defaults
Suggest matches during text entry
Store recent activity / selections
Spring 2012CSE 441 - Advanced HCIiPhone MapsGoogle searchSlide16
Provide Appropriate Feedback
Animations
Downloading, moving, end of content…
Transitions
when users move between related screense.g., flip (settings/views), slide left/right (lists), slide up/down (secondary panel), fade in/out, curl (e.g., maps)Text alertsIf visual not enough (inline or overlay-modal)Sounduse sparingly as can be annoyingSpring 2012CSE 441 - Advanced HCI16Slide17
“Good Artists Borrow, Great Artists Steal” – Pablo Picasso(?)
What apps do you like?
Why?
Borrow good features/styles
Spring 2012CSE 441 - Advanced HCI17Slide18
Next Time
Thursday: Studio Task on Confirmations
Next Thursday: Online Usability Study
Spring 2012
CSE 441 - Advanced HCI18