PART_3. 인터렉션 디자인 (INTERACTION DESIGN)
*** 빠른 검색 (Instant Search) ***
- 키워드를 입력한 동시에 결과값을 보여주는 기법으로 그 원리나 효과는 검색의 자동완성 기능과 비슷
- 사용자와 시스템이 동시에 상호작용해 즉각적인 피드백을 재공한다는 점과 검색결과 화면으로 이동하지않고 검색결과를 확인할 수 있음
- 브라우져와 서버 간의 상호작용을 의미하므로 서버 부하가 수반됨
- 쿼리가 많은 사이트에서는 채택하기 부담스러움
- 키워드 조합이나 철자 오류에 따른 결과값을 곧바로 확인해야하는 경우 유용
- 입력값과 결과값이 동시에 변화하므로 다음과같은 사항을 고려한다
. 입력값과 결과값 영역을 근접 배치 - 두 영역이 멀리 떨어져 있으면 시선의 분산으로 곧바로 확인이 어려움
. 명확한 그룹핑 - 타이핑속도를 감안하면 결과값의 변화를 예상할 수 있는데 이런경우 시각적 그룹핑이 명확해야 결과값의 변화를 쉽게 읽을 수 있음
. 간략한 결과값 제공 - 결과가 복잡하거나 많으면 빠른 정보 처리를 기대할 수 없으니 개요자 요약을 보여주는것이 좋음
. 가독성과 판독성을 고려 - 결과를 빠르게 확인 시키기 위해서 글자가 충분히 커야하고 읽기 편한 서체와 배경과의 대비가 뚜렷한 색상을 사용함
벤치마킹
http://iwebtool.com/instant
- 도메인 네임을 입력하면 즉각적으로 결과값인 도메인네임 등록 여부 및 추천 도메인을 출력
- 사용자가 얻고자하는 결과값을 제공
http://search.yahoo.com/instant
- 미리 준비된(customized) 검색 결과를 팝업시킴
- 검색어 입력후 반드시 검색 결과 화면으로 이동하는 기존 검색과 다른 패턴을 보여 패러다임 극복의 시도를 보여줌
관련이론
가독성(Readability)과 판독성(Legibility)
- 두가지가 유사한 의미로 사용되는 경우가 많지만 다름
- 가독성은 '읽기 쉽다' - 큰 사이즈와 읽기 편한 형태일수록 높아짐
- 판독성은 '구별하기 쉽다' - 큰 사이즈와 구별하기 쉬운 색상일수록 높음
- 두가지다 크기가 중요하다는 점에 주목
출처: 웹2.0기획과 디자인(노주환)
*** 빠른 검색 (Instant Search) ***
- 키워드를 입력한 동시에 결과값을 보여주는 기법으로 그 원리나 효과는 검색의 자동완성 기능과 비슷
- 사용자와 시스템이 동시에 상호작용해 즉각적인 피드백을 재공한다는 점과 검색결과 화면으로 이동하지않고 검색결과를 확인할 수 있음
- 브라우져와 서버 간의 상호작용을 의미하므로 서버 부하가 수반됨
- 쿼리가 많은 사이트에서는 채택하기 부담스러움
- 키워드 조합이나 철자 오류에 따른 결과값을 곧바로 확인해야하는 경우 유용
- 입력값과 결과값이 동시에 변화하므로 다음과같은 사항을 고려한다
. 입력값과 결과값 영역을 근접 배치 - 두 영역이 멀리 떨어져 있으면 시선의 분산으로 곧바로 확인이 어려움
. 명확한 그룹핑 - 타이핑속도를 감안하면 결과값의 변화를 예상할 수 있는데 이런경우 시각적 그룹핑이 명확해야 결과값의 변화를 쉽게 읽을 수 있음
. 간략한 결과값 제공 - 결과가 복잡하거나 많으면 빠른 정보 처리를 기대할 수 없으니 개요자 요약을 보여주는것이 좋음
. 가독성과 판독성을 고려 - 결과를 빠르게 확인 시키기 위해서 글자가 충분히 커야하고 읽기 편한 서체와 배경과의 대비가 뚜렷한 색상을 사용함
벤치마킹
http://iwebtool.com/instant
- 도메인 네임을 입력하면 즉각적으로 결과값인 도메인네임 등록 여부 및 추천 도메인을 출력
- 사용자가 얻고자하는 결과값을 제공
http://search.yahoo.com/instant
- 미리 준비된(customized) 검색 결과를 팝업시킴
- 검색어 입력후 반드시 검색 결과 화면으로 이동하는 기존 검색과 다른 패턴을 보여 패러다임 극복의 시도를 보여줌
관련이론
가독성(Readability)과 판독성(Legibility)
- 두가지가 유사한 의미로 사용되는 경우가 많지만 다름
- 가독성은 '읽기 쉽다' - 큰 사이즈와 읽기 편한 형태일수록 높아짐
- 판독성은 '구별하기 쉽다' - 큰 사이즈와 구별하기 쉬운 색상일수록 높음
- 두가지다 크기가 중요하다는 점에 주목
출처: 웹2.0기획과 디자인(노주환)