[번역] 아마존 주문 리디자인 연습—파트 3: 배송과 결제

※ 의/오역 있음, 문제 시 삭제합니다.

Amazon Checkout Redesign Exercise — Part III: Shipping and Payment

---

주목: 이것은 연습입니다. 이 연습의 목적은 비즈니스 솔루션을 제시하는 것이 아니라, 가정된 환경에서 솔루션 제시를 연습하는 것입니다. 추측의 힘은 비즈니스 목표와 측정 기준을 형성하기 위해 적용됩니다.

이 기사의 마지막에 프로토타입과 다른 파트의 연습이 링크된 것을 찾을 수 있을 것입니다.

이전 글에서 우리는 계산서 내비게이션에 대해 실험했고 장바구니 경험을 개선하고자 했습니다. 이번 시간에 우리는 두 가지 입력량이 많은 중요한 기능에 대해 알아볼 것입니다: 배송과 결제 정보입니다. 여전히 비회원을 기준으로 하지만 프로토타입을 사용성있게 만들기 위해서 우리는 작은 데이터 관리 시스템을 실행해볼 필요가 있습니다. 하지만 우선, 첫번째는 입력입니다.

입력

아마존에는 배송과 결제 정보를 다루기 위한 많은 화면들이 있습니다.

순서대로 배송 정보 관리 화면. 결제 정보 관리 역시 비슷하다.

1. 가장 첫 구매 시 보여지는 화면

2. 배송지 주소 옆에 "변경" 버튼을 클릭하면 보여지는 오버레이

3. 첫 번째 이미지와 같은 단계이지만 최소 하나의 주소가 추가되었을 때 보여지는 화면

만약 디자이너라면, 이 모든 폰트 스타일, 레이아웃, UI 패턴을 보고 혼란스러울 것입니다. 만약 당신이 거대한 장기 프로젝트를 유지하는데 익숙하다면are seasoned with, 이러한 혼란을 기술 부채로 정의할 것입니다. 어쨌든, 계산 경험에 있어 실제 비즈니스 목표에 대해 알지 못하더라도, 이러한 워크플로우는 개선의 여지가 충분하며 연습하기에 최적의 기능인 것은 명백합니다.

기본적인 것부터 시작합시다.

1단계. 폼 디자인

폼 디자인은 예술과 기술의 어두운 한 면입니다. 우리는 이번 연습에서 가장 적절한 폼을 만들기 위해 너무 지나치게 깊게 들어가길 원하지 않습니다. 하지만 폼은 전반적인 경험의 일부로써 우리가 테스트하기 위해 그것들은 사용 가능해야 합니다.

더 나은 레이아웃을 만들기 위해, 가장 기본적인 밸리데이션 (인풋 필드가 비어서는 안된다)을 추가하고 사용자가 정보를 저장하게 합니다.

모든 것이 순조롭습니다straightforward, 하나만 제외하고. 오버레이에서 편집이 일어난다는 것. 모달 팝업은 최고의 UX 패턴이라고 말하기 어렵습니다. 하지만 폼을 채우는 것과 같이 집중된 경험에 있어서는, 사용자가 취할 수 있는 제한된 양의 액션과 함께 적절한 독립적인 환경을 제공합니다. 여기서 오버레이로 모달 뷰를 보여주는 것은 다음의 맥락을 제공합니다: "당신은 여전히 여기 주문 페이지에 있고, 커튼 뒤에서 볼 수 있습니다. 지금은 이 빛나는 새로운 창에 집중하면 됩니다."

다음은 가장 흥미로운 부분입니다.

2단계. 정보 관리

아마존은 다수의 배송 주소와 결제 방법을 저장하도록 합니다. 따라서 우리의 프로토타입 역시 이 기능을 포함해야 합니다. 우리는 테스트 해볼만한 두 가지 디자인 스케치를 빠르게 완성했습니다. 한 옵션은 모든 컨트롤 요소를 한 줄에 나열하는 것입니다. 다른 하나는 편집, 삭제 기능을 구분하는 것입니다.

