본문 바로가기

UX/웹 2.0 기획과 디자인

PART_2_13. 인터페이스 디자인 (INTERFACE DESIGN)

PART_2. 인터페이스 디자인 (INTERFACE DESIGN)

*** 탭 패턴 (Tab Patterns) ***


- 탭에 의해 구현된 인터페이스(tabbed document interface, TDI)가 사용자에게 가용한 옵션과 현재 선택된 옵션을 재빨리 인식시켜주기때문에 한화면에 여러문서를 담아도 이해하기 쉬움
- 선택된 탭과 해당정보 영역이 시각적으로 연결된 형태가 가장 바람직하다 - 탭 인터페이스의 핵심

- 웹브라우져 익스플로러, 파이어폭스, 오페라에도 적용
- 구글의  '개인화된 홈'에도 사용
- 공간 활용도를 높여줌
- 너무많으면 복잡해보이고 많은 개념을 담기때문에 정보를 개괄적으로 이해시키기 어려워진다

- 초기화면의 비중이 높이지고 사용자들은 점점 깊은 정보구조를 싫어 하다보니 한 화면에서 가능한한 많은 정보를 보여주는 디자인 전략을 선호하는데 탭에 의해 구현된 컨테이너를 여러개 사용하기도 함

- 선택된 탭과 해당정보 영역이 시각적으로 연결이 명료하게 보여지기 위해 탭 그룹(tab groups)의 개수가 4~6개를 넘지 안도록 조절하는 것이 필요





벤치마킹

http://www.yahoo.com/

- 고효율 사용이 요구되는 안전영역(safe zone) 내의 컨테이너 중 세 군데를 탭으로 구현
- 우측상단의 탭 네비게이션 위젯은 처음에는 버튼 형태였지만 마우스 이벤트에 의해 ㅐㅂ 형태로 바귀면서 탭 콘텐츠( tab contents)를 보여준다 (quick information function)

http://www.netvibes.net/

- 포틀릿을 사용해 개인화된 웹(personalized web)을 만들 수 있는 서비스
- 서비스의 핵심은 정보구조와 화면구조 를 사용자 스스로 맞춤화할 수 있다는 장점을 가지고 있음
- 정보 구조는 탭을 생성함으로써 스스로 디자인할 수 있음





관련이론

RIA(Rich Internet Application)

- 데스크톱 어플리케이션의 속성과 기능을 가진 웹 어플리케이션으로써 PC에 설치되지않고 웹 브라우져에 의해 작동
- 2002년 매크로미디어에 의해 처음 소개 되었고 X-Internet, AJAX, FLEX등을 통칭하는 용어로 사용됨

- 클라이언트 사이드(client-side)에서 구동 되기 때문에 서버 호출 없이도 동작돼 디자인 측면에서 다양한 인터랙션을 구사할 수 있음









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