Your SlideShare is downloading. ×
0
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
SWDC 2011: Mobile UI Design - Web or Native?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SWDC 2011: Mobile UI Design - Web or Native?

2,388

Published on

Published in: Technology, Business
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,388
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

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

    ×