What to do with “within-page links”
In an attempt to help improve the performance of some “within-page links” on our wireframes, I styled the bullet points to look like downward pointing arrows.
With my designers hat on, even though I shouldn’t have been adding much style at this “wireframe” stage, this seemed like an unobtrusive and helpful way of indicating to the user that these links would take them to a sub-section on that same page, down below. I was so wrong. None of the 7 users saw the arrows in that way. All expected the links to take them to another page.
We have now decided to be more literal and label these links “what’s on this page”.
A typical user experience I have seen on many a usability tests:
The user clicks the link and is taken down the page. As far as they know the page now looks different having scrolled down the page without noticing the scroll. The user misses the fact that the chosen section is aligned at the top of the page, possibly due to the short length of the sub-section and focusses instead on another sub-section underneath as they expect everything on this page to be related to what they previously clicked on. You can now safely say that they are a little lost.
A few possible solutions:
- Avoid long pages and have each sub-section on a new webpage instead
- Have a list of sub-sections at the top which are not links (that don’t resemble navigation elements), thus forcing the user to scroll down the page manually
- Clearly indicate the intention of these within-page links (in a better way than using downward pointing arrows)
- Use clientside scripting to slow the scroll page effect down or animate it so the user knows that they are going down the page after clicking a within-page link
- Use clientside scripting to highlight the sub-section in some way to indicate and focus the user’s attention on this area, in an attempt to show them that this is the bit they were after.
On the subject of the last two above, there have been a number of attempts at achieving these effects. The best example I have found is discussed in this article: Improving the usability of within-page links and the can be seen working in the smooth scrolling demo.
Observations, Experiences, Usability