웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
정보 구조와 네비게이션 사이의 차이점
Posted by kimdirector | 2015.08.10 | Hit : 3043
네비게이션 정보구조 디자인 웹사이트
목록보기이전보기
작성: 제니퍼 카르델로 2014년 6월 22일
주제: 정보 구조, 네비게이션

요약: 정보 구조는 사이트의 중추이다; 네비게이션은 사용자 인터페이스에 있는 그런 요소들을 참조하며, 사용자가 사이트에 있는 특정한 정보에 도달하도록 해준다.
 
 
전문가들은 가끔씩 정보 구조와 네비게이션 디자인을 혼동한다. 관련된 이 컨셉들이 진실이고 정보 구조가 웹사이트 네비게이션 디자인을 알리지만, 정보 구조와 네비게이션은 같지 않다. 사실, 정보 구조는 웹사이트 네비게이션 너머에 걸쳐있다. 나다니엘 데이비스는 UX매터즈에서 "정보 구조의 실행을 구성하기"라는 기사에 사이트의 정보 구조를 우위에 두어라는 아이스버그의 팁으로 웹 네비게이션을 언급했다.
 
 
정보 구조란 무엇인가?
 
웹 사이트의 (또는 인트라넷) 정보 구조는 두가지 주요 요소들을 갖고 있다:
 
  • 사이트 컨텐츠/기능의 확인과 정의
  • 사이트 컨텐츠/기능 사이의 관계들을 정의하는 근본적인 조직, 이름 정하는 법

정보 구조는 화면에 있는 사용자 인터페이스의 일부분이 아니다. 그보다 정보 구조는 사용자 인터페이스를 알아낸다. 정보 구조는 스프레드시트와 도표에 작성되어 있는데, 와이어프레임들, 포괄적인 레이아웃 (구성요소로 알려진), 혹은 프로토타입에서는 아니다.


이 사이트맵은 nngroup.com 사이트에 있는 서로다른 컨텐츠 조각들을 표현하고 있다. 푸른색 노드는 1단계 정보 객체를 나타내며, 녹색 노드는 2단계 객체를, 그리고 노란색은 3단계 객체를 나타낸다. 노드의 자식들은 모두 상위 노드 아래에 배치됬다.
 
 
정보 구조 자체가 사용자 인터페이스에서 보이진 않지만, 사용자 경험에 대부분 분명히 영향을 미친다. 전체적인 사용자 경험은 사용자가 부딪치는 모든 것으로 축적된다. 그리고 사용자들은 웹사이트의 구조를 보지 않지만, 그들은 컨텐츠가 갈라지고 그들의 욕구와 기대에 맞는 방법으로 접속되는걸 느끼길 바랄 것이다. 물론 애석하게도 사용자들은 컨텐츠/기능이 그들이 원했던 것이 아니었고, 형편없는 조직, 구조와 이름 짓는 법 때문에 저항을 경험한걸 느끼며 많은 사이트를 떠난다.
 
 
유사하게도, 당신은 슈퍼맨이나 방사선 전문의가 아닌 한, 말이나 닭을 바라볼 때 뼈대를 보고 싶진 않을 거다. 이 뼈대들은 그럼에도 불구하고 이 동물들을 아주 다른 생물체로 만든다. 닭을 타려고 하지마라. 뼈대는 당신을 지원하지 않기 때문이다.
 
 
이 활동들은 정보 구조가 관련됨을 정의하는걸 착수하였다:
 
  • 컨텐츠 목록: 웹사이트를 조사하고 현존하는 사이트 컨텐츠를 확인한다.
  • 컨텐츠 감사 추적법: 유용한 컨텐츠의 평가, 정확하며, 목소리의 톤과 전체적인 효과
  • 정보 그룹핑: 컨텐츠 사이에서 사용자가 중심이 된 관계들의 정의
  • 분류 개발: 일반화된 이름 짓기 규칙(표준어로 된)의 정의를 모든 사이트 컨텐츠에 적용
  • 서술적인 정보 제작: 유용한 메타데이터의 정의는 "관련된 링크" 목록들을 생성하기 위해 활용된다. 또한 다른 네비게이션 요소들은 발견을 돕는다.



웹사이트 네비게이션이란 무엇인가?
 
