Help with pagination design

Question

In my application I have a form which shows a list of patients that need to be processed. Each patient is represented by a frame which includes their name, a picture and some other relevant information. Previously, I was loading all of these frames into a scroll box control that allowed the user to scroll through all of the patients at once. However, once a large number of patients are involved, performing various tasks causes unacceptable performance loss.

I decided some sort of pagination was the answer.

Things to note:

1) The design needs to be touch / mobile friendly.

2) There is not a real need to a navigate to specific page at any given time (i.e. no need to include a text box that lets you put in page 3 of 12 or something).

So far this is the mock up I have created :

I went with the large arrows so they would be easy to interact with from a touch screen device.

My main concern here is that it sort of looks like the arrows are directly associated with the middle frame on the page, rather than being associated with pages of patient frames. What can I do to make the purpose of the arrows more clear?

Any additional feedback is welcome as well!

Answer 1

I came across this pagination example https://tympanus.net/codrops/2012/12/21/slider-pagination-concept/

It is very well designed and you can also use the same kind of design as it is mobile responsive too. To make the user more clear about the arrows to which it is associated with you can use 'Page' as a title of the page number button.

Answer 2

Some ideas that might help you:

• Add a Load more button that loads patients asynchronously in the same scroll.
• Place previous/next buttons below the list, together, so they don't resemble a direct relation with an individual element from the list.
• If you want to leave the arrows on the sides you could display at least two columns of patients so the relation between the arrows and the middle element is diminished.

There is not a real need to a navigate to specific page at any given time

• When I search something in Google I use the next page button to navigate to the second and occasionally next pages. But when I am in a page far from the first, it is handy to click the exact number to go back rather than click several times on the previous button.