brunch

You can make anything
by writing

C.S.Lewis

by UX DAYS SEOUL Nov 12. 2021

아코디언 스타일 체크아웃

Accordion Style Checkouts

이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2012년 09월 18일의 기사입니다)

매출 상위 100개 전자상거래 사이트 중 14%가 아코디언 스타일 체크아웃을 사용합니다.

사실, 우리가 체크아웃 사용성 벤치마크를 수행한 직후에 상위 100개 사이트 중 또 다른 사이트가 아코디언 스타일 체크아웃(JC Penny)으로 전환했습니다. 분명히 아코디언 스타일 체크아웃은 최고의 전자 상거래 사이트에서 인기를 얻고 있으며 아마도 Apple에서 가장 유명할 것입니다.


아코디언 스타일 체크아웃은 체크아웃을 진행하면서 각 단계가 확장되는 체크아웃 프로세스를 말하며, 과거 단계는 종종 이전에 입력한 데이터의 요약으로 축소됩니다



아코디언 체크아웃이 더 좋을까?

아코디언 체크아웃은 훌륭하다고 할 수 있지만 기존 체크아웃을 아코디언 스타일로 다시 디자인하는 것 그 자체로 사용성이 좋다고 할 수 없습니다(보기에는 좋아 보일 수 있음). 

각 단계에서 고객이 하는 것은 체크아웃 경험을 하거나 도중에 그만두는 것입니다.


평균적으로 아코디언 스타일 체크아웃은 체크아웃 사용성 벤치마크에서 전통적인 체크아웃에 비해 19.2% 더 나은 점수를 받았습니다.

그러나 벤치마크에서 14개의 아코디언 스타일 체크아웃은 여전히 상단(American Eagle Outfitters, 순위 7)에서 하단(Talbots, 순위 94)에 이르는 전체 범위에 걸쳐 있으므로 좋은 사용성으로 연결되는 확실한 지름길은 아닙니다.


원 페이지 형식, 아코디언 형식, 복수 페이지 형식보다 그 순간 고객에게 어떤 것을 요구할 것인가에 대한 내용이 더 중요합니다.



여러 개별 단계로 인식

체크아웃 사용성 테스트에 있어서 피험자들은 분명히 아코디언 체크아웃을 다단계 프로세스로 경험했습니다. 이는 모바일 전자 상거래 리서치에서도 확인된 인식입니다.


이것은 프로세스를 동적으로 축소 및 확장 섹션이 있는 단일 페이지로 보는 아코디언 결제의 개념적 철학 및 기술적 구현과 반대되는 경우가 있습니다. 그러나 각 섹션/단계에 대한 새로운 양식 필드 및 지침 세트를 사용하면 사이트의 기술 기반에 관계없이 사용자가 이를 여러 개별 단계로 인식하는 것이 놀라운 일이 아닙니다.


사용자는 아코디언 결제를 여러 개별 단계가 있는 것으로 인식하며, 이는 때때로 사이트 소유자의 개념 및 기술 구현과 충돌합니다


사용자 기대와 기술 구현 간의 이러한 단절은 심각한 결과를 초래할 수 있습니다. 예를 들어, m-커머스 리서치 동안 우리는 단일 페이지로 기술적으로 구현된 아코디언 체크아웃이 있는 footlocker.com과 같은 모바일 사이트를 보았습니다.


테스트 대상이 체크아웃 4단계(결제)에서 브라우저 뒤로 버튼을 눌렀을 때 장바구니로 다시 돌아가버렸고 모든 것을 다시 입력해야 했습니다. 이로 인해 여러 테스트 대상 이 결제를 포기했습니다.

이것은 분명히 잘못된 기술 구현이지만 서버에 대해 지속적으로 데이터를 저장하여 해결할 수 있습니다. 그러나 입력된 모든 정보를 보유하더라도 피험자는 여전히 카트가 아닌 3단계로 돌아갈 것으로 예상하기 때문에 개념 구현이 좋지 않습니다.


따라서 아코디언 스타일 체크아웃을 고려하고 있다면 고객이 브라우저 뒤로 버튼을 사용할 때 이전 아코디언 섹션으로 돌아가게 하고 각 단계 전환 중에 데이터를 저장하는 것과 같은 다단계 동작을 설계해야 합니다.



기존 사용성 발견에 대한 확장

우리의 발견은 Luke Wroblewski가 제시한 것과 상당히 일치하는 것 같습니다. 아코디언 체크아웃은 특효약이 아니며 체크아웃의 사용성에 크게 영향을 주지 않습니다.


그러나 Luke W. 는 아코디언 스타일 양식을 인터랙션이 있는 단일 페이지로 설명합니다. 이 기사에서 논의한 바와 같이 두 리서치의 테스트 대상은 아코디언 형식에 대한 다른 개념적 이해를 나타냈습니다.

아코디언 형식은 단계적 섹션으로 인식이 되었고 브라우저의 돌아가기 버튼을 통해 이전의 아코디언 단계로 돌아가려는 다단계 행동을 나타냈습니다.


이 개념적 차이는 테스트 환경에 의해 설명될 수 있습니다. 우리가 실행한 리서치는 주제를 벗어나게 하는 산만 요소가 체크아웃 주위에 많았습니다.

Wroblewski는 주변을 산만하게 하는 요소 없이 프로토타입을 테스트하였기에 체크아웃 형식에만 집중할 수 있도록 하여 개념적인 부분을 잘 이해할 수 있는 가능성을 높였습니다.



UX DAYS SEOUL설문 조사

항상 UX DAYS SEOUL에 관심을 가져주시고 기사를 읽어 주셔서 감사합니다.
적합한 기사 제공을 위해 구독자 여러분들의 의견을 얻고자 합니다.
잠깐 시간을 내주셔서 답변해주시면 감사드리겠습니다.

예상 소요 시간 : 30초

설문조사 URL
작가의 이전글 신용 카드 필드를 시각적으로 강화하십시오
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari