내비게이션과 레이블링 정의

내비게이션과 레이블링 정의

정보 구조화와 분류체계·사용자 요구사항을 바탕으로 기능·메뉴 구조를 작성하고 내비게이션과 레이블링을 정의할 수 있다.

기능 정의 및 메뉴 구조 작성

1. 기능 정의

UI 시나리오 기반의 태스크 분석 결과로부터 사용자에게 필요한 인터페이스의 정보 및 콘텐츠, 기능, 절차 등을 도출한다. 기능 구조는 사용자가 수행하는 태스크를 지원하기 위해 앱에서 제공해야 하는 인터페이스 구조이다. 앱의 기능은 사용자들이 필요로 하는 메뉴, 또는 콘텐츠이며 기능에 따른 세부 기능 요소를 필요로 한다. 다음의 문화콘텐츠 앱의 기능 정의 작성 사례는 다음과 같이 구성하였다. 주요 기능인 문화 콘텐츠 분야를 장르별로 구분하여 사용자가 앱에 진입 시 초기 화면에서 직관적으로 확인할 수 있도록 구성한 사례이다. 첫 번째, 사용자는 초기 화면에서 영화 메뉴로 탭을 하여 진입할 수 있으며 베스트셀러, 신작, 무료 서비스, 추천, 카테고리 등의 세부 기능 요소를 통해 신속하게 원하는 콘텐츠를 검색할 수 있다. 또 카테고리에 진입 시 스릴러, 로맨스 등 장르별 콘텐츠를 바로 이용할 수 있게 구성하였다. 두 번째는 애니메이션 메뉴로 첫 번째와 같은 탭 방식으로 진입할 수 있으며 베스트셀러, 신작, 무료 서비스, 추천, 카테고리 등의 세부 기능 요소를 영화 메뉴와 같게 구성하여 사용자가 쉽게 기능 구조를 이해할 수 있게 하였다. 또 카테고리에 진입 시 판타지, 극장판 등 장르별 콘텐츠를 바로 이용할 수 있게 구성하였다. 세 번째, 장르소설 메뉴 또 영화와 애니메이션과 일관되게 구성하였으며 카테고리에 진입시 무협, 판타지 등 장르별 콘텐츠를 바로 이용할 수 있게 구성하였다. 문화 콘텐츠 앱의 사용자층이 특정 연령대에 집중되기보다는 20대부터 50대에 이르는 사용자층을 가질 것으로 예측하여 기능 구조는 단순하고 직관적으로 구성하였으며, 초기 화면에서 처음 하나의 기능을 사용하게 되면, 이후에는 그 경험을 그대로 대입하여 사용할 수 있도록 기능을 정의하였다.

2. 메뉴 구조

메뉴 구조도는 정의된 메뉴들을 정리하여 각 메뉴들마다의 기능을 문서로 정리 한 것을 말하며, 이를 기능 정의서 라고도 부른다. 사용자 요구사항을 토대로 기능 구조를 도출하여, 정보 구조화와 분류 체계를 명확히 수립한 후 메뉴 구조를 작성한다. 메뉴 구조도에는 메뉴의 레벨, 로그인 여부, 유료 페이지 여부 등 결정 사항이 포함된다. 일반적으로 메뉴 구조도는 프로젝트 초기에 클라이언트와 협의가 되어야 프로젝트 마무리 단계에서 문제가 발생하지 않으므로 작성 후에는 협의 단계를 거쳐야 한다. 메뉴 구조 작성 시 유의해야 할 사항은 사용자의 인지 능력을 고려해야 하는 것으로, 인지이론에 의하면 메뉴의 폭은 7개 내외의 인지규칙을 따라야 한다. 메인 메뉴가 10개 이상이 되는 경우, 사용자의 인지적 한계에 이르게 된다는 점을 기억하여 메뉴 구조도를 작성해야 한다. 일반적인 메뉴 구조도의 작성 방법은 다음과 같다.

• 카테고리와 대 분류 메뉴를 결정한다.
• 메뉴의 폭(width)을 결정한다.
• 메뉴의 깊이(depth)를 결정한다. 주 메뉴는 1 depth 메뉴, 하위 메뉴는 2 depth 메뉴, 다음 하위 메뉴는 3 depth 방식으로 메뉴 깊이를 결정한다.
• 메뉴 구성은 곧, 페이지 수가 되며, 부 메뉴 개수만큼 페이지가 생성된다.
• 메뉴 구조도 작성 시, 폭과 깊이를 고려하여 결정해야 한다. 사용자들은 문화 콘텐츠 앱에 진입 시 주요 기능 세 가지 메뉴별 정보를 제공받게 된다.

내비게이션(navigation)과 레이블링(labeling)의 정의

1. 내비게이션의 이해

내비게이션은 사용자가 원하는 정보를 빠르고 정확하게 찾고, 사용자에게 현재 위치와 이동 방향을 제공해주는 모든 것들을 의미한다. 모바일 앱 UX/UI를 구성함에 있어서 내비게이션은 UX에 크게 영향을 주는 이동성이 있는 구성요소로서, UI 디자인과 콘텐츠의 연관성을 통해 사용의 흐름을 유도하는데 중요한 역할을 수행한다. 내비게이션은 모바일의 제한된 화면에서 사용자가 쉽게 발견하고, 접근할 수 있게 하여 사용자 작업을 도울 수 있도록 설계되어야 한다. 내비게이션 설계 시 다음의 사항들을 유의하여야 한다.

