Hallo Don,
Zunächst einmal: Das Theme ist absolut atemberaubend! Ich habe kürzlich FKB Pro für meine lokale Bildungscommunity, Jiwa.now, bereitgestellt, und die kartenbasierte Benutzeroberfläche sieht wunderschön und höchst professionell aus.
Beim Testen auf mobilen Geräten habe ich ein UX-Problem mit den anklickbaren Bereichen auf den Themenkarten festgestellt. Derzeit wirken die klickbaren Zonen inkonsistent. Beispielsweise können Nutzer an den äußersten Rändern der Karte klicken, um ein Thema zu öffnen, aber das Klicken auf andere leere Bereiche (z. B. rechts neben der Avatarzeile oder in der Mitte des Fußbereichs) bewirkt nichts.
Diese „Treffer-oder-verfehlen“-Interaktion verwirrt die Nutzer und führt häufig zu versehentlichen Klicks, wenn sie lediglich versuchen, durch den Feed zu wischen und zu scrollen.
Ein Vorschlag für zukünftige Updates: Es wäre eine UX-Verbesserung, wenn das Theme dies standardmäßig optimieren würde – indem nur der Kerninhalt (Titel, Bild und Auszug) anklickbar ist, um das Thema zu öffnen, während der Hintergrund der Karte deaktiviert wird, um versehentliche Klicks beim Wischen zu verhindern.
In der Zwischenzeit habe ich, um das mobile Touch-Erlebnis für meine Nutzer zu 100 % zuverlässig zu machen, ein CSS-Snippet mit einem „Whitelist“-Ansatz für pointer-events geschrieben. Dadurch werden Hintergrundklicks vollständig neutralisiert und Klicks werden gezielt nur auf den tatsächlichen interaktiven Elementen wieder aktiviert.
Ich dachte, ich teile es hier mit allen, die ihre Touch-Ziele verfeinern möchten, und vielleicht kann es auch für Entwickler als nützliche Referenz dienen:
/* Fix für mobile Klick-/Touch-Konflikte bei Karten (Smart Whitelist-Ansatz) */
/* 1. Den gesamten Kartenhintergrund neutralisieren, um Wisch-Klicks zu verhindern */
.topic-list-item {
pointer-events: none !important;
}
/* 2. Alle nativen Links und Buttons wieder aktivieren (Avatare, Tags, Titel) */
.topic-list-item a,
.topic-list-item button {
pointer-events: auto !important;
}
/* 3. Bildklicks wieder aktivieren */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
pointer-events: auto !important;
cursor: pointer !important;
}
/* 4. Den gesamten Fußbereich mit Statistiken wieder aktivieren */
.topic-list-item .topic-item-stats,
.topic-list-item .topic-footer,
.topic-list-item .post-activity,
.topic-list-item .activity,
.topic-list-item .num,
.topic-list-item .topic-meta-data {
pointer-events: auto !important;
}
/* 5. Alle überlappenden gestreckten Link-Pseudoelemente entfernen */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
pointer-events: none !important;
display: none !important;
}
Danke!
Leo