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.

VR and AR User Experience Design

195 views

Published on

my presentation from the - UX-Congress, 2017 Frankfurt, November 2nd 2017. My collected experience from User Experience design for VR and AR.

Published in: Design
  • Be the first to comment

VR and AR User Experience Design

  1. 1. VR / AR UX User Experience Design Joerg Osarek IT-avantgardist, Business-IT-Architect Skilltower Institute
  2. 2. © Skilltower Institute, 20172 User Experience Design in für Virtual- & Augmented Reality ▪ About me ▪ Great Power, Great Responsibility ▪ The Killer App of The 3 waves: VR/AR/USEMIR or the AR Cloud ▪ Examples of new, natural user interfaces ▪ Rules and tips ▪ More Examples ▪ Get Practice! Demo Time Alien ships created by GordonsArca.de
  3. 3. © Skilltower Institute, 20173 User Experience Design in für Virtual- & Augmented Reality About me
  4. 4. Inaltlich gut. Langweilig vorgetragen! http://training.vr.skilltower.com
  5. 5. 5 how to wake the superhero inside you "It seems that I've been living two lifes. One life, I am an IT consultant for a respectable software company. I have a social security number, pay my taxes and I ... ... am sent by my wife to carry out the garbage. The other life is lived in my Gordon Cave where I go by the alias Chuck Ian Gordon trying to help mankind qualify for the 22nd century. "
  6. 6. Hintergrund:  Science Fiction Autor  Cinematic VR  Virtual Reality Analytics  VR/AR Business  Immersive Technology Alliance (ITA3D.com)  Mitgründer VR Meetup Frankfurt  Management  IT-avant-garde  VMware, Oracle, Linux  Mitgründer: www.its-people.de
  7. 7. You need Theory and Practice: 1. Try Connecting VR/AR to Enterprise Systems
  8. 8. www.Alex-Astronaut.com Connecting VR/AR to Enterprise Systems You need Theory and Practice: 2. Build
  9. 9. Connecting VR/AR to Enterprise Systems You need Theory and Practice: 3. Evangelize and Train
  10. 10. Connecting VR/AR to Enterprise Systems Customer VR Business Hands On Event and Presentation
  11. 11. © Skilltower Institute, 201711 User Experience Design in für Virtual- & Augmented Reality Great Power Great Responsibility
  12. 12. © Skilltower Institute, 201712 Virtual Reality: Die Macht der Immersion – des Eintauchens VR zieht harte Jungs in ihren Bann, wie kein anderes Medium. Die Reaktionen reichen von Entzücken bis zu blankem Horror. Selbst ausprobieren, z.B. mit Google Cardboard oder unser VR Meetup in Frankfurt besuchen. RollercoasterFreakout: https://youtu.be/Odax7F3tWhM Samsung VR Scare: https://youtu.be/_35pwjUMJUc 03 04 Video 1: 02:30- 03:56
  13. 13. © Skilltower Institute, 201713 Was bewirkt VR/AR 01.11.2017© its-people.de13 Der direkte Draht ins Gehirn! (Instinkte, Fight or Flight Response)
  14. 14. © Skilltower Institute, 201714 User Experience Design in für Virtual- & Augmented Reality The Killer App of The 3 waves: VR / AR / USEMIR (or the AR Cloud / platform)
  15. 15. © Skilltower Institute, 201715 What is the killer App of the WWW? And of GUIs?
  16. 16. © Skilltower Institute, 201716 What is the killer App of the WWW? And of GUIs? It is the platform!
  17. 17. Level up! Unsere User Experience ist in der Zukunft: USEMIR Ubiquitious SEnsory MIxed Reality
  18. 18. The AR-Cloud: The next User Interface Layer www.skilltower.com
  19. 19. © Skilltower Institute, 201719 User Experience Design in für Virtual- & Augmented Reality Examples of new, natural user interfaces Video 1: 04:00-Ende
  20. 20. © Skilltower Institute, 201720 2USEMIR: VR / AR UX Beispiele natürlicher Interfaces 05 UI = Sand + Beamer + Tiefen-Sensor https://youtu.be/9V-hr_88238
  21. 21. © Skilltower Institute, 201721 VR / AR UX Beispiele natürlicher Interfaces 04 https://www.youtube.com/watch?v=zxM4vN_4jJY AR Screen hackathon project Bilder: https://www.leapmotion.com/ Zwei Bilder links: eigene Aufnahmen immersed europe 2015, Murcia, Spain links: leap motion unten: Glove1 glove1vr.com (new: Avatar VR)
  22. 22. © Skilltower Institute, 201722 2USEMIR: Malen in VR - Glen Keane nutzt Google Tiltbrush 06 https://www.youtube.com/watch?v=GSbkn6mCfXE
  23. 23. © Skilltower Institute, 201723 2USEMIR: Die nächste Generation mobiler Geräte  Google gründete eine VR Unit + Google Cardboard + Google Jump / Daydream + YouTube VR / Spotlight Stories + ca.1.4 Milliarden Investment in MagicLeap 2014, 2015 Google + andere + autonome Autos  Apple gründete VR Unit + kaufte primesens + kaufte faceshift + stellte Doug Bowman ein + Pläne für autonome Autos Bildquelle: Project Tango website, Google.com
  24. 24. © Skilltower Institute, 201724 Connecting VR/AR to Enterprise Systems Deepframe: Realtime Mixed Reality from RealFiction Images: Presskit from: https://www.realfiction.com/solutions/mixed-reality/deepframe Video: https://www.youtube.com/watch?v=ShfGydxB5D8
  25. 25. © Skilltower Institute, 201725 2USEMIR: Real-Eyes Lichtfeld-Display ohne Headset/Brille 08 www.real-eyes.eu – eigene Aufnahmen. In Trainings-Video eingebettet.
  26. 26. © Skilltower Institute, 201726 www.real-eyes.eu – eigene Aufnahmen. In Trainings-Video eingebettet. 11 Stereo-Aufnahmen mit Fotogrammetrie in ein 3D-Modell zurückverwandelt. 2USEMIR: Real-Eyes Lichtfeld-Display ohne Headset/Brille 09
  27. 27. © Skilltower Institute, 201727 Volumetric Video: Light Field Camera from Raytrix, Kiel https://www.kapilendo.de/projekte/45c09e0f-7598-43d0-a05e-7f78627d740f# www.raytrix.de
  28. 28. © Skilltower Institute, 201728 2USEMIR: Fairy Lights – interaktives holographisches Plasma (SIGGRAPH) 06.2015 http://digitalnature.slis.tsukuba.ac.jp/2015/06/fairy-lights-in-femtoseconds/ https://www.youtube.com/watch?v=AoWi10YVmfE Large Plasma Holograms: https://www.youtube.com/watch?v=KfVS-npfVuY 10
  29. 29. © Skilltower Institute, 201729 VR/AR Analytics Images: www.retinad.io , cognitivevr.co + own VR Analytics prototype Robert Merki, CognitiveVR: We also provide users with a multitude of pre-built analytics calls. These include algorithms for detecting comfort, controller/HMD occlsion, VR performance, and even arm length of users. Robert Merki from cognitiveVR.co (Canada) holding my book – Selfie Image from Robert Sept.19th.2016
  30. 30. © Skilltower Institute, 201730 www.affectiva.com Emotion based Gaming and Emotion Analytics Emotion Analytics with PC webcam or Smartphone Connecting VR/AR to Enterprise Systems
  31. 31. © Skilltower Institute, 201731 Connecting VR/AR to Enterprise Systems USEMIR++ : Aktuelle Trends 2017 AI based Man-Machine-Voice- Interaction: • Amazon Echo (aka Alexa), Google Home, Apple (Siri-Box)…?, MS Cortona
  32. 32. © Skilltower Institute, 201732 Komponenten zukünftig erfolgreicher (Business)-Systeme = Die Digitalisierung ▪ Kopplung Immersiver und klassischer Systeme (VR/AR/USEMIR) ▪ Gesten- und Sprachsteuerung (natürlich) ▪ Behavioural Analytics ▪ AI-Komponenten, die Teilaufgaben übernehmen + klassisch programmierte Komponenten ▪ Automatisierung ▪ Flexible Neu-Kombination aufgrund Split-Tests, empirischer Vergleiche, (self optimizing) Connecting VR/AR to Enterprise Systems
  33. 33. © Skilltower Institute, 201733 User Experience Design in für Virtual- & Augmented Reality Rules and Tips
  34. 34. © Skilltower Institute, 201734 VR / AR UX – Grundlagen ISO 9241210 + Phantasie + Immersion  UX umfasst jedoch tatsächlich jegliche, auch nichtdigitale Produktinteraktion.  Vitruv → erster Architekt und Designer: Firmitas (Festigkeit), Utilitas (Nützlichkeit, Usability), Venustas (Schönheit)  Die EN ISO 9241 gilt nach EURechtsprechung auch als Standard zur Bewertung der Forderung nach Benutzerfreundlichkeit aus der Bildschirmarbeitsverordnung (BildscharbV).  User Experience wird auch in der ISO 9241210 beschrieben. .
  35. 35. © Skilltower Institute, 201735 Interaktivität und passives Konsumieren  FMX 2015: Storytelling in VR  FMX 2016: Bauen von Welten, damit der Nutzer entdecken, entscheiden, interagieren kann. "Immersive storytelling: ERZÄHLEN ist das tote Wort. Es geht darum, eine ERFAHRUNG (Experience) zu erschaffen, nicht eine Geschichte zu erzählen." Andrew Cochrane, Mirada Studios, FMX 2016 Low poly planet von GordonsArca.de für das Alex Astronaut ABC
  36. 36. © Skilltower Institute, 201736 UX Beispiele aus dem echten Leben
  37. 37. © Skilltower Institute, 201737 UX Beispiele aus dem echten Leben Wie erschafft man hier eine positive User Experience?
  38. 38. © Skilltower Institute, 201738 UX Beispiele aus dem echten Leben Wie erschafft man hier eine positive User Experience? Eine Gruppe Künstler hat in Gaza-Stadt zahlreiche Wände, Türschwellen und Fassaden angemalt. Dieser Junge sitzt auf einer Mauer, auf die ein Elefant gemalt wurde. Quelle: 23.12.2015, https://www.tagesschau.de/multimedia/bilder/blick punkte-1593.html | Bild: Eigene Zeichnung auf Basis des Tagesschau-Fotos
  39. 39. © Skilltower Institute, 201739 Die UX entsteht im Kopf des Erfahrenden! UX Beispiele aus dem echten Leben Wie erschafft man hier eine positive User Experience?
  40. 40. © Skilltower Institute, 201740 Die wichtigsten Erfolgsfaktoren für gute VR/AR-UX ▪ Content / Experience ▪ Presence ▪ Agency
  41. 41. © Skilltower Institute, 201741 Die wichtigsten Erfolgsfaktoren für gute VR/AR-UX ▪ Content / Experience ▪ Presence ▪ Agency Voice AI bidirectional Physics Sync many VR-RR- connections Latency VR/AR/ Emotion Analytics
  42. 42. www.skilltower.com Success factors for profitable VR/AR Business Balance those aspects: Connecting VR/AR to Enterprise Systems - Wow Effect vanishes! VR/AR -> productivity tool - Provide attractive “State of the Art” continuously - Every VR/AR application at it’s place (cost-benefit- analysis). Some/many things will better be kept traditionally. Others will give you huge leverages. Story: engaging, absorbing, use surprises. Latency (90+fps), Parallax (Presence) reaction of the virtual world, interactivity (Agency) compelling (360° vs. Realtime Game Engine) Must estimate with changes in Architecture from the beginning. VR/AR are moving targets right now. Strategy: - lose coupling of systems - Intermediate tiers - Short periods for small projects - Enhancing your business model - Bidirectional real time exchange with your enterprise systems - Automation e.g.: - VR/AR Analytics <-> Data Warehouse <-> CRM Presence Agency Valueproposition Cost effectiveness, sustainability Con- tent $
  43. 43. © Skilltower Institute, 201743 Storyboards in VR – wie zeichnet man Immersion? Option A: Action basiert Gordon's Arcade: VRiminalZ VR Storyboard Testrender Persönlicher Raum: betrifft den Zuschauer, kann interaktiv sein. So weit wie die Hände reichen, ohne seine Füße zu bewegen. Action Raum: Außerhalb der Reichweiter des Zuschauers. Raum, in dem die Geschichte spielt. Kulisse: Raum außerhalb der Geschichte. Umgebung, Tageszeit, Hintergrund.
  44. 44. © Skilltower Institute, 201744 VR UX Leitlinien – www.twentyMilliSeconds.com  John Carmack's Latency Mitigation Strategies  Touch Typing Survey  Recenter the HMD Before Starting Your Application  Conducting User Tests With an Oculus Rift  Virtual Reality is an Advertiser's Dreamland  LooktoSelect Interface: Benefits and Drawbacks  How Lucky's Tale Avoids Making Users Sick  Here's Why Speakers are an "Evolutionary Dead End" for Virtual Reality  Learnings from Unreal Engine Integration & Demos  Cockpits Work  Users Lie in VR Usability Tests (when feeling sick)  Richard Yao Human Visual System & the Rift  Configuration Options Proliferate ▪ 3D Object Tracking Works ▪ Loading Screens Shouldn't Move With You ▪ UI Ideas For Choosing One From Many Items ▪ Headsets Provide a Large Increase in Addressable Screen Space ▪ Unrealistic Avatars Break Immersion - BUT! Uncanny Valley VR Effect! ▪ What Oculus Thinks the Rift Experience Looks Like ▪ Porting is Harder Than You Think ▪ What Determines a Good Oculus Share Rating? ▪ Collisions Cause Motion Sickness ▪ Sign up for user testing in San Francisco ▪ Likely User Interface Mistakes in Coming Years of VR ▪ Decoupling of Aim and Gaze in Virtual Reality Systems ▪ Measuring Motion Sickness ▪ Constraints of Writing Software for Full World Simulation
  45. 45. © Skilltower Institute, 201745 VR UX Leitlinien – Eigene Aufstellung  (fast) nie den Horizont neigen  Vorsicht beim Bewegen der Kamera  Synchronisieren körperlicher Wahrnehmungen mit der Experience (vermeidet Übelkeit)  Führen Sie das Auge (sonar)  Schneiden=Schließen der Augen (erhält Agency)  Geschwindigkeit in VR niedriger.  Ein Avatar macht einen Unterschied  Bezugsrahmen helfen (Cockpits) Field trip to mars: https://www.youtube.com/watch? v=a_bSOwFWu-A VR-Rollercoaster images from: vrcoaster.de
  46. 46. © Skilltower Institute, 201746 Archäologischer Burgbesuch erstellt von David Finsterwalder mit Fotogrammetrie: www.realities.io - Eigenes Bild, aufgenommen Immersed Euroope, Sep.2015 Murcia, Spanien Tricks mit Teleportation und Zeitlupe helfen. * Bethesda hat diese Erfahrung mit Doom VR auch gemacht. Lerneffekt: Wir alle müssen versuchen, testen, lernen, optimieren.* Doom VR Schwierigkeiten gelöst: http://www.ign.com/articles/2016/08/04/quakecon-2016-movement-takes-doom-vr-to-a-new-level  (fast) nie den Horizont neigen  Vorsicht beim Bewegen der Kamera  Synchronisieren körperlicher Wahrnehmungen mit der Experience (vermeidet Übelkeit)  Führen Sie das Auge (sonar)  Schneiden=Schließen der Augen (erhält Agency)  Geschwindigkeit in VR niedriger.  Ein Avatar macht einen Unterschied  Bezugsrahmen helfen (Cockpits) VR UX Leitlinien – Eigene Aufstellung
  47. 47. © Skilltower Institute, 201747  Wir führen unsere Zuschauer in eine vollständig unbekannte Situation. Onboarding und Offboarding sind sehr wichtig. Lernen von Freizeit-Parks.  Viel lernen von User-Reaktionen mit VR Analytics oder VR Cloud Testing: www.fishbowlvr.com  Warten, bis der Nutzer bereit ist – z.B. den Kopf dreht, bevor die Experience weitergeht.  Bei UX VR kommt es auf den Zweck an. Für einen 1st Person Shooter will ich eine andere UX als für Guided Meditation als für eine Business Anwendung. VR UX Leitlinien – Eigene Aufstellung  (fast) nie den Horizont neigen  Vorsicht beim Bewegen der Kamera  Synchronisieren körperlicher Wahrnehmungen mit der Experience (vermeidet Übelkeit)  Führen Sie das Auge (sonar)  Schneiden=Schließen der Augen (erhält Agency)  Geschwindigkeit in VR niedriger.  Ein Avatar macht einen Unterschied  Bezugsrahmen helfen (Cockpits)
  48. 48. © Skilltower Institute, 201748 Sync your worlds! the more connections you have between artificial and real world the more intense the user experience Chuck Gordon presenting at Live VR MoCap Stage of Metric Minds, Frankfurt
  49. 49. © Skilltower Institute, 201749 VR/AR UX Leitlinien Versuchen und erstellen Sie selbst viel Testen Sie viel mit vielen Usern Analysieren und lernen Sie 3 goldene Regeln erstellen Sie natürliche intuitive Interfaces Machen Sie niemanden krank Erschrecken Sie niemanden
  50. 50. © Skilltower Institute, 201750 User Experience Design in für Virtual- & Augmented Reality More Examples V02_englishChurch.mp4 V03_MasterPieceVR.mp4 V04_recRoom.mp4
  51. 51. © Skilltower Institute, 201751 VR / AR UX Zusammenfassung  Erzeugen Sie natürliche Interfaces. Testen Sie viel selbst. Wir müssen uns von Web-Designern zu Umgebungs-Designern entwickeln.  Erstellen und nutzen Sie Erfahrungen weise. – Große Macht bedeutet große Verantwortung.  Wir steuern auf eine USEMIR Welt zu (AR-Cloud).  Vergessen Sie nicht die echte Welt. Ab und zu ausschalten und spazieren gehen.
  52. 52. © Skilltower Institute, 201752 User Experience Design in für Virtual- & Augmented Reality Get Practice! Demo Time…
  53. 53. © Skilltower Institute, 201653 Kontakt und weitere Informationen zu VR / AR UX-Design Skilltower Institute Jörg Osarek Gründer und Inhaber Triftstr. 30 D-61350 Bad Homburg Germany mailto:joerg.osarek@skilltower.com Tel.: +49(0)151-23 0 24 333 www.skilltower.com
  54. 54. © Skilltower Institute, 201754 Video Referenz-Liste 01 Surfer auf der Straße: https://youtu.be/Oi6Mx38yMTU 02 Ausflippen in Achterbahn: https://youtu.be/Odax7F3tWhM 03 Samsung VR Panik: https://youtu.be/_35pwjUMJUc 03b HTC Vive Bogen: https://youtu.be/yWgbGAx3P-M?t=1m48s 04 AR Screen Hackathon: https://www.youtube.com/watch?v=zxM4vN_4jJY 04b Kinder reagieren auf Henry: https://www.youtube.com/watch?v=ROtbyIVvidQ 05 Sandkasten GUI: https://youtu.be/9V-hr_88238 06 Glen Keane malt in VR mit Tiltbrush: https://www.youtube.com/watch?v=GSbkn6mCfXE 07 Joerg Osarek malt in VR: embedded in Training Video 08 Lichtfeld Display: embedded in Training Video 09 3D Modell aus dem Lichtfeld: embedded in Training Video 10a Fairy Lights interaktives Plasma Hologramm: https://www.youtube.com/watch?v=AoWi10YVmfE 10b Großes Plasma Hologramm: https://www.youtube.com/watch?v=KfVS-npfVuY 11 Alex Astronaut ABC Pluto Flyby: https://youtu.be/28_4XBvQfXI 11b North Face Korea Experience: https://youtu.be/FSfkE4emoBE 11c Merrel Trailscape: https://www.youtube.com/watch?v=efd6WhPmTyU 12 Special Delivery von Aardman: https://youtu.be/XiDRZfeL_hc
  55. 55. Demo Videos UX-Congress (all in this playlist: https://www.youtube.com/watch?v=Zjhue7bwgao&list=PLzHLdZLOon_qC0u 3odmhGtzVUZYJcUsRV ) SteamVR English Church: https://youtu.be/LlGFdLDffhk RecRoom Session: https://youtu.be/Zjhue7bwgao MasterpieceVR Session (12min): https://youtu.be/gqQKRrmYUQ4

×