Improving Long Distance Teamwork
Interaction Design / User Interface Design - Individual work completed out of self interest.
Mouseshare is a proposed feature for Skype that would allow a user to share his or her cursor when another is screen sharing. This would help him or her point to an item on the other's screen without having to verbally describe its location.
Although this project was done using the Skype interface, the concept is applicable to a range of other organizations looking to innovate video conferencing, such as Slack, Microsoft Teams, Workplace by Facebook, and Google Duo.
A recent collaborative project that I worked on, Encompass Education, was primarily done over Skype. Consequently, the workflow would often consist of one of team member editing wireframes on her screen while the other two provide feedback or suggestions. One major pain point during this workflow was the inability to point to items on another person's screen. This video documents one instance of this pain point.
To begin conceptualizing what mousesharing would look and act like, I tried to find existing examples of multiple cursors inhabiting one space.
To assist users, Apple Support provides a screen sharing service that lets support members use a red cursor to point to locations on the users' screen.
Google Docs visualizes multiple users editing one document through brightly colored text cursors.
Screenhero gives everyone in the group a fully functional cursor to manipulate the device of whoever is screen sharing.
Join.Me allows the person that is screen sharing to give over control of his or her cursor to other people in the conversation.
Clicking vs Pointing
Join.Me and Screenhero offer users who are not screen sharing the ability to click around and manipulate the screen of whoever is. While this could be useful for certain situations, it goes beyond the pain point that my team members and I consistently encountered (being able to point to a specific spot on the screen sharer's screen). In addition, I see some problems arising from multiple users manipulating a UI that is only meant for one person.
This being said, if I was designing a real feature for Skype, I would have done design research to gain tangible data on the benefits of clicking vs pointing and would have perhaps come to a different conclusion.
Next, I brainstormed the functionality for a pointing based mousesharing feature. I focused on how the user would activate/deactivate mousesharing and what would happen if the user wanted to click on something outside of the screen sharing window. When using Apple Support, I noticed that the user could see the supporter's mouse moving pack and forth when he/she was 'clicking' on an item on the user's screen. I thought that showing some indication of clicking would also be a useful functionality and brainstormed ways of visualizing this as well.
I decided to work off of Skype's existing UI and simply add another button to the bottom menu to activate mousesharing.
First, I experimented with different ways to convey the button's off state.
Button: On-State & Accent Color
Referencing Google Docs, I decided that the shared mouse and its activated button would have an accent color. I reasoned that when the button is in it's on-state, it would be filled in with the chosen accent color.
Although I didn't explore this extensively, I imagined that if multiple people were sharing their mouses, each would have a unique accent color. I experimented with a range of colors and ended up selecting the one on the far left. This is because it fit nicely with the Skype UI's existing primary color scheme.
I also explored what the cursor would look like. I decided to make it slightly larger than a the actual one. This, combined with the bright yellow color, makes it feel less potent than the actual cursor; clearly indicating which one is in control and which one is acting as a helper.
First, I prototyped the two individual animations.
Then, I put the animations in context. This video shows the user activating the mousesharing feature and clicking on an item on her partner's screen. Both animations were completed using the Origami prototyping softwar.
Maayan Albert © 2019 | firstname.lastname@example.org