5.2 GUI 가이드 라인 – 메뉴-최적의 UI 설계 가이드


메뉴 인터페이스는 MS-DOS나 UNIX, LINUX처럼 명령어를 기억해 일일이 입력하는 명령어 입력 방식의 인터페이스가 아니라 사용자들에게 선택할 수 있는 항목들을 제시하고, 원하는 항목을 선택하게 하는 방식이다. 그러나 메뉴 인터페이스를 제공한다고 해서 항상 사용자에게 편리한 것은 아니다.
설계자가 효과적인 메뉴 인터페이스를 만들기 위해서는 고려해야 할 사항들이 많다. 전체적인 메뉴의 구성 방식, 한 화면에 메뉴 항목의 수, 메뉴와 메뉴 항목의 이름들, 전문가를 위한 대안 등을 나타내고자 하는 시스템에 맞도록 설계해야만 장점을 살려 사용할 수 있다.

메뉴 구성 방식

일반적으로 다음과 같은 4가지 메뉴 구성 방식이 있는데, 각각의 구성방식의 특징을 잘 이해해 메뉴 설계 시 적절한 메뉴를 구성할 수 있어야 한다.
5.2 GUI 가이드 라인 - 메뉴-최적의 UI 설계 가이드

그림 11. 4가지 메뉴 방식

단일 메뉴

한 개의 메뉴로 사용자가 원하는 작업을 나타낼 수 있는 메뉴 구성 방식이다. 2개 이상의 항목을 가진 메뉴를 한 화면에 나타낼 수 있는 것이 보통이지만 메뉴 항목이 하나의 화면 크기를 초과하는 경우에는 하나 이상의 화면을 통해 나타내기도 한다. 가장 간단한 단일 메뉴는 그림 12와 같이 예-아니오의 선택을 제시하는 이진 메뉴 형태이다.
5.2 GUI 가이드 라인 - 메뉴-최적의 UI 설계 가이드

그림 12. 간단한 윈도우 98의 로그 오프 대화상자

또 한 단일 메뉴는 풀다운 메뉴와 팝업 메뉴가 있다. 풀다운 메뉴는 탑 메뉴 바(Top menu bar)를 통해 접근할 수 있으며 일정한 메뉴가 일정한 위치에 나타난다. 팝업 메뉴는 보통 마우스의 2번 버튼(오른손잡이의 경우 오른쪽 버튼)을 클릭했을 때 나타난다. 팝업 메뉴가 나타나는 위치는 현재 커서가 있는 위치에 나타나는 것이 보통이다.
일반적으로 팝업 메뉴는 문맥에 민감하게(context-sensitive) 상황에 따라 다른 메뉴를 나타나게 할 때 사용하면 유용하다.
5.2 GUI 가이드 라인 - 메뉴-최적의 UI 설계 가이드
5.2 GUI 가이드 라인 - 메뉴-최적의 UI 설계 가이드

그림 13. 풀다운과 팝업 메뉴 방식

순차적 메뉴

서 로 의존하는 일련의 메뉴들이 사용자의 각 메뉴에 대한 선택이 무엇이든 같은 순서로 나타나게 하는 메뉴이다. 즉, 메뉴 항목에서 선택이 제공되는 메뉴의 순서에 영향을 미치지 않는다. 순차적 메뉴를 이용하여 복잡한 결정이 요구되는 작업을 한번에 하나의 결정을 이루는 방법으로 쉽게 사용자에게 접근할 수 있다.
예를 들어 다음 인쇄 다이얼로그와 같이 인쇄를 하기 위해 프린터를 선택하고 인쇄범위, 인쇄 매수, 인쇄대상을 선택하는 등 서로 연관이 있는 일련의 메뉴들이 있는데, 이를 순차적 메뉴라고 한다.
 
5.2 GUI 가이드 라인 - 메뉴-최적의 UI 설계 가이드

그림 14. 순차적 메뉴 방식의 예

트리 메뉴

