Page indicator dots - necessary, useful or redundant?

Question

In our credit card wallet app, we're debating the value of page dots to indicate how many cards a user has. This is more or less the layout of the section with the cards in our app today.

If the user has more than 1 card, the next card will be peeking in from the side and its opacity is reduced. User can scroll horizontally to get to the next/previous cards. Since the user can clearly see the next or previous card visible at all times, the dots feels a bit redundant, but I might be missing some important usability/accessibility reason. What do you think?

Answer 1

From an accessibilty POV: Some users can not "clearly see" your intentions here.

Based on your mockup and your post, I suggest you address how you want to present the information represented by the dots, specifically to users with low or no vision.

This implies mapping out how a screenreader is going to present the information on:

• How many cards the user have available
• Which card is in focus now
• How to obtain the details from the card in focus
• How to navigate from one card to the next

If we widen the scope a bit: Most users are not expert users, even when it comes to simple clues like the dots. People with cognitive disabilities or people who are not routinely using this type of navigation, may not pick up on your clue.

"If you ... think a visual clue is sticking out like a sore thumb, it probably means you need to make it twice as prominent"

Steve Krug, Don't Make Me Think

Your interface should help all users to better understand your intentions.

The dots are probably not enough of a "sore thumb", because a user would only know they are connected to the number of cards, if they add or remove a card AND notice that the number of dots have changed.

I would supplement with one or both of:

• Adding visual information: "4 cards" next to the dots
• Clearly visible left / right navigation controls. Something in the style of this example, because basically you're pattern is that of a carousel.

---

WCAG Guidance:

• 1.3.1 Info and Relationships
• 4.1.2 Name, Role, Value
• 4.1.3 Status Messages
• 5.2.4 Only Accessibility-Supported Ways of Using Technologies
• 5.2.5 Non-Interference

Important sidenote:

Starting June 2025 your service could very well be covered by the EAA. If you plan on serving your app anywhere within the EU, or even resell it to a service operating in the EU, you need to be mindful of the EN 301 549 standard, specifically chapters 4, 5, 11 and 12.

Answer 2

I did a quick research and there are two different options vertical stacks and horizontal stacks. What I saw is that digital wallets are more often presented as vertical stacks like apple wallet, paypal or even coinbase. I believe it is because you don't need any detail at first sight from the card presented. From banks and one or two deliveries app I saw a horizontal stack, based on the information needed from the user at that moment; maybe you need more details I don't know. What do your users say?

Here is why you need to grab your UXR information to back your decision. From your users what do they need at this point. Remember that if your users are used to a horizontal stack is because the information below is useful in some sort of way, and if you decide to change that, you need to back up with data your decision.

Answer 3

Yea, I typically like to assume the worst. It doesn't hurt to have the pagination indicator there.

Another benefit of having the pagination is to instantly show the user how many cards they have on file. If it gets to 3+ then I think it starts being more functionally useful. I could technically have 4 cards uploaded but only 3 cards are visible.

Instead of debating wether or not you need pagination, I think a question to ask yourself is why would a user upload more than one card in the first place?

Perhaps there's a better way to organize cards that suits the user's intentions better.