Refining your iPhone (& iPad) Apps:

6 ways to create a better user experience

@suzanneginsburg

2

My Background

•  Started in web design 14 years ago; mobile design 2 years ago.

•  Have iPhone/iPad UX blog at www.iphoneuxreviews.com

•  iPhone design book published August 20, 2010!

3

ways to create a better iPhone app user experience.

http://www.flickr.com/sarkphoto/

4

Be welcoming.

http://www.flickr.com/sarkphoto/

5

#1: Be Welcoming

This is not welcoming:

Accuweather

6

#1: Be Welcoming

•  Display getting started information •  Annotate the user interface •  Provide an optional demo

There are many things you can do to welcome your users. We’ll review three on the slides that follow:

7

#1: Be Welcoming

•  Apps with little or no precedence •  Apps that require certain configurations (e.g., sound

turned on) •  Apps that require registration (e.g., Twitter clients)

Getting started information is particularly important for the following kinds of apps:

8

#1: Be Welcoming

Some getting started examples:

TweetDeck nook Yelp scope (Monocle)

9

#1: Be Welcoming

•  Most effective when most of the app functionality is concentrated on one screen.

•  Should go away once the user has interacted with the UI; alternative form of Help should still be available.

•  Best when not overdone (more than 5 annotations could be overwhelming.)

Another way to be welcoming is to annotate the user interface.

10

#1: Be Welcoming

Some annotation examples:

Postman

Pulse

11

Ocarina

Annotation example on the iPad for Stick It.

Treatment of “Help” one in center less ideal, but others are effective.

12

#1: Be Welcoming

•  Effective when the app space isn’t well defined or the user interface is unique.

•  Make sure users can skip the demo & be sure to allocate additional time for localization as needed.

Some apps may want to consider providing an optional demo.

13

#1: Be Welcoming

Some demo examples:

Convertbot 123 Color (iPad app)

14

Know thy user.

http://www.flickr.com/chrisinplymouth/

15

#2: Know Thy User

The iPhone presents a unique opportunity to create personalized experiences, yet many apps barely scratch the surface. Some ways to personalize the UX: •  User’s Name or ID •  Settings •  Favorites & User Behavior

16

#2: Know Thy User

Some name/ID personalization examples:

Flickr foursquare

17

#2: Know Thy User

User settings are another way to personalize the UX. Choose these wisely since too many can overwhelm users. Some common ones include: •  Default font size, especially for news & Twitter apps •  Sounds •  Measurement (e.g., miles vs. kilometers) •  Default apps (e.g., Twitter client) •  Content (e.g., news sections on NY Times)

18

#2: Know Thy User

Some content personalization examples:

New York Times allows tab customization. USA Today lets users choose default news sections.

19

#2: Know Thy User

Favorites and User Behavior are also effective ways to personalize the UX.

•  Favorites require users to actively save items to view later.

•  User Behavior based personalization is passive, saving this information behind the scenes. This can be very powerful but also raises privacy issues so it’s important to be as transparent as possible.

20

#2: Know Thy User

Here are favorites and user behavior examples:

Yelp syncs iPhone & website favorites. iConcertCal uses your iTunes music to recommend concerts.

21

Let the content shine.

http://www.flickr.com/mag3737

22

#3: Let the content shine

“The idea is that the content is the interface, the information is the interface—not the administrative debris.”

Edward Tufte, Professor Emeritus of Political Science, Statistics, and Computer Science at Yale University.

23

#3: Let the content shine

Some examples:

New York Times with controls. With controls hidden.

24

#3: Let the content shine

Pulse with nav hidden. Pulse with nav shown.

25

Controls are not hidden on the NY Times iPad app but they’ve still made an effort to let the content shine.

The muted custom controls can be easily accessed yet don’t compete with the content.

26

USA Today also created custom controls that compliment the content.

27

Contrast the previous two with this design. It’s not terrible but are those 3 rows of UI absolutely needed?

