ios screensharing
Share your iphone or ipad screen
With the release of iOS 11, GoToMeeting users now have the opportunity to share their full device screen in an online meeting. However, while screensharing is technically possible, the user experience presented a challenge.
In customer interviews, users told us they needed to be able to share their screen because they used proprietary apps to communicate with clients, or needed to give demos of their product. Our current functionality was limiting them because they could only share a website URL or a document through a cloud service.
However, the APIs available in IOS11 don't make it easy for the user to turn on screensharing in our app. I designed a four-step tutorial for users to discover and use the new feature quickly and intuitively.
.
iPhone tutorial
In the first step of the tutorial, shown only to first time users, the user sees they must customize their Control Center settings to enable Screen recording. The button takes them directly there, so they can complete this step before proceeding.
With Screen Recording enabled in the Control Center, the user can now 3D touch the button in order to make it accessible to the GoToMeeting app. We emphasized the button with a magnified size, instead of using a highlight color, so that it would appear closer to what the user will actually see when they open their Control Center.
In this step, the user starts the broadcast of the screen to the GoToMeeting app. They are still in the Control Center, but screensharing has begun. Once this step is done, the user can go anywhere on their phone and their screen is transmitting into the meeting.
The OS provides a red "recording" bar to inform the user they are sharing their screen. In testing, users weren't completely sure what the red bar meant, and GoToMeeting isn't able to alter or label the bar in any way, so we added this step into the tutorial for clarity.
iPad tutorial
In the iPad, the tutorial is similar to the iPhone, just using iPad appropriate screens. We found that users often got lost after changing their Settings and didn't know what to do next. We decided this would be the best point for them to return to the app, get the rest of the instructions, and proceed to the Control Center instead of having them try to remember everything at once. This also provided a natural breakpoint for first time and returning users, who won't need to see this screen again, and can skip ahead to Step 2.
In this version of the tutorial, I emphasized the Screen Recording button by fading back the rest of the Control Center UI and enlarging the button. I also eliminated the other background apps that would normally appear on the left in order to reduce visual noise.
At this point, all the user needs to do is start the broadcast, but the system-provided dialog isn't very clear on where to press. I emphasized the bottom half of the dialog with darker color and larger text so users would remember the anatomy of the pop-up.
At this step in the tutorial, I want users to know that screensharing has begun once they see the red bar. In testing, some users mistook this for a shortcut back to GoToMeeting, so I made sure to explain it and call it out in the final step. In addition, I wanted to show the user in the act of sharing an app, not returning to GoToMeeting, so they know there's nothing more they need to do. I avoided showing a text-heavy app in this screenshot, because I found users were stopping to read the text, assuming they were part of the instructions. I chose a screen that used images so the user could scan it quickly.
Prototype design
In order to effectively prototype the user's flow, I created a series of mockups that included the iPhone lock screen, home screen, GoToMeeting app, iOS Settings, and Control Center. This gave the illusion of entering, exiting, and re-entering the app, which was necessary for us to test the user's ability to consume our tutorial instructions. We made several discoveries during user testing that allowed us to refine our prototype and reduce confusion.
In the iPhone user flow, we tested a push notification, an announcement page with a link to a tutorial, and a sheet of instructions. We found that people responded better to the tutorial than the text instruction list. We also decided to place the tutorial in context, only shown if the user decides to start screensharing, instead of when the app opens. This is because we learned that many users are simply attending a meeting and won't need this feature, so we didn't want to add time to their join experience.
In the iPad user flow, there is an added step of choosing to share the full screen or other types of content, such as a URL, cloud-hosted file, or a whiteboard app. In testing, we discovered that users were unclear on when they were sharing or not. We added a step that explains the red "recording" bar at the top means sharing, and also created a larger, full-screen background that appears when screensharing has started.
Sketchbook
Sketches of the flow to expose the feature to the user. We began with a more in-your-face approach of advertising the feature, but shifted to a more contextual approach, delivering information in the moment of need. I looked at many examples of tutorials, popovers, in-product help and other iOS patterns that introduced new features in order to find something that would feel familiar to users when they saw it for the first time.