In the project "Collaborative Canvas Interactions" we looked at pointer-pointer interactions in canvas tools and developed various experiments and applications for this. The project is part of the Erasmus+ project "Digital Tools for Creative Collaboration", which is a joint teaching and research project of the Design University ESADSE in St. Étienne, France, the Estonian Academy of Arts in Tallinn EKA and the University of Design Schwäbisch Gmünd.
In various experiments, we have investigated pointer parameters that are relevant in a collaborative context.
We have studied the parameter: position, velocity (position/time), rotation, and zoom level and how they
affect each other.
Using the insights from the experiments, we thought further about collaborative interactions. We considered in which situations such interactions could be used for collaboration in Canvas tools.
The Pointer Handshake is an interaction for collaboration partners to greet, say goodbye and congratulate each other. It is a nice little animation for team bonding. It is triggered by two parameters. First, the pointer has to be moved back and forth quickly until it enlarges. And second, the two pointers must be within a certain radius.
The Follow feature allows Canvas Tools users to follow team members who are on the same Canvas. While following, the user sees the same viewport as the person they are following. To follow a team member, first select the pointer of the person you want to follow on the canvas. Then right click and select "Follow" from the menu that appears and the person you are following becomes a "lead", indicated by an eye icon in the pointer's name tag. If one person follows another, the color of their Nametag changes to the color of the "Lead". This makes it visible which persons follow which other persons.
So if six people follow a lead, the nametag of all people has the same color. The Switch Lead feature allows users to take over the view lead in a group. This is especially useful in situations where team members want to present different content one at a time, such as design stand-ups. Instead of each person having to individually identify from the menu the person who will present next, the person presenting next can simply request the lead and everyone in the view group will automatically follow them after that. This allows you to host seamless design stand-ups.
Who needs to clean up the Canvas? Who gets to rename the layers? Take a break or finish early? To avoid arguing over such questions, you can use a little "rock, paper, scissors" game to make the decision. The Rock-Paper-Scissors function can be triggered by simultaneously spinning circles around an equal center point with the pointer, just like another team partner.
Aftereffects is well suited for prototyping complex and collaborative interactions, where every detail of the interaction can be precisely controlled, but prototyping in Aftereffects takes a lot of time and concentrated effort. Especially variant creation and visual exploration are very very time consuming in Aftereffects. Therefore, over time, we developed a workflow that we used to create our interaction animations. First, we sketched a storyboard with each step of the interaction and animation. Then we implemented this storyboard in Figma. In Figma, we then tested different visual variants and decided on one variant. We exported the elements from Figma as SVGs and inserted them into Aftereffects. In Aftereffects, we then animated the pointers and the more complex animations.