전자 상거래를 위한 완벽한 검색 상자 디자인

제품을 검색할 목적으로 온라인 상점이나 마켓플레이스를 검색했는데 검색 상자를 찾지 못한 적이 있습니까? 당신이 가지고 있다고 확신합니다.

홈페이지 에서 사이트 검색을 더 많이 사용할수록 사이트 검색이 사용될 가능성이 높아진다는 것은 말할 필요도 없습니다. 즉, 전자 상거래 웹사이트에서 다양한 카테고리를 거치는 대신 방문자가 직접 사이트 검색을 사용하여 필요 없는 제품을 찾는 데 시간을 낭비할 필요 없이 원하는 제품을 더 빨리 찾을 수 있습니다.

따라서 검색이 제품을 찾는 가장 일반적인 방법인 분야에서는 눈길을 끄는 디자인으로 검색 필드를 "홍보"하고 특히 홈페이지의 전략적 위치에 배치하는 것이 좋습니다.

카테고리 탐색

이것은 일반적으로 사용자가 구매하려는 제품의 정확한 브랜드 이름과 모델을 알고 있는 한(즉, 고객이 방문하기 전에도 원하는 것이 무엇인지 정확히 알고 있는 한) 보다 표적화된 가격 비교 웹사이트의 경우입니다. 전자상거래 웹사이트).

반면에 사용자 가 카테고리별로 탐색하는 것을 선호하는 부문 (원하는 정확한 제품, 이름 또는 철자법을 모르기 때문에) 또는 평면 웹사이트 계층 구조에서는 검색 필드 디자인이 덜 눈에 띄게 될 수 있습니다. 검색보다는 카테고리별로 탐색을 장려하는 데 사용됩니다.

예를 들어 , 패션 및 홈 데코 부문 은 특히 사용자의 초기 선호도와 후속 성공률(검색 후 전환율) 측면에서 카테고리별 브라우징을 강력하게 선호합니다.

디자인 및 구현과 관련하여 전체 디자인 내에서 검색 필드를 돋보이게 하는 다양한 방법이 있습니다. 따라서 사용할 정확한 형식은 검색 필드가 나타나는 컨텍스트(즉, 전체 웹 사이트 디자인)에 따라 웹 사이트마다 다릅니다.

검색 필드의 디자인 요소

사용자가 검색 기능을 사용하도록 유도하려는 정도에 따라 검색 필드를 눈에 띄게 만드는 데 사용할 수 있는 여러 디자인 요소가 있습니다. 가장 큰 영향을 미치는 검색창 디자인의 세 가지 주요 요소는 다음과 같습니다.

위치

아래 이미지에서 아마존을 살펴보십시오. 보시다시피 아마존은 더 많이 팔리고 카테고리별로 탐색하는 것보다 사이트 검색을 사용할 때 더 잘 안내할 수 있기 때문에 시장을 검색하는 것이 Amazon의 이익입니다.

수백만 개의 제품이 있고 사용자가 일반적으로 웹 사이트를 방문하면 원하는 제품 유형을 이미 알고 있다는 점을 고려하여 사이트 검색을 중앙의 선호하는 위치에 배치하고 거의 전체를 차지합니다. 화면의 너비.

또한 사이트 검색을 돋보이게 하고 사용자가 사용하도록 권장하려면 제대로 작동해야 합니다. 다시 말해:

• 즉시 결과 표시: 일단 검색된 제품을 로드하는 데 너무 오래 걸리는 사이트 검색은 없습니다.
• 원하는 순서대로 결과를 나열하십시오. 위쪽과 왼쪽이 높을수록 방문자에게 더 관련성이 높은 결과가 나타납니다.
• 적절한 이미지 품질 : 픽셀화된 이미지가 없습니다.
• 제품 사양 표시: 크기, 할인 또는 프로모션, 사용 가능한 색상… 모두 원하는 검색 범위 내에서 가능합니다.
• 사용자에게 사이트 검색 자체 내에서 장바구니에 추가할 수 있는 옵션을 제공하여 사이트 검색과 장바구니 사이를 오갈 필요 없이 여러 제품을 구매할 수 있습니다.

