3

I was hoping to get some input about table-pages and results per page. our team uses the ng-table to display data in table format. I personally think the page controls are very confusing. I am looking for all the additional UX designer opinions (and reasons for their opinions) I can get as to what is the best/worst design for table controls.

Before reading the ng-table code I was just interacting with it as a user would. It took me several days to figure out that the 'results per page' controls were the 'results per page' controls and Not the 'page number' of the page you were currently looking at (see example of what the tables look like below). I can supply UX reasoning as to why a user would get this wrong but hoping to get other's opinions as to what is good/bad about the ng-table page controls design.

QUESTION: What are your UX thoughts on ng-table page controls and what UX rules back up your thoughts.

Additionally, why are results-per-page controls in the form shown in ng-table instead of in a dropdown. This control (like mentioned here) is not that critical (in most instances and if pick a good results-per-page value) anymore with current computing power and internet speeds (it was originally around/really-needed when you had dial-up connections) and to me it seems should be as small and insignificant and out of the way as possible (like in the form of a drop-down if anything).

enter image description here

  • Is this not the case that ng-table provides you with the control, results per page in this example, but the onus is on you to style, position and provide a label and help? – DarrylGodden Sep 5 '17 at 6:33
1
+50

I completely agree with your point of the ng-table UI being confusing. There's no way of telling what the bottom-right control is meant for.

Here's a good example of a simple-yet-precise table design by DataTables

DataTables table layout

Now, coming to the point of whether the number of results control should be given to the user or not.

No two users think alike

Your idea of a good results-per-page value might be significantly different from mine. Yes, you can do some user testing and figure out which is the most viable number but having the control right in the table layout makes the user feel at ease.

Ease of use

Another thing to note here is that DataTables load the complete table at once and then paginate it. This means that if the default table size is 20 results per page (which seems like a good number) but the user wants quickly see 50 results at once, they won't have to look for preferences or settings to do that. Just pick 50 from the dropdown and the results are loaded practically without any loading time or delay.

3

I think the ng-table UI is still a better design for results-per-page compared to the drop-down option with a little tweak. Just by adding a text nearby will help the user understand the purpose of the control like the one in Stack Exchange.

enter image description here

When a user visits the page (s)he first sees the table data and the number of results-per-page control is clearly visible on the right-hand side of the user which is more accessible when the user tries to view more data on the same page. Going on if the user wants to go to next page (s)he can use the pagination control on the left-hand side to view data in next page.

The drop-down option usually takes two clicks to change the number of results per page. In this case, it takes a single click to access the information. Moreover, the results per page will not be more than three values(considering the example) which have a plenty of room below the table.

1

As suggested by @Bharath Bhony you can add result per page after the count value this will clear confusion between pagination & results per page or you can change the position of page control (check below image for reference). In addition to this, you can try out usability testing with users and question them which option did they prefer and why? Hope this solves the problem & let me know if you have any doubts.

enter image description here

For Reference: https://datatables.net/examples/basic_init/alt_pagination.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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