항 목이 다양하고 많아 한꺼번에 처리하기 어려울 때는 항목들을 분류하고 계층 구조로 만들면 구조적으로 접근할 수 있다. 이렇게 항목들을 트리 구조로 만들면 사용자는 메뉴 탐색을 구조적으로 접근할 수 있기 때문에 자연스럽게 메뉴 구조를 이해할 수 있고, 길을 잃지 않는다.
예를 들어 옛날의 PC 통신의 메뉴 구조의 경우 최상위 메뉴 아래에 나무 모양으로 구조적인 구조를 가지고 있었다. 한국HCI연구회라는 동호회로 이동하기 위해서는 최상위 메뉴인 Top에서 동호회로 가고, 다시 동호회에서 한국HCI연구회를 선택하면 된다. 트리 메뉴 구조상 다른 곳으로 이동할 때는 반드시 들어온 길을 거꾸로 나가야만 한다. 즉, 다른 동호회로 이동하기 위해서는 동호회로 다시 돌아간 다음 다른 동호회를 선택하는 것이다. 이렇게 트리 메뉴는 잘 분류되고 구조화가 되어 있으면 사용자들이 길을 잃지 않고 쉽게 메뉴를 사용할 수 있지만, 트리 메뉴 구조상 직접 특정한 메뉴로 이동하지 못하는 단점이 있다.
트리 구조에서 고려해야 할 가장 중요한 것은 바로 메뉴의 깊이와 넓이를 정하는 것이다. 메뉴 트리의 깊이, 즉 메뉴 단계의 수는 각 메뉴 단계에서의 항목의 개수, 즉 넓이에 해당한다. 만약 주 메뉴에 항목이 많다면 트리의 넓이는 넓어지고, 깊이는 얕아진다. 또는 주 메뉴의 수가 적으면 깊이는 그만큼 깊게 된다.
보통 각 메뉴 단계에서 4개에서 8개까지의 메뉴 항목을 사용할 것을 권한다. 그리고 깊이는 3단계 이상은 바람직하지 않다고 한다. 여러 경험적 연구를 살펴보면, 넓이가 깊이보다 더 선호되어 왔다. 이유는 4-5 단계 이상 깊어지면 사용자가 길을 잃어버릴 수 있기 때문이다.
트리 구조에 있어서 항목들의 이름을 정하는 것도 중요하다. 항목들의 이름은 범주가 겹치지 않아야 하고, 익숙하지 않은 용어는 피해야 한다. 이러한 문제들을 근거로 하여 메뉴 트리의 구성 법칙을 살펴보면 다음과 같다.
① 논리적으로 유사한 항목들로 그룹을 구성한다.
② 모든 가능성을 커버하는 그룹을 형성한다.
③ 항목이 여러 그룹에 중복되지 않는지를 확인한다.
④ 친숙한 전문 용어를 사용한다.
트리 메뉴 구조는 일반적으로 많이 사용하는 메뉴 구성 방식이므로 눈여겨볼 필요가 있다.
 

네트워크 메뉴

