Kollaborative Canvas Interaktionen

Intro

Im Projekt “Kollaborative Canvas Interaktionen” haben wir uns mit Pointer-Pointer Interaktionen in Canvas Tools auseinandergesetzt und dazu verschiedene Experimente und Anwendungen entwickelt. Das Projekt ist im Rahmen des Erasmus+ Projektes mit dem Thema „Digital Tools for Creative Collaboration“ entstanden, was ein gemeinsames Lehr- und Forschungsprojekt der Designhochschule ESADSE in St. Étienne, Frankreich, der Estnischen Kunstakademie in Tallinn EKA und der Hochschule für Gestaltung Schwäbisch Gmünd ist. Im Kern geht es um folgende Fragen, denen an allen drei Hochschulen gemeinsam forschend nachgegangen werden soll:

Wie können wir die verteilte, kreative Zusammenarbeit mit digitalen Werkzeugen verbessern? Wo können wir uns von den großen Produktionstools aus Kalifornien ein unabhängiger machen? Was haben wir aus eineinhalb Jahren “remote work” gelernt? Was sollten wir an unseren Design- und Kommunikationstools – im Großen oder im Kleinen – ändern, auch für das zukünftige „new normal“?

Research: Pointer Interactions

Douglas Engelbart: The Mother of all Demos

Im Jahre 1968 demonstrierte Douglas Engelbart, wie interaktive Computer in Zukunft vom Menschen bedient werden könnten. Er zeigt in seiner Präsentation, wie Hypertext funktionieren könnte, wie eine grafische Oberfläche aussehen könnte und wie Kollaboration auch über größere Distanzen möglich wird.

Durch die Demo von Douglas Engelbart haben wir verstanden, wie lange es die Idee der Computersteuerung mit der Maus und einem Cursor schon gibt.
In Douglas Engelbarts Demo war der Cursor noch senkrecht.

Bei den ersten Personal-Computern wurde er dann etwas gedreht. Der Grund dafür war, dass die Computer damals eine sehr geringe Auflösung hatten und der Pointer durch die Drehung eine senkrechte und dadurch schärfer wirkende Kante hatte.

Das war für uns eine wichtige Erkenntnis, da wir dadurch realisierten, dass sich bestimmte grundlegende Dinge wie die Abschrägung des Cursors seitdem nicht mehr verändert haben. Obwohl der ursprüngliche Grund, die schlechte Auflösung, seit langem keine Rolle mehr spielt.

Der Personal Computer wurde für Single-Use entwickelt, heutzutage arbeiten wir zu einem großen Teil kollaborativ am Computer. Es wird Zeit, die grundlegenden Computer Interface Interaktionen zu hinterfragen.

Hartmut Bohnacker: Mauslabor

Hartmut Bohnacker hat in seinem sechsten Semester das “Mauslabor” entwickelt.
In diesem Projekt hat er das Cursorverhalten parametrisch untersucht. Insgesamt hat er zehn Experimente entwickelt in denen bestimmte Parameter des Cursorverhaltens verzerrt werden können.

Die Experimente fanden wir sehr faszinierend, da man in ihnen erleben konnte, wie sich etwas so manifestiertes wie dem Cursor ganz anders verhielt als man es kannte.

Hartmut hat uns in dem Interview mit ihm bestärkt, in unserem Projekt zuerst verschiedene sinnstiftende Experimente zu entwickeln. Und dabei erstmal nicht zu hinterfragen, wo die Interaktionen sinnvoll angewendet werden könnten.

Untersuchung: Pointer Parameter

Interaction Model

In unserem Interaktionsmodell haben wir zwei Akteure, die direkt miteinander interagieren und jeweils eine Kraft auf eine Maus auswirken. Die Mausbewegung beeinflusst wiederum das Pointerverhalten. Zwischen den verschiedenen Pointer untereinander gibt es aktuell meistens keine Interaktion. Sie könnte aber sehr sinnvoll sein, deswegen haben wir uns in unserem Projekt auf die Pointer-Pointer Interaktion konzentriert.

Pointer Parameter

Wir haben verschiedene Pointer Parameter untersucht, die im kollaborativen Kontext relevant sind. Dabei haben wir zwischen primären Parametern und sekundären Parametern unterschieden. Primäre Parameter sind Parameter, die direkt von der Mausbewegung abhängig sind und das Cursorverhalten beeinflussen. Sekundäre Parameter sind nicht direkt von dem Mausverhalten abhängig und wirken sich auf die Wahrnehmung des Pointers aus.

Experimente

Pointer Collision

Bei diesem Beispiel wollen wir die beteiligten Interaktionspartner mit einer Masse darstellen, die sich wie in der echten Welt beeinflussen kann. So können Kräfte des einen Beteiligten Auswirkungen auf den anderen haben. Die Parameter, die wir hierbei untersucht haben, sind die Position, Geschwindigkeit (Position/Zeit) und die Rotation. Diese können wechselseitig aufeinander wirken.

Pointer Focus

Bei diesem Beispiel wollen wir die beteiligten Interaktionspartner einander fokussieren lassen, so als würde man sich im realen Leben bei einem gemeinsamen Gespräch / Arbeit anschauen. Die Parameter sind dabei die Rotation des Cursors, die auf den jeweils anderen Cursor zeigt bei einer 1-1 Beziehung. Bei einer 1-n Beziehung wird ein gemeinsamer Mittelpunkt berechnet, auf denen die Cursor zeigen.

