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.

Future of Mobile London 2012

1,613 views

Published on

Presentation from the Future of Web Apps / Future of Mobile 2012 in London http://future-of-mobile.com/london-2012/

Published in: Design
  • 很棒的簡報!!
    : )
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Future of Mobile London 2012

  1. 1. Universal Mind™ Future of Mobile London Designing Elegant UX Across Devices and Platforms
  2. 2. Universal Mind™ :)- Erik Loehfelm EVP of User Experience, Universal Mind
  3. 3. Universal Mind™ what is our challenge?
  4. 4. Universal Mind™
  5. 5. Universal Mind™ YourContent
  6. 6. Universal Mind™ YourContent
  7. 7. Universal Mind™
  8. 8. Universal Mind™ why? Consumers expect content on their terms. In their ‘contexts’!
  9. 9. Universal Mind™ the not-so-obvious issue... This is an EXPERIENCE DESIGN problem, more than a technology challenge.
  10. 10. Universal Mind™ how do we solve this? For elegant experience across devices, focus on 2 critical points...
  11. 11. Universal Mind™ focus on people.
  12. 12. Universal Mind™ focus on context.
  13. 13. Universal Mind™ how? web techniques to consider: 1. Graceful Degredation... 2. Progressive Enhancement... 1. Adaptive Design 2. Responsive Design 3. ???
  14. 14. Universal Mind™ 1. graceful degredation • been around for awhile • could work for some instances • many sacrifices (from a CX perspective) • ‘backward’ approach (?)
  15. 15. Universal Mind™ 2. progressive enhancement • build up an experience from the baseline • work in an adaptive / responsive manner • target sizes not devices*
  16. 16. Universal Mind™ http://www.teehanlax.com/blog/
  17. 17. Universal Mind™ “Honestly, our team is kind of bored of talking about responsive design. It should no longer be considered a special feature, it’s how any self-respecting website should behave in 2012.” - Bobby Solomon, TheFoxIsBlack.com and Disney
  18. 18. Universal Mind™
  19. 19. Universal Mind™ Aaron Gustafson: http://www.alistapart.com/articles/understandingprogressiveenhancement/
  20. 20. Universal Mind™ content is KEY! contextually relevant content is KEY-ER!!
  21. 21. Universal Mind™ ...which points back to people. Understand user’s needs and you’ll understand what they need in their physical context
  22. 22. Universal Mind™ sidebar... SoLoMo! The integration of social networks with inherent mobile location features
  23. 23. Universal Mind™Lo SoMo
  24. 24. Universal Mind™ 3. (Mystery Approach) drumroll please...
  25. 25. Universal Mind™ as firs t desc from b ribed by Lu ack in ke W 200 9! 3. Mobile First... v.2012 • Understand your user + • Content focus + • Contextual relevancy + • Progressive enhancement + • Responsive design
  26. 26. Universal Mind™ things to consider with a Mobile First strategy: • research is your friend • analytics are your friend • hardware specific features, might not be your friend • many delivery options
  27. 27. Universal Mind™ considerations: • Mobile Web vs. Desktop Web • Responsive Web vs. Mobile Web • Web App vs. Native App • Wrapped Web vs. Native App
  28. 28. rich functionalityUniversal Mind™ Native App Wrapped Web Web App expensive Desktop Web cheap Responsive Web Mobile Web basic functionality inflexible flexible
  29. 29. Universal Mind™ a true story. A global, Mobile First approach in action!
  30. 30. Universal Mind™
  31. 31. Universal Mind™ technologies... • HTML 5 • LESS (css) • Backbone (MVC framework) • Twitter Bootstrap • JQuery • iOS Native - Custom UIWebView
  32. 32. Universal Mind™ where do I start?
  33. 33. Universal Mind™ 1. understand people and context
  34. 34. Universal Mind™ 2. document their journey
  35. 35. Universal Mind™ bullshit... kinda’! • Agile UX could / should be the goal but... • ‘Don’t fly a plane without wings.’ • Opportunity for ‘cornering’ and ‘redo’ is great at this stage • “Any fidelity wireframe is the right fidelity wireframe.”
  36. 36. Universal Mind™ 3. wireframes
  37. 37. Universal Mind™ wireframe techniques
  38. 38. Universal Mind™
  39. 39. Universal Mind™
  40. 40. Universal Mind™ Doug Chiang marker techniques
  41. 41. Universal Mind™
  42. 42. Universal Mind™
  43. 43. Universal Mind™
  44. 44. Universal Mind™
  45. 45. Universal Mind™
  46. 46. Universal Mind™
  47. 47. Universal Mind™
  48. 48. Universal Mind™
  49. 49. Universal Mind™
  50. 50. Universal Mind™
  51. 51. Universal Mind™
  52. 52. Universal Mind™
  53. 53. Universal Mind™
  54. 54. Universal Mind™
  55. 55. Universal Mind™ 4. graphic and interaction design
  56. 56. Universal Mind™ 5. prototypes
  57. 57. Universal Mind™ fluidui.com EXCELLENT on-device wireframe and prototyping tool!
  58. 58. Universal Mind™
  59. 59. Universal Mind™ screen shots of fluid
  60. 60. Universal Mind™
  61. 61. Universal Mind™ 6. test and iterate!
  62. 62. Universal Mind™ take aways: • Design challenge big... tech challenge not as big • Focus on users • Focus on context • Mobile First • Explore many options in wireframes • Test, test, test! • Consider native, wrapper, or HTML (or combo)
  63. 63. Universal Mind™ workshop! • Designing Elegant UX Across Devices and Platforms • 9-5 Wednesday
  64. 64. Universal Mind™ :)- Erik Loehfelm EVP of User Experience, Universal Mind @eloehfelm erik.loehfelm@universalmind.com

×