d evices an introduction Josephine M Giaimo MS March 13 2013 IT PC at TCF 1 What well look at today UX design for mobile devices March 13 2013 IT PC at TCF 2 UX researcher and user advocate ID: 775723
Download Presentation The PPT/PDF document " UX design for mobile " 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
UX design for mobile devices: an introduction
Josephine M. Giaimo, MS
March 13, 2013
IT PC at TCF
1
Slide2What we’ll look at today:
UX design for mobile devices
March 13, 2013
IT PC at TCF
2
Slide3UX researcher and user advocate
Principal,
jg interactive designs
March 13, 2013
IT PC at TCF
3
Slide4Who I’m Not:
March 13, 2013
IT PC at TCF
4
An “evangelist”A “rock star”A foosball player at work“Passionate”
Slide5Who I am:
March 13, 2013
IT PC at TCF
5
Someone who sees problems ahead of the gameCool, chilly, and objectiveAn experienced UX researcherFocused on users, data, and results
Slide6What we’ll look at today:
March 13, 2013
IT PC at TCF
6
Why mobile is differentThe researchMobile strategyDesigning for the small screenWriting for mobile
Tablets and E-readers
Looking toward the future
A bit of history
Slide7Why mobile is different
Is researching the mobile user experience worth the investment?
March 13, 2013
IT PC at TCF
7
Slide8Monetate 2012 study
March 13, 2013
IT PC at TCF
8
100 million e-commerce client web site visitsWhy the big difference in conversion rates?Is the mobile user experience horrible? Yes.Is it worth investing in mobile design? Yes.
DeviceConversion RateDesktop3.5%Mobile1.4%Tablet3.2%
Slide9The research on mobile
A little goes such a long way…
March 13, 2013
IT PC at TCF
9
Slide10Not opinions
March 13, 2013
IT PC at TCF
10
Based on a broad spectrum of average users around the worldUser likes and dislikesEasy to use or troublesome?
Slide11Two diary studies use a variant of the snippet technique
March 13, 2013
IT PC at TCF
11
Each time a subject used their mobile device, users tweeted a reminderQuestionnaires detailed the contextPlus interviews and usability-testing sessions
Slide12Usability testing
March 13, 2013
IT PC at TCF
12
Used the “think-aloud” methodologyUS, Australia, Hong Kong, Netherlands, Romania, and UKOne-on-one sessions with one test user at a timeNot focus groups!
Slide13Usability testing (Cont’d….)
March 13, 2013
IT PC at TCF
13
Own phone/tabletTasks to completeOpen-endedDirectedUsers commented on:What they were looking forLikes/dislikesEase/difficulty of accomplishing tasks
Slide14Qualitative User Research
March 13, 2013
IT PC at TCF
14
We study behavior, not opinions.“Once you’ve seen a problem in real life, you know it’s there. You don’t need to measure it.”--Jacob Nielsen
Slide15Mobile strategy
Numerous similarities in the UX of mobile in 2009 and desktop for the web in 1998 (back to the future?)
March 13, 2013
IT PC at TCF
15
Slide16Mobile 2009 and desktop 1998 similarities
March 14, 2013
IT PC at TCF
16
Abysmal success rates were the normDownload times were too longScrolling caused major problemsBloated pages made users feel lost
Unfamiliarity with browser’s user interface limited options
JavaScript crashes
Reluctance to use
Search dominated behavior
Old-media (wrong) design for mobile
Slide17Usability varies by mobile device category
March 13, 2013
IT PC at TCF
17
Success rates in usability studiesWireless Access Protocol (WAP)A separate mobile experience is best
Slide18Devices and test results (2009)
March 14, 2013
IT PC at TCF
18
Slide19Mobile site vs. full site
March 13, 2013
IT PC at TCF
19
Mobile-optimized sitesWhy full sites don’t work for mobile useMobile is less forgiving than desktop
Mouse vs. fingers as an input
device (no clear winner)
Responsive design
Usability guidelines are rarely dichotomies
Slide20Main guidelines for mobile-optimized websites
Build a separate mobile siteEven better, build a mobile appMake sure mobile users who arrive at your full site see your mobile site insteadOffer a clear link from full to mobile site despite redirectOffer a clear link from mobile to full site
March 14, 2013
IT PC at TCF
20
Slide21Designing mobile-optimized sites
Cut features that are not core useCut content to reduce word countEnlarge interface elements to reduce “fat-fingering”
March 14, 2013
IT PC at TCF
21
Slide22A separate mobile experience is best
The smaller the screen, the fewer the featuresRich sites should build two mobile designs:low-end feature phonesbig-screen phonesFor most sites, the realistic choice is to supplement the main site with a single mobile site
March 14, 2013
IT PC at TCF
22
Slide23The design challenge
“The design challenge is to place the cut between mobile and full-site features in such a way that the mobile site satisfies almost all the mobile users’ needs.”--Dr. Jacob Nielsen
March 14, 2013
IT PC at TCF
23
Slide24Responsive design
Means optimizing the layout of a Web page for the screen dimensions and screen orientation.Can work well for sites where all features and content are equally likely to be accessed on mobile.Consider amount of business conducted with mobile vs. desktop users before choosing.Involves creating distinct UIs for each platform.
March 14, 2013
IT PC at TCF
24
Slide25Usability guidelines are rarely dichotomies
Squeeze that text “orange” even more with mobile than for the WebWhen considering which content to move to secondary pages, move the cut-off point even more than for the WebIn all UX areas, mobile usability requires stricter and more scaled-back design than desktop—not just responsive design.
March 14, 2013
IT PC at TCF
25
Slide26Mobile sites vs. apps: the coming strategy shift
March 13, 2013
IT PC at TCF
26
Current mobile strategy: apps are bestFuture mobile strategy: sites are bestPhysical vs. virtual (soft) buttons
When will the strategy shift happen? (or has it already)
Native apps, web apps, and hybrid apps
Slide27Why ship mobile apps now
Users perform better with apps than sites74% success with apps vs. 64% for mobile-specific sitesMobile apps are more usableAn app can target specific limitations and abilities of each device better than sitesMobile devices provide an impoverished user experience, and are weaker devices
March 14, 2013
IT PC at TCF
27
Slide28Why will mobile sites dominate in the future?
Cost-benefit trade-offs for apps vs. sites will changeFuture phones will be faster, betterDownload times will be cut 57 timesExpense of mobile apps will increase—more platforms to develop will emergeiOS forked into iPad vs. iPhoneAmazon forked Kindle Fire into two platforms4.0 v. of Android, Ice Cream Sandwich, one more
March 14, 2013
IT PC at TCF
28
Slide29Physical vs. soft buttons
Soft or virtual buttons are part of the touch screenKindle Fire replaced four physical buttons with soft onesAndroid v. 4.0 (Ice Cream Sandwich) replaced physical buttons with soft onesButtons can be overloadedBack can mean cancel, back to app, or back to previous app, causing design/user problems
March 14, 2013
IT PC at TCF
29
Slide30When will change from apps to sites happen?
Nobody knowsResearchers suggest that mobile sites will “win” over mobile apps in the long runToday, the advice is to develop apps
March 14, 2013
IT PC at TCF
30
Slide31Mobile apps
March 13, 2013
IT PC at TCF
31
Mobile apps are intermittent-use appsPeople install more than they useEphemeral applications on websitesLow commitment
Slide32Half-speed progress, but hope ahead
March 13, 2013
IT PC at TCF
32
Why do users spend more time on these tasks in 2009?The usage environment has changedSearch dominant
Task
WAP
(2000)
Modern Phones (2009)
Find the local weather tonight
164 sec.
247 sec.
Find what’s on BBC TV
tonight at 8 p.m.
159
sec.
199 sec.
Slide33Mobile intranets
Lack of traction—why?No budget or resources for mobileDifficult for intranet teams to choose one mobile device, so they choose noneResources needed for a version that works on any mobile device are not available
March 14, 2013
IT PC at TCF
33
Slide34Designing for the small screen
Set priorities, make trade-offs, find the balance
March 13, 2013
IT PC at TCF
34
Slide35Wasted mobile space
March 13, 2013
IT PC at TCF
35
Two interfaces for the same dataChromeEdward R. Tufte was the data display geniusProgressive disclosure
Overloaded vs. generic commands
Case study: optimizing a screen for mobile use
Information scent
Slide36Two interfaces for same data
Two = one too manyUsually indicate a “lazy” designOnly justified when two view emphasize significantly different aspects of the data.iBooks has a bookshelf and list view—not okYelp has a list and a map view--ok
March 14, 2013
IT PC at TCF
36
Slide37What is chrome?
The visual design elements that give users information about the screen’s content or provide commands to operate on that contentTakes up space, chrome obesity eats pixelsChrome can “come and go” on screen with:Simple and reliable operations and consistencyContextual tips (e.g., which gesture to use)Progressive disclosureChrome is good in moderation, don’t overdo
March 14, 2013
IT PC at TCF
37
Slide38Progressive disclosure
Addresses two contradictory requirementsPower, features, and optionsSimplicityShows:Initially only a few stepsA larger set of options on request onlyGets the split between initial/secondary features right
March 14, 2013
IT PC at TCF
38
Slide39Mobile users face hurdles
Small screensAwkward input for typingDownload delays--may diminish in futureMis-designed sites—hope for redesign
March 14, 2013
IT PC at TCF
39
Slide40Overloaded vs. generic commands
Generic commands—same command in different contexts for same resultPinch-zoomOverloaded commands—variants of same command to achieve different outcomesOften confuses usersE.g., websites with multiple search fields
March 14, 2013
IT PC at TCF
40
Slide41Examples of overloaded commands
Two different Home buttons in Conde Nast’s Kindle Fire appBack on Zappos app for Android:Undo on product pageTakes user out of app on homepageBack on New York Times Kindle FireOne step back or two, depending…
March 14, 2013
IT PC at TCF
41
Slide42Reusing commands effectively
Do people:Recognize that two contexts are different?View the outcomes as similar or different?Criteria depend on how users interpret the user interface.Use empirical testing to judge and decide.
March 14, 2013
IT PC at TCF
42
Slide43Information scent to forage
Users:Estimate a given hunt for information (via foraging) and its likely success from its spoor (scent)Assess whether the path exhibits cues related to desired outcomeAsk: do links and categories explicitly describe what users will find at the end?Don’t use made up words or slogans as navigation options; feedback “on the path”
March 14, 2013
IT PC at TCF
43
Slide44Case study: AllKpop.com
Things done right
Supports right taskSeparate mobileServer auto-senses mobile or desktopTouch targetsContent-carrying keywords
Redesign (partial list)
Fewer featuresBigger touch targetsFull headlinesEnhanced scannabilityMore info scent
March 14, 2013
IT PC at TCF
44
Slide45Typing forms on mobile
March 13, 2013
IT PC at TCF
45
Let them use abbreviationsCompute infoSupport cut/pastePrepopulate known valuesMake it short
Slide46Getting around download times
March 13, 2013
IT PC at TCF
46
Streamline the interactionInclude only needed informationDon’t abuse imagesGive users feedback
Slide47Early registration must die
March 13, 2013
IT PC at TCF
47
Example: pizza ordering applicationWhy ask users to register on the first screen (“take before you give”)?Don’t abuse your emerging relationship with the users.
Slide48What should sequence be?
Show the list of basic pizzasLet users customize their orderShow the priceCan ask for zip code to give delivery timeTake the orderAsk for personal info, now that users are sufficiently committed
March 14, 2013
IT PC at TCF
48
Slide49Case study: the WSJ mobile app
March 13, 2013
IT PC at TCF
49
The 90-9-1 rule
Confusing startup screen
Degrading the brand
A better design
A new WSJ workflow
Better next year
Workflow design
Slide50The 90-9-1 rule
90% are lurkers9% are contributors occasionally1% are participants who account for most of the contributions
March 14, 2013
IT PC at TCF
50
Slide51Example: confusing startup screen
March 14, 2013
IT PC at TCF
51
Slide52Why is this a two-star mobile app?
March 14, 2013
IT PC at TCF
52
The left screen is the WSJ iPhone app startup screen (2011)The right screen is what you see after tapping the Subscribe Now button in the left screen.
Slide53Why are subscribers upset?
In the first screen, the strongest call to action was the two weeks free offer.It seems obvious that it would cost $1.99 per week to use the mobile app after two weeks.Incorrect. If you click Subscribe on the second screen, access is free for current website subscribers.Most users never saw this third screen.
March 14, 2013
IT PC at TCF
53
Slide54How bad design degrades the brand
Even though WSJ has subscribers’ money, they should not disregard existing customers:Subscribers feel insulted by paying twice (subscription and online access)Those who pay for website access are most loyal fans who should be treasured, not treated like garbageWSJ needs to retain credibility, and deepen relationships
March 14, 2013
IT PC at TCF
54
Slide55A better design would eliminate this usability problem
Spell out the three possible scenariosFREE limited accessFREE full access for existing subscribersFirst two weeks FREE for new subscribersPlace buttons side by side to reduce confusionSimplify the workflow
March 14, 2013
IT PC at TCF
55
Slide56WSJ screen redesign
All three options shown on one screen
March 14, 2013
IT PC at TCF
56
Slide57Better next year
WSJ released a new design in 2012They also changed their business modelThe lesson:UI design is only part of a total experienceAre designers allowed to alter the business model in your company?What is the impact of the business model on the user experience?
March 14, 2013
IT PC at TCF
57
Slide58Workflow Design
Big issue in application usabilityFlawed workflows are confusingTighten or loosen? It depends…Workflow should allow user inspectionConsider interruptions during process
March 14, 2013
IT PC at TCF
58
Slide59Writing for mobile
Focus, focus, focus
March 13, 2013
IT PC at TCF
59
Slide60Mobile content is twice as difficult
March 13, 2013
IT PC at TCF
60
Cloze testCloze test solution—don’t peekWhy mobile reading is challenging
Slide61Cloze test
Common empirical comprehension test.Replace every nth word with blanks, e.g., n =6Ask test participants to read modified text and fill in the blanks w/best guessesScore is % of correctly guessed wordsIf score is > 60%, assume reasonable comprehensionCompare readability and comprehension
March 14, 2013
IT PC at TCF
61
Slide62E.g., Facebook’s privacy policy:
Site activity information. We keep (1) of some of the actions (2) take on Facebook, such as (3) connections (including joining a group (4) adding a friend), creating a (5) album, sending a gift, poking (6) user, indicating you “like” a (7), attending an event, or connecting (8) an application. In some cases (9) are also taking an action (10) you provide information or content (11) us. For example, if you (12) a video, in addition to (13) the actual content you uploaded, (14) might log the fact that (15) shared it.
March 14, 2013
IT PC at TCF
62
Slide63About the full text
Before inserting the blanks, text scored at the 14th grade level (2 years college)Higher level than for most of FB audienceShould leisure sites feel like textbooks?
March 14, 2013
IT PC at TCF
63
Slide64Cloze test solution is…
On the next slide…
March 14, 2013
IT PC at TCF
64
Slide65Missing words in the sample
March 14, 2013
IT PC at TCF
65
trackyouaddingorphotoanotherpostwith
you
when
to
share
storing
we
you
Slide66Did you get at least nine?
Nine out of fifteen corresponds to 60%If you got a lower score, it’s likely to be a lack of contextual knowledge of FacebookE.g., the use of the work “poking” makes its meaning incomprehensible in context unless you are a user
March 14, 2013
IT PC at TCF
66
Slide67Mobile reading is challenging
Smaller screenMeans users can see lessUsers must move around page, scrollingTakes more time, degrades memoryDiverts attention from problem at handIntroduces new problem of requiring previous location on the page
March 14, 2013
IT PC at TCF
67
Slide68In doubt? Leave it out!
Killing time is the killer app of mobileMobile users are in a hurryWhat a paradox!Filler = badCut the fluffDefer background material to secondary screens
March 14, 2013
IT PC at TCF
68
Slide69What’s the diff?
Readability
A property of actual textPredicts educational level of those reading content w/ease
Comprehension
Combines text property with a user segmentShows whether target audience understands text meaning
March 14, 2013
IT PC at TCF
69
Slide70If in doubt, leave it out
March 13, 2013
IT PC at TCF
70
Filler = badDitch the blah-blah textOld words are bestBylines for mobile content?Author bios dos and don’ts
Slide71Old words and Bylines
Old words are best
Speak the user’s language
On bylines
AgainstKeep it shortCut more in mobileForFamous, cred authorIndividual’s takeIntranet
March 14, 2013
IT PC at TCF
71
Slide72Defer secondary information to secondary screens
March 13, 2013
IT PC at TCF
72
Example 1: mobile couponsExample 2: progressive disclosure in WikipediaDeferring information = initial info is read more
Slide73Mini-IA: structuring the information about a concept
March 13, 2013
IT PC at TCF
73
Linear paging? Usually badDon’t chop up an article into pagesAlphabetical sorting must (mostly) dieLazy design team?Use an inherent logic
Slide74Examples of structure
Usage-relevant
Organize physical exercises from easiest to hardest
Usage-driven
OptionsOne long pageMini-IASplit into chunksDistributed info (see usage-relevant)Blends together subtopics
March 14, 2013
IT PC at TCF
74
Slide75Tablets and E-readers
iPad and Kindle Fire as most interesting
March 13, 2013
IT PC at TCF
75
Slide76iPad usability
March 13, 2013
IT PC at TCF
76
Tablets are shared devicesWhat are iPads used for?The triple threat of iPad designPerceived affordance: can you see me now?Recognition-based user interfaces
Slide77iPad usability (Cont’d….)
March 13, 2013
IT PC at TCF
77
Inconsistent interaction designThe print metaphorCard sharks vs. holy scrollersSwipe ambiguityToo much navigation
Slide78iPad usability (Cont’d….)
March 13, 2013
IT PC at TCF
78
Splash screens and startup noisesOrientationToward a better iPad user experience
Slide79iPads are used mostly for
Playing gameschecking email/social networking sitesWatching videos/moviesReading news
March 14, 2013
IT PC at TCF
79
Slide80The iPad UI “triple threat”
Low discoverability (hidden UI)Low memorability (ephemeral gestures)Accidental activation (touch by mistake)
March 14, 2013
IT PC at TCF
80
Slide81Perceived affordance
Affordance means what you can do with somethingBut…users first have to know that a gesture can be used to perform an actionTwo ways: by remembering or inferringPerceived affordance = visible in advanceCan You See Me Now?
March 14, 2013
IT PC at TCF
81
Slide82Recognition based interfaces
E.g., gesturesAlso handwriting recognitionComputer must interpret raw inputProblem: misrecognized input = user frustration99% accuracy is not good enough
March 14, 2013
IT PC at TCF
82
Slide83Inconsistent interactive design
Touching a picture (across/within apps)Nothing special happensEnlarging the pictureShowing a more detailed page about itemFlipping the image, reveals more infoPopping up a set of navigation choicesShowing tips about interacting with picture
March 14, 2013
IT PC at TCF
83
Slide84The Print Metaphor
SwipingSequential navigationStrategic issue: user empowerment or author authority?
March 14, 2013
IT PC at TCF
84
Slide85Card Sharks vs. Holy Scrollers
CardsFixed-size presentation canvassScrollsRoom for as much information as you wantMake the swipe more discoverable
March 14, 2013
IT PC at TCF
85
Slide86Swipe Ambiguity
Users won’t hit a specific spot, necessarilySwiping is usually executed close to the sides of the screenLike turning the pages of a book
March 14, 2013
IT PC at TCF
86
Slide87Too Much Navigation
Many apps squeeze information into very small areasHarder to recognize and manipulate it
March 14, 2013
IT PC at TCF
87
Slide88Splash Screens and Startup Noises
Splash screens are revived super vampiresUsers do not expect to hear noises
March 14, 2013
IT PC at TCF
88
Slide89Orientation
Landscape or portraitSlight preference for landscapeDepends on use of iPad cover, app, etc.
March 14, 2013
IT PC at TCF
89
Slide90Better iPad
Add dimensionality to increase discoverabilityLoosen up the etched-glass aestheticNo value-added through weirdnessSupport standard navigation, Back feature, search, clickable headlines, and a homepage for most apps
March 14, 2013
IT PC at TCF
90
Slide91Kindle usability
March 14, 2013
IT PC at TCF
91
Kindle: the E-readerKindle reader on the iPhoneKindle Fire usability
Slide92Kindle Usability
One command, two buttons to turn page = goodKindle iPhone app has poor usabilityE-books are goodless weight, no dirty fingers, easier page turns
March 14, 2013
IT PC at TCF
92
Slide93Kindle Fire Usability
“Fat finger” problemEverything is much too small on the screenA heavy objectMagazine apps have issues, e.g., no homepageSeven-inch tablets will have to make do for now with repurposed content
March 14, 2013
IT PC at TCF
93
Slide94Looking toward the future
A broader view of mobile, other types of interfaces
March 13, 2013
IT PC at TCF
94
Slide95Transmedia design for the three screens
March 13, 2013
IT PC at TCF
95
PCs will remain importantThe third screen: TVScreens 4 and 5: tiny, huge will be more importantTransmedia user experience
Slide96Transmedia UX Design Strategy
Visual continuityFeature continuityData continuityContent continuity
March 14, 2013
IT PC at TCF
96
Slide97Beyond flatland
March 13, 2013
IT PC at TCF
97
Slide98Beyond flatland
The world becomes computational “The invisible computer” (Norman)Augmented vs. virtual reality
March 14, 2013
IT PC at TCF
98
Slide99In the future, we’ll all be harry potter
March 13, 2013
IT PC at TCF
99
Next-generation magicDon’t harm the mugglesEvery non-conforming screen undermines users’ ability to build a conceptual model