Pointer Polonaise

Bei diesem Beispiel wollen wir die beteiligten Interaktionspartner einer Person folgen. Dabei steuert eine Person alle anderen Personen, die so dann nicht selbst steuern, sondern deren Steuerung von einer einzelnen Person übernommen wird. Die Parameter, die während dem Folgen von einer Person an alle anderen Personen übermittelt werden, sind die Position und die Zoom-Stufe.

Technologie: After Effects und Code

Um die Experimente und Use Cases durchzuführen hatten wir zwei große Umsetzungs-Tasks an denen wir auch innerhalb des Projekts weiter gewachsen sind: Code und After Effects.

Code

Durch JS Code haben wir zunächst die Funktionaliät hergestellt, wo vor allem zu beachten ist, dass man keine Scheu vor Mathe oder den schwierigeren Teilen von Web-Technologie haben sollte. Man sollte definitv schon etwas an Vorwissen mitbringen um sich diesem Thema erfolgreich annähern zu können.

Auch mit einiger Vorerfahrung haben wir nur einige einfache Experimente umsetzen können, da die Komplexität schnell zunimmt, wenn mehrere Browser (und mehrere User) auf einem Canvas in Beziehung treten. Neben der komplexen Programmstrukturen ist zudem auch die Geschwindigkeit der einzelnen Geräten und des jeweils eingesetzten Netzwerks ausschlaggebend, dass Kollaboration allgemein funktionieren kann.

Das ganze Repository kann man hier Open Source finden:
GitHub - felixhaeberle/collaboration-lab: Collaboration Lab

After Effects

Aftereffects eignete sich gut, um komplexe und kollaborative Interaktionen zu prototypen.
Man kann jedes Detail der Interaktion genaustens beeinflussen.
Doch das Entwickeln der Prototypen in Aftereffects beansprucht sehr viel Zeit und konzentrierte Arbeit. Vor allem die Variantenbildung und die visuelle Exploration sind in Aftereffekts sehr sehr zeitaufwendig. Daher haben wir mit der Zeit einen Workflow entwickelt, mit dem wir unsere Interaktions-Animationen erstellten. Zuerst sketchten wir ein Storyboard mit jedem Schritt der Interaktion und Animation. Danach setzten wir dieses Storyboard in Figma um. In Figma testeten wir dann verschiedene visuelle Varianten und entschieden uns für eine Variante.
Die Elemente aus Figma exportierten wir als SVGs und fügten sie in Aftereffects ein.
In Aftereffects animierten wir dann die Pointer und die komplexeren Animationen.

Use Cases

Pointer Handshake

Der Pointer Handshake ist eine Interaktion, mit der sich Kollaborationspartner begrüßen, verabschieden und beglückwünschen können. Es ist eine kleine, schöne Animation für die Teamverbundenheit. Ausgelöst wird sie durch zwei Parameter. Zum einen muss der Pointer schnell hin und her bewegt werden, solange bis sich der Pointer vergrößert. Und zweitens müssen die beiden Pointer innerhalb von einem bestimmten Radius befinden.

Follow and Lead Switch

Die Follow Funktion ermöglicht es den Nutzern von Canvas Tools, Teammitgliedern zu folgen, welche sich auf demselben Canvas befinden. Während dem folgen sieht, der Nutzer den gleichen Viewport wie von der Person der er folgt. Um einem Teammitglied zu folgen, selektiert man zuerst den Pointer der Person, der man folgen will auf dem Canvas. Danach macht man einen Rechtsklick und wählt “Follow” auf dem erscheinenden Menü.

Die Person, der man folgt, wird dadurch zum “Lead”, was durch ein Auge Icon im Nametag des Pointers gekennzeichnet wird. Folgt eine Person einer anderen, so ändert sich die Farbe von ihrem Nametag zu der Farbe des “Leads”. Dadurch wird sichtbar, welche Personen welchen anderen Personen folgen. Folgen also sechs Personen einem Lead, so hat der Nametag von allen Personen die gleiche Farbe.

Die Switch Lead Funktion ermöglicht es den Nutzern, den View-Lead in einer Gruppe zu übernehmen. Das ist vor allem in Situationen in der Teammitglieder nacheinander verschiedene Inhalte präsentieren wollen, wie z. B. bei Design Stand-ups. Anstatt dass jede Person einzeln im Menü die Person identifizieren muss, die als nächstes präsentiert, kann die als Nächstes präsentierende Person einfach den Lead anfordern und alle Personen in der View Gruppe folgen ihr danach automatisch. So kann man nahtlose Design Stand-ups veranstalten.

Pointer Rock Paper Scissors

Wer muss den Canvas aufräumen? Wer darf die Ebenen umbenennen? Pause machen oder früher Schluss machen?

Um bei solchen Fragen nicht zu streiten, kann man durch einen kleines ”Schere, Stein, Papier” Spiel die Entscheidung herbeiführen.

Die Rock-Paper-Scissors Funktion kann man auslösen, indem man gleichzeitig, wie ein anderer Teampartner, mit dem Pointer Kreise um einen gleichen Mittelpunkt dreht.