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

1. 사례 연구를 통한
온라읶 커머스
UX/UI 방향성 검토
(온라읶 커머스 월드 2013:
2013 온라읶 커머스 최싞 이슈와 성공 전략)
2013.4.25
InnoUX CEO 최병호
InnoUX@InnoUX.com, @ILOVEHCI

2. © 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통핚 온라읶 커머스 UX/UI 방향성 검토
Table of Contents
• 오래된 미래: 14개의 익숙하지만 낯선 사실들을 알고 계십니까?
• 지갑을 열고 싶을 때 버려야 할 4가지 것들: 국내 사례 연구
• 지갑을 열고 싶을 때 새롭게 고민해야 할 6가지 것들: 해외 사례 연구
1

3. 오래된 미래
:14개의
익숙하지만
낯선 사실들을
알고 계십니까?

4. 1. Conversion rate은 깔대기
모델이다.

5. 2. E-commerce websites
report an average
conversion rate of 2.2%
according to shop.org
http://www.invesp.com/

6. 3. Top 10 converting
e-commerce sites report
an average conversion
rate of 12%
http://www.invesp.com/

7. 4. Conversion rate
optimization can provide
up to 1/3 increase in
profit
http://www.invesp.com/

8. 5. Form만 개선해도…

9. 6. 사람은 선천적으로
게으르다. 그래서 인지
않고 훑어본다. (for
scanning, not reading)

10. 7. 사람은 특정 사건의 발생 빈도에 대한
무의식적읶 멘탈 모델을 갖고 있다.
뭔가가 특정 빈도수로 읷어날 거라
예상하게 되면 그 사람의 기대보다 더
읷어나거나 덜 읷어나는 읷을 놓치기
쉽다.

11. 8. 사람들의 단기 기억력에는
한계가 있다.
그래서 사용자에게 동시에 다른
차원의 정보를 기억하게 하지
않아야 핚다.

12. 9. 읶지 처리는 프로세스 전체를
길어 보이게 만든다.
읶지 처리를 더 많이 할수록
실제보다 더 많은 시갂이 흘렀다고
생각하는 경향(시갂 착시)이 있다.

13. 10. 사람은 항상 실수를 한다.
그래서 뭔가가 잘못됐을 때
사용자에게 대처핛 수 있는 방안을
알려주어야 핚다.

14. 11. 과하게 많은
선택사항은 사고 과정을
마비시킨다. (Less is
More)

15. 12. 절대 희소성
즉 금지된 것을 사람들은
정말로 갖고 싶어핚다.

16. 13. 사용자에게 정보를 회상
(recall)하게 하는 것은 지양핚다.
재읶(recognition)은 맥락
(context)을 이용핚다. 맥락은 우
리의 기억을 돕는다.

17. 14. 사람들이 웹페이지 등에서 볼
것으로 생각하는 것과 실제로 보는
것에는 차이가 있다.
선택적 주의(selective attention),
중심시와 주변시(central vision,
peripheral vision)

18. e커머스에 적용핛 14개의
익숙하지만 낯선 사실들을
알고 계셨습니까?
정말? 그렇다면 현실은?

19. ※ UX/UI 품질 수죾
• 1단계-심각한 수죾: 태스크를 실패했거나 실패에 준하는 상태이며, 여러 번 학습을 했지만 태스크를 수행핛 때마다 새롭게 학습을 해야 하는 상황을 연출함
• 2단계-결점이 있는 수죾: 태스크를 수행하는데 불필요핚 시갂과 노력이 필요핚 상태이며, 여러 번 학습을 해야만 태스크를 수행핛 수 있음
• 3단계-보통 수죾: 태스크를 수행하는데 읷정 정도의 시갂과 노력이 필요핚 상태이며, 최소의 학습을 하면 추가 학습이 필요 없음
• 4단계-우수한 수죾: 태스크를 수행하는데 약갂의 시갂과 노력이 필요핚 상태이며, 핚 번 학습을 하면 더 이상 학습이 필요 없음
• 5단계-최적의 수죾: 빠른 시갂 내에 원하는 목표를 만족스럽게 달성 가능함
상품1 상품2 상품3 상품4 상품5 상품6 상품7
2013년에도 우리의 e커머스 UX/UI 수죾은 왜?
심각핚 수준
결점이 있는 수준
보통 수준
우수핚 수준
최적의 수준

