해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 ux/ui 방향성...

(온라인 커머스 디자인&UI 컨퍼런스)

2014.2InnoUX CEO 최병호

[email protected], @ILOVEHCI

© 2014 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토

Table of Contents

• 제품 탐색• 쇼핑 카트• 제품 비교

• 참조 문헌

1

1. Indochino2. Aéropostale3. Gap4. Walmart5. Nike

URL: http://www.indochino.com/ (2014.1.31)


Indochino에서 배워야 하는 대상과 통찰

1. 옷을 파는 것이 아니라 분위기를 팜. 그러므로, 특정 옷이나액세서리만 파는 것이 아니라 분위기를 연출할 수 있는 모든것을 팜. 이것은 탐색과정과 판매 대상의 결정에 동일하게적용함

• 단, 분위기를 연출할 수 있는 모든 것을 선택하는 과정이 자연스러워야 하고, 구매했을 때의 멋있는 모습을 지속적으로 노출할 필요가 있음

2. 입맛이 까다로운 고객을 위해서 정교한 커스트마이징 서비스를제공함

• 단, 커스트마이징을 원하지 않는 고객을 배려할 필요가 있음• 또한, 커스트마이징 시 각 옵션의 이해를 강화하고, 옵션을 적용했을 때의 모습을

직관적으로 볼 수 있도록 지원이 필요함

URL:: http://www.aeropostale.com/ (2014.2.3)

URL:: http://www.gap.com/ (2014.2.3)

URL:: http://www.walmart.com/ (2014.2.3)

URL:: http://store.nike.com/us/en_us/ (2014.2.3)


제품 탐색의 UX/UI 방향성

1. 단품을 팔지 말고, 분위기와 스타일을 파는 탐색 과정을도입해라! 단, 도식적인 스크롤 압박(above the fold)에서벗어나 각 제품을 순차적으로 충분히 접근하고, 단계별로 구매할수 있도록 유도해라!

2. 정서 반응을 유도할 수 있는 장치(얼굴)을 탐색 전 과정에서팔아라! 즉, 기억하게 하지 말고 즉각적으로 볼 수 있도록 해라!

3. 나만의 연출이 가능한 커스트마이징을 적극적으로 팔아라! 단, 옵션의 이해력과 사용 편리함(인지부하, 시각부하, 운동부하제거)을 도모하라! 특히, 타인(또는 소셜친구)의 커스트마이징을같이 팔아라!

Shopping cart

1. Indigo2. Tsovet3. Gap4. REI5. Crate&Barrel6. Williams-Sonoma7. Sears8. Nike9. Kohl’s10. Northern Tool11. Eddie Bauer12. Victoria’s secret13. Nordstrom14. Neiman Marcus15. L.L. Bean16. Walmart17. Aéropostale18. Yoox19. Gilt20. J&R

URL: http://www.chapters.indigo.ca/home/ (2014.1.31)


Indigo에서 배워야 하는 대상과 통찰

1. 페이지 이동 없이, 항상 즉시 카트를 확인(빠른 피드백) 및접근할 수 있는 인터페이스(add to cart, mouse over cart)

• 단, 제품 개수가 4개를 초과할 경우, 직관적인 인지에 어려움이 있어 대안 모색필요(4개 이하인 경우와 4개 초과인 경우의 인터페이스 차이점 식별 어려움)

2. 카트에 제품을 넣은 후, 곧바로 유관 제품 3개를 추천하는인터페이스(Others Who Looked At These Items Also Looked At)

3. 비회원도 쇼핑하는데 어려움이 전혀 없음

URL: http://www.tsovet.com/ (2014.2.1)

URL:: http://www.gap.com/ (2014.2.3)

URL: http://www.gap.com/ (2014.2.3)

URL: http://www.rei.com/ (2014.2.4)


Tsovet, REI, Gap에서 배워야 하는 대상과 통찰


• 단, Tsovet과 Gap은 제품 개수가 3개를 초과할 경우, 직관적인 인지에 어려움이있어 대안 모색 필요(3개 이하인 경우와 3개 초과인 경우의 인터페이스 차이점식별 어려움). 그러나 REI는 1개씩 보여주는 방식을 취하고 있어 제품 개수의제약을 둘 필요가 없음. 그렇지만 유사한 또는 동일한 제품을 추가했을 경우비교하기가 힘든 단점이 있음

