훌륭한 웹 스토어 디자인을위한 10 가지 팁

온라인 쇼핑으로 확장하려는 기업가 및 오프라인 소매 업체는 그 어느 때보 다 많은 옵션을 이용할 수 있지만, 더 많은 웹 사이트 고려 사항 및 해독 할 기술적 옵션도 있습니다. 효과적인 웹 스토어를 구축하려면 Wix 스토어와 같은 턴키 공급자가 여전히 존재하므로 초기 존재를 빠르고 간단하게 팝업 할 수 있습니다. 그러나 온라인 비즈니스 성장을 진지하게 생각하는 사람들은 이러한 턴키 서비스를 넘어서서 그들의 요구가 상당히 빠르게 진화한다는 것을 알게 될 것입니다.

사이버 공간에 실제로 무엇이 나타나고 비즈니스가 성장함에 따라 훨씬 더 많은 질문이 있습니다. 고객에 대한 데이터 수집은 훌륭한 예이며 오늘날 특히 유럽 시장에 접근하려는 매장의 주요 질문입니다. 해당 시장에서는 통화 변환 및 다양한 전자 상거래 법이 여전히 심각한 문제이지만, 이제는 고객 데이터에 대해 훨씬 더 신중한 처리 프로세스를 필요로하는 일반 데이터 보호 규정 (GDPR)도 처리해야합니다.

거래 보안은 또 다른 중요한 질문입니다. 이는 고객 안전에 대한 요구와 구매를하기 전에 뛰어 넘어야하는 후프 수의 균형을 의미하기 때문입니다. 표준 웹 사이트에 대해 어떤 결정을 내려도 모바일 반복에 대해 동일한 토론이 필요합니다. 이동성은 확실히 작년의 가장 사랑스러운 유행어 중 하나 였지만, 12 개월이 지나도 그 중요성은 줄어들지 않았습니다.

현재 생각은 웹 빌더가 모바일 경험을 먼저 디자인 한 다음 필요에 따라 데스크탑 경험을 조정해야 함을 나타냅니다.

3dcart의 COO (Chief Operating Officer) 최고 지미 로드리게스는“모든 요소는 모든 컨텐츠가 모바일에서 작동해야한다”고 말했다. "처음부터 시작한다면 모바일 용으로 디자인해야합니다. 반응 형 디자인을 사용하면 웹 사이트를 구축하여 모바일에서 시작한 다음 데스크톱으로 가져올 수 있습니다."

모바일 및 데스크탑 사용자 모두를위한 전자 상거래 상점 첫 화면을 디자인 할 수 있도록 아래 10 가지 중요한 팁을 정리했습니다. 그러나 Rodriguez는 기업이 매장에 제품을 통합하기 전에 특정 제품 페이지에서 이러한 기능을 A / B 테스트하여 전체 웹 사이트에 롤아웃하기 전에 어떻게 작동하는지 확인해야합니다.

1. 끈적 끈적한 헤더 탐색

우리는 모두 거기에 있습니다: 우리는 사용자 리뷰 또는 제품 세부 정보를 읽기 위해 제품 페이지의 맨 아래로 스크롤했습니다. 이제 우리는 쇼핑 여정을 계속하기 위해 메뉴로 돌아 가기 위해 페이지를 떠날 준비가되었습니다. 불행히도 메뉴로 돌아가려면 일반적으로 데스크탑 키보드에서 "Page Up"버튼을 클릭하거나 모바일 장치의 화면 상단을 탭해야했습니다.

고정 헤더를 사용하면 아래로 스크롤 할 때 메뉴의 크기가 조정되고 조정됩니다. 메뉴는 페이지를 빠르게 이동해야하는 경우 화면에 탐색을 유지하기위한 여정을 따라갑니다. Bose.com에서이 효과를 볼 수 있습니다. 페이지 중간에 있음에도 불구하고 화면 상단으로 돌아 가지 않고도 페이지의 기본 탐색에 계속 액세스 할 수 있습니다.

2. 햄버거 메뉴

햄버거 메뉴는 패스트 푸드 식당에 가장 적합한 기능처럼 들리지만 모바일 장치에서 많은 비즈니스를 수행하는 회사에게는 필수 아이템이되었습니다. 이전에 본 적이 있습니다. 햄버거 메뉴는 모바일 탐색 및 메뉴의 표준 모바일 아이콘이되었습니다.

