Ch03_2_정보구조설계

jsBae 2024. 10. 17. 10:15

학습목표
정보구조 설계 단계를 이해하고 단계별 주의사항을 학습한다.

1 정보 구조와 정보 구조 설계

IA(Information Architecture)는 서비스의 목차 역할
정보 구조Information Architecture, IA는 사용자가 원하는 정보를 불편 없이 사용할 수 있도록 만든 뼈대라고 할 수 있다.
앱에서는 화면 내의 내비게이션 체계나 레이블링 등을 도식화한 것을 의미 한다.

정보 구조를 설계하는 이유

- 프로젝트의 범위, 예산, 인력, 일정 등의 산출 근거
- 디자이너와 개발자의 공유 문서
- 개발 페이지 목록의 역할이 강해지고 있는 추세

이 이미지는 정보 구조 설계의 중요성을 설명하기 위한 예시로 사용되며, 강아지의 신체를 나누어 계층적 구조로 표현하여 복잡한 정보나 시스템을 어떻게 분류하고 조직할 수 있는지 보여주고 있다.

3. 그렇다면 IA는 어떻게 작성 되어야 할까요?

중요한 IA 요소들

I.A. 개발 5 단계

정보 정의: 서비스에서 제공할 정보를 정의하는 작업을 의미한다. 이 단계에서 서비스가 제공하려는 정보의 범위와 성격을 결정한다.
정보 구조 설계: 대중소로 이어지는 정보의 계층 구조를 만드는 과정이다. 정보의 중요도와 연관성을 기반으로 구조적으로 설계한다.
내비게이션 설계: 사용자가 원하는 정보를 탐색할 수 있도록 하는 네비게이션을 설계하는 단계이다. 특히 모바일 환경에서는 제스처나 상태 변화가 더 중요하다는 점이 강조된다.
검색 설계: 사용자가 메타데이터를 이용하여 원하는 정보를 쉽게 찾을 수 있도록 검색 시스템을 설계하는 과정이다. 서비스 전반에 걸쳐 설계가 필요하다.
필터/태그 설계: 중간 탐색 과정에서 정보를 보다 쉽게 찾을 수 있도록 세부 메뉴나 정보의 속성에 기반한 필터나 태그를 설계한다.
레이블링: 정보명이나 메뉴명을 지정하여 사용자가 명확하게 인식할 수 있도록 이름을 붙이는 작업이다.

정보구조 설계는 IA를 정보의 체계, 구조 , 동선을 만들어 내는 작업이다.

앞서 개를 분해해서 관계를 표시하듯 건물로 치면 공간을 구획하고, 계단과 복도를 설계하면 각 공간을 효율적으로 채우는 작업이겠죠.

이처럼 정보구조설계가 되어야 이용흐름이 설계되고, 인터랙션 즉 상호작용, 조작, 상태변화와 합당한 UI 에서의 정보구성, 배치가 즉 레이아웃이 설계될수 있다.

① 정보 정의 “모든 이해의 시작은 분류에서 출발한다”

모든 이해의 시작은 분류에서 출발하는 것처럼 정보체계의 정립
정보계층구조를 나누기 전에 정보의 정의 및 분류를 나누는 것이 중요하다.

서비스에서 제공할 정보를 정의하는 작업
정보 계층구조, 유형, 현황, 정보단위, 구성, 출처, 디지털가공여부, 제공방식, 담당자, 업데이트 주기, 사용자 참여방식 등…

② 정보구조설계

* 대 , 중, 소로 이어지는 정보의 계층구조를 만드는 것

이 과정에서 "depth(깊이)"와 "breadth(너비)"는 정보 구조의 두 주요 차원을 설명하는데 사용되는 용어입니다.

Depth(깊이):
이는 정보 구조에서의 계층의 수를 나타냅니다. 깊은(depth) 구조는 여러 하위 계층을 갖고 있으며, 사용자가 최종 목적지에 도달하기 위해 많은 수준의 탐색을 거쳐야 할 수 있습니다.
예를 들어, 웹사이트가 매우 깊은 정보 구조를 가지고 있다면, 사용자는 메인 페이지에서 최종 내용에 도달하기 위해 여러 하위 페이지를 클릭하여 방문해야 할 수 있습니다.
너무 깊은 구조는 사용자가 쉽게 길을 잃게 만들 수 있으므로, 보통은 간결하고 직관적인 탐색 경로를 제공하는 것이 좋습니다.

