Collapsible interfaces are great. Bootstrap’s Collapse element comes to mind. As does Wikipedia’s collapsible sections you get when viewing from a Mobile. They make it simple to compact a lot of information into a small space. They allow you to easily jump around a document giving you the choice of expanding one section at a time so less scrolling is required. But, what happens when you want to make things compact again? What if you’ve expanded something, scrolled through it, and now want to move on to another section? You have to either scroll all the way back to the top or bottom of the section, depending on which direction you want to go. This can really make for some tired thumbs on a mobile device.
Sure, we could implement one of those trendy scroll-to-top arrows. That at least let’s you work your way up. But, what about the other direction? I think we can do better.
Below, on the left, you’ll find the usual collapsing section user experience you know and love. On the right, you’ll find the same interface with a subtle improvement.
Without Improvement
With Improvement (ironically, this may not behave correctly on mobile due to being an iframe)
You’ll notice that the one of the right let’s you collapse the section you’re browsing even after you’ve zoomed past its title. This lets you move up and down without the thumb workout. The title also shinks a bit to give you that little bit of extra real estate. Pretty nifty, eh?