Toolbox Interactiondesign


Re-Imagining 2013

couchwork FotoTool

Stephan Fink, 20.01.2016 | «Re-Imagining - The Future of Interaction» bei Prof. Steffi Hußlein
Der Klick-Prototyp des couchwork FotoTools. Falls kein Flash Player vorhanden ist, sind hier seine Funktionen als Animation zu sehen. – Selbst klicken? Hier entlang!

Das Projekt

Standrechner verschwinden, Notebooks und Tablets dominieren allmählich die Haushalte, da mit ihnen ein ortsungebundenes Arbeiten möglich ist. Das couchwork FotoTool ist eine Tablet-Anwendung zur vollständigen Verwaltung von Bildern im eigenen Heimnetzwerk. Fotos können archiviert, katalogisiert und bearbeitet werden. Zusätzlich zur klassischen Bildbearbeitung ist auch die Erstellung von Präsentationen möglich.

Die App kann mit einem SmartTV gekoppelt werden. Es dient je nach Bedarf als Präsentations- oder erweiterte Ablagefläche für Fotos, Alben oder individuelle Sammlungen. Diese zeigt automatisch immer die für den aktuellen Arbeitsschritt günstigste Erweiterung, lässt sich aber auch manuell konfigurieren.

Mit dem couchwork FotoTool ist auch kollaboratives Arbeiten möglich, denn es können auch mehrere Tablets mit dem SmartTV verbunden werden. Auch Gäste können bei Bedarf integriert werden und mithilfe eines Pointers die Stellen eines Bildes markieren, über das sie gerade sprechen.

Die Grundlage

Die Idee zu diesem Projekt entstand 2012 im Drittsemesterprojekt «Re-Imagining – The Future of Interaction» des Masterstudiengangs Interaction Design der Hochschule Magdeburg-Stendal unter Leitung von Prof. Steffi Hußlein. Grundlage bildete die Aufgabe, soziale Medien neu zu denken und ihre Bedeutung für die Zukunft zu erfassen sowie mögliche Trends durch ein eigenes Projekt aufzuzeigen.

Das couchwork FotoTool

Mit dem couchwork FotoTool können Nutzer über ein Tablet ihre in einem lokal verfügbaren Heimnetzwerk liegende Bildersammlung verwalten. Zur optimalen Verwendung wird ein SmartTV mit dem Tablet und Server gekoppelt und dient als erweitertes Display. Neben der bloßen Anzeige von Fotos zeigt der SmartTV immer die zu den aktuellen am Tablet durchgeführten Aktionen passenden Informationen oder Ansichten. Das Tablet wirkt dabei als Basis, auf dem die komplette Verwaltung der Bilddatenbank stattfindet.

Die App bietet dazu drei Bereiche an:

Quellen-Bereich mit verschiedenen Darstellungsoptionen

Im Bereich «Quellen» erhält der Benutzer direkten Zugriff auf den Server. Veränderungen wie das Erstellen, Kopieren oder Löschen von Dateien und Verzeichnissen werden auf dem Netzwerkspeicher durchgeführt und wirken sich auf alle Geräte aus, die darauf Zugriff haben. Ebenfalls besteht hier die Zugriffsmöglichkeit auf externe Cloud-Speicher und angeschlossene Datenträger wie USB-Sticks oder auch Kameras. Die Bilder können manuell oder entsprechend eines definierten Systems automatisch auf den Server importiert werden. Neben dem reinen Ordnersystem bietet dieser Bereich zudem die Funktionen eines Katalogprogrammes. So können die Medien nach Schlagworten, Aufnahmedatum, Ort oder anderen verfügbaren Informationen gruppiert, gefiltert und sortiert werden. Zusätzlich protokolliert das FotoTool die Verwendung jedes Bildes in anderen Projekten wie Collagen oder Präsentationen.

Wird ein Bild auf dem Tablet ausgewählt, sieht der Betrachter es umgehend vollflächig auf dem SmartTV. Mehrere selektierte Bilder werden entsprechend auf der Fläche platziert, sodass der Nutzer den Überblick über seine Auswahl behält. Jedes Medium im Katalog besitzt zusätzlich Schaltflächen, um statt ihrer Ansicht die Metadaten auf dem TV darzustellen oder um ein einzelnes Bild anzuzeigen, ohne die bisherige Auswahl zu löschen.

Organisationsbereich, hier im Modus zur Tag-Bearbeitung

Der Bereich «Organisation» ist eine Neuentwicklung, welche die Arbeit mit großen Datenmengen auf kleinen Displays vereinfacht. Er basiert auf einer Filteransicht und enthält immer nur die Medien, welche in den Quellen markiert wurden. Dabei ist der Speicherort der einzelnen Bilder nicht relevant. Während im ersten Bereich Dateien über verschiedene Eigenschaften gesucht und direkt auf dem Server bewegt werden können, ist eine Hauptfunktion dieser zweiten Ebene die Zuweisung jener Eigenschaften wie Tags, Personen oder Geo-Daten und die Verwaltung sämtlicher virtueller Ordner wie Alben oder Gruppen. Desweiteren dient der Bereich wie jeder Filter zur Fokussierung auf die erstellte Auswahl. Die Medien können einzeln betrachtet und bearbeitet werden, ohne das die Selektion verloren geht.

