SWDC 2011: Mobile UI Design - Web or Native?


Published on

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • - not about developer tools (can sometimes take some pain)\n- not about some internal in-house tool\n
  • - Software development has been around longer than 6 months\n- Learn from desktop\n
  • - Java's primary UI/Widget Toolkit\n- since roughly 1996\n- know any Swing app? USE any Swing app?\n
  • - Write UI once, run anywhere!\n- AMAZING!\n
  • - Write UI once, run anywhere!\n- AMAZING!\n
  • - in Theory it sounds great\n- but there's one problem:...\n
  • - Established, generally accepted on Desktop\n- Same old discussion is going on for mobile\n
  • - Why? Hardware? Prefer HTC over Apple? Better camera?\n
  • It's the SOFTWARE that makes the difference.\n
  • - sometimes unknowingly\n- features, look, location of buttons, even fonts and colors\n- Cross-Platform UIs look odd and alien to users.\n
  • - feels odd and alien\n- doesn't belong\n--> virtually no cross-platform consumer apps on the desktop\n
  • - it's a bad idea on the desktop\n- it's a bad idea on mobile.\n- it's a conceptual mistake that can't be fixed through better technology.\n
  • \n
  • - ppl are used to it\n- don't think it's odd that GMail doesn't look like Outlook or Mail.app\n- able to use facebook, Google+ although UI looks foreign/alien in comparison\n- everything that make cross-platform UI a bad idea seem to be absolutely OK on the web. Why?\n
  • - When users open their web browser, they know that they are entering a very diverse space: All web pages look different. That's OK.\n- Bookstore\n
  • - Expect --> full of books and magazines with different sizes, layouts, content structures, colors and content.\n- Not surprised!\n- Would be unpleasantly surprised, if the next season of the show you collect on DVD has a different packaging.\n- Encyclodia: Different paper. Different font. Paper-back, not leather bound.\n--> unexpected unpleasant surprise\n--> Just like apps with a foreign, cross-platform UI that run alongside your normal native apps. They don't fit in your collection. \n--> In the bookstore - the browser - that is OK, though. Users expect it.\n
  • - if done right, runs on every major platform\n- We can ruin it for ourselves, though.\n
  • - by mimicking native UI.\n- if we mimick native UI with web tech --> never quite look and feel the same\n- only look native-ish on one platform\n\n
  • - it's an imitation\n- look outdated as soon a new OS version comes out\n
  • - fools errand.\n- waste of time.\n--> biggest problem:...\n
  • - everything else will disappoint.\n- The mimicking can come quite close to the real thing, but it will never be exactly as good.\n- But users don't care how something is implemented: If it looks like my other apps, it should behave like my other apps.\n- make the user forget that he's "in the bookstore" where everything is different.\n- take our own freedom to do what we want away from us.\n- So what should we do?\n
  • - Don't imitate native!\n- You will only disappoint because you won't be able to fully satisfy the expectations users have of an app that looks native.\n- Instead, pleasantly surprise.\n- Now what about mobile, specifically?\n
  • - An app that has an icon on the home screen is perceived by the user as "an app", no matter if \n-- browser without the toolbar, \n-- wrapped in a PhoneGap shell \n-- a "real" native app.\n- icon --> app\n- Rest: implementation details\n
  • - So if the user perceives it to be a native app like all the other apps, it has to behave like one.\n- Otherwise the user will be disappointed. \n- You move your device to landscape mode --> no animation? Disappointment. \n- The thing that looks-like-a-table-view-but-really-isn't is jerky when you scroll it? Disappointment. \n- The swipe gesture....? Disappointment. \n- The element you are dragging around on the screen with your finger always lags behind and jerkily jumps to where your finger is every half a second instead of buttery smoothly following its movement? Disappointment.\n\n- So mobile web apps always disappoint? No!\n
  • - The web has its own thing going. \n- And once the user opens the browser or, as it were, "enters the bookstore," --> full creative freedom of coming up with a great, unique UI for your app. \n- You will pleasantly surprise your users instead of disappointing them.\n
  • - Because users expect cross-platform UI in the browser + lower expectations.\n- So the big question remains....\n
  • - it depends.\n- "What do I want to achieve with this mobile app?"\n
  • - if it's none of those, don't even bother.\n- Restaurant: Opening times, menu?\n- You'd be much better off making a beautiful mobile website + SEO instead of wasting your money on an app.\n- Being "in the App Store" is no golden magic ticket to success: You can't just put anything in there.\n
  • - if you do make an app, make one that you would want to use. Otherwise, don't even bother.\n- What if I DO have a great idea and want to target iOS, Android and WP7?\n
  • - the easiest way to be on par with native apps is to be a native app\n- If it's in the App Store, people will apply the same quality criteria to your app as to every other app, no matter what technology you've built it with. \n- Telling your customers "Well, of course the scrolling is jerky, it's built with web technologies!" will not fly. \n- Apple has hour-long sessions just about how to make your table views scroll smoothly\n- They don't care what technology you've used to build it.\n- But isn't it so much easier and faster to build apps with web technologies?\n
  • - It's a myth that it's so much easier and faster to build an app with web technologies. \n- It could very well take longer and still have a worse user experience. \n- Building a simple native app is, well, simple. \n- It might be way more complicated to build it with web technologies (esp. if you try to mimic native).\n
  • - I'm convinced stunning mobile web applications are possible today.\n- Just don't mimick native.\n
  • \n
  • So if you don't want to sell your app, don't have a big budget, don't need any native-only device features like access to the camera and want to be available on multiple mobile platforms, you should consider building a mobile website or web app.\n
  • - So putting ideologies and technology preferences aside and considering just your end user, I'm convinced that - when targeting the App Store - you can provide the best, smoothest, most polished experience if you create a native app.\n- Might very well change\n- Still no non-brower cross-platform UI.\n
  • - not for the "Chrome" but maybe for a detail view or a formatted document\n- One more thing...\n
  • - If a person is familiar with a certain single instrument, they may have a confirmation bias to believe that it is the answer to everything.\n\n\n
  • - Web tech is great, but might not always be the answer to everthing.\n- Know how to build boats, can necessarily use exactly the same technology to build houses\n- Might not always be the tool to deliver the best UX.\n- Don't be afraid to learn something new! It's not that hard!\n\n
  • \n
  • \n
  • SWDC 2011: Mobile UI Design - Web or Native?

    1. 1. Mobile UI Design – Web orNative?Johannes Fahrenkrughttp://springenwerk.com@jfahrenkrug
    2. 2. OverviewAre we learn resistant?The web as a special caseWhat about mobile?Native or web?Q&A
    3. 3. Disclaimer: This talk is aboutconsumer apps.
    4. 4. Are we learn resistant?
    5. 5. Remember Java Swing?
    6. 6. Source: http://en.wikipedia.org/wiki/File:Gui-widgets.png
    7. 7. nc e, rite O W un R re yw he AnSource: http://en.wikipedia.org/wiki/File:Gui-widgets.png
    8. 8. 1. Write Cross-Platform App2. ???3. Profit!!!
    9. 9. 1. Write Cross-Platform App2. ???3. Profit!!!
    10. 10. Cross-PlatformUIs suck!
    11. 11. KYM India User Survey 2011: 50% want Android 35% want iPhoneSource: http://news.in.msn.com/technology/article.aspx?cp-documentid=5435652
    12. 12. "Operating System is most important criteria for selecting a mobile phone (87%)"Source: http://news.in.msn.com/technology/article.aspx?cp-documentid=5435652
    13. 13. People prefer their (mobile)OS for a reason.
    14. 14. Source: http://lizzybeth23.tumblr.com/
    15. 15. Cross-Platform UIis a conceptualmistake.
    16. 16. One Exception:The Web.
    17. 17. Surprisingly,cross-platform UIworks on theweb.
    18. 18. Expectation.
    19. 19. Source: http://www.bookstoreguide.org/2008/10/stanley-livingstone-hague.html
    20. 20. On the web, wehave completefreedom to builda single great UI.
    21. 21. Source: Apple Inc.
    22. 22. "Native scrolling for mobile webapps... or at least the closest thingto it!""Bugs...: Lots of other hard todescribe discrepancies with nativescrolling..."- http://joehewitt.github.com/scrollability/
    23. 23. UISwitch iOS 4 -> 5
    24. 24. If it looks like anative app, peopleexpect it to behaveexactly like a nativeapp.
    25. 25. "Build a UI and UXthat is platform-agnostic."- Majd TabySource: http://jtaby.com/2011/07/01/the-next-generation-of-mobile-web-apps.html
    26. 26. "It has an icon,so its an app."- Every User
    27. 27. Percieved as native?Behave like native!
    28. 28. Mobile Web Appscan be great if theydont mimick native.
    29. 29. You can only getaway with cross-platform UI in thebrowser.
    30. 30. So.... native or web?
    31. 31. People expect appsto either be useful,beautiful and/orentertaining.
    32. 32. The days were peopleare amazed simply bythe fact that you havean app in the storeare long over.
    33. 33. In the store you need tobe on par with nativeapps in terms of speed,UI and UX.
    34. 34. Creating a great mobileweb app requires truesoftware craftsmanship.
    35. 35. Companies to watch:- Appcelerator- Strobe- AppGyver
    36. 36. If you are targetting thestore(s), go native.
    37. 37. Free app?+ Small budget?+ No device features?+ Want multi-platform?--> Web
    38. 38. Paid app (Store)?+ Best possible UX?+ Device features?--> Native
    39. 39. Hybrid
    40. 40. "If all you have is ahammer, everythinglooks like a nail."
    41. 41. To deliver the best UX,theres no shortcutaround knowing theplatform youretargeting.
    42. 42. Q&A
    43. 43. Tack så mycket!Johannes Fahrenkrughttp://springenwerk.com@jfahrenkrug