• 메뉴 그룹핑(grouping)이 명확하게 되어 있는가?
• 메뉴 계층구조가 가시적인가?
• 사이트 구조의 깊이와 폭이 적절한가?
• 내비게이션 레이블링이 일관되고 명확한가?
• 사용자 수준에 맞는 용어를 사용하고 있는가?
• 사용자가 얻고자 하는 정보에 대한 접근성이 3단계 내에 이루어지는가?
• 상, 하위 메뉴 간 관계가 적절한가?

2. 내비게이션의 유형

(1) 글로벌 내비게이션 바(Global Navigation Bar: GNB)

모든 앱 페이지에서 고정적으로 위치하는 내비게이션 시스템을 말한다.

(2) 로컬 내비게이션 바(Local Navigation Bar: LNB)

GNB 하단 카테고리, 즉 하위 계층의 서브 메뉴 영역의 내비게이션 시스템을 말한다

(3) 콘텍스트 내비게이션 바(Context Navigation Bar: CNB)

정보의 맥락상 유사한 정보로의 이동을 도울 수 있게 이미지와 단어에 관련 페이지를 연결하는 내비게이션 시스템을 말한다.

3. 내비게이션의 특성

(1) 내비게이션은 인터페이스 구조 층에 영향을 받는다.

사용자가 앱의 콘텐츠를 쉽게 구분하고 정보를 습득할 수 있도록 이전의 정보구조 설계가 진행되어야만 내비게이션 디자인 단계가 효과적으로 수행될 수 있다

(2) 정보 공간을 디자인한다.

앱의 동작 방식을 정의한 후, 인터페이스와 내비게이션의 요소들을 통해 동작 방식이 실제 보이게 될 형태를 정의한다.

(3) 중요한 사용자 경험의 요소이다.

내비게이션은 페이지 간 이동 방법, 검색 과정과 인터페이스 요소들 간의 링크 관계, 앱 페이지에서 사용자 위치를 나타낸다. 사용자의 정보 접근을 도와주고 사용편의성을 제공하며 전반적인 앱 서비스의 신뢰도에 영향을 끼치게 됨으로써, 결국 사용자 경험에 중요하게 영향을 끼치게 되는 요소이다.

4. 레이블링의 이해

레이블링은 앱의 인터페이스 디자인(interface design)에서 다양한 시각 요소와 콘텐츠를 더욱 효과적으로 전달하기 위한 표현 형식 중 하나이다. 앱 개발 시, 시스템에서 더욱 큰단위의 정보를 사용자에게 표현하기 위한 용도로 레이블을 사용한다. 예를 들어 한글 프로그램의 경우 파일, 편집, 보기 등의 메뉴 등과 같이 그 하위 레벨의 메뉴와 기능을 직관적으로 찾아 볼 수 있도록 레이블링 되어 있다. 이와 같이 레이블링은 제작하는 모든 페이지의 정보 체계에 이름을 지어 주는 것을 의미하며 정보의 구조와 체계, 위치를 정확하게 알릴 수 있도록 하여 사용자가 혼동하지 않도록 적절한 이름을 제시하여야 한다. 레이블의 목적은 수직적인 페이지 공간이나 이용자의 이용 공간을 너무 많이 차지하지 않고도 정보를 효율적으로 전달하는 것이며, 레이블링의 유형은 텍스트형, 아이콘형, 아이콘과 텍스트 혼합형으로 분류할 수 있다. 레이블링을 작업 시 주의해야 할 사항들은 다음과 같다

• 짧은 주의 집중과 빠른 판단을 이끌어 낼 수 있어야 한다.
• 직관성과 일관성을 유지해야 한다
• 누구나 쉽게 직관적으로 인식할 수 있는 용어를 사용해야 한다.
• 사용자의 정보 접근을 효과적으로 도울 수 있어야 한다.

5. 레이블의 구성 요소

문화 콘텐츠 앱의 정보를 사용자가 보다 빠르고 편리하게 찾을 수 있게 하기 위해서는 다음과 같은 레이블의 구성 요소를 잘 갖추어야 한다.

(1) 대표성을 지녀야 한다.

레이블은 서브 메뉴의 항목들을 대표할 수 있는 레이블로 작성해야 한다. 레이블이 나타내는 콘텐츠에 대한 실마리를 제공할 수 있도록 설명적으로 작성해야 한다.

(2) 연관성이 있어야 한다.

하나의 카테고리 안에 포함되어있는 항목들은 서로 연관성을 가져야 한다. 영화 카테고리 내에는 영화 콘텐츠와 관련된 것으로 구성하고, 연극 카테고리에는 연극 콘텐츠와 관련된 항목들이 구성되도록 하여야 한다.

(3) 일관성이 있어야 한다.

레이블 작성 시 표현 방법에 일관성이 있어야 한다. 레이블을 표현하는 방법이 일관되지 못하면 사용자들에게 혼란을 가져올 수 있다.

(4) 상호 배타적이어야 한다.

동일한 레벨의 메뉴 레이블은 서로 배타적이어야 한다. 레이블은 메뉴에서 그룹으로 나타나는 경우가 대부분이다. 하나의 레이블의 의미는 연속해 있는 다른 레이블의 해석에 영향을 줄 수 있기 때문에, 가능한 한 레이블을 구분해야 한다.

(5) 사용자 관점의 언어를 사용해야 한다.

레이블의 언어는 가장 보편적이며 누구나 쉽게 알 수 있는 레이블을 선택해야 한다. 기술적 용어를 자제하고 약어를 사용하지 않아야 한다.