„ [ … ] I believe we will look back on 2010 as the year we expanded beyond the mouse and keyboard and started incorporating more natural forms of interaction such as touch, speech, gestures, handwriting, and vision -- what computer scientists call the „NUI“ or natural user interface.”
Steve Ballmer (2010)
Der Begriff des „Natural“ User Interface wird häufig falsch interpretiert. „Natural“ bedeutet nicht, dass die reale Welt abgebildet und simuliert werden muss, vielmehr handelt es sich hierbei um eine Design Philosophie. Es ist wichtig ein Verständnis für den Term „Natural“ zu schaffen, der im Wesentlichen eine Eigenschaft beschreibt, die nicht mit dem eigentlichen UI in Verbindung steht. Der Begriff bezieht sich auf den Nutzer und die Art und Weise, wie sich die Interaktion anfühlen soll, während mit der Anwendung gearbeitet wird. Dazu kann nicht einfach die WIMP (Windows, Icons, Menus, Pointer) GUI nachgebildet werden, da diese für die Maussteuerung konzipiert wurde und sich nicht auf ein NUI übertragen lässt. Es muss hierfür ein neues Interface für die aus der Eingabemethode resultierenden Anforderungen gestaltet werden – ein neues Paradigma. Die NUI kann daher als Grundstein für eine neue Ära von Interfaces betrachtet werden, die Technologie mit dem wirklichen Leben vereint und den Nutzer von der wenig kreativen Mittemäßigkeit bestehender Anwendungen befreit. Denn neuartige Ein- und Ausgabemethoden verfügen über ein großes Potenzial um ein NUI zu entwickeln. Dieses Potenzial muss explizit konzipiert und gestaltet werden. Die Gestaltung einer NUI erfolgt auf Grundlage der gewünschten Nutzungserfahrung, die durch die verwendete Eingabemethode sowie die Visualisierung entsteht. Dafür ist es notwendig die Faktoren der Eingabemethode zu berücksichtigen.
Weiterlesen...
Besonders im Kontext des sozialen Netzwerkes stellt die Typografie einen wesentlichen Bestandteil des Interfaces dar, da es sich bei nahezu allen Informationen und Inhalten der Nutzer um Textbeiträge handelt. Die besondere Herausforderung hierbei ist es, die Typografie so zu definieren, dass sie mit dem Gesamtbild der Anwendung harmonisiert, das längere Inhalte darstellbar sind und die Distanz, die der Nutzer zum Bildschirm hat, berücksichtigt wird.
Auf Grundlage dieser Vorrausetzungen wurde für Kinect Society die „Segoe“ Schriftfamilie ausgewählt. Die Segoe WP ist eine Groteskschrift, die von Microsoft für das Windows Phone 7 UI entwickelt wurde. Sie bietet, aufgrund ihrer großflächigen, meist offenen Punzen (die Innenflächen der Buchstaben) sowie der großen x-Höhe (die vertikale Höhe eines kleinen „x“), eine gute Lesbarkeit. Sie ist auch Bestandteil von Microsofts „Metro“ Design. Die Segoe wurde, in Abhängigkeit des Kontext, in den Schriftschnitten WP N, WP N Semibold und WP N Semilight im Interface der Kinect Society verwendet. Die Schriftfarbe ist im gesamten Interface gleichbleibend Weiß und bietet somit einen hohen Kontrast zum überwiegend dunkelblauen Hintergrund und den schwarzen Flächen, die sich hinter den Inhalten der einzelnen Beiträge und Informationen befinden.
Ausgehend von der durchschnittlichen Distanz über die der Nutzer bei der Interaktion mit dem Interface verfügt kann mittels der von Wandmacher (1993) aufgestellten Formel die minimale Schriftgröße für eine gesicherte Lesbarkeit berechnet werden. Ausgehend von der Annahme, dass sich der Nutzer durchschnittlich 1,5 m, d.h. 1500 mm, vom Bildschirm entfernt befindet, kann folgende Formel angewandt werden:
Buchstabenhöhe (mm) = 0,0022 x D + K1 + K2
Variablen:
D = Augenabstand zum Bildschirm (mm)
Konstanten:
K1 = 1,5 für günstige Lesebedingungen
K1 = 4,1 für ungünstige Lesebedingungen
K2 = 0 für normale Informationen
K2 = 1,9 für kritische Informationen
(vgl. Wandmacher, 1993, S. 21)
Die folgenden Berechnungen beziehen sich auf die kleinste im Interface verwendete Schriftgröße unter günstigen sowie ungünstigen Lesebedingungen:
Mindestbuchstabenhöhe unter günstigen Lesebedingungen:
0,0022 x 1500 + 1,5 + 0 = 4.8 mm = 13,3 pt Buchstabenhöhe
Mindestbuchstabenhöhe unter ungünstigen Lesebedingungen:
0,0022 x 1500 + 4,1 + 0 = 7,4 mm = 20,9 pt Buchstabenhöhe
Die kleinste im Interface verwendete Schriftgröße beträgt exakt 20 pt (7.054 mm), d.h. kann die Lesbarkeit, auch unter ungünstigen Bedingungen, bzgl. der Schriftgröße als gesichert betrachtet werden. Auch im Selbstversuch konnten 20pt große Buchstaben auf einem 32‘‘ großen Monitor aus der Distanz von über 1,5 Meter gelesen werden.
Quellen:
Wandmacher, J. (1993). Software-Ergonomie – Mensch Computer Kommunikation – Grundwissen 2. Berlin, New York: Walter de Gruyter
Normal 0 21 false false false DE X-NONE X-NONE Software-Ergonomie – Mensch Computer Kommunikation – Grundwissen 2
Die nachfolgenden Screens stellen die ersten Ansätze der Gestaltung des Konzepts der Wireframes dar. Die Screens sind ausschließlich als Zwischenstand zu betrachten und werden in den nächsten Tagen intensiv (anhand der in einer Diskussion entstandenen Verbesserungsvorschlägen) überarbeitet bevor mit der Umsetzung des Prototypen begonnen wird. Ich habe die vorzunehmenden Änderungen in der nachfolgenden Aufzählung zusammengefasst:
- Trennung der Content Elemente hervorheben (durch Abstand)
- Kalibrierungsscreen anpassen (Anweisungstext direkt über die Kinect Kamera Ansicht)
- Abstände Icons/Content/Posts/Bereiche erhöhen
- Stärkere Kontraste zwischen Text & Hintergrund schaffen
- Eigene Beiträge hervorheben
- Neuen Gestaltungsansatz für den Hintergrund der Anwendung überlegen und umsetzen
- Icons der Anwendung überarbeiten
- Auf dem Freunde Dashboard keine sechseckige Darstellung verwenden – Strong & Weak Ties klarer visualisieren
- Möglichkeit implementieren, bei der Beitragserstellung eine/mehrere Gruppen bzgl. der Sichtbarkeit wählen zu können
- Typografie anpassen nach den Techniken von Wandmacher
- Uhrzeit/Ort Kontextabhängig darstellen und in der Größe reduzieren
- Zeitpunkt der Posts stärker wahrnehmbar machen
Kinect-Society Flowchart:
Splash-Screen Intro:
Kalibrierung:
Dashboard (Startseite mit aggregierten Informationen):
Profil - Timeline:
Profil - Informationen:
Profil - Bildergalerie:
Profil - Bildergalerie - Selektiertes Album / Bild im Vollbild:
Profil - Freunde Übersicht:
Freunde - Gruppen nach Strongties (Kontakt/Interaktionshäufigkeit) angeordnet:
Nachrichten - Übersicht:
Nachrichten - Neue Nachricht - Empfänger auswählen:
Nachrichten - Neue Nachricht - Nachricht verfassen:
Nachrichten - Auf vorhandene Nachricht antworten:
Gruppen - Übersicht:
Gruppen - Gruppe Detail:
Events (Veranstaltungen & Geburtstage) - Übersicht:
Events - Veranstaltung - Detail:
Nachtrag Interaktionen:
ASCII Texteingabe:
Element Eigenschaften:
Magnetischer Button:
Magnetischer Button: Cursor snappt über dem Button und hält seine Position sobald er den aktiven Bereich berührt
Vorteile:
+ Erhöht die Selektionsgenauigkeit eines Buttons
Nachteile:
- Cursor springt von Button zu Button und „hängt“ bei unabsichtlichem Überfahren fest
Expandierender Button:
Expandierender Button: Button vergrößert sich sobald der Cursor den aktiven Bereich berührt
Vorteile:
+ Größere Erfolgschance den Button mit dem Cursor zu treffen und zu aktivieren
+ Visuelle Rückmeldung des aktive selektierten Buttons
Nachteile:
- Stört partiell das „ruhige“ Gesamtbild einer Anwendung wenn sich Buttons in stark frequentierten Bildbereichen befinden
- Kann unter Umständen zu Überdeckungen bei nah nebeneinander positionierten Buttons führen
Button:
Hold to click:
Hold to click: Cursor auf dem Button halten um ihn zu aktivieren
Vorteile:
+ Visuelle Rückmeldung wann der Button ausgelöst wird
+ Durch bereits existierende NUI Anwendungen und Spiele etabliert
Nachteile:
- Zeitabhängige Interaktion – der Nutzer muss warten bis sich der Kreis geschlossen hat
- Ergonomisch unangenehm – der Arm (Cursor) muss bis zur Aktivierung starr in der selben Position auf dem Zielobjekt gehalten werden
- Bei vielen Interaktionen zu langsam und zu ermüdend (z.B. Texteingabe)
- Keine semantische Kommunikation, muss gelernt werden
Push to click:
Push to click: In die z-Achsen-Richtung drücken um den Button zu aktivieren
Vorteile:
+ Keine Zeitabhängige Interaktion – kann schnell ausgeführt werden
+ Klare semantische Kommunikation der Geste – „Drücken“ eines Schalters in der Luft fühlt sich natürlich an
Nachteile:
- Dezentere visuelle Rückmeldung als „Hold to click“
- Mäßige Erfolgschance den Button zu aktivieren – kann frustrierend sein
- Versehentliche Aktivierung durch Positionswechsel im Raum möglich
Move to click:
Move to click: Einen Schritt vorwärts in die z-Achsen-Richtung gehen um den mit den Cursor ausgewählten Button zu aktivieren
Vorteile:
+ Semantische Kommunikation „durch das Interface zu gehen“ – Besonders im Kontext eines dreidimensionalen NUI empfehlenswert
+ Nutzer verweilt nicht in einer statischen Position
+ Neuigkeitswert
Nachteile:
- Erreicht schnell seine Grenzen (zu nahe am Sensor oder zu weit entfernt vom Sensor)
- Kann ermüden aufgrund der aufeinanderfolgenden Vor- und Rückwärtsbewegungen
- Kann zu Fehlinterpretationen des Systems führen wenn sich z.B. der Nutzer kurzfristig vom Interface entfernt und dabei durch einen Threshold durchläuft
Scrollen:
Drag to scroll:
Drag to scroll: Wischbewegung nach rechts oder links um die Timeline zu scrollen
Vorteile:
+ Ist den etablierten Multitouchgesten ähnlich und kann als etabliert betrachtet werden
+ Eine horizontale Wischbewegung ist ergonomisch angenehmer als vertikale Wischbewegung
Nachteile:
- Bei einer langen Scrollbar muss die Geste häufig wiederholt werden
- Mögliche Fehlinterpretation des Systems durch die Neupositionierung der Hand
Hold to scroll:
Hold to scroll: Im aktiven Bereich den Cursor halten um nach rechts bzw. nach links zu scrollen
Vorteile:
+ Keine wiederholende Bewegung notwendig
+ Einfache technische Realisierung
Nachteile:
- Kann unabsichtlich beim Überfahren mit dem Cursor ausgelöst werden wenn keine Mindestaktivierungszeit definiert ist (z.B. den Cursor eine Sekunde im aktiven Bereich halten um zu Scrollen)
- Ergonomisch unangenehm – der Arm muss während der Scrollinteraktion starr in der selben Position gehalten werden
- Keine semantische Kommunikation, muss gelernt werden
Drag & Drop:
Hold to Drag & hold to Drop:
Hold to Drag & hold to Drop: Auf dem Dragobject den Cursor halten, Dragobject zur gewünschten Dropzone bewegen und zum Drop erneut den Cursor halten
Vorteile:
+ Visuelle Rückmeldung das das Dragobject ausgewählt ist und wo es abgelegt wird
+ Hohe Erfolgschance das Dragobject erfolgreich aufzunehmen und erfolgreich in der Dropzone zu platzieren
Nachteile:
- Zeitabhängige Interaktion – der Nutzer muss warten bis sich der Kreis geschlossen hat
- Ergonomisch unangenehm – der Arm muss zur Aktivierung starr in der selben Position gehalten werden
- Keine semantische Kommunikation, muss gelernt werden
Two Hands Drag & Drop:
Two Hands Drag & Drop: Beide Cursor auf dem Dragobject halten und das Dragobject zur Dropzone bewegen
Vorteile:
+ Interaktion kann durch das entfernen der Cursor vom Dragobject annulliert werden
Nachteile:
- Kann nicht auf Elemente angewandt werden, die nicht mindestens der Größe zweier nebeneinander positionierten Cursor entsprechen
Reverse Push to Drag & Push to Drop:
Reverse Push to Drag & Push to Drop: Das Dragobject durch eine invertierte Push Geste aufnehmen und an der gewünschten Position durch Push Geste wieder ablegen
Vorteile:
+ Semantische Kommunikation „etwas aufzunehmen“ und etwas „abzulegen“
+ Nutzer verweilt nicht in einer statischen Position
+ Neuigkeitswert
Nachteile:
- Mäßige Erfolgschance den Dragobject aufzunehmen und abzulegen – kann frustrierend sein
- Versehentliche Ablage des Dragobject bei der Navigation zur gewünschten Position
Ich habe die hier gezeigten NUI Interaktionen in einem PDF zusammengefasst, das ich zum Download bereitstelle:
Download Kinect NUI Interaktionen PDF