사이트 검색 스타일

검색 상자를 클릭하면 웹 사이트 이미지가 존중되는 것이 가장 중요합니다. 이를 위해서는 상당히 많은 요소를 고려해야 합니다.

• 색상 : 웹사이트와 동일한 기업 색상을 사용해야 합니다. 사이트 검색 어딘가에 로고를 추가해 보십시오.
• 글꼴 : 글꼴은 또 다른 중요한 요소입니다. 숫자, 제목, 버튼 등 웹사이트에서 사용하는 것과 동일한 글꼴을 사용하십시오.
• 버튼 : 구매 또는 " 장바구니에 추가 " 버튼에 웹사이트의 버튼과 동일한 스타일을 사용하십시오.
• 기타 요소: 할인, 테두리 , 전자 상거래 웹사이트에 있는 것과 동일한 카테고리 사용…

크기

검색 필드를 상대적으로 작게 만들면 시각적 중요성이 크게 줄어듭니다. 사이트 검색 사용을 늘리려는 많은 온라인 상점이 하는 한 가지는 헤더와 사이트 검색 간의 대비를 높이는 것입니다. 예를 들어, 위에서 보았듯이 Amazon 의 헤더는 검은색이지만 사이트 검색은 중앙에 흰색으로 표시됩니다.

크기, 위치 및 대비를 결합하면 검색 상자가 눈에 띄게 만들어 전자 상거래 웹 사이트에서 제품을 찾는 기본 방법으로 검색을 권장합니다. 그럼에도 불구하고 이탈률을 줄이려면 Doofinder와 같은 스마트 사이트 검색이 필요합니다. 그렇지 않으면 양날의 검이 될 수 있습니다.

홈페이지의 검색창 디자인

특히 홈페이지에서는 대부분의 사용자가 웹사이트를 방문하는 즉시 제품 검색 전략을 세우는 경향이 있기 때문에 검색 상자 디자인 이 더욱 중요합니다.

Baymard Institute 데이터에 따르면 사용자의 60%가 모바일 웹사이트의 홈페이지에서 검색을 첫 번째 전략으로 즉시 사용합니다 . 따라서 홈페이지에서 검색 필드의 디자인이 눈길을 끌수록 더 많은 사용자가 카테고리별로 탐색하기 보다는 검색에 대한 인센티브 로 받아들이게 될 것입니다.

또한 카테고리별 검색보다 사이트 검색의 검색을 장려하려는 경우 사이트 검색에 홈페이지에 시각적 터치를 추가하는 것이 좋습니다.

홈페이지에 대한 차별화된 사이트 검색 디자인은 더 과감한 검색 필드 테두리, 더 대조적인 배경색, 더 큰 상자 및 글꼴 크기, 더 생동감 있는 "검색" 버튼 등 여러 가지 방법으로 수행할 수 있습니다. 또한 필드 키보드에 초점을 맞출 수도 있습니다. 기본적으로. 검색 필드의 위치나 시각적 스타일을 근본적으로 변경하지 않고 검색 필드를 눈에 띄게 만드는 모든 디자인 수정은 검색 필드를 눈에 띄게 만드는 데 도움이 됩니다.

이러한 방식으로 검색 필드는 다른 페이지에서 초점을 떼지 않고 완전히 인식할 수 있지만 홈페이지에서 시각적 대비를 추가할 수 있습니다.

이러한 추가적인 시각적 대조는 검색을 웹사이트에서 " 유일한 옵션 "으로 홍보하는 정도가 아니라 사용자가 웹사이트를 방문할 때 검색 필드를 보다 쉽게 ​​볼 수 있도록 도와야 합니다.

아시다시피... 홈 페이지는 종종 사용자의 관심을 끌기 위해 경쟁하는 다양한 그래픽과 시각적 요소를 특징으로 합니다. 홈페이지에 충분하지 않을 수 있습니다.