Tag in der Themenliste auf Mobilgeräten nicht antippbar

UX
1

Schritte zur Reproduktion (jedes Thema mit Tags auf Meta):

  • Desktop:
    • Sowohl Kategorie als auch Tags sind in der Themenliste und im Thema-Titel klickbar
  • Mobil:
    • Kategorie ist in der Themenliste (kürzliche Änderung, glaube ich) und im Thema-Titel tippbar
    • Tags sind nur im Thema-Titel tippbar

Dies wurde bereits diskutiert (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), der Grund dafür, dass die Themenlistenansicht auf Mobilgeräten das Tippen auf Kategorie und Tags nicht zulässt, ist die geringe Größe der Elemente auf Mobilgeräten. Gleichzeitig war es aber immer möglich, auf Kategorie und Tags im Thema-Titel zu tippen, wo die Elemente die gleiche Größe haben und der Abstand dazwischen sogar noch geringer ist.

Persönlich finde ich diese Elemente auf Mobilgeräten nicht zu klein. Tatsächlich tippe ich häufig auf Kategorie und Tags in der Themenliste, nur um stattdessen im Thema-Titel zu landen und die gleiche Aktion wiederholen zu müssen, was mich schließlich zur Kategorie-/Tag-Ansicht bringt.

3 „Gefällt mir“
2

Hallo @md-misko :wave:

Ich kann das reproduzieren.

Es gibt tatsächlich Links zu Tags in der mobilen Ansicht, aber das Klicken darauf funktioniert nicht.
Wenn man mit der Maus darüberfährt und darauf klickt, öffnet sich manchmal das Thema darunter:

4 „Gefällt mir“
3

Ich denke, die gesamte Änderung von @awesomerobot ist per CSS überschreibbar. Versuchen Sie vielleicht, eine Themenkomponente auf Ihrer Website für ein paar Wochen zu verwenden und berichten Sie dann mit der von Ihnen empfohlenen CSS-Änderung zurück?

1 „Gefällt mir“
4

Sam, beziehst du dich auf Folgendes:

Ich habe dies bereits in einer Theme-Komponente mit dem obigen CSS versucht, aber es schien nicht zu funktionieren.

Mein Produktionsserver ist noch nicht auf die neueste Version aktualisiert und sowohl die Kategorie als auch die Tags sind dort nicht antippbar.

Aber ich habe es auch auf Staging mit dem neuesten Build versucht und etwas muss sich kürzlich geändert haben, denn die Kategorie ist jetzt antippbar, aber die Tags nicht.

Aus Gründen der Konsistenz, stimmst du zu, dass beide Elemente ähnliche Funktionen erfüllen und out-of-the-box gleich funktionieren sollten?

Natürlich würde es mir nichts ausmachen, dies mit CSS zu beheben, aber es scheint bei mir nicht zu funktionieren (sowohl auf Produktion als auch auf Staging versucht).

5

Hmm, es scheint, dass sich etwas verschlechtert hat… Was ich jetzt auf iOS sehe, ist, dass die Kategorien zur Kategorieseite durchgetippt werden und die Tags eine tote Zone sind (sie klicken also nicht einmal zum Thema durch). Ich kann mir das ansehen. Dieses CSS ist auch veraltet… im Moment wäre es (ich werde diesen Beitrag aktualisieren):

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

Ich verstehe definitiv den Wunsch nach Konsistenz, aber es ist sehr einfach, versehentlich auf eine Kategorie oder einen Tag statt auf ein Thema zu tippen oder auf die falsche Kategorie/den falschen Tag zu tippen… und es ist eine besonders schlechte Erfahrung in der Themenliste, wo das Betreten eines Themas die primäre Aktion ist.

Die minimal empfohlene Größe für ein antippbares Element auf einem Mobilgerät beträgt im Allgemeinen etwa 45 Pixel im Quadrat, und wir müssten die Höhe von Kategorien und Tags fast verdoppeln, um dorthin zu gelangen. Dies ist möglich, wenn Kategorien und Tags auf eine einzige Zeile beschränkt sind, aber viele Websites haben hier genügend Inhalte, sodass sie umbrechen… und Abstände wie dieser wären nicht gut:

image
image420×144 11.3 KB

Ich könnte mir vorstellen, Kategorien und Tags neu zu gestalten, um eine Art Button-ähnliches Styling zu verwenden, um ordnungsgemäße Tippgrößen zu gewährleisten, aber das wäre eine große Änderung, die wir im gesamten Discourse implementieren möchten.

2 „Gefällt mir“
6

Danke für das aktualisierte CSS, es funktioniert mit dem neuesten Build.

Seltsamerweise ist das auf Mobilgeräten überhaupt nicht meine Erfahrung. Vielleicht liegt es an meiner Rechtshändigkeit, aber ich fand es immer viel schwieriger, auf den Thema-Titel zu tippen als auf andere Elemente.

Ich benutze hauptsächlich meinen rechten Daumen, um mich zu bewegen, und es ist fast unmöglich, versehentlich auf Kategorien und sogar Tags zu tippen, aber auf den Titel selbst zu tippen ist manchmal möglich (wegen der linksbündigen Ausrichtung des Textes und des Zeilenumbruchs aufgrund der schmalen Bildschirmbreite gibt es meistens Negativraum auf der rechten Seite).

Glücklicherweise hat Clickable Topic Theme Component die Navigation auf Mobilgeräten für mich stark verbessert, wo ich jetzt fast ausschließlich den Negativraum in der Themenliste verwende, um zum Thema selbst zu navigieren, und die Kategorie- und Tag-Elemente verwende, um schnell nach Kategorie oder Tag zu filtern (nur um immer wieder überrascht zu sein, dass es nicht funktioniert :upside_down_face:).

Ich bin mir nicht sicher, ob das überhaupt mit der Bildschirmgröße zusammenhängt, aber mein Handy hat einen Bildschirm unter 6 Zoll und ich hatte nie Probleme, diese Elemente anzuzielen.

Und wenn man sich im Thema befindet, gibt es noch weniger Abstand zwischen dem Thema-Titel und den Kategorie- und Tag-Elementen, und das Antippen war dort schon immer aktiviert.

2 „Gefällt mir“