모바일 UX디자인, 검색 기능은 어떻게 설계해야할까?

 

모바일 앱, 검색의 일상화 그리고 다양화

PC에 비해 모바일은 훨씬 작은 화면을 가지고 있습니다. 때문에 앱과 웹을 활용하는데 있어 원하는 정보를 얻기 위한 ‘검색’은 아주 중요한 과정이자 경험이 되기도 하죠. 망고플레이트나 식신, 다이닝코드에서 원하는 컨셉과 스타일의 음식점을 찾는 것도, 11번가와 쿠팡에 들어가 구매하고자 하는 제품을 찾을 때에도 우린 ‘검색’이라는 과정을 거쳐야하며 실제로 많은 시간을 투자하기도 합니다. 페이스북에서 사람을 찾거나 관심있는 페이지를 찾을때에도 마찬가지! ‘검색’이라는 유저들의 행동은 명확한 ‘목적’을 지니고 있기에 사용자 경험을 해치지 않는 것이 중요한데요! 그래서 오늘은 모바일앱 UX디자인에 있어서의 ‘검색’을 어떻게 설계하고 반영해야 하는지에 대한 내용을 정리해보고자 합니다.

 

모바일이라는 ‘특수성’

위에서 한 번 언급한 것과 같이 ‘모바일’이라는 환경은 PC나 노트북에 비해 제한적인 ‘화면’을 갖게 되는데요! 때문에 검색 결과를 PC에 비해 많이 보여줄 수 없으며, 이는 정확한 결과를 바로 보여주지 못할 경우 이탈할 가능성이 높아진다는 것을 의미합니다. 우리가 스마트폰을 쓰는 일반적인 습관을 생각해볼 때, 마우스에 비해 손으로 스크롤을 내리거나 스와이프를 하는 것이 오랜 시간 하는데 여전히 익숙하지 않다는 점을 생각하면 조금더 쉽게 이해가 되지 않을까 싶네요. 반대로, 검색 과정을 모바일에 최적화 할 수 있거나 결과 자체를 즐겁게 탐색할 수 있는 경험을 제공해줄 수 있다면 사용자 경험을 끌어올리는데 많은 도움이 될 수 있습니다.

 

1.가로 검색창의 활용

가로 길이 전체를 활용하는 검색 스타일의 경우, 사용자의 눈길을 한 번에 사로잡을 수 있기 때문에 미디어, 전자상거래 서비스에서 자주 쓰이는 방법입니다. 다만, 메인페이지에서 긴 검색창을 활용하기 위해서는 하단에 이어지는 콘텐츠들을 역시 함께 주목을 끌 수 있는 내용으로 채워져야 합니다. 위의 이미지의 왼쪽은 포잉, 오른쪽은 다이닝코드로 모두 상단, 중앙에 검색창을 가로로 길게 배치한 모습입니다. 포잉의 경우 자체 콘텐츠를 검색창 아래로 배치해 검색 외의 행동이 가능하도록 유도하고 있었고, 다이닝코드의 경우 ‘검색’ 위주의 서비스이기에 검색과 연관된 내용을 함께 보여주고 있었습니다. 가로 검색 스타일을 활용하는 경우 사용자가 많은 생각을 하지 않도록 유도하는 것 역시 중요한데, 다이닝코드의 ‘속초 맛집’과 같이 예시를 보여주는 것이 좋은 방법이 될 수 있습니다.

 

2.검색 아이콘의 활용

