トピックタイトルの下にあるタグとカテゴリをクリックしにくくする余分なパディング

モバイル表示では、トピックリストのタイトルの周りに余分なパディングがあり、ユーザーがタグをクリックしようとすると、タグ自体をクリックするのが難しくなります。

「いいね!」 2

以前、タイトルをより大きなクリックターゲットにするために意図的にタイトルのパディングを増やしました(カテゴリ/タイトルをカバーするのに十分な大きさで、それらがトピックにクリックされるようにするため)…しかし、それは後退したようです。

代わりにカテゴリ/タグをより大きなターゲットにすることに価値があるかもしれません。確認します。

「いいね!」 4

これは意図したものです。@schleiferは、モバイルでそれらのフィールド(タグ、カテゴリ)を絶対にタップしたことがないと言っていたので、トピックリストでモバイルからタップできるのは基本的にタイトルだけにしました。これを変更する場合は、まず話し合うべきです。

「いいね!」 2

デスクトップではカテゴリやタグをクリックできるのに、モバイルではできないのは少し奇妙だと思います。モバイルで確認したいユーザーは、サイトがバグっていると思うでしょう。タイトルを長押しすると、アクティブになったときにパディングがグレーになり、タイトルとカテゴリ/タグ行の半分を覆うことが明らかになるからです。私の見解では、これは珍しいUIデザインです。

また、GA分析によると、私のコミュニティへのアクセス者の80%以上がモバイル経由です。メタについては同じことは言えませんが、私のユーザーはモバイルでそれらのタグをクリックする可能性が高いと信じています。

「いいね!」 1

ええ、確かに。まだ意味が通じないかもしれませんが、もう一度見て、それが機能するかどうか確認してみようと思いました。

「いいね!」 3

モバイルのユーザビリティ基準のほとんどでは、これらのリンクはクリックするには小さすぎます。

とはいえ、これらのクリックをより適切に取得し、これまで行ってきたCSSのオーバーラップに頼るのをやめることができます。これは、コンテンツに依存して常に少し壊れやすく、すべてのテーマでうまく機能しません。

代わりにJSを使用する試みを行いました(https://meta.discourse.org/t/clickable-topic-component/183339)に基づいています。

これにより、少しのCSSで下段のアイテムを再びクリック可能にする機能も追加されます。

参考用の古いCSS
.mobile-view .topic-list .topic-item-stats {
    pointer-events: all;
}

更新: このCSSは少し変更されました

.topic-list .topic-item-stats__category-tags {
  .discourse-tag,
  .badge-wrapper {
    pointer-events: all;
  }
}
「いいね!」 9