Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing The Contextual Interface GLSEC 13

Designing The Contextual Interface GLSEC 13

More Decks by Joe Johnston VP, Experience Innovation

Other Decks in Design

Transcript

  1. Contextual Design | Joe Johnston | @merhl | #ContextualDesign 3

    Who? Director of UX Director of R&D Universal Mind @merhl universalmind.com merhl.com
  2. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Broadly,

    context can be defined as ‘the interrelated conditions in which something exists or occurs’ So what the hell does that mean? 5
  3. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Mobile

    First 6 Responsive Web Design Contextual Design Think geo location, wifi networks, time based, even calendar aware design.
  4. Contextual Design | Joe Johnston | @merhl | #ContextualDesign 1.

    What is the user trying to accomplish at that moment. 7 2. What are they trying to accomplish it on. 3. Where are they trying to accomplish it.
  5. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Source:

    “The New Multi-screen World: Understanding Cross-platform Consumer Behavior,”Google, August, 2012, http://services.google.com/fh/files/misc/multiscreenworld_final.pdf Anytime and Everywhere
  6. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Read

    it Later (now Pocket) iPhone Users 9 Morning Commute Work Commute Evening Source: “When People Use Different Devices,” Luke Wroblewski, November 22, 2011
  7. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Read

    it Later (now Pocket) iPad Users 10 Morning Commute Work Commute Evening Source: “When People Use Different Devices,” Luke Wroblewski, November 22, 2011
  8. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Don’t

    remove content, progressively enhance it. 11
  9. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Baby

    Carrots App In it, you play as a helmeted dude, riding a rocket-powered shopping cart that's REALLY powered by baby carrots. Source: http://itunes.apple.com/us/app/xtreme-xrunch-kart/id390552979?mt=8
  10. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Location

    is context. RT @andrewmaier: .@gem_ray I wish the iPhone dictionary was location aware so it'd pick up street names. 15 Source: Andrew Maier @andrewmaier, Twitter, May 7th, 2012.
  11. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Multi-Screen

    Context Precious, a studio based in Hamburg, Germany published a collection of additional multiscreen categories and scenarios to help understand and define strategies for the multiscreen world. Source: http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
  12. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Mobile

    != Low download speed 19 Context != Intent Big Mother != Big Brother
  13. Contextual Design | Joe Johnston | @merhl | #ContextualDesign The

    “Just Right” Experience The Goldilocks Principle Just Right Satisfaction http://en.wikipedia.org/wiki/Goldilocks_principle
  14. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Target

    knows before it shows. Source: http://www.forbes.com/sites/kashmirhill/2012/02/16/how-target-figured-out-a-teen-girl-was-pregnant-before-her-father-did/
  15. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Pay

    with Square 23 + Geo Based payment in every Starbucks. http://www.nytimes.com/2012/08/08/technology/starbucks-and-square-to-team-up.html
  16. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Evernote

    24 Evernote for the iPhone takes any calendar entry and adds that to the title of any new note.
  17. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Passbook

    25 Passbook allows 3rd party companies the ability to create tickets and store them in one location on the users device.
  18. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Fashion

    Like 27 Fashion retailer C&A in Europe started a new initiative called Fashion Like allows people to 'like' certain items of clothing on the company's Facebook page, and these clicks are collected and displayed on the relevant clothes rack in real-time. Source: http://mobile.theverge.com/2012/5/6/3002270/fashion-like-facebook-brazil-cea-clothes
  19. Contextual Design | Joe Johnston | @merhl | #ContextualDesign AllRecipes

    AllRecipes is an example of a continuous multiscreen experience Source: http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
  20. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Chameleon

    30 Chameleon is an Android Tablet Home Screen that changes to fit your lifestyle. Chameleon Home Screens can be set up based on GPS locations, WiFi networks and time ranges, allowing you to define which Home Screen is the most relevant for the situation. Source: http://www.kickstarter.com/projects/gaborvida/chameleon-a-better-home-screen-for-your-android-ta
  21. Contextual Design | Joe Johnston | @merhl | #ContextualDesign 31

    Source: http://www.google.com/landing/now/
  22. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Context-aware

    computing 32 A TV remote control can collect data on how the remote is held by different users and build profiles based on that. Such a remote, of which Intel showed a prototype at the conference, could identify who’s holding the remote and offer recommendations for TV shows based on that. Source: http://www.wired.com/gadgetlab/2010/09/context-aware-computing/
  23. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Touché

    Source: Read more at http://venturebeat.com/2012/05/04/amazing-new-touch-technology-could-revolutionize-smartphones-doorknobs-your-sofa/#vXMIiAUaemwOlsO9.99
  24. Contextual Design | Joe Johnston | @merhl | #ContextualDesign Gesture

    Based Content Sharing 34 Source: http://www.universalmind.com/mindshare/entry/gesture-based-content-sharing-the-new-retail-customer-experience