Wolfgang Henseler Sensory Minds GmbH. Von grafischen zu natürlichen User Interfaces

Transkript

1 Wolfgang Henseler Sensory Minds GmbH Von grafischen zu natürlichen User Interfaces

2 NATURAL USER INTERFACE DESIGN Von grafischen zu natürlichen User Interfaces

3 It s all about people and changing their minds. Steve Jobs 2007

4 PHÄNOMENE DIE UNSER DENKEN VERÄNDERN (WERDEN).

5 IMMER JÜNGER UND FRÜHER Rapider Wandel von Laptop zu Tablet und Smartphone Nutzung Einfach und intuitiv

6 HEUTIGE HERAUSFORDRUNGEN NFC Smart TV Location Based Services RFID-Technologies App Stores Connected Marketing Natural User Interfaces Cloud Services MobAdds Multitouch-Computing Dating Platforms Responsive Design APPs Tablets Social Commerce ipad Web 2.0 Mobile Shopping Augmented Reality Crowd Sourcing NEW TECHNOLOGIES NEW MARKETPLACES Social funding Intermedia PC Goggles Internet-of-Things Brand Ambassadors Pervasive Computing Micro credits Crowd Shopping Real Time Data Visualization Digital Mediators Real Time Web Internet Based Sales Cloud Services Homeshopping TV Virtual Agents Mixed Media Reality Relationship brands Multiuser-Interfaces Shopping Communities RAPIDE VERÄNDERUNGEN Occupy... Social Innovation Piraten-Partei New Mass Affluents Digital Natives Cloud Services Fukushima Generation Porn Shit storms BYOD Smart Natives Kohorten-Effekt Smart Shopping Mobile Commerce ebusiness 2.0 Generation Thumb Quantifier Generation Greis ROPO NEW MARKET SITUATIONS Creative Class NEW TARGET GROUPS Coopetition App Economy Lohas Experience Economy Stuttgart 21 Generation Smartphone Ethno Groups Crowd Funding Eco Markets Financial crisis China 2.0 Generation Facebook Generation Y New Greens Innovation & Creativity Markets Smart Economy Generation App Greenovators

7 HEUTIGE HERAUSFORDRUNGEN NFC Smart TV Location Based Services RFID-Technologies App Stores Connected Marketing Natural User Interfaces Cloud Services MobAdds Multitouch-Computing Dating Platforms Responsive Design Social Commerce APPs Tablets ipad Web 2.0 Mobile Shopping Augmented Reality Crowd Sourcing NEW TECHNOLOGIES NEW MARKETPLACES Social funding Intermedia PC Goggles Internet-of-Things Brand Ambassadors Pervasive Computing Micro credits Crowd Shopping Digital Mediators Real Time Data Visualization Real Time Web Internet Based Sales Cloud Services Homeshopping TV Virtual Agents Mixed Media Reality Relationship brands Multiuser-Interfaces Shopping Communities RAPIDE VERÄNDERUNGEN Occupy... Social Innovation Piraten-Partei New Mass Affluents Digital Natives Cloud Services Fukushima Generation Porn Shit storms BYOD Smart Natives Kohorten-Effekt Smart Shopping Mobile Commerce ebusiness 2.0 Generation Thumb Quantifier Generation Greis ROPO NEW MARKET SITUATIONS Creative Class NEW TARGET GROUPS Coopetition App Economy Lohas Experience Economy Stuttgart 21 Generation Smartphone Ethno Groups Crowd Funding Eco Markets Financial crisis China 2.0 Generation Facebook Generation Y New Greens Innovation & Creativity Markets Smart Economy Generation App Greenovators

8 Phänomene der Veränderung Der Wandel von GUI zu NUI

9 SCHRUMPFTECHNOLOGIE IM PERSONAL COMPUTING Konstante Gestern Heute Morgen Übermorgen Desktop PC Laptop PC Tablet PC Goggle PC Materiell Von der Maschine zum persönlichen Assistenten Immateriell MARKETING ON TOUR 2012 HAMBURG

