Тег не нажимается в списке тем на мобильном

Внести вклад UX
1

Шаги для воспроизведения (любая тема с тегами на 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; 
  }
}

Я вполне понимаю стремление к единообразию, но случайно нажать на категорию или тег вместо темы, или нажать на неправильную категорию/тег — очень легко… И это особенно плохой опыт в списке тем, где вход в тему является основным действием.

Минимальный рекомендуемый размер нажимаемого элемента на мобильном устройстве обычно составляет около 45×45 пикселей, и нам пришлось бы почти удвоить высоту категорий и тегов, чтобы достичь этого. Это возможно, если категории и теги ограничены одной строкой, но на многих сайтах здесь достаточно контента для переноса… и такое расположение выглядело бы не очень хорошо:

image
image420×144 11.3 KB

Я мог бы представить переработку категорий и тегов с использованием какого-то более кнопочного стиля для обеспечения правильных размеров нажатия, но это было бы крупное изменение, которое мы хотели бы реализовать во всём Discourse.

2 лайка
6

Спасибо за обновлённый CSS, он работает в последней сборке.

Странно, но у меня на мобильном совсем не так. Возможно, это связано с тем, что я правша, но я всегда находил гораздо сложнее нажать на заголовок темы, чем на любые другие элементы.

Я в основном использую большой палец правой руки для навигации, и почти невозможно случайно нажать на категорию и даже на теги, но иногда нажимаю на сам заголовок (из-за левого выравнивания текста и переноса строк из-за узкой ширины экрана справа остаётся в основном пустое пространство).

К счастью, Clickable Topic Theme Component значительно улучшил навигацию на мобильном для меня: теперь я почти исключительно использую пустое пространство в списке тем для перехода к самой теме, а элементы категорий и тегов применяю для быстрого перехода к просмотру по категории или тегу (чтобы снова и снова удивляться, что это не работает :upside_down_face:).

Не уверен, связано ли это вообще с размером экрана, но на моём мобильном с экраном менее 6 дюймов у меня никогда не было проблем с нажатием на эти элементы.

А когда находишься внутри темы, расстояние между заголовком темы и элементами категорий и тегов ещё меньше, и нажатие на них там всегда было доступно.

2 лайка