본문 바로가기

UX/웹 2.0 기획과 디자인

PART_1_20. 인포메이션 디자인 (INFORMATION DESIGN)

PART_1. 인포메이션 디자인 (INFORMATION DESIGN)

*** 사이드노트 (Sidenotes) ***


- 특정단어 또는 문장을 쉽게 이해할 수 있도록 측면영역에 제공되는 설명문
- 마우스 키보드 조작없이 읽어 내려가면서 보충설명을 확인할 수 있는 편집기법
- 본문을 정확히 전달하기위한 목적을 갖는다
- 인쇄물의 각주(footnote), 미주(endnote)와 비슷

- 인쇠물은 정해진 페이지라 하단에 각주, 미주를 제공할 수 있지만 웹은 분문 하단의 길이가 일정치않고 길기때문에 별도의 설명문을 삽입하기 어렵다
- 별도의 설명문페이지로 이동시키거나 팝업을 이용해 처리할 수 있지만 마우스나 키보드를 사용하지않으면 확인할 수 없음

- 본문에대한 저관심일때는 적극정인 조작을 기대할수 없으므로 미리 노출(push)시키는것이 유리
- 설명문에 노출되어있을경우 마우스, 키보드 조작이 생략되므로 읽기 속도는 더 빨라짐

- 메시지의 구조화를 통해 특정단어 또는 문장에 사용자의 주의를 집중할수 있음
- 측면공간을 효율적으로 이용할수 있음

- 보충설명이 필요없는 사용자에게는 복잡성측면에서 부담을 줄수 있는데 숨김기능을 제공해 보완함





벤치마킹

http://lab.arc90.com/

- 어플리케이션 개발 및 컨설팅회사로 사이드노트에 대한 아이디어를 개발하여 크리에이티브커먼 라이센스 방식으로 제공
- 옵션기능을 제공해 사이드노트 열람여부를 선택할 수 있도록함
- 단어와 사이드노트를 같은 색상으로 해 정보간 대응관개를 파악할 수 있도록함
- 죄측에 두는것은 읽기 시작점에 혼동을 줄수 있으므로 우측에 배치하는것이 좋음

http://hartshorne.ca/

- 특정단어를 부가적으로 설명하기위해 사이드노트를 사용





관련이론

메시지의 구조화

- 결정적 단서에 주의를 집중 시키기위해서는 눈에 띄거나 남다른 가치가 있어보이는 단서를 제공
- 밑줄, 볼드체, 주석, 설명그림, 도해 등으로 해당 메시지를 강조하는것을 메시지의 구조화라함









출처: 웹2.0기획과 디자인(노주환)