구매 전환율 향상을 위한 온라인 쇼핑몰 ux 가이드

구매 전환율 향상을 위한 온라인 쇼핑몰 ux 가이드

구매 전환율 향상을 위한 온라인 쇼핑몰 ux 가이드 from Billy Choi

구매 전환율 향상을 위한 온라인 쇼핑몰 ux 가이드

1. 구매 전홖율 향상을 위한 온라인 쇼핑몰41개 UX 가이드 (온라인 쇼핑몰 성공 전략 컨퍼런스 2012) 2012.7.6 InnoUX CEO 최병호 InnoUX@InnoUX.com, @ILOVEHCI

2. Table of Contents• 탐색 UX 가이드• 검색 UX 가이드• 제품 비교 분석/상세 페이지 UX 가이드구매 전환율 향상을 위한 온라인 쇼핑몰 UX 가이드 1 © 2012 InnoUX & Innodesign All rights reserved.

3. 탐색 UX 가이드

4. 온라인 쇼핑의 행동 패턴라이언 일병 구하기 두리번 두리번시간, 효과, 효율 재미 검색, 카테고리 할인, 발견

5. 1. 라이언 일병 구하기, 두리번두리번 쇼핑 스타일 지원2. 쇼핑의 시작점 명료화; 검색/카테고리, 할인/발견(단, 표준 해상도 내 스크롤 내리기 전)3. 자원의 선택과 집중; 모든 것을 강조하면 모든 것이 안보인다!

6. 안목이생기셨습니까?

7. 분류? 식별? 링크? 구분? 링크?구분?

8. 허용?

9. 클릭?귀싞? 허탈?

10. 피곤? 한번에!

11. ???

12. 노트북≠맥북?토막?

13. I? II?조잡? Navi?

14. 단서?오우!

15. 클릭? 마우스 오버! 메뉴 1개?

16. 강조? 타이틀 ? 링크? 강조?

17. 토막?암호?

18. ???

19. ???마우스오버 금지?

20. 마우스 오버! 설명! 공갂 허용! 미적 감각!

21. 클릭?관계?

22. 토막?토막? 광고?

23. 식별?구별? 광고?

24. 좁다? 분류? 토막?

25. 클릭?연계?

26. 말줄임표? 스크롤 ?

27. 4. 사용자 중심의 분류체계와 분류명; 멘탈 모델링5. 직관적 그룹핑 및 정보 간 명료한 구분6. 링크와 링크 없는 타이틀의 구별 그리고 일관성

28. 7. Z-depth 카테고리 지원8. Z-depth 카테고리 영역과 다른 영역 간 정확한 구분9. Z-depth 카테고리 영역을 벗어나는 행태 지원

29. 10. Z-depth 카테고리 영역을 스크롤 없이 열람할 수있도록 카테고리 사이즈 최적화11. Z-depth 카테고리 영역 내 단계별 이동 표시제공(navigation) 및 오인할 수 있는 불필요한 강조 지양12. 링크 방식의 일관성(마우스 오버와 클릭) 및 링크단서 제공

30. 13. 데이터가 없으면 불필요한 카테고리 제공지양, 메뉴가 1개이면 단계별 접근 지양14. 과도한 카테고리 및 복잡한 인터페이스 지양15. 카테고리와 무관한 광고 지양, 주요 과업 방해 금지

31. 16. Z-카테고리 영역 내 필요 시 설명 제공17. Z-카테고리 영역 내 필요 시 적정한 이미지 및최소화된 그러나 정보와 구별되는 가치 있는 광고 제공18. Z-카테고리 영역 내 정보와 광고의 유관성 제공

32. 19. Z-카테고리 영역 열람은 클릭보다 마우스 오버20. Z-카테고리 메뉴명을 말줄임표로 일부 생략 지양

33. 검색 UX 가이드

34. 오호! ???

35. 없다?

36. 있다?

37. 있긴 있다?

38. 평범?

