본문 바로가기

UX/웹 2.0 기획과 디자인

PART_3_2. 인터렉션 디자인 (INTERACTION DESIGN)

PART_3. 인터렉션 디자인 (INTERACTION DESIGN)

*** YFT (Yellow Fade Technique) ***

- AJAX는 전체 페이지를 로딩 시키지 않고 일부 영역만 로딩할 수 있기때문에 페이지상의 데이터 변화를 눈치 채지 못할 수 있으므로 이를 보완하기위해 짧은 시간동안 시선을 집중 시킬 필요가 있음

- YFT는 이를 보완하기 위한 디자인 기법
- 페이지상의 변화된 영역을 처음엔 노랑색으로 강조하다가 시간의 흐름에 따라 서서히 원래의 배경색으로 바뀌는 기법(highlighting change)

- 로딩 표시기(loading indicator) 기법에 비해 비교적 넓은 영역(area, sector, unit)의 데이터 변화를 확인시킬수 있는 장점이있음

- 데이터 변화로 인해 사용자에게 중대한 결과를 초래하거나 결과를 다시 되돌릴수 없는경우, 확인기법(confirmation)을 통해 사용자 의사를 직접 물어보는것이 원칙
- 메시지박스나 팝업창이 이에 해당 : 무거운 확인기법(heavy-weight confirmation)

- 데이터 변화가 중대한 결과를 초래하지 않는다면 무거운 확인 기법은 번거롭게 느껴지는데 이럴경우 YFT 같은 가벼운 확인기법 (light- weight confirmation)이 효과적임







벤치마킹

http://www.37signal.com/

- 페이지로딩없이 레이아웃을 유지한 상태에서 일부만 로딩되어 변화되는 모습을 사용자에게 인지시키기위해 YFT 기법을 개발


 



관련이론

AJAX (Asynchronous JavaScript and XML)

- 구성요소는 XHTML, CSS, DOM, XML, XSLT, XMLHttp, JavaScript 등임
- 브라우져와 DB간의 상호작용 패턴을 새롭게 정의한 기술
- 자동화기능을 구현할 수 있으며 어플리케이션처럼 빠른 동작을 가능하게 함
- 페이지요소를 객체화 시켜 원하는 객체만 호출 할수 있다는 정점이있음

- 브라우져의 뒤로가기기능과 즐겨찾기 기능을 사용할 수 없음
- 데이터의 변화를 사용자가 인지하기 어려움
- AJAX 기반의 사이트는 검색엔진이 색인하기 어려움
- 브라우져마다 자바스크립트 작옹 원리가 달라 호환성 구현이 어려움












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