My site is a sports pick'em social game. Given the nature of sports and pick'em, it tends to be a data-intensive site. I'm very wary of any new features or designs that might cause the user to be overwhelmed with stuff on the screen.

With that, I am trying to redesign the pagination on the site. It currently looks like this:

enter image description here

It's fairly minimal; however, it's not completely usable since there isn't a large or noticeable click area for the pages.

I've taken a crack at redesigning, and it looks like this:

enter image description here

Certainly, from a pagination best-practice standpoint, it fits the bill. However, my personal reaction is that it causes the page to be overwhelming

What are your thoughts? And what suggestions do you have to make the pagination design less visually intrusive for a data-intensive site?

  • 1
    "I'm very wary of any new features or designs that might cause the user to be overwhelmed with stuff on the screen." looks at screenshot Huh?
    – Rahul
    Aug 11, 2011 at 20:11

3 Answers 3


IMHO, you're right, the visual design for those elements is too loud. They are of secondary importance on the page, but the contrast and bold colors make them seem primary. Also, the current page looks less prominent than the other pages, which is the opposite of what you want.

My first thought is to modify your original text links:

  • Add padding to increase hit area - don't worry about background or borders, people are used to this pattern
  • Remove any margin between links - you don't want any gaps
  • Remove the permanent underlines, they are distracting. Instead underline on hover, so the user knows where they are going to click.
  • Bold the current page number
  • Highlight the next link somehow -perhaps just move it over a little more to the right.

Google does this, more or less (note how much space they give each number):

Google search results pagination

Alternatively, if you like the "boxed" links, a simple redo of the color scheme might be all you need. I'd try something very subtle first, then add contrast if necessary. You might try:

  • For the non-current pages: light gray background / no border / dark font-color
  • For the current page: white background / medium gray border / darker, perhaps bold font

I'd also recommend a touch more left and right padding around the numbers so there's a bigger hit area.

  • Thanks for taking the time to provide an answer. Your input is very useful, and I think I'll go with your first recommendation.
    – keruilin
    Aug 11, 2011 at 20:57

Peter's suggestions are great.

I would only add that perhaps you might consider removing pagination entirely and use "lazy loading" instead. In other words, pre-load the first 50-100 or so results and add a scrollbar to the panel. When the user scrolls down, load the next set of results automatically. The you won't need pagination at all, and the user experience will be faster and more responsive.

  • The problem of this is that you will have to add a vertical scrollbar on each panel... But if you do so, consider adding the currenly viewed items positions over the total number of items, so your user can estimate his position in the list (close frome start, at the end, etc). Aug 12, 2011 at 8:37

You're lacking visual hierarchy - from a distance it seems everything has the same weight and importance, when it's not true. Consider giving emphasis to what matters most in the page, and leave secondary information smaller and with decreased contrast.

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.