• 카트의 위치는 어느 곳이 최적일까? 페이지 하단인가? 페이지 오른쪽 상단인가? 제품 탐색을 방해하지만 않는다면 위치보다는 피드백 프로세스가 더욱 중요함

• 카트 내역 확인 시 총 금액을 제시해야 하는가? 카트 페이지로 이동하지 않고즉시 확인하려는 대상은 구매할 대상과 금액임. 그러므로 구매할 대상만 제시하는것보다 금액을 제시하는 것이 필요함

URL: http://www.crateandbarrel.com/ (2014.2.1)

URL: http://www.williams-sonoma.com/ (2014.2.3)


Crate&Barrel, Williams-Sonoma에서 배워야 하는 대상과 통찰

1. 페이지 이동 없이, 항상 즉시 카트를 확인(빠른 피드백) 및 접근할 수있는 인터페이스(add to cart, mouse over cart)


• 피드백 스타일은 쇼핑카트 위치에서의 팝업과 쇼핑카트 위치와 무관한 레이어 팝업 중어떤 것이 최적일까? 쇼핑카트 위치 정보를 식별할 수 있는 팝업 창이 행동 유도에유리함

2. 카트에 제품을 넣은 후, 곧바로 유관 제품 4개를 추천하는인터페이스(Customers Also Viewed)

• 단, 유관 제품이라고 보기에는 다소 동떨어진 제품을 추천하는 것은 신뢰성을저하시킬 위험성이 있음

• 추천 제품 개수는 몇 개가 최적일까? 한 번에 볼 수 있는 제품 개수는 less is more이며, 여러 번 나누어 볼 수 있도록 하는 것이 바람직함

URL: http://www.sears.com/ (2014.2.2)

URL: http://store.nike.com/us/en_us/ (2014.2.4)

URL: http://www.kohls.com/ (2014.2.4)


Sears 및 Nike, Kohl’s에서 배워야 하는 대상과 통찰



• 쇼핑카트에 접근할 때 한 페이지 내에서 페이지 스크롤과 관계 없이 접근하는것과 그렇지 않은 것 중에 어떤 것이 최적인가? 통상 한 페이지 내 정보량이 많기때문에 과도한 스크롤로 쇼핑카트에 접근하는 것은 바람직하지 않음

• 쇼핑카트 내역 확인 도중 필요가 없다고 판단할 경우 즉시 제거하는 기능이필요할까? 복잡성을 과도하게 증가시키는 상황이 아니고, 복잡한 가치 판단을요구하는 가능성이 적다면 쇼핑카트 페이지로 이동하는 불편함을 제공하는것보다 제거 기능을 추가하는 것이 필요함. 단, 실수로 제거했을 경우 복구할 수있는 장치가 필요함. 예를 들면, undo나 recently viewed 등임

URL: http://www.northerntool.com/ (2014.2.2)


Northern Tool에서 배워야 하는 대상과 통찰

1. 쇼핑카드에 추가하면 즉시 피드백을 제공하는 인터페이스(add to cart, move to cart)

• 단, 추가한 전체 쇼핑카트 내역을 확인하려면 쇼핑카트 페이지로 이동해야 하는불편함이 있음. 결제 외 내역과 금액만 간략하게 살펴보는 목적이라면, 페이지이동 없이 즉시 확인할 수 있도록 해야 함

2. 카트에 제품을 넣은 후, 곧바로 유관 제품을 추천하는인터페이스(Top Accessories)

• 단, 구매 제품에 한정하여 추천하는 것보다 구매자 소비 취향을 추천하는 것이구매 전환율에 긍정적인 영향을 미침

URL: http://www.eddiebauer.com/ (2014.2.2)

URL: http://www.victoriassecret.com/ (2014.2.2)


Eddie Bauer와 Victoria’s Secret에서 배워야 하는 대상과 통찰

1. 쇼핑카드에 추가하면 즉시 피드백을 제공하는 인터페이스(add to bag, go to my shopping bag)

• Eddie Bauer: 피드백 팝업 창에서 쇼핑카트에 추가한 제품을 즉시 제거 또는옵션을 조정할 수 있도록 배려함

• Eddie Bauer: 피드백 팝업 창에서 유사 카테고리로 쇼핑을 계속할 수 있도록내비게이션을 제공함(Buy anther, Back to: All Boys)

