Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

Wolfram Nagel is a Senior User Experience Designer, UI Architect and Concept Developer. He's mainly responsible for conception and design in close collaboration with product owners, product managers, front-end and back-end developers.

His goal is to solve users’ problems, consider and address strategic and economic goals, and to help developers to implement potential solutions in a pragmatic and feasible way.

This rough overview on the focus areas of Wolfram Nagel has been presented at the "UX Thinking Seminar" by artop (https://www.artop.de/akademie/seminare/ux-thinking/)

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

  1. 1. Multiscreen and beyond My Topics and focus areas UX Thinking Kaminabend,artop 15.September 2018 Wolfram Nagel / UX Designer All rights reserved.
  2. 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. 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. 4. www.blizz.com
  5. 5. https://medium.com/@wolframnagel/reworking-the-meeting-user-interface-of-blizz-6441292e1408
  6. 6. Device / Screen Context of Use User Strategies and Examples Article:https://medium.com/@wolframnagel/multiscreen-ux-design-3e17d1f0731
  7. 7. Multiscreen From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)
  8. 8. Margaret Brown Kelly AdamsBarbara Stewart Melissa Anderson Andrew Collins Mark Hudson Robert Sullivan Larry Newton User Prototypes
  9. 9. Mark Hudson (Trend user) aged 35, single | event manager, secondary school
  11. 11. mobile context of use
  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 From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)
  13. 13. Parallel, additional information on the second screen. (http://www.designbynotion.com/metamirror-next-generation-tv)
  14. 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. 15. With the TeamViewer QuickSupport smartphone app you can remotely control, monitor, and maintain other computers or mobile devices.
  16. 16. Flight booking on the laptop, flight information and boarding pass via smartphone, notifications and status updates on the smartwatch.
  17. 17. AllRecipes: Search for recipes and add ingredients to the shopping list. Cook- and user-friendly iPad app with big fonts and buttons.
  18. 18. Tado Smart Thermostat: Heating system remote controlled via smarthpone app or browser
  19. 19. With the slot car racing game »Racer« you can use several screens to expand the race track. (http://g.co/racer).
  20. 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. 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. 22. Zeebox (since 2014 beamly): Interactive social networking and social TV service for mobile devices
  23. 23. Communification and Gamification: Example Nike+ mit iPhone app, social network itegration, own community and gamification features.
  24. 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. 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. 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. 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. 28. Selection of target channels, devices and touchpoints Example „New York Times“ article
  29. 29. Content Design and UI Mapping in a nutshell:https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff
  30. 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. 31. Article:Content Design and UI Mapping in a nutshell https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff
  32. 32. LARGE Medium Small
  33. 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. 34. www.designmethodsfinder.com
  35. 35. Design Methods FTW – https://medium.com/@wolframnagel/design-methods-ftw-ddf5d8033d06
  36. 36. Design Methods FTW – https://medium.com/@wolframnagel/design-methods-ftw-ddf5d8033d06
  37. 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. 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. 39. Via Quantify Your Customer’s Unmet Needs https://jobs-to-be-done.com/quantify-your-customers-unmet-needs-fda5b20fce54
  40. 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. 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. 42. via »Replacing The User Story With The Job Story« https://jtbd.info/replacing-the-user-story-with-the-job-story-af7cdee10c27
  43. 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. 44. User Focussed Decision Process (draft) via https://medium.com/@wolframnagel/reworking-the-meeting-user-interface-of-blizz-6441292e1408
  45. 45. Questions? Slides: www.slideshare.net/wolframnagel Articles: https://medium.com/@wolframnagel E-mail: hello@wolframnagel.com Twitter: @wolframnagel Web: www.wolframnagel.com