사례 연구를 통한 온라인 커머스 uxui 방향성 검토
TRANSCRIPT
© 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Table of Contents
• Overview: Inspirational Commerce• For the Window Shopper: Fashion Kaleidoscope app• Unique style for photography: Suitsupply.com• Minimize navigation size: Lilybalou.be• Full screen background images: Us.vanmoof.com• Personalize your experience: Fab.com
1
http://www.slideshare.net/subburama/inspirational-commerce-solutions
http://kalei.do/
https://itunes.apple.com/us/app/kaleidoscope-fashion-inspired/id505876558?ls=1&mt=8
© 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
For the Window Shopper: Fashion Kaleidoscope app
1. Home screen(time line)의 변화와 타인이 멋있게 입고 있는 스타일과닮고 싶다는 욕구 판매
2. 구매 프로세스의 변화 추구: 스타일 탐색 > 스타일 선택 > 구매 대상선택
3. 구매 대상 선택 UI의 개선 필요: ‘메뉴’ 방식과 affordance와 fun이투영된 ‘구매 대상 직접 선택’ 방식 혼용
4. Shopping mall 연계 UI의 개선 필요: 단순 제품 나열 방식에서 비주얼감성을 자극하는 방식으로 전환 필요
5. Social friends가 공유하는 스타일로의 접근 변화
6. Visual bookmarking의 commodity화 (예) Pin it
참조: http://mashable.com/2013/05/16/shopping-apps-tablet/
http://www.slideshare.net/subburama/inspirational-commerce-solutions
http://suitsupply.com/
© 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Unique style for photography : Suitsupply.com
1. 예술작품 같은 비주얼 충격: 고품격 제품 퀄리티 추구
2. 돋보기로 본 듯한 섬세한 제품 확대: 신뢰성 제고
3. 실제 모델이 직접 동영상 홍보: 강력한 흥미 유발
4. Size advisor 기능 및 실제 모델이 직접 동영상 설명 제공: 실효적인 구매 지원
5. ‘ADD TO CART’ 버튼 선택 직후 정보 제공: 명료한 피드백
6. ‘SHOP BY LOOK’ 메뉴 제공: WYSIWYG 접근 강화
참조: http://www.slideshare.net/StuartSilverstein/30-sites-deck-final2
http://www.lilybalou.be/
© 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Minimize navigation size: Lilybalou.be
1. Home page의 변화: 정보량과 내비게이션 바의 위치 혁신으로정보주목도 강화
2. 매거진 방식 도입: 패션 매거진을 보는 즐거움의 이식과 종이매거진에는 없는 인터랙션 스타일 접목으로 쇼핑 즐거움 배가(예) 지면 부분 확대(!), 전체 화면으로 확대
참조: http://www.slideshare.net/StuartSilverstein/30-sites-deck-final2
http://us.vanmoof.com/
© 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Full screen background images: Us.vanmoof.com
1. Home page의 변화: background image의 교체와 한 개의이미지으로만 정보주목도 강화
2. 직관적인 인터랙션 방식 도입: 옵션 마우스 오버 시 floating info. Box 제공 및 옵션 선택 시 제품에 실제 착탈로 명료한 이해유도
참조: http://www.slideshare.net/StuartSilverstein/30-sites-deck-final2
http://fab.com
© 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Personalize your experience: Fab.com
1. 맞춤 카테고리: 선호하는 카테고리를 선택하여 웹/앱/이메일대상으로 맞춤 서비스를 받을 수 있도록 구성
2. Social friends의 선호 제품 공유: SNS에서 선호하는 제품공유로 conversion rate 상승 효과
경청해주셔서고맙습니다!