모바일 검색 서비스 기획하기 (2편)
검색 서비스의 6가지 가지 주요 패턴
모바일 서비스에 일반적으로 이용되는 공통 서비스들이 있습니다. 예를 들면 회원 가입, 본인 인증, 검색 같은 것들이죠. 이번 시리즈는 이들 중 하나인 검색 서비스 기획에 대해서 알아보려고 합니다. 검색 서비스를 기획하기 위해서는 검색 플로우는 어떻게 할지, 검색 대상 DB는 어떻게 할지, 검색어 트리거는 어떻게 할지, 자동 완성은 어떻게 할지, 검색 결과는 어떻게 보여줄지 등 UI적으로나 디자인적으로 고민하고 결정해야 할 것들이 정말 많습니다. 그 중에서도 특히 UI의 관점에서 검색 서비들의 주요 패턴을 알아보고 어떤 상황에 어떤 옵션을 선택하는 것이 좋을지에 대해서 알아 보겠습니다.
※ 1편 보러가기 https://brunch.co.kr/@theopenproduct/63
4. 검색 결과의 복잡성
간단한 검색결과 보여주기
간단한 디스플레이는 콘텐츠가 비교적 균일하고 추가 분류가 필요하지 않은 상황에 적합합니다. 이는 결과를 선형적으로 표시하여 사용자가 정보를 인식하는 것을 단순화합니다.
검색 결과 보여주기 - 간단한 검색 결과 (mobbin.com)그러나 콘텐츠 양이 많을 경우, 단순한 표시만으로는 검색 결과가 너무 많아 필요한 정보를 찾는 데 어려움이 있을 수 있습니다.
카테고리 및 필터를 활용하여 검색결과 보여주기
애플리케이션에 다양한 유형의 콘텐츠가 포함되어 있는 경우 카테고리, 필터 또는 이들의 조합을 추가하여 검색결과를 보여줄 수 있습니다. 이를 통해 이용자는 더 체계적으로 검색결과에 접근할 수 있습니다.
카테고리를 이용하면 사용자는 관심 있는 분야에 초점을 맞춰 원하는 정보를 더욱 빨리 찾을 수 있습니다.
검색 결과 보여주기 - 카테고리 분류에 따른 검색 결과 (mobbin.com)필터는 검색 범위를 좁히고 날짜, 콘텐츠 유형, 작성자 등과 같은 특정 변수에 따라 결과를 분류하는 데에 도움이 됩니다. 여러 필터를 동시에 사용할 수도 있습니다.
검색 결과 보여주기 - 필터를 활용한 검색 결과 (mobbin.com)또 다른 옵션은 카테고리와 필터를 동시에 조합하는 것입니다. 이렇게 복잡한 옵션을 사용하기로 결정했다면 닐슨노먼그룹(Nielsen Norman Group)이 말한 것처럼 이용자가 작동 방식을 명확히 이해할 수 있도록 해야 합니다. 모호한 그룹화와 불분명한 레이블은 이용자를 고민하게 만듭니다.
검색 결과 보여주기 - 카테고리와 필터를 혼합하여 활용한 검색 결과 (mobbin.com)섹션별 검색결과 보여주기
섹션별로 검색결과를 보여주는 방식은 일반적이지는 않지만 흥미로운 방식입니다. 이런 섹션별 검색결과는 메신저에서 구현됩니다. 이 방식을 사용하면 추가 탐색을 도입할 필요가 없고, 콘텐츠를 합리적으로 나눌 수 있습니다. 이렇게 섹션별로 검색결과를 보여주면, 사용자가 원하는 옵션을 선택하는 데 소요되는 시간을 줄이는 데 도움이 되므로 사용자 경험을 향상시킬 수 있습니다.
검색 결과 보여주기 - 메신저 내부에서 검색 결과의 섹션을 활용한 사례 (mobbin.com)5. 입력 필드의 복잡성
단순 검색
단순 검색 필드는 사용자가 애플리케이션에서 정보를 검색하는 가장 일반적이고 친숙한 방법입니다. 이는 사용자가 검색할 키워드나 구문을 입력하는 표준적인 텍스트 필드입니다. 이러한 필드의 작동 메커니즘은 아래에서 상세히 설명하겠습니다.
다중 검색
다중 검색을 통해 사용자는 여러 검색 쿼리를 동시에 처리할 수 있습니다. 다중 검색을 통해 사용자는 여러 동네에서 동시에 부동산을 검색할 수 있습니다. 하나의 검색어를 추가하면 자동으로 검색 필드에 태그로 추가됩니다. 필요하다면 사용자는 다른 동네도 추가하여 다른 태그를 추가할 수 있습니다.
Zillow의 다중 검색 1이 외에도 필터링 아이콘을 클릭하여 검색 쿼리를 구체화할 수 있습니다.
Zillow의 다중 검색 2구글에서도 흥미로운 다중 검색 기능을 구현했습니다. 구글에 검색을 시도할 때 사진과 텍스트를 통합하여 입력할 수 있게 만들었습니다.
Google 의 다중 검색다중 검색을 구현하려면 이용자가 여러 검색 쿼리를 동시에 관리할 수 있는 기능이 추가로 필요합니다. 검색어에 해당하는 태그 추가와 제거, 태그 순서 관리, 더 정확한 결과를 위한 쿼리 결합 등이 있습니다. 이렇게 검색 기능을 복잡하게 기획하는 경우에는 검색 입력 필드의 모든 클릭 가능 영역을 고려하는 것이 중요합니다.
앞에서는 검색 기능의 주요 유형을 다룬 것 같습니다. 이제 검색 서비스 기획의 보다 세부적인 내용을 하나씩 살펴 보겠습니다.
1. 입력 취소 및 검색 종료
검색 기능을 사용할 때 우리는 아래의 두 가지 취소, 종료 기능에 대해서 고민해 봐야 합니다.
입력 필드 취소(검색어 지우기)
검색 프로세스 종료
위의 두 가지 취소/종료 동작은 서로 밀접하게 기능합니다. 따라서 사용자가 두 가지 기능을 명확하게 이해할 수 있어야 하며, 어떤 버튼이 원하는 동작을 수행하는지 쉽게 판단할 수 있어야 합니다.
iOS 가이드라인
iOS 휴먼 인터페이스 가이드라인에서는 아래의 방식을 권장합니다.
입력 필드 내부의 X 버튼을 사용하여 입력을 제거합니다.
검색 모드를 종료하기 위한 취소(Cancel) 버튼 제공
위의 방식은 안드로이드 플랫폼에서도 동일하게 구현할 수 있습니다.
iOS 가이드라인에 따른 입력 취소 및 검색 종료안드로이드 클래식 머티리얼 디자인
안드로이드의 머티리얼 디자인3는 아래의 방식을 권장합니다.
입력 필드 내부의 지우기 버튼을 클릭하여 입력 내용을 제거합니다.
검색 모드를 종료하려면 뒤로 화살표를 누르세요.
이 방식은 iOS에서도 자주 사용됩니다. 그 이유는 1) 뒤로가기 화살표는 취소 버튼보다 공간을 덜 차지하며, 2) X버튼과 뒤로가기 화살표의 거리가 떨어져 있게 되므로 이용자가 실수로 잘못시킬 수 있는 위험이 줄어드기 때문입니다.
클래식 머티리얼 디자인에 따른 입력 취소 및 검색 종료 (mobbin.com)두 개의 X표
입력 필드 내부의 X 버튼을 클릭하면 입력 내용을 취소한다
검색 모드를 종료하기 위한 또 다른 X버튼을 제공한다
이는 위의 두 가지 옵션보다 장점이 적어 보입니다. 1) 두 개의 X버튼으로 인해 혼란을 초래할 수 있고, 2) X버튼이 많아서 이용자가 불쾌하게 느낄 수 있습니다.
두 개의 X를 활용한 입력 취소 및 검색 종료 (mobbin.com)검색 취소/종료를 위한 다른 옵션들
또 다른 방식은 빈 공간을 탭하여 검색을 취소하는 것입니다. 그러나 대부분의 경우에, 다른 클릭 가능한 요소를 탭하지 않고 빈 공간만 찾아서 탭하는 것은 쉽지 않습니다. 이용자는 검색 기능을 닫고 싶었는데, 빈 공간을 탭하다가 실수로 새 화면을 열게 되는 거죠.
"콘텐츠 영역을 탭해도 아무것도 열리지 않게 하면 되지 않나요?"라고 생각하실 수 있습니다. 하지만 그건 불가능합니다. 콘텐츠 영역을 탭해도 아무 인터랙션이 없다면 사용자가 검색 취소를 하려다가 실수로 탭하는 것이 아닌 진짜 콘텐츠에 접근하기를 원할 때 해당 결과에 진입할 수 없게 되기 때문이죠.
추가 옵션 - 빈 공간을 탭하여 검색 취소(mobbin.com)또 다른 가능한 옵션은 이용자가 입력한 검색어를 한번에 지우지 못하게 하는 것입니다. 이용자는 글자 단위로만 검색어를 삭제할 수 있습니다. 하지만 이런 방식은 검색이 자주 사용되는 경우에 이용자게에 부정적인 감정을 유발할 수 있습니다.
추가 옵션 - 사용자가 입력한 값을 한 번에 취소하지 못하도록 함 (mobbin.com)2. 검색 결과 제시
검색 결과를 보여주는 가장 좋은 방법은, 자동 검색을 활용하는 겁니다. 이용자가 검색어를 1~3자를 입력하면 검색 버튼을 누르기 전에 검색 결과를 제시하는 것입니다. 이렇게 하면 이용자는 노력을 덜 들이고 필요한 것을 더 빨리 찾을 수 있습니다.
또 다른 방식은 이용자가 검색 버튼을 클릭한 후에만 결과를 보여주는 방식입니다. 이런 경우는 대개DB에 많은 로드가 발생해서 즉각적인 검색 결과 표시가 불가능한 상황에 있다거나 하는 기술적 제한이 있을 때 사용합니다. 하지만 이 옵션은 보조적으로만 사용하는 것을 권장합니다. 이용자가 "검색" 버튼을 클릭하기 전에 사용자에게 도움이 될 수 있는 기회가 있는지 고민해 봐야 합니다.
검색 결과 표시 옵션 - 검색 버튼 누르기 전, 누른 후 (mobbin.com)3. 검색 결과 디자인
검색 결과를 디자인할 때에는 기능뿐만 아니라 시각적 모양도 고려해야 합니다. 검색 결과는 간단한 텍스트일 수도 있고 더 복잡할 수도 있습니다.
간단한 텍스트 중심의 결과 디자인
간단한 텍스트 중심의 결과 디자인은 검색 결과를 제시하는 가장 일반적이고 고전적인 방식입니다. 사용자의 요청에 해당하는 텍스트 링크 목록과 아이콘 등으로 구성됩니다.
시각적으로 복잡한 결과 디자인
시각적으로 복잡한 결과 디자인은 이용자에게 검색 결과를 보다 자세하게 제시합니다. 이를 통해 이용자는 검색 결과를 완전히 이해하고, 의사 결정 프로세스를 간소화할 수 있습니다. 예컨대, 검색 결과에 단순한 텍스트를 넘어 이미지 썸네일, 간단한 요약, 평가 또는 기타 메타데이터가 표시될 수 있습니다. 이용자는 이를 통해 검색 결과가 도움이 될 수 있는지를 더 잘 판단할 수 있습니다.
검색 결과 디자인 옵션 - 텍스트, 아이콘, 썸네일&평점 등 (mobbin.com)옮긴이_ 케이
이 글은 Ksenia Toloknova의 글을 번역/의역하여 작성하였습니다.
