A Smarter Scrollbar for Mobile

Isil Uzum
3 min readJan 25, 2016

--

Imagine you are reading a long article on your mobile phone.

Chances are you see something you would like to look at -like a link for getting more info about a point in that article- but first, you want to read further without being distracted and then turn back to it if you need. For a long text on mobile this would mean scrolling and scrolling back and forth until you find that link again.

Or imagine you’re browsing images on an app/mobile site with infinite scroll. There are some interesting ones to look at, but you want to continue first to see more choices, and then if there isn’t any better come back to them… which again would be a mistake because then you would have to scroll back until you find them or possibly get lost and give up.

The examples can be multiplied like browsing tweets, looking for inspiration on apps with images and so on..

At one of these moments I wondered why there isn’t a simple solution. Well, it’s not the biggest problem of the world, but why can’t I just mark the things I may want to turn back to and continue whatever I do, reading, browsing etc…Without having to open anything in a new tab, without having to save or favorite immediately.

Other than the fact, that you might prefer not being distracted before going further until the end of a content; there can be cases that

..you won’t be interested anymore in that link after reading further or you’ll find a better image by browsing further and won’t need the previous ones you’ve seen.

In these cases closing tabs, removing saved things, unfavoriting etc. would be just losing time, making your experience more complicated.

Scroll Marker Idea

See animation on Dribbble

So the idea is, double tap* on any point to leave a mark on scroll bar, and tap on that marker to turn there. To remove it, just long press and drag it outside. Many markers could be added, each having another color for being easily distinguished.

For not interfering with content, they become hidden once you begin to scroll -like Safari tab bar- and appear again when scrolling back.

Another less intrusive way could be showing hidden markers through a gesture, like a triple tap for example. In that case, since you would show them only if needed, more content could be added to this marker layer -for example a “Remove all” or “Edit” button to remove multiple at once-. Once you begin to scroll or tap anywhere outside markers, they would be hidden again.

For pages with infinite scroll, where the page becomes longer as new content loads, relative place of markers could be updated, based on the total length of the content.

* Where double tap could trigger other actions, another input for marking can be used, like long-press and choose Add marker, similar to what I suggested for removing them. A better option -which would be harder to be adopted though- could be defining a new gesture to be used universally without interfering with selectable content.

What I described here is an initial idea, it may be refined and improved based on technical restrictions of platforms, based on user tests, maybe changed completely through better ideas. If you‘re annoyed with that same little problem or if you have some feedback or suggestion, it would be great to hear your thoughts.

Thank you for reading! You can find me on Twitter and Dribbble where I share lots of other product design concepts :)

--

--