Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Comments on Too subtle formatting of disabled pagination buttons

Post

Too subtle formatting of disabled pagination buttons

+2
−0

At the bottom of the Activity tab of my user profile page, there are buttons to move through the pagination of the results. There is a “Previous” button, several specific page number buttons, then a “Next” button.

Buttons for Previous, numbers, and Next

When on page 1, the Previous button appears to be enabled but does not respond to clicks or taps. Similarly, when on the final page, the Next button appears to be enabled but does not respond to clicks or taps.

I came here to ask whether these buttons should either be disabled or hidden when there is no previous or next page available. However, on closer inspection it turns out that the buttons are disabled, it's just that the difference in formatting was too subtle for me to discern at first.

Notice that the image is on page 1, so "Previous" is disabled. The only difference is that there is no drop shadow. The colours of the border, background, and text are all identical to the enabled buttons. On desktop the mouse cursor changes from an arrow to a hand when hovering over the enabled buttons, but not when hovering over the disabled buttons. This is still a subtle difference, and I ran into this problem first on mobile, where there is no mouse cursor so the drop shadow was the only indicator.

The same pagination buttons are used on the "Vote Summary" tab of the Profile page too, if any changes are made.

Would it be best to make the formatting difference more noticeable, or to hide the disabled buttons?

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

I vote for making their status more obvious rather than removing them. A consistent layout with the ... (4 comments)
I vote for making their status more obvious rather than removing them. A consistent layout with the ...
Monica Cellio‭ wrote 6 months ago

I vote for making their status more obvious rather than removing them. A consistent layout with the "you can't do this" signal for those elements seems friendlier, and also averts possible bugs with things incorrectly disappearing.

trichoplax‭ wrote 6 months ago

That sounds good to me.

Karl Knechtel‭ wrote 5 months ago

I also agree. I think the usual visual language is to: a) reduce background contrast; b) on hover, change the cursor to the "universal no" symbol.

trichoplax‭ wrote 5 months ago

I'd forgotten about the "no" symbol rather than just "not a hand". That also sounds better.