[리치 인터페이스 디자인] 검색 패턴

검색 패턴

김선희(dipred@gmail.com)

UIstudy.net 북스터디 발표 자료

들어가며,

<리치 인터페이스 디자인>

빌 스콧, 테레사닐 지음

'즉각적으로 반응하라'

자동완성(Auto Complete )

입력 필드에서실시간으로 제안할값을 제공한다.

가이드• 사용자 입력에 도움을 주기 위해 자동완성을 사용하라.

• 여러 필드와 대조하여 일치하는지 확인하라.

• 사용자가 입력을 멈출 때 결과를 보여주어라.

• 탭 키를 누르면 일치하는 값을 선택할 수 있도록 하라.

실시간 추천(Live Suggest/Winnowing )

입력 필드에서실시간으로 추천검색어를제공한다.

가이드• 추천 검색을 지원하려면 실시간 추천을 사용하고, 검색 결과를 직접

제공할 때는 사용하지 마라.

• 사용자가 입력하는 컨텍스트를 각 추천 항목에서 확인할 수 있도록하이라이트 하라.

• 사용자가 입력하는 중에는 멈추는 등 합리적인 시간 간격을 두고 추천결과를 노출하라

• 인터페이스는 사용자를 지나치게 제한하지 않으면서, 사용자가 좋은선택을 할 수 있도록 범위를 좁혀 주어라.

실시간 검색(Live Search)

실제 검색 결과를 실시간으로보여준다

가이드• 자유로운 형태의 검색을 위해 실시간 검색을 사용하라.

• 각 검색 결과에 대해 풍부한 컨텍스트를 제공하라. 결과는 바르게 제공해야 한다.

• 원하는 답까지 범위를 좁힐 수 있도록 충분한 검색 결과를 보여주되, 너무 많이 보여주어 산만하게 하지 마라.

• 가능하면 실시간 추천과 실시간 검색을 하나의 인터페이스 안에 결합하라.

실시간 상세 검색(Refining Search)

검색결과를 조정할수 있는 필터를 제공한다.

가이드• 필터에 다양한 요소가 있을 때는 실시간 상세 검색을 이용하여 상품을

검색하게 하라.

• 시각적으로 끌리는 필터 컨트롤을 사용하라.

• 슬라이더는 보통 사용자가 조작하기 어려우므로 사용할 때 주의하라.

• 검색을 갱신할 때 원활하게 결과를 제공하기 위해 애니메이션을 사용하라.

• 불필요한 검색 갱신을 방지하기 위해 적절히 시간을 지연시켜라(사용자가 조작을 멈출 때까지 기다려라).

EXAMPLE

자동완성 + 실시간 추천

1. 네이버 일본어사전

: 필기인식(일본한자, 히라가나/가타가나), 일본어 입력기(한글/로마자로 히라가나 찾기)

자동완성 + 실시간 추천

1. 네이버 일본어사전

자동완성 + 실시간 추천

2. 네이버, 다음, 구글: 사용자의 검색 의도와 추천 검색어의 매칭 여부

자동완성 + 실시간 추천

2. 네이버, 다음, 구글

자동완성 + 실시간 추천

3. 롯데닷컴

실시간 검색 + 실시간 상세 검색

1. 디앤샵 시즌2 검색센터

실시간 검색 + 실시간 상세 검색

2. 네이버 지식쇼핑

실시간 검색 + 실시간 상세 검색

2. 네이버 지식쇼핑

실시간 검색 + 실시간 상세 검색

2. 네이버 지식쇼핑

실시간 검색 + 실시간 상세 검색

3. 롯데닷컴

실시간 검색 + 실시간 상세 검색

3. 롯데닷컴

실시간 검색 + 실시간 상세 검색

4. COLLECTA

: 왼쪽 메뉴의 Options 변경 시 바로 오른쪽 검색결과에 반영

http://www.collecta.com/#q=obama

실시간 검색 + 실시간 상세 검색

5. Tweetmeme

: tweets수가 높을수록 추천 효과.

http://tweetmeme.com/search?q=obama

실시간 검색 + 실시간 상세 검색

6. Topsy

실시간 검색 + 실시간 상세 검색

6. Topsy

실시간 검색 + 실시간 상세 검색

7. 온천천국(iPhone App)

: GPS와 전자 나침반 기능을 활용하여, 현 위치에서 가장 가까운 당일치기온천들을 추천함.

http://pisces-319.seesaa.net/article/151304196.html

실시간 검색 + 실시간 상세 검색

8. 스캔서치

실시간 검색 + 실시간 상세 검색

9. 2022년 일본의 World Cup 유치 전략(일부)

http://iblur.tistory.com/279

http://www.gizmodo.jp/2010/05/3dar2022.html

YouTube 영상(lumirent님소개) : http://www.youtube.com/watch?v=8hZyCiR0QJU

경기장 관전 AR이 카드를 대면, AR적인 시각에서 운동장의선수 정보를 즉시 얻을 수 있다.

음성 자동 번역 시스템실시간 음성번역을 제공하여, 전 세계에서온 서포터들과 대화할 수 있게 도와준다.

실시간 검색 + 실시간 상세 검색

cf) almost.at : http://almost.at/

실시간 검색 + 실시간 상세 검색

cf) almost.at

실시간 검색 + 실시간 상세 검색

cf) almost.at