Shopify 디자인 팁 및 UX 모범 사례

Shopify는 175개국에서 50만 개 이상의 전자 상거래 비즈니스를 지원합니다. 2012년부터 Shopify 플랫폼의 판매자 수는 매년 평균 74% 성장했으며 Shopify가 오늘날 가장 잘 알려져 있고 사용하기 쉬운 전자 상거래 플랫폼 중 하나가 된 결과 이러한 판매자는 550억 달러 이상의 매출을 달성했습니다.

Shopify가 도메인, 호스팅, 모든 백엔드 및 일부 프론트엔드 기능을 관리하므로 UX 디자인에 더 많은 시간, 비용 및 리소스를 사용할 수 있습니다. 2021년까지 전 세계 전자 상거래 매출은 4조 9000억 달러로 사상 최고치를 기록할 것으로 예상되며, 표준 이하의 UX 디자인이 결제 포기의 가장 큰 원인 중 하나이므로 전자 상거래 모범 사례의 구현이 계속해서 매우 효과적임이 입증될 것이 분명합니다.

이 기사에서는 최고의 Shopify 디자인 팁을 살펴보겠습니다.

Shopify에는 어떤 기능이 있습니까?

Shopify는 최고의 전자 상거래 플랫폼에서 기대할 수 있는 모든 기능과 함께 제공됩니다.

• Stripe 및 PayPal과 같은 외부 지불 게이트웨이와 통합
• 외부 옵션에 비해 수수료가 없는 Shopify 결제 액세스
• 기프트 카드 또는 스토어 크레딧으로 결제를 허용하는 기능
• 맞춤형 결제 페이지(Shopify Plus 고객만 해당)
• 사용자 계정 또는 게스트 체크아웃 옵션
• 정적 페이지(예: 개인정보 보호정책 또는 이용약관)
• 프로모션 콘텐츠가 포함된 방문 페이지
• 개발 중인 상점에 대한 비밀번호 액세스
• 다양한 맞춤형 옵션이 있는 제품 변형
• 제품 분류를 자동화하는 스마트 컬렉션
• 제품 검색을 지원하는 검색 및 태그 기능
• 게시물에 제품을 포함할 수 있는 블로그 기능
• 개발자가 동적 웹사이트 및 모바일 앱을 구축하는 데 도움이 되는 API

전자 상거래 제품 검색 향상

오프라인 매장이 부서별로 구성되어 고객이 직원에게 요청하여 특정 품목을 찾을 수 있는 것과 마찬가지로 온라인 쇼핑객은 찾고자 하는 것을 쉽게 찾을 수 있도록 탐색, 필터링 및 검색 기능이 필요합니다. 빨리 .

전자 상거래 고객의 40%는 로드하는 데 3초 이상 걸리는 웹 사이트를 포기합니다. 이는 제품 발견에 있어 얼마나 조급해하는지 보여줍니다. 다행히 Shopify에는 사용자 지정 탐색을 쉽게 구축하고, 제품 및 카테고리를 구성하고, 검색 기능을 구현할 수 있는 여러 기능이 있습니다.

사용자 정의 탐색

고객에게 너무 많은 옵션을 제시하면 분석 마비가 발생할 수 있습니다(결정을 효과적으로 내리기 위해 사용 가능한 옵션이 너무 많아 좌절감과 포기로 이어지는 경우). 사용자 지정 탐색을 디자인하여 가장 효과적으로 변환되는 제품 및 "컬렉션"의 우선 순위 를 지정할 수 있습니다. 예를 들어 데스크 제품이 가장 인기 있는 경우 "데스크" 컬렉션을 눈에 띄게 표시할 수 있습니다. 이러한 사용자 지정 탐색은 Shopify CMS에서 편집하여 캐주얼 A/B 테스트를 수행할 수도 있습니다.

시각적으로 가장 잘 전환되는 Shopify 테마는 컬렉션의 제목을 명확하게 표시하고 사용자가 제공되는 모든 제품, 컬렉션 및 페이지 중에서 원하는 것을 쉽게 식별할 수 있도록 충분한 공백을 사용합니다.

컬렉션

컬렉션은 유사한 제품의 조직화된 그룹입니다. 제품을 수동으로 컬렉션으로 정렬하거나 일치 기준에 따라 자동으로 정렬할 수 있습니다(예: 제품 제목에 특정 키워드가 포함되어 있거나 특정 태그 가 할당되었거나 특정 가격대에 속하는 경우). 컬렉션은 또한 일시적(예: 계절 또는 기간 한정 판매)일 수 있어 Shopify 웹사이트 디자인이 항상 적절하고 시기적절하며 무엇보다 전환율이 높습니다.

