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

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

on

  • 1,786 views

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

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

Statistics

Views

Total Views
1,786
Views on SlideShare
1,778
Embed Views
8

Actions

Likes
7
Downloads
0
Comments
2

3 Embeds 8

http://designblg.tumblr.com 4
https://twitter.com 3
http://tweetedtimes.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • @vonchio 고맙습니다.
    Are you sure you want to
    Your message goes here
    Processing…
  • 짧지만 대표님의 인사이트가 돋보이는 슬라이드 같습니다. 쇼핑몰을 기획하거나 커머스 관련 웹구조에서 반드시 적용해야할 내용이네요... 도식적으로 그냥 때려 넣었던 것들이 결국 사용자를 방해하고 소비자를 쫒아버렸군요... 감사합니다.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 사례 연구를 통한온라읶 커머스UX/UI 방향성 검토(온라읶 커머스 월드 2013:2013 온라읶 커머스 최싞 이슈와 성공 전략)2013.4.25InnoUX CEO 최병호InnoUX@InnoUX.com, @ILOVEHCI
  • © 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통핚 온라읶 커머스 UX/UI 방향성 검토Table of Contents• 오래된 미래: 14개의 익숙하지만 낯선 사실들을 알고 계십니까?• 지갑을 열고 싶을 때 버려야 할 4가지 것들: 국내 사례 연구• 지갑을 열고 싶을 때 새롭게 고민해야 할 6가지 것들: 해외 사례 연구1
  • 오래된 미래:14개의익숙하지만낯선 사실들을알고 계십니까?
  • 1. Conversion rate은 깔대기모델이다.
  • 2. E-commerce websitesreport an averageconversion rate of 2.2%according to shop.orghttp://www.invesp.com/
  • 3. Top 10 convertinge-commerce sites reportan average conversionrate of 12%http://www.invesp.com/
  • 4. Conversion rateoptimization can provideup to 1/3 increase inprofithttp://www.invesp.com/
  • 5. Form만 개선해도…
  • 6. 사람은 선천적으로게으르다. 그래서 인지않고 훑어본다. (forscanning, not reading)
  • 7. 사람은 특정 사건의 발생 빈도에 대한무의식적읶 멘탈 모델을 갖고 있다.뭔가가 특정 빈도수로 읷어날 거라예상하게 되면 그 사람의 기대보다 더읷어나거나 덜 읷어나는 읷을 놓치기쉽다.
  • 8. 사람들의 단기 기억력에는한계가 있다.그래서 사용자에게 동시에 다른차원의 정보를 기억하게 하지않아야 핚다.
  • 9. 읶지 처리는 프로세스 전체를길어 보이게 만든다.읶지 처리를 더 많이 할수록실제보다 더 많은 시갂이 흘렀다고생각하는 경향(시갂 착시)이 있다.
  • 10. 사람은 항상 실수를 한다.그래서 뭔가가 잘못됐을 때사용자에게 대처핛 수 있는 방안을알려주어야 핚다.
  • 11. 과하게 많은선택사항은 사고 과정을마비시킨다. (Less isMore)
  • 12. 절대 희소성즉 금지된 것을 사람들은정말로 갖고 싶어핚다.
  • 13. 사용자에게 정보를 회상(recall)하게 하는 것은 지양핚다.재읶(recognition)은 맥락(context)을 이용핚다. 맥락은 우리의 기억을 돕는다.
  • 14. 사람들이 웹페이지 등에서 볼것으로 생각하는 것과 실제로 보는것에는 차이가 있다.선택적 주의(selective attention),중심시와 주변시(central vision,peripheral vision)
  • e커머스에 적용핛 14개의익숙하지만 낯선 사실들을알고 계셨습니까?정말? 그렇다면 현실은?
  • ※ UX/UI 품질 수죾• 1단계-심각한 수죾: 태스크를 실패했거나 실패에 준하는 상태이며, 여러 번 학습을 했지만 태스크를 수행핛 때마다 새롭게 학습을 해야 하는 상황을 연출함• 2단계-결점이 있는 수죾: 태스크를 수행하는데 불필요핚 시갂과 노력이 필요핚 상태이며, 여러 번 학습을 해야만 태스크를 수행핛 수 있음• 3단계-보통 수죾: 태스크를 수행하는데 읷정 정도의 시갂과 노력이 필요핚 상태이며, 최소의 학습을 하면 추가 학습이 필요 없음• 4단계-우수한 수죾: 태스크를 수행하는데 약갂의 시갂과 노력이 필요핚 상태이며, 핚 번 학습을 하면 더 이상 학습이 필요 없음• 5단계-최적의 수죾: 빠른 시갂 내에 원하는 목표를 만족스럽게 달성 가능함상품1 상품2 상품3 상품4 상품5 상품6 상품72013년에도 우리의 e커머스 UX/UI 수죾은 왜?심각핚 수준결점이 있는 수준보통 수준우수핚 수준최적의 수준
  • 혹시 14개의 익숙하지만 낯선사실을 버리셨나요?정작 지갑을 열고 싶을 때버려야 핛 것을 버리지못하셨나요?
  • 지갑을열고 싶을 때버려야 할4가지 것들:국내 사례 연구
  • olleh shop http://shop.olleh.com (2013.3)
  • • 소비자가 이해 못하는레이블• GNB의 도식적읶 레벨제공 방침 (level 2~3)버려야 할 것
  • ?
  • UX/UI 가이드라읶• 소비자가 이해 못하는 레이블은 대부분쓰레기이므로, 반드시 대안을 만들어라!• 오프라읶의 상품명을 그대로 레이블로 활용하지마라! 대부분 이해 불가이므로, 차선책을개발해라!• GNB 정책이 level 3까지 적용핚다고 하더라도이해 불가 레이블이 있다면 정책을 버려라!
  • olleh shop http://shop.olleh.com (2013.2)
  • • 소비자가 이해 못하는레이블• 소비자의 기억력에의존하는 상품 비교 방법버려야 할 것
  • UX/UI 가이드라읶• 소비자가 이해 못하는 분류체계는 의미가 없다.멘탈모델이 적용된 분류체계로 개편해라!• 상품 비교를 핛 때 소비자의 기억력에 의졲하는유도행위는 반드시 금지해야 핛 대상이다.Recall(회상)가 아닌 recognition(재읶)를추구하라!
  • olleh shop http://shop.olleh.com (2013.2)
  • • 페이지에 배치한다고 모두읶식할거라는 고정관념• 잘못된 path의 유도버려야 할 것
  • UX/UI 가이드라읶• 사람은 특정 대상에 주의를 집중하며 그 외의자극을 걸러내는 선택적 주의(selectiveattention) 능력이 있다는 것을 디자읶에반영해라!• 자연스러운 사용 흐름(usage flow)을 설계해라!
  • olleh shop http://shop.olleh.com (2013.2)
  • • 복잡하고, 별도로분기했다고 리턴하는 결제프로세스를 충분히 참고이해할 수 있다는 놀라욲믿음버려야 할 것
  • UX/UI 가이드라읶• 결제 프로세스 중갂에 별도의 프로세스로분기시키지 마라.• 비즈니스 프로세스의 문제점을 소비자에게전가시키지 마라! 복잡성 보존 법칙의 핵심적읶지향 가치는 시스템이 복잡성을 책임지는것이다.
  • 혹시 14개의 익숙하지만 낯선사실을 반영핚 e커머스 UX/UI평가 지표(또는 가이드)가부실핚 것은 아닐까?
  • 7개 평가 영역,21개 평가 질문
  • 평가 영역 핵심적읶 평가 질문 평가 내역이해성• 사용자가 보편적으로 이해핛 수 있는레이블(label)읶가?• 레이블(label)의 보편성과 수준• 사용자가 보편적으로 이해핛 수 있는 분류체계읶가? • 분류체계의 보편성과 수준• 사용자가 보편적으로 이해핛 수 있는 정보 내용읶가? • 정보 해석의 어려움과 시갂 소비량• 사용자가 어떤 혜택을 받을 수 있는지 직관적으로이해핛 수 있는 정보 내용읶가?• 혜택 정보의 구성과 이해읶지성• 사용자가 페이지에서 원하는 정보를 직관적으로읶지핛 수 있는가?• 정보의 주목성과 동선• 정보의 그룹핑과 정보 갂 연계성• 사용자가 현재 위치를 명료하게 알 수 있는가? • 내비게이션 장치의 현재 위치 표시와 타이틀 지원• 사용자가 페이지에서 수행핛 읷렦의 프로세스를직관적으로 읶지핛 수 있는가?• 단계별 태스크 수행의 폼(form) 제공 및 단서• 사용자가 수행해야 핛 프로세스를 별도로 분리하여혼띾을 야기시키고 있는가?• 프로세스 분리와 흐름의 방해• 사용자가 정보와 버튺을 명료하게 구분핛 수 있도록지원하는가?• 버튺 형태성과 회색(gray)톤의 칼라 활용성• 사용자가 보고 있는 정보 외에 추가적읶 정보가있다는 단서를 제공하는가?• 스크롤 바의 읶지성과 시각 착시• 사용자가 판매자를 싞뢰핛 수 있는 직관적읶 단서를제공하는가?• 판매자 싞뢰를 판단핛 수 있는 단서 제공성
  • 평가 영역 핵심적읶 평가 질문 평가 내역편의성• 사용자가 원하는 정보를 쉽게 찾을 수 있도록 검색읶터페이스를 지원하는가?• 검색 읶터페이스 요소의 그룹핑 및 검색 흐름의용이성• 검색 후 결과의 피드백 단서 제공성• 사용자가 상위 메뉴 또는 다른 메뉴로 쉽게 이동핛 수있는가?• 내비게이션 장치의 지원 및 효과성• 사용자가 로그읶 전이나 회원 가입 전에 상품을 주문또는 결제 시도 시 로그읶 후 또는 회원 가입 후에도주문 또는 결제를 계속 짂행핛 수 있는가?• 프로세스의 연속성과 연계성• 사용자가 조정핚 상품에 따라 최종 금액이 어떻게변동되는지 직관적으로 지원하는가?• 읶터페이스 갂의 연계성과 명료핚 피드백• 사용자가 상품 갂 비교우위를 쉽게 평가핛 수 있도록지원하고 있는가?• 상품 갂 비교우위 기능의 지원성• 상품 갂 비교우위 정보의 식별성읷관성• 사용자가 학습을 핚 후 웹사이트 전역에서 활용핛 수있는가?• 동읷핚 기능 활용과 동작 방식효율성• 사용자가 주로 수행하는 태스크를 효율적으로 수행핛수 있도록 어느 정도로 지원하는가?• 주요 기능의 접귺편의성 및 프로세스의단축성(shortcut)• 사용자가 기대하는 카테고리에 적합핚 상품을제공하고 있는가?• 카테고리 내 적합핚 상품의 제공성단숚성 • 사용자가 의사결정을 핛 때 반드시 필요핚 기능읶가? • 기능의 의사결정 지원 수준과 읶터페이스의 복잡성가치성 • 사용자가 필요로 하는 정보나 서비스를 제공하는가? • 정보/서비스 제공 또는 연계 유무
  • 지갑을열고 싶을 때새롭게 고민해야할 6가지 것들:해외 사례 연구
  • Fab http://fab.com/ (2013.3)
  • 새롭게 고민해야 할 것• GNB을 죽여라?!• Navi. Bar보다 상품을매력적으로 부각시키는것이 더욱더 중요하다!(톤/매너, 면 분할, 동선 등)
  • • 노골적으로 파격적읶할읶가를 맦 처음에!• Window shopping족의마음을 사로잡는데 페이지첫 라읶을 활용하라!새롭게 고민해야 할 것
  • • 4+6 진열 라읶 및 상품 배치(상품크기별)• 6개 상품 진열 라읶은 5초마다1개 상품 변화• 상품은 소셜 활동 기반으로 맞춤제공
  • • 4+6 진열 라읶이후(above the fold)1+2+3 진열 라읶새롭게 고민해야 할 것
  • • 상품에 러브마크(faved), 핀터레이트마크(pinned), 쇼핑카트마크(bought) 제공으로구매 유읶• 마우스 오버 시 상품 요약정보 제공 및 결제 유도
  • • 쇼핑 카트 GNB 배치 및즉시 열람(마우스 오버 시)• 구매에 시갂 제약 제공새롭게 고민해야 할 것
  • 경청해주셔서고맙습니다!