[정보디자인] 모바일검색 suggestion UI

아이폰의 사파리에서는 웹 필드에 텍스트를 입력하면 필드가 강제로 가운데로 이동합니다.(iOS3 이하에서. 폼 입력시 전후 맥락을 함께 살펴보려는 의도였던 것 같습니다)  검색엔진에서 suggestion을 입력창 아래 목록으로 보여주는 방식을 사용하면 이런 이유로 2,3개정도 밖에 보여주지 못합니다.

Device-Specific Design

아이폰이 이상한걸 우리가 뭘 어쩌라는거야  식의 다른 검색포탈에 비해 야후는 사용자를 배려하여 디바이스의 제약에서도 최선의 결과를 만들기 위한 노력이 보입니다. 아이폰의 이런 입력폼 특성을 반영하여 검색제안어를 입력창의 위아래에 2컬럼으로 보여주는 인터페이스를 제공합니다. 일반적인 방식보다 훨씬 많은 제안어를 보여주긴 하지만 눈이 스캔하는 영역이 4군데로 나뉘어서 좀 어색하긴합니다.

#추가 네이버 재팬도 야후와같은 방식의 검색어 제안을 사용하고 있습니다. 

그런데 iOS4로 업데이트 되면서 아이폰의 이런 이상한 동작이 수정되어서 입력 창이 상단에 올라갈 수 있게 되었습니다.

웹에서의 UI를 그대로 답습하여 풀다운 메뉴를 사용하는 것 보다는 키워드 입력시 배경을 가려서 노이즈를 줄이고 2컬럼을 사용하여 더 많은 검색어를 보여주려는 야후의 방식이 장점이 많습니다. 하지만 이번 iOS4업데이트에 맞춰서 입력창을 위로 옮겨야 겠네요.

그런데 사실 구글과 bing은 애플에서 뭘 얻었는지 아이폰OS3 버전에서도 그런 작동 방식을 우회해서 입력창이 상단에 있도록 하고 있었습니다. bing도 suggestion을 보여줄때는 배경을 가려서 제안 키워드에만 집중할 수 있도록 하고 있습니다.

Suggestion Bubbles

제가 제안 하는 방식은 차라리 정렬을 포기하고 그냥 버블로 표시하여 더 많이 보여주는 것입니다. 다음에서 제공하고 있는 초성검색 제안어를 제대로 사용하기 위해서는 좀 더 많은 키워드를 보여줄 필요가 있습니다. 예로든 삼원가든은  제안어 목록에 있지만 표시영역의 제한때문에 다음 모바일웹에서는 보여지지 않습니다.

모바일 검색어 제안 UI를 설계시 유의점

1. pc와 모바일 환경이 다릅니다. pc를 그대로 따르지 마세요.

2. 입력 중 suggestion을 보여주는 상황에서 노이즈가 되는 화면은 가리고 키워드에 집중할 수 있도록 한다.

3. 정렬을 통한 빠른 인지 vs. 많은 키워드 노출 의 트레이드오프의 고민이 필요합니다.

추가

이후에 계속 사용해보니 역시나 정렬이 더 중요했습니다. :)  현재 사용 중인 표시 방법은 2컬럼입니다. 버블형태로 키워드를 감싸는 것도 노이즈이기때문에 없는 것이 좋더라구요.

2컬럼 표시를 할때 또한 주의해야 할 부분은 멀티컬럼 정렬처럼 보이지만 멀티라인으로 나열하는 경우입니다. 네이버 모바일의 연관검색어는 사실 여러줄로 나열한 형태라서 한 화면에 많은 정보를 보여주기는 하지만 빠르게 훑어볼 수 있는 정렬의 장점은 잃게됩니다. 또 사용자가 익숙한 멀티컬럼으로 혼동해서 왼쪽만 훑어보게 될 수 있어서 네이버는 상위 키워드의 색상을 달리하여 강조하는 편법을 쓰는 것 같습니다.  물론 이렇게 개수가 정해지지 않아 스크롤이 생기게 되면 N형의 멀티컬럼 정렬 방식은 스크롤을 두번해야하는 번거러움이 있습니다. 하지만 좌우를 번갈아가며 확인하는 Z형 나열에 비해서는 인지 부담이 적은 것 같습니다.
연관검색어가 많은 경우는 검색 행태를 반영하여 narrow와 expand로 그룹핑해서 나눠 보여줘도 좋겠고요. 

[참고##검색##]