Page 1
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
Page 2
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Table of Contents
• 제품 탐색• 쇼핑 카트• 제품 비교
• 참조 문헌
1
Page 3
1. Indochino2. Aéropostale3. Gap4. Walmart5. Nike
Page 6
URL: http://www.indochino.com/ (2014.1.31)
Page 7
URL: http://www.indochino.com/ (2014.1.31)
Page 8
URL: http://www.indochino.com/ (2014.1.31)
Page 9
URL: http://www.indochino.com/ (2014.1.31)
Page 10
URL: http://www.indochino.com/ (2014.1.31)
Page 11
URL: http://www.indochino.com/ (2014.1.31)
Page 12
URL: http://www.indochino.com/ (2014.1.31)
Page 13
URL: http://www.indochino.com/ (2014.1.31)
Page 14
URL: http://www.indochino.com/ (2014.1.31)
Page 15
URL: http://www.indochino.com/ (2014.1.31)
Page 16
URL: http://www.indochino.com/ (2014.1.31)
Page 17
URL: http://www.indochino.com/ (2014.1.31)
Page 18
URL: http://www.indochino.com/ (2014.1.31)
Page 19
URL: http://www.indochino.com/ (2014.1.31)
Page 20
URL: http://www.indochino.com/ (2014.1.31)
Page 21
URL: http://www.indochino.com/ (2014.1.31)
Page 22
URL: http://www.indochino.com/ (2014.1.31)
Page 23
URL: http://www.indochino.com/ (2014.1.31)
Page 24
URL: http://www.indochino.com/ (2014.1.31)
Page 25
URL: http://www.indochino.com/ (2014.1.31)
Page 26
URL: http://www.indochino.com/ (2014.1.31)
Page 27
URL: http://www.indochino.com/ (2014.1.31)
Page 28
URL: http://www.indochino.com/ (2014.1.31)
Page 29
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Indochino에서 배워야 하는 대상과 통찰
1. 옷을 파는 것이 아니라 분위기를 팜. 그러므로, 특정 옷이나액세서리만 파는 것이 아니라 분위기를 연출할 수 있는 모든 것을 팜
• 단, 분위기를 연출할 수 있는 모든 것을 선택하는 과정이 최적화된 태스크 수행과정이아니라 스토리텔링 방식으로 구조화하여 자연스러운 설득이 가능하도록 할 필요가 있음. 특히 구매했을 때의 멋있는 모습을 상상할 수 있는 지속가능한 단서의 제공은 중요함
• 부가적으로, 한 페이지 내에서 스크롤을 내릴 때마다 새로운 스토리텔링의 제공으로예상치 못한 경험을 제공하여 ‘스크롤’ 횟수와 기대치가 정비례하는 관계를 형성할 필요가 있음
2. 입맛이 까다로운 고객을 위해서 정교한 커스트마이징 서비스를 제공함
• 단, 커스트마이징을 원하지 않는 고객을 배려할 필요가 있음• 또한, 커스트마이징 시 각 옵션 간 직관적인 변별력을 강화하고, 옵션을 적용했을 때의
모습을 직관적으로 볼 수 있도록 지원이 필요함• Previous와 next 버튼의 명료한 구분을 강화할 필요가 있음
Page 30
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Indochino에서 배워야 하는 대상과 통찰(계속)
3. 행위 후 피드백은 팝업창이 아니라 embedded message!
• 쇼핑카트에 성공적으로 추가했다는 피드백을 팝업 창이 아니라 페이지 내 최상단영역의 메시지로 제공함
• 단, Undo 기능을 제공하여 사용자의 실수를 지원해야 함
Page 32
URL: http://www.indochino.com/ (2014.10.22)
Page 33
URL: http://www.indochino.com/ (2014.10.22)
Page 34
URL: http://www.indochino.com/ (2014.10.22)
Page 35
URL: http://www.indochino.com/ (2014.10.22)
Page 36
URL: http://www.indochino.com/ (2014.10.22)
Page 37
URL: http://www.indochino.com/ (2014.10.22)
Page 38
URL: http://www.indochino.com/ (2014.10.22)
Page 39
URL: http://www.indochino.com/ (2014.10.22)
Page 40
URL: http://www.indochino.com/ (2014.10.22)
Page 41
URL: http://www.indochino.com/ (2014.10.22)
Page 42
URL: http://www.indochino.com/ (2014.10.22)
Page 43
URL: http://www.indochino.com/ (2014.10.22)
Page 45
URL:: http://www.aeropostale.com/ (2014.2.3)
Page 46
URL:: http://www.aeropostale.com/ (2014.2.3)
Page 47
URL:: http://www.aeropostale.com/ (2014.2.3)
Page 48
URL:: http://www.aeropostale.com/ (2014.2.3)
Page 49
URL:: http://www.aeropostale.com/ (2014.2.3)
Page 50
URL:: http://www.aeropostale.com/ (2014.2.3)
Page 51
URL:: http://www.aeropostale.com/ (2014.2.3)
Page 52
URL:: http://www.aeropostale.com/ (2014.2.3)
Page 54
URL:: http://www.gap.com/ (2014.2.3)
Page 55
URL:: http://www.gap.com/ (2014.2.3)
Page 56
URL:: http://www.gap.com/ (2014.2.3)
Page 57
URL:: http://www.gap.com/ (2014.2.3)
Page 60
URL:: http://www.walmart.com/ (2014.2.3)
Page 61
URL:: http://www.walmart.com/ (2014.2.3)
Page 62
URL:: http://www.walmart.com/ (2014.2.3)
Page 63
URL:: http://www.walmart.com/ (2014.2.3)
Page 64
URL:: http://www.walmart.com/ (2014.2.3)
Page 65
URL:: http://www.walmart.com/ (2014.2.3)
Page 66
URL:: http://www.walmart.com/ (2014.2.3)
Page 67
URL:: http://www.walmart.com/ (2014.2.3)
Page 68
URL:: http://www.walmart.com/ (2014.2.3)
Page 69
URL:: http://www.walmart.com/ (2014.2.3)
Page 70
URL:: http://www.walmart.com/ (2014.2.3)
Page 71
URL:: http://www.walmart.com/ (2014.2.3)
Page 72
URL:: http://www.walmart.com/ (2014.2.3)
Page 73
URL:: http://www.walmart.com/ (2014.2.3)
Page 75
URL:: http://www.walmart.com/ (2014.10.23)
Page 76
URL:: http://www.walmart.com/ (2014.10.23)
Page 79
URL:: http://store.nike.com/us/en_us/ (2014.2.3)
Page 80
URL:: http://store.nike.com/us/en_us/ (2014.2.3)
Page 81
URL:: http://store.nike.com/us/en_us/ (2014.2.3)
Page 82
URL:: http://store.nike.com/us/en_us/ (2014.2.3)
Page 83
URL:: http://store.nike.com/us/en_us/ (2014.2.3)
Page 84
URL:: http://store.nike.com/us/en_us/ (2014.2.3)
Page 85
URL:: http://store.nike.com/us/en_us/ (2014.2.3)
Page 87
URL:: http://store.nike.com/us/en_us/ (2014.10.23)
Page 88
URL:: http://store.nike.com/us/en_us/ (2014.10.23)
Page 89
URL:: http://store.nike.com/us/en_us/ (2014.10.23)
Page 91
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
제품 탐색의 UX/UI 방향성
1. 단품을 팔지 말고, 총체적인 Look(경험)을 팔아라!
• 구매 태스크의 효율과 효과(“빠르고 정확하게 비교”)를 팔지 말고, 구매 결과의 짜릿한상상(“과정”)이 가능한 스토리를 팔아라!
2. Best one보다 Only one(커스터마이징)과 Many one(관계 가치)의가치를 팔아라!
• 단, 사용 편리함(인지부하, 시각부하, 운동부하 제거)을 도모하라! 특히, 옵션의 이해력과 옵션 간 직관적 식별에 주의해야 함
• 또한, 페이지 내와 페이지 간의 자연스러운 사용 흐름을 팔아라!• 부가적으로, 타인(또는 소셜친구)의 커스트마이징을 같이 팔아라!
3. 정서 반응을 유도할 수 있는 장치(얼굴)을 탐색 전 과정에서 팔아라!
Page 92
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
Page 95
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 96
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 97
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 98
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 99
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 100
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 101
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 102
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 103
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 104
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 105
URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
Page 106
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Indigo에서 배워야 하는 대상과 통찰
1. 페이지 이동 없이, 항상 즉시 카트를 확인(빠른 피드백) 및접근할 수 있는 인터페이스(add to cart, mouse over cart)
• 단, 제품 개수가 4개를 초과할 경우, 직관적인 인지에 어려움이 있어 대안 모색필요(4개 이하인 경우와 4개 초과인 경우의 인터페이스 차이점 식별 어려움)
2. 카트에 제품을 넣은 후, 곧바로 유관 제품 3개를 추천하는인터페이스(Others Who Looked At These Items Also Looked At)
3. 비회원도 쇼핑하는데 어려움이 전혀 없음
Page 108
URL: http://www.chapters.indigo.ca/home/ (2014.10.23)
Page 109
URL: http://www.chapters.indigo.ca/home/ (2014.10.23)
Page 110
URL: http://www.chapters.indigo.ca/home/ (2014.10.23)
Page 111
URL: http://www.chapters.indigo.ca/home/ (2014.10.23)
Page 114
URL: http://www.tsovet.com/ (2014.2.1)
Page 115
URL: http://www.tsovet.com/ (2014.2.1)
Page 116
URL: http://www.tsovet.com/ (2014.2.1)
Page 117
URL: http://www.tsovet.com/ (2014.2.1)
Page 118
URL: http://www.tsovet.com/ (2014.2.1)
Page 120
URL: http://www.tsovet.com/ (2014.10.23)
Page 121
URL: http://www.tsovet.com/ (2014.10.23)
Page 122
URL: http://www.tsovet.com/ (2014.10.23)
Page 123
URL: http://www.tsovet.com/ (2014.10.23)
Page 124
URL: http://www.tsovet.com/ (2014.10.23)
Page 127
URL:: http://www.gap.com/ (2014.2.3)
Page 128
URL: http://www.gap.com/ (2014.2.3)
Page 129
URL: http://www.gap.com/ (2014.2.3)
Page 131
URL: http://www.gap.com/ (2014.10.23)
Page 132
URL: http://www.gap.com/ (2014.10.23)
Page 133
URL: http://www.gap.com/ (2014.10.23)
Page 136
URL: http://www.rei.com/ (2014.2.4)
Page 137
URL: http://www.rei.com/ (2014.2.4)
Page 138
URL: http://www.rei.com/ (2014.2.4)
Page 140
URL: http://www.rei.com/ (2014.10.23)
Page 141
URL: http://www.rei.com/ (2014.10.23)
Page 142
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Tsovet, REI, Gap에서 배워야 하는 대상과 통찰
1. 페이지 이동 없이, 항상 즉시 카트를 확인(빠른 피드백) 및접근할 수 있는 인터페이스(add to cart, mouse over cart)
• 단, Tsovet과 Gap은 제품 개수가 3개를 초과할 경우, 직관적인 인지에 어려움이있어 대안 모색 필요(3개 이하인 경우와 3개 초과인 경우의 인터페이스 차이점식별 어려움). 그러나 REI는 1개씩 보여주는 방식을 취하고 있어 제품 개수의제약을 둘 필요가 없음. 그렇지만 유사한 또는 동일한 제품을 추가했을 경우비교하기가 힘든 단점이 있음. 또한 불필요한 인지부하 발생 가능성이 있음
• 카트의 위치는 어느 곳이 최적일까? 페이지 하단인가? 페이지 오른쪽 상단인가? 제품 탐색을 방해하지만 않는다면 위치보다는 피드백 프로세스가 더욱 중요함
• 카트 내역 확인 시 총 금액을 제시해야 하는가? 카트 페이지로 이동하지 않고즉시 확인하려는 대상은 구매할 대상과 금액임. 그러므로 구매할 대상만 제시하는것보다 금액을 제시하는 것이 필요함
Page 143
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Tsovet, REI, Gap에서 배워야 하는 대상과 통찰(계속)
2. 논리보다 관습을 추구하는 인터페이스 필요
• Tsovet는 쇼핑카트에서 제거할 때 ‘0’를 선택하도록 하고 있음. 이러한논리성보다 remove 등의 직관적이고 관례적인 관습을 적용하는 것이 타당함. 부가적으로 remove 시 confirm box보다 ‘행위 후 취소’ 프로세스 즉, 삭제 후undo 선택이 가능한 인터페이스 제공이 필요함
• Tsovet는 쇼핑카트에서 제품 개수를 선택할 때 아이콘 선택은 비관례적인 상황을연출하고 있음. 이러한 결과, 선택 시 불필요한 선택의 어려움(운동 부하)를제공함
Page 146
URL: http://www.crateandbarrel.com/ (2014.2.1)
Page 147
URL: http://www.crateandbarrel.com/ (2014.2.1)
Page 148
URL: http://www.crateandbarrel.com/ (2014.2.1)
Page 149
URL: http://www.crateandbarrel.com/ (2014.2.1)
Page 150
URL: http://www.crateandbarrel.com/ (2014.2.1)
Page 151
URL: http://www.crateandbarrel.com/ (2014.2.1)
Page 152
URL: http://www.crateandbarrel.com/ (2014.2.1)
Page 153
URL: http://www.crateandbarrel.com/ (2014.2.1)
Page 154
URL: http://www.crateandbarrel.com/ (2014.2.1)
Page 156
URL: http://www.crateandbarrel.com/ (2014.10.23)
Page 157
URL: http://www.crateandbarrel.com/ (2014.10.23)
Page 160
URL: http://www.williams-sonoma.com/ (2014.2.3)
Page 161
URL: http://www.williams-sonoma.com/ (2014.2.3)
Page 162
URL: http://www.williams-sonoma.com/ (2014.2.3)
Page 164
URL: http://www.williams-sonoma.com/ (2014.10.23)
Page 165
URL: http://www.williams-sonoma.com/ (2014.10.23)
Page 166
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Crate&Barrel, Williams-Sonoma에서 배워야 하는 대상과 통찰
1. 피드백 스타일은 쇼핑카트 위치에서의 팝업과 쇼핑카트 위치와무관한 레이어 팝업 중 어떤 것이 최적일까? 쇼핑카트 위치정보를 식별할 수 있는 팝업 창이 행동 유도에 유리함
2. 카트에 제품을 넣은 후, 곧바로 유관 제품 4개를 추천하는인터페이스(Customers Also Viewed)
• 단, 유관 제품이라고 보기에는 다소 동떨어진 제품을 추천하는 것은 신뢰성을저하시킬 위험성이 있음
• 추천 제품 개수는 몇 개가 최적일까? 한 번에 볼 수 있는 제품 개수는 less is more이며, 여러 번 나누어 볼 수 있도록 하는 것이 바람직함
Page 169
URL: http://www.sears.com/ (2014.2.2)
Page 170
URL: http://www.sears.com/ (2014.2.2)
Page 171
URL: http://www.sears.com/ (2014.2.2)
Page 172
URL: http://www.sears.com/ (2014.2.2)
Page 173
URL: http://www.sears.com/ (2014.2.2)
Page 175
URL: http://www.sears.com/ (2014.10.23)
Page 176
URL: http://www.sears.com/ (2014.10.23)
Page 178
URL: http://store.nike.com/us/en_us/ (2014.2.4)
Page 179
URL: http://store.nike.com/us/en_us/ (2014.2.4)
Page 180
URL: http://store.nike.com/us/en_us/ (2014.2.4)
Page 183
URL: http://www.kohls.com/ (2014.2.4)
Page 184
URL: http://www.kohls.com/ (2014.2.4)
Page 185
URL: http://www.kohls.com/ (2014.2.4)
Page 187
URL: http://www.kohls.com/ (2014.10.23)
Page 188
URL: http://www.kohls.com/ (2014.10.23)
Page 189
URL: http://www.kohls.com/ (2014.10.23)
Page 190
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Sears 및 Nike, Kohl’s에서 배워야 하는 대상과 통찰
1. 단, 제품 개수가 3개를 초과할 경우, 직관적인 인지에 어려움이있어 대안 모색 필요(3개 이하인 경우와 3개 초과인 경우의인터페이스 차이점 식별 어려움)
2. 쇼핑카트 내역 확인 도중 필요가 없다고 판단할 경우 즉시제거하는 기능이 필요할까? 복잡성을 과도하게 증가시키는상황이 아니고, 복잡한 가치 판단을 요구하는 가능성이 적다면쇼핑카트 페이지로 이동하는 불편함을 제공하는 것보다 제거기능을 추가하는 것이 필요함. 단, 실수로 제거했을 경우 복구할수 있는 장치가 필요함. 예를 들면, undo나 recently viewed 등임
Page 193
URL: http://www.northerntool.com/ (2014.2.2)
Page 194
URL: http://www.northerntool.com/ (2014.2.2)
Page 195
URL: http://www.northerntool.com/ (2014.2.2)
Page 196
URL: http://www.northerntool.com/ (2014.2.2)
Page 197
URL: http://www.northerntool.com/ (2014.2.2)
Page 198
URL: http://www.northerntool.com/ (2014.2.2)
Page 199
URL: http://www.northerntool.com/ (2014.2.2)
Page 200
URL: http://www.northerntool.com/ (2014.2.2)
Page 201
URL: http://www.northerntool.com/ (2014.2.2)
Page 202
URL: http://www.northerntool.com/ (2014.2.2)
Page 204
URL: http://www.northerntool.com/ (2014.10.23)
Page 207
URL: http://www.eddiebauer.com/ (2014.2.2)
Page 208
URL: http://www.eddiebauer.com/ (2014.2.2)
Page 209
URL: http://www.eddiebauer.com/ (2014.2.2)
Page 210
URL: http://www.eddiebauer.com/ (2014.2.2)
Page 212
URL: http://www.eddiebauer.com/ (2014.10.23)
Page 215
URL: http://www.victoriassecret.com/ (2014.2.2)
Page 216
URL: http://www.victoriassecret.com/ (2014.2.2)
Page 217
URL: http://www.victoriassecret.com/ (2014.2.2)
Page 219
URL: http://www.victoriassecret.com/ (2014.10.23)
Page 220
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
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: 팝업창 오른쪽에 추천. 제품
추천의 최적의 위치는? 시선 흐름은 팝업창 하단이 좋으나 많은 정보량 처리와 시선 흐름을 유도하는데 원활하다면 오른쪽도 검토할 가치가 있음
Page 223
URL: http://shop.nordstrom.com/ (2014.2.2)
Page 224
URL: http://shop.nordstrom.com/ (2014.2.2)
Page 225
URL: http://shop.nordstrom.com/ (2014.2.2)
Page 227
URL: http://shop.nordstrom.com/ (2014.11.5)
Page 230
URL: http://www.neimanmarcus.com/ (2014.2.3)
Page 231
URL: http://www.neimanmarcus.com/ (2014.2.3)
Page 233
URL: http://www.neimanmarcus.com/ (20111.5)
Page 234
URL: http://www.neimanmarcus.com/ (20111.5)
Page 235
URL: http://www.neimanmarcus.com/ (20111.5)
Page 238
URL: http://www.llbean.com/ (2014.2.4)
Page 239
URL: http://www.llbean.com/ (2014.2.4)
Page 240
URL: http://www.llbean.com/ (2014.2.4)
Page 241
URL: http://www.llbean.com/ (2014.2.4)
Page 243
URL: http://www.llbean.com/ (2014.11.5)
Page 244
URL: http://www.llbean.com/ (2014.11.5)
Page 245
URL: http://www.llbean.com/ (2014.11.5)
Page 246
URL: http://www.llbean.com/ (2014.11.5)
Page 247
URL: http://www.llbean.com/ (2014.11.5)
Page 248
URL: http://www.llbean.com/ (2014.11.5)
Page 251
URL: http://www.walmart.com/ (2014.2.3)
Page 252
URL: http://www.walmart.com/ (2014.2.3)
Page 253
URL: http://www.walmart.com/ (2014.2.3)
Page 254
URL: http://www.walmart.com/ (2014.2.3)
Page 256
URL: http://www.walmart.com/ (2014.11.5)
Page 258
URL: http://www.aeropostale.com/ (2014.2.3)
Page 259
URL: http://www.aeropostale.com/ (2014.2.3)
Page 260
URL: http://www.aeropostale.com/ (2014.2.3)
Page 261
URL: http://www.aeropostale.com/ (2014.2.3)
Page 262
URL: http://www.aeropostale.com/ (2014.2.3)
Page 264
URL: http://www.yoox.com/ (2014.2.3)
Page 265
URL: http://www.yoox.com/ (2014.2.3)
Page 266
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
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 방식처럼, 한 페이지 내에서 접근할 수 있는방안이 정보 파악 및 총체적인 이해를 지원하고, 심리적인 불편함을 축소할 수있음
• 단, 쇼핑카트에 담을 제품을 한정시키는 것이 최적의 방법인가? 한 페이지 내에서추가한 전 제품 내역을 확인할 수 있는 장점이 있지만 소비자의 욕구를 제약하는단점이 있음. 이런 경우, 소비자의 욕구를 통제하지 않는 것이 필요함
Page 268
URL: http://www.gilt.com/ (2014.2.4)
Page 269
URL: http://www.gilt.com/ (2014.2.4)
Page 270
URL: http://www.gilt.com/ (2014.2.4)
Page 271
URL: http://www.gilt.com/ (2014.2.4)
Page 272
URL: http://www.gilt.com/ (2014.2.4)
Page 273
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Gilt에서 배워야 하는 대상과 통찰
1. 쇼핑카트에 포함된 제품 내역을 쉽게 이해할 수 있도록 구성함
• 단, 제품 예약 한정 시간 제도는 구매 동기 유발의 가능성으로 충분하지만소비자가 쇼핑카트 팝업창만 주시하는 것이 아니므로, 효용가치가 미흡함. 대안으로 전 페이지에서 제품 예약 한정 시간이 카운팅되는 모습을 주목도 높게제시할 필요가 있음
• 또한, 한정 시간이 지난 경우에는 손쉽게 유효한 한정 시간을 확보할 수 있도록지원이 필요함
2. 쇼핑카트에 추가할 제품 개수를 5개 이하로 한정함
• 인터페이스 이슈 때문에 소비자의 욕구를 통제하는 것은 선후가 바뀐 형국임. 제품 개수를 제약할 것이 아니라 소비자의 욕구에 따라 인터페이스를 탄력적으로구성할 수 있도록 설계할 필요가 있음
• 제품 개수를 5개로 한정하였음에도 불구하고 불필요하게 스크롤을 유발시켜태스크를 방해하는 것은 재고해야 함
Page 275
URL: http://www.jr.com/ (2014.2.4)
Page 276
URL: http://www.jr.com/ (2014.2.4)
Page 278
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
쇼핑카트의 UX/UI 방향성
1. 카트에 추가한 행위를 하면, 즉각적으로 결과를 피드백해라! 단, 카트에 포함할 개수는제약하지 마라!
2. 카트에 포함한 전 제품을 페이지 이동 없이 (마우스 오버하면) 볼 수 있도록 해라! 필요하면창의 크기는 충분히 확보하고, 주목도를 높일 수 있도록 레이어 팝업 창을 활용해라! 단, 열람이 용이하도록 사용성과 감성을 충분히 고려해라! 불필요한 기억을 유도하지 말아라!
3. 카트에 포함된 제품의 속성 편집 및 제거가 가능하도록 하고, 전체 금액을 확인할 수 있도록해라! 편집/제거 시 별도의 레이어 팝업 창을 활용하여 단계별로 접근하여 현 태스크에만주목할 수 있도록 배려해라! 단, 실수 시 undo나 recently viewed의 보완 기능이 필요함
4. 피드백 창과 쇼핑카트 아이콘의 위치를 매칭시켜라! 단, 카트 아이콘의 위치는 중요하지않으나 다른 구성요소와의 식별성인 가시성을 고려해야 함
5. 피드백 창에는 관심사를 계속해서 탐색할 수 있도록 유도할 수 있는 유관 제품을 제공해라! 이때 관심사에 시선이 자동으로 이동할 수 있도록 동선설계를 합리적으로 해야 함. 단 제품개수보다 제품의 식별성이 더욱 중요함
6. 비회원의 쇼핑에 제약을 없애라! 또한 제품 예약 한정 시간 제도는 연구할 가치가 있음
Page 279
1. Lowe’s2. Northern Tool3. L.L. Bean4. REI5. Home Depot
Page 281
URL: http://www.lowes.com/ (2014.2.2)
Page 282
URL: http://www.lowes.com/ (2014.2.2)
Page 283
URL: http://www.lowes.com/ (2014.2.2)
Page 284
URL: http://www.lowes.com/ (2014.2.2)
Page 285
URL: http://www.lowes.com/ (2014.2.2)
Page 286
URL: http://www.lowes.com/ (2014.2.2)
Page 287
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Lowe’s에서 배워야 하는 대상과 통찰
1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치
• 제품 비교 체크 박스 마우스 오버 시 도움말 지원(안내, 4개 초과 시 경고)• 제품 비교 체크 박스 선택 시 ‘제품 비교 현황 영역’ 자동 생성 및 해당 영역으로
이동하는 과정 제공. 단, 해당 영역의 식별성이 미흡하고, 해당 영역으로 이동하는과정이 미약함
2. 제품 비교 인터페이스: 제품 비교를 직관적으로 할 수 있는 페이지구성
• 제품 간 구분을 명료하게 할 수 있도록 구성• 제품 제거 기능 제공 및 관련 도움말 제공. 단, REMOVE, REMOVE ALL의 버튼 위치
미흡함• 상세 제품 비교 정보 확인 시 기본 정보를 유지한 상태에서 접근할 수 있도록 구성• 언제든지 쇼핑카트 버튼에 접근할 수 있도록 구성
Page 289
URL: http://www.northerntool.com/ (2014.2.2)
Page 290
URL: http://www.northerntool.com/ (2014.2.2)
Page 291
URL: http://www.northerntool.com/ (2014.2.2)
Page 292
URL: http://www.northerntool.com/ (2014.2.2)
Page 293
URL: http://www.northerntool.com/ (2014.2.2)
Page 294
URL: http://www.northerntool.com/ (2014.2.2)
Page 295
URL: http://www.northerntool.com/ (2014.2.2)
Page 296
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Northern Tool에서 배워야 하는 대상과 통찰
1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치
• 제품 비교 체크 박스 마우스 오버 시 도움말 지원(안내, 5개 초과 시 경고)• 제품 비교 체크 박스 선택 시 즉시 비교할 제품을 확인 및 비교할 수 있음. 단,
‘제품 비교 체크 박스’에 마우스 오버를 하지 않으면 ‘compare’ 버튼을 볼 수 없어제공이 필요함
2. 제품 비교 인터페이스: 제품 비교를 직관적으로 하기에 부족한페이지 구성으로 Lowe’s 방식 도입 필요
• 제품 간 구분을 명료하게 하기 어려움• 제품 제거 기능 관련 도움말을 제공하지 않음• 상세 제품 비교 정보 확인 시 기본 정보를 유지하지 않은 상태에서 페이지
하단으로 스크롤을 내리기 때문에 정보 접근성이 미흡함• 쇼핑카트 버튼에 접근하는 것이 미흡함
Page 298
URL: http://www.llbean.com/ (2014.2.4)
Page 299
URL: http://www.llbean.com/ (2014.2.4)
Page 300
URL: http://www.llbean.com/ (2014.2.4)
Page 301
URL: http://www.llbean.com/ (2014.2.4)
Page 302
URL: http://www.llbean.com/ (2014.2.4)
Page 303
URL: http://www.llbean.com/ (2014.2.4)
Page 304
URL: http://www.llbean.com/ (2014.2.4)
Page 305
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
L.L. Bean에서 배워야 하는 대상과 통찰
1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치
• ‘Add to compare’ 버튼 선택 시 4개 초과하면 경고• 제품 비교 버튼 선택 시 즉시 비교할 제품을 확인 및 비교할 수 있음• ‘Add to compare’ 버튼을 누르면 즉시 버튼명이 ‘remove’로 변경되어 상태
변화를 직관적으로 제시함
2. 제품 비교 인터페이스: 제품 비교를 직관적으로 하기에 부족한페이지 구성으로 Lowe’s 방식 도입 필요
• 팝업창으로 구성되어 많은 정보량을 제공하는 공간 제약이 있음• 제품 간 구분을 명료하게 인식하는 것이 미약함• 제품 제거 기능 찾기 어려움• 상세 제품 비교 정보 확인 시 기본 정보를 유지하지 않은 상태에서 페이지
하단으로 스크롤을 내리기 때문에 정보 접근성이 미흡함
Page 307
URL: http://www.rei.com/ (2014.2.4)
Page 308
URL: http://www.rei.com/ (2014.2.4)
Page 309
URL: http://www.rei.com/ (2014.2.4)
Page 310
URL: http://www.rei.com/ (2014.2.4)
Page 311
URL: http://www.rei.com/ (2014.2.4)
Page 312
URL: http://www.rei.com/ (2014.2.4)
Page 313
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
REI에서 배워야 하는 대상과 통찰
1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치
• ‘Compare’ 버튼 선택 시 4개 초과하면 경고• 제품 비교 버튼 선택 시 즉시 비교할 제품을 확인 및 비교할 수 있음• L.L. Bean는 ‘Add to compare’ 버튼을 누르면 즉시 버튼명이 ‘remove’로 변경되어
상태 변화를 직관적으로 제시하였으나 REI는 버튼명은 그대로인 상태에서 약간의form만 변경함. 즉, 상태 변화를 직관적으로 인지하기 어렵기 때문에 remove 기능을수행할 수 있다는 단서를 찾기 힘들며, 학습을 하였다고 하여도 활용률이 저조할위험성이 상존함
2. 제품 비교 인터페이스: 제품 비교를 직관적으로 하기에 부족한 페이지구성으로 Lowe’s 방식 도입 필요
• 제품 제거 기능 찾기 어려움• 정보 간 간격이 조밀하여 정보 식별성이 떨어짐• 상세 제품 비교 정보 확인 시 기본 정보를 유지한 상태에서 접근할 수 있도록 구성
Page 315
URL: http://www.homedepot.com/ (2014.2.2)
Page 316
URL: http://www.homedepot.com/ (2014.2.2)
Page 317
URL: http://www.homedepot.com/ (2014.2.2)
Page 318
URL: http://www.homedepot.com/ (2014.2.2)
Page 319
URL: http://www.homedepot.com/ (2014.2.2)
Page 320
URL: http://www.homedepot.com/ (2014.2.2)
Page 321
URL: http://www.homedepot.com/ (2014.2.2)
Page 322
URL: http://www.homedepot.com/ (2014.2.2)
Page 323
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Home Depot에서 배워야 하는 대상과 통찰
1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치
• 제품 2개 이상 선택 시 ‘select to compare’ 체크박스 레이블이 ‘compare now’로자동 변경되고, 동시에 ‘compare’ 버튼이 활성화됨. 단, compare 버튼의 활성화정도가 미약하여 좀 더 강화활 필요가 있음
• 제품 4개 선택 시 최대 개수 선택 상황을 알리고, 제품 비교를 유도하는 레이어팝업창 제공함. 단, 4개 초과 시 안내 메시지 alter box을 제시하나 유도성이 약함. 이를 개선하기 위해서는 선택한 제품을 한 곳에서 보고 가치 판단할 수 있어야 함
2. 제품 비교 인터페이스: 제품 비교를 비교적 직관적으로 접근노력
• 제품 간 구분을 명료하게 하기 위해 grid 레이아웃 활용• 쉽게 제품 간 차이점을 식별할 수 있도록 ‘highlight differences’ 기능 제공. 단,
여전히 정보량이 많아서 개선이 필요함. 예를 들면, 핵심적인 정보를 간추려서분산된 정보를 한 곳에 볼 수 있도록 재구성하는 것임
Page 325
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
제품 비교의 UX/UI 방향성
1. 제품 비교를 손쉽게 할 수 있도록 지원 장치를 제공해라!
• 제품을 선택했다는 상태 변화를 명확히 알 수 있도록 해라! 예) 체크박스보다버튼 추천
• 불필요하게 기억을 요구하지 않는 인터페이스를 도입해라! 예) Add to compare에서 remove로 변화되는 방향 권고, 선택한 제품을 직관적으로 알 수있고, 식별이 가능하도록 제공 필요
• 제품 비교를 할 수 있는 한계에 도달할 때 적극적으로 안내를 하고, 비교로유도해라!
2. 제품 비교
• 제품 간 구분을 명료하게 제공해라!• 제품 제거 기능(Remove, Remove all)과 쇼핑카트 버튼의 접근을 스크롤 없이
즉각적으로 수행할 수 있도록 하고, 관련 도움말을 제공해라!• 상세 제품 비교 정보 시(스크롤을 내려도) 기본 정보를 유지한 상태에서 정보
확인이 가능하도록 하고, highlight differences 기능을 활용해라!
Page 327
© 2014 최병호 All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
참조 문헌
• 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