이제 이런 멋진 메뉴를 갖게 되었으니, 더 보기 좋게 만들 수 있는 방법을 생각해 본 적이 있나요? 특히 모바일에서는 공간이 많이 낭비되는 것 같고, 이로 인해 클릭 영역도 훨씬 작아진 것 같습니다.
모바일
데스크톱
이런 스타일은 어떨까요?
클릭하고 읽기 쉬워질 수 있을 것 같은데, 추가된 공간을 활용하기 위해 모바일 전용 실험으로 시작해 보는 건 어떨까요?
첫 번째 탭에는 확실히 좋은 것 같네요. 거기에서 실험을 시작해 볼까요?
9개의 좋아요
나에게는 모바일에서 첫 번째 탭의 클릭 영역이 가장 큰 문제인 것 같습니다. 거기에 간격을 조금만 조정해도 대부분 해결되지 않을까요.
@awesomerobot은 어떻게 생각하시는지 궁금합니다. 거대한 빈 공간은 좀 과하다고 동의합니다.
10개의 좋아요
모바일에서는 더 큰 변경이 필요하다고 생각합니다.
12개의 좋아요
이렇게 생겼으면 좋겠어요. 
참고로, 저는 첫 번째 탭에서 사용성 문제를 겪은 적이 없습니다. 그 탭을 자주 사용하는 것은 아니지만, 사용했을 때 실수로 다른 곳을 클릭한 기억이 없습니다.
좋은 아이디어라고 생각하지만, 로그아웃 버튼을 나머지 항목과 분리하는 것이 좋을 것 같습니다. 제 이해로는 해당 메뉴에 옵션을 추가할 수 있는 구조인데, 로그아웃 버튼이 갑자기 왼쪽에서 오른쪽으로, 또는 그 반대로 이동하면 혼란을 줄 수 있기 때문입니다(자주 바뀌지는 않지만요).
저에게 가장 어색한 부분은 @rishabh가 처음 언급했듯이, 모든 탭에서 모바일 화면에 존재하는 상당한 수직 여백입니다.
7개의 좋아요
@rishabh의 목업 기반 두 가지 옵션을 준비했습니다. 3열 레이아웃을 선호하지만, 텍스트 공간이 제한됩니다(“익명 모드 활성화”는 단축할 수 있으며, 기본적으로 켜져 있지 않으므로…)
수정: 생각해 보니, 더 긴 단어를 사용하는 다른 로케일에서는 2열 레이아웃이 더 안전할 것 같습니다
10개의 좋아요
“익명 모드 시작”은 “로그아웃”처럼 우측 하단에 표시되는 텍스트일 수 있습니다.
디자인 측면에서는 세 번째 열 스타일의 컴팩트한 레이아웃이 약간 더 마음에 듭니다.
여기서 문제가 모바일인 것 같습니다:
큰 버튼이 여기서 작동할 수 있겠지만, 그렇다면 로그아웃을 아래로 옮기고 전체 너비를 적용하는 게 좋을까요 … 잘 모르겠네요 …
전반적으로 데스크톱은 현재 상태가 괜찮은 것 같습니다.
8개의 좋아요
데스크톱은 괜찮은 것 같고, 이건 모바일에서만 변경해야 한다고 생각합니다.
8개의 좋아요
새 주제인가요? 이 토론은 이미 완료된 빠른 접근(quick access)에 대해 주제에서 벗어난 것으로 보입니다(그리고 그 결과는 훌륭했습니다). 또한 최신 제안의 영향을 받지 않습니다.
왜 이러한 최신 변경 사항이 필요한지 이해하지 못하겠습니다. 하지만 "모바일에서는 더 큰 변경이 필요하다"는 다른 곳에서 제시된 근거를 놓쳤을 수도 있습니다.
-
데스크톱과 모바일 메뉴를 동일하게 유지하는 것을 선호합니다. 둘 다 사용하는데, 그렇게 하면 인지적 부담이 적습니다.
-
여러 열 레이아웃은 일반적으로 읽기 속도가 느립니다. 아이콘은 유용하지만, 버튼이 추가되거나 제거되는 경우에는 그렇지 않습니다.
-
세로 방향으로 랜딩 공간이 부족하다면(이미 드롭다운 메뉴의 가로 폭과 같습니다) - 왜 모든 메뉴에 아이콘 버튼을 사용하지 않는 것인가요?
-
빈 흰색 공간을 채우는 것이 주요 목표인 것 같습니다. 제안된 큰 버튼보다는 다른 기능들을 우선시하고 싶습니다:
- 각 게시물 아래의 답글 버튼과 일치하도록 텍스트 크기를 키우기
- 더 많은 메뉴 옵션, 예: 초대, 배지
- 일부 구분과 함께 옵션을 그룹화: 사용자 메뉴 옵션은 사용자 요약과 동일한 순서로 함께 배치; 초안은 단독으로; 로그아웃은 맨 아래에 단독으로;
- 통계
8개의 좋아요
저도 일관성 있는 방향(유지보수도 더 쉬움)을 선호하지만, 탭하는 것과 클릭하는 것은 경험 자체가 다르기 때문에… 때로는 다른 레이아웃이 필요할 수 있습니다.
항목 수가 매우 적기 때문에 이 부분은 크게 걱정하지 않습니다.
그렇게 해야 할까요? 어딘가에서 시작해야 합니다. 언젠가 햄버거 메뉴도 아이콘으로 줄일 수 있을지도 모릅니다.
사용자 메뉴의 탭과 동일한 수준을 맞추기 위해 이 안에는 반대하지 않지만, 이 맥락에서 배지/초대는 실제로 그렇게 중요하지 않다고 생각합니다(배지는 이미 햄버거 메뉴에 있고, 대부분의 사람은 초대를 사용하지 않으므로) 따라서 도움이 되기보다 더 혼란을 줄 수 있습니다.
항목이 6~7개뿐인 상황에서 이는 의미가 없습니다.
아마 제가 오해하고 있는 것일 수 있지만, 이미 동일한 순서입니다(초안과 익명 모드에는 사용자 페이지에 전체 탭이 없으므로, 그것들이 순서를 약간 끊어 놓긴 합니다)
이 생각도 해봤지만, 지금은 피하고 싶습니다. 현재 이 모든 메뉴는 어디론가 이동하거나 무언가를 수행하기 위해 클릭할 수 있는 항목들로만 구성되어 있습니다… 순수한 정보 제공 콘텐츠에는 적절한 장소가 아닌 것 같아서요?
8개의 좋아요
이 부분은 좀 까다로운데, 사실 이 메뉴는 항목이 많아야 7~8개에 불과합니다. 이 항목들을 iPhone X에 맞추는 것과 구형 iPhone이나 Android 기기에 맞추는 것은 전혀 다른 문제죠. 2열 박스 레이아웃이 공간을 더 잘 활용하는 방법이라고 생각하지만, 큰 화면의 폰에서는 여전히 여백이 남습니다.
뷰포트 높이에 따라 박스 크기를 동적으로 조절하는 식으로 좀 더 정교하게 만들 수도 있겠죠. 목표가 공간을 채우고 탭 타깃을 매우 쉽게 만드는 것이라면, 좀 더 과감하게 시도해볼 수도 있습니다. 아마도 이건 너무 극단적인 예시일 거지만, 이렇게 크게 늘려도 여전히 여백이 남는다는 점을 보여줍니다.
한 손으로 조작하기 쉽게 만들려면, 이상적으로는 이 메뉴 전체가 화면 하단에 위치해야 합니다… (이 레이아웃에서는 탭 스타일이 그렇게 적합하지는 않지만, 그냥 간단한 예시입니다). 하지만 그러면 콘텐츠 방향에 대해 복잡해지기 시작합니다 (메뉴가 하단에 있다면 목록도 아래에서부터 시작해야 할까요? 이건 상당히 복잡한 문제가 됩니다).
어쨌든, 좀 떠들었네요… 2열 아이콘 박스가 좋은 시작점이라고 생각합니다. 공간을 조금 더 잘 활용하고, 탭하기 훨씬 쉽게 만들 수 있는 목표를 달성할 수 있으니까요.
14개의 좋아요
전체 공간을 채우려 하지 말고, 데스크톱처럼 모바일에서도 높이를 동적으로 변경하여 메뉴가 필요한 만큼만 공간을 차지하도록 하는 것은 어떨까요? 그렇게 하지 않는 이유가 있을까요?
전체 높이(full-height)는 모바일 앱의 “전체 높이 스와이프 가능 메뉴” 패턴을 따릅니다. 전체 높이가 아니라면, 메뉴를 스와이프하여 닫을 수 있다는 점이 명확하게 전달되지 않을 것 같습니다(적어도 추가된 여백이 추가적인 스와이프 영역 역할을 합니다).
9개의 좋아요
이것은 큰 개선이 될 것이며, 그런 선례를 좋아합니다. (현재 상황이 나쁘다는 뜻은 아닙니다.)
4개의 좋아요
사용자들이 초안을 확인하는 것이 충분히 흔한가요? 알림, 북마크, 메시지처럼 메뉴에서 프로필 탭이 아닌 별도의 탭으로 분리할 만큼의 가치가 있을까요? 알림보다는 상대적으로 덜 사용될 것 같지만, 북마크와 비교하면 어떤지 궁금합니다. 최근 메뉴 변경으로 사용자 메뉴의 프로필 섹션에 초안 확인 기능이 추가되기 전까지는 모든 초안을 볼 수 있다는 사실조차 몰랐습니다. 그래서 이 기능을 더 눈에 띄는 위치로 옮기는 것이 더 나은 방법일지 궁금합니다.
1개의 좋아요
곧 북마크가 훨씬 더 유용해질 예정입니다.
10개의 좋아요
크리스 @awesomerobot, UX 작업에 감사드립니다.
2열 레이아웃이 정말 좋습니다.
@seanblue 님이 제안하신 초안(drafts)의 더 눈에 띄는 위치 변경도 좋은 아이디어인 것 같습니다. 완전히 놓치고 있었어요 … 유용한 기능인데 현재는 숨겨져 있거든요.
오른쪽의 세 가지 탭이 시선을 모두 끌어서, 사용자가 사용자 메뉴 왼쪽을 클릭할 수 있는지 확인하려고 넘어가는 경우가 많지 않을 것 같다는 생각이 듭니다.
해당 영역을 코딩하고 계실 것 같아서 … 목록에 개별 CSS 클래스를 추가해 주실 수 있을까요? 현재 모두 class = "read"로 설정되어 있습니다. 일부 항목을 숨길 수 있으면 좋겠습니다.
사용자가 서로를 볼 수 없는 개인용 클라이언트 포럼을 좀 특이하게 구축하고 있습니다. @joebuhlig 님이 테마에서 시도하고 있는 것과 비슷한 방식이죠.
감사합니다.