Nreal/2021
Nebula Tutorial
Redesigned the Augmented Reality Glasses tutorial with interactive tasks and ergonomic layout which improved learning efficiency by 27%.
Intent
Intern @Nreal
Timeline
2021.4-2021.7
Team size
1 UX Designer (ME)
1 UX Engineer
1 Product Manager
2 Developers
1 UX Engineer
1 Product Manager
2 Developers
Reponsibility
End to end product research & design
Project Overview
What is Nebula?
The operating app on the phone that controls Nreal AR glasses
Nreal is an Augmented Reality glasses controlled by smartphone. When connected to the phone, the spatial operating system called NEBULA will be displayed in the glasses. And the user can use the the phone as controller to interact with the system.
Problem
The narrative tutorial failed to help users understand the interaction
However, with this new patter of interaction, current tutorial is still vague and boring to help new users grab the efficient way of using their phone as controller and we got a got complain about the "insensitive interaction".
Solution
An interactive tutorial that engages user and check the "learning result"
Animated Instructions to help user build new mental model
Interactive tasks that guide user step by step
Real-time hints to scaffold a smooth task experience
Research
Background
Users reported that the glasses failed to response as expected
We noticed that 4 out of 40 feedback mentioned that the laser in the spatial system wouldn't move or move faintly when they moved the smartphone, but we've never met the same problem. So we started thinking:
"Could it because the users used inefficient way to control instead of the system has performance problem?"
"Could it because the users used inefficient way to control instead of the system has performance problem?"
Validating hypothesis
User test result showed that users are using misaligned mental model
I recruited 4 administrative colleagues who are unfamiliar with mixed reality products. And I asked them to do 4 essential tasks in the system to observe their behavior.
What user did
Most efficient way
Insight 1: Users are using a 3D controller in a 2D way
During the test, users move their phone up and down in the same plane or try to swipe the smart phone to move the laser, which means they applied their mental model of computers and smartphone rather than controller.
Insight 2: Users didn't want to "waste time" in current tutorial
After the test, I asked them to go through the existing tutorial to see if they can figure out the right way. However, they quickly clicked through all the steps to try things out, therefore missed the chance to grab their mental model.
Users skipping the tutorial with the next button
Design goal
How might we make sure users knows how to use the controller after tutorial?
Goal #1
Pay attention to instruction
Success Matrix: User skip less than 10% of the steps
Goal #2
Use the efficient way to move
Success Matrix: User changed to the right mental model after tutorial
Goal #3
Know the key interactions
Success Matrix: Users complete the interaction tasks after tutorial
Design Process
Version #1
How might we engage users in the tutorial?
Competitive Analysis
Linear tasks are better for novices
After trying several product level tutorial and application level tutorial in both VR and AR, I found two main type of interactive tasks listed below.
Even though free exploration is more immersive and playful, Linear tasks are more friendly to novices. Since the prioritized goal for a tutorial is a smooth experience, linear tasks fit our goal better.
Linear & controlled tasks ✅
Free exploration ❌
Ergonomics analysis
Instruction should be moved to the prominent view area
I also checked the vision ergonomics to identify the best distance and layout for tutorial content. Based on the guideline, text contents should be closer to the user to improve the reading efficiency, while keep the instructions text in the middle makes it stays in the user's vision focus.
Distance best practices
Angle best practices
First Version
Interactive tasks and animated instructions to engage users
Animated instruction
Interactive tasks
CONCEPT VALIDATION
Users are attracted but still get stuck from time to time
Even though 5/6 successfully changed their way of using controller right after seeing the animation, there are still 4 out of 6 participants get stuck in the tasks because they didn't pay attention to the instruction on the side.
Version #2
How might we provide effective hints to guide user through the tasks smoothly?
Getting inspiration from learning science
Good hints are adjacent, promptly and incremental
I organized a brainstorming session with the team to ideate ways of comparison, and landed on this interactive chart that allows instructional designers to filter and check learners' improvement of each skill.
# Adjacent
A good hint should be positioned right next to or even on top of the task.
# Promptly
A good hint should show up right after an mistake happens.
# Incremental
A good hint should provide a further explanation when users fail again.
Second version
Instant hints to help users out when they are stuck
Contiguity hints that show right above the task objects
If users failed to take any action for 2 second, the hint will show up to tell them what to do.
Promptness hints that show immediately when user moves unexpectedly
To avoid users try random interactions repeatedly and move the interactive object out of scope, I added hints with conspicuous color as long as user moved the object in an unexpected way.
Promptness hints that show immediately when user moves unexpectedly
If users stop in the middle for any reason, we'll also provide feedback to users indicating their current status and what they should do next.
Result
Evaluation
The new tutorial is attractive and easy to follow
In the final round of user test after iteration, most of the testers showed great interest to the instructions and successfully finished the task after tutorial.
Goal #1
Pay attention to instruction
Success Matrix: User skip less than 10% of the steps
Result: 6/6 of the users spent time interacting with content in each step.
Goal #2
Use the efficient way to move
Success Matrix: User changed to the right mental model after tutorial
Result: 6/6 of users rotate the phone to control the content after tutorial
Goal #3
Know the key interactions
Success Matrix: Users complete the interaction tasks after tutorial
Result: 5/6 of users completed all the key tasks in the operating system
If i had more time
Add multi-modal feedback
Given the limited time, I only had chance to dig deep into the visual feedback design, but that's not leveraging the full potential of Augmented Reality. If I had more time, I'll add more modal of feedback like sound & haptic feedback to indicate the status.
Fine tune the tasks
The current version embedded a stencil effect in the task to add fun and novelty with Augmented Reality feature, which did provide a glance into the Spatial System. However, since tutorial is the first content that users will encounter after getting the product, it would be better if the tasks could be more related to the product and serve as way of branding as well.