10 PC S UND LAPTOPS (2012) WERDEN DURCH SMARTPHONES UND TABLETS ABGELÖST (2015) Bis 2015 Stationäre Geräte werden durch mobile Geräte ersetzt * Deutschland - McKinsey, Gartner Group, Boston Consulting et.al.

11 DIE INTERAKTION MIT DEM COMPUTER VERÄNDERT SICH Natürlich Unnatürlich Finger und Sprache ersetzen Maus und Cursor Touch und Gesten anstelle von Metaphern und Klicks

12 SCHRUMPFTECHNOLOGIE IM PERSONAL COMPUTING Gestern Heute Morgen Übermorgen Desktop PC Laptop PC Tablet PC Goggle PC

13 UNTERSCHIEDLICHE BEDIENKONZEPTE MS-DOS 1978 XEROX STAR 1980 WINDOWS XXX CLI GUI NUI Command Line Interface Graphical User Interface Natural User Interface PUI Personal User Interface MONATE WOCHEN SEKUNDEN Tastatur Tastatur und Maus Finger und Stimme MILLISEKUNDEN Multimodal

14 VERÄNDERUNG DER USABILITY ZIEL ZIEL ZIEL ZIEL START START START START CLI GUI NUI PUI MONATE WOCHEN SEKUNDEN MILLISEKUNDEN GERINGE USABILITY HOHE USABILITY

15 NUI = a Shift in Mind abstrakt metaphorisch natürlich

16 Phänomene der Veränderung Der Wandel von Webseite zu Webdienst

17 DER ZUGANG ZU WEB-INHALTEN VERÄNDERT SICH * * * Browser Webseiten-Content App Webdienste-Content Virtueller Assistent Augmentierte Web-Services * prognostiziert

18 VERKÜRZUNG DES WEGES START WEBSEITE ZIEL APP ZIEL 3X faster VA* ZIEL 8X faster * Virtual Assistent

19 VERBESSERUNG DER ÖKONOMISCHEN EFFIZIENZ START $$$ WEBSEITE APP $$ VA* $ * Virtual Assistent

20 VIRTUELLE ASSISTENTEN + AUGMENTED REALITY Phänomene der Veränderung im User Interface Siri projectglass

21 ERFOLGSFAKTOR NR. 1 Natural User Interfaces verkürzen den Weg bis ans Ziel um ein Vielfaches.

22 NUI WARUM? IM DETAIL

23 10 EIGENSCHAFTEN GUTER NUI S 1. Gute NUI s sind intuitiv bedienbar. 2. Gute NUI s sind dynamisch-adaptiv, passen sich also dem Nutzer und seinen Interessen an. 3. Gute NUI s unterstützen Multimedialität und Multimodalität. 4. Gute NUI s agieren Nutzer-zentriert. 5. Gute NUI s sind kooperativ und nicht nur interaktiv. 6. Gute NUI s geben ihren Nutzern unmittelbares und direktes Feedback. 7. Gute NUI s verhalten sich situativ-relevant und sind kontextsensitiv. 8. Gute NUI s erlauben unmittelbare direkte Interaktionen. 9. Gute NUI s sind intermedial, verknüpfen die reale mit der virtuellen Welt. 10. Gute NUI s unterstützen Multiuser-Verhalten.

24 10 EIGENSCHAFTEN GUTER NUI S 1. Gute NUI s sind intuitiv bedienbar. 2. Gute NUI s sind dynamisch-adaptiv, passen sich also dem Nutzer und seinen Interessen an. 3. Gute NUI s unterstützen Multimedialität und Multimodalität. 4. Gute NUI s agieren Nutzer-zentriert. 5. Gute NUI s sind kooperativ und nicht nur interaktiv. 6. Gute NUI s geben ihren Nutzern unmittelbares und direktes Feedback. 7. Gute NUI s verhalten sich situativ-relevant und sind kontextsensitiv. 8. Gute NUI s erlauben unmittelbare direkte Interaktionen. 9. Gute NUI s sind intermedial, verknüpfen die reale mit der virtuellen Welt. 10. Gute NUI s unterstützen Multiuser-Verhalten.

