모바일 커머스-검색 UX가이드
더 나은 검색 경험 개선을 위한 디자인
검색은 모바일에서 핵심 사용자 활동이다. 모바일 커머스에서 검색은 가장 기본적인 동작이며 수익성 있는 앱이나 사이트를 만드는데 중요한 요소이다. 사용자가 원하는 상품을 찾지 못한다면 해당 상품은 판매할 수 없다. 검색을 통해 사용자는 상품을 빠르게 찾고 구매할 수 있다.
모바일 커머스는 지속적으로 성장하고 있다. 매년 70~80%의 성장을 이어가고 있다. 2018년 3월 발표된 통계청의 자료에 따르면 온라인 쇼핑에서 모바일 커머스의 비중은 거래액 규모 5조 4,082억 원으로 온라인 쇼핑 총 거래액 중 60.2%에 달한다.(2018년 3월 온라인 쇼핑 동향 및 1/4분기 온라인 해외 직접 판매 및 구매 동향) 모바일 커머스는 간편한 결제, 채널 다각화, 쇼핑 서비스의 질적 향상을 위해 노력하고 있다. 많은 온라인 쇼핑몰은 기존 고객의 가치를 높이기 위해 사용자 경험과 전환율 최적화(CRO)에 많은 시간과 돈을 투자하고 있다. 이 중 사이트 내 검색 경험의 향상은 모바일 커머스 성공의 중요한 요소이다.
모바일 커머스에서 검색이 중요한 이유
사이트 내 검색 사용자가 비 사용자보다 페이지뷰, 체류 시간, 전환율 등 행동지표가 높다. 검색 사용자는 구체적으로 원하는 상품이나 이미지가 있기 때문에 일반 사용자(카테고리 탐색이나 광고 유입 사용자) 보다 구매 의욕이 높다고 볼 수 있다.
온라인 쇼핑몰에서는 방문자의 약 15~25 %가 사이트 검색을 사용한다. eConsultancy 에 따르면 Suttons Seeds 사이트 방문자 중 15 % 는 사이트 검색을 사용하지만 전체 사이트 수익의 41 %를 차지한다고 한다. 검색 사용자가 구매의도가 높아 전환율이 높으며 수익에도 많은 비중을 차지 함을 알 수 있다.
온라인 커머스에서 검색이 중요한 이유는 다음과 같다.
평균적으로 검색을 완료한 사용자들의 전환이 1.8배 많다.
세부 지향적 제품들의 경우, 10% 이하의 방문자들이 검색을 하는 반면, 40% 이상의 수익이 검색 사용자로부터 나온다.
(출처 Ecommerce Site Search Best Practices: How to Sell More to the People Who Want to Buy Now )
위 데이터는 온라인 커머스 전체 사용자에 대한 내용이지만 화면 공간의 제약과 이동에 따른 정보 집중력 제약으로 인해 모바일은 그 비중이 더 높을 것으로 판단된다. 사이트 내 검색 사용자는 일반 사용자보다 전환 가능성이 높으므로 커머스 사이트는 가능한 최상의 검색 경험을 제공해야 한다.
검색 경험 향상 시 기대할 수 있는 이점
앱/사이트 내 검색 on site search 의 경험 향상은 전환 conversion 까지 걸리는 시간을 줄이고 사용자 여정을 간소화하여 더 많은 가치를 추가할 수 있다. 효과적이고 유용한 앱/사이트 내 검색은 사용자가 필요한 상품을 찾을 수 있도록 도와주는데 매우 중요하다.
이동하면서 사용하는 모바일은 데스크톱에 비해 검색 의존도가 높으며 사용자가 구매하길 원하는 상품을 빠르고 쉽게 찾길 기대한다.
모바일 커머스의 검색 경험을 향상할 때 기대할 수 있는 이점은 다음과 같다.
매출 향상
효과적인 사이트 검색은 사용 편의성이 뛰어나 고객은 원하는 상품을 더 빨리 찾을 수 있다. 찾고 있는 상품을 쉽게 찾은 고객은 구매할 가능성이 높아 높은 매출로 이어질 수 있다.
높은 전환율
검색 결과의 품질은 전환율과 직접적인 연관성이 있다. 보다 직관적인 검색과 탐색은 전환율이 높다는 것을 의미한다. 사이트 내 검색 사용자가 일반 사용자에 비해 전환율이 높다.
고객 충성도와 리텐션 향상
상품을 쉽게 찾고 만족할 만한 검색 결과를 경험한 사용자는 재방문 비율이 높을 것이다. 고객이 상품을 더 쉽게 찾을 수 있다는 사실을 알면 충성도가 높아진다.
브랜드 가치 향상
사용자는 검색 결과의 질에 따라 앱/사이트의 가치를 판단한다. 검색 경험을 개선하면 경쟁 업체에 비해 고객 만족도가 높아지고 고객 여정이 향상된다.
검색 바의 구조
사용자가 모바일에서 검색어를 입력하고 검색을 실행하는 검색바 Search Bar는 검색 기능을 탭 하고 검색어를 입력하는 상호작용 과정에 따라 각 요소가 변경된다. 아래는 검색어 입력 시간을 최소화시켜줄 수 있는 기본 요소다. (iOS와 안드로이드가 조금씩 다르기 때문에 두 OS다 설명한다.) 두 OS 다 전체적인 구조는 거의 동일하고 약간의 차이만 있을 뿐이다.
안드로이드 검색바의 기본구조
iOS 검색바의 기본구조
01. 검색어 입력 필드
검색어 입력 필드는 검색어를 입력할 위치를 나타낸다. 사용자가 입력한 검색어를 실시간으로 보여준다. 다른 텍스트 필드와 다르게 필드 보더의 색이 변경되는 등의 활성화 표시는 하지 않는다.
02. 검색 부가 기능 아이콘 버튼
검색 기능을 향상하기 위한 기능이 있을 경우 사용된다. 예시의 경우 음성 검색을 지원해 사용자는 마이크 아이콘을 터치하여 음성 검색을 할 수 있다. 바코드 검색, 사진 검색도 추가될 수 있다.
03. 검색 레이블 아이콘
입력 필드가 검색어 입력 필드임을 인지시키는 레이블 아이콘이다. 모바일에서 가장 보편적으로 사용하는 디자인 패턴이다.
04. 검색 플레이스 홀더
레이블에 대한 추가 설명이다. 필드 내에 있는 짧은 텍스트로 검색이 가능함을 알린다. "검색" 보다는 "상품, 카테고리 또는 브랜드 검색"과 같은 유용한 텍스트를 포함한다. 사용자가 정보를 입력하면 사라진다.
05. 검색 취소 버튼
검색 이전 상태로 돌아가는 버튼이다. 화면상에 키보드가 사라지고 검색 관련 사용 결과가 모두 사라진다.
06. 최근 검색어
사용자가 이전에 검색한 기록이 있으면 제공한다. 사용자가 재검색하거나 새로운 검색어를 입력할 때 도움이 된다. 최근 검색어는 사용자가 유사한 상품을 다시 검색하는 데 드는 시간과 노력을 절약할 수 있다.
07. 추천 검색어(인기 검색어)
사용자가 검색어를 입력하기 전에 나타난다. 사용자가 많이 검색하는 검색어를 노출한다. 사용자는 추천 검색어를 보고 검색어를 입력하는 수고를 덜 수 있다.
08. 입력된 검색어
입력 필드에 사용자가 입력한 검색어다. 입력된 검색어는 플레이스 홀더 텍스트보다 더 어두운 색이어야 한다. 사용자가 입력한 정보가 잘 입력되었는지 확인할 수 있도록 가독성이 높고 충분하게 폰트의 크기가 커야 한다.
09. 검색어 삭제 버튼
검색 필드 내의 검색어(쿼리)를 지운다. 입력한 검색어를 삭제 키를 하나하나 일일이 탭 하여 삭제할 필요가 없다. 사용자가 입력을 시작할 때부터 나타난다. 클리어 버튼은 모바일에서 특히 유용한 요소이다.
10. 검색어 자동완성 (제안)
사용자가 검색어를 입력하면, 관련된 검색어를 제안해 준다. 이는 특히 모바일 유저에게 가장 유용한 기능 중 하나이다. 자동 완성은 입력을 줄이고 사용자가 즉각적인 검색 결과를 얻을 수 있도록 도와준다.
사용자의 사이트 내 검색 여정
사용자가 모바일 커머스 앱/사이트에서 검색어를 입력하고 검색 결과에서 상품을 찾는 검색 과정은 다음과 같이 정리할 수 있다.
1. 검색 기능 텝
사용자는 상품을 검색하기 위해 내비게이션 바의 검색 아이콘이나 검색바를 텝한다.
2. 검색 기능 활성화
사용자가 검색할 수 있는 검색 화면으로 변경된다. 사용자는 아직 검색어를 입력하기 전이고 어떤 검색어를 입력할 것인지 생각 중이다. 검색바 아래에는 사용자가 검색한 이력이 있으면 최근 검색어가 노출되고 그 아래에 추천 검색어가 노출된다. 사용자는 이 두 기능을 사용하여 검색어 입력 없이 검색할 수도 있다.
3. 검색어 입력
사용자는 검색바의 텍스트 필드에 검색어를 입력한다. 입력된 검색어를 바탕으로 추천이나 자동 완성된 검색어를 제안한다.
4. 검색 결과
입력된 검색어에 따라 검색된 상품이 검색바 아래에 표시된다. 모바일의 화면 공간을 항상 고려해야 하기 때문에 가장 관련성이 높은 검색 결과를 우선적으로 표시하는 것이 중요하다. 사용자는 검색 결과를 보고 원하는 결과가 있는지 스크롤해서 탐색한다.
5. 검색 결과를 정렬하고 필터링한다.
필터와 소팅 기능을 사용하여 검색 결과의 범위를 좁히고 정렬 기준을 바꾼다. 검색 결과 내에서 원하는 상품을 탐색한다.
각 과정별로 검색의 편의성을 높이고 검색어 입력 노력을 최소화하여 검색 경험을 향상하기 위한 기본적인 상호작용 디자인을 설명한다.
검색 기능의 레이아웃
앱/사이트에 방문한 사용자는 카테고리 탐색을 진행하거나 추천하는 상품 리스트를 확인할 수 있다. 사용자가 찾고자 하는 상품의 범위가 명확할수록 검색 기능을 찾는다. 검색 기능은 일반적으로 돋보기 아이콘 형태로 표현되고 검색을 사용자가 쉽게 찾을 수 있는 위치와 형태로 디자인되어야 한다.
검색 기능을 사용자가 쉽게 찾을 수 있어야 한다.
사용자가 검색 기능을 찾을 때는 화면을 둘러본다. 대부분의 경우 '문자를 입력할 수 있는 사각형 상자'를 찾으며 페이지를 대충 훑어본다. 검색은 커머스 앱/사이트에서 기본 기능이다. 높은 전환 의도를 가진 사용자가 가장 빠르게 찾을 수 있도록 눈에 띄게 표시한다. 사이트 내 검색 이용률이 낮은 것은 검색 상자나 카테고리 내 검색 창이 찾기 힘들기 때문이다. 검색창의 위치는 매우 중요하다. 언제든지 구매의도가 높은 사용자가 바로 검색할 수 있는 위치에 디자인하는 것은 중요하다.
검색은 홈페이지에서 사용자가 찾기 쉬운 위치에 있어야 한다.모버일 커머스 앱/사이트에서는 검색 기능은 찾기 쉬워야 한다. 적어도 상단 내비게이션 바에 눈에 띄는 아이콘 형태로 노출되어야 한다.
플레이스 홀더를 힌트로 활용한다.
검색바 입력 필드의 플레이스 홀더를 단순하게 “검색” 보다는 “찾고 싶은 상품을 검색해보세요!”처럼 행동을 유도하는 문구를 사용한다. 에어비앤비 Airbnb 같이 “오사카에 가보는 건 어떠세요?”처럼 어떤 유형의 검색이 가능한지 검색어 입력 전에 힌트를 줄 수도 있다. 이러한 플레이스 홀더는 사용자가 검색어를 입력하기 전까지 보여줄 수 있다.
검색 기능 활성화
사용자가 검색 기능을 텝했을 때 화면이다. 사용자가 검색어를 입력하기 전 단계이다. 이때 키보드를 제공하는 방식과 키보드를 제공하지 않고 검색 페이지로 이동하는 두 가지 패턴이 존재한다. 검색바 아래에는 최근 검색과 추천 검색이 나타난다. 사용자는 이 두 기능을 사용하여 검색어 입력 없이 검색할 수도 있다.
검색어 입력에 집중할 수 있어야 한다.
모바일에서 검색어 입력은 집중력을 요구하는 작업이다. 사용자가 검색어 입력에 집중할 수 있도록 내비게이션 요소위로 검색바를 배치한다. 탐색 영역을 제거하여 검색 필드, 키보드 및 최근 검색어를 표시하여 검색에 집중할 수 있도록 한다.
최근 검색어를 제공해야 한다.
최근 검색어는 구입을 반복하는 커머스 앱/사이트에선 중요하다. 지난 검색 기록으로 검색할 때 과거 데이터를 사용자에게 제공하기 위해, 앱에 과거 결과와 구입내역을 포함한 모든 관련 정보를 축적하는 것이 좋다. 이렇게 하면 상품을 검색하는 데 드는 사용자의 시간과 번거로움을 줄이는 이점이 있다. 최근 검색어는 최대 20개까지 제공하고 사용자가 검색어 전체를 지우거나 개별 검색어를 삭제할 수 있어야 한다.검색한 날짜를 제공하는 것도 추천한다. 검색어를 기록하고 가장 일반적인 검색 결과를 분석하여 UX 및 검색 기능 향상에 활용할 수 있다.
사용자는 자신이 이전에 했던 것을 앱/사이트가 기억하고 있으면 좋아한다. 특히 탐색과 관련해선 더 그렇다. 검색 플로우에 이러한 섹션을 넣어주는 것은 앱/사이트에 대한 사용자의 신뢰를 높여주며 더 탐색하고자 하는 마음을 가지게 해준다.
추천 검색어 또는 인기 검색어를 제공해야 한다.
사용자가 검색어를 입력하기 전에 많이 검색하는 추천 검색어나 인기 검색어를 제안해야 한다. 검색 의도를 파악하여 특정 키워드를 입력한 사용자가 궁금해할 만한 검색어를 노출하는 추천 검색어를 제공하면 사용자가 검색어를 입력하는 수고를 덜 수 있다. 사용자가 검색바를 텝했을 때 검색바 아래로 빈 화면을 보여주는 것은 피해야 한다. 모바일 스크린에는 공간이 많지 않으니 빈 공간도 낭비하면 안 된다. 이런 빈 공간은 사용자와 소통함에 있어서 가이드해줄 수 있는 좋은 기회이다. 사용자에게 “인기 검색어”, “즐겨찾기”, “가장 유사한 검색어” 등과 같은 추천 검색어나 큐레이트 된 콘텐츠를 제공하는 공간으로 활용해야 한다. 이런 패턴의 장점은 유저가 검색어를 입력할 필요도 없이 검색 행동을 할 수가 있다는 점이다.
사용자가 검색어를 입력하기 전에 인기 검색어나 추천 검색어를 노출 함으로써 입력하는 수고를 덜 수 있다.
검색어 입력
사용자가 키보드를 통해 검색어를 입력하고 검색 실행시킨다. 모바일에서 검색어를 입력할 시간을 줄여주는 것이 중요하다. 사용자가 검색어를 가능한 한 빠르고 쉽고 정확하게 입력하도록 도움을 줄 수 있어야 한다. 사용자가 검색어를 입력하면 관련된 검색어를 제안해 주면 유저가 쉽게 선택할 수 있다.
검색어 자동완성 autocomplete 또는 제안 기능을 제공해야 한다.
자동 완성(제안)을 제공하면 사용자가 찾고 있는 것을 더 빨리 찾을 수 있다. 검색어를 입력할 때 검색어 자동완성 기능은 사용자가 조금 더 구체적이고 정확한 검색어를 생각해 내는데 도움을 준다. 이는 검색 결과의 품질을 높이는 데 많은 이점이 있다. 검색할 때 사용자는 검색어를 생각하며 문자도 입력해야 한다. 검색어 자동완성은 사용자의 검색어 입력의 번거로움을 줄이고, 즉각적으로 결과를 제공한다.
자동완성은 입력한 문자를 근거로 문장을 완성하여 적절한 검색어를 찾을 수 있도록 도와준다. 자동완성은 사용자의 입력 오류 가능성을 감소시키고 사용성을 높인다. 검색어 전체를 입력하기 전부터 검색어를 예상해서 검색어를 자동 완성하거나 검색어가 포함된 추천 검색어를 제공해야 한다. 자동완성을 개선하기 위해서 철자의 자동 수정 기능, 본질적인 단어의 인식, 문장 예측을 사용한다.
검색어 자동완성은 사용자가 해야 하는 작업을 줄임으로써 검색 경험을 향상하는 매우 유용한 기능이다.
사용자가 입력할 때 상품이 제안된다. 사용자 검색 경험의 가치와 영향은 자동 완성 제안을 통해 사용자가보다 효과적으로 검색어를 검색하고 안내할 수 있는 방법에 있다. 불완전한 자동 완성 제안은 종종 사용자를 우회로로 인도하거나 경험을 파괴하거나 사용자가 검색을 완전히 포기하도록 한다.
자동 완성(제안)은 데이터 입력을 줄이고 사용자가 즉각적인 검색 결과를 얻을 수 있도록 도와주는 강력한 도구이다. 모바일에서 가능한 한 키보드를 통한 직접 입력을 최소화해야 한다. 사용 편의성을 높이기 위해 검색어의 세 번째 문자가 입력된 후에 자동 제안을 표시해야 한다.
오타는 고쳐준다.
오타는 검색 결과가 없다는 화면이 보이는 주된 이유 중 하나이기 때문에 이를 감지해서 고쳐주는 것은 좋은 아이디어다. 구글 검색의 [수정된 검색어에 대한 결과: 나이키 에어포스원 / 다음 검색어로 대신 검색: 나이키 애어푸스원 ]와 같이 입력된 검색어의 오타를 교정하여 오타가 수정된 검색 결과를 보여줘야 한다.
검색 필드에 검색 아이콘은 우측에 놓지 않는다.
검색 필드 내의 우측은 검색과 연관된 음성검색이나 바코드 검색, 사진 검색 등 부가 기능 아이콘을 놓는 곳이다. 입력한 검색어로 검색을 실행하라는 기능의 검색 아이콘은 없어도 된다. 모바일에서는 검색 버튼은 키보드에 있으면 된다.
검색 결과
모바일 환경은 데스크톱에 비해 작은 화면을 가진다. 때문에 검색 결과를 데스크톱에 비해 많이 보여줄 수 없다. 이는 정확한 결과를 바로 보여주지 못할 경우 이탈할 가능성이 높아진다는 것을 의미한다. 모바일은 매우 제한된 "화면 공간"으로 한 화면에 많은 검색 결과를 한 번에 표시할 수 없다. 사용자는 작은 화면 내의 소수의 결과를 보고 검색 결과를 평가할 것이다. 데스크톱에서보다 검색 정확도가 훨씬 더 중요하다. 모바일 사용자는 빠른 결과를 원하며 참을성이 없다. 만족스러운 검색 경험을 제공하지 못하면 곧바로 이탈할 것이다. 검색 과정을 모바일에 최적화할 수 있거나 결과 자체를 즐겁게 탐색할 수 있는 경험을 제공해줄 수 있다면 사용자 경험을 높이는데 많은 도움이 될 수 있다.
검색어와 연관성이 높은 검색 결과를 처음에 보여준다.
검색 결과가 나타나는 수가 제한되는 모바일 화면에서 스크롤할 필요 없이 볼 수 있는 범위(예를 들면 3~5개)에서 관련성이 높은 결과를 확실하게 보여주는 것이 중요하다. 이를 바탕으로 처음 스크롤을 유도할 필요가 있다, 스마트폰 화면은 많은 검색 결과를 노출하는데 제한이 많다. 가장 연관성이 높은 검색 결과 처음 3~5개를 기본적으로 노출해야 한다. 지속적인 활동으로 정기적으로 검색 품질을 확인해 앱 검색어(쿼리)와 순위를 조정하여 상단(top)에 위치시킨다.
검색 결과 콘텐츠에 집중해야 한다.
검색 결과에 내비게이션 바와 검색 바를 같이 구성할 필요는 없다. 스마트폰 화면은 작기 때문에 상품 검색 결과를 3~5개까지가 최대 노출 개수이다. 불필요한 내비게이션 바 공간을 줄이고 절약된 공간을 검색 결과의 정보를 노출하는 데 사용해야 한다.
검색 결과 페이지 내에 내비게이션 바는 좁은 스마트폰 화면에서는 불필요하다. 사용자가 검색 결과에 집중할 수 있도록 디자인해야 한다.
검색에 사용하는 시간을 실제보다 짧게 느끼게 하라.
검색 결과가 바로 표시되는 것이 이상적이겠지만 만약 그렇지 못하더라도 적절한 비주얼 피드백을 표시해야만 한다. 검색에 드는 시간이 길어지면 사용자는 스트레스를 느끼고 이탈할 위험이 있다. 일반적으로 0.1초 이상 1.0초 미만이 늦으면 특별한 피드백은 필요 없다. 만약 검색에 더 긴 시간이 걸린다면 빈 화면에 로딩 표시만 노출하는 것은 문제가 있다. 사용자가 기다리는 시간은 우측의 이미지 같은 일시적인 정보를 표시하면 체감 시간을 줄일 수 있다. - 용량이 많은 이미지는 천천히 불러오고 용량이 적은 상품명과 가격 같은 텍스트 정보를 먼저 불러올 수 있다.
모든 상품 검색 결과가 로딩될 때까지 빈 화면으로 두지 말고 미리 배경을 깔아주고 로딩되는 콘텐츠를 순차적으로 보여주면 사용자에게 검색에 드는 체감 시간을 줄여줄 수 있다.
검색 결과에서 레이지 로딩 기법 Lazy Loading을 사용하여 검색 속도를 최적화해야 한다.
이미지와 같이 사이즈가 큰 데이터를 로딩할 때 검색 결과 전체 이미지까지 로딩을 하면 페이지 로딩이 느려질 수 있다. 모바일에서는 페이지 네이션보다는 무한 스크롤 UI패턴 사용이 일반적이다. 무한 스크롤은 페이지 이동 없이 화면을 사용자가 스크롤할 때마다 새로운 상품이 불러와지는 UI다. lazy loading은 사용자가 보는 화면 영역에 이미지만 로딩하고 다른 이미지들은 스크롤에 반응하면서 로딩된다. 따라서 사용자가 체감하는 검색 속도는 실제보다 빨라진다.
상품의 Lazy loading에 관해선 먼저 텍스트를 표시하는 것이 좋다. 이렇게 하면 참을성 없는 사용자가 모든 이미지가 로드될 때까지 기다리지 않고 원하는 목적의 상품을 빠르게 볼 수 있다.
검색 결과 내에서도 재검색이 가능해야 한다.
검색 후 재 검색률은 매우 높은 편이다. 사용자가 원하는 상품을 찾기위해 검색어를 한번 입력하고 찾을 확률은 낮다. 검색 결과의 정확도를 높이기 위해 검색 결과 페이지에서 검색 필드에서 검색어를 수정하거나 변경 가능해야 한다. 검색을 사용한 사람 중 20 %가 검색을 수정 및 재 검색하고 21 % 는 검색 결과에서 웹 사이트를 종료했다. (출처 : Is site search less important for niche retailers?)
검색 결과에서는 사용자는 검색 결과가 만족스럽지 않을 때 검색어를 수정하고 재검색이 가능하도록 검색 필드와 검색어가 있어야 한다.
검색 결과에서는 사용자는 검색 결과가 만족스럽지 않을 때 검색어를 수정하거나 재검색이 가능하도록 검색 필드와 입력한 검색어가 있어야 한다.유용한 ‘검색 결과 없음’ 페이지
검색을 할 때 입력한 검색어에 일치하는 상품이 없거나 검색어를 잘못 입력했을 경우 ‘검색 결과 없음’ 상태가 되어버린다. 최대한 ‘‘검색 결과 없음’ 페이지가 사용자에게 노출되지 않도록 해야 한다. ‘검색 결과 없음’ 페이지가 제대로 설계되지 않으면 사용자의 쇼핑 행동은 끊기고 이탈할 가능성이 높다. 검색어에 맞는 검색 결과가 없다 하더라도 계속 쇼핑하게 유도해야 한다. 일치하는 검색 결과가 없었더라도 같은 카테고리 상품 등 가치 있는 정보를 사용자에게 제공하여 쇼핑을 포기하고 이탈하지 않도록 디자인해야 한다. 검색 실패 페이지에서 사용자에게 어떠한 대안을 제시하지 않을 경우 이탈을 피하기 어렵다.
참고자료
