배송, 지불 및 보증 조건을 작성하세요. 추가 개선 방법
수업의 목적
주문 체크아웃 페이지를 담당하는 서비스 양식 템플릿의 일부를 개발합니다.
결제 방법, 배송 및 구매자 설문지 선택 양식을 숙지하세요.
주요 목표
결제 페이지의 주요 목적- 방문자가 작성하십시오. 사용자가 양식을 작성할 때 직면하는 질문:
질문
- 어디서부터 시작해야 할까요?
- 양식을 작성하는 것이 쉽나요? 그리고 얼마나 걸릴까요?
- 나에게 맞는 결제/배송 방법은 무엇인가요?
- 양식을 완전히 작성하려면 몇 단계를 완료해야 합니까?
- 왜 이 필드를 작성해야 합니까? 왜 이 데이터가 필요한가요?
- 당신은 신뢰할 수 있습니까? 내 이메일/전화번호가 스패머의 손에 들어가지 않을까요?
- 양식을 제출한 후 어떻게 해야 합니까?
작업
결제 페이지가 어떤 작업을 해결하는지 살펴보겠습니다.
| 일 | 해결책 |
|---|---|
| 간단하고 깔끔한 레이아웃 제공 | 이렇게 하려면 여유 공간을 추가하고 불필요한 모든 공간을 제거해야 합니다. |
| 양식 필드에 주의를 집중시키세요 | 이를 위해 양식 주위에 필드와 테두리가 있는 상자에 다른 배경을 추가합니다. |
| 불필요한 필드 제거 | 주문이 성공적으로 완료될 수 있도록 사용자가 작성해야 하는 필드를 결정해야 합니다. 사용자가 결제 페이지를 떠나도록 강요할 수 있는 불필요한 요소는 없습니다. |
| 방문자의 의심을 극복 | 언제든지 주문이 취소될 수 있음을 알려드립니다. 또는 매장에서 구매할 때의 이점(보증, 반품 또는 배송 조건)에 대해 이야기해 보세요. |
| 능동태 사용 | 활성 동사를 사용하여 결제 과정을 통해 사용자를 안내합니다. 페이지 제목이나 주문 양식 필드 설명에 사용할 수 있습니다. |
| 주문할 단계 수와 시간을 지정하세요. | 이 작업은 사용자가 디자인을 진행하기 전에 페이지 상단에서 수행됩니다. |
이제 이러한 문제를 해결해 보겠습니다.
견본
간단하고 깔끔한 레이아웃 제공
가장 어려운 것부터 시작해 보겠습니다. 기본 결제 페이지는 다음과 같습니다.
결제 페이지의 모양을 단순화하려면 다음이 필요합니다.
- 사이트 상단에는 로고와 사이트명만 남겨주세요. 링크 없음
- 사이드바 내용을 변경합니다. 더 이상 카테고리 목록을 표시할 필요가 없습니다. 주문하시는 분들을 위해 사이드바에 작은 도움을 드리고, 문제가 있을 경우 전화할 수 있는 메시지를 넣어드리겠습니다.
- 사이트 하단 부분 단순화 - 저작권 시스템과 사이트만 남겨둡니다.
원하는 경우 사이드바를 완전히 삭제할 수 있습니다.
서비스 양식 페이지의 템플릿에서 사이트 상단 부분을 담당하는 전역 블록(일반적으로 $GLOBAL_AHEADER$)을 찾아 다음 구조에 배치합니다.
사이트 이름logo_simple.png는 단순화된 로고 이미지입니다. 결제 페이지의 로고를 단순화하는 방법에는 여러 가지가 있습니다. 크기를 줄이거나, 다시 디자인하거나, 기업 스타일을 그대로 유지하거나, 흑백으로 만드는 것입니다.
사이트 하단($GLOBAL_BFOOTER$)과 사이드바($GLOBAL_CLEFTER$)에도 동일한 작업을 수행해 보겠습니다.
글로벌 블록에 어려움을 겪고 있다면 기억하세요.
양식 필드에 주의를 집중시키세요
전체적으로 주문 페이지에서 사용자는 다음 네 가지 양식을 작성해야 합니다.
- 주문내용을 기재한 양식(표) $BODY$
- 배송 방법 선택 양식 $DELIVERY_SELECTOR$
- 결제 수단 선택 양식 $PAYMENT_SELECTOR$
- 개인 데이터 입력 양식 $ORDER_FIELDS$
양식 필드를 강조 표시하려면 .methods-list 및 #order-table을 구성해야 합니다.
메소드 목록, #order-table(여백: 20px; 배경색: #e5e5e5; 테두리: 1px 단색 #cccccc; )
불필요한 필드 제거
여기서는 개인 데이터 입력 양식 $ORDER_FIELDS$에 대해 설명합니다. 물론 귀하는 이미 주문 필드에 관한 31과를 완료했습니다. 우리는 추가된 각 필드를 현미경으로 살펴보고 스스로에게 질문해야 합니다. "이 필드의 정보가 우리에게 정말 중요해서 일부 고객을 잃을 수도 있습니까?"
대개 "이름", "전화번호", "배송 주소"만으로 충분합니다.
물론 상품의 한계성을 고려해 볼 가치가 있습니다. 많은 양의 주문을 처리해야 하는 매장에서는 필드를 추가하면 처리에 드는 인건비를 줄여 수익을 높일 수 있습니다. 주문량이 적은 경우 주로 영업관리자의 자격을 바탕으로 이름과 전화번호만 요청하는 것이 합리적이다.
불필요한 필드를 제거하거나 새 필드를 추가하기로 결정한 후에는 31과로 돌아갑니다.
방문자의 의심을 극복
우리가 극복할 방법:
- $BODY$ 주문 내용이 포함된 양식 후에 보증 및 반품 조건에 대한 간략한 정보를 제공합니다.
- 지불 방법 $PAYMENT_SELECTOR$ 선택 양식 옆에 증명 아이콘, 인증서(있는 경우) 또는 지불 방법 아이콘을 배치합니다.
- "주문하기" $ORDER_BUTTON$ 버튼 이전에 언제든지 주문이 취소/변경될 수 있음을 알려드립니다. 이렇게 하면 사용자는 "모든 것을 올바르게 포맷했나요?"에 대해 오랫동안 생각하지 않게 됩니다.
- "주문하기" 버튼 $ORDER_BUTTON$ 아래에 "다음에는 무슨 일이 일어날까요?" 블록을 배치합니다. 여기에는 주문이 배송되기 전에 지정된 시간에 확인하기 위해 반드시 다시 전화할 것임을 알려드립니다.
불행하게도 이 강의에서는 결제 또는 배송 양식에 아이콘을 추가하는 방법을 고려할 수 없습니다. 따라서 $PAYMENT_SELECTOR$ 뒤에 적절한 블록을 추가하세요.
능동태 사용
구체적인 예를 살펴 보겠습니다. 기본적으로 결제 방법 선택은 템플릿의 이 섹션에 설명되어 있습니다.
결제수단
$PAYMENT_SELECTOR$능동태를 사용하는 경우 동일한 조각은 다음과 같습니다.
결제 방법을 선택
$PAYMENT_SELECTOR$배송 방법 선택, 주문 내용 확인, 사용자 데이터 양식 작성에도 동일하게 적용됩니다.
주문할 단계 수와 시간을 지정하세요.
$BODY$ 앞에 결제 과정의 단계 수와 소요 시간에 대한 메시지를 추가하세요. 예:
4단계로 주문하면 3분도 안걸려요
uCoz는 주문을 위한 여러 단계를 어디에서 거치나요? 여기서는 한 페이지 내의 단계에 대해 설명합니다. 나는 이 옵션을 제안합니다:
- 1단계: 주문 내용 확인
- 2단계. 배송 방법 선택
- 3단계. 배송 방법 선택
- 4단계. 자신에 대한 정보 제공
각 단계의 제목은 능동태를 사용한다는 점에 유의하세요.
이것으로 수업을 마칩니다. 결제 페이지에는 전환율을 높일 수 있는 다양한 설정이 있습니다. 이에 대해서는 다음 강의에서 이야기하겠습니다.
수업 과정
- 단순화된 결제 페이지 레이아웃 만들기
- 불필요한 필드를 제거하고 나머지 필드를 선택하세요.
- 구매자의 의심을 극복하는 데 도움이 되는 텍스트로 블록을 배치하세요.
- 주문하는 데 필요한 단계 수와 시간을 지정하세요.
ASOS 웹사이트는 신중한 결제 절차 덕분에 방문자에게 탁월한 사용자 경험을 제공합니다. 이 기사에서는 장바구니가 왜 그렇게 잘 작동하는지 설명하고 결제 페이지를 강화할 수 있는 몇 가지 트렌드 기술을 보여 드리겠습니다.
일반적으로 특정 온라인 상점 장바구니의 성공은 투명성이라는 간단한 요소에 의해 결정됩니다. 즉, 주문 페이지에서 사용자는 제품 재고/예약 기간, 배송 옵션, 보너스 혜택, 반품 조건, 안전 주의 사항, 사용 가능한 결제 방법 등 모든 주요 정보를 볼 수 있습니다. 이를 통해 방문자는 더욱 자신감을 갖고 구매를 완료하도록 유도합니다.
장바구니로 직접 이동하시겠습니까, 아니면 제품 페이지에 계속 머무르시겠습니까?
고객이 한 번에 여러 품목을 구매하도록 하려면 각 제품을 추가할 때 자동으로 장바구니로 이동하는 것을 선택 해제하세요. 대신 사용자에게 항상 카트 내용을 표시하는 대화형 탭을 페이지에 배치하세요.
이렇게 하면 고객은 자신의 구매 내역을 지속적으로 추적할 수 있으며 구매자가 카트로 전환하는 것은 자발적이고 의식적인 결정이 될 것입니다.
ASOS는 어떻게 50% 더 많은 신규 고객의 지불을 유도합니까?
ASOS 체크아웃 페이지의 원래 버전과 업데이트된 디자인 사이에는 한 가지 중요한 차이점이 있습니다. 이전에는 고객이 주문을 하기 위해 등록해야 했지만 이제 개발자는 계정 생성에 집중하지 않습니다. 대신 고객에게 계속하려면 적절한 버튼을 클릭하도록 요청합니다.
전 ASOS 전자상거래 이사인 James Hart는 이러한 개선을 달성한 방법을 다음과 같이 설명합니다.
“일반적으로 이 단계에서는 구매 단계의 기능을 실질적으로 변경하지 않았지만, 오랜 분할 테스트를 거쳐 로그인 화면이 개선되었습니다. 그 결과, 실패 횟수가 50% 감소했습니다.”
ASOS 웹사이트에서 업데이트된 결제 페이지를 살펴보세요.
이제 이전 버전에서는 다음과 같습니다.
전자상거래 부문에서 실시한 테스트에 따르면 사용자는 계정 생성 절차를 강제로 수행해야 할 때 이를 원하지 않는 것으로 나타났습니다. 구매자는 귀중한 시간이 걸리기 때문에 구매를 완료하기 위해 추가 단계를 거치는 것을 원하지 않으며 개인 정보를 제공하는 것도 원하지 않습니다.
실제로 대부분의 고객은 이상적으로는 주문할 때 비밀번호만 선택한다고 말합니다. 다음으로 ASOS는 여전히 고객에게 등록을 요청하지만 표준 요구 사항(연락처 이름 및 이메일) 외에 사용자는 비밀번호만 제공하면 됩니다.
모범 사례 주문
아래에서는 모범 사례에 부합하고 고객이 구매 완료에 집중할 수 있도록 하는 ASOS 쇼핑 경험의 몇 가지 핵심 요소를 강조했습니다.
1. 단계별 주문 절차
ASOS의 업데이트된 체크아웃은 사용자의 방해 요소를 모두 제거하면 프로세스가 얼마나 쉬워질 수 있는지 보여줍니다.
2. 보안 보장
ASOS는 로고와 해당 인물이 속한 무대 이름 외에 입력된 데이터의 보안에 대한 정보만 페이지 헤더에 배치합니다. 이는 특히 소매 부문에서 신뢰감을 높이는 데 중요하며 잘 알려지지 않은 소매 서비스에서도 채택할 수 있습니다.
3. 명확한 진행 표시기
진행률 표시기는 모든 뉘앙스를 고려하여 만들어집니다.
1. 미니멀리스트 디자인.
2. 귀하가 현재 주문 프로세스의 어느 단계에 있는지 명확하게 보여줍니다.
3. 단계 수가 명확하게 정의되어 있습니다.
4. 귀하는 확인 전에 귀하의 주문을 검토할 기회가 있다는 것을 이해합니다.
4. 설명 팁의 가용성
개발자는 이메일, 비밀번호, 성별과 같은 일부 필드 근처에 지원 정보를 배치하여 사용자가 회사에 이 데이터가 필요한 이유를 이해할 수 있도록 했습니다. 이상적으로는 이 기술을 생년월일에 적용해야 하지만 이에 대해서는 나중에 다루겠습니다.
5. 주요 CTA 요소 지우기
모든 결제 페이지에서 사용자를 다음 단계로 안내하는 기본 CTA 버튼이 가장 눈에 띄는 요소입니다. 많은 소매업체가 여전히 웹사이트에 논란의 여지가 있는 클릭 유도 문구를 갖고 있지만 ASOS는 고객이 프로세스의 다음 단계로 쉽게 이동할 수 있도록 보장합니다.
6. 주소 데이터 수동 입력
대다수의 방문자에게 주소 정보를 수동으로 입력하는 기능은 매우 중요합니다. 또한 이 옵션을 사용하면 온라인 상점이 고객으로부터 더욱 신뢰할 수 있는 정보를 얻을 수 있습니다.
예를 들어 새 주택 단지로 이사하는 경우 등의 이유로 인해 많은 고객이 자동 주소 선택을 사용할 수 없습니다. 즉, 가능한 한 쉽게 필드를 작성할 수 있도록 해야 합니다.
7. 청구서 발송을 위한 주소의 가용성
대부분의 소매 서비스에서 이 옵션은 이미 일종의 표준이 되었지만 여전히 개선될 수 있습니다. 이 경우 방문자가 동일한 주소(제품 배송 및 청구서)를 사용하는 경우 ASOS는 즉시 결제 페이지로 직접 리디렉션하여 더욱 빠르고 긍정적인 사용자 경험을 제공합니다.
대체 솔루션에 관심이 있는 경우 고객을 결제 페이지로 안내한 다음 추가 청구 주소를 사용할 것인지 물어볼 수 있습니다.
8. 카드 선택에 따른 결제 항목 변경
ASOS 팀은 어느 정도 이 접근 방식을 구현했지만 여전히 양식에 추가 필드가 있다는 주장이 있을 수 있습니다. 선택 사항인 경우 이를 제거하면 고객이 구매 완료를 지연시키는 불필요한 생각을 하지 않아도 됩니다.
9. 확인 전 주문 전체 미리보기 및 편집
진행률 표시줄에서 볼 수 있듯이 ASOS는 방문자에게 주문을 확인하기 전에 모든 정보를 검토하고 편집할 수 있는 중요한 기회를 제공합니다.
일부 온라인 소매업체는 고객이 결제 세부 정보를 입력한 후 즉시 확인하기를 기대하지만 ASOS는 결제 중에 개인이 내려야 하는 가장 중요한 두 가지 결정을 공유합니다. 또한 가능한 변경 사항을 수용하기 위해 정보를 편집할 수 있는 유연성도 제공합니다.
10. 편리한 형식으로 나열된 다양한 배송 옵션
ASOS는 고객에게 다양한 배송 옵션을 제공할 뿐만 아니라 편리한 형식으로 선보입니다. 일반적으로 이 정보는 드롭다운 탭에 표시되지만 ASOS의 기술을 통해 방문자는 사용 가능한 모든 요금을 한 번에 볼 수 있으므로 배송 방법에 대해 더 많은 정보를 바탕으로 결정을 내릴 수 있습니다.
11. 정보를 잃지 않고 돌아갈 수 있는 능력
ASOS는 프로세스 중단을 방지하기 위해 결제 시 고객에게 뒤로 버튼을 제공하지 않지만, 많은 고객은 여전히 이전 페이지로 돌아가 세부 정보를 확인하거나 변경하기를 원할 수 있습니다.
대부분의 전자상거래 사이트에서는 경고 및 정보 재전송 요청이 발생할 수 있지만 ASOS는 이러한 성가신 메시지로부터 방문자를 보호했습니다.
추가 개선 방법
- 설명이 포함된 진행률 표시기를 사용하세요. '계속'을 '내 주문 보기' 등으로 대체하세요.
- 방문자에게 양식에 생년월일을 입력해야 하는 이유를 설명하십시오.
- 사용자가 종료하지 않도록 보다 인도적인 오류 메시지를 사용하세요.
- 고객에게 휴대폰 번호가 필요한 타당한 이유를 제공합니다(예: 고객에게 주문 상태에 대한 문자 알림 전송).
- 사람들이 결제 과정에서 이전 페이지로 돌아갈 수 있는 기능을 제공하세요. 이렇게 하면 실수를 너무 늦게 기억하더라도 중요한 변경을 할 수 있습니다.
그리고 연락번호는 없나요?
ASOS는 웹사이트에 실제로 연락처 번호를 나열하지 않습니다. ASOS는 소셜 미디어, 도움말 페이지 및 문의 양식을 통해 고객과 소통합니다.
이 팀이 고객 경험을 개선하기 위해 쏟은 노력 덕분에 고객 서비스에 전화하는 잠재적인 이유의 수를 크게 줄일 수 있었습니다. 결과적으로 고객은 결제 중에 제3자 양식 작성으로 전환하는 것을 원하지 않기 때문에 도움을 요청하는 경우가 거의 없습니다.
ASOS 고객은 장바구니에 있는 품목이 60분 이상 동안 예약되지 않는다는 것을 이미 알고 있으므로 몇 시간(최대 4시간) 동안 고객 서비스 응답을 기다리는 것은 단순히 의미가 없습니다.
합산
ASOS의 예시 접근 방식은 이상적인 것과는 거리가 멀지만 고객이 거래를 완료하도록 설득하려면 사이트에 설명된 기술을 반드시 시도해 보아야 합니다.
이러한 기술을 추가 권장 사항과 결합하면 쇼핑 경험을 최적화하고 버려진 카트 수를 최소화할 수 있습니다.
대부분의 경우 "배달" 페이지 디자인에는 그다지 주의를 기울이지 않습니다. 일반적으로 이는 배송 약관에 대한 짧은 텍스트입니다. 실제로 주문 시 구매자의 결정은 이 페이지에 제공된 정보에 따라 크게 달라집니다.
페이지를 디자인할 때 먼저 다음 정보를 추가해야 합니다.
지역 및 배송 방법
우선, 방문자는 어느 지역으로 배송이 이루어지는지 확인해야 합니다. 주요 지역에 대한 정보를 더 자세히 제공하고 추가 정보에 대해서는 가능한 모든 방법(운송 회사, 배송 지점, 러시아 우편 등)에 대한 개요가 포함된 별도의 페이지를 만듭니다. 온라인 상점이 러시아 전역에서 운영되는 경우 사이트에 지역 자동 감지를 추가하고 이에 따른 정보와 비용 계산용 계산기를 표시할 수 있습니다.
비용 및 조건
대부분의 구매자에게 타이밍은 매우 중요한 지표입니다. 상품이 창고에서 배송되는 시기와 배송 소요 시간을 페이지에 표시해야 합니다. 다음날 가능하다면 이는 다소 긍정적인 요소입니다. 실제보다 짧은 기간을 표시하여 고객을 오도해서는 안 됩니다. 이는 온라인 상점의 평판에 부정적인 영향을 미치고 주문 거부 횟수를 증가시킬 뿐입니다.
배송 조건
구매 전 제품 확인이나 시착이 가능한가요? 결제 전 주문 오픈이 가능한가요? 택배기사가 제품 기능에 대해 조언을 드릴 수 있나요? 이 모든 정보는 종종 구매자의 관심을 끌기 때문에 페이지에 최대한 자세히 표시되어야 합니다.
또한 배송 시 주문 거부에 대한 책임에 대한 정보를 추가할 수도 있습니다. 종종 구매자는 제품을 보기 위해 주문을 하고, 제품이 자신에게 맞지 않으면 거부합니다. 이 경우 구매자가 배송비를 지불합니다.
창고 주소
보증 청구가 발생할 경우 구매자가 어디로 가야 하는지, 어느 주소로 반품해야 하는지를 구매자에게 알리는 것이 필요합니다. 이를 표시할 수 없는 경우(온라인 상점은 창고 없이 운영됨) 회사의 법적 주소 또는 우편 주소를 표시할 수 있습니다.
발송 후 주문 추적
여기에서 구매자가 주문을 추적하는 방법, 트랙 번호를 받는 방법 및 확인할 수 있는 위치를 지정할 수 있습니다.
겉으로는 많은 양의 정보임에도 불구하고, 구매자가 오랫동안 배송 페이지를 공부하지 않도록 최대한 간결하고 구조적으로 제시되어야 합니다.
온라인 상점에서 주문하는 것에 대한 다른 시각
- 유용성
- 웹 디자인
CIS 국가에서는 주문의 최소 75~80%가 현금 배송(배송 시 주문 결제)을 통해 이루어집니다. 러시아와 서구 소비자 간의 이러한 차이는 2012년 Sotmarket 주문 프로세스 재설계의 기초를 형성했습니다. 그러다가 러시아에서는 처음으로 온라인 상점에서 구매 전 고객 인증이나 등록을 요구하는 일이 중단되었습니다.
사용자의 백그라운드 등록 및 승인
구매 마지막 단계의 인증은 사용자에게 어떤 가치도 제공하지 않지만 이러한 서구의 진부한 표현은 RuNet에 깊이 뿌리박혀 있습니다. 9-10개월에 한 번씩 평균 장비 구매 빈도로 인해 사람들은 등록 데이터인 이메일을 기억하지 못하는 경우가 많습니다. 이메일, 로그인, 비밀번호. 역설적인 점은 대부분의 온라인 상점이 전화 주문을 쉽게 받아들이지만 동시에 온라인 구매 시 인위적인 장애물을 만든다는 것입니다.이 관찰은 개념의 기초를 형성했습니다. 백그라운드 등록 및 승인사용자. 이제 고객이 우리에게 등록되지 않은 경우 자동으로 이 작업을 수행하고 주문 데이터와 함께 등록에 대한 알림을 보냈습니다. 그렇지 않으면 구매자에게 개인 계정에 액세스하기 위한 비밀번호를 상기시키기만 하면 됩니다.
계정 매칭은 휴대폰 번호와 이메일을 통해 이루어집니다. 클라이언트 기록을 잃지 않도록 해주는 주소입니다. 이러한 접근 방식은 성과를 거두었습니다. 사이트를 통해 등록된 주문의 비율이 28%에서 52%로 증가했습니다.
서양 온라인 상점은 리소스에 대한 사용자의 예비 승인/등록 사례를 개발하고 전통적으로 스스로 선택했습니다. 시간 절약소비자. 요점은 외국 기업으로부터의 구매는 플라스틱 카드로 선불로 이루어지며, 고객이 이 과정을 더 쉽게 하기 위해 매장에서는 첫 구매 시 새로 생성된 계정에 결제 세부정보를 연결한다는 것입니다. 이렇게 하면 후속 구매 시 사용자의 결제가 훨씬 쉬워집니다.
이 사례는 소비자 행동이 위에서 설명한 것과 유사한 경우에만 관련이 있습니다. 그러나 대부분의 스토어 기능은 여전히 승인 없이 사용자에게 제공되어야 합니다. 예: 제품 비교, 조회한 정보, 장바구니에 추가한 정보 또는 즐겨찾는 제품. 식별용으로 사용 쿠키, 승인 시 수집된 정보를 이미 사용 가능한 정보와 일치시킵니다.
버려진 장바구니 리마케팅
높은 장바구니 포기율은 모든 온라인 상점에서 알려진 또 다른 문제입니다. Sotmarket도 예외는 아니었습니다. 이 문제에 대한 해결책은 단 세 개의 입력 필드 정렬을 변경하는 것이었습니다.
이제 전화번호나 이메일을 입력한 후 바로 이용하세요. 확인에 따라 메일을 보내면 주문이 불완전한 것으로 등록되며 어떤 이유로든 양식을 끝까지 작성하지 않은 고객에게 연락할 수 있는 기회를 얻게 됩니다. 결과적으로 미완성 주문에서 생성 주문까지의 평균 증가율은 17~18%입니다.
이런 방식으로 수집된 데이터는 (읽기: 무의미함)특정 주문과 관련되지 않은 광고 메시지를 보내는 데 사용됩니다.
입력 필드의 별표는 구식입니다. 양식에 이 기술을 사용하지 마십시오. 대부분의 경우 별표는 이 필드가 왜 매우 중요한지에 대한 정보가 포함된 보다 스마트한 힌트로 대체될 수 있습니다.
한 필드에 전체 이름
작은 혁신은 이름 입력 필드(3 in 1)로, 여러 문제를 한 번에 해결할 수 있게 해주었습니다.
- 귀하의 성명을 입력해야 함을 눈에 띄지 않게 상기시켜줍니다.
- 콜센터 관리자는 내부 처리 시스템에 올바르게 게시된 주문을 받습니다.
- 형태 자체는 시각적 단순성을 유지하며 실제보다 복잡해 보이지 않습니다.
2013년에 Sotmarket 웹사이트를 재설계하기 위해 우리는 카트와 주문 모두에 사용되는 자체 GUI를 개발하기 시작했습니다. 자체 구성요소 중 일부를 구현함으로써 복잡한 양식을 크게 단순화하고 개별 필드를 작성할 때 발생하는 오류 수를 줄일 수 있었습니다.
텍스트, 버튼, 글꼴, 색상, 들여쓰기, 팝업 및 기타 인터페이스 요소 작업에 대한 체계적인 접근 방식이 핵심입니다. 직관적상호 작용. 특정 요소가 디자인에 더 자주 사용될수록 해당 요소에 대한 사용자 상호 작용이 더 빠르고 오류 없이 발생합니다.
사용자 의사결정에 대한 영향력 증가
배송 및 결제 블록의 데이터 표시를 변경하면 주문 페이지에서 프로모션을 방송하는 또 다른 흥미로운 개념을 구현하는 것이 가능해졌습니다. 이러한 접근 방식을 통해 페이지 인터페이스를 복잡하게 하거나 가시성을 높이지 않고도 해당 광고 캠페인의 효과를 크게 높일 수 있었습니다.
좋은 인터페이스의 주요 특징 중 하나는 사용자의 주의를 집중시키는 능력입니다. 배송과 결제 방법 간의 복잡한 관계가 자주 발생하는 주문도 예외는 아닙니다.
Pickpoint에서 셀프 픽업을 선택한 경우, 고객은 결제를 선택할 수 없습니다. 신용으로.
DPD 택배 배송을 선택하는 경우 고객은 주문 수령 시 또는 신용으로 결제할 수 없습니다. 동시에, 액세스할 수 없는 결제 방법은 숨겨지지 않고 이 상황에서 이 기능을 사용할 수 없는 이유에 대한 힌트와 함께 비활성화됩니다. 이 접근 방식은 상호 작용 프로세스를 더욱 친숙하게 만듭니다.
한 필드에 배송 주소 입력
편리한 배송 및 픽업 방법 선택의 중요성은 아무리 강조해도 지나치지 않습니다. Yandex.Maps API를 사용하여 배송 주소 입력과 주문 픽업 지점 선택이 훨씬 쉬워졌습니다. 이 솔루션을 통해 우리는 한 번에 두 가지 문제를 동시에 해결할 수 있었습니다.- 한편으로는 고객을 위한 양식 작성 프로세스를 단순화합니다. 이제 고객은 3~4개가 아닌 하나의 입력 필드만 작성하면 됩니다.
- 반면, 주소 프롬프트 덕분에 양식 작성 시 오류/오타 수가 크게 줄어들었고, 이는 사이트를 통해 생성된 주문 관리자의 처리 시간을 줄여줍니다.