I found this very interesting feature online. Screenshot:

enter image description here https://larsjung.de/pagemap/latest/demo/text.html

It shows where you currently are on the page using a sort of 'mini map', which reminded me of mini maps used in some games.

I can't seem to find any websites that actually put this to use. I'm very interested in the UX benefits of using a feature like this.

Do any of you know any examples where a 'mini map' like shown above is used in a vertical web interface?

(This isn't an opinion based question, all examples are welcome)

2 Answers 2


The Chrome Browser provides a similar interface when you search for a word on a page. On the righthand side of the viewport, it provides users with a map of where that word has been found on the page. Each yellow line represents a result. Moving the scroll indicator to a spot on that map brings that section of the page into view.

Screenshot of a wikipedia page. The word "map" has been searched in the browser, and a line of yellow markers run down the right side of the viewport.

  • I like that—shows the density and location of the search term. Commented Dec 2, 2022 at 17:20

Somewhat similar, there's the follow-the-leader type navigation feature many documentation sites use.

A nice example is Vultr.com. Load that page, then start scrolling down, the left side navigation follows. This example having two level navigation, at the beginning only top levels show but as the page is scrolled each section having subsections opens, and closes, as the page scrolls by.

Scrolling down a-ways...

follow the leader


The example in the question, albeit a mock-up, doesn't reveal a meaningful "birds-eye view" of the entirety of the page. A page of heavy graphic content with the graphics being able to be represented in recognizable reduced or thumbnail form may be suitable for that type of depiction, but replacing text with blocks communicates nothing more than the scrollbar already does sufficiently, i.e., where you are and what percent of the total page the page viewport reveals.

Although, as in the Vultr.com example, summarizing the page headers in a readable form provides an excellent mental map for users to easily see where in the bulk information they are at, and where they can go from here.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.