정보 구조 설계에 해당하는 메뉴 트리, 정보 구조도(IA) 작성은 기획과 디자인 두 분야에서 통용되는 단계입니다.
기획자 뿐만 아니라 디자이너도 이와 같은 내용을 알면 디자인을 설계하고 표현하는데 있어서 매우 효율적인 작업을 할 수 있습니다.
이러한 정보 구조 설계를 마친 이후에 화면이 어떻게 보여지는지 와이어 프레임, 프로토 타이핑을 진행할 수 있습니다.
정보 구조를 설계하는 것의 핵심은, 사용자가 편리하게 이용할 수 있게 정보를 구성하는 것입니다.
어떤 구조가 사용자가 이용하기 편리한지 판단하는 근거는 디자인 리서치와 모델링, 아이디어 도출, 사용자 시나리오 등 지난 글들을 통해 알 수 있습니다.
이에 따라 사용자 경험을 이해하고 정보를 해체하고 재조합하면서, 논리적인 탐색 구조를 설정하도록 해봅시다.
0. 정보 구조 설계란?
정보 구조는 information Architecture라고 하는데, 말 그대로 정보의 구조 입니다.
정부 구조를 설계하는 이유는, 논리적으로 정보를 구성함으로써 사용자가 서비스를 이용하는데 불편하지 않도록
하기 위해서입니다.
정보 구조는 콘텐츠의 뼈대라고도 할 수 있습니다. 화면, 내비게이션 체계, 레이블링 등의 정보 구조를 도식이나 간결한 문서로 표현합니다.
작업자가 작업을 할 때 정보 구조를 쉽게 파악하면서 작업할 수 있기 때문에 필수적으로 작성되어야하는 문서입니다.
1. 메뉴 트리
정부 구조를 설계하려면 일단 서비스의 전체 구성을 한눈에 볼 수 있도록 메뉴 트리를 만들어야 합니다.
메뉴 트리를 만들 때는 상위에서 하위로 분류해 나가는 것을 나가는 것이 기본입니다.
상위와 하위를 나누는 기준은, 화면에서 특정 콘텐츠를 탭해서 디테일 뷰로 들어가는(깊이가 추가되는)경우 그 들어간 곳이 하위 구조입니다.
흔히 조직도나 가계도를 떠올리면 이해가 쉽습니다.
2. 정보 구조도
정보구조도는 그 자체로 정보 구조(IA)라고도 불릴 만큼, 많이 쓰이는 문서입니다. 메뉴 트리에서 콘텐츠의 상위 구조, 하위 구조를 정리했다면 그것을 깊이 단위로 정리할 수 있습니다.
어렵게 생각할 것 없습니다. 이 블로그의 정보 구조로 예를 들어 보겠습니다.
- 홈 화면에서 특정 카테고리를 클릭하면 1Depth(깊이)가 가 추가되는 것입니다.
- 특정 카테고리에서 특정 글을 클릭해서 들어가면 2Depth가 추가되는 것입니다.
기본적으로 Depth에 따라 구분을 짓고, 계층 간 구조·화면 명칭·간략한 기능·메모를 정보 구조도를 통해 간략하게 정리함으로서 작업하기가 수월해집니다.
이상으로 정보 구조 설계에 해당하는 메뉴 트리, 정보 구조도(IA) 작성 방법에 대해 알아보았습니다. 읽어주셔서 감사합니다.
'웹 > UIUX 공부' 카테고리의 다른 글
모바일 콘텐츠를 제작할 때 알아야할 4가지 (0) | 2022.05.17 |
---|---|
UI를 제작할 때 고려할 점 15가지 (0) | 2022.05.16 |
인터페이스와 UI의 종류 (0) | 2022.05.16 |
iOS 디자인과 안드로이드 머티리얼 디자인 가이드의 특징 (0) | 2022.05.16 |
W3C 웹 표준, 웹 접근성 연구소 체크리스트 정리 (0) | 2022.05.12 |
인터렉티브한 웹사이트를 만드는 방법, 참고할만한 사이트 (0) | 2021.12.24 |
웹&앱 서비스 기획 커뮤니티와 공부 참고, 도구 목록 (0) | 2021.12.24 |
웹 UX 디자인을 좋게 만드는 8가지 방법 (0) | 2021.12.08 |
댓글