Tag is not tappable in topic list on mobile

UX
1

Repro steps (any topic with tags on Meta):

  • desktop:
    • both category and tags are clickable in both topic list and topic title
  • mobile:
    • category is tappable in topic list (recent change, I believe) and in topic title
    • tags are only tappable in topic title

This has been discussed before (Opening the category in the topic-list on mobile - #2 by codinghorror, Extra padding makes it hard for users to click on tag and category under topic title - #8 by awesomerobot), the reason for topic list view on mobile not allowing category and tags to be tappable being small size of the elements on mobile, but at the same time it was always possible to tap on category and tags in topic title, where the elements are the same size and the space between them is even narrower.

Personally, I don’t find these elements too small on mobile. In fact, I tap on category and tags in the topic list frequently, only to find myself in the topic title instead, having to repeat the same action again, which finally brings me to the category/ tag view.

3 Likes
2

Hi @md-misko :wave:

I can repro.

There are indeed links on tags in the mobile view, but clicking them won’t work.
Having the cursor and clicking on them sometimes opens the topic below:

4 Likes
3

I think the entire change by @awesomerobot is CSS overridable. Perhaps try a theme component on your site for a few weeks and report back with the CSS change you recommend?

1 Like
4

Sam, are you referring to this:

I already tried this in a theme component using the above CSS, but it didn’t seem to work.

My production server is not updated to the latest version yet and both category and tags are not tappable there.

But I also tried this on staging using the latest build and something must have changed recently, because the category is tappable now, but the tags are not.

For consistency sake, would you agree that both elements serve similar functions and should work the same way out of the box?

Of course, I wouldn’t mind fixing this using the CSS, but it doesn’t seem to work for me (tried both on production and staging).

5

Hmm it seems something may have regressed… what I see now on iOS is that the categories tap through to the category page and the tags are a dead zone (so they don’t even click through to the topic). I can look into this. That CSS is also out of date… at the moment it would be (I’ll update that post):

.topic-list .topic-item-stats__category-tags { 
  .discourse-tag,
  .badge-wrapper {
    pointer-events: all; 
  }
}

I definitely understand the desire for consistency, but accidentally tapping on a category or tag instead of a topic, or tapping on the wrong category/tag is very easy… and it’s a particularly bad experience on the topic list where entering a topic is the primary action.

The minimum recommended size for a tappable element on a mobile device is generally around 45px square, and we’d have to nearly double the height of categories and tags to get there. This is possible if categories and tags are limited to a single line, but a lot of sites have enough content here for it to wrap… and spacing like this wouldn’t be great:

image

I could imagine redesigning categories and tags to use some kind of more button-like styling to ensure proper tap sizes, but that would be a big change that we’d want to implement throughout all of Discourse.

2 Likes
6

Thanks for the updated CSS, it works on the latest build.

Strangely, this is not my experience on mobile at all. Maybe it’s because of my right-handed use, but I always found it much more difficult to tap on the topic title than on any other elements.

I mostly use my right thumb to navigate around and it’s almost impossible to accidentally tap category and even tags most of the time, but tapping on the title itself sometimes is (because of the left alignment of text and line breaking due to narrow screen width there is mostly negative space on the right).

Fortunately, Clickable Topic Theme Component vastly improved navigation on mobile for me, where I’m now almost exclusively using the negative space in the topic list to navigate to the topic itself, and use the category and tag elements to quickly filter to category or tag view (only to be surprised, again and again, that it doesn’t work :upside_down_face:).

I’m not sure if this is related to the screen size at all, but my mobile has a sub 6’’ screen and I never had any issues targeting those elements.

And when in the topic itself, there is even less spacing between the topic title and category and tag elements, and tapping them has alway been enabled there.

2 Likes