Ciao Don,
Prima di tutto, un tema assolutamente splendido! Ho recentemente implementato FKB Pro per la mia comunità educativa locale, Jiwa.now, e l’interfaccia basata su schede ha un aspetto magnifico e altamente professionale.
Durando i test su mobile, ho notato un problema di UX relativo alle aree cliccabili sulle schede degli argomenti. Attualmente, le zone cliccabili sembrano incoerenti. Ad esempio, gli utenti possono cliccare sui bordi stessi della scheda per entrare in un argomento, ma cliccare su altre aree vuote (come a destra della riga con l’avatar o al centro del piè di pagina) non fa nulla.
Questa interazione «colpisci o manca» confonde gli utenti e spesso porta a clic accidentali quando cercano semplicemente di scorrere e sfogliare il feed.
Un suggerimento per gli aggiornamenti futuri: Sarebbe un miglioramento dell’UX se il tema potesse rifinire questo aspetto di default, rendendo cliccabili per entrare nell’argomento solo i contenuti principali (Titolo, Immagine e Estratto), disabilitando contemporaneamente lo sfondo della scheda per evitare clic accidentali durante lo scorrimento.
Nel frattempo, per rendere l’esperienza tattile su mobile affidabile al 100% per i miei utenti, ho scritto un frammento CSS utilizzando un approccio di «lista bianca» basato su pointer-events. Neutralizza completamente il clic sullo sfondo e riabilita specificamente i clic solo sugli elementi interattivi effettivi.
Ho pensato di condividerlo qui per chiunque voglia affinare i propri target tattili e, forse, potrebbe essere un utile riferimento per gli sviluppatori:
/* Correzione per conflitti di clic/tocco sulle schede mobili (Approccio Smart Whitelist) */
/* 1. Neutralizza l'intero sfondo della scheda per evitare clic durante lo scorrimento */
.topic-list-item {
pointer-events: none !important;
}
/* 2. Riabilita tutti i link e i pulsanti nativi (Avatar, Tag, Titoli) */
.topic-list-item a,
.topic-list-item button {
pointer-events: auto !important;
}
/* 3. Riabilita i clic sulle immagini */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
pointer-events: auto !important;
cursor: pointer !important;
}
/* 4. Riabilita l'intera area delle statistiche del piè di pagina */
.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. Elimina eventuali pseudo-elementi di link allungati sovrapposti */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
pointer-events: none !important;
display: none !important;
}
Grazie!
Leo