웹사이트의 네비게이션은 사용자 인터페이스 구성요소들의 모음이다. 네비게이션의 주요 목표는 사용자들이 정보와 기능을 찾도록 도와주는 것이다. 그리고 바람직한 행동들을 하도록 그들을 격려한다. 네비게이션 요소들은 글로벌 네비게이션, 로컬 네비게이션, 유틸리티 네비게이션, 빵부스러기, 필터, 측면, 관련 링크들, 푸터, 커다란 푸터 등을 포함한다.


네비게이션 요소들의 몇몇 예제들:
1) 유틸리티 네비게이션, 2) 글로벌 네비게이션, 3) 빵부스러기 흔적, 4) 로컬 네비게이션, 5) 관련 링크들 (이 경우에는, 기사와 블로그 포스팅)6) 커다란 푸터.
 
 
네비게이션 요소마다, 여러 결정을 반드시 해줘야 한다:
 
  • 사용법 우선순위: 사용자들이 네비게이션 요소에 얼마나 많이 의지하는가? 예를 들어, 사용자들은 주로 로컬 네비게이션을 사용하는 사이트를 들어갈 것인가? 또는 그들이 관련 링크들에 더욱 많이 의지할 것 같은가?
  • 배치: 어떤 페이지에서 그것이 나타나야 하는가? 페이지 레이아웃 그리드 안에서 어디에 두어야 하는가? (예를 들어, 위, 왼손, 오른손, 아래)
  • 패턴: 어떤 네비게이션 디자인 패턴들이 탐색용이성과 발견용이성을 가장 잘 지원하는가? -- 탭, 메가메뉴, 캐로셀, 아코디언 (뿐만 아니라 다른 옵션도)

 
정보 구조와 네비게이션 사이의 관계
 
새로운 사이트를 디자인할 때, 디자이너들은 정보 구조를 무시하고 네비게이션에만 초점을 맞출 수 있을까? 답은 아니다: 그건 비효율적이고 위험하기도 하다. 사이트의 컨텐츠와 기능에 전면적으로 적절하게 부응하지 않는 네비게이션은 아주 많은 비용이 들 수 있다. 예를 들어, 디자인 팀은 그들은 보이는 것을 좋아하기 때문에 전형적으로 반전된 L 스타일의 네비게이션을 사용하기로 결정하는 것을 생각해보자. 반전된 L은 4단계 이하로 사이트들에게 공간을 제공할 수 있다. 유감스럽게도, 나중에 프로젝트에서 그들은 사이트 인벤토리로 들어가고, 4단계 이상 깊은 사이트의 많은 섹션들을 탐험한다. 이제 그들은 돌아가서 새로운 네비게이션 구조를 디자인하거나, 모든 컨텐츠를 4단계로 쑤셔넣게 된다.

반전된 L 스타일의 네비게이션 (http://www.suffolk.edu/)
 

 
네비게이션을 디자인하기 전에 정보 구조를 정의하라
 
디자인이나 재디자인 프로젝트에 접근할 때, 정보 구조를 정의하거나 재정의해서 차 지붕 아래를 보고 시작하는게 중요하다. 정보 구조는 와이어프레임과 프로토타입을 시작하기 전에 마지막이 될 필요가 없다. 하지만 첫번째 패스는 컨텐츠의 용량과 복잡함을 처리하는게 필요하다. 혼자서 네비게이션 구성요소를 선택하는 것은 당신이 알맞은 정보 구조를 사용자의 욕구나 당신의 컨텐츠를 제공하는걸 최고로 여기지 않는 무언가로 바꾸게 한다.
 
 
Posted by kimdirector | 2015.08.10 | Hit : 3043
Origin http://blog.naver.com/scabbard2/220118651242
Tags 네비게이션 정보구조 디자인 웹사이트
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=458

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
사용자 애플 디자이너 프로젝트 결제 Design 문화 구매 협상력 iOS 7 스타일 BIP 파이어폭스 마이크로소프트 디자인 디자인 Example KISA 라이프스타일 스마트폰 리소스 전략 플래시 애플 온라인 개발자 로고디자인 IDG 블로그 바이러스 플래시. HTML5 CIP 직장 인포그래픽 비즈니스 상황대응 단축키 창의력 전달 Kit 웹디자인