PART_3. 인터렉션 디자인 (INTERACTION DESIGN)
*** 자동 완성 (Auto Complete) ***
- 검색UI의 요구사항은 입력 편의성, 입력신속성, 입력 정확성
- 입력 신속성과 정확성을 위해 등장한것이 자동완성 기능임
- 같은 단어를 반복적으로 사용할 경우 단어를 기계적으로 저장해 사용자가 해당 단어와 관련된 글자를 입력하면 신속하게 관련 단어를 목록화해서 보여주는 기능
- 검색어 입력 이벤트(onkeypress, onblur, onchange)를 자바 스크립트를 이용해 목록화(indexing)된 유사어를 서버에 요청하는 방식
- 시스템 관점에서 보면 유사어 제안(suggest) 기능
- 얼마나 사용자 컨텍스트에 적합한 유사어를 제시할 수 있느냐가 관건
- 자동 완성 기능의 장점은 사용자의 기억과 입력 부담을 줄여주고 사용자의 입력 상황에 가장 적합한 단어를 제안하는것
- 유사어 목록은 드롭다운 박스를 이용해 검색창 바로 아래에 배치 시키고 디자인도 검색창과 긴밀하게 결합된 형태로 디자인해야함
- 키보드만으로 원하는 과업을 달성할 수 있도록 사용자의 키보드 컨트롤 상태를 지원하기 위함임
- 키보드 컨트롤을 위한 키값 설정(표준화된 인터랙션 패턴은 없지만 아래의 형태를 많이 적용)
. 방향키
1. 좌우방향키 : 검색창에서 마우스 커서를 좌우로 움직이게함
2. 상하방향키 : 유사어 목록에서 선택 바를 상하로 움직이게 함
3. 취소키 : 유사어 목록을 사라지게 함(구글에서는 삭제)
4. 탭키 : 검색어 입력을 완료시키고 포커스(focus)를 검색 버튼으로 이동
5. 엔터키 : 입력된 검색어를 서버에 요청
- 검색어가 여러단어일 경우 첫번째 단어를 입력 완료한 후 콤마(,)를 입력하게 되면 첫번째 단어에 대한 자동완성이 완료
- 두번째 단어가 입력되면 다시 해당 단어에 대한 자동완성 기능이 작동
벤치마킹
http://www.google.com/webhp?complete=1&hl=en
- 자동완성 기능은 유사어와 건수를 제시
- 유사어 목록에서 톡정항목을 선택할 때 키보드 방향키로 선택 하면 배경색이 바뀌면서 유사어가 검색창에 자동 입력되며, 마우스로 선택하면 해당 유사어의 검색결과 화면으로 이동
http://www.kayak.com/
- 가고자 하는 공항 이름을 입력하면 자동완성 기능에 의해 후보 공항 이름이 출력
출처: 웹2.0기획과 디자인(노주환)
UX/웹 2.0 기획과 디자인