PhilFoss
8월 20, 2023, 7:37오후
1
안녕하세요, 저는 디스커스에 처음 온 사람입니다. 이 관찰이 도움이 되길 바랍니다. 햄버거 메뉴가 닫기 UI로 바뀌지 않아서, 더 많은 내용이 보일 줄 알고 클릭했는데 의외로 닫히는 경우가 많았습니다. 이미 열려 있던 상태였거든요. ‘테마 컴포넌트’ 카테고리에 더 많은 접근 권한이 생기면 몇 줄의 CSS를 추가할 계획을 세웠습니다. 다행히 코드베이스에 적절한 클래스가 있어서 사이드바가 표시되는지 여부에 따라 해당 클래스를 활용할 수 있습니다.
.btn-sidebar-toggle::before {
transition:.2s ease-out all;
opacity:0;
content: "+";
font-size: 32px;
transform: rotate(0deg);
position:absolute; left:12px;
}
.btn-sidebar-toggle svg {
transition:.2s ease-out all
}
body.has-sidebar-page .btn-sidebar-toggle::before {
opacity:1;
transform: rotate(45deg);
}
body.has-sidebar-page .btn-sidebar-toggle svg {
opacity:0
}
4개의 좋아요
감사합니다! 또한 X 닫기 버튼을 메뉴 자체의 맨 위로 이동시키는 것도 제안합니다. (그 위치에 버튼을 “메뉴 닫기” 텍스트로 표시하고, X 대신 왼쪽을 가리키는 화살표를 사용하는 것도 좋을 것 같습니다.)
← 메뉴 닫기 또는 << 메뉴 닫기
4개의 좋아요
Canapin
8월 22, 2023, 2:20오후
3
대부분의 사용자가 사이드바가 항상 활성화된 상태로 Discourse를 사용하는 것 같습니다(다양한 포럼에 대한 통계를 보면 흥미로울 것 같네요). 많은 사용자에게 사실상 영구적인 레이아웃의 일부를 닫으라고 권유하는 큰 X 버튼은 좀 이상해 보일 것 같습니다.
3개의 좋아요
pfaffman
8월 24, 2023, 12:18오후
4
거의 사용되지 않는 햄버거-닫기 아이콘이 윈도우에서 가장 가치 있는 좌측 상단의 손쉬운 클릭 영역을 차지하고 있는 것은 최적의 상태가 아니라는 점에 동의합니다.
Cloudflare의 사이드바 하단에 있는 것은 다음과 같습니다:
CSS(또는 아마도 DOM?)에 대해 저보다 조금 더 아는 사람이 테마 컴포넌트를 꽤 빠르게 만들 수 있을 것 같지만, 아마도 템플릿을 수정하는 PR이 더 적절한 해결책일 것입니다.
사이드바의 첫 번째 항목으로 배치하는 것도 가능합니다…
3개의 좋아요
버튼이 접힌 사이드바에 있으면 어떻게 다시 열 수 있나요?
2개의 좋아요
pfaffman
8월 24, 2023, 12:32오후
6
아니!
정말 좋은 지적이네요!
저는 UX 전문가라고 한 적이 없잖아요.
. . . 음 . . . 알겠습니다
그들은 사이드바를 이렇게 접도록 만들어 놓았어요:
그리고 하단의 요소가 사이드바를 다시 펼칩니다.
그러니까 사이드바를 제거하는 대신 접는 것이 해결책이 될 수 있겠네요. 그러면 아이콘이나 색상을 알고 있다면, 사이드바를 펼치지 않고도 사용할 수 있으니까요.
거의 모든 사이트가 왼쪽 상단에 홈/아이콘을 배치하는데, 거기에 햄버거 아이콘을 두는 것은 어색해 보입니다.
3개의 좋아요
Lilly
8월 24, 2023, 12:34오후
7
이건 별개의 문제일 수 있지만, 모바일에서 사이드버거 아이콘이 여전히 오른쪽 상단에 있는 이유는 작은 터치스크린에서 데스크톱처럼 로고가 왼쪽 상단에 있으면 실수로 로고를 탭하는 일이 흔할 것 같기 때문이라고 추측합니다. 물론 아바타와 검색 아이콘 근처에 있는 경우에도 같은 말이 될 수 있겠지만요.
2개의 좋아요
아, 그렇군요. 이해가 됩니다. 구글 메일도 비슷한 기능이 있는 것 같은데, 햄버거 버튼을 왼쪽 상단에 유지하고 있습니다:
2개의 좋아요
pfaffman
8월 24, 2023, 12:39오후
9
이 테마를 보면 햄버거 아이콘이 사이드바에 위치해 있어, 엄밀히 말하면 왼쪽 위 모서리가 아닙니다:
2개의 좋아요
Lilly
8월 24, 2023, 12:41오후
10
참고로 UX 디자인의 균형과 외형 측면에서 왼쪽 위를 선호하며, 열기/접기 기능에 대해서는 문제가 없습니다.
1개의 좋아요
실제로 직접 사용해 본 적은 없지만, 마우스를 올렸을 때 확장되는 기능도 있어서 꽤 좋습니다.
아이콘 세트가 더 특징적인 것 같아서, 접힌 상태에서 아이콘을 파악하기가 메타의 것보다 훨씬 쉽다고 생각합니다. 다만 여러 라벨을 추가하기 시작하면, 우리 태그가 가질 수 있는 것과 같은 모호함이 생길 수 있습니다:
1개의 좋아요
Lilly
8월 24, 2023, 12:49오후
12
호버 태그와 카테고리 이름은 안 됩니다. 호버는 터치스크린 인터페이스에서도 이상적이지 않습니다. iPad에서 데스크톱 모드로 호버 관련 기능을 사용하면 제대로 동작하지 않습니다.
1개의 좋아요
마우스와 동일한 방식으로 화면 탭이 동작한다면, 호버 효과를 좋아합니다.
제가 한 클라이언트를 위해 고도로 커스터마이징한 Ghost CMS 사이트에서 가장 좋아하는 스타일 중 하나를 소개합니다. 사이드바의 어디를 호버하든 세로로 쌓인 클릭/탭 링크가 슬라이드되어 열리며, 캐스케이드형 서브메뉴가 표시됩니다. 매우 매끄럽고 탐색하기 쉬운 느낌을 줍니다. 여기서 직접 체험해 보실 수 있습니다:
PhilFoss
11월 12, 2023, 3:30오전
14
모바일에서 확인해 보셨나요? 버그가 꽤 많아요
Don
12월 29, 2023, 9:55오전
15
안녕하세요
제 사이트에서는 사이드바 토글에 들여쓰기(indent)와 내어쓰기(outdent) 아이콘 조합을 사용하고 있습니다.
indent (사이드바 표시)
outdent (사이드바 숨김)
2개의 좋아요
데스크톱용 또 다른 방법은 Flarum 에서 확인할 수 있습니다…
다른 분들도 이 문제를 Core 팀에서 다뤄야 한다고 생각할지 궁금합니다.
그 때문인지, 이전 UI(사이드바 없음)를 사용하는 상위 커뮤니티들이 Discourse에서 꽤 많습니다.
저는 우리처럼 큰 커뮤니티를 정리하는 데 사이드바가 정말 유용하다고 생각하지만, 현재 Discourse의 동작 방식은 그 반대입니다.
이런 작지만 중요한 세부 사항 때문에 비기술적인 사용자들은 포럼을 어떻게 사용해야 하는지 모른다는 느낌을 받습니다.
항상 개선할 여지는 있습니다
그동안 이 Theme Component를 테스트하고 있습니다:
2개의 좋아요
공유해 주셔서 감사합니다.
