Being Mobile
•
7 j'aime•1,603 vues
Slides from the DrupalCamp Toronto 2012 version of this presentation.
Recommandé
Contenu connexe
En vedette
En vedette (18)
Similaire à Being Mobile
Similaire à Being Mobile (12)
Dernier
Dernier (20)
Being Mobile
- 1. Photo: Steve Rhodes (ari) Martin Kuplens-Ewart Being Mobile Product Designer, BraveNewCode
- 3. In the next half-hour… Why Mobile 10 Rules Tactics Questions Matters
- 4. Photo: clarkmaxwell Why Mobile Matters
- 5. Photo: clarkmaxwell Why Mobile Matters • Reputation
- 6. Photo: clarkmaxwell Why Mobile Matters • Reputation • Sales
- 7. Photo: clarkmaxwell Why Mobile Matters • Reputation • Sales • It’s not going to stop…
- 8. 10 Rules
- 9. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 10. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 11. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 12. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 13. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 14. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 15. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 16. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 17. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 18. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 19. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 20. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 21. Photo: Jason Cosper (boogah) Bonus: M obile ROI
- 22. Photo: Jason Cosper (boogah) Bonus: M obile ROI Count all conversions!
- 23. Photo: Jason Cosper (boogah) Bonus: M obile ROI Count all conversions! • Mobile Sales
- 24. Photo: Jason Cosper (boogah) Bonus: M obile ROI Count all conversions! • Mobile Sales • Phone Calls
- 25. Photo: Jason Cosper (boogah) Bonus: M obile ROI Count all conversions! • Mobile Sales • Phone Calls • Store Locator Clicks
- 26. Photo: Jason Cosper (boogah) Bonus: M obile ROI Count all conversions! • Mobile Sales • Phone Calls • Store Locator Clicks • Store Sales …
- 27. Photo: Steve Rhodes (ari) Tactics
- 28. Photo: Steve Rhodes (ari) Tactics • Responsive Theme • Separate Mobile Site • Server-Side Optimization / Dynamic Serving
- 29. Tactics • Responsive Theme • Separate Mobile Site • Server-Side Optimization / Dynamic Serving
- 30. Tactics • Responsive Theme • Separate Mobile Site • Server-Side Optimization / Dynamic Serving
- 31. Tactics • Responsive Theme • Separate Mobile Site • Server-Side Optimization / Dynamic Serving
- 32. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization
- 33. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization
- 34. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 35. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 36. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 37. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 38. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 39. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 40. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 41. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 42. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 43. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 44. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 45. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 46. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 47. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 48. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 49. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 50. What do I suggest?
- 51. In Review… Why Mobile Mobile ROI 10 Rules Tactics Matters
- 52. Questions?
- 53. Thank you. Martin Kuplens-Ewart BraveNewCode Inc. @mkuplens | @bravenewcode | bravenewcode.com
Notes de l'éditeur
- \n
- • Product Designer for BraveNewCode\n• Fifteen years in user experience strategy, design, and development\n
- \n
- Why it matters (to your clients!)\nReputation\n67% of mobile users more likely to buy from mobile-optimized\n61% will go elsewhere if not mobile-optimized\n50% will abandon brand loyalty!\n\nSales\n75% of mobile users engage actively - view pages, buy, etc.\n~20% of mobile site visits lead to a phone call\n\nNot going to stop\n- Mobile use on the rise, by 2015 more mobile web use than desktop\n
- Why it matters (to your clients!)\nReputation\n67% of mobile users more likely to buy from mobile-optimized\n61% will go elsewhere if not mobile-optimized\n50% will abandon brand loyalty!\n\nSales\n75% of mobile users engage actively - view pages, buy, etc.\n~20% of mobile site visits lead to a phone call\n\nNot going to stop\n- Mobile use on the rise, by 2015 more mobile web use than desktop\n
- Why it matters (to your clients!)\nReputation\n67% of mobile users more likely to buy from mobile-optimized\n61% will go elsewhere if not mobile-optimized\n50% will abandon brand loyalty!\n\nSales\n75% of mobile users engage actively - view pages, buy, etc.\n~20% of mobile site visits lead to a phone call\n\nNot going to stop\n- Mobile use on the rise, by 2015 more mobile web use than desktop\n
- \n
- \n
- - Users expect instant-on from mobile devices\n- Mobile pages must load quicker than desktop\n
- - Use analytics to identify priority content\n- Reduce navigation options & minimize scrolling/zooming\n- Search is critical for complex sites\n
- - Where possible links and buttons should be large, centered\n- Increase active click area (e.g. entire content excerpt, not just title)\n- Make labels active\n
- - Content-background contrast should be high\n- Rewrite content for easyreading\n- Size elements for the screen\n\n
- No Flash! (Need I say it?)\nAllow your layout to adapt to vertical/horizontal orientation\n
- - Make action triggers obvious\n- Provide click-to-call phone numbers\n- Reduce steps where possible (for ecommerce, consider making ‘same as billing’ the default for shipping)\n- Trim forms, omitting nice-to-have fields\n- Make data entry easier with check boxes, lists, and scroll menus\n
- - Clickable phone number!\n- If clicks-and-bricks, show location/store locator on landing page\n- Include maps/directions, use device location to give direction to nearest branch\n- If retail, allow for stock checks at nearby locations\n
- - Enable users to move between devices without repeating tasks\n- Simplify, but avoid eliminating application functionality on mobile \n
- - Guide smartphone users to your mobile interface\n- Give them the ability to escape to full desktop view\n- Remember their preference\n
- - Use analytics to tweak content selection and layout\n- Perform user tests to validate assumptions\n- Keep working on the mobile site to address changing needs and demands\n
- Priceline.com\nVisit duration up 45%\nPage views up 300%\nMobile conversions up 31%\n
- Priceline.com\nVisit duration up 45%\nPage views up 300%\nMobile conversions up 31%\n
- Priceline.com\nVisit duration up 45%\nPage views up 300%\nMobile conversions up 31%\n
- Priceline.com\nVisit duration up 45%\nPage views up 300%\nMobile conversions up 31%\n
- Priceline.com\nVisit duration up 45%\nPage views up 300%\nMobile conversions up 31%\n
- \n
- - One build (easy to sell b/c currently sexy)\n- One set of content\n- Lots of Frameworks & ready-made themes\n- Strong branding\n- User locked to mobile view\n- Hiding & scaling assets == big downloads for mobile, consumes RAM\n- Can’t iterate mobile effectively, requires impact on desktop\n\nBigYouth: 6MB mobile homepage (some handwritten mobile optimizations)\n
- - Allows content & copy geared to mobile\n- Useful when dealing with third-party vendors & SaaS integrations\n- Often a solution provided by external vendors\n- Mobile-sized images == no excess downloads\n- Free to iterate mobile features & interface\n- User can switch freely\n- Increased maintenance burden, duplicate content entry\n- Require second set of templates\n\nPriceline: 400KB mobile homepage\n
- Note: BraveNewCode does this with WPtouch\n\n- Simplified maintenance (one set of content)\n- Uses built-in CMS tools to optimize media before shipping\n- No hidden DOM elements\n- User can switch freely\n- Tools may have limited branding support, reputation for making sites “samey”\n- Requires further theme development\n\nT+L: 600KB mobile homepage, but full content available. No switch.\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- \n
- - Mobile Matters, because sales and reputation are increasingly dependent on mobile-optimized sites\n- 10 Rules: Be Quick; Simplify Navigation; Make it Thumb-Friendly; Design for Comprehension; Keep it Accessible; Streamline Conversion; Make it Local; Join the Dots; Give Choice; Listen, Learn, Iterate.\n- Tactics: Responsive, Separate, Server-side Optimized - each with advantages and disadvantages. Must assess based project-by-project.\n
- \n
- \n