검색이 서비스의 우선 순위 기능이 아닌 경우, 아이콘을 활용할 수 있는데요! 이 경우, 가로 스타일의 검색창을 활용하는 것에 비해 공간을 더 많이 활용할 수 있으며 앱 디자인 전체 맥락에 맞는 아이콘을 통해 톤앤매너를 유지할 수 있다는 장점이 있습니다. 하지만 반대로, 사용자들이 검색 기능의 유무에 대해 쉽게 인지하지 못하는 경우가 생길 수 있으며 한 단계를 더 거쳐야 하는 것으로 인식될 수 있기에 불편한 경험으로 느껴질 수도 있습니다. 위의 이미지 왼쪽은 ‘망고플레이트’, 오른쪽은 ‘해먹남녀’로 모두 우측 상단에 검색아이콘을 배치하고 있는 모습인데요! 확실히 검색 아이콘 보다 하단으로 이어지는 지역별, 종류별 맛집, 레시피 콘텐츠에 더 눈길이 갑니다. 이들은 사용자들이 먼저 각각의 콘텐츠를 둘러보는 것에 우선 순위를 두고 있는 것 같네요!

 

 

3.검색어 자동 입력

검색어를 자동으로 추천 해주는 기능은 사용자로 하여금 모든 내용을 직접 입력하지 않고도 빠르게 원하는 결과를 얻을 수 있도록 도와주는 가장 좋은 방법입니다. 모바일의 경우 내용 입력이 PC-키보드 조합에 비해 느리고, 어렵기에 더욱 중요한 방법이며, 때문에 네이버, 다음과 같은 포털은 물론 최근 다양한 서비스에서 사용되고 있습니다. 보통 입력중인 단어, 인기 급상승 검색어, 과거에 입력한 검색어를 바탕으로 추천이 가능하며 보다 정확한 추천을 위해 두 단어 이상을 입력했을 때 추천을 해주는 것이 좋습니다. 위의 이미지는 ‘호텔나우’의 모습으로 ‘검색’과 관련해 두 가지 매력을 느낄 수 있는데요. 한 가지는 검색창을 탭했을 때, 페이지 이동 없이 바로 검색어를 입력할 수 있다는 것과 검색어에 따른 추천 내용을 노출시켜준다는 점입니다. 

 

4.검색 기록의 활용

사용자의 최근 검색어를 저장, 활용하는 방법 또한 매우 유용한 것 중 하나입니다. 이는 특히 지도나 전자상거래 서비스와 같이 목적이 분명한 서비스에서 유용하게 쓰일 수 있는데, 최근 검색한 내용을 검색을 할 때마다 노출시킴으로써 구매율을 높이거나 또 다른 상품에 닿을 수 있도록 유도할 수 있기 때문입니다. 다만, 검색어를 저장 및 기록하는 경우 사용자의 동의를 받아야 하며 허용여부를 쉽게 관리할 수 있는 옵션을 제공해줘야 합니다. 

 

5.음성 검색의 활용

운전 또는 이동 중 활용해야 하는 서비스의 경우 음성을 통한 검색어 입력 기능이 필수라고 할 수 있는데요! 음성 인식 기능의 경우 정확도가 점점 높아지고 있으며, 직접 입력하는 것 보다 더 편리한 사용자 경험을 제공해주기에 네비게이션과 같은 서비스를 넘어 사용도가 점점 다양해지고 있는 추세입니다. 위의 이미지는 각각 카카오네비와 구글 검색의 모습으로 검색창에 마이크 아이콘을 함께 넣어 언제든 사용자가 음성을 통해 검색어를 입력할 수 있도록 하고 있습니다.

 

검색, 질문에 대한 명확한 답변

모바일앱을 사용하며, ‘검색’기능을 사용하지 않는 시간이 있을까 싶을만큼 우리에게는 이제 정말 익숙해진 행동인데요. 사용자 경험(UX) 측면에서 검색이란 궁금함, 질문에 대한 답을 찾는 과정으로 정확한 답변을 제공해주는 것도 중요하지만, 그 과정에서 불편함이 없도록 플로우를 구성하는 것도 정말 중요할 것 같습니다. 그 과정을 최대한 간소하게 제공해주는 것도 중요하겠죠? 

 

“사용자 경험에 관한 더 많은 이야기를 보고 싶으시다면 : 이 곳을 확인해주세요!

 

 

댓글 남기기