Attached is an in-page navigation example, user expectations are managed by a visual glimpse into the page structure at the side to the right edge of the viewport. Users can jump to different in-page sections by clicking on the dots. Each dot has a hover state showing the title of its section.

Where does this in-page navigation element originate from, and what is the purpose of it? It looks like this could actually suit a touch screen laptop user, albeit with improved thumb accuracy. But I'm not really sure. Could someone enlighten me?

From Change dot org

enter image description here

  • 2
    Sounds more like a rant than an UX question. 'Would you agree that his interface is poor' questions are not a good match for this site. Read faq for more details.
    – rk.
    Commented Jun 25, 2013 at 17:52
  • You've misunderstood this completely, I'm not saying anything negative I just wanted to know if this particular UI element could also work in a way that it wasn't intended as in for touch.
    – dpg
    Commented Jun 25, 2013 at 22:44
  • @dpg I've made some substantial edits to your question, to make it more answerable and less of a rant question. If you disapprove of my edit, hit the edited... link above and roll back my suggestion to the version you prefer. Commented Jun 26, 2013 at 7:22
  • 2
    I like the direction you've taken this question, it's definitely more open and answerable, although I've further refined the question detail, it now looks ready to go.
    – dpg
    Commented Jun 26, 2013 at 13:54
  • 1
    @dpg Super! Collaborative editing rocks! Commented Jun 26, 2013 at 17:57

4 Answers 4


Looking at the site it seems to serve the purpose of mainly being a visual indicator of where the person is in the page while also trying to serve as a non intrusive page specific sticky menu which quickly helps him navigate to important sections of the page.

enter image description here

However the main problem with sticky menus is that they tend to occupy significant real estate space and obscure content and this design tries to avoid that by keeping the dots as a visual indicator and the on hover showing that they utilize them dots to navigate to specific sections in the page.

To quote this article about sticky menus


If not done carefully, sticky navigation can be distracting. Some sticky elements get delayed when bouncing back into position as the user scrolls down the page. Others are so tall or wide that they dominate the layout and impede access to the content. Navigation should be easily accessible but should not compete with the content for attention.

That said, this might not really be effective in Mobile as the site is not responsive (as Alexey pointed out) but also the dots require the users to hover over them to find what they indicate.

  • If a similar design pattern of dots were to be used on a tablet, it could be a handy minimal TOC within reach of our thumbs.
    – dpg
    Commented Jun 27, 2013 at 9:34

A little research showed:

  1. The site is not responsive, i.e. it does not work well at small screen resolution – try to shrink the browser window and you don't have access to those dots. So the dots are not intended for touch navigation.
  2. The dots themselves are kind of table of content. Looking at the source code and extracting some semantics from class attribute of the whole nav block. It is "quick-scroll", so it just lets to jump to appropriate section.

Considering the results, I can say this is good idea on navigation across rather big content. But its implementation is not so good. The main drawback is invisible link names.

  • Two of the four link names are visible; News & Supporters but it's inconsistent. Although not responsive it seems adaptive because the dots hide roughly around 1024.
    – dpg
    Commented Jun 27, 2013 at 9:28

This kind of thing goes all the way back to "anchor tags" proposed the earliest drafts of the HTML standard. The original idea was that traditional documents could be easily marked up as "hypertext" for digital browsing by turning the outline or TOC into a series of links to the relevant sections of the content.

The intent, then as now, is to prevent "digging", having to scroll through the document (and with a long one the scroll bar's not much help) to get to the content you're actually interested in. Now, in the days of dynamically-generated, dynamically-updated "web applications", we find it still has value as a "quick nav" feature that gets you where you're going, reducing bounce rate etc. This particular implementation is a little odd in that you more often see this kind of control in a banner or to the left as an "outline", but it has the same basic purpose as a TOC.


The dot (symbolic) navigation is quite useful when you are navigating across discrete items.

In text documents, you can either use the vertical scroll bar to navigate or you can use short-cut navigation (page-up/page-down or other controls) to directly navigate from page to page. A similar approach was used in carousels in webpages. Instead of a continuous navigation from item to item, designers/developers preferred to have a single item to be visible at any time (apart from transitions). It start with the side arrow navigation ( < and > )which was fine for linear navigation. For added controls, the tiny dots were added near the bottom of the carousel to allow users to jump across items.

enter image description here

From the example you showed, this similar pattern has been adopted for vertical scrolling. Many single page websites used a fixed menu to help the navigation. Example. Your example is removing the text/labels and just using the dots for a 'minimalist' navigation. The end result is the same as in the carousel, you are jumping from content to content, rather than a continuous scrolling.

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.