Card-like Layouts(Card design)
Storytelling
Hamburger Menu(Hidden Menus)
Large Backgrounds(Background Videos and Animation)
Visual commerce – UGC 기반의 랜딩 페이지: Boom, Calvin Klein
Visual commerce - AR 기반의 쇼핑몰: Preksh
A.I.-powered online shopping assistant: 1-800-Flowers, The North Face
Conversational commerce: Allo, Operator app
Social Innovation and Gamification: UX Redefined (게이미피케이션으로 사회혁신을 추구하는 UX/서비스...
2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로
1. 2016년 국내외
커머스 디자인
트렌드 및 전망:
주목할 해외 사례 중심으로
2016
Billy(최병호)/BillyChoi@Gmail.com
중앙대학교 교수
홍익대학교 영상대학원(HCI개론 강의)/
연세대학교 공학대학원(서비스디자인경영 강의)/
성균관대학교 일반대학원 휴먼ICT융합학과(교수)/
HEDcentric UX미래융합전략연구소(연구소장)
Research Data: http://www.slideshare.net/BillyChoi/
Blog: http://blog.naver.com/soularchitec
Twitter/Facebook: ILOVEHCI
7. http://www.randco.com/
1
1
특징
• 시선의 흐름에 부합하는 카드에
동영상 제공으로 몰입 및 체류
유도(1번 영역)
• 카드 타이틀을 카드 영역 내에
국한하지 않은 접근
• 그러나, 카드 타이틀 칼라와 카드
이미지 칼라 간 간섭으로
legibility와 readability가 떨어짐
15. 특징
• 테마형 카드 레이아웃
• 메인 페이지(home page)와 콘텐츠
페이지(content page)의 관계에서의
카드 레이아웃
• 그러나, 특정 조건(위치 등)에
부합하지 않는다고 하여 에러(404
등)와 유사한 느낌의 카드를
제시하는 것은 사용자 경험을
저해시키는 위험이 있음
http://www.ebay.com/
http://www.nastygal.com
25. http://www.randco.com/
특징
• 모델의 스타일과 제품의 연결고리
형성; 1개의 스타일에 여러 개의
제품 매핑
• 가로 스크롤 방식의 정보 접근
• 다양한 스타일 제시
• 큰 사이즈의 얼굴 사진의 주목성
• 그러나, 모델의 독특한 스토리가
미약하고, 가로 스크롤
인터페이스가 불편하며, 1개의
스타일에 사용된 여러 개의 제품을
일시에 구매할 수 없음
• 그렇지만, 스토리텔링의 초기 접근
방식으로 간주할 수 있으며, 몇 개의
문제를 보완한다면 매력적인 경험을
제시할 가능성이 있음
37. 특징
• 제품의 타깃이 살아갈 미래를
위해서 제품을 판매하는 우리는
무엇을 해야 하는가라는 자신들의
화두를 구매자에게 판매하고 있음
• 환경 오염을 인정하면서 나무를
심겠다는 솔루션으로 설득하고 있음;
즉 교환 가치 뿐만 아니라 사회
가치까지 고려함; 그들의 다음
행보가 궁금하고, 그들을 궁금하게
함
http://www.munchkin.com/
52. http://www.randco.com/
특징
• 페이지 상단(왼쪽 또는 오른쪽) 위치;
반응형 디자인에 유용
• 햄버거 메뉴 클릭 시, 화면 전체
반전(dim out)시킨 후 메뉴 제공;
주목성 및 인식성 높음
• 그러나, 햄버거 메뉴에 익숙하지
않은 경우에 접근성이 떨어지고,
메뉴 선택 후 이동한 페이지에서
선택한 메뉴명과 연계된 단서가
미흡함
http://whiteclaw.com/
62. https://www.etq-amsterdam.com/
특징
• 페이지 상단(왼쪽) 위치; 반응형
디자인에 유용
• 햄버거 메뉴 클릭 시, 왼쪽 메뉴
영역 노출 및 콘텐츠 영역 반전(dim
out)
• 그러나, 첫 페이지에서 햄버거
메뉴의 단서가 부재하고, 메뉴 선택
후 이동한 페이지에서 택한
메뉴명과 연계된 단서가 부재함
66. Source: https://blog.goodvid.io/what-is-visual-commerce-and-why-it-matters-for-online-retail/
※ 참조: http://www.socialannex.com/blog/2016/01/14/51-vital-visual-commerce-statistics/
• 55% of content creators plan to prioritize visual content in 2016.
• Visual content works better for retention. People tend to remember 80% things
they see or do versus only 10% of things they hear and 20% of the things they read.
• Compelling images get 94% more views than basic visuals.
• 67% consumers say that high quality visual content is more important than product
description or customer ratings.
• By 2017, 74% of all web traffic will be video.
• Shoppers who view videos are 1.8x more likely to purchase than non-viewers.
• When featuring video on the site, retailers report 40% increase in purchases.
• 84% of millennial shoppers say that UGC influences their purchases.
85. Exponential [ekspənenʃəl]
Exponential means growing or increasing
very rapidly.
• 점진적 변화가 아닌 급진적, 기하급수적 변화
• 즉, 기술의 진화에 따른 사회, 경제적 변화가
점진적으로 오는 것이 아니라 순식간에 급격하게 온다.
• 적은 값의 움직임(입력)으로 큰 작용(출력)을 얻을 수
있는 변화
Source: 싱귤래리티 유니버시티 글로벌 서밋
90. http://www.boombycindyjoseph.com/
BOOM! Shows Real Products on Real People
• BOOM! cosmetics company gives customers
the option to submit original photos with
their product reviews. When a shopper sees
these user-generated photos of real people
using the product they are considering, they
can quickly tell whether it meets their
expectations.
• User-generated photos coupled with
customer reviews effectively communicates a
comprehensive customer experience that
allows shoppers to connect on a personal
level and imagine themselves using your
product.
• BOOM! also implements visual UGC
throughout their site with a selfie contest and
rotating customer photos on their homepage.
Source: http://blog.hubspot.com/marketing/attention-grabbing-examples-user-
generated-content-ecommerce#sm.0006dw8tvwq3cv310bl2bw5czwcla
100. Source: http://www.entreprennovators.com/interview-saikat-sinha-preksh-worlds-first-visual-commerce-platform/
• At present there is a huge gap between online shopping and offline
shopping. If we look at eCommerce, there are only two ways of searching a
product. Firstly ‘The Search Tab’ which is generally placed on the top of the
website/app, secondly ‘Search by category Tabs’ placed on the top left of
the website/app. However if we look at offline shopping, search &
purchase happens mostly by ‘Looking Around’. We wanted to use
augmented reality & virtual reality to implement this aspect of ‘Looking
Around’ in online shopping.
• We have developed an Augmented Reality Solution that allow consumers to
‘walk-through’ real brick and mortar stores, ‘pick’ products off the
shelves and purchase online while inside the Virtual Store. We bring in the
real-life shopping experience to the consumers.
112. “Online shopping can be
overwhelming. There are so many
choices and products from so
many different sources,”
“can help retailers make sense of
massive amounts of unstructured
data to improve and personalise
the online shopping experience.”
Keith Mercier, ecosystem manager of Watson
출처: http://www.iamdigitalnews.com/2016/04/14/is-fashion-ready-for-the-ai-revolution/