비록 트리 구조가 널리 이용되고 있지만 때로 네트워크 구조가 적당한 경우가 있다. 웹은 바로 네트워크 메뉴의 전형적인 예이다. 하이퍼링크는 어디든지 링크만 걸려 있으면 직접 이동할 수 있다. 이에 비해 트리 구조에서는 서로 다른 가지들 사이에 바로 갈 수 있는 경로가 없기 때문에 만약 다른 가지에 있는 메뉴로 이동하고자 할 경우에는, 메뉴를 거슬러 올라가 새로 탐색해야 한다. 요즘 PC 통신의 메뉴 구조는 기존의 트리 메뉴 구조에 네트워크 메뉴 구조가 적용되어 트리 구조로 메뉴를 탐색해 갈 수도 있지만 직접 원하는 메뉴로 이동할 수 있게 되어 있다.
흔히 웹사이트 탐색에 있어 길을 잃어버린다는 말을 많이 한다. 이는 사용자가 네트워크 메뉴 구조를 사용할 때 빈번히 발생되는 문제점으로 트리 구조처럼 구조적인 구성에서는 메뉴 시스템의 전체적인 구조와 메뉴들간의 관계에 대해서 심성 모형을 형성할 수 있지만, 네트워크 구조에서는 메뉴가 나타나는 순서가 고정되어 있지 않기 때문에 심성 모형을 형성하기가 더 어렵다.
트리 구조에서는 단일한 부모 메뉴가 있어 특정 메뉴로 이동시 지금까지 왔던 길을 역순으로 돌아가면 되지만, 네트워크 구조에서는 여러 가지 방법으로 메뉴에 도달할 수 있으므로 전체적인 연결도를 알고 있어야 한다.
요 즘 웹사이트를 보면 길을 잃어버리지 않게 하기 위해서 현재 위치를 표시하는 것을 볼 수 있다. 이렇게 네트워크 메뉴 구조에서는 현재의 위치를 사용자에게 알려주고, 트리 메뉴와 같이 메뉴를 구조적으로 보여주는 방법을 병행하는 것도 문제를 해결하는 방법일 것이다.
 

메뉴 항목의 순서

만약, 항목이 날짜나 요일처럼 자연적인 순서가 있으면 결정에 어려움이 없겠지만, 그렇지 않은 경우에는 항목의 특성을 살려 나열해야 한다. 순차적인 항목을 위한 전형적인 방법은 다음과 같다.

  • 시간순서 : 시간에 따른 연대순의 배열(예: 1999년, 2000년, 2001년…)
  • 번호순서 : 커지거나 작아지는 배열(예: 1, 2, 3, 4 )
  • 물리적인 특성 : 길이, 영역, 온도, 무게 등의 증가 또는 감소되는 배열(예: 덥다-따뜻하다-시원하다-춥다)

자연적인 순서가 없는 경우에는 일반적으로 다음과 같은 규칙을 따르면 무리가 없다.

  • 항목의 알파벳 순서
  • 항목의 분류별(카테고리) 순서
  • 가장 중요하다고 생각되는 순서
  • 가장 빈번히 사용되는 항목 순서

 

메뉴 시스템 설계 시 고려 사항

 

1) 메뉴 구조와 작업 구조가 일치하는 것이 좋다

그림 (a)에서 파일1을 편집, 출력하기 위해서는 먼저 최상위 레벨의 주 메뉴에서 다시 ‘편집’을 선택하고 파일1을 편집한 후에 파일1을 출력하기 위해서는 다시 두 번째 레벨로 돌아가기 위해 파일1을 닫고 다시 ‘출력’을 선택하여 파일1을 출력한다. 사용자는 어떤 작업을 수행할 때마다 매번 파일1을 선택해야 하기 때문에, 한 파일에 대해서 연속적인 작업을 할 때에는 비효과적이 된다.
그림 (b)와 같이 개선된 메뉴 구조에서는 파일1을 먼저 선택하고 편집이나 출력과 같은 수행 메뉴가 주어지기 때문에 한 작업이 완료된 후에 작업을 메뉴에 반환하고 다른 작업을 선택할 수 있기 때문에 효과적이다.
5.2 GUI 가이드 라인 - 메뉴-최적의 UI 설계 가이드

그림 15. 메뉴 구조와 작업 구조의 일치

2) 메뉴 계층의 넓이를 감수하더라고 깊이를 최소화시켜야 한다

일반적으로 메뉴 구조의 깊이와 넓이에 영향을 주는 두 가지 요인이 있는데, 이는 사용자와 판단 시간과 수행 시간이다. 판단 시간이 길게 요구될 경우에는 넓이가 덜한 게 바람직하고, 수행 시간이 길게 요구된다면 넓이가 넓은 것이 좋다. 트리 메뉴를 설명할 때도 언급했지만, 깊이는 3단계 정도가 적당하다.
 

3) 선택 메뉴는 수직으로 주어지는 것이 좋다

