Immersive Classroom Hub

Explore

Art History Parthenon

Student Desk Map

UI that allows student to autonomously travel between spaces in a virtual world

Student UI Mockup

⁠

ShapesXR Mockup

⁠

The 3D map feature allows students to navigate the Immersive Classroom virtual world, providing them with autonomy and engaging them in exploration. With this feature, students can discover new place on their own, invoking excitement with the allure of personal discovery rather than a guided exploration like many other learning experiences.

⁠

💡 Idea overview

The map will incorporate animation, 3D elements, and game aligned styles to make it a cohesive part of the student’s immersive experience. It will include points of interest the student can transport to and an overall layout of the virtual world they are exploring to give them context for each scene they visit.

🧩 Fitting into Immersive Classroom

Immersive classroom has the opportunity to provide two key aspects missing from past, linear dreamscape experiences:

Experience Autonomy

Immersive Interaction

Group Instruction: The bulk of the immersive classroom experience will likely be lecture based, leveraging the power of VR to bring in 3D models (which the students will also have the opportunity to autonomously explore), take the class to different locations, and view places, things, and time periods that are simply impossible to see in real life. As the class moves and explores together with the guidance of a professor with the super power of VR at their fingertips. This part of the experience will encourage collaboration and interaction weather it be raising your hand or participating in group discussion with peers. Benefits of this style of experience include:

The teachers ability to use VR technology to do things never before possible in the classroom

The real classroom-like interaction making the student feel as if they are really there not just watching a recorded linear flow

The ability for the teacher to use their instruction skills in a classroom-like setting to gauge engagement, watch for raised hands, and connect with students

Individual Exploration: The second part of the Immersive classroom experience that really provides additional student autonomy and engages a student natural urge to explore, is the opportunity to transport to different locations within the virtual world and discover points of interest that THEY are interested in. This is the part where the Student Desk Map comes in.

Because several of the benefits that come from the ability to use VR while maintaining a traditional classroom structure, the opportunity for students to explore different locations on their own autonomy should exist separately from teacher guided instruction. If these were to exist at the same time it would likely be distracting for both the instructor and the students detracting from the individual exploration and the class instruction.

Keeping these separate and leading with time for instruction followed by a shorter exploration period for students will allow the students to first learn what locations they are interested in and then revisit the places that pique their interest. It will prevent the distraction of moving students for the teacher, and give the students greater autonomy when they do get to explore.

➡️ Ideal User Flow

Exploring After Lesson: The teacher enables 5 minutes of exploration after teaching the lesson so students can enjoy expanded autonomy and revisit the places they have learned about and engage with points of interest in more detail.

Interactive 3D Map: The students see a 3D map pop up on their desk along with instructions informing them how they can navigate the map by clicking on the pins.

⁠

Selecting a Pin: The student clicks on a pin to try it out and sees a preview of the selected location pop up where the instructions used to be and the map pin of the focussed area turns gold.

Preview and Change: The student sees the the picture in the preview and decides that is not where thy want to transport to so they instead select a new map pin and preview another location.

⁠

Initiating Travel: The student likes the look and description of that location so they click the “GO” button to transport to the new location.

Transition and Compass: They see the current location symbol update tot he new location as they find themselves with new surroundings, there is instructions on the desk telling them how they can pickup a compass that has appeared and explore points of interest within this new space.

⁠

Using the POI Compass:They choose to engage with the compass and after colliding with it with their hand, it sticks to their hand and the “hand with clicker dot” system of the right hand is changed out for a “ray-cast laser pointer”. There are also now numbered circles around the space on interesting elements of the space they are in, these numbered circles are also seen as a short list with names where the current location information used to be.

Interacting with Points: After moving the laser to one of the numbered circles the ray glows for a moment and a text box appears close to the circle (relative to the student, although much closer allowing them to read the text and see the point of interest it is describing).

POI Timing (Visual Representation): They notice that a darker (but still translucent) background is slowly filling front he bottom to the top, when it reaches the top the text box bursts and disappears a rather satisfying thing to watch.

Skimming POI content:The student then clicks another circle with their laser pointer and another box pops up, they skim the content and click ANOTHER circle before the first box has the chance to burst and upon clicking the new POI circle the previous box immediately bursts and disappears.

⁠

Recalling a Location: After they have skimmed each of the POIs the student remembers another cool place they visited during the lecture but forgets the name of it of the lecture portion of the class. They click a random pin on the map but it is not the place they were thinking of.

Navigating Map Previews: The student notices the arrows next the “Go” button and clicks one noticing it changes the focus/preview location. This new spot is still not the place they remembered. They are able quickly flip through the locations using the arrows and find where they were looking for.

Timer and Limited Time Notification: After transporting to their desired location and exploring the POIs there they get a notification that there is just 2 minutes left for exploration. They notice that the bar in front of them above the “X minutes left” text is now red and has almost reached the other end of their desk)

Quick Explorations: They quickly transport to the remaining locations for a quick look around without engaging the POIs, noticing the red bar finally reach the other side.

Return to Origin: The student receives a countdown banner notifying them that they they will rejoin the class in the origin location in 10 seconds. After the timer reaches 0 the transport back and no longer have access to the exploration UI on their desk.

⁠

🔌 Features

🔌  Features

Feature Name

Description

Priority

Select list

Points of Interest

Highlighted points of interest to teleport to

Must Have

Visual Feature

Transportation

Ability to transport between points of interst

Must Have

Functionality

World Map

View of the entire virtual world

Must Have

Visual Feature

Labels