2. 카트에 제품을 넣은 후, 곧바로 유관 제품을 추천하는인터페이스

• Eddie Bauer: You may also like, Victoria’s Secret: Just for you• Eddie Bauer: 팝업창 하단에 추천, Victoria’s Secret: 팝업창 오른쪽에 추천. 제품

추천의 최적의 위치는? 시선 흐름은 팝업창 하단이 좋으나 많은 정보량 처리와 시선 흐름을 유도하는데 원활하다면 오른쪽도 검토할 가치가 있음

URL: http://shop.nordstrom.com/ (2014.2.2)

URL: http://www.neimanmarcus.com/ (2014.2.3)

URL: http://www.llbean.com/ (2014.2.4)

URL: http://www.walmart.com/ (2014.2.3)

URL: http://www.aeropostale.com/ (2014.2.3)

URL: http://www.yoox.com/ (2014.2.3)


Nordstrom, Neiman Marcus, L.L. Bean, Walmart, Aéropostale, Yoox에서 배워야 하는 대상과 통찰

1. 쇼핑카드에 추가하면 즉시 피드백을 제공하는 인터페이스(add to shopping bag, mouse over shopping bag)

• Nordstrom: 피드백 팝업 창에서 쇼핑카트에 추가한 제품을 즉시 제거할 수 있음• Nordstrom, Neiman Marcus, L.L. Bean, Walmart: 피드백 팝업 창에서 추가한

전 제품 내역을 확인할 수 있음• 단, 전 제품을 확인하는 최적의 방법은 무엇인가? 현재 보는 페이지에서 여러 번

스크롤을 해야만 볼 수 있다면 정보 파악에 어려움을 제공할 위험성이 있음. Walmart 방식보다 Nordstrom 방식처럼, 한 페이지 내에서 접근할 수 있는방안이 정보 파악 및 총체적인 이해를 지원하고, 심리적인 불편함을 축소할 수있음

• 단, 쇼핑카트에 담을 제품을 한정시키는 것이 최적의 방법인가? 한 페이지 내에서추가한 전 제품 내역을 확인할 수 있는 장점이 있지만 소비자의 욕구를 제약하는단점이 있음. 이런 경우, 소비자의 욕구를 통제하지 않는 것이 필요함

URL: http://www.gilt.com/ (2014.2.4)


Gilt에서 배워야 하는 대상과 통찰

1. 쇼핑카트에 포함된 제품 내역을 쉽게 이해할 수 있도록 구성함

• 단, 제품 예약 한정 시간 제도는 구매 동기 유발의 가능성으로 충분하지만소비자가 쇼핑카트 팝업창만 주시하는 것이 아니므로, 효용가치가 미흡함. 대안으로 전 페이지에서 제품 예약 한정 시간이 카운팅되는 모습을 주목도 높게제시할 필요가 있음

• 또한, 한정 시간이 지난 경우에는 손쉽게 유효한 한정 시간을 확보할 수 있도록지원이 필요함

2. 쇼핑카트에 추가할 제품 개수를 5개 이하로 한정함

• 인터페이스 이슈 때문에 소비자의 욕구를 통제하는 것은 선후가 바뀐 형국임. 제품 개수를 제약할 것이 아니라 소비자의 욕구에 따라 인터페이스를 탄력적으로구성할 수 있도록 설계할 필요가 있음

• 제품 개수를 5개로 한정하였음에도 불구하고 불필요하게 스크롤을 유발시켜태스크를 방해하는 것은 재고해야 함

URL: http://www.jr.com/ (2014.2.4)


J&R에서 배워야 하는 대상과 통찰

1. 쇼핑카드에 추가하면 즉시 피드백을 제공하는 인터페이스(add to cat)

• 피드백 팝업 창에서 쇼핑카트에 추가한 제품을 즉시 제거할 수 있음• 피드백 팝업 창에 쇼핑카트(In your cart)를 포함함. 즉 쇼핑카트에 추가한 전

제품 내역을 확인할 수 있음

2. 카트에 제품을 넣은 후, 곧바로 유관 제품을 추천하는인터페이스

• 최근에 열람한 제품 목록(Recently viewed product history)을 제공함. 단, 최근에 열람한 제품이 없다면 제시하지 않고 있음. 이것보다 열람 유무와 관계없이 유관 제품을 추천하는 것이 필요함


쇼핑카트의 UX/UI 방향성

