티스토리 뷰
1. 컨텍스트 메뉴
1) 소개
- 일반적으로 마우스 오른쪽 버튼을 클릭하거나 버튼을 클릭하는 등 사용자 상호작용에 따라 나타나는 메뉴
- 팝업 메뉴, 드롭다운 등 다양한 이름으로 불리지만 일반적으로 비슷하게 보임
- 사용자 상호 작용 중에 작동하는 방식은 조금씩 다름
2) 여는 방법
- 마우스 오른쪽 버튼 클릭
- 버튼 클릭
3) 장점
- 인터페이스를 어지럽히지 않고 화면 항목과 관련된 기능에 액세스 할 수 있도록 함
4) 특징 / 팁
- 공간이 충분하면 컨텍스트 메뉴의 왼쪽 상단이 커서/버튼의 왼쪽 하단에 정렬됨 > 사용자의 예측 가능성이 높음
- 컨텍스트 메뉴가 연결된 항목을 강조 표시하여 선택한 항목이 어디에 적용되는지 이해할 수 있도록 하는 것도 좋음
- 창 크기에 반응하여 컨텍스트 메뉴의 위치를 조정
- 키보드 단축키를 통해 탐색할 수 있어야 함 > 기본 메뉴에 표시
- 컨텍스트 메뉴의 특이한 점은 사용 후 바로 사라진다는 것, 피드백을 추가하면 작업에 대한 결과를 전달하는 데 효과적
- 카피라이팅과 정보 아키텍처
- 메뉴 항목은 유사성과 관계에 따라 구분선을 사용하여 구분
- 항상 동일하게 메뉴가 보이도록 하되, 가능하지 않은 메뉴는 제거하는 대신 비활성화 표시하는 것이 나음
- 메뉴 항목 옆에 바로가기를 표시해서 검색 가능성 높이기
- 사용자 입력이 필요한 메뉴 항목에는 '...'를 추가하여 표시하기
- 애니메이션
- 적절한 수준의 애니메이션은 작업과 효과 사이의 연관성을 이해하는 데 도움이 됨
- 컨텍스트 메뉴는 생산성을 위한 인터페이스이므로 속도와 예측 가능성이 매우 중요함
- 커서가 사라지기 전에 커서로 하위 메뉴에 어떻게 액세스할 수 있는가?
- 지연 : 하위 메뉴가 선택되면 하위 메뉴가 유지, 상위 메뉴가 다시 선택됨
- safe triangle : 커서가 safe triangle에 있는 동안 하위 메뉴를 표시, safe triangle 로직을 비활성화하는 타임아웃 추가
- 컨텍스트 메뉴가 매우 긴 경우 탐색 방법
- 화살표를 사용하여 탐색/이동
- 메뉴에 스크롤바를 추가하여 사용자에게 알리기
5) 유의할 점
- 기본적으로 숨겨져 있으므로 사람들이 메뉴가 있다는 사실을 잘 모를 수 있음
2. 권장 사항
- 메뉴에 포함할 항목의 관련성 : 현재 상황에서 가장 필요한 가능성이 높은 항목
- 메뉴 항목이 수 최소화 : 탐색과 스크롤 어려움 방지
- 일관된 컨텍스트 메뉴 지원
- 기본 인터페이스에서도 컨텍스트 메뉴 항목을 사용할 수 있도록 지원
- 가장 자주 사용하는 메뉴 항목을 먼저 집중할 수 있는 곳에 배치
- 하위 메뉴를 사용해야 하는 경우 한 단계로 유지하기, 하위 메뉴를 열지 않고도 내용을 예측할 수 있도록 직관적인 제목 지정하기
- 하위 메뉴 : 논리적으로 관련된 메뉴에 대해서 보조 메뉴를 표시하는 항목
- 하위 메뉴 수준이 두 개 이상이면 환경이 복잡하고 탐색이 어려울 수 있음
참고 자료 :
'기능 deep dive' 카테고리의 다른 글
| [도서] 검색, 사전을 삼키다 (0) | 2023.12.17 |
|---|---|
| Search - 검색 (0) | 2023.06.05 |