/
Mobile UI Design * Based in part on content in Chapter 9-10 of
Mobile UI Design * Based in part on content in Chapter 9-10 of

Mobile UI Design * Based in part on content in Chapter 9-10 of - PowerPoint Presentation

calandra-battersby
calandra-battersby . @calandra-battersby
Follow
5 views | Public

Mobile UI Design * Based in part on content in Chapter 9-10 of - Description

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

Tags :

advanced 441 design spring 441 advanced spring design app amp 2012cse cse hci 2012 mobile content user constraints screen

Please download the presentation from below link :


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.

Share:

Link:

Embed:

Presentation on theme: "Mobile UI Design * Based in part on content in Chapter 9-10 of"— Presentation transcript

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