모바일 주제 목록에서 태그를 탭할 수 없습니다

기여 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

음, 무언가 회귀(regression)된 것 같습니다… 현재 iOS에서 확인되는 것은 카테고리 탭이 카테고리 페이지로 이동하지만, 태그는 아무 반응이 없다는 것입니다 (즉, 토픽으로조차 클릭이 안 됩니다). 이 부분을 조사해 보겠습니다. 해당 CSS도 오래되었네요… 현재 상태라면 (해당 게시물을 업데이트하겠습니다):

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

일관성을 원한다는 욕구는 충분히 이해합니다. 하지만 토픽 대신 카테고리나 태그를 실수로 탭하거나, 잘못된 카테고리/태그를 탭하기가 매우 쉽습니다… 그리고 토픽으로의 진입이 주요 동작인 토픽 목록 화면에서는 특히 나쁜 사용자 경험을 초래합니다.

모바일 기기의 탭 가능 요소에 대한 최소 권장 크기는 일반적으로 약 45px 정사각형입니다. 이를 충족하려면 카테고리 및 태그의 높이를 거의 두 배로 늘려야 합니다. 카테고리 및 태그가 한 줄로 제한되는 경우 이는 가능하지만, 많은 사이트에는 내용이 많아 줄바꿈이 발생하며… 이러한 간격은 좋지 않을 것입니다:

image
image420×144 11.3 KB

적절한 탭 크기를 보장하기 위해 카테고리 및 태그를 버튼 스타일처럼 재설계하는 것은 상상할 수 있지만, 이는 Discourse 전체에 걸쳐 구현해야 할 큰 변경 사항이 될 것입니다.

2개의 좋아요
6

업데이트된 CSS 감사합니다. 최신 빌드에서 잘 작동합니다.

이상하게도, 저는 모바일에서 그런 경험을 전혀 하지 않았습니다. 아마도 오른손으로 사용하다 보니 그럴 수도 있지만, 저는 항상 다른 요소보다 토픽 제목을 탭하는 것이 훨씬 더 어려웠습니다.

대부분 오른손 엄지로 탐색하는데, 카테고리나 심지어 태그를 실수로 탭하는 일은 거의 불가능에 가깝습니다. 하지만 제목 자체를 탭하는 일은 가끔씩 발생합니다(텍스트가 왼쪽 정렬되어 있고 좁은 화면 폭 때문에 줄바꿈이 일어나므로 오른쪽에 대부분 여백이 있기 때문이죠).

다행히 Clickable Topic Theme Component 덕분에 모바일에서의 내비게이션이 크게 개선되었습니다. 이제 저는 거의 전적으로 토픽 목록의 여백을 이용해 토픽으로 이동하고, 카테고리 및 태그 요소를 사용하여 카테고리나 태그 보기로 빠르게 필터링합니다(하지만 다시 한번 놀라는 것은, 이것이 작동하지 않는다는 사실입니다 :upside_down_face:).

이것이 화면 크기와 관련이 있는지 확실하지는 않지만, 제 모바일은 6인치 미만의 화면을 가지고 있으며, 해당 요소를 정확히 탭하는 데 문제가 없었습니다.

그리고 토픽 내부에 있을 때, 토픽 제목과 카테고리 및 태그 요소 사이의 간격은 더 적으며, 그곳에서 그것들을 탭하는 것은 항상 활성화되어 있었습니다.

2개의 좋아요