6 ways to refine iphone and ipad apps
Post on 28-Jan-2015
113 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related