28

Can you see the control on this Adobe Ideas iPad app?

29

Make selections fast & error-free.

http://www.flickr.com/lwr

30

#4: Make selections fast & error-free

The mobile context may make it difficult for users to enter information.

Users may be walking, driving, shopping & so on.

As a result, your apps should incorporate ways to minimize errors and make users more efficient.

31

#4: Make selections fast & error-free

Here are some ways to make selections fast & error-free:

•  Provide smart defaults •  Include predefined lists •  Suggest matches •  Store recent activity •  Use voice & image recognition

32

#4: Make selections fast & error-free

Some examples of smart defaults and pre-defined lists:

Maps is pre-populated with your current location and last search.

iBART (Bay Area Rapid Transit) provides list of stations.

33

#4: Make selections fast & error-free

Examples of apps that suggest matches.

Urbanspoon Yelp

34

#4: Make selections fast & error-free

Another option is to store recent activity/selections. This information could be accessed several ways:

•  Pre-populating form fields if information entered previously or already known

•  Making past selections available via Recents tab •  Showing history matches as the user types their

query

35

#4: Make selections fast & error-free

Examples of apps that store recent activity/selections.

FlightTrack Google

36

#4: Make selections fast & error-free

Better yet, you can eliminate typing all together with if voice or image recognition are used, as done with SnapTell.

37

Provide appropriate feedback.

http://www.flickr.com/chrisinplymouth

38

#5: Provide appropriate feedback

Oftentimes, things happen “behind the scenes” that require users to wait for a moment. To reassure users during those times, be sure to provide feedback, such as the following:

•  Animations •  Transitions •  Alerts

39

#5: Provide appropriate feedback

Animations typically refer to the visual feedback provided within a particular view. Here are a few common ones:

Processing

Shown when content is being downloaded or

processed. Tells user what’s

happening & for how long.

Moving

Shown when content is being moved. Indicates where object is going & where it

came from.

Bounce

Shown when user loads new content. Text may indicate

that user must “pull to refresh” content.

40

#5: Provide appropriate feedback

Examples of processing animations.

Voices

Hipstamatic

41

#5: Provide appropriate feedback

Examples of moving animations.

Mail Weather

42

#5: Provide appropriate feedback

Bounce animations on Foodspotting and Tweetie.

43

#5: Provide appropriate feedback

Transitions refer to the visual feedback provided when users move between views. Some commons ones include the following:

•  Flip •  Slide left/right •  Slide up/down •  Fade in/out (also known as “cross-dissolve”) •  Curl •  Zoom

44

#5: Provide appropriate feedback

Tapping Map “flips” UI Tapping icon in lower left “curls” UI Tapping item in grid “zooms” into item.

45

#5: Provide appropriate feedback

Text alerts can be used if visual feedback isn’t explicit enough. These can be displayed inline or via an overlay.

Sound may accompany many of the feedback options mentioned but use it sparingly and not as the primary feedback mechanism.

46

#5: Provide appropriate feedback

Examples of inline and overlay alerts.

Twitterific Flickr

47

Minimize the pain.

http://www.flickr.com/sarkphoto/

48

#6: Minimize the pain

When users are engaged with your app, sometimes things will go wrong that are beyond your control. In these cases, try to minimize the impact on the user experience, such as the following:

•  Explain the problem •  Maintain the status quo •  Save work-in-progress •  Keep user informed

49

#6: Minimize the pain

Examples that explain the problem & maintain the status quo.

Epicurious Shazam

50

#6: Minimize the pain

Examples that save work-in-progress & keep users informed.

Wordpress foursquare

51

Quick Recap

1.  Be welcoming.

2.  Know thy user.

3.  Let the content shine.

4.  Make selections fast & error-free.

5.  Provide appropriate feedback.

6.  Minimize the pain.

52

Suzanne Ginsburg

@suzanneginsburg