사례 연구를 통한 온라인 커머스 ux/ui 방향성 검토

2014.11

성균관대학교 일반대학원 휴먼ICT융합학과 교수 (산학협력중점)/ HEDcentric UX미래융합전략연구소 연구소장

최병호/ [email protected]

Research Data: http://www.slideshare.net/BillyChoi/Twitter/Facebook: ILOVEHCI

휴먼ICT융합 blog: http://humanictconvergence.blogspot.kr/UX미래융합전략연구소 blog: http://blog.naver.com/soularchitec

© 2014 최병호 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. 입맛이 까다로운 고객을 위해서 정교한 커스트마이징 서비스를 제공함

• 단, 커스트마이징을 원하지 않는 고객을 배려할 필요가 있음• 또한, 커스트마이징 시 각 옵션 간 직관적인 변별력을 강화하고, 옵션을 적용했을 때의

모습을 직관적으로 볼 수 있도록 지원이 필요함• Previous와 next 버튼의 명료한 구분을 강화할 필요가 있음


Indochino에서 배워야 하는 대상과 통찰(계속)

3. 행위 후 피드백은 팝업창이 아니라 embedded message!

• 쇼핑카트에 성공적으로 추가했다는 피드백을 팝업 창이 아니라 페이지 내 최상단영역의 메시지로 제공함

• 단, Undo 기능을 제공하여 사용자의 실수를 지원해야 함

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

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://www.walmart.com/ (2014.10.23)

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

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


제품 탐색의 UX/UI 방향성

1. 단품을 팔지 말고, 총체적인 Look(경험)을 팔아라!

• 구매 태스크의 효율과 효과(“빠르고 정확하게 비교”)를 팔지 말고, 구매 결과의 짜릿한상상(“과정”)이 가능한 스토리를 팔아라!

2. Best one보다 Only one(커스터마이징)과 Many one(관계 가치)의가치를 팔아라!

• 단, 사용 편리함(인지부하, 시각부하, 운동부하 제거)을 도모하라! 특히, 옵션의 이해력과 옵션 간 직관적 식별에 주의해야 함

• 또한, 페이지 내와 페이지 간의 자연스러운 사용 흐름을 팔아라!• 부가적으로, 타인(또는 소셜친구)의 커스트마이징을 같이 팔아라!

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.chapters.indigo.ca/home/ (2014.10.23)

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

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

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

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

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

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


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

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

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

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

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


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

2. 논리보다 관습을 추구하는 인터페이스 필요

• Tsovet는 쇼핑카트에서 제거할 때 ‘0’를 선택하도록 하고 있음. 이러한논리성보다 remove 등의 직관적이고 관례적인 관습을 적용하는 것이 타당함. 부가적으로 remove 시 confirm box보다 ‘행위 후 취소’ 프로세스 즉, 삭제 후undo 선택이 가능한 인터페이스 제공이 필요함

• Tsovet는 쇼핑카트에서 제품 개수를 선택할 때 아이콘 선택은 비관례적인 상황을연출하고 있음. 이러한 결과, 선택 시 불필요한 선택의 어려움(운동 부하)를제공함

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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://shop.nordstrom.com/ (2014.11.5)

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

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

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

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

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

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)


쇼핑카트의 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의 버튼 위치

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


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


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

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

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

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

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


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


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

변화를 직관적으로 제시함

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

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

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


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

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

사례 연구를 통한 온라인 커머스 ux/ui 방향성 검토

Design