25 INTUITIV BEDIENBAR Handbuch lesen Einfach loslegen

26 NATÜRLICH UND INTUITIV FRAGE ANTWORT Wann ist etwas natürlich? 1 Wenn es intuitiv ist.

27 Wie kann ich etwas intuitiv handhabbar gestalten?

28 SALZ ODER PFEFFER?

29 SALZ UND PFEFFER - TRY AND ERROR

30 SALZ UND PFEFFER ALS GUI

31 SALZ UND PFEFFER ALS NUI

32 150% NUI

33 Wie kann ich ein User Interface intuitiv gestalten?

34 FRAGE ANTWORT Wann ist etwas intuitiv? 1 Wenn ich möglichst wenig kognitive Energie aufwenden muss, um ein Ziel zu erreichen. Wann muss ich möglichst wenig kognitive Energie aufwenden? 2 Wenn ich auf existierende Handlungsmodelle zurückgreifen kann. Welches ist das intuitivste Handlungsmodell von uns Menschen? 3 Das OSIT Modell

35 DAS OSIT MODELL Warenregal Brot Brotdetails Brot in Warenkorb legen Orientieren Selektieren Informieren Transagieren Übersicht Auswahl Detail Aktion

36 DAS OSIT MODELL Übertragung und Implementierung eines Handlungsschemas Nutzer Interaktionssystem

37 DAS OSIT MODELL Orientieren Selektieren Informieren Transagieren Übersicht Auswahl Detail Aktion Coverflow, Gallery, Liste Produkt kommt auf Nutzer zu Vollbild mit allen Details Optionen zur Aktion Filter, Sortieren, Umgruppieren, Vergrößern... Zoom-in/-out Lesen, Sehen, Merken, Vergleichen, Kaufen, Bewerten, Empfehlen...

38 DAS OSIT MODELL IN DER ANWENDUNG

39 10 EIGENSCHAFTEN GUTER NUI S 1. Gute NUI s sind intuitiv bedienbar. 2. Gute NUI s sind dynamisch-adaptiv, passen sich also dem Nutzer und seinen Interessen an. 3. Gute NUI s unterstützen Multimedialität und Multimodalität. 4. Gute NUI s agieren Nutzer-zentriert. 5. Gute NUI s sind kooperativ und nicht nur interaktiv. 6. Gute NUI s geben ihren Nutzern unmittelbares und direktes Feedback. 7. Gute NUI s verhalten sich situativ-relevant und sind kontextsensitiv. 8. Gute NUI s erlauben unmittelbare direkte Interaktionen. 9. Gute NUI s sind intermedial, verknüpfen die reale mit der virtuellen Welt. 10. Gute NUI s unterstützen Multiuser-Verhalten.

40 ADAPTIVES VERHALTEN Responsive Design

41 KONSISTENT IM AUSSEHEN UND VERHALTEN Smartphone Tablet Multitouch devices PC Laptop SmartTV Game console... Responsive Design

42 KONSISTENT IM AUSSEHEN UND VERHALTEN Smartphone Tablet Multitouch devices PC Laptop SmartTV Game console... Same Look & Feel on any device

