5

I'm working on a Responsive Web Design project. There is this table which can potentially go up to hundreds of records, so we are using a pagination block below it. On first load, user has the choice of display 10, 25 or 50 records in a dropdown. Our breakpoint is 600px. Let's take 25 records as an example:

In desktop view, first 25 records appears. User clicks on page 2 of pagination and next 25 apppears. The number of records in the table is always 25.

In mobile view, the table collapses into an accordion. The record-per-page drop down is hidden. The pagination block is hidden. Instead, a button "Show Next 25" is shown below the accordion. Upon click, the next 25 records will be shown. Making it 50 in total.

The problem comes when some devices' width is greater than our breakpoint. (e.g. HTC One with 640px width). In those devices, if user first loads the accordion in portrait mode, then clicks on "Show Next 25" button, and rotates the phone to landscape mode (with pagination and record-per-page drop down and no more button), then what should the user see?

We have a few options:

  1. In mobile view, when "Show Next 25" button is clicked, instead of adding on 25, just show the next 25. So when user rotates back to landscape (desktop) view, he/she will be on page 2 of pagination. Drawback: user cannot go back to first 25 records in mobile view.

  2. Always only display "Show Next 25" button and remove pagination. So user will see "Show Next 25" even when he views in a desktop browser Drawback: "Show Next 25" button looks strange on wide screen.

  3. In mobile view, instead of showing "Show Next 25" button only, add a "Show Previous 25" button. Thus making it a mini-pagination in mobile view. Upon click the button, the next/previous 25 will be loaded. The number of records on the page stays at 25. Drawback: It is still a pagination but shorter in length.

I'm not very sure which approach to take, or if there is Option 4. I appreciate your inputs.

Thanks.

Improve this question

3 Answers 3

Reset to default
4

First, not providing back navigation is limiting user control. So it's better to use it.

Second, your labels are too detailed. Show Next 25 could be shortened just to Next > or even >. The same is for the Back button. Nobody really counts 25 or 50, and Show action is understood from the pagination pattern.

Google does it in the following way:
enter image description here

Improve this answer
0

Off the top of my head, I would go with #3. #1 seems like the worst solution, since it may unexpectedly hide info from the user with no clear way to get it back -- very problematic.

Solution #2 sounds okay, but I don't really know what you mean by the button "looking strange" -- sounds solvable, or if not, at least it's an aesthetic problem rather than a usability problem.

Although using pagination in conjunction with accordion might be a bit much in #3, both are pretty normal UI elements so I doubt they'd cause too much confusion. If I understand you correctly, solution #3 is also the only one that limits the number of records on the page to 25. Not sure how long each record is, but you don't want to cause too much scrolling so this is probably an advantage.

Improve this answer
0

What i would do is to mark the rows with the right page number <tr data-page='1'>, when when you are are desktop view, you hide other rows that aren't on the current page using CSS.

More Detail

When you are in desktop view, always decorate every row for the current request with the current page number <tr data-page='1'>. Let's say we have 2 records per page and we are on page 3;

...
<tr data-page='1' style="display: none;"></tr>
<tr data-page='1' style="display: none;"></tr>
<tr data-page='2' style="display: none;"></tr>
<tr data-page='2' style="display: none;"></tr>
<tr data-page='3' style="display: block;"></tr>
<tr data-page='3' style="display: block;"></tr>
...

When you switch to mobile view;

...
<tr data-page='1' style="display: block;"></tr>
<tr data-page='1' style="display: block;"></tr>
<tr data-page='2' style="display: block;"></tr>
<tr data-page='2' style="display: block;"></tr>
<tr data-page='3' style="display: block;"></tr>
<tr data-page='3' style="display: block;"></tr>
...

This pattern will also ensure you don't load the data twice.

Improve this answer
8
  • Thanks for the reply. Maybe I didn't understand you correctly. Are you saying in mobile view, we display all the data? If so, then there will be hundreds of them. If not, then how to handle the pagination? Wouldn't it be back to our starting point? Also, I believe the default "display" for <tr> is "table-row".
    – Yunzhou
    Nov 26, 2013 at 8:53
  • Let say the user hits your URL he/she will be presented with 2 records decorated with data-page='1' since we are assuming 2 records per page. At this stage if you switch between views it's fine. If the user is on the desktop version and moves to the next page; we retrieve the next set of data however we do not replace, we hide the row already displayed and and append the new ones. So in desktop view you can normal pagination but you will always have to check if the data has already been retrieved; you unhide instead of going back to the server. For mobile view, you unhide all hidden rows.
    – Orson
    Nov 26, 2013 at 13:31
  • Ok, I think I got your point. So let's say the desktop pagination on initial load is: 1 2 3 .... 50. And user wants to see the earliest record so he clicks on page 50, then would the page load ALL the records and hide everything between page 1 and 49? Wouldn't that be a performance issue?
    – Yunzhou
    Nov 27, 2013 at 4:12
  • You are getting to my point now. If the user click on 50, you retrieve only the records for 50. When the user click 49 you retrieve the ones for 49 and prepend. Another scenario is if the user first request for 3 and then request 50; you just append 50 to that of 3. You always need to attribute the records with it's correct page so you know when to position other records.
    – Orson
    Nov 27, 2013 at 7:58
  • So what happens when user lands on page 1, then clicks on page 10, then rotates the phone to portrait (table collapses to accordion)? Will he see all the records from page 1 to 10 (10 pages)? Or just the ones on page 1 and the ones on page 10 (2 pages)?
    – Yunzhou
    Nov 27, 2013 at 8:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.