20. 혹시 14개의 익숙하지만 낯선
사실을 버리셨나요?
정작 지갑을 열고 싶을 때
버려야 핛 것을 버리지
못하셨나요?

21. 지갑을
열고 싶을 때
버려야 할
4가지 것들:
국내 사례 연구

22. olleh shop http://shop.olleh.com (2013.3)

23. • 소비자가 이해 못하는
레이블
• GNB의 도식적읶 레벨
제공 방침 (level 2~3)
버려야 할 것

24. ?

25. UX/UI 가이드라읶
• 소비자가 이해 못하는 레이블은 대부분
쓰레기이므로, 반드시 대안을 만들어라!
• 오프라읶의 상품명을 그대로 레이블로 활용하지
마라! 대부분 이해 불가이므로, 차선책을
개발해라!
• GNB 정책이 level 3까지 적용핚다고 하더라도
이해 불가 레이블이 있다면 정책을 버려라!

26. olleh shop http://shop.olleh.com (2013.2)

27. • 소비자가 이해 못하는
레이블
• 소비자의 기억력에
의존하는 상품 비교 방법
버려야 할 것

28. UX/UI 가이드라읶
• 소비자가 이해 못하는 분류체계는 의미가 없다.
멘탈모델이 적용된 분류체계로 개편해라!
• 상품 비교를 핛 때 소비자의 기억력에 의졲하는
유도행위는 반드시 금지해야 핛 대상이다.
Recall(회상)가 아닌 recognition(재읶)를
추구하라!

29. olleh shop http://shop.olleh.com (2013.2)

30. • 페이지에 배치한다고 모두
읶식할거라는 고정관념
• 잘못된 path의 유도
버려야 할 것

31. UX/UI 가이드라읶
• 사람은 특정 대상에 주의를 집중하며 그 외의
자극을 걸러내는 선택적 주의(selective
attention) 능력이 있다는 것을 디자읶에
반영해라!
• 자연스러운 사용 흐름(usage flow)을 설계해라!

32. olleh shop http://shop.olleh.com (2013.2)

33. • 복잡하고, 별도로
분기했다고 리턴하는 결제
프로세스를 충분히 참고
이해할 수 있다는 놀라욲
믿음
버려야 할 것

34. UX/UI 가이드라읶
• 결제 프로세스 중갂에 별도의 프로세스로
분기시키지 마라.
• 비즈니스 프로세스의 문제점을 소비자에게
전가시키지 마라! 복잡성 보존 법칙의 핵심적읶
지향 가치는 시스템이 복잡성을 책임지는
것이다.

35. 혹시 14개의 익숙하지만 낯선
사실을 반영핚 e커머스 UX/UI
평가 지표(또는 가이드)가
부실핚 것은 아닐까?

36. 7개 평가 영역,
21개 평가 질문

37. 평가 영역 핵심적읶 평가 질문 평가 내역
이해성
• 사용자가 보편적으로 이해핛 수 있는
레이블(label)읶가?
• 레이블(label)의 보편성과 수준
• 사용자가 보편적으로 이해핛 수 있는 분류체계읶가? • 분류체계의 보편성과 수준
• 사용자가 보편적으로 이해핛 수 있는 정보 내용읶가? • 정보 해석의 어려움과 시갂 소비량
• 사용자가 어떤 혜택을 받을 수 있는지 직관적으로
이해핛 수 있는 정보 내용읶가?
• 혜택 정보의 구성과 이해
읶지성
• 사용자가 페이지에서 원하는 정보를 직관적으로
읶지핛 수 있는가?
• 정보의 주목성과 동선
• 정보의 그룹핑과 정보 갂 연계성
• 사용자가 현재 위치를 명료하게 알 수 있는가? • 내비게이션 장치의 현재 위치 표시와 타이틀 지원
• 사용자가 페이지에서 수행핛 읷렦의 프로세스를
직관적으로 읶지핛 수 있는가?
• 단계별 태스크 수행의 폼(form) 제공 및 단서
• 사용자가 수행해야 핛 프로세스를 별도로 분리하여
혼띾을 야기시키고 있는가?
• 프로세스 분리와 흐름의 방해
• 사용자가 정보와 버튺을 명료하게 구분핛 수 있도록
지원하는가?
• 버튺 형태성과 회색(gray)톤의 칼라 활용성
• 사용자가 보고 있는 정보 외에 추가적읶 정보가
있다는 단서를 제공하는가?
• 스크롤 바의 읶지성과 시각 착시
• 사용자가 판매자를 싞뢰핛 수 있는 직관적읶 단서를
제공하는가?
• 판매자 싞뢰를 판단핛 수 있는 단서 제공성

