해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토

3,239 views

Published on

해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토

* 제품 탐색

Indochino
Aéropostale
Gap
Walmart
Nike

* Shopping cart

Indigo
Tsovet
Gap
REI
Crate&Barrel
Williams-Sonoma
Sears
Nike
Kohl’s
Northern Tool
Eddie Bauer
Victoria’s secret
Nordstrom
Neiman Marcus
L.L. Bean
Walmart
Aéropostale
Yoox
Gilt
J&R

* 제품 비교

Lowe’s
Northern Tool
L.L. Bean
REI
Home Depot

Published in: Design

해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토

  1. 1. (온라인 커머스 디자인&UI 컨퍼런스) 2014.2 InnoUX CEO 최병호 InnoUX@InnoUX.com, @ILOVEHCI
  2. 2. Table of Contents • • • 제품 탐색 쇼핑 카트 제품 비교 • 참조 문헌 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 1 © 2014 InnoUX & Innodesign All rights reserved.
  3. 3. 1. 2. 3. 4. 5. Indochino Aéropostale Gap Walmart Nike
  4. 4. URL: http://www.indochino.com/ (2014.1.31)
  5. 5. URL: http://www.indochino.com/ (2014.1.31)
  6. 6. URL: http://www.indochino.com/ (2014.1.31)
  7. 7. URL: http://www.indochino.com/ (2014.1.31)
  8. 8. URL: http://www.indochino.com/ (2014.1.31)
  9. 9. URL: http://www.indochino.com/ (2014.1.31)
  10. 10. URL: http://www.indochino.com/ (2014.1.31)
  11. 11. URL: http://www.indochino.com/ (2014.1.31)
  12. 12. URL: http://www.indochino.com/ (2014.1.31)
  13. 13. URL: http://www.indochino.com/ (2014.1.31)
  14. 14. URL: http://www.indochino.com/ (2014.1.31)
  15. 15. URL: http://www.indochino.com/ (2014.1.31)
  16. 16. URL: http://www.indochino.com/ (2014.1.31)
  17. 17. URL: http://www.indochino.com/ (2014.1.31)
  18. 18. URL: http://www.indochino.com/ (2014.1.31)
  19. 19. URL: http://www.indochino.com/ (2014.1.31)
  20. 20. URL: http://www.indochino.com/ (2014.1.31)
  21. 21. URL: http://www.indochino.com/ (2014.1.31)
  22. 22. URL: http://www.indochino.com/ (2014.1.31)
  23. 23. URL: http://www.indochino.com/ (2014.1.31)
  24. 24. URL: http://www.indochino.com/ (2014.1.31)
  25. 25. URL: http://www.indochino.com/ (2014.1.31)
  26. 26. URL: http://www.indochino.com/ (2014.1.31)
  27. 27. Indochino에서 배워야 하는 대상과 통찰 1. 옷을 파는 것이 아니라 분위기를 팜. 그러므로, 특정 옷이나 액세서리만 파는 것이 아니라 분위기를 연출할 수 있는 모든 것을 팜. 이것은 탐색과정과 판매 대상의 결정에 동일하게 적용함 • 단, 분위기를 연출할 수 있는 모든 것을 선택하는 과정이 자연스러워야 하고, 구매 했을 때의 멋있는 모습을 지속적으로 노출할 필요가 있음 2. 입맛이 까다로운 고객을 위해서 정교한 커스트마이징 서비스를 제공함 • • 단, 커스트마이징을 원하지 않는 고객을 배려할 필요가 있음 또한, 커스트마이징 시 각 옵션의 이해를 강화하고, 옵션을 적용했을 때의 모습을 직관적으로 볼 수 있도록 지원이 필요함 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  28. 28. URL:: http://www.aeropostale.com/ (2014.2.3)
  29. 29. URL:: http://www.aeropostale.com/ (2014.2.3)
  30. 30. URL:: http://www.aeropostale.com/ (2014.2.3)
  31. 31. URL:: http://www.aeropostale.com/ (2014.2.3)
  32. 32. URL:: http://www.aeropostale.com/ (2014.2.3)
  33. 33. URL:: http://www.aeropostale.com/ (2014.2.3)
  34. 34. URL:: http://www.aeropostale.com/ (2014.2.3)
  35. 35. URL:: http://www.aeropostale.com/ (2014.2.3)
  36. 36. URL:: http://www.gap.com/ (2014.2.3)
  37. 37. URL:: http://www.gap.com/ (2014.2.3)
  38. 38. URL:: http://www.gap.com/ (2014.2.3)
  39. 39. URL:: http://www.gap.com/ (2014.2.3)
  40. 40. URL:: http://www.walmart.com/ (2014.2.3)
  41. 41. URL:: http://www.walmart.com/ (2014.2.3)
  42. 42. URL:: http://www.walmart.com/ (2014.2.3)
  43. 43. URL:: http://www.walmart.com/ (2014.2.3)
  44. 44. URL:: http://www.walmart.com/ (2014.2.3)
  45. 45. URL:: http://www.walmart.com/ (2014.2.3)
  46. 46. URL:: http://www.walmart.com/ (2014.2.3)
  47. 47. URL:: http://www.walmart.com/ (2014.2.3)
  48. 48. URL:: http://www.walmart.com/ (2014.2.3)
  49. 49. URL:: http://www.walmart.com/ (2014.2.3)
  50. 50. URL:: http://www.walmart.com/ (2014.2.3)
  51. 51. URL:: http://www.walmart.com/ (2014.2.3)
  52. 52. URL:: http://www.walmart.com/ (2014.2.3)
  53. 53. URL:: http://www.walmart.com/ (2014.2.3)
  54. 54. URL:: http://store.nike.com/us/en_us/ (2014.2.3)
  55. 55. URL:: http://store.nike.com/us/en_us/ (2014.2.3)
  56. 56. URL:: http://store.nike.com/us/en_us/ (2014.2.3)
  57. 57. URL:: http://store.nike.com/us/en_us/ (2014.2.3)
  58. 58. URL:: http://store.nike.com/us/en_us/ (2014.2.3)
  59. 59. URL:: http://store.nike.com/us/en_us/ (2014.2.3)
  60. 60. URL:: http://store.nike.com/us/en_us/ (2014.2.3)
  61. 61. 제품 탐색의 UX/UI 방향성 1. 단품을 팔지 말고, 분위기와 스타일을 파는 탐색 과정을 도입해라! 단, 도식적인 스크롤 압박(above the fold)에서 벗어나 각 제품을 순차적으로 충분히 접근하고, 단계별로 구매할 수 있도록 유도해라! 2. 정서 반응을 유도할 수 있는 장치(얼굴)을 탐색 전 과정에서 팔아라! 즉, 기억하게 하지 말고 즉각적으로 볼 수 있도록 해라! 3. 나만의 연출이 가능한 커스트마이징을 적극적으로 팔아라! 단, 옵션의 이해력과 사용 편리함(인지부하, 시각부하, 운동부하 제거)을 도모하라! 특히, 타인(또는 소셜친구)의 커스트마이징을 같이 팔아라! 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  62. 62. Shopping cart 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. Indigo Tsovet Gap REI Crate&Barrel Williams-Sonoma Sears Nike Kohl’s Northern Tool Eddie Bauer Victoria’s secret Nordstrom Neiman Marcus L.L. Bean Walmart Aéropostale Yoox Gilt J&R
  63. 63. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  64. 64. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  65. 65. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  66. 66. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  67. 67. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  68. 68. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  69. 69. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  70. 70. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  71. 71. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  72. 72. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  73. 73. URL: http://www.chapters.indigo.ca/home/ (2014.1.31)
  74. 74. Indigo에서 배워야 하는 대상과 통찰 1. 페이지 이동 없이, 항상 즉시 카트를 확인(빠른 피드백) 및 접근할 수 있는 인터페이스(add to cart, mouse over cart) • 단, 제품 개수가 4개를 초과할 경우, 직관적인 인지에 어려움이 있어 대안 모색 필요(4개 이하인 경우와 4개 초과인 경우의 인터페이스 차이점 식별 어려움) 2. 카트에 제품을 넣은 후, 곧바로 유관 제품 3개를 추천하는 인터페이스(Others Who Looked At These Items Also Looked At) 3. 비회원도 쇼핑하는데 어려움이 전혀 없음 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  75. 75. URL: http://www.tsovet.com/ (2014.2.1)
  76. 76. URL: http://www.tsovet.com/ (2014.2.1)
  77. 77. URL: http://www.tsovet.com/ (2014.2.1)
  78. 78. URL: http://www.tsovet.com/ (2014.2.1)
  79. 79. URL: http://www.tsovet.com/ (2014.2.1)
  80. 80. URL:: http://www.gap.com/ (2014.2.3)
  81. 81. URL: http://www.gap.com/ (2014.2.3)
  82. 82. URL: http://www.gap.com/ (2014.2.3)
  83. 83. URL: http://www.rei.com/ (2014.2.4)
  84. 84. URL: http://www.rei.com/ (2014.2.4)
  85. 85. URL: http://www.rei.com/ (2014.2.4)
  86. 86. Tsovet, REI, Gap에서 배워야 하는 대상과 통찰 1. 페이지 이동 없이, 항상 즉시 카트를 확인(빠른 피드백) 및 접근할 수 있는 인터페이스(add to cart, mouse over cart) • 단, Tsovet과 Gap은 제품 개수가 3개를 초과할 경우, 직관적인 인지에 어려움이 있어 대안 모색 필요(3개 이하인 경우와 3개 초과인 경우의 인터페이스 차이점 식별 어려움). 그러나 REI는 1개씩 보여주는 방식을 취하고 있어 제품 개수의 제약을 둘 필요가 없음. 그렇지만 유사한 또는 동일한 제품을 추가했을 경우 비교하기가 힘든 단점이 있음 • 카트의 위치는 어느 곳이 최적일까? 페이지 하단인가? 페이지 오른쪽 상단인가? 제품 탐색을 방해하지만 않는다면 위치보다는 피드백 프로세스가 더욱 중요함 • 카트 내역 확인 시 총 금액을 제시해야 하는가? 카트 페이지로 이동하지 않고 즉시 확인하려는 대상은 구매할 대상과 금액임. 그러므로 구매할 대상만 제시하는 것보다 금액을 제시하는 것이 필요함 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  87. 87. URL: http://www.crateandbarrel.com/ (2014.2.1)
  88. 88. URL: http://www.crateandbarrel.com/ (2014.2.1)
  89. 89. URL: http://www.crateandbarrel.com/ (2014.2.1)
  90. 90. URL: http://www.crateandbarrel.com/ (2014.2.1)
  91. 91. URL: http://www.crateandbarrel.com/ (2014.2.1)
  92. 92. URL: http://www.crateandbarrel.com/ (2014.2.1)
  93. 93. URL: http://www.crateandbarrel.com/ (2014.2.1)
  94. 94. URL: http://www.crateandbarrel.com/ (2014.2.1)
  95. 95. URL: http://www.crateandbarrel.com/ (2014.2.1)
  96. 96. URL: http://www.williams-sonoma.com/ (2014.2.3)
  97. 97. URL: http://www.williams-sonoma.com/ (2014.2.3)
  98. 98. URL: http://www.williams-sonoma.com/ (2014.2.3)
  99. 99. Crate&Barrel, Williams-Sonoma에서 배워야 하는 대상과 통찰 1. 페이지 이동 없이, 항상 즉시 카트를 확인(빠른 피드백) 및 접근할 수 있는 인터페이스(add to cart, mouse over cart) • • 단, 제품 개수가 4개를 초과할 경우, 직관적인 인지에 어려움이 있어 대안 모색 필요(4개 이하인 경우와 4개 초과인 경우의 인터페이스 차이점 식별 어려움) 피드백 스타일은 쇼핑카트 위치에서의 팝업과 쇼핑카트 위치와 무관한 레이어 팝업 중 어떤 것이 최적일까? 쇼핑카트 위치 정보를 식별할 수 있는 팝업 창이 행동 유도에 유리함 2. 카트에 제품을 넣은 후, 곧바로 유관 제품 4개를 추천하는 인터페이스(Customers Also Viewed) • • 단, 유관 제품이라고 보기에는 다소 동떨어진 제품을 추천하는 것은 신뢰성을 저하시킬 위험성이 있음 추천 제품 개수는 몇 개가 최적일까? 한 번에 볼 수 있는 제품 개수는 less is more이며, 여러 번 나누어 볼 수 있도록 하는 것이 바람직함 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  100. 100. URL: http://www.sears.com/ (2014.2.2)
  101. 101. URL: http://www.sears.com/ (2014.2.2)
  102. 102. URL: http://www.sears.com/ (2014.2.2)
  103. 103. URL: http://www.sears.com/ (2014.2.2)
  104. 104. URL: http://www.sears.com/ (2014.2.2)
  105. 105. URL: http://store.nike.com/us/en_us/ (2014.2.4)
  106. 106. URL: http://store.nike.com/us/en_us/ (2014.2.4)
  107. 107. URL: http://store.nike.com/us/en_us/ (2014.2.4)
  108. 108. URL: http://www.kohls.com/ (2014.2.4)
  109. 109. URL: http://www.kohls.com/ (2014.2.4)
  110. 110. URL: http://www.kohls.com/ (2014.2.4)
  111. 111. Sears 및 Nike, Kohl’s에서 배워야 하는 대상과 통찰 1. 페이지 이동 없이, 항상 즉시 카트를 확인(빠른 피드백) 및 접근할 수 있는 인터페이스(add to cart, mouse over cart) • 단, 제품 개수가 3개를 초과할 경우, 직관적인 인지에 어려움이 있어 대안 모색 필요(3개 이하인 경우와 3개 초과인 경우의 인터페이스 차이점 식별 어려움) • 쇼핑카트에 접근할 때 한 페이지 내에서 페이지 스크롤과 관계 없이 접근하는 것과 그렇지 않은 것 중에 어떤 것이 최적인가? 통상 한 페이지 내 정보량이 많기 때문에 과도한 스크롤로 쇼핑카트에 접근하는 것은 바람직하지 않음 • 쇼핑카트 내역 확인 도중 필요가 없다고 판단할 경우 즉시 제거하는 기능이 필요할까? 복잡성을 과도하게 증가시키는 상황이 아니고, 복잡한 가치 판단을 요구하는 가능성이 적다면 쇼핑카트 페이지로 이동하는 불편함을 제공하는 것보다 제거 기능을 추가하는 것이 필요함. 단, 실수로 제거했을 경우 복구할 수 있는 장치가 필요함. 예를 들면, undo나 recently viewed 등임 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  112. 112. URL: http://www.northerntool.com/ (2014.2.2)
  113. 113. URL: http://www.northerntool.com/ (2014.2.2)
  114. 114. URL: http://www.northerntool.com/ (2014.2.2)
  115. 115. URL: http://www.northerntool.com/ (2014.2.2)
  116. 116. URL: http://www.northerntool.com/ (2014.2.2)
  117. 117. URL: http://www.northerntool.com/ (2014.2.2)
  118. 118. URL: http://www.northerntool.com/ (2014.2.2)
  119. 119. URL: http://www.northerntool.com/ (2014.2.2)
  120. 120. URL: http://www.northerntool.com/ (2014.2.2)
  121. 121. URL: http://www.northerntool.com/ (2014.2.2)
  122. 122. Northern Tool에서 배워야 하는 대상과 통찰 1. 쇼핑카드에 추가하면 즉시 피드백을 제공하는 인터페이스(add to cart, move to cart) • 단, 추가한 전체 쇼핑카트 내역을 확인하려면 쇼핑카트 페이지로 이동해야 하는 불편함이 있음. 결제 외 내역과 금액만 간략하게 살펴보는 목적이라면, 페이지 이동 없이 즉시 확인할 수 있도록 해야 함 2. 카트에 제품을 넣은 후, 곧바로 유관 제품을 추천하는 인터페이스(Top Accessories) • 단, 구매 제품에 한정하여 추천하는 것보다 구매자 소비 취향을 추천하는 것이 구매 전환율에 긍정적인 영향을 미침 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  123. 123. URL: http://www.eddiebauer.com/ (2014.2.2)
  124. 124. URL: http://www.eddiebauer.com/ (2014.2.2)
  125. 125. URL: http://www.eddiebauer.com/ (2014.2.2)
  126. 126. URL: http://www.eddiebauer.com/ (2014.2.2)
  127. 127. URL: http://www.victoriassecret.com/ (2014.2.2)
  128. 128. URL: http://www.victoriassecret.com/ (2014.2.2)
  129. 129. URL: http://www.victoriassecret.com/ (2014.2.2)
  130. 130. 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: 팝업창 오른쪽에 추천. 제품 추천의 최적의 위치는? 시선 흐름은 팝업창 하단이 좋으나 많은 정보량 처리와 시 선 흐름을 유도하는데 원활하다면 오른쪽도 검토할 가치가 있음 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  131. 131. URL: http://shop.nordstrom.com/ (2014.2.2)
  132. 132. URL: http://shop.nordstrom.com/ (2014.2.2)
  133. 133. URL: http://shop.nordstrom.com/ (2014.2.2)
  134. 134. URL: http://www.neimanmarcus.com/ (2014.2.3)
  135. 135. URL: http://www.neimanmarcus.com/ (2014.2.3)
  136. 136. URL: http://www.llbean.com/ (2014.2.4)
  137. 137. URL: http://www.llbean.com/ (2014.2.4)
  138. 138. URL: http://www.llbean.com/ (2014.2.4)
  139. 139. URL: http://www.llbean.com/ (2014.2.4)
  140. 140. URL: http://www.walmart.com/ (2014.2.3)
  141. 141. URL: http://www.walmart.com/ (2014.2.3)
  142. 142. URL: http://www.walmart.com/ (2014.2.3)
  143. 143. URL: http://www.walmart.com/ (2014.2.3)
  144. 144. URL: http://www.aeropostale.com/ (2014.2.3)
  145. 145. URL: http://www.aeropostale.com/ (2014.2.3)
  146. 146. URL: http://www.aeropostale.com/ (2014.2.3)
  147. 147. URL: http://www.aeropostale.com/ (2014.2.3)
  148. 148. URL: http://www.aeropostale.com/ (2014.2.3)
  149. 149. URL: http://www.yoox.com/ (2014.2.3)
  150. 150. URL: http://www.yoox.com/ (2014.2.3)
  151. 151. 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 방식처럼, 한 페이지 내에서 접근할 수 있는 방안이 정보 파악 및 총체적인 이해를 지원하고, 심리적인 불편함을 축소할 수 있음 단, 쇼핑카트에 담을 제품을 한정시키는 것이 최적의 방법인가? 한 페이지 내에서 추가한 전 제품 내역을 확인할 수 있는 장점이 있지만 소비자의 욕구를 제약하는 단점이 있음. 이런 경우, 소비자의 욕구를 통제하지 않는 것이 필요함 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  152. 152. URL: http://www.gilt.com/ (2014.2.4)
  153. 153. URL: http://www.gilt.com/ (2014.2.4)
  154. 154. URL: http://www.gilt.com/ (2014.2.4)
  155. 155. URL: http://www.gilt.com/ (2014.2.4)
  156. 156. URL: http://www.gilt.com/ (2014.2.4)
  157. 157. Gilt에서 배워야 하는 대상과 통찰 1. 쇼핑카트에 포함된 제품 내역을 쉽게 이해할 수 있도록 구성함 • • 단, 제품 예약 한정 시간 제도는 구매 동기 유발의 가능성으로 충분하지만 소비자가 쇼핑카트 팝업창만 주시하는 것이 아니므로, 효용가치가 미흡함. 대안으로 전 페이지에서 제품 예약 한정 시간이 카운팅되는 모습을 주목도 높게 제시할 필요가 있음 또한, 한정 시간이 지난 경우에는 손쉽게 유효한 한정 시간을 확보할 수 있도록 지원이 필요함 2. 쇼핑카트에 추가할 제품 개수를 5개 이하로 한정함 • • 인터페이스 이슈 때문에 소비자의 욕구를 통제하는 것은 선후가 바뀐 형국임. 제품 개수를 제약할 것이 아니라 소비자의 욕구에 따라 인터페이스를 탄력적으로 구성할 수 있도록 설계할 필요가 있음 제품 개수를 5개로 한정하였음에도 불구하고 불필요하게 스크롤을 유발시켜 태스크를 방해하는 것은 재고해야 함 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  158. 158. URL: http://www.jr.com/ (2014.2.4)
  159. 159. URL: http://www.jr.com/ (2014.2.4)
  160. 160. J&R에서 배워야 하는 대상과 통찰 1. 쇼핑카드에 추가하면 즉시 피드백을 제공하는 인터페이스(add to cat) • • 피드백 팝업 창에서 쇼핑카트에 추가한 제품을 즉시 제거할 수 있음 피드백 팝업 창에 쇼핑카트(In your cart)를 포함함. 즉 쇼핑카트에 추가한 전 제품 내역을 확인할 수 있음 2. 카트에 제품을 넣은 후, 곧바로 유관 제품을 추천하는 인터페이스 • 최근에 열람한 제품 목록(Recently viewed product history)을 제공함. 단, 최근에 열람한 제품이 없다면 제시하지 않고 있음. 이것보다 열람 유무와 관계 없이 유관 제품을 추천하는 것이 필요함 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  161. 161. 쇼핑카트의 UX/UI 방향성 1. 카트에 추가한 행위를 하면, 즉각적으로 결과를 피드백해라! 단, 카트에 포함할 개수는 제약하지 마라! 2. 카트에 포함한 전 제품을 페이지 이동 없이 (마우스 오버하면) 볼 수 있도록 해라! 필요하면 창의 크기는 충분히 확보하고, 주목도를 높일 수 있도록 레이어 팝업 창을 활용해라! 단, 열람이 용이하도록 사용성과 감성을 충분히 고려해라! 불필요한 기억을 유도하지 말아라! 3. 카트에 포함된 제품의 속성 편집 및 제거가 가능하도록 하고, 전체 금액을 확인할 수 있도록 해라! 편집/제거 시 별도의 레이어 팝업 창을 활용하여 단계별로 접근하여 현 태스크에만 주목할 수 있도록 배려해라! 단, 실수 시 undo나 recently viewed의 보완 기능이 필요함 4. 피드백 창과 쇼핑카트 아이콘의 위치를 매칭시켜라! 단, 카트 아이콘의 위치는 중요하지 않으나 다른 구성요소와의 식별성인 가시성을 고려해야 함 5. 피드백 창에는 관심사를 계속해서 탐색할 수 있도록 유도할 수 있는 유관 제품을 제공해라! 이때 관심사에 시선이 자동으로 이동할 수 있도록 동선설계를 합리적으로 해야 함. 단 제품 개수보다 제품의 식별성이 더욱 중요함 6. 비회원의 쇼핑에 제약을 없애라! 또한 제품 예약 한정 시간 제도는 연구할 가치가 있음 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  162. 162. 1. 2. 3. 4. 5. Lowe’s Northern Tool L.L. Bean REI Home Depot
  163. 163. URL: http://www.lowes.com/ (2014.2.2)
  164. 164. URL: http://www.lowes.com/ (2014.2.2)
  165. 165. URL: http://www.lowes.com/ (2014.2.2)
  166. 166. URL: http://www.lowes.com/ (2014.2.2)
  167. 167. URL: http://www.lowes.com/ (2014.2.2)
  168. 168. URL: http://www.lowes.com/ (2014.2.2)
  169. 169. Lowe’s에서 배워야 하는 대상과 통찰 1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치 • • 제품 비교 체크 박스 마우스 오버 시 도움말 지원(안내, 4개 초과 시 경고) 제품 비교 체크 박스 선택 시 ‘제품 비교 현황 영역’ 자동 생성 및 해당 영역으로 이동하는 과정 제공. 단, 해당 영역의 식별성이 미흡하고, 해당 영역으로 이동하는 과정이 미약함 2. 제품 비교 인터페이스: 제품 비교를 직관적으로 할 수 있는 페이지 구성 • • • • 제품 간 구분을 명료하게 할 수 있도록 구성 제품 제거 기능 제공 및 관련 도움말 제공. 단, REMOVE, REMOVE ALL의 버튼 위치 미흡함 상세 제품 비교 정보 확인 시 기본 정보를 유지한 상태에서 접근할 수 있도록 구성 언제든지 쇼핑카트 버튼에 접근할 수 있도록 구성 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  170. 170. URL: http://www.northerntool.com/ (2014.2.2)
  171. 171. URL: http://www.northerntool.com/ (2014.2.2)
  172. 172. URL: http://www.northerntool.com/ (2014.2.2)
  173. 173. URL: http://www.northerntool.com/ (2014.2.2)
  174. 174. URL: http://www.northerntool.com/ (2014.2.2)
  175. 175. URL: http://www.northerntool.com/ (2014.2.2)
  176. 176. URL: http://www.northerntool.com/ (2014.2.2)
  177. 177. Northern Tool에서 배워야 하는 대상과 통찰 1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치 • • 제품 비교 체크 박스 마우스 오버 시 도움말 지원(안내, 5개 초과 시 경고) 제품 비교 체크 박스 선택 시 즉시 비교할 제품을 확인 및 비교할 수 있음. 단, ‘제품 비교 체크 박스’에 마우스 오버를 하지 않으면 ‘compare’ 버튼을 볼 수 없어 제공이 필요함 2. 제품 비교 인터페이스: 제품 비교를 직관적으로 하기에 부족한 페이지 구성으로 Lowe’s 방식 도입 필요 • • • • 제품 간 구분을 명료하게 하기 어려움 제품 제거 기능 관련 도움말을 제공하지 않음 상세 제품 비교 정보 확인 시 기본 정보를 유지하지 않은 상태에서 페이지 하단으로 스크롤을 내리기 때문에 정보 접근성이 미흡함 쇼핑카트 버튼에 접근하는 것이 미흡함 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  178. 178. URL: http://www.llbean.com/ (2014.2.4)
  179. 179. URL: http://www.llbean.com/ (2014.2.4)
  180. 180. URL: http://www.llbean.com/ (2014.2.4)
  181. 181. URL: http://www.llbean.com/ (2014.2.4)
  182. 182. URL: http://www.llbean.com/ (2014.2.4)
  183. 183. URL: http://www.llbean.com/ (2014.2.4)
  184. 184. URL: http://www.llbean.com/ (2014.2.4)
  185. 185. L.L. Bean에서 배워야 하는 대상과 통찰 1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치 • • • ‘Add to compare’ 버튼 선택 시 4개 초과하면 경고 제품 비교 버튼 선택 시 즉시 비교할 제품을 확인 및 비교할 수 있음 ‘Add to compare’ 버튼을 누르면 즉시 버튼명이 ‘remove’로 변경되어 상태 변화를 직관적으로 제시함 2. 제품 비교 인터페이스: 제품 비교를 직관적으로 하기에 부족한 페이지 구성으로 Lowe’s 방식 도입 필요 • • • • 팝업창으로 구성되어 많은 정보량을 제공하는 공간 제약이 있음 제품 간 구분을 명료하게 인식하는 것이 미약함 제품 제거 기능 찾기 어려움 상세 제품 비교 정보 확인 시 기본 정보를 유지하지 않은 상태에서 페이지 하단으로 스크롤을 내리기 때문에 정보 접근성이 미흡함 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  186. 186. URL: http://www.rei.com/ (2014.2.4)
  187. 187. URL: http://www.rei.com/ (2014.2.4)
  188. 188. URL: http://www.rei.com/ (2014.2.4)
  189. 189. URL: http://www.rei.com/ (2014.2.4)
  190. 190. URL: http://www.rei.com/ (2014.2.4)
  191. 191. URL: http://www.rei.com/ (2014.2.4)
  192. 192. REI에서 배워야 하는 대상과 통찰 1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치 • • • ‘Compare’ 버튼 선택 시 4개 초과하면 경고 제품 비교 버튼 선택 시 즉시 비교할 제품을 확인 및 비교할 수 있음 L.L. Bean는 ‘Add to compare’ 버튼을 누르면 즉시 버튼명이 ‘remove’로 변경되어 상태 변화를 직관적으로 제시하였으나 REI는 버튼명은 그대로인 상태에서 약간의 form만 변경함. 즉, 상태 변화를 직관적으로 인지하기 어렵기 때문에 remove 기능을 수행할 수 있다는 단서를 찾기 힘들며, 학습을 하였다고 하여도 활용률이 저조할 위험성이 상존함 2. 제품 비교 인터페이스: 제품 비교를 직관적으로 하기에 부족한 페이지 구성으로 Lowe’s 방식 도입 필요 • • • 제품 제거 기능 찾기 어려움 정보 간 간격이 조밀하여 정보 식별성이 떨어짐 상세 제품 비교 정보 확인 시 기본 정보를 유지한 상태에서 접근할 수 있도록 구성 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  193. 193. URL: http://www.homedepot.com/ (2014.2.2)
  194. 194. URL: http://www.homedepot.com/ (2014.2.2)
  195. 195. URL: http://www.homedepot.com/ (2014.2.2)
  196. 196. URL: http://www.homedepot.com/ (2014.2.2)
  197. 197. URL: http://www.homedepot.com/ (2014.2.2)
  198. 198. URL: http://www.homedepot.com/ (2014.2.2)
  199. 199. URL: http://www.homedepot.com/ (2014.2.2)
  200. 200. URL: http://www.homedepot.com/ (2014.2.2)
  201. 201. Home Depot에서 배워야 하는 대상과 통찰 1. 제품 선택 인터페이스: 제품 비교를 손쉽게 할 수 있는 지원 장치 • • 제품 2개 이상 선택 시 ‘select to compare’ 체크박스 레이블이 ‘compare now’로 자동 변경되고, 동시에 ‘compare’ 버튼이 활성화됨. 단, compare 버튼의 활성화 정도가 미약하여 좀 더 강화활 필요가 있음 제품 4개 선택 시 최대 개수 선택 상황을 알리고, 제품 비교를 유도하는 레이어 팝업창 제공함. 단, 4개 초과 시 안내 메시지 alter box을 제시하나 유도성이 약함. 이를 개선하기 위해서는 선택한 제품을 한 곳에서 보고 가치 판단할 수 있어야 함 2. 제품 비교 인터페이스: 제품 비교를 비교적 직관적으로 접근 노력 • • 제품 간 구분을 명료하게 하기 위해 grid 레이아웃 활용 쉽게 제품 간 차이점을 식별할 수 있도록 ‘highlight differences’ 기능 제공. 단, 여전히 정보량이 많아서 개선이 필요함. 예를 들면, 핵심적인 정보를 간추려서 분산된 정보를 한 곳에 볼 수 있도록 재구성하는 것임 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  202. 202. 제품 비교의 UX/UI 방향성 1. 제품 비교를 손쉽게 할 수 있도록 지원 장치를 제공해라! • • • 제품을 선택했다는 상태 변화를 명확히 알 수 있도록 해라! 예) 체크박스보다 버튼 추천 불필요하게 기억을 요구하지 않는 인터페이스를 도입해라! 예) Add to compare에서 remove로 변화되는 방향 권고, 선택한 제품을 직관적으로 알 수 있고, 식별이 가능하도록 제공 필요 제품 비교를 할 수 있는 한계에 도달할 때 적극적으로 안내를 하고, 비교로 유도해라! 2. 제품 비교 • • • 제품 간 구분을 명료하게 제공해라! 제품 제거 기능(Remove, Remove all)과 쇼핑카트 버튼의 접근을 스크롤 없이 즉각적으로 수행할 수 있도록 하고, 관련 도움말을 제공해라! 상세 제품 비교 정보 시(스크롤을 내려도) 기본 정보를 유지한 상태에서 정보 확인이 가능하도록 하고, highlight differences 기능을 활용해라! 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  203. 203. 참조 문헌
  204. 204. 참조 문헌 • 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 방향성 검토 © 2014 InnoUX & Innodesign All rights reserved.
  205. 205. 경청해주셔서 고맙습니다!

×