Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)

2. Wolfram Nagel Senior UX Designer (TeamViewer) UI Architecture UX Design and Resarch Author „Multiscreen UX Design“ CMS and Content Design Design Methods Finder Jobs to be Done Twitter:@wolframnagel#Multiscreen #UX@msxbook @dmfndr

3. Remote Access Remote Support Remote Maintenance Home Office Online Meetings Online Meetings Online Collaboration Screen Sharing Video calls (with up to 300 people) Free for up to 5 participants www.blizz.com

4. www.blizz.com

5. https://medium.com/@wolframnagel/reworking-the-meeting-user-interface-of-blizz-6441292e1408

6. Device / Screen Context of Use User Strategies and Examples Article:https://medium.com/@wolframnagel/multiscreen-ux-design-3e17d1f0731

7. Multiscreen From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)

8. Margaret Brown Kelly AdamsBarbara Stewart Melissa Anderson Andrew Collins Mark Hudson Robert Sullivan Larry Newton User Prototypes

9. Mark Hudson (Trend user) aged 35, single | event manager, secondary school

10. MODEOFU SE S ITUATION Context of use ENVIRONMENT

11. mobile context of use

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 From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)

13. Parallel, additional information on the second screen. (http://www.designbynotion.com/metamirror-next-generation-tv)

14. With Apple AirPlay (and Apple TV) you can change devices in the middle of a film and continue obtaining information on another screen. The film is shifted from one (e.g., the iPhone) to another device (e.g., the TV). → http://www.youtube.com/watch?v=sPuAiA4O344

15. With the TeamViewer QuickSupport smartphone app you can remotely control, monitor, and maintain other computers or mobile devices.

16. Flight booking on the laptop, flight information and boarding pass via smartphone, notifications and status updates on the smartwatch.

17. AllRecipes: Search for recipes and add ingredients to the shopping list. Cook- and user-friendly iPad app with big fonts and buttons.

18. Tado Smart Thermostat: Heating system remote controlled via smarthpone app or browser

19. With the slot car racing game »Racer« you can use several screens to expand the race track. (http://g.co/racer).

20. »Llévalos a la escuela« (ING DIRECT / UNICEF). Hold smartphone over the orange area. One by one the children come off the website and jump into the phone in order to go to school. → http://www.llevalosalaescuela.com/en

21. Applications (e.g., smartphone apps) should generally offer the same functionality across various platforms. That was previously not the case with the Facebook apps for the iPhone and Android due to the different smartphones and operating systems (Workman, 2011).

22. Zeebox (since 2014 beamly): Interactive social networking and social TV service for mobile devices

23. Communification and Gamification: Example Nike+ mit iPhone app, social network itegration, own community and gamification features.

24. Microjoyment (Micro UX) example. With the mytaxi app you can find and order a nearbby taxi. Reduced interface for the watch screen. At the end of the taxi ride the passenger can easily rate the taxi driver and pay by one tap on his watch (cf. mytaxi, 2015).

25. Hybrid media example PhoneBook: Combination of a digitale und analogue medium. For every page, there is a suitable little background film. (http://www.creativeapplications.net/iphone/phonebook-ride-ride-iphone).

26. Information is translatet into speech. Apple CarPlay and Siri Courtesy of Zac Hall (9to5mac) and Ted Kritsonis (mobilesyrup) https://9to5mac.com/2015/09/22/ios-9-carplay-walkthrough / http://mobilesyrup.com/2015/10/19/apple-carplay-review/

27. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen More about coherent interfaces and smart content via www.msxbook.com/CDUIM and www.msxbook.com/CDUIMtxt

28. Selection of target channels, devices and touchpoints Example „New York Times“ article

29. Content Design and UI Mapping in a nutshell:https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff

30. 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 Building block principle brick type target system brick group

31. Article:Content Design and UI Mapping in a nutshell https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff

32. LARGE Medium Small

33. Content flow 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 The future of content management (2014) / https://medium.com/@wolframnagel/next-generation-information-experience-trends-und-herausforderungen-von-morgen-9929b17d8b5e

34. www.designmethodsfinder.com

35. Design Methods FTW – https://medium.com/@wolframnagel/design-methods-ftw-ddf5d8033d06

36. Design Methods FTW – https://medium.com/@wolframnagel/design-methods-ftw-ddf5d8033d06

37. http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/ https://strategyn.com/jobs-to-be-done/jobs-to-be-done-theory/ * Or a shelf on the wall or rather a storage option for their books. People don‘t want a quarter-inch drill, they want a quarter-inch hole.* Theodore Levitt

38. Taken from: Martin Pattera, Managing Partner at STRATEGYN Source: https://de.slideshare.net/coliquio/coliquio-summit-the-path-to-market-leadership-turn-customer-input-into-innovation

39. Via Quantify Your Customer’s Unmet Needs https://jobs-to-be-done.com/quantify-your-customers-unmet-needs-fda5b20fce54

40. Bringing Together Personas, Jobs To Be Done, and Customer Journey Maps https://www.cooper.com/journal/2017/1/bringing-together-personas-jobs-to-be-done-and-customer-journey-maps

41. Content structure of a persona template with a Jobs-to-be-Done focus. Specific context and usage related traits are needed to understand the user‘s specific needs and to be sure to ask the right users. Test users and interviewees are selected based on this information.

42. via »Replacing The User Story With The Job Story« https://jtbd.info/replacing-the-user-story-with-the-job-story-af7cdee10c27

43. Focus areas Three main aspects are relevant: User, Journey and Job Story (inspired by Cooper »Bringing Together Personas, Jobs To Be Done, and Customer Journey Maps«)

44. User Focussed Decision Process (draft) via https://medium.com/@wolframnagel/reworking-the-meeting-user-interface-of-blizz-6441292e1408

45. Questions? Slides: www.slideshare.net/wolframnagel Articles: https://medium.com/@wolframnagel E-mail: hello@wolframnagel.com Twitter: @wolframnagel Web: www.wolframnagel.com