I have a list of 20 items on a website. There are 4 buttons which work as filters. Each items in the list is represented by a picture and a title:
Each block is clickable to a description page :
What is the most usable way for mobile device :
display a scrollable list of 20 items
split this list in 2 pages in order to display a shorter scrollable list of only 10 items.
For information, on desktop : I plan to display the list with 2 columns and so only 1 page.
I'd say split the pages across multiple pages of 10 items per page.
Long lists are easier to get lost in. Does it take a lot longer to load? (Maybe someone with more technical knowledge can fill us in on that). It is also a common way to go, so this navigation pattern is something users recognise and are already used to.
Maybe it's an idea to set 10 items a page as a default but give users the option and control to change depending on their needs. See image below.
The 'Chrome' in this screen is getting a bit large by adding yet another filter option, so maybe the filter list must be able to show and hide. See below.
