Site is broken in mobile safari. Can't scroll at all.
Apologies for the directness, but your definition of working doesn’t align with others then. If you mean “working as intended” where the intention is a hard to read and clumsy ux, then yep it’s working. As a proposal to how to make it less clumsy and easier to read, maybe consider having the text not inside the bars?
Do you have any other feedback? What is it specifically about the UX that you find clumsy? I'm still quite new to this sort of thing and do want to improve.
A typical design pattern on mobile is that if information is obscured for some reason, you click on it to expand it. Consider a drop-down text box on a blog: there's a little arrow and cut-off text with an ellipsis (...). When you click on the arrow, the cut-off text expands to fill the screen and allows you to read the rest of it. In contrast to what other users have said, this doesn't need to be idempotent. Tapping again hides the box.
To apply this design pattern to your site, simply make it so that tapping anywhere on a bar brings the UI to a known state, eg with the bar in the center with the text at a readable scale. This would work either horizontally or vertically.
Benefits:
- Your idea of the UI rescaling is preserved, and you can preserve the animations between states. I think the "rescaling bars" idea is fun.
- Cause and effect is preserved. If I want to read the text on the bar, I should not have to click on some arbitrary point above the current location of the bar.
- Further, the user does not have to hunt for the correct spot to click on a bar to make the text visible. Instead, clicking on a bar immediately and always makes all the information on that bar fully visible, by design.
I think this tweak would significantly improve the experience of interacting with the website.