Breadth(너비):
이는 각 계층 내의 카테고리 또는 항목의 수를 의미합니다. 너비(breadth) 구조는 각 수준에서 다양한 옵션을 사용자에게 제공합니다.
예를 들어, 메인 메뉴가 매우 넓은 웹사이트는 다양한 하위 카테고리나 페이지를 한 계층에 나열할 수 있습니다.
너무 넓은 구조는 사용자에게 많은 선택을 제공하여 혼란을 줄 수 있으니, 관련 정보를 적절히 그룹화하여 명확성을 유지하는 것이 중요합니다.

효율적인 정보 구조 설계는 Depth와 Breadth 사이의 균형을 맞추는 데 있다. 너무 깊은 구조는 사용자의 탐색을 방해할 수 있고, 너무 넓은 구조는 혼란을 초래할 수 있다. 따라서 정보의 성격과 사용자의 요구를 고려하여 적절한 깊이와 너비를 설정하는 것이 중요하다.

모바일에서 대표적인 정보 구조 설계

계층 구조 (Hierarchy):
- Depth가 있는 정보 구조로, 정보가 상하관계로 나열된다.
- 깊은 설계는 종종 불편함을 초래할 수 있다.
- 복잡한 정보를 논리적으로 분류하여 제시하지만, 너무 깊으면 사용자 탐색이 어려워질 수 있다.
- 예제 : 전자상거래 애플리케이션에서 카테고리 탐색 시 사용된다. 예를 들어, 제품이 대분류, 중분류, 소분류로 나뉘는 구조로 사용자에게 제공된다. (아마존, 정부기관웹사이트, 쇼핑몰)
허브 앤 스포크 (Hub & Spoke):
- 허브앤스포크 용어는 자전거 바퀴에서 유래되었다. 자전거 바퀴는 가운데 집중되는 허브가 있고 바퀴까지 바퀴살이 방사형으로 펼쳐져 있다. 중앙 페이지가 허브 역할을 하며, 여러 카테고리로 분산된 콘텐츠로 이동할 수 있다.
- 허브 페이지를 통해 각 콘텐츠로 이동하는 방식은 집중적으로 탐색할 수 있다는 장점이 있지만, 항상 중앙 페이지를 경유해야 하는 단점도 있다.
- 예제 : 항공사 앱에서는 메인 화면에서 출발지를 입력하면 다양한 목적지로 이동하는 구조를 갖춘다. 또, 음악 스트리밍 앱에서는 메인 화면(허브)에서 다양한 플레이리스트나 앨범으로 이동할 수 있다.
중첩 인형형 (Nested doll) - 계열 구조 또는 선형 구조:
- 한 방향으로 정보가 제공되며, 목록형 화면에서 사용자가 항목을 탐색하는 방식이다.
- 단계별로 탐색이 이루어지며, 각 항목이 중첩된 형태로 제공된다.
- 예제 : 뉴스 앱이나 블로그에서 기사 제목을 클릭하면 본문으로 넘어가고, 다시 클릭하면 관련 기사로 이동하는 방식의 탐색 구조를 가질 수 있다.
대시보드 (Dashboard):
- 홈 화면에서 요약된 정보를 제공하며, 사용자에게 한눈에 중요한 정보를 전달하는 방식이다.
- 주로 일정, 뉴스, 금융, 피트니스 앱에서 사용된다.
- 예제 : 사용자의 일일 피트니스 활동을 요약해 보여주거나, 주식 시장 정보를 요약해서 제공하는 앱에서 자주 사용된다.
레이블링 - 하단 탭 구조:
- 각 탭이 사용자에게 제공되는 서비스를 명확히 레이블링하여 빠르게 접근할 수 있도록 돕는다.
- 간단한 구조를 제공하는 서비스에 적합한 방식이다.
- 예제 : 각 탭을 통해 피드, 탐색, 알림, 설정 등에 쉽게 접근할 수 있는 소셜 미디어나 뉴스 앱에서 많이 사용된다.

③ 네비게이션 설계

네비게이션(Navigation)은 사용자가 정보를 효율적으로 탐색할 수 있도록 돕는 인터페이스 요소를 의미한다.

네비게이션의 주요 역할:

정보 탐색을 용이하게 함: 사용자가 원하는 페이지나 정보를 찾기 위한 경로를 제공한다. 효율적인 네비게이션은 사용자가 적은 클릭 수로 원하는 정보에 도달할 수 있도록 돕는다.
정보 구조의 시각화: 네비게이션은 정보 구조를 반영하며, 계층적 정보 구조가 있는 경우 메뉴, 하위 메뉴 등을 통해 정보의 계층을 시각적으로 나타낸다.
사용자 위치 표시: 사용자가 현재 웹사이트나 앱 내에서 어디에 있는지를 명확하게 알려준다. 예를 들어, '빵 부스러기(브레드크럼)' 방식은 사용자의 탐색 경로를 보여줌으로써 어디로 가야 할지를 안내한다.

네비게이션의 종류:

글로벌 네비게이션 (Global Navigation):
- 사이트의 모든 페이지에서 동일하게 나타나는 주요 메뉴나 탐색 요소이다. 사이트의 핵심 섹션(예: 홈, 제품, 서비스, 고객 지원 등)에 대한 링크를 제공하며, 사이트 전체에서 일관성을 유지한다.
- 예시: 상단 메뉴 바 또는 푸터에서 항상 표시되는 링크들.
로컬 네비게이션 (Local Navigation):
- 특정 섹션 내에서 사용되는 네비게이션으로, 하위 카테고리나 관련된 페이지로 이동할 수 있도록 돕는다. 일반적으로 각 섹션이나 페이지에 국한된 탐색 경로를 제공한다.
- 예시: 쇼핑몰 사이트의 특정 카테고리 내에서 상품 필터 옵션을 제공하는 메뉴.
링크 네비게이션 (Link Navigation):
- 웹페이지 내에서 사용자가 특정 정보를 얻기 위해 클릭할 수 있는 하이퍼링크 형태의 네비게이션이다. 텍스트 링크, 이미지 링크, 버튼 등 다양한 형태로 제공될 수 있다.
- 예시: 기사 내에 포함된 다른 관련 기사나 외부 페이지로 연결되는 하이퍼링크.
검색 네비게이션 (Search Navigation):
- 사용자가 직접 검색어를 입력하여 원하는 정보를 찾을 수 있게 해주는 네비게이션 방법이다. 사이트의 모든 정보를 빠르게 탐색할 수 있는 도구로, 대규모 사이트에서 특히 유용하다.
- 예시: 구글, 네이버와 같은 검색 엔진에서 제공하는 검색 창이나, 쇼핑몰에서 제공하는 상품 검색 기능.
콘텍스트 네비게이션 (Contextual Navigation):
- 사용자가 현재 보고 있는 콘텐츠와 관련된 추가 정보를 제공하는 방식으로, 사용자가 더 많은 관련 정보를 탐색할 수 있도록 돕는다. 예를 들어, 문서나 블로그 게시물에서 관련 콘텐츠나 추가 리소스를 안내하는 링크를 포함하는 방식이다.
- 예시: 블로그 글 하단에 있는 "이 글을 읽은 사람들은 이런 글도 읽었습니다"와 같은 추천 콘텐츠 링크.

이 네비게이션 방식들은 각각의 목적에 맞게 사용되어, 웹사이트의 정보 탐색을 용이하게 하고 사용자 경험을 향상시키는 데 중요한 역할을 한다.

내비게이션 고려사항