1. 카트에 추가한 행위를 하면, 즉각적으로 결과를 피드백해라! 단, 카트에 포함할 개수는제약하지 마라!

2. 카트에 포함한 전 제품을 페이지 이동 없이 (마우스 오버하면) 볼 수 있도록 해라! 필요하면창의 크기는 충분히 확보하고, 주목도를 높일 수 있도록 레이어 팝업 창을 활용해라! 단, 열람이 용이하도록 사용성과 감성을 충분히 고려해라! 불필요한 기억을 유도하지 말아라!

3. 카트에 포함된 제품의 속성 편집 및 제거가 가능하도록 하고, 전체 금액을 확인할 수 있도록해라! 편집/제거 시 별도의 레이어 팝업 창을 활용하여 단계별로 접근하여 현 태스크에만주목할 수 있도록 배려해라! 단, 실수 시 undo나 recently viewed의 보완 기능이 필요함

4. 피드백 창과 쇼핑카트 아이콘의 위치를 매칭시켜라! 단, 카트 아이콘의 위치는 중요하지않으나 다른 구성요소와의 식별성인 가시성을 고려해야 함

5. 피드백 창에는 관심사를 계속해서 탐색할 수 있도록 유도할 수 있는 유관 제품을 제공해라! 이때 관심사에 시선이 자동으로 이동할 수 있도록 동선설계를 합리적으로 해야 함. 단 제품개수보다 제품의 식별성이 더욱 중요함

6. 비회원의 쇼핑에 제약을 없애라! 또한 제품 예약 한정 시간 제도는 연구할 가치가 있음

1. Lowe’s2. Northern Tool3. L.L. Bean4. REI5. Home Depot

URL: http://www.lowes.com/ (2014.2.2)


Lowe’s에서 배워야 하는 대상과 통찰

1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치

• 제품 비교 체크 박스 마우스 오버 시 도움말 지원(안내, 4개 초과 시 경고)• 제품 비교 체크 박스 선택 시 ‘제품 비교 현황 영역’ 자동 생성 및 해당 영역으로

이동하는 과정 제공. 단, 해당 영역의 식별성이 미흡하고, 해당 영역으로 이동하는과정이 미약함

2. 제품 비교 인터페이스: 제품 비교를 직관적으로 할 수 있는 페이지구성

• 제품 간 구분을 명료하게 할 수 있도록 구성• 제품 제거 기능 제공 및 관련 도움말 제공. 단, REMOVE, REMOVE ALL의 버튼 위치

미흡함• 상세 제품 비교 정보 확인 시 기본 정보를 유지한 상태에서 접근할 수 있도록 구성• 언제든지 쇼핑카트 버튼에 접근할 수 있도록 구성

URL: http://www.northerntool.com/ (2014.2.2)


Northern Tool에서 배워야 하는 대상과 통찰


• 제품 비교 체크 박스 마우스 오버 시 도움말 지원(안내, 5개 초과 시 경고)• 제품 비교 체크 박스 선택 시 즉시 비교할 제품을 확인 및 비교할 수 있음. 단,

‘제품 비교 체크 박스’에 마우스 오버를 하지 않으면 ‘compare’ 버튼을 볼 수 없어제공이 필요함

2. 제품 비교 인터페이스: 제품 비교를 직관적으로 하기에 부족한페이지 구성으로 Lowe’s 방식 도입 필요

• 제품 간 구분을 명료하게 하기 어려움• 제품 제거 기능 관련 도움말을 제공하지 않음• 상세 제품 비교 정보 확인 시 기본 정보를 유지하지 않은 상태에서 페이지

하단으로 스크롤을 내리기 때문에 정보 접근성이 미흡함• 쇼핑카트 버튼에 접근하는 것이 미흡함

URL: http://www.llbean.com/ (2014.2.4)


L.L. Bean에서 배워야 하는 대상과 통찰


• ‘Add to compare’ 버튼 선택 시 4개 초과하면 경고• 제품 비교 버튼 선택 시 즉시 비교할 제품을 확인 및 비교할 수 있음• ‘Add to compare’ 버튼을 누르면 즉시 버튼명이 ‘remove’로 변경되어 상태

변화를 직관적으로 제시함

2. 제품 비교 인터페이스: 제품 비교를 직관적으로 하기에 부족한페이지 구성으로 Lowe’s 방식 도입 필요