Bearbeitungsmodus, hier mit dem Werkzeug für den Vorher-/Nachher-Vergleich

Alle Bilder, welche sich unter «Organisation» befinden, können im dritten, dem Bearbeitungsbereich, verwendet werden. Er stellt einen Fotoeditor dar, welcher die grundlegenden Werkzeuge zur Optimierung von Medien bereitstellt. Es lassen sich aber auch mehrseitige Präsentationen erstellen. In beiden Fällen steht das gesamte Bildmaterial aus dem Organisationsbereich über ein Auswahlfeld zur Verfügung.

Die Informationsarchitektur

Das couchwork-System nutzt das private Heimnetzwerk als Basis. Im einfachsten Fall ist das ein WLAN-Router mit einer angeschlossenen externen Festplatte, deren Daten über eine FTP-Adresse zugänglich sind. Ebenfalls kann das Szenario Netzwerkfestplatten, NAS-Systeme oder einen Server beinhalten. Zu diesem Netzwerk gehören weiterhin ein SmartTV, ein Tablet und optional ein Smartphone. Alle Geräte sind über das Heimnetzwerk miteinander verbunden, sei es über WLAN oder Ethernet.

Datenfluss und Zugangsberechtigungen der einzelnen Geräte

Das couchwork FotoTool legt sich über die Infrastruktur und benötigt als Basis lediglich den Lese- und Schreibzugriff auf das Verzeichnissystem des Netzwerkspeichers. Ist dieser ein Server, sind weitere Funktionen möglich wie beispielsweise der automatische Import von Medien aus an das Netzwerk angeschlossenen Datenträgern wie USB-Sticks, Speicherkarten oder Kameras. Die Dateien werden tagesgenau nach Datum in Ordner gruppiert, was die Grundstruktur des Systems bildet.

Auf diese Verzeichnisse greift die auf dem Tablet installierte FotoTool-App zu und zeigt sie im Quell-Modus in genau dieser Form an. Eine auf dem SmartTV installierte Service-App kann mit dem Tablet gekoppelt werden und wird darüber autorisiert, die Daten von dem Netzwerkspeicher zu lesen. Die Informationen für den SmartTV gehen demnach nicht über das Tablet, sondern werden direkt der Quelle entnommen, wenn auch nur nach Anweisung des FotoTools.

Die dritte App für das System ist ein Pointer für das Smartphone. Autorisiert wird sie über das FotoTool des Tablets, bekommt allerdings nur Zugriff auf den SmartTV. Dieser streamt seine eigene Anzeige an alle Empfänger.  Auf diese Weise können Geräte von Gästen in das System eingebunden werden, ohne für die Serverinhalte durch direkten Zugriff eine potentielle Gefahr darzustellen.

Sämtliche Apps sind Clientanwendungen und nutzen maximal temporäre Kopien auf den jeweiligen Geräten. Die Dateien verbleiben immer auf dem Server und werden ausschließlich nondestruktiv, das heißt nur mit Informationserweiterungen verändert, sodass der Originalzustand immer wiederhergestellt werden kann.

Interaktionen

Für die beste Usability ist es notwendig, den Nutzer neben den intuitiven auch seine von anderen Touch-Anwendungen erlernten Aktionen mit der erwarteten Wirkung ausführen zu lassen. Daher löst auch beim FotoTool eine Berührung eine Aktion am Zielobjekt aus, werden Elemente durch Bewegung auf dem Touchscreen mitgenommen und Bereiche durch Wisch-Gesten gewechselt.

Auch Zwei-Finger-Anweisungen wie das Spreizen und Schließen zur Größenveränderung finden Anwendung, bleiben aber die komplexesten Aktionen. Wie Tastenkürzel am PC sind auch Mehr-Finger-Gesten erlernbar, schränken jedoch die Intuitivität des Interaktionskonzeptes von vornherein ein.

Der richtige Weg zur Erweiterung von Touch-Eingaben liegt daher in der Optimierung bereits bestehender. Dieses Ziel verfolgend sind daher einige Interaktionen des FotoTools noch experimenteller Natur.

Swype = Move + Speed