이러한 컬렉션은 배후에서 정의되지만 전자 상거래 디자이너가 Shopify용으로 디자인할 때 이 기능을 인식하는 것이 유용합니다.

제품 태그

표시/표시 태그는 고객이 유사한 제품을 찾는 데 도움이 되며 위에서 언급한 것처럼 내부적으로 컬렉션을 만드는 데 사용할 수도 있습니다. 그러나 태그의 가장 큰 이점은 고객이 "노란색"과 같은 태그가 지정된 정의 속성을 기반으로 제품을 필터링할 수 있도록 하는 패싯 검색 을 생성하는 데 사용할 수 있다는 사실에 있습니다.

다음 Shopify 디자인 팁을 염두에 두십시오.

• 추가 설명을 위해 적용된 필터를 표시합니다.
• 고객이 검색 범위를 넓히기 위해 필터를 제거할 수 있습니다.
• 가장 인기 있는 것만 한 눈에 보기 위해 필터를 자릅니다.

검색

검색 기능은 자신이 찾고 있는 것이 무엇인지 정확히 알고 있는 고객에게 유용하며 모바일 장치에서 상호 작용하는 자연스러운 어색함 때문에 브라우징 및 필터링이 좌절감을 느끼는 모바일 쇼핑객에게 특히 중요합니다.

다음은 검색 경험을 디자인할 때 고려해야 할 Shopify 모범 사례입니다.

• 검색 상자를 숨기지 마십시오 . 즉시 사용할 수 있도록 하여 마찰을 줄입니다.
• 고객이 기대하는 위치(즉, 오른쪽 상단 또는 중앙 집중식)에 검색을 배치합니다.
• 검색 아이콘뿐만 아니라 전체 입력 상자를 표시합니다.
• 사용자가 더 빠르게 검색할 수 있도록 자동 완성 기능을 통합합니다.
• 제안된 결과 및 자동 고침을 사용하여 인적 오류에 대해 설계합니다.
• 판매가 이루어지지 않은 경우 사용자 검색을 저장하고 후속 이메일을 보냅니다.

제품 페이지에 대한 Shopify 모범 사례

Shopify는 전자 상거래 쇼핑객을 연결하고 사용자를 바로 결제로 안내하는 데 필요한 모든 기능을 제공합니다. 이러한 기능을 전자 상거래 모범 사례와 결합하면 포기된 체크아웃 수를 평균 통계 아래로 끌어올릴 수 있습니다.

매력적인 제품 이미지 사용

좋은 전자 상거래 웹사이트를 만드는 것은 사용자를 감성적으로 사로잡는 이미지입니다. 이를 위해 Shopify에서는 여러 이미지와 제품 변형을 업로드할 수 있습니다. 그럼에도 불구하고 Shopify 모범 사례로 이러한 제품 이미지 중 하나 이상 을 규모에 맞게 표시(즉, 제품의 크기를 설명하기 위해 다른 물체로 둘러싸여 있음)하여 기대치를 설정하십시오.

고객은 모든 제품 이미지가 생생하고 고품질이며 확대/축소 가능한지 확인하기 위해 구매하기 전에 제품에 대한 철저한 조사를 수행하기를 원합니다.

명확한 제품 정보 표시

충격적인(놀라운 것은 아니지만) 많은 전자 상거래 고객이 실제 비용에 대한 정보가 부족하여 장바구니를 포기합니다. 고객의 60%는 장바구니 포기 사유로 예상치 못한 비용(예: 배송, 세금, 수수료)을 꼽았고 23%는 총 비용을 미리 계산할 수 없다고 말했습니다. 투명성 부족은 전자상거래 웹사이트에서 전환을 유도하는 확실한 방법이므로 다음 Shopify 팁과 요령을 염두에 두십시오.

• 정보를 명확하게 구성하기 위해 점진적 공개 기술을 사용합니다.
• 비용의 전체 분석을 미리 표시합니다.
• 가치 제안을 명시적으로 전달합니다.
• 지금 구매/장바구니에 추가 버튼을 시각적으로 구별할 수 있게 만드십시오.

신뢰와 확신 구축