• 팝업창으로 구성되어 많은 정보량을 제공하는 공간 제약이 있음• 제품 간 구분을 명료하게 인식하는 것이 미약함• 제품 제거 기능 찾기 어려움• 상세 제품 비교 정보 확인 시 기본 정보를 유지하지 않은 상태에서 페이지

하단으로 스크롤을 내리기 때문에 정보 접근성이 미흡함

URL: http://www.rei.com/ (2014.2.4)


REI에서 배워야 하는 대상과 통찰


• ‘Compare’ 버튼 선택 시 4개 초과하면 경고• 제품 비교 버튼 선택 시 즉시 비교할 제품을 확인 및 비교할 수 있음• L.L. Bean는 ‘Add to compare’ 버튼을 누르면 즉시 버튼명이 ‘remove’로 변경되어

상태 변화를 직관적으로 제시하였으나 REI는 버튼명은 그대로인 상태에서 약간의form만 변경함. 즉, 상태 변화를 직관적으로 인지하기 어렵기 때문에 remove 기능을수행할 수 있다는 단서를 찾기 힘들며, 학습을 하였다고 하여도 활용률이 저조할위험성이 상존함

2. 제품 비교 인터페이스: 제품 비교를 직관적으로 하기에 부족한 페이지구성으로 Lowe’s 방식 도입 필요

• 제품 제거 기능 찾기 어려움• 정보 간 간격이 조밀하여 정보 식별성이 떨어짐• 상세 제품 비교 정보 확인 시 기본 정보를 유지한 상태에서 접근할 수 있도록 구성

URL: http://www.homedepot.com/ (2014.2.2)


Home Depot에서 배워야 하는 대상과 통찰


• 제품 2개 이상 선택 시 ‘select to compare’ 체크박스 레이블이 ‘compare now’로자동 변경되고, 동시에 ‘compare’ 버튼이 활성화됨. 단, compare 버튼의 활성화정도가 미약하여 좀 더 강화활 필요가 있음

• 제품 4개 선택 시 최대 개수 선택 상황을 알리고, 제품 비교를 유도하는 레이어팝업창 제공함. 단, 4개 초과 시 안내 메시지 alter box을 제시하나 유도성이 약함. 이를 개선하기 위해서는 선택한 제품을 한 곳에서 보고 가치 판단할 수 있어야 함

2. 제품 비교 인터페이스: 제품 비교를 비교적 직관적으로 접근노력

• 제품 간 구분을 명료하게 하기 위해 grid 레이아웃 활용• 쉽게 제품 간 차이점을 식별할 수 있도록 ‘highlight differences’ 기능 제공. 단,

여전히 정보량이 많아서 개선이 필요함. 예를 들면, 핵심적인 정보를 간추려서분산된 정보를 한 곳에 볼 수 있도록 재구성하는 것임


제품 비교의 UX/UI 방향성

1. 제품 비교를 손쉽게 할 수 있도록 지원 장치를 제공해라!

• 제품을 선택했다는 상태 변화를 명확히 알 수 있도록 해라! 예) 체크박스보다버튼 추천

• 불필요하게 기억을 요구하지 않는 인터페이스를 도입해라! 예) Add to compare에서 remove로 변화되는 방향 권고, 선택한 제품을 직관적으로 알 수있고, 식별이 가능하도록 제공 필요

• 제품 비교를 할 수 있는 한계에 도달할 때 적극적으로 안내를 하고, 비교로유도해라!

2. 제품 비교

• 제품 간 구분을 명료하게 제공해라!• 제품 제거 기능(Remove, Remove all)과 쇼핑카트 버튼의 접근을 스크롤 없이

즉각적으로 수행할 수 있도록 하고, 관련 도움말을 제공해라!• 상세 제품 비교 정보 시(스크롤을 내려도) 기본 정보를 유지한 상태에서 정보

확인이 가능하도록 하고, highlight differences 기능을 활용해라!

참조 문헌


참조 문헌

• A Little Journey Through (Small And Big) E-Commerce Websites By Shavaughn Haack (December 18th, 2013) http://www.smashingmagazine.com/2013/12/18/e-commerce-websites-showcase/

• Top 100 E-Commerce Checkouts http://baymard.com/checkout-usability/benchmark/top-100

경청해주셔서고맙습니다!

해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 ux/ui 방향성...

Design