가장 먼저 로딩되는가 : 네비게이션 버튼 등은 가능한 적은 용량으로 만들어서 빠르게 로딩되도록 만든다.
간결한가 : 사용자들이 오래 보아도 질리지 않도록 거추장스러운 요소를 없앤다.
사이트의 구조를 한눈에 알 수 있는가.
입력된 텍스트가 선명하게 보이는가 : 이미지로 만들 경우 좁은 공간에 텍스트를 입력했을 때 텍스트가 깨져 보이는 경우가 허다하다. 특히 한글의 경우는 더욱 심각하다. 이럴 때에는 네비게이션 메뉴의 제작 과정에서 텍스트에 안티앨리어싱 옵션을 끄고, 폰트의 선택을 신중하게 하도록 하자.
일관성이 있는가 : 네비게이션의 모든 요소가 일관성이 있는지, 특히 디자인의 컨셉에 잘 어울리는지.
현재 나의 위치를 알 수 있도록 설계되어 있는가 : 사용자가 위치해 있는 곳이 사이트의 어느 부분인지 일말의 단서를 주어야 사용자는 방향을 잃지 않는다.
브라우저의 네비게이션 시스템을 적절하게 이용하고 있는가 : 넷스케이프나 익스플로러 모두 기본적인 네비게이션 시스템을 포함하고 있고, 인식하지 못한 상태에서 우리는 그 시스템에 많은 부분을 의지한다. 예를 들어 [뒤로], [앞으로]버튼이나, [즐겨찾기], [목록보기], URL입력 부분등이 그것인데 이를 잘 이용하도록 세심한 부분에 신경을 쓰는 것이 현명하다. 반대로 [뒤로],[앞으로]버튼만을 의지하고 페이지에 어떠한 링크(이를테면 돌아가는 화살표 같은 )도 주지 않는다면 사용자는 당황하게 될 것이다.
너무 많은 길을 내어서 산만하지 않은가 : 지하철역에서 같은 방향이 표시되어 있는 두 갈래 길을 본적이 있을 것이다. 이 두 갈래 길은 어느쪽으로 가든 같은 지점에 도착하게 되어 있지만 표지판을 본 입장에서는 잠시 주춤하게 된다. 어느 쪽이 맞는 거야? 마찬가지로 너무 많은 요소를 배치해서 (예를 들면 한 페이지 안에 네비게이션, 텍스트 링크 등) 가능한 표시는 클릭으로 원하는 페이지에 도달하도록 만드는 것은 좋지만, 때론 이러한 장치가 서핑를 산만하게 만들 수 있다는 사실도 염두에 두자

네비게이션 설계 시 PC vs 모바일 차이점

네비게이션 설계 시 PC와 모바일 환경의 차이점은 주로 화면 크기, 입력 방식, 사용자 행동 패턴에 의해 좌우된다. 이로 인해 사용자 경험을 최적화하기 위해 두 플랫폼에서의 설계 방식에는 차이가 있다. PC에서는 넓은 화면과 복잡한 탐색이 가능하지만, 모바일에서는 간결성, 직관성, 그리고 빠른 접근성이 중요한 요소로 작용한다.

구분	PC	모바일
화면 크기 및 공간 활용	- 큰 화면을 활용할 수 있으므로, 수평 메뉴와 드롭다운 메뉴를 자주 사용 - 로벌 네비게이션을 화면 상단에 배치하고, 세부 카테고리는 드롭다운 방식으로 제공하는 것이 일반적 - 사이드바를 이용한 탐색도 자주 활용 - 내비게이션 비중이 크다. - UI에서 큰 비중-상단(글로벌메뉴, 로컬메뉴영역)	- 햄버거 메뉴(☰ 아이콘)를 사용 - 메뉴를 숨기거나, 하단 탭을 통해 주요 네비게이션 항목에 쉽게 접근할 수 있도록 한다. - 터치 기반 탐색을 고려해 메뉴가 너무 복잡하지 않게 설계 - 내비게이션 비중이 비교적 덜함 (중요하지 않다는 것이 아니라 보다 간결하고 직관적이라는 의미)
사용자 행동 패턴의 차이	- PC 사용자들은 주로 멀티태스킹을 하거나, 긴 시간 동안 사이트를 탐색하는 경향 - 여러 카테고리를 쉽게 탐색할 수 있는 드롭다운 메뉴, 사이드바 메뉴가 많이 사용	- 모바일 사용자들은 빠르게 원하는 정보를 찾고, 특정 앱을 짧은 시간 동안 사용하는 경우가 많기 때문에, 네비게이션 요소는 간결하게 설계되고 터치 기반의 직관적인 인터페이스가 더 중요
탐색 구조	- 깊이(depth) 있는 탐색 구조를 사용해도 무리가 없으며, 여러 단계로 나누어진 정보를 탐색하기에 적합	- 모바일 네비게이션은 깊이(depth)보다는 너비(breadth) 중심으로 설계 - 네비게이션을 항상 시각적으로 노출하지 않고도 쉽게 탐색할 수 있도록 돕는다.
입력방식	마우스와 키보드를 통한 탐색이 주를 이루므로, 시각적인 네비게이션 요소가 더 중요하게 작용 더 많은 정보나 옵션을 한 화면에 배치가능	터치스크린을 통해 탐색 스와이프나 터치 제스처를 사용

④ 검색

검색은 다량의 콘텐츠를 보유한 사이트를 운영하는 데 있어 중요한 요소다.
입력 필드의 적절한 크기, 검색 필드에서 어떤 정보가 표시되는지와 같은 사소한 변경조차도 검색 유용성을 상당히 증가시켜 결과적으로 UX를 향상시킨다.

