モバイルのトピックリストでタグがタップできない

UX
1

Repro 手順（Meta のタグ付きトピック）:

  • デスクトップ:
    • カテゴリとタグは、トピックリストとトピックタイトルの両方でクリック可能です。
  • モバイル:
    • カテゴリは、トピックリスト（最近の変更だと思います）とトピックタイトルでタップ可能です。
    • タグは、トピックタイトルでのみタップ可能です。

これは以前にも議論されました（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

個人的には、モバイルでこれらの要素が小さすぎるとは思いません。実際、トピックリストでカテゴリとタグを頻繁にタップしますが、代わりにトピックタイトルに移動してしまい、同じ操作を繰り返してから、ようやくカテゴリ/タグビューにたどり着くことになります。

「いいね！」 3
2

@md-misko 様 :wave:

再現できました。

モバイルビューではタグにリンクがありますが、クリックしても機能しません。
カーソルを合わせてクリックすると、時々下のトピックが開きます。

「いいね！」 4
3

@awesomerobot による変更はすべてCSSで上書き可能だと思います。サイトでテーマコンポーネントを数週間試してみて、推奨するCSSの変更についてフィードバックをお願いします。

「いいね！」 1
4

サムさん、これは参照していますか？

すでに上記のCSSを使用してテーマコンポーネントで試しましたが、機能しないようです。

本番サーバーはまだ最新バージョンに更新されておらず、カテゴリとタグの両方がそこでタップできません。

しかし、最新のビルドでステージングでも試しましたが、最近何か変更されたに違いありません。なぜなら、カテゴリは現在タップ可能ですが、タグはそうではありません。

一貫性のために、両方の要素は同様の機能を果たし、最初から同じように機能すべきであるということに同意しますか？

もちろん、CSSを使用してこれを修正しても構いませんが、私には機能しないようです（本番とステージングの両方で試しました）。

5

うーん、何かが後退したようですね… iOSで現在見られるのは、カテゴリはカテゴリページにタップで遷移し、タグはデッドゾーン（トピックにクリックすらできない）になっていることです。これは調査できます。そのCSSも古くなっています…現時点では（投稿を更新します）：

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

一貫性の必要性は確かに理解できますが、トピックではなくカテゴリやタグを誤ってタップしたり、間違ったカテゴリ/タグをタップしたりすることは非常に簡単です…特にトピックリストでは、トピックに入ることが主なアクションであるため、これは非常に悪い体験となります。

モバイルデバイスでタップ可能な要素の最小推奨サイズは、一般的に約45px四方ですが、そこに到達するにはカテゴリとタグの高さをほぼ倍にする必要があります。これは、カテゴリとタグが1行に制限されている場合は可能ですが、多くのサイトでは折り返すのに十分なコンテンツがあり…このようなスペースは良くないでしょう：

image
image420×144 11.3 KB

カテゴリとタグを、よりボタンのようなスタイリングを使用して適切なタップサイズを確保するように再設計することは想像できますが、それはDiscourse全体で実装したい大きな変更になるでしょう。

「いいね！」 2
6

CSSを更新していただきありがとうございます。最新のビルドで動作しました。

奇妙なことに、これはモバイルでは全く私の経験とは異なります。右手で操作することもあるかもしれませんが、他のどの要素よりもトピックのタイトルをタップするのがはるかに難しいと感じています。

主に右手の親指で操作していますが、カテゴリやタグを誤ってタップすることはほとんど不可能ですが、テキストの左揃えや狭い画面幅による行の折り返しのため、右側に多くのネガティブスペースがあるため、タイトル自体をタップすることが（時々）あります。

幸いなことに、Clickable Topic Theme Component は、モバイルでのナビゲーションを大幅に改善してくれました。今では、トピックリストのネガティブスペースをほぼ排他的に使用してトピック自体に移動し、カテゴリやタグの要素を使用してカテゴリまたはタグビューにすばやくフィルタリングしています（それが機能しないことに、何度も驚かされています🙃）。

これが画面サイズに関連しているかはわかりませんが、私のモバイルは6インチ未満の画面ですが、これらの要素をターゲットにするのに問題があったことは一度もありません。

そして、トピック内では、トピックタイトルとカテゴリおよびタグの要素の間の間隔はさらに狭く、それらをタップすることは常に有効になっています。

「いいね！」 2