Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sugsa mobile ux_april 2013

1,392 views

Published on

Your boss has an iPhone, so of course he wants an app. But does an app really make business sense? Or is a responsive design website enough?

And with hundreds of thousands of apps out there, what will make people choose and use yours? What makes a good mobile user interface? And how can you make sure your company actually delivers one?

Responsive design might make sense if you've got a content driven website. But how should your web team work together when every web page they are making needs to work at any width and resolution? And can you get the content under control to make pages that really make sense on small screens and big ones?

Published in: Design, Technology
  • Be the first to comment

Sugsa mobile ux_april 2013

  1. 1. Phil Barrett | April 2013Mobile UX
  2. 2. 47,000 smartphonessold during this talkThat’s 2.25 million a day207.7 million in Q4 2012
  3. 3. Gartner1.82 billionbrowser-equipped, enhanced phones by 2013,1.78 billionPCs by 2013.
  4. 4. So mobile is now without a doubtreally, really important.
  5. 5. It’s also changing really, reallyfast. So we’re discovering lots ofstuff all the time.
  6. 6. And it’s like the wild west.Rules keep changing. Lots of fights.
  7. 7. And it’s like the wild west.Rules keep changing. Lots of fights.
  8. 8. Two “mysteries” that puzzle me1. Your boss wantsan iphone app2. The trunk testdoes not apply
  9. 9. 1Your boss wantsan iPhone app
  10. 10. Your bosswants aniphone app
  11. 11. Your bosswants aniphone appWhy?
  12. 12. He knows mobile is growing faster than any ICT before itGrowing faster than any technology everMorgan Stanley mobile Internet report
  13. 13. And that it’sjust gettingstarted
  14. 14. He has an iphone013253850<$25k $25k-$50k $50k-$75k $75k-$100k >$100kiPhone AndroidIncome%ofownersComscore
  15. 15. He sees that“everyone else”has got an appalready775 000 iOS appsand counting
  16. 16. BI Intelligence/NielsenAnd if he’s reallysmart he’snoticed that appsare addictive...
  17. 17. The app system is addictive?The app store offers novelty...a guaranteed antedote to habituation (just like fashion).Finding apps yields dopamine rewardsUnpredictability makes it more powerful.Owning an app makes you like it moreAnd it makes you like apps more (endowment effect andself herding).We hoard appsGiving up an app makes us uncomfortable (loss aversion).
  18. 18. And with an app your brandowns a spot on their homescreen
  19. 19. But he hasn’t noticed thatAndroid is outselling iPhoneMy Broadband
  20. 20. And he hasn’t noticed that in SA,Blackberry outsells them both by a mileMy Broadband: Vodacom’s figures, Aug 2012
  21. 21. And with this muchcompetition, howwill you stand out?
  22. 22. To launch an app that has impact...Ship the app for multiple platformsAnd it has to be useful, easy and delightful on eachoneAnd you have to ship updatesAnd run additional marketing campaigns to getpeople to know of the app’s existence...Which may be more of a commitment thanhe had in mind.
  23. 23. iPhoneAndroidDesigners are tryingto re-use theiphone design tothe max. It’scheaper!Same for Instagram,Facebook...Converging designs reduces costs a little bit
  24. 24. But, the million dollar question...
  25. 25. Does his ideamake sense as anapp anyway?
  26. 26. "Telkom recently unveiled its app on the Apple App Store, but therehave only been around 2 500 downloads in the two weeks sincelaunch." - Duncan Alfreds news 24"Whats the point?", wrote a user named PierreQ77.
  27. 27. Perhaps a responsive websiteis all you need...
  28. 28. 80% apps
  29. 29. 80% apps31 minutes per day forthe average American.
  30. 30. For the right kind ofcontent, an app andan app store is abarrier.If someone wants tosee a tweeted story,it’s annoying to haveto download a wholeapp.App.ft.com
  31. 31. Top 5 =Amazon, Best Buy,eBay, Target andWalmartUS mobileshoppers preferresponsive Web
  32. 32. App or responsive?User contextdetermineswhich way to go
  33. 33. Context: Frequency of useFrequency of useSeveral times a day Occasional RareNative app might be goodWeb might be better
  34. 34. Context: TimeTime killI haven’t got much to do at the momentTime shiftI’ve got time to do this task at, so I might as wellTime (or location) criticalI must do this now because it’s urgentor because I am in the right place
  35. 35. Urgency + frequencyKill Shi& Cri)calRarelyO&enFlipboardNewsFacebookEmailMessagingGameNews or blogsIn-store pricecomparisonBankingResearchATo-do listWA AAAAA AWWGet restaurantaddressW
  36. 36. Urgency + frequencyKill Shi& Cri)calRarelyO&enFlipboardNewsFacebookEmailMessagingGameNews or blogsIn-store pricecomparisonBankingResearchATo-do listWA AAAAA AWWGet restaurantaddressWBecause of tight OSintegration
  37. 37. So responsive design makes lots ofsense for all kinds of infrequentlyused content.(There’s nothing wrong with bengpart of the 31 minutes).
  38. 38. Like this.
  39. 39. All the factorsResponsive HTML5Easy to updateLow barrier toengagementCross platformNative appSecureEasy to monetiseFast, smooth, OS-integratedDiscovery via appstore
  40. 40. All the factorsResponsive HTML5Easy to updateLow barrier toengagementCross platformNative appCustom build formultiple platformsRequires a“permanent” usercommitment fortransient content
  41. 41. Responsive design
  42. 42. Responsive design
  43. 43. Responsive design“Phablet” TV
  44. 44. Mobilecontext haschanged
  45. 45. No featureleft behind
  46. 46. Perfect!Well not quite...
  47. 47. Responsivedesign isn’t“finished” yet
  48. 48. Fluid images are not elegant(or even functional?)<link rel="stylesheet" type="text/css”media="screen and (max-device-width:480px) and (resolution: 163dpi)”href="shetland.css" /><img src="birds.jpg" alt="" />The image tag is still just for one picture, regardless of device.Big file = Big downloads = bad.Yay!Boo!
  49. 49. And older browsers don’t supportanything muchSamsung E250:“The AK47 ofmobile phones”So that means you need to do RESS (REsponsive + Server Side).Detect smaller handsets by type and serve them HTML andimages they can handle.
  50. 50. Making thechange to alightweightresponsive sitecan be hardwhen you have agiant legacy ofthousands of fatpages.
  51. 51. Content choreography is a new skillsetMostly fluid Column dropLayout shifter Off canvasKudos:  Luke  Wroblewski
  52. 52. And it needs a new workflow§ Need to design each wireframe at multiple sizes§ But even then you can’t predict: you have to build theHTML and test it at different sizes, then add “breakpoints” at sizes where the page breaks.§ This means: design, build, review, design, build...Imagekudos:TrentWalton
  53. 53. So this isn’t so clear cut(was it ever?)TimeDevelopmentInteraction designUX evaluation
  54. 54. So this isn’t so clear cut(was it ever?)TimeDevelopmentInteraction designUX evaluation
  55. 55. So this isn’t so clear cut(was it ever?)TimeDevelopmentInteraction designUX evaluation
  56. 56. So this isn’t so clear cut(was it ever?)TimeDevelopmentInteraction designUX evaluationRefinement ofresponsive page designsneeds to happen rightas the page gets built.
  57. 57. New tools to help designersdesign responsiveEasel.io
  58. 58. Proty (protytype.com)
  59. 59. But what about the final frontier:Responsive web apps?
  60. 60. Responsive web appsKill Shi& Cri)calRarelyO&enFlipboardNewsFacebookEmailMessagingGameNews or blogsIn-store pricecomparisonBankingResearchATo-do listWA AAAAA AWWGet restaurantaddressWUseful, infrequent, anddoesn’t require specialperformance
  61. 61. HTML5 apps• Reduces the update and the cross platformproblemsBut...• HTML 5 performance will always lag• 22 Seven, Facebook have both concludedthat HTML5 wasn’t for them.• And no app store discovery
  62. 62. But if you’re really determined you can getgood results for certain kinds of app.
  63. 63. Eg. Take-away delivery serviceEg. A unit trusts portfolioYes!A niche for responsive web apps in future?• As the responsive Web starts to get people used tomore browser-based mobile functionality,• As HTML5 reaches a critical level of power andspeed
  64. 64. 50% of all online sales for mothers day2012 came from mobile devices - GoogleE-commerce leads the way...
  65. 65. 2With apps, the trunk testdoes not apply
  66. 66. Steve Krugs trunk testIf you were locked in the “trunk” of a car and dropped off ata random webpage, you should be able to tell where youare because all pages should have...Site IDPage NameSections and SubsectionsLocal Navigation“You Are Here” IndicatorsSearchTrunk
  67. 67. But if you put allthis on a mobileapp, its going tobe so clutteredthat you’llstruggle to use it.
  68. 68. Too much navigation complexity
  69. 69. Too much navigation complexity
  70. 70. Too much navigation complexity
  71. 71. Too much navigation complexity
  72. 72. App greatness seems to be inverselyproportional to clutter...
  73. 73. clear
  74. 74. And also...rise
  75. 75. Paper by 53. iPad App of the year 2012.
  76. 76. Krugs signposting is there so you can resumeeasily if youre interrupted.And mobile is supposed to be a highinterrupt environment.But apps seem to work better when we takethe signposts out.Why?
  77. 77. Reducing furniture works in apps because...?• People tend to adopt apps that perform a limitedfunction in a simple way• Less on each screen, easier to remember whereyou are• Your phone offers fewer distractions at oncethan your PC• When youre doing something important on amobile phone, your concentration is actuallyquite intense.
  78. 78. The hamburger and the monolithMonolithic appBut nav dropsaway when you’refocussing onsomething
  79. 79. The hamburger and the monolithMonolithic appBut nav dropsaway when you’refocussing onsomething
  80. 80. Ride the complexity curve
  81. 81. Ride the complexity curveTimeComplexity
  82. 82. Ride the complexity curveTimeComplexity
  83. 83. Ride the complexity curveTimeComplexity
  84. 84. Oliver  Wendell  Holmes-- Oliver Wendell Holmes Jr“I would not give a fig for thesimplicity on this side of complexitybut I would give my right arm for thesimplicity that lies on the other sideof complexity.
  85. 85. “To get to simplicity: iterateIterative design, with its repeating cycle of design andtesting, is the only validated methodology in existence thatwill consistently produce successful results.If you don’t have user-testing as an integral part of yourdesign process you are going to throw buckets of moneydown the drain.Bruce TognazziniFounder of Apple’s Human Interface Group
  86. 86. Path’s journey to simplictyDave Morin“True simplicity takes a lot of time. And inmobile that’s especially true.”Path 2.0 was simplified; the team spent 20iterations or more on the home view, trying tofigure out how to fit everything in withoutcluttering it.Path looked at the quantitative data — featuresused, daily active users, monthly active users —and correlated it with extensive ethnographicobservations of what people were actuallydoing.Venturebeat.com
  87. 87. Prototyping on iOS is easyAlso...• Fieldtestapp.com• FluidUI (alsoandroid)• Tumult Hype• Axure 6.5 forheavy duty stuff• Phonegap (alsoandroid)ipro.to/tap_iphone
  88. 88. Stroke, don’t pokeIn our research, we see thatpeople love making gestures onapps. Why?Poking is quite an unnaturalgesture. We don’t do it that oftenin life.Swipes, drags and flicks seem tofit better with what humans(evolved to) do.
  89. 89. Gestures are hard todiscover. But a joy toperform.It looks like tutorials arethe price we pay fornow. If you keep itsimple, it might not betoo high a price.
  90. 90. Gestures are hard todiscover. But a joy toperform.It looks like tutorials arethe price we pay fornow. If you keep itsimple, it might not betoo high a price.
  91. 91. So...Make your next website responsive.Don’t make websites into apps when they are usedinfrequently and won’t benefit from OS integration.Go see when responsive apps make sense andreport back.When designing apps, make the app do as little aspossible.Then remove as much of the chrome as you cancontemplate.Then user test it, and realise that you can stillremove more.
  92. 92. There’s no substitute for running it on actual handsetsDevicelab.co.zaFree!
  93. 93. Thanks for listening.Reading list for this talkhttp://readlists.com/b4e06725/

×