이 버튼을 누르면 웹 사이트 탐색의 드롭 다운 메뉴를 제공하는 3 개의 수평선이 있습니다. 화면 공간이 중요한 모바일 장치에서 특히 유용합니다. 그러나 데스크톱 웹 사이트에서도 이러한 기능을 볼 수 있기 때문에 소비자는 사용중인 장치에 관계없이 회사 웹 사이트에서 비슷한 경험을합니다.

"많은 사람들이 햄버거 메뉴를보고 그것이 의미하는 바를 알고 있지만 기본적으로 새로운 표준이라는 것을 모른다"고 로드리게스는 말했다. "모바일 방문자는이 심볼의 의미를 배웠으며 웹 사이트는이를 모바일 탐색의 표준으로 수용해야합니다."

Target.com의 오른쪽 상단과 Target의 모바일 웹 사이트에서 햄버거 메뉴를 볼 수 있습니다. 아래 그림을 볼 수도 있습니다.

3. 시차 스크롤

Parallax Scrolling은 기능적 기능이 적고 웹 사이트의 미학을 향상시키는 방법이 많기 때문에 고해상도 이미지로 가득 찬 큰 배너를 활용하여 웹 사이트에 예술적 감각을 더합니다. 큰 너비의 큰 이미지를 활용하면 웹 사이트의 배경 이미지와 소비자 바로 앞에있는 이미지 사이에 변위 효과를 만들 수 있습니다.

RimmelLondon.com의 아래 이미지에서 볼 수 있듯이 페이지를 아래로 스크롤하면 웹 사이트의 배경 이미지가 변경됩니다. 그러나 배경과 전경 이미지가 서로 섞여서 변화가 미묘합니다. 아래 스크린 샷은 배경 이미지가 자주색에서 분홍색으로 바뀌는 순간의 웹 사이트를 보여줍니다.

4. 무한 스크롤

무한 스크롤은 전자 상거래 기능보다 고문 기법과 비슷합니다. 그러나이 멋진 도구를 사용하면 사용자가 클릭하여 새 페이지를로드하지 않고도 지속적으로 새로운 제품을 볼 수 있습니다. 작동 원리는 다음과 같습니다. 전자 상거래 페이지 하단으로 스크롤하면 페이지 하단에 더 많은 항목이 자동으로로드됩니다. 백엔드에서 여전히 페이지로 카탈로그 화되지만 방문자는이를 알지 못합니다.

UnderArmour.com에서 유사한 기능을 볼 수 있습니다. 불행히도 Under Armour는 추가 콘텐츠를 보려면 "추가로드"버튼을 클릭해야합니다. 일부 웹 사이트에는 클릭하지 않고도 더 많은 콘텐츠를 표시하는 자동 열기 메커니즘이 장착되어 있습니다.

5. 플로팅 "장바구니에 추가"버튼

고정식 탐색 도구와 유사하게, "장바구니에 추가"버튼을 사용하면 소비자가 제품 페이지의 위치에 상관없이 쇼핑 카트에 제품을 추가 할 수 있습니다. 이전에는 사용자가 사용자 리뷰, 제품 세부 정보 및 기타 하위 페이지 요소로 아래로 스크롤 한 다음 제품을 장바구니에 추가하려면 페이지 맨 위로 스크롤해야했습니다. 이제 Diesel.com과 같은 회사에서는 제품 페이지의 위치에 상관없이 제품 가격, 수량, 색상 옵션 및 이미지와 "장바구니에 추가"버튼을 볼 수 있습니다.

6. Fitts 'Law 사용

우리는 Fitts 'Law의 수학에 대해 설명하지는 않겠지 만, 본질적으로 물체가 더 크고 더 가까이있을수록 우리가 그와 상호 작용할 가능성이 높다는 이론입니다. 전자 상거래에도 동일한 기본 원칙을 적용 할 수 있습니다. 사용자에게 제품 페이지, 쇼핑 카트 및 프로모션을 안내하려면 해당 버튼을 크고, 컬러 풀하고 페이지 중앙 중앙에 가깝게 만들어야합니다.

Fitts 'Law를 무시하고 레일 또는 페이지 하단에 작은 흑백 버튼을 배치하면 잠재적 인 구매자를 잃을 수 있습니다. 이 실수하지 마십시오.

7. 고객 리뷰 및 평가 표시

고객이 웹 사이트를 방문하여 제품을 본 다음 Amazon.com으로 이동하여 사용자 리뷰를 확인하는 것을 원하지 않습니다. 결국, Amazon.com은 제품을 더 싸게 판매하거나 고객은 귀하의 웹 사이트보다 Amazon.com 쇼핑 경험을 선호 할 수 있습니다.