Location names shown in labels

Must Have

Content

Description Info

Description of location

Must Have

Content

Location Preview

Ability to see what each location looks like before transporting

Should Have

Visual Feature

Teleportation confirmation

Check with student after a location is selected for transport but before their location is moved

Should Have

Functionality

Active State

Highlights the current location on the map

Should Have

Visual Feature

Focused State

Ability to view a location but without selecting it (include visual indication of the focused location)

Should Have

Visual Feature

Intro Animation

Some world aligned interaction that shows the map appearing on the students desk

Should Have

Visual Feature

Compass

Show direction and give context on location orientation

Other Ideas

Visual Feature

Instructor Location

Show what location the instructor is in at any given time

Other Ideas

Visual Feature

Map Position

Give the students the ability to manipulate the position of the map

Other Ideas

Functionality

Transportation Animation

Short animation that gives the students the impression they are being teleported to a new location (💡 hole in the point of interest that grows and envelopes the student)

Other Ideas

Visual Feature

Go Back Button

Allows the user to return to their previous location

Other Ideas

Functionality

Highlighted features of a space

Certain elements/points of interest within a virtual space that students can see highlighted and explore at their own pace.

Other Ideas

Visual Feature

Map Regions

Give the instructor the ability to allow students to move around while keeping them in a general area they are instructions about, and give students the ability to see where the region they are bound to fits into a greater setting

Other Ideas

Functionality

Ways to emphasize UI components

Pulsing, bouncing, material effects (like a shine)

Other Ideas

Visual Feature

POI interactions

Pieces: Instructions, Physical pointer compass (virtual object), Info on the POI — the POI instructions will populate in the preview section once the User transports to a new location, when the user picks up the compass they can explore the POIs with it, when they want to exit POI mode they can put the compass back, if they select a new map pin to preview the instructions will go away and the compass will automatically return to its resting place

Should Have

Functionality

There are no rows in this table

⁠

💻 Interaction Points

Using the POI Compass

Pick up- The points of interest feature allows the user to pick up a compass that appear on their desk through a collision interaction

Laser Beam Hover- The compass acts as a long distance pointer/beam. When they hover over a POI in the space a modal pops up that has information on that point of interest.

It is a lot of strain to maintain a hover with a relatively small POI so this interaction needs to be refined- other options include

A delay after the hover-out to give the viewer enough time to read it

Keeping the modal until a new POI is hovered on

Some sort of delayed selection and deselection of the POI

Location of banner- should the banner appear in close visual proximity to the POI? Should it appear on or near the desk?

Interactive 3D Map

The user will have a refined collider that appears in front of their hand that the use to click the map pins that contain collision triggers

Upon collision the Location Preview will immediately update

There will be a red map style pin above the current location.

The pin on the previewed location will appear in a different location to show that it is in a focussed state

Location Preview and Initiating Travel

The preview information will be followed by a call to action to “Go”, which will transport the student to that location

In the initiate map navigation instructions there will be a button in the same location as the “Go” button with the text “Start” on it. This button initiates a preview location from which they can choose to transport or continue to preview other locations.

In addition to the the “Start” button and the map pins, students can quickly switch through locations using the arrows on either side of the “Start” or “Go” button

⌨️ Content Needs

Current location information- 4 short bullet points of 7-10 words

one Bullet point that gives a overview of what the location is

3 supporting facts that give context to where the student is

Preview Location Blurb- One or two sentences: about 20 words or 140 characters total

Information that briefly introduces what a location is

Points of interest- A short title of 1 or two words and a blurb of about 25 words

❓ Questions and Decisions

Should student instruction and student exploration/autonomous location changing be separate or be available simultaneously?

See Fitting into the Experience section

Should the students we able to see each other during their individual exploration time?

Crowding is one of the worst parts of visiting interesting locations. Think if the students were looking at a small feature like the Mona Lisa or an intricate part of the Greek architecture, if it was a popular location crowds could put student very far away rom what they are trying to explore.

We could also implement a waiting system to limit the number of students in a location but this would cut into the likely limited exploration time.

There could be duplicate rooms to accommodate over crowded spaces but this would likely be a larger load on the servers and could also be disorienting if you went to the same space as your peer but they were not there.

If even a single student was be distracting or problematic without teacher supervision it could ruin the experience for a larger group (IE call of duty lobbies)

They already get a chance to collaborate earlier in the experience

Yes

Its interesting and collaborative to see other students

Its fun to experience things with friends

Students could recommend cool locations to each other and explore collaboratively

What happens to the compass when the user clicks a preview location

As of the current iteration (8/9/2023) the compass is automatically docked to the desk when the new preview location pops up but it does get slightly crowded on the desk

Should the compass stay in the users hand until they change locations or put it down?

How does the hand collider work for desk UI with the hand with the compass ray-caster active?

Where do the POIs exist in space?

On the actual items they are highlighting?- they could be very small and far away (and would likely be varying sized targets depending on their distance) but this would be the easiest dev lift

They could all be equi-distant from the student and just appear next to their correlated POI elements in relation to the student (this would take more calculation on the dev side)

📐 Design Iterations

See sub-page for figma mock-ups

3D Shapes XR Mockups

⁠

📕 Product terms

Focussed Location- Location the student is looking at but has not yet decided to transport to

Highlighted state- to show focussed location

Current Location- The Location the user is currently at

Active state- to show Current location

POI- Point of interest/ highlighted features of a space that students can explore

Ray-Cast- a laser like selection tool that pops up when the student selects the compass POI explorer

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.