New Pause Menu / UI Overhaul

[alex-shortt]

Started this branch a while back and never got to finishing it. Want to see where to take it.

https://github.com/spacesvr/spacesvr/tree/ui-ux
https://spacesvr-gjudb1xki-metaplug.vercel.app/

This would be a pretty big shift in how things work, so i want to consider pros and cons before even starting.

it's got

• a 3d rendered cursor (that can change in any way to present information such on hovering)
• no 2d pause menu, which is muuuch cleaner imo
• allows for click and drag, or double click for pointer lock. i actually think people might understand pointer lock better than click/drag since the latter requires one more action before moving the mouse for each movement, so this may not actually be great

unsolved problems are

• doesn't automatically handle first click for playing audio
• kinda ugly cursor at the moment, although i like how it kinda works like a compass lol
• extra keystroke for the user to learn to use our sites (T)
• mobile swiping to show/hide pause menu hasn't been figured out yet, although once it is i know it will be so cool

[AlaricBaraou]

a 3d rendered cursor (that can change in any way to present information such on hovering)

I really like this part, I can already imagine how with such smart cursor a website could be navigated using a VR headset only ( without controllers )

allows for click and drag, or double click for pointer lock. i actually think people might understand pointer lock better than click/drag since the latter requires one more action before moving the mouse for each movement, so this may not actually be great

I like that there is a possibility to switch between the two, but the switch isn't intuitive.
Also personally I think the one with the control lock is a problem for many users. A lot of people would not know how to make the normal cursor appear again in order to leave the page for instance.
I like the default controls and they are "smoother" while the mouse lock can move around very fast.
Also I would make the click and drag go in the opposite direction, like when you drag on google map, here it feels weird.

no 2d pause menu, which is muuuch cleaner imo

I would not get rid of the pause menu / start menu personally.
In a website that is sooo different from everything people are used to, having something that is a simple "pop-up" with buttons etc is very welcomed.
It can convey a lot of informations that we don't want to display constantly elsewhere.
And I think we're all used to be able to pause our video games and such.
While the current pause menu probably need a redesign, he is usefull and I don't see any reason to remove it as he disapear as soon as it's not paused anymore.
Could you tell me why you want to do without ? Maybe I can think of alternative to what's bothering you about the menu.

kinda ugly cursor at the moment, although i like how it kinda works like a compass lol

I totally agree on the compass thing :)

extra keystroke for the user to learn to use our sites (T)

I think you can't avoid that.
We can't expect everyone to figure it out on their own.
But I would leave that on the pause menu, or display it when someone is inactive too long ( not moving or something like this )

mobile swiping to show/hide pause menu hasn't been figured out yet, although once it is i know it will be so cool

I think a simple button will be better. As far as I know most mobile games have some kind of UI constantly showing.
There is already a controller on the bottom left, I don't think having a button to trigger the pause menu and access all the settings would be that much of a problem.

Well it looks like I'm criticizing a lot here 😅
But on a technical point of view I'm really impressed by the work.
Maybe I'm missing some of the reasons behind some of the choices.

Hit me up on Discord if you want to discuss "live" some of the points here.

Again, it's really exciting what you're building ! I really want to see the final product !

[alex-shortt]

The main qualities I'm optimizing for are immersion and onboarding

To maximize immersion, you basically have to get rid of everything that reminds you that this is a website – you want to feel like you're living in the world. That's why using our sites on fullscreen feels so much better than a maximum sized window - even just the toolbar at the top of your browser is enough to kill the illusion. (why I'm thinking about making the site go fullscreen when you press continue lol). And, of course, why the headset is magical.

The drive for immersion impacts

• pause menu: as anything that's 2d is another reminder that this is a website and not a portal into another world. this is already much better than, say, (hubs)[https://hubs.mozilla.com/82fYa8g/authentic-regal-dominion/], but I do want to find a way to eventually kill it. Even just rendering the pause menu the way it is now in 3d would be a step up.
• crosshair: obviously looks better as part of the same 3d world, especially once we animate it, add models/shaders, etc

To optimize the onboarding process, I'm looking to bring the amount of the time the user doesn't know what to do to zero. This means making it painstakingly obvious to click a button that should be clicked (i.e. tutorial, see https://muse.place).

This impacts

• new button T: that's where my concern comes from, although I agree there does need to be a key at the end of the day. reeeealy like your solution of showing the pause menu if they stop moving for a while, or maybe if they just don't use the pause menu in a while? Some hints like that are good.
• pause menu: small point, but the user should expect the same experience across every device (mobile/desktop/vr), and on vr there's no place for a 2d pause menu. obviously most people don't use vr and our userbase currently doesn't spend enough time across all devices for this to be that big a deal, but keep it in mind

To answer to some of your other points

I like that there is a possibility to switch between the two, but the switch isn't intuitive.
Also personally I think the one with the control lock is a problem for many users. A lot of people would not know how to make the normal cursor appear again in order to leave the page for instance.
I like the default controls and they are "smoother" while the mouse lock can move around very fast.

In my head, I think of the click/drag controls as the "beginner" controls and the pointer lock as the "advanced" control scheme, so hiding it behind an input sequence that's hard to accidentally do seems correct. That was my train of thought, but typing it out it's a little shaky haha. I think we really need to do some user testing on either

Also I would make the click and drag go in the opposite direction, like when you drag on google map, here it feels weird.

I will die on this grave (but seriously, depends on the standard for this sort of stuff, i think i may be the weird one here haha)

I think a simple button will be better. As far as I know most mobile games have some kind of UI constantly showing.
There is already a controller on the bottom left, I don't think having a button to trigger the pause menu and access all the settings would be that much of a problem.

I'm coming from the angle of tiktok's scroll, or iphone's pull to show the menu. you just kinda drag your fat finger down the screen and it works. might take a little bit of a learning curve, but it's hidden when not in use and requires no onscreen button to interact.

[AlaricBaraou]

pause menu: small point, but the user should expect the same experience across every device (mobile/desktop/vr), and on vr there's no place for a 2d pause menu. obviously most people don't use vr and our userbase currently doesn't spend enough time across all devices for this to be that big a deal, but keep it in mind

I see what you mean, but I also feel like VR is the only one that doesn't need that pause menu etc.
I think everything work out of the box as expected in a VR headset, the user will control the webpage the way he controls everything else with his headset.
All my concerns are directed towards the mobile/desktop because for them, the experience is extremely far from everything they're used to see.
Also all VR browser user are "young", know they're exploring etc, I'm not worried about them.
On the other hand, for Desktop user I've seen people working on Desktop all year long that don't know how to exit a full screen mode..

But I understand that you have a vision and a goal, they'll cause accessibility issues here and there and I'll try to help fix as many of them in an unconventional way to respect what you're trying to aim at.

Then I guess you should go ahead with the no menu / no 2D, full screen etc and we'll work on each issue that come from the initial vision.
( like if someone start pressing a lot of key randomly, we exit fullscreen or display a pop-up help )

I will die on this grave (but seriously, depends on the standard for this sort of stuff, i think i may be the weird one here haha)

The Mozilla example you linked to used it too and it didn't feel weird there. Maybe I got used to it over night or it's because it's less sensitive but It's not such a big issue for me anymore :)