Baymard Institute에 따르면 고객의 19%가 체크아웃 시 포기하는 이유로 신뢰 부족이 꼽힙니다. 다행히 모든 Shopify 매장은 기본적으로 SSL(보안 체크아웃)과 함께 제공되지만 고객이 소셜 증거로 리뷰를 남길 수도 있습니다.

사회적 증거는 전자 상거래 웹사이트 에 대한 신뢰를 강화하여 전환을 급증시키는 부인할 수 없는 방법입니다. BrightLocal에 따르면 소비자의 88%가 온라인 리뷰를 개인적인 추천만큼 신뢰하므로 이전 고객이 리뷰를 남기고 이를 고객 여정에 표시하도록 유도하는 것이 중요합니다. 대부분의 Shopify 테마는 스키마 마크업을 활용하여 이러한 등급을 검색 결과에 직접 통합합니다.

소셜 검증 외에도 Intercom, Zendesk, Drift 또는 Kayako와 같은 라이브 채팅 솔루션을 구현하여 고객 신뢰 구축을 고려하십시오. Shopify는 앱 스토어 및 수동 설치를 통해 타사 서비스와의 통합을 허용합니다.

관련 제품 추천 표시

모든 주요 전자 상거래 비즈니스는 교차 판매 및 상향 판매 전략을 활용합니다. Optimizely의 Web Recommendations와 같은 분석 및 A/B 테스트 통합과 결합된 태그는 디자이너가 고객이 관심을 가질 수 있는 대안 또는 추가 항목을 표시하여 기업이 전환율을 개선할 수 있도록 지원합니다.

쇼핑 경험 개인화 통합

Optimizely의 Web Personalizations와 같은 통합을 Shopify 컬렉션 및 태그와 함께 사용하면 데이터 기반 비즈니스에서 관심사 및 이전 구매 내역을 기반으로 잠재고객을 분류하고 그에 따라 페이지 콘텐츠를 변경할 수 있습니다.

예측적 디자인 기술을 통해 Shopify 매장은 보다 관련성 높은 콘텐츠를 표시하여 청중의 참여를 더 오래 유지하여 판매로 전환할 가능성을 높일 수 있습니다. 개인화는 모든 전자 상거래 비즈니스의 재정적 수익을 높이는 핵심입니다.

결제 최적화

비회원 결제 대 고객 계정

Baymard Institute에 따르면 고객이 아무것도 구매하지 않고 결제를 포기하는 두 번째로 흔한 이유(35%)는 "사이트에서 계정 생성을 원했습니다"입니다. Shopify는 게스트 체크아웃(특히 모바일)을 허용할 것을 권장하며 이를 위해 고객 계정을 비활성화하는 것이 기본 옵션입니다.

UX 결함을 정확히 찾아내고 이탈 감소

강력한 분석 없이 버려진 계산대를 해결하려는 시도는 어두운 방에서 검은 고양이를 찾는 것만큼 효과적입니다. 사용자 경험과 결제 흐름을 최적화하는 것은 데이터 기반 프로세스일 때 가장 잘 작동합니다.

Shopify 디자이너는 Google Analytics를 Shopify에 연결하고 목표 유입경로를 설정할 수 있습니다. 목표 유입경로는 충분한 데이터가 수집된 후 고객이 구매를 계속하고 싶지 않다고 결정한 위치를 정확히 보여줍니다.

최상의 결과를 얻으려면 Crazy Egg, Hotjar 및 FullStory와 같은 도구와 Shopify를 통합하여 히트맵 및 방문자 기록을 사용하여 이러한 문제 영역을 더 자세히 관찰하십시오.

결론

디자이너가 Shopify 플랫폼의 이점과 기능을 더 잘 전달하고 클라이언트에게 제공할 수 있는 솔루션과 제공할 수 없는 솔루션을 배우려면 무료 데모 스토어를 여는 것이 가장 좋습니다. 또한 최고의 전자 상거래 디자이너는 등록된 Shopify 전문가가 되어 Shopify 웹 사이트 디자이너로서의 이력서에 더 많은 신뢰를 줄 수 있습니다.

Toptal Design 블로그에 대한 추가 정보:

• Shopify 블로그에서 더 많은 Shopify 팁과 요령을 읽어보세요.
• 전자 상거래 UX – 필수 디자인 전략 및 원칙
• 모바일 경험을 위한 전자상거래 UX
• UX 디자인을 통해 전자 상거래 쇼핑객을 사로 잡는 방법
• 반응형 디자인 – 모범 사례 및 고려 사항