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.
In verschiedenen Experimenten haben wir Pointer Parameter untersucht, die im kollaborativen Kontext relevant sind. Wir haben die Parameter Position, Geschwindigkeit (Position/Zeit), Rotation und Zoom-Stufe untersucht, sowie wie diese sich aufeinander auswirken.
Mit den Erkenntnissen aus den Experimenten haben wir die kollaborativen Interaktionen weiter gedacht. Wir haben überlegt in welchen Situationen solche Interaktionen bei der Kollaboration in Canvas Tools verwendet werden könnten.
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.
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.
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.
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.