첫 번째 접근은 좀 더 간단합니다: 모든 컨트롤 요소가 저기 있고 당신의 선택을 기다립니다. 두 번째는 "주소 관리" 매뉴 하에 몇몇 기능을 숨겨 놓고-그것들이 거의 사용되지 않는다고 추측하면서-메인 태스크를 처리하는데 있어 UI를 더욱 간결하고 쉽게 만들었습니다: 새로운 주소를 추가하고 리스트에서 하나를 선택하기.

이제 어떤 것이 더 나은지 조합하고 테스트할 시간입니다.

인라인 컨트롤

두 가지 예외를 제외하고 모든 것이 괜찮아 보입니다.

• UI가 복잡합니다. 모든 사용 가능한 옵션을 전시하는 것은 동시에 너무 많은 컨트롤을 화면에 노출합니다.
• UI가 단조롭습니다. 이러한 시각적 하이라키에 의해 모든 정보와 컨트롤들이 정렬되어 있고 동등하게 표현됩니다. 보통 우선순위를 매기고 가장 많이 쓰이는 옵션을 강조하는 것은 사용자 경험을 향상시킵니다.

구분된 편집 뷰

이 버젼은 더 정돈되고 더 사용하기 쉬워 보입니다: 단독 관리와 편집 뷰를 갖춘 매우 기본적인 팝오버 항목입니다. 참고할 가치가 있는데It’s worth noting though, 적절한proper 테스트를 통해 몇가지 이슈를 발견할 수 있습니다. 예를 들어 많은 사용자들이 편집 컨트롤을 발견하는데 어려움을 겪거나 리스트에서 주소를 선택할 때 편집 컨트롤을 발견할 것이라고 예상할 수 있습니다.

옵두 번째 옵션은 첫 번째보다 더 나아 보입니다. 그리고 빠른 테스트가 더 이상 문제를 발견하지 못했으므로 우리는 두 번째 안을 선택합니다. 아래 답변과 함께 당신의 생각을 자유롭게 나누세요, 그리고 당신의 제안이 이 연습의 마지막 파트에 반영될지도 모릅니다.

3단계. 로그인, 애니메이션, 레이아웃

프로토타입은 이미 잘 작동하고 있으며, 적절하게 테스트 될 때 가치있는 데이터의 근원이 될 수 있습니다. 하지만 더욱 사용성있게 만들기 위해, 몇 가지 개선을 시도할 수 있습니다.

• 결제 방법 로직. 지금까지 우리는 결제 정보 블록을 사용해서 디자인을 만들고 테스트했습니다. 이제 우리는 선택한 솔루션을 결제 정보 워크플로에도 적용하길 원합니다.
• 로그인 워크플로우 실행. 우리는 첫 경험 유저의 경우에 UI를 적용했습니다. 하지만 거대한 온라인 서비스에 있어서 이것은 가장 인기있는 케이스는 아닙니다. 우리는 기존 사용자들 (로그아웃 한)에게 우리의 UI가 어떻게 작동하는지 로그인 시뮬레이션을 통해 알아보아야 합니다.
• 레이아웃과 애니메이션. 우리는 이전 연습에서 장바구니 UI에 작은 개선을 만들었습니다. 그리고 우리는 배송 주소와 결제 방법이 이미 그곳에서 했던 것과 일치하기를 원합니다. 

  

결론

이 연습은 거의 끝났습니다. 우리는 이미 하나의 목업 없이 많은 것을 해냈습니다: 우리는 내비게이션을 통해 실험했고, 장바구니 경험을 개선할 방법을 탐색했으며, 결제와 배송 정보를 다루는데 다른 방법을 비교했습니다.

전체 결제 경험을 재창조하고픈 유혹이 있을테지만, 우리에게는 불가능한 태스크일 수도 있습니다. 경험은 비즈니스 부서와 개발 부서의 협업, UI가 갖고 있는 모든 태스크와 생산적으로 동시 존재해야 하는 모든 다른 경험들에 대한 적절한 이해 없이는 완성될 수 없습니다. 따라서 우리는 겸손하며, 연습을 위해for the sake of 연습을 끝마치고 그 가운데 무언가를 배울 것입니다.