PART_1. 인포메이션 디자인 (INFORMATION DESIGN)
*** 계층구조의 시각화 (Visualization of Hierarchical Stractures) ***
- 계층적으로 분류된 정보를 어떻게 시각화(visualization)할 것인가
- 정보의 시각화(information visualization) 또는 데이터의 시각화(data visualization)라고 부르며 주로 계층 구조의 시각화에 초점을 둠
- 계층구조의 시각화는 정보를 효과적으로 전달하여 창의적인 지식 생성을 도모하여 시용자의 의사결정을 돕는 인지적 도구의 역할을 수행
- 계층구조의 시각화는 다음 세가지로 볼수 있다
1. 트리 다이어그램(tree diagram)
메뉴구조와 파일구조를 시각화 하는데 사용
부모-자식관계를 노드(node)로 연결해 계층구조 표현
2. 트리맵(treemap)
계층구조를 사각형박스로 표현
한개의 부모정보박스는 여러개의 자식정보박스를 갖는데 자식정보박스의 면적을 합하면 부모정보박스의 면적과 일치
많은 계층구조를 한눈에 조망할 수 있다.
색상정보까지 사용하면 다차원적으로 계층구조를 시각화할 수 있음
3. 콘 트리(cone tree)
트리다이어그램을 3차원으로 시각화한 원뿔형 다이어그램
부모-자식 관계를 노드(node)로 연결해 계층 구조를 표현하는데 트리 다이어그램과 달리 부모 정보가 중앙에 위치하기도 하며 마우스를 대면 선택한 정보 중심으로 트리가 회전하기도한다
벤치마킹
http://www.marumushi.com
- 구글 뉴스를 통해 수집된 정보를 플래시 기반의 트리맵방식으로 실시간 제공
http://www.blackdogair.com
- 폴더와 파일구조를 메타포와 노드(node)로 표현, 복잡한 계층구조를 플래시 기반의 트리 다이어그램을 이용
http://www.visuwords.com
- 온라인 그래픽 사전 서비스
- 단어와 개념간의 의미와 연관성을 콘 트리로 표현
관련이론
메타포(metephor)
- 사용자의 경험과 지식을 활용할 수 있도록 현실세계의 환경을 컴퓨터상에 옮겨놓는 일종의 은유기법
- 개념적이고 추상적은 정보를 이해하기 쉽게 전달하기 위해 구체적이고 친숙한 개념을 이용하는것
- 예를 들면 화면상의 버튼은 실제 버튼을 은유적으로 차용한것
- 이 기법은 별도의 학습을 거치지 않더라도 클릭행위를 유도할 수 있으며, 행위가 전송값을 갖는다는것을 이해시킬수 있다.
출처: 웹2.0기획과 디자인(노주환)
UX/웹 2.0 기획과 디자인