Posted by & filed under PatternFly, UX Research.

Validation of design choices is important when designing new features of any product. The PatternFly Team values this process and frequently seeks input on different designs from users outside the team. This process not only validates the items in question, but can also provide new insights for future implementations.

Recently the PatternFly Team decided to further investigate pagination and determine what should be the recommended approach. The team also decided to investigate selection of items, action buttons, and gather any other comments from the users.

Option 1, pagination pinned at top & bottom. List view shown.

 

Option 2, pagination sticky at bottom only. List view shown.

 

Part 1: Finding & Selecting Items with pagination

Users were shown the interface beginning on a random view (Table, Card, or List). Some users began on Option 1, some on Option 2, but all users experienced both Options. It was explained that this is a prototype and some features are not functioning. Users were asked to complete the following tasks one-by-one:

  • Find the pink item and select it
  • Find the remaining 3 pink items and select them (these were on subsequent pages)
  • Later in the testing, users would complete these tasks on the other option

Table View showing the pink item.

Card View showing the pink item.

List View showing the pink item.

 

Results showed that all users successfully completed these tasks without confusion. Time differences between Option 1 and Option 2 were negligible. For Option 1, most users used the bottom-pinned pagination controls (7 of 11 users). Most users chose to use Card View for these tasks. Based on this data alone, we feel confident that both pagination options will feel intuitive and deliver successful results.

 

Part 2: Action Buttons

Following the first task, users were asked to select any item and perform an action using the buttons. This was repeated once.

Action Buttons, shown here.

 

Results showed that all users successfully complete the tasks without any issue. Time differences between Option 1 and Option 2 were negligible. Based on this data alone we can be confident that these action buttons are placed and labeled in an appropriate way.

 

Part 3: Selecting multiple items

Users were then asked about selecting multiple items in the interface. Users were asked:

  • How would you select all 75 items?
  • How would you select all the items on this page?

Selection options, shown here.

 

Results showed that nearly all users across both Option 1 and Option 2 could successfully complete the tasks.

  • For Option 1: 1 user gave up and could not complete the Select All task, all others completed the task successfully.
    • The user who gave up: “I would have used Command, A to select all items.” He did not notice the arrow that indicated the menu for selecting these options. He said that it did not make sense to him.
    • Most users (7 of 10) used the top controls.
  • For Option 1: all users successfully completed the Select Page task.
    • Most users (7 of 11) used the top controls.
  • For Option 2: 1 user gave up and could not complete the Select All task, all others completed the task successfully.
    • The user who gave up: “It was just difficult to find, I couldn’t find it.”
  • For Option 2: 1 user gave up and could not complete the Select Page task, all others completed the task successfully.
    • The user who gave up: “It felt hidden.”

Many users commented that they would prefer a selection checkbox in the top-left corner (especially in Table and List views) to select all items on the page. Many cited things like Gmail as an example, something with which they’re quite familiar. This is a point that should be evaluated in future studies.

A few users commented that the menu for selecting multiple items appeared more like a status than an actual menu they could use. This is a point that should be evaluated in future studies.

Based on the data for these tasks, we can recommend there be further investigation on how to improve the selection of multiple items. Not all users understand this element, and many have concerns about its visibility.

 

Overall Preferences & other insights

Users were also asked to indicate their preferred pagination design. At the end of all tasks, users were shown the differences between the two designs and asked which they preferred, and to provide any clarification as to why they made this choice.

Overall, the preference is split with 5/11 users choosing Option 1, and the other 6/11 users choosing Option 2.

  • Those who prefer Option 1 state:
    • “Its at the top, no scrolling needed to see my controls”
    • “I prefer things to be at the top, would be even better if it was sticky at the top”
  • Those who prefer Option 2 state:
    • “Its always available, no matter what”
    • “With the other option you can lose the controls when scrolling”

From these results, we can see that regardless of preference indicated here, users want their pagination controls to be always-available. A sticky pagination control would meet this need.

Other key insights include:

  • Ensure that future pagination options are always visible & available regardless of scrolling.
  • Investigate a Select All checkbox, especially in Table and List views. Users tend to understand this element and look for it.
  • Specifically for Card View: many users tried to select the items by clicking on the item (not the checkbox). Many commented that they think its more difficult to have to first realize there is a checkbox by hovering over the item, but then also to click the small checkbox. Simply clicking the item itself may improve usability. Team should also investigate selection methods similar to this for the other viewing options.

 

We would love to hear feedback on this process, please comment below!

4 Responses to “Pagination in PatternFly – Second round cafeteria testing”

  1. Matt Carrano

    Interesting findings, Wes. I can see where users might struggle to find selection options. Placing a checkbox in the upper left works well for tables because there is a header row. But the list view has no such thing. I see that GMail puts this as a separate element left aligned above the list. Given our current list view layout, any thoughts about where this might go?

    Reply
  2. Wes Luttrell

    Matt – thanks for the comment! You’re right – in the current list view layout there is no obvious location for this element. While I don’t have a perfect recommendation, some thoughts that have come to mind include:
    A simple Action Button set for “Select All,” “Select Page,” and any other related options.
    A redesign of the current menu for Select All to make it more apparent to the user.
    These suggestions are quick, top-of-mind ideas and would need to be evaluated and tested. One theme we’ve noticed in this study is that users are looking for pagination and selection features to be always-available and fairly up-front, easy to access.

    Reply
  3. Suzanne Hillman

    In reading this, I also looked to select all immediately above the rest of the checkmarks. FWIW. :)

    I’m not sure what you mean by “find the pink item’ – were there actually items in the list which were pink? Can you perhaps add an example to make it easier to understand what you had your users do?

    Reply
    • Wes Luttrell

      Hi Suzanne, thanks for the comments!
      I have added 3 screenshots (one for each view option) to the post for clarification. Thanks for pointing this out, as it is important. Each screenshot shows an example of one view, and one pink item that was used for the task.

      Reply

Leave a Reply

(will not be published)