7. Mai 2014 - 17:49 •Abgeschlossene Projekte

Projekt Visualisierung

Fakten
Typ	Messe Application
Plattform	Multitouch Table Windows, Linux
Entwickler	Marcus Fabarius Benjamin Granzow Stephanie Lehmann [Portfolio]
Status	Prototyp
Technologien	Unity3D MySQL TUIO

Konzept

Ziel war es, ein Layout für ein User Interface mit NUI Aspekten für einen Multitouch Tisch, der hauptsächlich für Ausstellungen und Messen benutzt werden soll, zu entwickeln. Um die Usability des UI-Konzeptes zuüberprüfen, wurde ein funktionaler Prototyp implementiert. Diese Anwendung wurde für die Verwendung auf einem Multitouch-Tisch konzipiert. Bei dem Anwendungsfall für ein User Interface wurde sich zu Gunsten einer Informationsplattform entschieden, welche alle Projekte der Beuth-Hochschule repräsentieren soll. Damit soll ermöglicht werden, Kategorien mit mehreren Unterkategorien darzustellen.

Dabei besteht die Hauptfunktionalität darin, dass ein Nutzer sich über die verschiedenen Projekte informieren kann. Zusätzlich hat dieser die Möglichkeit, ihn interessierende Projekte zusammenzustellen und sich diese anschließend zusenden zu lassen. Diese Funktionalität soll das Besuchererlebnis vertiefen, da der Nutzer sich nach dem Besuch weiter mit der Materie beschäftigen kann.

Zudem ist das Layout so allgemeingültig konzipiert, dass es auch über die Beuth-Projekte hinausgehend universell für alle informationsbezogenen Anwendungsfälle verwendbar ist.

Komponenten

Wheel

Die Form eines Kreises als Hauptinteraktionselement wurde in der Konzeptionsphase relativ früh festgelegt, da dies ein Objekt sein sollte, das allen Nutzern am Tisch gleichermaßen zugänglich ist. Zudem sind auf dem Kreis die unterschiedlichen Kategorien sichtbar. Diese sind durch Linien voneinander getrennt und ermöglichen dem Nutzer gezielt, zugehörige Informationen schnell zu finden.

In gegebenem Anwendungsfall wurden dazu die Abkürzungen der einzelnen Fachbereiche der Hochschule als Hauptkategorien verwendet. Und die Themengebiete wie beispielsweise Games, Medien, Software im Fachbereich VI werden als Unterkategorie dieser durch farblich von einander unterscheidbare Kreisobjekte dargestellt. Dabei wird die Größe der Elemente jeweils durch die Anzahl der vorhandenen Projekte bestimmt.

Das Wheel lässt sich per Touch-Eingabe beliebig drehen bzw. bei keiner Interaktion mit dem Tisch rotiert dieses eigenständig und nach einiger Zeit fängt zusätzlich der Radius an langsam zu pulsieren, indem sich dieser periodisch verkleinert und dann wieder vergrößert. Letzteres soll Aufmerksamkeit auf das User Interface lenken. Mit einer beliebigen Touch-Geste wird das Wheel sofort wieder in den Ursprungszustand zurückversetzt. Um möglichst vielen Nutzern die Möglichkeit zu geben, mit dem Tisch zu interagieren, verkleinert sich das Wheel bei nicht Benutzung, um mehr Platz für andere Interaktionen zu schaffen. Im Sinne einer besseren Übersichtlichkeit werden bei der Verkleinerung die Kreisobjekte weggelassen und gleichzeitig wird deren Farbcodierung auf die zugehörige Kategoriebezeichnung übertragen.

Project-Wheel (inaktiv)
Project-Wheeel (aktive)

Kategorienfilter

Der Kategoriefilter beinhaltet alle Projekte zu einer bestimmten Unterkategorie. Durch Antippen und Herausziehen eines Kategoriekreises entsteht eine Kopie desselben mit einer Verbindungslinie zu dem Originalkreis, der seiner Unterkategorie entspricht. Das herausgezogene Filterobjekt zeigt dabei entsprechend der Kategoriefilterung in kreisförmiger Anordnung zugehörige Projekte an. Da mehrere Instanzen einer Unterkategorie möglich sind, kann jeder Anwender seinen eigenen Filter verwenden. Auf diese Weise behindern sich verschiedene Nutzer beim Durchsuchen gleicher Kategorien nicht gegenseitig. Besitzt ein Objekt mehr Projekte, als durch den Filter darstellbar ist, werden diesem Pfeile zum Scrollen hinzugefügt. Durch diese Bedienelemente ist es dem Nutzer möglich, bei Bedarf alle Projekte durchzusehen. Sollte dabei ein Listenende erreicht werden, wird der entsprechende Richtungspfeil deaktiviert.

