Your SlideShare is downloading. ×
온라인 쇼핑몰의 41개 UX가이드 (4회 UX Camp Seoul)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

온라인 쇼핑몰의 41개 UX가이드 (4회 UX Camp Seoul)

1,414
views

Published on

온라인 쇼핑몰의 41개 UX가이드 (4회 UX Camp Seoul) …

온라인 쇼핑몰의 41개 UX가이드 (4회 UX Camp Seoul)

탐색 UX 가이드
검색 UX 가이드
제품 비교 분석/상세 페이지 UX 가이드

Published in: Design

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,414
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 온라인 쇼핑몰의41개 UX 가이드 (4회 UX Camp Seoul) 2012.7.14 InnoUX CEO 최병호 InnoUX@InnoUX.com, @ILOVEHCI
  • 2. Table of Contents• 탐색 UX 가이드• 검색 UX 가이드• 제품 비교 분석/상세 페이지 UX 가이드온라인 쇼핑몰의 41개 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. 경청해주셔서 고맙습니다!