Design Workshop 2 – HoverTouch

Das Projekt „Hovertouch“ wurde im Rahmen der Veranstaltung Design Workshop 2 im Wintersemester 2013/2014 von den Studenten Sebastian Rehm und Peter Siegl entwickelt. Die Veranstaltung stand unter dem Thema “Backofen der Zukunft” und wurde durch die BSH Bosch und Siemens Hausgeräte GmbH, insbesondere der Marke NEFF mitveranstaltet.

Idee und Motivation

Der Backofen ist Teil jeder modernen Küche. Idealerweise ist er leicht unterhalb Augenhöhe angebracht und gibt durch die gläserne Backofentür seinen schmackhaften Inhalt preis. Zusammen mit der obenliegenden Bedienleiste nimmt der Backofen jedoch einen großen Teil der Fläche in der Küchenzeile ein. Völlig ungenutzt bleibt dabei die großflächige Backofentüre. Genau hier setzt unser Konzept an.

Die Backofentüre wird zur interaktiven Oberfläche auf der die Elemente dargestellt werden, die bisher in der Bedienleiste verankert waren. Die oftmals kleinen und schlecht sichtbaren Beschriftungen und Symbole werden ersetzt durch große, digitale Bedienelemente. Die obere Bedienleiste mit Knöpfen und Drehreglern wird dadurch überflüssig und der Backofen verkleinert sich.
ws1213_dw2_hovertouch_pic1

Umsetzung
Es liegt nahe als Alternative zur Steuerung des Backofens mit haptischen Bedienelemente eine Touch-Bedienung zu implementieren. Allerdings ergeben sich in Bezug auf den Nutzer-Kontext und die physikalischen Begebenheiten der Backofentüre zwei Probleme. Die unangenehme Hitze, die sich selbst auf Doppelverglasten Backofentüren niederschlägt verhindert eine angenehme, direkte Bedienung. Der zweite Nachteil ist, dass die Backofentüre verschmutzen würde, wenn die Steuerung beispielsweise mit mehligen Händen erfolgt.

Daher nutzen wir eine Technik namens HoverTouch, die aus dem Bereich der Smartphones entliehen ist. Sie ermöglicht es in einem gewissen Abstand, üblicherweise zwischen 2-10 cm, mit der Benutzeroberfläche zu interagieren. Dazu müssen keinerlei Gesten erlernt werden, da der Finger als Pointer dient und sich dadurch alle Einstellungen des Backofens vornehmen lassen.

Durch ihre Größe bieten sich die neuen Bedienelement auch zur Anzeige weiterer Informationen an. So zeigt das Temperatur-Element an wie weit der Backofen schon vorgeheizt ist. Das Element für die Stoppuhr zeigt auch grafisch an dass gerade Zeit abläuft. Somit ist auch aus weiterer Entfernung der Zustand des Backofens erfassbar.

Bei der Erstellung der eigentlichen Bedienelemente wurde insbesondere auf eine einfache Bedienbarkeit und intuitive Verständlichkeit geachtet. Um das Konzept möglichst realitätsnah zu halten haben wir den interaktiven Bereich auf den linken Rand der Türe beschränkt. Angesichts der begrenzten Genauigkeit des HoverTouch und des eingeschränkten Platzes hat sich eine Bedienung über die Hover-Dauer herauskristallisiert.

Bedienelemente werden aktiviert nachdem der Finger kurze Zeit darüber schwebt. Die Aktivierung selbst wird durch einen Fade-Effekt hervorgehoben. Nach der Aktivierung werden zwei Pfeile oder Minus und Plus zur Veränderung der jeweiligen Einstellung (Modus, Temperatur, Dauer) angezeigt. Diese werden wiederum durch Hovern getriggert. Verlässt man das aktivierte Element mit dem Finger, geht es wieder in den inaktiven Zustand über.
ws1213_dw2_hovertouch_pic2

Technische Details und Schwierigkeiten

Um eine möglichst agile und schnelle Arbeitsweise zu garantieren haben wir uns für eine webbasierte Umsetzung des Protypen entschieden. Als Framework kam Backbone.js zum Einsatz und das Interface wurde klassisch mit HTML und CSS umgesetzt.

ws1213_dw2_hovertouch_pic3

Der Prototyp lief auf einem handelsüblichen 19″ Monitor mit Seitenverhältnis 4:3. Um das Aussehen eines Backofens zu imitieren, wurde eine silberne Plastik-Umrandung mit einem Türgriff am Monitor befestigt. Die Software des Prototypen besteht komplett aus einer Webapplikation die stark auf JavaScript setzt um die Interaktivität der Oberfläche zu simulieren.

Für die Erkennung der Fingerinteraktionen kam ein Leap-Motion-Controller zum Einsatz, der im Griff untergebracht wurde. Im oberen Bereich funktionierte die Erkennung des Leap-Motion optimal, während das untere Drittel am Rande des Erkennungsbereichs lag. Dort kam es sporadisch zu einem Verlust der Erkennung, was aber die Interaktion nicht übermäßig beeinträchtigte.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s