화면상의 텍스트 메뉴가 수직으로 되어 있을 때, 수평으로 되어있는 것보다 찾기 쉽다. 라디오버튼(옵션 버튼)이나 체크 박스의 경우에도 수평보다는 수직적으로 배열했을 때 사용자가 원하는 항목을 빠르게 찾는다.
 

4) 사용자의 경험 수준과 제공되는 입력장치에 의존해야 한다

보통 풀다운 메뉴나 팝업 메뉴를 보면 그림 16처럼 메뉴 항목이 흐린 폰트로 표시되고 선택할 수 없도록 되어있는 것을 볼 수 있다. 선택할 수 없는 항목에도 커서가 갈 수 있게 되어 있기 때문에 키보드로 메뉴를 잘 선택하는 숙달된 사용자는 아예 사용되지 않는 폰트를 없애는 것도 좋다. 그러나 초보자의 경우에는 메뉴가 상태에 따라 있었다, 없어졌다하면 자칫 혼동을 줄 수 있으므로 선택할 수 없는 메뉴 항목은 흐린 폰트로 보여주는 것이 좋다.
일반적으로 초보자나 전문가의 수준에 상관없이 상황에 따라 기능을 수행할 수 없다 하더라도 보여주는 것이 좋다.
5.2 GUI 가이드 라인 - 메뉴-최적의 UI 설계 가이드

그림 16. 선택할 수 없는 메뉴 항목의 처리 예

5) 논리적이고 상호 배타적인 의미의 명확한 범주를 정해야 한다

메뉴 항목으로 일반 정보나 특수 기능과 같은 선택 사항들은 내용이 너무 모호해 다음의 하위 레벨에는 어떤 사항들이 있는지를 사용자는 알 수 없다. 다소 메뉴 항목이 크기가 길어지더라도 사용자에게 그 메뉴 항목을 선택했을 때 무엇을 얻게 되는지에 관한 분명한 사전 지식을 갖게 하는 것이 바람직하다.
 

6) 디폴트값을 제시하라

사용자가 가장 많이 사용하는 항목으로 디폴트 값을 정하여 제시하는 경우, 만약 그 항목이 원하는 항목일 경우, 사용자가 메뉴 항목을 찾는 수고를 덜어 줄 수 있다. 키보드를 사용할 경우나 마우스가 그 위치에 놓여지게 할 경우, 엔터 키나 클릭만 하면 되므로 입력을 줄일 수 있는 이점도 있다.
디폴트를 정하는 방법으로는 가장 최근에 선택되었던 항목이나 또는 선택빈도수가 가장 많은 항목, 별다른 차이가 없을 때는 순서상 가장 먼저 나오는 항목을 디폴트로 하기도 한다.
 

7) 메뉴 항목 이름은 간결하고 위치 면에서 일관성이 있어야 하며, 상응되는 메뉴 타이틀과도 일치되어야 한다

메뉴 항목의 이름은 간결하고 이해하기 쉽도록 디자인되어야 한다. 그리고 각 이름들은 공통적인 구조를 가지는 것이 사용자가 이해하는데 도움이 된다.
각 항목들의 첫 단어를 동사, 형용사 등 다양하게 사용하면 메뉴 레이블이 복잡하고, 읽고 해석하기 어렵게 된다. 또한 메뉴 항목들이 한 화면 이쁀이 될 때, 항상 같은 위치에 두어 찾기 쉽게 할 수 있다.
 
 







제휴 링크로 구매 시 제휴마케팅 활동의 일환으로 일정액의 수수료를 지급받아 콘텐츠를 제작하는데 큰 도움이 됩니다.



도움이 되셨다면, 댓글이나 소중한 커피 한 잔 부탁드려도 될까요?

커피 사주기
























당신이 좋아할 만한 글







건강투캘린더

애플 건강기록을 캘린더 일정으로 가져와 캘린더에서 시간순으로 건강기록 보기









Add a Comment

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다