검색은 다량의 콘텐츠를 보유한 사이트를 운영하는 데 있어 중요한 요소
디자인 규칙 “쉽게 눈에 띄어야 한다“
키워드를 직접 입력하거나 조건을 여러 개 선택해서 원하는 정보로 빠르게 접근 할 수 있는 탐색 방법

* 검색어 입력창 하나가 아니다!

- 검색어 입력창과 옵션
- 검색결과화면 설계
- 검색 리소스
- 연관검색어, 추천 검색 결과는 어떤식으로 보여 줄 것인지…

* 검색창을 어디에 넣을까

-쉽게 접근 할 수 있는 위치 – 페이지 상단 중앙이나 오른쪽에 배치

-검색이 주서비스가 아닐 경우 아이콘으로 표시

* 검색어 제안하기

검색 가능한 항목을 명확히 하는 것이 중요
검색어 자동추천

* 검색결과 레이아웃

읽기 쉽게 구성하여 제공해야 한다
사용자가 입력한 검색어는 검색 버튼을 누른 후에도 사라지지 않아야 한다.
검색 결과를 표시할 때는 콘텐츠의 유형을 고려하여 레이아웃을 설정한다. 기본적인 레이아웃은 목록보기와 격자보기다.
검색 결과 없음은 금지 (표시는 하나 대안 마련)
필터, 분류 옵션 제공 : 필터링, 정렬 옵션을 주면 사용자가 데이터의 범위를 좁히는 데 도움이 된다

5 .필터 / 태그 설계

특정정보 범위 또는 특정 정보 하나에 바로 접근 할 수 있게 돕는 중요한 경험 요소이다.
필터 : 사용자들이 원하는 조건을 직접 선택 – 사용자 고민, 목적의식 분명
태그 : 정보와 관련된 키워드를 단순히 선택만 하면 바로 이용 – 비목적의식
필터이후의 맥락도 고려

•다른 것들은 숨기고 결과만 보여준다.

•전체 리스트에서 필터링 된 것은 최상단에 정렬한다.

•전체 리스트 에서 필터링 된 것은 하이라이트 한다.

* 필터 와 태그 설계 시 개인화가 필요, +정렬기능도 개인화 고려

6. 레이블링

- 서비스의 메뉴명, 정보명, 검색 조건명, 필터명, 태그명 등을 설계하는 작업

- 사용자 입장에서의 레이블은 서비스를 구성하는 정보, 기능, 구조다

- 정보 자체를 대표한다.

* 레이블링의 원칙

-모든 레이블은 정보를 대표한다. 레이블만 봐도 정보가 연상돼야 함다.
-사용자 입장에서 레이블을 정한다.
-일관성 있는 레이블링을 만들어라

-한 서비스에서 중복되는 레이블은 피한다.

-어설픈 메다포 보다는 직관적인 것이 낫다.

-간결하게 표기한다.

플로차트(Flowchart)

사용자에게 앱을 이용하는 동선을 알려주는 순서도.
정보 구조 설계에 표시하기 어려운 구체적인 동선을 작성할 수 있기 때문에 개발자와 상세한 부 분을 논의할 때 용이하다.
플로차트를 그릴 때는 전 세계적으로 통용되는 표준 기호를 준수하면서 그려야 한다.
최근의 앱은 한 페이지 안에 많은 기능을 포함하고 있어 와이어프레임과 플로차트를 복합적으로 활용하는 와이어 플로차트(Wire Flowchart)를 더 선 호하기도 한다.

[실습] 회원가입 플로우차트를 만들어 보자

회원가입
약관보기
약관동의 != 메인페이지로 이동
회원정보입력
데이트 유호성 체크 != 다시 작성 유도, 필드로 이동 (ex, 필수기입체크, 중복체크)
회원정보 DB입력
입력처리 결과체크 != 에러발생, 가입처리시 에러발생출력
회워가입성공
회원가입 로그인

회원로그인 시스템 플로우차트예

고객 구매 주문서 예

와이어 플로차트의 예

https://app.diagrams.net/

Flowchart Maker & Online Diagram Software

Flowchart Maker and Online Diagram Software diagrams.net (formerly draw.io) is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPM

app.diagrams.net

728x90

저작자표시 비영리 동일조건 (새창열림)