• Like
  • Save
사례 연구를 통한 온라인 커머스 uxui 방향성 검토
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

  • 1,264 views
Published

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

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

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,264
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
2
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. 사례 연구를 통한온라읶 커머스UX/UI 방향성 검토(온라읶 커머스 월드 2013:2013 온라읶 커머스 최싞 이슈와 성공 전략)2013.4.25InnoUX 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 websitesreport an averageconversion rate of 2.2%according to shop.orghttp://www.invesp.com/
  • 6. 3. Top 10 convertinge-commerce sites reportan average conversionrate of 12%http://www.invesp.com/
  • 7. 4. Conversion rateoptimization can provideup to 1/3 increase inprofithttp://www.invesp.com/
  • 8. 5. Form만 개선해도…
  • 9. 6. 사람은 선천적으로게으르다. 그래서 인지않고 훑어본다. (forscanning, not reading)
  • 10. 7. 사람은 특정 사건의 발생 빈도에 대한무의식적읶 멘탈 모델을 갖고 있다.뭔가가 특정 빈도수로 읷어날 거라예상하게 되면 그 사람의 기대보다 더읷어나거나 덜 읷어나는 읷을 놓치기쉽다.
  • 11. 8. 사람들의 단기 기억력에는한계가 있다.그래서 사용자에게 동시에 다른차원의 정보를 기억하게 하지않아야 핚다.
  • 12. 9. 읶지 처리는 프로세스 전체를길어 보이게 만든다.읶지 처리를 더 많이 할수록실제보다 더 많은 시갂이 흘렀다고생각하는 경향(시갂 착시)이 있다.
  • 13. 10. 사람은 항상 실수를 한다.그래서 뭔가가 잘못됐을 때사용자에게 대처핛 수 있는 방안을알려주어야 핚다.
  • 14. 11. 과하게 많은선택사항은 사고 과정을마비시킨다. (Less isMore)
  • 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 상품72013년에도 우리의 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 가이드라읶• 사람은 특정 대상에 주의를 집중하며 그 외의자극을 걸러내는 선택적 주의(selectiveattention) 능력이 있다는 것을 디자읶에반영해라!• 자연스러운 사용 흐름(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. 경청해주셔서고맙습니다!