4

This is a typical admin page, There is a table, a lot of rows, you can sort it by clicking on the header and you can select a different page at the bottom ( I set it show only 5 rows for testing purposes)

I got the following feedback from a user.

enter image description here

After a user clicked on "First name" he got frustrated that his information became a mess, where all the information went and how to make this information reappear. Obviously he doesn't know about the paging feature and don't know that this data is on the other pages. How do I make it more intuitive for the user to know about this paging feature at the bottom?

enter image description here

Improve this question
4
  • If there's a need for users to sort the data, I'd suggest that there's a need for users to have the entire data set on the screen. Perhaps paging isn't the solution for this.
    – DA01
    Commented May 21, 2012 at 6:44
  • @DA01 I see your point, albeit sorting in combination with pagination is very common. The possible strains this combination may have on the usability is however not something I'm familiar with. The OP probably uses pagination because displaying the entire table at once would compromise the layout too much.
    – AndroidHustle
    Commented May 21, 2012 at 6:55
  • 1
    @AndroidHustle: yes it is very common, but when pagination is used, the sorting options are usually offered by a combobox or by one ore more buttons, and not by clicking on a column...
    – Marjan Venema
    Commented May 21, 2012 at 7:45
  • @MarjanVenema Your observation is true when the data/search result is displayed in a form other than a table (e.g. tiles on a grid). However, when there is a table with separate columns there is usually (more often than not) sorting by column by clicking the column header. Which also is the expected behaviour.
    – AndroidHustle
    Commented May 21, 2012 at 7:57

4 Answers 4

Reset to default
4

Please consider, what are some of the main factors that influence user's attention:

Colour / Size / Contrast / Placement / Font

Now, as I can notice, you have table header that is:

  • red
  • the most contrasting on the page (white letters on the darker background)
  • underlined and bold
  • placed above the paging feature

Your paging feature, on the other hand:

  • has colour similar to odd/even rows of the grid
  • isn't even as contrasting as a grid elements
  • has the same size
  • ...

So it's not as visible as you might want to.

If you want to make paging more visible, lower the visibility of the table header, and increase the visibility of the paging. You can also add some elements of the page that suggest the paging:

  • "Page" label next to the paging links
  • Page size setting
  • "Next page" link
Improve this answer
3

In response to the comments, I have seen them done like this with paging and column head sorting ( which is the expectation when the presentation is tabular like this ), and it can work. Having said that, I have seen some hideous UXs too. but I would agree that once a list is sorted, seeing the whole list - or being able to scroll through the whole list - is also part of the expectation.

The reason is that when users sort, they are often sorting because the sort column is the one they can identify (in these contexts - for retail sites, is it often different reasoning). So what they want to do is then search through the entries for their required information.

The easiest solution to improving the given design would be to have Next and Last page indicators. If they say "Next Page" and "Previous Page" then it should be clear. Also, if they are both visible, but disabled if not appropriate (rather than being invisible if not appropriate) then they will both stand out even on the first page.

Improve this answer
2

The addition of the word "Page" to the numbers at the bottom might be enough:

Page 1 2 3 4 5 6 7

Coupled with making the current page stand out (bold in this case) this should show that there multiple pages of data.

Adding the ability to change the page size would also offer more clues that there are potentially multiple pages of information.

However, a better approach might be to add filtering/searching of the data in each column. That way if the the user is looking for all e-mail from "John" then all they need to do is type the name in the filter at the top of the "First Name" column and only those rows that match that filter would get displayed.

Improve this answer
2

The other element that is often included at the top of the table is:

Showing records 1 - 5 of 20

Its to give the indication that the data is not all displayed. I've had issues with people not spotting text at the top or bottom of the table indicating that not all the data is currently displayed, so I have put a notice in the first row to make it super obvious (depends on the number of brain cells being used on your application).

Improve this answer

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.