TabMate

Problemstellung

Es gibt unzählige Werkzeuge, die für den Umgang mit digitalen Medien geschaffen wurden. Diese sind jedoch teilweise von einem unverständlichen Interface gezeichnet. Somit war es unsere Aufgabe, ein Human Interface Device zu schaffen, mit welchem neue Interaktionen entstehen oder optimiert werden können.

Während der Recherche nach einem Problem stellten wir schnell fest, dass unzählig geöffnete Tabs und die Navigation durch diese ein zeitraubendes Problem darstellt und damit perfekt für diesen Kurs geeignet ist.

Lösungsansätze

Um all diese Probleme zu lösen, sollte unser Interface die Möglichkeit bieten, möglichst schnell durch Tabs und Fenster wechseln zu können, dabei sollte es eine Funktion geben mit der man die Inhalte schnell erfassen könnte, außerdem sollte Lichtfeedback Klarheit über identisch geöffnete Tabs geben und der Workflow sollte durch eine Drehbewegung und damit schnelles Wechseln durch Tabs nicht weiter gestört sein.

Nach etlichen Recherchen stellten wir schließlich fest, dass wir nicht nur ein Human Interface Device benötigen würden, sondern auch mit einer Extension arbeiten müssten. Dazu suchten wir nach verschiedenen Funktionen von bestehenden Extensions und legten anschließend Funktionen fest, die man mit Hilfe unseres Interfaces im Browser und dem gestalten Extensionfensters bedienen konnte.

Auf Basis dieser Funktionen entstand ein Prototyp mit einem Rotary Encoder, mit welchem man schnell durch das Extensionfenster scrollen konnte und durch klicken auf das ausgewählte Tab wechselte.
Diesen Prototypen unterzogen wir schließlich einem Usability-Testing, aus welchem wir einige Insights ziehen und neue finalen Funktionen für den Prototypen festlegen konnten.

Funktionen

Haptisches (& akustisches) Feedback

Eines der wichtigsten Insights aus dem Usability Testing beinhaltete das noch verbesserungswürdige haptische und akustische Feedback des Prototypen. Dafür beschäftigten wir uns mit dem Ratschenmechanismus und entwickelten weitere Prototypen.

Vom Drehregler zum Drehdrücksteller

Durch die Mechanik eines Drehdrückstellers verleiten wir dem Rotary Encoder eine Art Kippfunktion, durch welche schließlich vermieden werden konnte, dass unser Interface auf dem Tisch verschoben wird durch schieben. Die Analogie zu Mausklicks gefiel und dabei zusätzlich. Um die Funktion auszureifen erstellten wir viele Prototypen, wobei der untenstehende das finale Ergebnis zeigt.

Visuelles Lichtfeedback

Um die Affordnce und das Feedback unseres Interfaces zum Stabwechsel zu verbessern, nutzen wir einen LED Ring. Dieser soll zeigen wie viele Tabs in einem Fenster geöffnet sind, in welchem Bereich der Tabs man sich gerade befindet, einen Fensterwechsel und gleiche Tabs anzeigen können.
Dafür erstellten wir diese 2D Ansicht unseres Prototypen.
Die erste Situation zeigt unseren Prototypen mit den meistgeöffneten Tabs und auf welchem man sich gerade befindet.
Die zweite Situation zeigt den Fensterwechsel durch einen Farbwechel und den Lichtwechsel auf dem links stehenden Lightstrip. Hier sind deutlich weniger Tabs geöffnet als im ersten Fenster.
Die dritte Situation zeigt die Auswahl von gleichen Tabs mit Hilfe des Bookmark-Buttons. Die identischen Tabs werden nicht nur im aktuellen Fenster sondern auch auf dem Lightstrip links angezeigt, was bedeutet, das in diesen Fenstern ebenfalls identische Tabs geöffnet sind.

Finaler Funktionsprototyp

Mit unserem finalen Funktionsprototyp kann man schließlich durch Tabs im Extensionfenster wechseln, genauso wie Tabs über die Kippfunktion direkt wechseln. Ein Wechsel von Fenstern im Browser gestaltete sich allerdings als äußerst schwierig, da durch viele Fenster und Tabs unser Extensionfenster verschiedene Tabs aus Fenstern auslaß und damit Verwirrung schaffte. Der Bookmark-Button wurde ausschließlich im Designprototyp simuliert.

Finaler Designprototyp