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.

Multiscreen UX Design - Developing for a multitude of devices (summary)

464 views

Published on

We live in a Multiscreen-World. Everything needs to work across devices. This requires a holistic strategy. +++ People today use technology on different devices in different locations. Users expect to access information on all relevant screens and across multiple channels through smartphones, tablets, laptops/desktops, smart (internet-connected) TVs, and other devices, such as smartwatches for example. Multiscreen is no longer a nice add-on, it’s a requirement. In this environment, user experience needs to cater to multiple devices. +++ These slides are a compact summary of the book. More via www.msxbook.com/en

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Multiscreen UX Design - Developing for a multitude of devices (summary)

  1. 1. MULTISCREEN UX DESIGN Developing For A Multitude Of Devices Executive summary (compact) Wolfram Nagel | SETU GmbH (Germany) All rights reserved.
  2. 2. Wolfram Nagel Senior UX Designer / Head of UX Multiscreen, Content Design, UI Architecture Author „Multiscreen UX Design“ Co-Initiator Design Methoden Finder www.designmethodenfinder.de
  3. 3. We are a nation of multiscreeners. Most of media time today is spent in front of a screen. Google Study 2012 http://www.thinkwithgoogle.com/research-studies/the-new-multi-screen-world-study.html
  4. 4. Device / Screen Context of Use User Strategies and Examples From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295)
  5. 5. Screens, Users, and Context of Use
  6. 6. From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295) Multiscreen
  7. 7. 10 – 30 cm 30 – 50 cm 1 m 3 m Distance User <––> Screen
  8. 8. http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/ http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/ People use any platform to do anything. Giles Colborne
  9. 9. Margaret Brown Kelly AdamsBarbara Stewart Melissa Anderson Andrew Collins Mark Hudson Robert Sullivan Larry Newton User Prototypes
  10. 10. MODEOFUS E S ITUATION ENVIRONMENT Context of use
  11. 11. Strategies and examples
  12. 12. Microjoyment Hybrid MediaGamification Storyfication Emotionality Screen Sharing Coherence Fluidity Smart Content Mobile First Simultaneity Social TV Device Shifting Complementarity strategies and examples Synchronisation Mashability Communification
  13. 13. Mobile First It is advisable to concentrate on the most important device first. The smallest screen forces a meaningful structure of information.
  14. 14. SimultanEITY Different devices or information services are used simultaneously. Different pieces of information may complement one another.
  15. 15. Social TV Spatially separated viewers can quasi watch TV together or directly participate. Broadcasts are recommended by user profiles.
  16. 16. Device Shifting The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  17. 17. Complementarity The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  18. 18. Synchronisation Information is kept in sync and up-to-date across devices.
  19. 19. Screen Sharing The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  20. 20. Coherence Information is displayed in a manner that is device and screen independent, logical, and coherent. Individual features are optimised for device capabilities. (→ Responsive Design, Atomic Design, Content Design, Content UI Mapping, etc.)
  21. 21. Fluidity The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  22. 22. Smart Content Content should be as flexible as possible, to be easily used and published across different channels and devices.
  23. 23. Mashability The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  24. 24. Communification Social networking and creating a community can make an information service more attractive for the users. Users create, share, rate, and comment on content.
  25. 25. Gamification Game mechanics simulate a competitive environment. A game factor can motivate people if it is challenging and provides relevant goals.
  26. 26. Storyfication The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  27. 27. Emotionality A service is emotionally more attractive, if it is fun and supports a device fragmented daily routine.
  28. 28. Microjoyment The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  29. 29. Hybrid Media The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  30. 30. Josh Clark https://twitter.com/#!/globalmoxie/status/192276891913297920 A part of Multi-device strategy is simply embracing the uncertainty.
  31. 31. Content Design and UI Mapping
  32. 32. Design from the Content out. Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  33. 33. User Content Rules UI Interfaces (API) Four core areas (+ the user, of course)
  34. 34. Selection of target channels, devices and touchpoints Example „New York Times“ article Instapaper Website (Smartphone) E-Mail (Sharing) Facebook (Sharing) Facebook (Timeline) Twitter (Sharing) Twitter (with Summary) Twitter (Tweet only) Smartwatch (Push Notification) Smartphone WhatsApp (News-Abo) iPhone App Desktop (Website) Tablet (Video Content)
  35. 35. If you have a bunch of unsorted elements (e.g. LEGO bricks, UI elements or a lot of content) take the time to organize these parts. Make an inventory. Then you can create the whole in a more deliberate and efficient way. → www.msxbook.com/CDUIMtxt
  36. 36. name (1 day ticket) price date of purchase [...] TICKET (TYPE) title date description [...] EVENT title date body [...] NEWS ITEM name photo biography URL company [...] SPEAKER name (e.g. usability) description time [...] SESSION title abstract description start time duration [...] PRESENTATION name address URL [...] VENUE held at featured in valid for about featured in presented by title abstract description start time duration max. attendee prior knowledge [...] WORKSHOP variation of Content Model
  37. 37. 1 2 4 53 brickLEGO bumper bar truck fire truckdriving cab CONTENT USER INTERFACE ELEMENT COMPONENT TYPE INSTANCE / OBJECT SEGMENT generic / strukture (MADE from) concret / specific (IS) atomAtomic Design molecule template pageorganism real content information object incl. tone of voice real page instance of the template incl. visual design content wireframe article, recipe, application for leave, product specification (semantic structure) UI template (+IxD) touchpoint-dependent and preview-relevant module group text section, paragraph, chapter, rubric layout area (e.g. header with search form, logo, navigation) brick group (combination of smallest possible elements) content module image + caption quote + author teaser with headline, image and description search form (consisting of label, input field and button) smallest possible unit / brick title, subtitle, description, reference, date, image, caption, metainfo, author label, input field, button correlation Five-Step Building Block Principle
  38. 38. UI MAPPING Structured content is mapped for presentation in various target channels. content structure mapping Content from any source is mapped to defined content structure. 1 2 3 Input manage Output various sources various channelsContent Hub Three-Step Content Flow
  39. 39. Content UI Mapping: More about the topic via → www.msxbook.com/CDUIM and www.msxbook.com/CDUIMtxt
  40. 40. The essence of content design is to create units of content that can address diverse needs successfully. Michael Andrews http://storyneedle.com/what-is-content-design/
  41. 41. SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen) → www.setusoft.de
  42. 42. Multiscreen Books Multiscreen UX Design (2015) Publisher: Morgan Kaufmann ISBN: 978-0128027295 Multiscreen Experience Design (2013) Publsiher: digiparden (SETU GmbH) ISBN: 978-3-9815872-0-3 www.multiscreen-ux-design.com
  43. 43. Thank you! Slides: msxbook.com/muxdsummary Article: msxbook.com/muxdtxt E-mail: hello@wolframnagel.com Twitter: @wolframnagel Website: wolframnagel.com

×