Sunday, June 5, 2011

Jumping to a section of a Page.

In long pages having large content divided into sections, it’s a good usability practice to provide links to different sections on the top of the page.

See this beautiful Site.

Here in this one page site News | About Me | Portfolio etc are links that jump you to a section on the page.
 
Also need for jumping (or better to say placing user’s eyes to right place) becomes necessary in some other cases as well. Let’s see a specific case here.



See this small usability issue in case of forbe’s list of world’s billionaires. There is pagination to see them in the order of there net worth. Now when you are on page 1 and are watching billionaire no 10. On clicking page 2 you would expect to see billionaire no 11. But you see billionaire no 16-20. This is just because page didn’t jump to the top of the list and since page links were down it just remained there.

We will see three different ways by which you could make your page jump to sections.

1. The classical
Anchor Fragment Way
.
In the method the Section should have a named anchor as shown below

<a name=’aboutus’>About Us</a>
<div>
Your Content Goes Here…….
</div>

Now to jump to this particular section all you need to have is a link to same page with hash value “aboutus” appended to it.


<a href=’#aboutus’>About Us</a>


2. Using scrollIntoView.

Second way is using javascript to scroll to a particular element on page you identify the page element using document.getElementById and then use scrollIntoView method. You may use this in cases where using the above method is not an option.


document.getElementById(‘yourElement’).scrollIntoView();



3. Using jQuery.scrollTo.

And if your comfortable with jQuery you can use jQuery.scrollTo plugin the details of which are described well in the link below.

3 comments:

  1. First of all, thank you for finding a so good example website and sharing with us. It provides a new way to display everything on a single page without reloading the page. A good combination of User Interface and tools.
    For second example, I have not found any issue in the pagination of Forbes website. Can you give a quick look and describe to me?
    For "scrollIntoView", you should give an example like previous "classical". In all three methods, I heard it first time.

    ReplyDelete
  2. While I agree to Abhishek, would like to mention the same point. Also the example of one page with scrolling content and ajax loaded content should not be mixed. But I agree to your point that focus should be taken to the content where it should be. But being not much on UI, I would say the creative dept should always do UAT, and come up with ideas :)

    ReplyDelete
  3. @tanmay The idea here is to bring up the point that the focus should be taken to the right target. Yes and i agree such results should come up with Usability Testing.

    ReplyDelete