고객에게 제품을 평가하고 검토 할 수있는 기능을 제공하면 구매하기 전에 다른 소비자의 의견을 보장해야하는 신중한 고객을 차단할 수 있습니다. 대부분의 전자 상거래 도구를 사용하면 등급 및 리뷰를 쉽게 구현할 수 있으므로이 방법을 구현하는 데 주저하지 마십시오.

8. 효과적인 고객 서비스 데스크

고객과의 소통은 소매 성공을 위해 매우 중요하며 고객 서비스 데스크보다 쉽고 효과적입니다. 화나게하거나 불만족 스러우거나 혼란스러워하는 고객을 적절히 돌보는 것이 사업을 반복하는 가장 확실한 길 중 하나입니다. 오늘날의 서비스 데스크와 헬프 데스크 응용 프로그램은 그 어느 때보 다 쉬워졌습니다. 이러한 앱 중 하나를 사용하면 고객 요청을 구성 할 수있을뿐만 아니라 고객 요청 및 고객이 생성 한 응답 데이터를 수집하여 고객 관계 관리 (CRM), 마케팅 및 비즈니스 분석 엔진에 전달할 수 있습니다. 이를 수행하면 고객이 상점과 해당 제품에 대해 어떻게 생각하는지 자세히 살펴볼 수 있습니다.

고객 서비스 앵커와 접점을 배치하는 위치는 전반적인 고객 경험에 중요합니다. 이 상호 작용이 간단한 연락처 페이지의 형태를 취하 든 60 초 이상 웹 사이트에 남아있는 사람과 채팅 창을 열 수 있는지 여부는 판매하는 제품 유형과 제품에 따라 다릅니다. 상점의 평균 웹 사이트 방문 통계

그러나 고객 서비스 데스크를 성공시키는 것은 소프트웨어 그 이상입니다. 전문가가 이러한 요청을 처리 할 수있는 곳인지 또는 투자 낭비인지 확인해야합니다. "고객 서비스에 문의"버튼을 클릭하는 데 어려움을 겪은 고객은 실제 사람의 도움을받을 수 있습니다. 헬프 데스크 서비스 제공 업체에서 점점 보편화되고있는 기능인 전화 또는 인스턴트 채팅을 통해이를 관리 할 수 ​​있습니다. 또한 직원을 사로 잡을 경우 사람에게 "소리를내는"지능적인 챗봇으로 고객 서비스 운영을 선점 할 수있을뿐만 아니라 더 복잡한 요청 만 실제 호모에게 넘겨 줄 수있는 기본적인 수준에서 들어오는 요청의 급증을 처리 할 수 ​​있습니다. 사피엔스.

9. 빵 부스러기 점검

고객이 매장을 체크 아웃 할 때 프로세스의 현재 위치, 마무리까지의 거리 및 이미 입력 한 모든 데이터를 잃지 않고 쉽게 되돌아 갈 수있는 방법을 알고 싶어합니다. Breadcrumb Checkout은 소비자가 로그인, 지불 옵션, 배송 옵션, 주문 주문 또는 쇼핑 계속에서 앞뒤로 클릭 할 수있는 선형 탐색 버튼 디자인을 사용하여 고객이 공정중인 현재 위치를 정확하게 보여줍니다. 이 레이아웃이 없으면 소비자는 뒤로 버튼을 누르고 정보가 기록되지 않았는지 확인하고 좌절감을 느끼고 웹 사이트를 떠날 수 있습니다.

10. 360도 뷰

혹시 모조 다이아몬드가 돌아 왔다는 것을 깨닫기 위해 온라인에서 겉보기에 겸손한 재킷을 구입 한 적이 있습니까? 그 제품을 반품했을 때 시간과 공급 업체의 시간을 낭비하고 회사 비용이 들었습니다. 걱정하지 마십시오. 그것은 당신의 잘못이 아닙니다. 공급 업체는 재킷의 전면 및 측면 이미지 만 가지고있을 가능성이 높습니다. 공급 업체가 360도 뷰 이미지를 제공했다면 해당 모조 다이아몬드를 발견하고 주문 취소 버튼을 클릭했을 것입니다.

자신의 웹 사이트에서 이와 같은 실수를 저 지르지 마십시오. 고객이 이미지를 확대 할 수 있도록하는 것 외에도 Kenneth Cole.com과 마찬가지로 이미지의 여러 각도를 회전하거나 볼 수있는 옵션을 제공하십시오. 이렇게하면 배송 상자를 열고 예상치 못한 제품을 꺼낼 때 놀라지 않습니다.