43 10 EIGENSCHAFTEN GUTER NUI S 1. Gute NUI s sind intuitiv bedienbar. 2. Gute NUI s sind dynamisch-adaptiv, passen sich also dem Nutzer und seinen Interessen an. 3. Gute NUI s unterstützen Multimedialität und Multimodalität. 4. Gute NUI s agieren Nutzer-zentriert. 5. Gute NUI s sind kooperativ und nicht nur interaktiv. 6. Gute NUI s geben ihren Nutzern unmittelbares und direktes Feedback. 7. Gute NUI s verhalten sich situativ-relevant und sind kontextsensitiv. 8. Gute NUI s erlauben unmittelbare direkte Interaktionen. 9. Gute NUI s sind intermedial, verknüpfen die reale mit der virtuellen Welt. 10. Gute NUI s unterstützen Multiuser-Verhalten.

44 DIE INTERAKTION MIT DEM COMPUTER VERÄNDERT SICH Von mono- zu multimodaler Nutzung App Mates ipad Kinect Intermedial Natural Multimodal Natürliche Gesten zur Interaktion Intermediale User Interfaces

45 DIE INTERAKTIONSOPTIONEN WERDEN VIELSCHICHTIGER Kameras LED Licht Bild- oder QR- Codeerkennung Location Based Services GPS Bluetooth Microphone Lautsprecher RFID, Tags... NFC Spracherkennung Druckluft Navigation... Multitouch Touch Schmieren... Gyro Sensor Bewegungssensoren Kompass, Radar... Vertikal / Horizontal Schütteln... Vibration

46 NEUE WEGE PRODUKTE ZU FINDEN Google Shopper App

47 TODAY S CHALLENGE Mastering complexity Multiuser Multiscreen Multidevice Multi OS Connectivity Security Click Touch Gesture Speech Duo-Touch Multitouch

48 10 EIGENSCHAFTEN VON NUI S 1. Gute NUI s sind intuitiv bedienbar. 2. Gute NUI s sind dynamisch-adaptiv, passen sich also dem Nutzer und seinen Interessen an. 3. Gute NUI s unterstützen Multimedialität und Multimodalität. 4. Gute NUI s agieren Nutzer-zentriert. 5. Gute NUI s sind kooperativ und nicht nur interaktiv. 6. Gute NUI s geben ihren Nutzern unmittelbares und direktes Feedback. 7. Gute NUI s verhalten sich situativ-relevant und sind kontextsensitiv. 8. Gute NUI s erlauben unmittelbare direkte Interaktionen. 9. Gute NUI s sind intermedial, verknüpfen die reale mit der virtuellen Welt. 10. Gute NUI s unterstützen Multiuser-Verhalten.

49 Der Nutzer agiert mit dem Objekt selbst, anstatt mit einem Vertreter des Objektes.

50 ZIEL ZIEL Warum sind wir schneller am Ziel? START START GUI WOCHEN NUI SEKUNDEN

51 GUI FUNKTION Indirekte Interaktion

52 NUI - INNER SERVICE Direkte Interaktion

53 NUI - INNER TRANSLATION SERVICE

54 NUI - INNER SERVICES Der Dienst steckt im Objekt

55 A Shift in Mind Von der Gestaltung des visuellen Aussehens (GUI) zur Gestaltung von visuellem Verhalten (NUI).

56 SCROLLBAR EVOLUTION VON GUI ZU NUI Von Funktions- zu Informationssymbolen GUI NUI

57 NUI SCROLLBARS Die Dinge erscheinen, wenn sie benötigt werden Von Funktions- zu Informationssymbolen

58 MERKE Gute NUI sind so wenig Interface wie möglich.

59 ACHTUNG Natural User Interfaces können auch gefährlich sein!

60 PLAYING X-BOX KINECT MIND YOUR ENVIRONMENT!

61 Danke für Ihre Aufmerksamkeit Zeit für Ihre Fragen

62 Danke für Ihre Aufmerksamkeit Zeit für Ihre Fragen SENSORY-MINDS GMBH PROFESSOR WOLFGANG HENSELER Managing Creative Director Ludwigstrasse Offenbach am Main T M E w.henseler@sensory-minds.com Follow us on: NATURAL USER INTERFACES Webmagazin