Feedback wanted - pagination design on data-heavy site

Question

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:

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:

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?

Answer 1

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):

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.

Answer 2

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.

Answer 3

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.