39. 있다?!

40. 있다?!

41. 2012년 6월 싞제품!

42. ???

43. 없다?

44. 다 튄다?

45. 현대카드로?

46. 따로따로 ?

47. 삼성노트북 ? 없다?

48. 3M?

49. 안 보여?

50. 없다?

51. 있다?

52. 어디?

53. 눌러?

54. 없어?

55. 있어?

56. 있어?

57. 있어?

58. 없어?

59. 있어?

60. 2012년 6월 싞제품!

61. NewestVersion?

62. 와우!

63. 와우!!!

64. 있나???

65. 2011? 있나???2012?사기?

66. 와우!!!

67. 와우!!!

68. 있나?

69. 있나?

70. 없나?

71. 없나?

72. 있나?

73. 없나?

74. 없나?

75. 있나?

76. 없나?

77. 21. 검색어 입력 시 추천검색어와 추천상품 제공. 단적합한 추천 필요22. 추천검색어와 추천상품 정보 영역을 이원화시키지말고 단일한 영역으로 제공 필요23. 추천상품 제공 시 불필요한 정보 지양

78. 24. 검색어 입력 시 탭 방식으로 정보를 열람할 수 있는인터페이스 방식 지양25. 검색결과 화면에서 스크롤 내리지 않는 상태에서상품 제시. 단 최근 출시 정보 제공 필요26. 상품 정보 시 정보의 처음에 홍보성 글 지양, 가치판별 정보 제공 필요 (예) 최근 출시일, 중요한 키워드

79. 27. 검색 결과 화면에서 검색어와 상품만 주목할 수있도록 디자인의 선택과 집중 필요28. 검색 결과 화면에서 상품이미지와 상품정보의상이함은 지양29. 유사한 상품이 있을 경우, 명료하게 구별할 수 있는단서 제공 필요

80. 제품 비교 분석/상세 페이지UX 가이드

81. 비교?

82. ???

83. Retina!

84. 귀싞?!

85. 비교? 계산에 로그인?

86. 깨져?

87. 비교?

88. 닫아?

89. 상품비교는?

90. 상품비교는?

91. 비교창어디서?

92. 제거다시 하려면?클릭?

93. 깨져?

94. 창 닫고 아까 봤던상품이??

95. 이거아닌데?

96. Back 버튼 누르면 홈으로?

97. 없고? 비교?

98. 상품비교? 빈 공갂?

99. 왜?

100. 왜이제와서 ?

101. 헉잘못선택 ?

102. 뭐눌러야비교?

103. 이건 이거다른 비교?상품?

104. 바로삭제?

105. 귀싞?

106. 심플?차이?

107. 여러 개 선택! 볼수 없다?

108. 사이트의 가격 비교! 스크롤?

109. 30. 상품 간 비교 분석할 수 있는 툴 제공31. 비교 분석할 수 있도록 직관적인 상품 선택 및 비교분석 버튼 제공32. 선택된 상품과 선택되지 않은 상품 간 차이 제공;선택했던 상품과 선택하지 않았던 상품 간 차이 제공

110. 33. 새롭게 추가한 비교할 상품과 기존에 선택한 상품 간차이 제공34. 상품 선택의 제약 조건을 선택 후 제공하지 말고, 그이전에 제공(가시성 필요); 제약 조건의 최적화 필요35. 비교할 상품이 다수인 경우, 근접해서 비교할 수있도록 상품의 배치 조정 가능 필요

111. 36. 선택한 상품을 실수로 삭제할 때 언제든지복구(undo) 가능37. 상품 비교 선택 시 상품 정보 간 비교 제공 필요38. 로그인/회원가입을 하지 않아도 상품 비교 분석 가능

112. 39. 상세 페이지에서 깨지는 이미지 지양40. 상품 비교 시 사이트들의 가격 비교까지 지원 권장41. Back 버튼 선택 시 언제든지 원래 페이지로 이동지원 필요

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