SWDC 2011: Mobile UI Design - Web or Native?
•Download as KEY, PDF•
7 likes•1,048 views
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to SWDC 2011: Mobile UI Design - Web or Native?
Similar to SWDC 2011: Mobile UI Design - Web or Native? (20)
Recently uploaded
Recently uploaded (20)
SWDC 2011: Mobile UI Design - Web or Native?
- 1. Mobile UI Design – Web or Native? Johannes Fahrenkrug http://springenwerk.com @jfahrenkrug
- 4. Overview Are we learn resistant? The web as a special case What about mobile? Native or web? Q&A
- 5. Disclaimer: This talk is about consumer apps.
- 6. Are we learn resistant?
- 9. nc e, rite O W un R re yw he An Source: http://en.wikipedia.org/wiki/File:Gui-widgets.png
- 10. 1. Write Cross-Platform App 2. ??? 3. Profit!!!
- 11. 1. Write Cross-Platform App 2. ??? 3. Profit!!!
- 13. KYM India User Survey 2011: 50% want Android 35% want iPhone Source: http://news.in.msn.com/technology/article.aspx?cp-documentid=5435652
- 14. "Operating System is most important criteria for selecting a mobile phone (87%)" Source: http://news.in.msn.com/technology/article.aspx?cp-documentid=5435652
- 15. People prefer their (mobile) OS for a reason.
- 17. Cross-Platform UI is a conceptual mistake.
- 19. Surprisingly, cross-platform UI works on the web.
- 20. Expectation.
- 22. On the web, we have complete freedom to build a single great UI.
- 24. "Native scrolling for mobile web apps... or at least the closest thing to it!" "Bugs...: Lots of other hard to describe discrepancies with native scrolling..." - http://joehewitt.github.com/scrollability/
- 25. UISwitch iOS 4 -> 5
- 26. If it looks like a native app, people expect it to behave exactly like a native app.
- 27. "Build a UI and UX that is platform- agnostic." - Majd Taby Source: http://jtaby.com/2011/07/01/the-next-generation-of-mobile-web-apps.html
- 28. "It has an icon, so it's an app." - Every User
- 29. Percieved as native? Behave like native!
- 30. Mobile Web Apps can be great if they don't mimick native.
- 31. You can only get away with cross- platform UI in the browser.
- 32. So.... native or web?
- 33. People expect apps to either be useful, beautiful and/or entertaining.
- 34. The days were people are amazed simply by the fact that you have an app in the store are long over.
- 35. In the store you need to be on par with native apps in terms of speed, UI and UX.
- 36. Creating a great mobile web app requires true software craftsmanship.
- 37. Companies to watch: - Appcelerator - Strobe - AppGyver
- 38. If you are targetting the store(s), go native.
- 39. Free app? + Small budget? + No device features? + Want multi-platform? --> Web
- 40. Paid app (Store)? + Best possible UX? + Device features? --> Native
- 41. Hybrid
- 42. "If all you have is a hammer, everything looks like a nail."
- 43. To deliver the best UX, there's no shortcut around knowing the platform you're targeting.
- 44. Q&A
- 45. Tack så mycket! Johannes Fahrenkrug http://springenwerk.com @jfahrenkrug
Editor's Notes
- \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