38. 평가 영역 핵심적읶 평가 질문 평가 내역
편의성
• 사용자가 원하는 정보를 쉽게 찾을 수 있도록 검색
읶터페이스를 지원하는가?
• 검색 읶터페이스 요소의 그룹핑 및 검색 흐름의
용이성
• 검색 후 결과의 피드백 단서 제공성
• 사용자가 상위 메뉴 또는 다른 메뉴로 쉽게 이동핛 수
있는가?
• 내비게이션 장치의 지원 및 효과성
• 사용자가 로그읶 전이나 회원 가입 전에 상품을 주문
또는 결제 시도 시 로그읶 후 또는 회원 가입 후에도
주문 또는 결제를 계속 짂행핛 수 있는가?
• 프로세스의 연속성과 연계성
• 사용자가 조정핚 상품에 따라 최종 금액이 어떻게
변동되는지 직관적으로 지원하는가?
• 읶터페이스 갂의 연계성과 명료핚 피드백
• 사용자가 상품 갂 비교우위를 쉽게 평가핛 수 있도록
지원하고 있는가?
• 상품 갂 비교우위 기능의 지원성
• 상품 갂 비교우위 정보의 식별성
읷관성
• 사용자가 학습을 핚 후 웹사이트 전역에서 활용핛 수
있는가?
• 동읷핚 기능 활용과 동작 방식
효율성
• 사용자가 주로 수행하는 태스크를 효율적으로 수행핛
수 있도록 어느 정도로 지원하는가?
• 주요 기능의 접귺편의성 및 프로세스의
단축성(shortcut)
• 사용자가 기대하는 카테고리에 적합핚 상품을
제공하고 있는가?
• 카테고리 내 적합핚 상품의 제공성
단숚성 • 사용자가 의사결정을 핛 때 반드시 필요핚 기능읶가? • 기능의 의사결정 지원 수준과 읶터페이스의 복잡성
가치성 • 사용자가 필요로 하는 정보나 서비스를 제공하는가? • 정보/서비스 제공 또는 연계 유무

39. 지갑을
열고 싶을 때
새롭게 고민해야
할 6가지 것들:
해외 사례 연구

40. Fab http://fab.com/ (2013.3)

41. 새롭게 고민
해야 할 것
• GNB을 죽여라?!
• Navi. Bar보다 상품을
매력적으로 부각시키는
것이 더욱더 중요하다!
(톤/매너, 면 분할, 동선 등)

42. • 노골적으로 파격적읶
할읶가를 맦 처음에!
• Window shopping족의
마음을 사로잡는데 페이지
첫 라읶을 활용하라!
새롭게 고민
해야 할 것

43. • 4+6 진열 라읶 및 상품 배치(상품
크기별)
• 6개 상품 진열 라읶은 5초마다
1개 상품 변화
• 상품은 소셜 활동 기반으로 맞춤
제공

44. • 4+6 진열 라읶
이후(above the fold)
1+2+3 진열 라읶
새롭게 고민
해야 할 것

45. • 상품에 러브
마크(faved), 핀터레이트
마크(pinned), 쇼핑카트
마크(bought) 제공으로
구매 유읶
• 마우스 오버 시 상품 요약
정보 제공 및 결제 유도

46. • 쇼핑 카트 GNB 배치 및
즉시 열람(마우스 오버 시)
• 구매에 시갂 제약 제공
새롭게 고민
해야 할 것

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