Distraction free "zen" mode

[TilBlechschmidt]

First off all: Thanks for building this amazing tool! It is really helpful in learning steno 😊

Playing around with other learning/typing tools I had the idea of a distraction free mode for TypeyType. It would be a mode where all non-typing related UI elements are hidden and (optionally) the browser goes into full-screen mode until the lesson is completed. Something along the lines of this:

This is missing some obvious way to exit zen mode and the nav bar is somewhat broken margin wise but it should convey the idea 🙂

Another idea that I would personally really like is leaning more towards the monkeytype route where the text is scrolling in a centered container and the steno hints might be situated at the bottom below the box. Though that is just an idea and might need some experimentation to see what works and what does not (dark zen mode? 🙏). I'd be happy to contribute to the design process though and give feedback!

[didoesdigital]

Thanks for sharing your ideas! And thanks for mentioning Typey Type's really helpful in learning steno, that's nice to hear 🙏

I've moved the text layout part of the issue to its own issue and added some thoughts there: #61

Fullscreen mode could be fun! Out of curiosity, what do you think would be good about having that? What are the benefits?

There's already some functionality kicking around for toggling "fullscreen" behaviour that uses an icon button (for flashcards on small screens):

Perhaps we could riff on something like that?

[TilBlechschmidt]

The fullscreen behaviour from the flashcards looks like a great start — I was not aware it exists! Some breakpoints might need adjustment though, at some very particular dimensions unnecessary scrolling is required (ahh responsiveness ^^)

To me, the benefit would be "distraction"-less typing. I noticed (and maybe this is an early learners curse) that whenever I get stuck on a word even just for a brief moment, I get sidetracked by unconsciously looking at the surrounding screen contents. By reducing these to a minimum, it (potentially) becomes easier to stay focused and immediately think about a stroke instead of "wasting" a couple of seconds mentally processing other UI elements. This is not limited to Typey Type's interface btw and includes other things like say open tabs — which is why going "true" fullscreen could be beneficial.

[didoesdigital]

Thanks for the details! Especially about the early learning experience and the impact the distractions have on your steno. Great point about considering "true" fullscreen.

I wonder if toggle fullscreen should be connected to starting/stopping the lesson or separate. I think separate (like how the metronome works) gives the student more control over when/how it happens, including turning it on before starting the lesson to get ready as well as after the lesson has started in case you forgot to turn it on earlier. On the other hand, hitting something like "Exit fullscreen" and then "Stop" might add extra seconds to the lesson and make folks anxious about losing speed according to the Words per Minute (WPM) score. Thoughts?

[TilBlechschmidt]

Wording:
Fullscreen == Browser fullscreen
DistractionFreeMode == Typey Type UI declutter

Thoughts:
I would say that the fullscreen mode should probably always be a manual toggle and should never happen automatically. Especially on macOS it is tied to a somewhat lengthy animation and some people generally dislike using browsers in true fullscreen. However, DistractionFreeMode is another story. I definitely agree that manually enabling/disabling it before/after each lesson would be an annoyance. I could think of two possible solutions:

1. When the user enters DistractionFreeMode, deactivate it once the lesson is over but keep the "state" in say window.sessionStorage so that it will be auto-enabled the next time the user starts a lesson
2. Make it explicit by default (toggling it on/off) but add a persistent setting "enable DistractionFreeMode by default when a lesson starts"

While 1) might be convenient, it could be too-much-magic™ and confuse some users. I would probably prefer 2), maybe with a prompt that asks the user whether the DistractionFreeMode should be enabled by default the first time it is activated (or maybe only after the user used it a couple of times and knows what it is all about).