Um nicht die Verbindung zu der ursprünglichen Kategorie zu verlieren, ist der Filter mit dieser durch eine Linie verbunden. Dies gewährleistet, dass selbst bei vielen Filteranwendungen die Übersicht erhalten bleibt. Des Weiteren wird mittels der Linie die restliche Lebenszeit des Filters dargestellt. Durch ein Wischen über eine Linie wird ein Durchtrennen derselben symbolisiert, was zur sofortigen Auflösung des Objektes führt.

Filter einer Kategorie welchen den Inhalt zur verfügung stellt.

Projekt-Objekte

Ein Projekt beinhaltet alle verfügbaren Informationen, wie eine Beschreibung und sowohl Bilder als auch Videos. Die Hauptdarstellung eines Projektes zeigt zunächst nur das Titelbild und den Projektnamen. Da dieses Element optisch einem Bild ähnelt, erfüllt es alle erwarteten Interaktionsparadigmen: Translation, Rotation und Skalierung. Dieses ermöglicht es einem anderen Nutzer ein Projekt zu übergeben, um beispielsweise interessante Projekte zu kommunizieren.

Der Skalierung kommt eine besondere Bedeutung zu, da diese dafür zuständig ist, die Menge der angezeigten Informationen zu bestimmen. Das geschieht nach dem Prinzip des responsive Designs, also um so mehr Platz zur Verfügung steht, desdo mehr Informationen werden angezeigt. In unserem Anwendungsfall werden drei Level of Detail (LOD) verwendet. Die Hauptansicht besteht, wie zuvor erwähnt, aus dem Projektnamen und einem Titelbild. Die zweite LOD erweitert die Ansicht um die textuelle Beschreibung des Projektes. Und in der dritten LOD Stufe werden noch die zusätzlichen Medien (Videos, Bilder) angezeigt. Im hier ergänzenden Medienbereich kann durch Wisch-Gesten zwischen den zusätzlichen Objekten navigiert werden. Bei Videos wird zum Starten ein zusätzlicher Play-Button eingeblendet. Aktuell laufende Videos werden beim Navigieren im Medienbereich oder beim Skalieren pausiert. Mit den unterschiedlichen Varianten der Projektdarstellung kann ein Nutzer die Menge an Informationen selbst bestimmen, welche ihm angezeigt werden sollen.

Projekt-Objekt (klein)
Projekt-Objekt (mittel)
Projekt-Objekt (groß)

Workbench

Die Workbench dient dazu, für den Nutzer interessante Projekte zusammenzustellen. Auf diese Weise ist es möglich, Projekte einfacher weiterzuverfolgen, indem der Workbench-Inhalt anschließend per E-Mail zugesandt wird. Diese E-Mail beinhaltet neben der Beschreibung auch die Links zu entsprechenden Projekt-Websites bzw. News-Feeds.

Durch das Zeichen eines Rechteckes mit Hilfe der Finger wird eine Workbench mit entsprechenden Abmessungen erstellt. Dies bietet dadurch eine direkte Umsetzung der vom Nutzer ausgeführten Bewegung. Mit Hilfe eines Radial-Menüs ist es möglich, mit der Workbench zu interagieren. Bei der Anzahl der einzelnen Menüpunkte wurde darauf geachtet, so wenig wie möglich, aber so viele wie nötig an Funktionen bereitzustellen. Im Sinne einer besseren Erkennung wurden für die Buttons aussagekräftige Piktogramme verwendet.

Funktionen

Schließen – schließt die Workbench und verwirft die gesammelten Projekte
Verschieben – ermöglicht das Mitnehmen der Workbench bei Positionswechsel
Senden – öffnet eine Eingabemaske mit dazugehöriger Tastatur, um die E-Mail Adresse anzugeben
Minimieren/Maximieren – lässt die Workbench bis auf das Radial-Menü ausblenden und bei Bedarf wieder einblenden

Screenshots

Konzept
Prototyp