Привет, Дон,
Прежде всего, тема просто потрясающая! Недавно я развернул FKB Pro для своего локального образовательного сообщества Jiwa.now, и карточный интерфейс выглядит великолепно и очень профессионально.
При тестировании на мобильных устройствах я заметил проблему с UX, касающуюся кликабельных областей на карточках тем. В настоящее время зоны для клика кажутся непоследовательными. Например, пользователи могут нажать на самые края карточки, чтобы открыть тему, но при нажатии на другие пустые области (например, справа от строки с аватаром или в середине подвала) ничего не происходит.
Такое взаимодействие «попадание-промах» вызывает у пользователей путаницу и часто приводит к случайным кликам, когда они просто пытаются пролистать ленту.
Предложение для будущих обновлений: Было бы улучшением UX, если бы тема по умолчанию уточняла это — делая кликабельными только основной контент (Заголовок, Изображение и Выдержку) для входа в тему, при этом отключая фон карточки, чтобы предотвратить случайные клики при прокрутке.
Пока что, чтобы сделать работу с сенсорным экраном на мобильных устройствах на 100% надежной для моих пользователей, я написал фрагмент CSS, используя подход «белого списка» с pointer-events. Он полностью нейтрализует клик по фону и заново включает клики только на фактических интерактивных элементах.
Решил поделиться этим здесь для всех, кто хочет улучшить свои цели для касаний, и, возможно, это будет полезным ориентиром для разработчиков:
/* Исправление конфликтов кликов/касаний на мобильных карточках (Умный подход белого списка) */
/* 1. Нейтрализовать весь фон карточки, чтобы предотвратить клики при прокрутке */
.topic-list-item {
pointer-events: none !important;
}
/* 2. Включить все нативные ссылки и кнопки (Аватары, Теги, Заголовки) */
.topic-list-item a,
.topic-list-item button {
pointer-events: auto !important;
}
/* 3. Включить клики по изображениям */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
pointer-events: auto !important;
cursor: pointer !important;
}
/* 4. Включить всю область статистики подвала */
.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. Удалить любые перекрывающиеся псевдоэлементы растянутой ссылки */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
pointer-events: none !important;
display: none !important;
}
Спасибо!
Леонид