Der gängige Befehl, um über einen Touchscreen ein feststehendes Objekt, wie zum Beispiel eine Datei, zu bewegen ist ein Komplex aus Berühren, Halten der Berührung und anschließendem Bewegen zum Zielort. Für die Erkennung der Gesten spielen dementsprechend die Koordinaten der Berührung, deren Dauer und die darauffolgende Positionsänderung nach einer bestimmten Zeit eine Rolle. Diese Informationen werden vom System wesentlich öfter abgefragt und verarbeitet, als das Display sein Bild aktualisiert. Das bedeutet, dass die Erkennungssoftware in der Lage ist, die vom Nutzer geplante Aktion eher zu erkennen, als dieser ein visuelles Feedback auf seine Handlung erhält. Dieser Umstand wird beim FotoTool ausgenutzt, um das Verschieben von Objekten und das Swypen mit dem gleichen Touch-Befehl auszuführen.

SWYPE: Das schnelle Wischen zum Bereichswechsel zeichnet sich dadurch aus, dass es keinen objekthaften Start- und Zielpunkt gibt und daher die Bewegung mit nahezu kostanter Geschwindigkeit durchgeführt wird.

Das Wischen oder auch Blättern zwischen den verschiedenen Bereichen der App ist eine schnelle und nicht objektgebundene Geste. Sie funktioniert daher bereits immer, wenn den Koordinaten des Berührungspunktes keine Schaltfläche oder ein anderes aktivierbares Element zugeordnet ist. Ist dies jedoch der Fall, so interpretiert die Erkennungssoftware anhand der Positionsänderung relativ zur Dauer der Berührung die passende Aktion. Ein Swype beginnt in der Bewegung, sodass der Berrührungsort zu keiner Zeit konstant bleibt. Auch ist eine ungerichtete Bewegung schneller als eine zielorientierte, was in einer größeren Positionsveränderung bei gleicher Zeit resultiert.

DRAG & DROP: Beim Aufsetzen des Fingers auf dem Touchscreen und beim Lösen entstehen relativ zur eigentlichen Wischbewegung messbare Geschwindigkeitsunterschiede.

Soll ein Objekt verschoben werden, so wird dieses aus der Notwendigkeit es zu treffen heraus, zunächst berührt, bevor es bewegt wird. Selbst wenn diese Verzögerung nur Sekundenbruchteile dauert oder der Vorgang bereits mit einer leichten Bewegung beginnt, sind diese Unterschiede im Vergleich zum Swype messbar und können daher separat interpretiert werden.

Der Prototyp

Dummy zu klein? – Hier entlang! » http://sfi.bplaced.net/FotoTool/FotoTool.swf

Bitte warten Sie, bis alle Vorschaubilder auf der ersten Seite geladen wurden!

Clickdummy zum besseren Verständnis der drei Bearbeitungsebenen

Der Prototyp des couchwork FotoTools ermöglicht das Ausführen von Basisinteraktionen wie die Einzel- und Mehrfachauswahl von Bildern und den Wechsel zu den verschiedenen Funktionsbereichen der App per Touch oder Swype.

Für die Präsentation des Projektes diente er zur Veranschaulichung der Echtzeitkommunikation über WLAN zwischen Tablet und einem PC, welcher den SmartTV simulierte. Für den Web-Dummy wurden beide Module komplett umgeschrieben, sodass dieser anstelle eines eigenen Netzwerksystems ausschließlich den Adobe Flash Player oder einen Browser mit Flash Plugin erfordert.

Der Prototyp aus der Präsentation liegt mitsamt Quellcode dieser Dokumentation bei, ist ohne einen eigens dafür eingerichteten WLAN-Router sowie der installierten Tablet-App nicht lauffähig.

 

Vision

Vernetzte Fotoverwaltung und Präsentation sind die Kernaufgaben des Fototools. In dieser Arbeit standen der Grundaufbau und das Arbeitserlebnis im Fokus, während die einzelnen Funktionen eher exemplarischer Natur sind.
Ein nächster Schritt wäre die vollständige Sammlung, Positionierung und Vernetzung aller notwendigen und hilfreichen Elemente dieser Apps sowie die Entwicklung eines in allen Bereichen funktionierenden Prototyps.

Dazu soll das Fototool nur eine von mehreren Apps
sein, die unter dem Label couchwork vereint werden. Weitere können Ideenfindung, Videoschnitt, Audiobearbeitung oder auch Kalkulation, Teamrecherchen und andere Office-Tätigkeiten sein, für die bisher nur Desktop-Rechner ernsthaft in Frage kommen. Der Begriff couchwork steht dabei für ein rechnerunabhängiges produktives
Arbeiten überall in den eigenen vier Wänden.

Weiteres Potential steckt in einer temporären Abkoppelung des Tablets von der Peripherie des Heimnetzwerks. Über einen automatischen oder frei wählbaren Zwischenspeicher können aktuelle Projekte mitgenommen und unterwegs weiter bearbeitet werden. Die erfolgten Änderungen werden auf dem Gerät gespeichert und bei der nächsten Verbindung im Heimnetz mit dem Server synchronisiert.

01.02.2016 | Stephan Fink |