온라인 쇼핑몰 UX디자인 파괴적 혁신 트렌드 및 전망: 사례 중심으로 살펴본...

온라인 쇼핑몰UX디자인

파괴적 혁신 트렌드및 전망:

사례 중심으로 살펴본UX Engagement 향상을 위한

미래 제언

2016Billy(최병호)/[email protected]

중앙대학교 교수

홍익대학교 영상대학원(HCI개론 강의)/연세대학교 공학대학원(서비스디자인경영 강의)/

성균관대학교 일반대학원 휴먼ICT융합학과(교수)/HEDcentric UX미래융합전략연구소(연구소장/사외이사)

Research Data: http://www.slideshare.net/BillyChoi/Blog: http://blog.naver.com/soularchitec

Twitter/Facebook: ILOVEHCI

© 2016 Billy All rights reserved.온라인 쇼핑몰 UX디자인 파괴적 혁신 트렌드 및 전망: 사례 중심으로 살펴본 UX Engagement 향상을 위한 미래 제언

Table of Contents

• (정형화된) 상품진열 혁신 트렌드

1. A.I.-powered online shopping assistant: The North Face website and app

2. Conversational commerce: Operator app

3. Visual commerce – UGC 기반의 랜딩 페이지: Calvin Klein

4. Visual commerce - AR 기반의 쇼핑몰: Preksh

1

A.I. - powered online shopping assistant: The North Face website and app

“Online shopping can be overwhelming. There are so manychoices and products from so many different sources,”

“can help retailers make sense of massive amounts of unstructured data to improve and personalisethe online shopping experience.”Keith Mercier, ecosystem manager of Watson

출처: http://www.iamdigitalnews.com/2016/04/14/is-fashion-ready-for-the-ai-revolution/

출처: https://www.stitchfix.com/ (2016.4.19)


개인화 경험의 전략 방향성이 과도한 정보의 입력?

• 사람은 게으르다! = 대단히 효율적이다! = 정보와 조작에서의input과 output의 상관관계 그리고 interaction

• 인지적 한계 때문에 일시에 많은 정보를 다룰 수 없음. 그래서인지적 한계 내에서 커버 가능한 크기로 단순화(축소)시키고, 단순화된 과제 수행에 한하여 합리적으로 접근 가능함

• 의사결정 시 최적 또는 완벽한 방안을 찾는 노력보다적절한지(what will do) 또는 충분한지(what is good enough) 바탕으로 접근

• 그러므로, 독점적 위치를 점유하고 있거나 특별한 trigger를확보한 상태가 아니라면 개인화 경험전략의 방향성은 ‘과도한’ 정보의 입력이 아니라 그 반대를 추구해야 함

출처: https://www.thenorthface.com/xps (2016.2.13)


The North Face sees A.I. as a perfect fit

• "지난 20년 동안 하얀 배경에 격자 형태로 제품을 진열하는방법으로 온라인 쇼핑을 제공했었다.

• 고객들은 이런 인터페이스 아래 제품을 찾아야 한다. 우리는사이트 내부 검색과 탐색 기능을 개발했다. 그러나 여전히소비자가 직접 제품을 찾아 결정해야 한다.

• 이에 오프라인 매장에서 발생할 수 있는 대화를 생각해봤다그리고 이를 온라인에 이식할 수 있는지 조사했다. '이런 옷이필요합니다.’ '이런 옷을 원합니다.'같은 대화들이다“

• 오프라인 직원들이 재킷 선택 시 도움을 줄 때 고객이경험하는 것과 가장 가까운 경험을 제공할 수 있는 도구

• 중량, 보호 기능, 스타일 등 고객들의 요구를 파악하는 것은힘든 일이다.

• "재킷 분류는 어려운 일이다. 모두 각기 다른 활동과 환경을염두에 두고 만들어졌기 때문이다. AI는 이렇게 처리가 힘들정도로 선택지가 많을 때 가장 강력한 도구가 되어준다.”by Cal Bouchard, Director of E-Commerce at The North FaceSource: http://bit.ly/1mBWZoJ


The North Face sees A.I. as a perfect fit(cont.)

• The North Face teamed up with IBM to use its Watsonnatural-language, machine learning system as well as software builder Fluid; it created the Expert Personal Shopper (XPS) software that uses the Watson technology.

• The A.I.-powered online shopping assistant, which has been 12 months in the making, is live on The North Face site. Once in the jackets and vests section, click on Shop with IBM Watson.

• 신규 고객을 중심으로 고객들이 이 회사가 공급하고 있는350종의 재킷 가운데 자신에게 맞는 재킷을 더 손쉽게 찾는방법을 고안하면서 AI를 이용하기로 결정

• The North Face brand's mission of applying technology to transform the retail experience customers can now use natural conversation as they shop online via an intuitive, dialog-based recommendation engine powered by Fluid XPS and receive outerwear recommendations that are tailored to their needs.

• XPS will ask questions about factors like location, temperature or gender to provide a recommendation that seeks to meet the shopper's specific usage and climate needs.

source: http://bit.ly/1my0jAZ

Source: http://prn.to/1PVPdSn

Source: http://bit.ly/1KQrgvw



• A 60% click-through rate for trying product recommendations;

• Average consumer engagement times of two minutes; and

• Assurance from 80% of users that they would use the platform again during the shopping experience.

• “If people are engaging with the tool, that’s a good thing. The goal eventually is to turn that engagement into conversion.” by Cal Bouchard, Director of E-Commerce at The North FaceSource: http://bit.ly/1QBMz0v



• It’s designed to mimic the type of interaction you might have with sales staff in-store.

• “고객들의 후기에서 드러난 사실이 있다. 가장 많은 도움을필요로 했던 사람들이 가장 큰 도움을 받았던 것이다. 파우더스커트와 고어텍스 등 자켓 기술에 대해서도 이야기하지않는다. 그런 용어를 모르는 사람들이 이 시스템으로 인해가장 도움을 많이 받았다. 반면 자켓을 좀 아는 고객들과무엇이 필요한지 아는 고객들은 인공지능 시스템의 도움이필요 없다는 점”

• “아주 많은 테스트를 해봐야 한다. 인공지능은 고객이 이질문에는 긍정, 저 질문에는 부정할지 아는 의사결정분지도가 아니다. 인공지능은 훨씬 유동적이다. 수많은테스트를 거쳐 논리의 구멍을 찾아내야 한다. 다른소프트웨어보다 테스트에 훨씬 시간이 많이 들어가게 된다”by Cal Bouchard, Director of E-Commerce at The North Face

• 현재 노스페이스는 4월 출시될 새로운 디자인 작업 중에있는데 이는 좀 더 인터랙티브하고 좀 더 모바일 친화적일 수있도록 설계되었다. 자켓 이면의 기술에 대해서도 더 많은정보는 물론 관련 정보 링크, 기사, 블로그까지도 제공할 수있게 될 전망.

Source: http://bit.ly/1QBP3Md

Source: http://bit.ly/1mBWZoJ

출처: https://www.thenorthface.com (2016.2.13)


UX Guidelines

• 입력할 수 있는 영역을 사전에 확보해야 함

• 다음 단계로 넘어갈 수 있는 버튼을 제공하고, 적절한버튼명을 채택해야 함. 이때 버튼은 버튼 형태를 띄워야 함

• 예시문을 충분히 확인할 수 있도록 제공하고, 리프리쉬타임을 적정하게 조정해야 함


UX Guidelines(cont.)

• 입력한 정보를 사용자에게 확인시켜주고, 시스템적으로프로세싱하는 과정을 사용자에게 안내하기 위해서는‘경고창＇와 유사한 박스형 창보다 페이지 내에서 정보처리하는 방식이 더 부합하며, 보다 더 큰 폰트 사이즈를추구하는 것이 타당해보임. 단, 너무 빠른 속도로 정보를흘러가게 하면 인식율이 떨어질 위험성이 있음을 참조해야 함



• 프로세스 단계는 최대한 줄여서, 실제 제품을 제공하는방향을 추구해야 함. 이때 중요한 것은 각 단계별로 최소의인지부하, 시각부하, 운동부하의 추구로, 시간 착시 등의효과를 확보할 필요가 있음. 추후에는 프로세스 단계를생략하는 방향성을 고려할 필요가 있음. 이것은 누적데이터와 위치 정보 등 측정 가능한 기술을 활용하면가능성이 높아질 수 있음

• 핵심적으로 질문을 제공하는 영역과 제품 목록을 제공하는영역을 분리시키는 것은 부하 감소와 주목성 차원에서적절한 전략임. 단 추가적인 질문이나 부가적인 질문을제공할 필요가 있을 경우, 의도적으로 잘 보이지 않게 하거나다른 인터페이스 요소와 간섭을 일으키도록 디자인을 하지말고, 질문 영역과 제목 목록 영역을 병립하는 인터페이스를추구하는 것도 타당한 방향임. 그러나 2개의 영역 중 어떤영역을 먼저 배치할 것인가에 대한 고려는 필요해보임

• 2개의 영역을 한 페이지에서 제공할 경우, 질문에 따라 제품목록이 변경되었다는 단서를 제공할 필요가 있음

• 제공하는 제품의 개수와 크기는 인터페이스 영역의 크기와관련성이 크므로, 상관관계를 충분히 고려해야 함. 가장중요한 것은 사용자가 제공하는 제품 간 차이를 명확히구분할 수 있는가에 달려있음



• 사용자가 입력(설정)한 조건을 사용자가 원할 때제공하는 것은 바람직함. 단, 적절한 위치와 레이블명이필수적임. 현재 2개의 버전 모두 개선할 여지가 큼

• 사용자가 조건을 초기화(restart)시키거나 현재 단계를뛰어넘고(skip) 싶을 때 접근이 용이해야 하나, 초기버전보다 지금 버전이 개선할 여지가 커 보임



• 직전 화면으로 언제든지 쉽게 돌아갈 수 있는 내비게이션단서를 제공해야 함. 특히 일관성을 반드시 준수해야 함



• The app, while obtainable in the major app stores, will remain browser-based. TheNorthFace.com is a responsive web site, so all experiences built on the site are available on desktop, tablet and mobile, the company said. The Watson-based assistant is built similarly on a responsive platform, but by April will have been designed with a mobile-first UX, the company said.

출처: http://digitalretail.co.kr/wp-content/uploads/2016/04/northface.png (2016.4.19)

Source: http://venturebeat.com/2016/03/04/the-north-face-to-launch-insanely-smart-watson-powered-shopping-app-next-month/

Conversational commerce: Operator app

Source: https://www.operator.com (2016.2.16)

Source: http://blog.brandingbrand.com/news/why-you-need-to-engage-in-conversational-commerce?utm_content=32652930&utm_medium=social&utm_source=twitter (2016.4.19)

“It made me feel excited, and my Operator seemed genuinely interested in what I was looking for. She sent over a couple of initial options to get a feel for what direction she should go. After I provided some feedback and sent over some example images of dresses I liked, she continued to send over more suggestions tailored to my preferences and price range.”

Source: https://www.operator.com (2016.2.16)


To Make Online Shopping Less Like Online Shopping

• “Operator’s strength is in combining the best of bots with its human-to-human network. We believe the most efficient and enjoyable way to shop is to have a conversation with another person who understands exactly what you’re looking for and can provide personalized suggestions,” said Robin Chan, CEO and Co-Founder of Operator.

• “Artificial Intelligence and bots help support that process, but cannot be the only mechanism - the most powerful algorithm in the world is the human connection.”

Source: http://bit.ly/1SsiZBi


To Make Online Shopping Less Like Online Shopping(cont.)

• 최초 인사가 bot? 굳이 chat bot의 동작사항을 밝힐

필요보다는 ‘신뢰성 높은 첫 인상’을제공하는데 심혈을 기우릴 필요가 있음

왜냐하면, ‘첫 인상의 결정’이 서비스의지속가능한 참여를 결정하는데 큰 역할을하기 때문임

• 대뜸 이름이 뭐냐? 사용자의 정보를 요구하기 전에, 가치와

프로세스 안내가 필요함

• 폰 넘버를 입력하고 나서 그 다음에는? Submit 버튼을 가리면, 사용자가

당황하여 불필요한 시간 낭비를 초래함. 즉, ‘완성의 환상＇에 빠질 우려가있으므로 가시권에서 노출이 필요함

Updated source: 2016.4.19


The new integration of Operator for the Messenger Platform(Facebook)

Source: https://twitter.com/operator

• Shop from Curated Collections• Discover things to buy through fun interactions and chats such as

finding the best sunglasses by texting a sunglass emoji• View Product Details• Purchase and receive order confirmations• Track Order Shipment

Source: http://bit.ly/1SsiZBi

Source: http://fb.me/msg/OperatorApp (2016.4.19)

• But, usability issues!!


The new integration of Operator for the Messenger Platform(Facebook)

Source: http://fb.me/msg/OperatorApp (2016.4.19)


UX Guidelines

• 가장 중요한 경험의 요체는?신뢰성 확보! 그러나 미흡한 상태임편승 효과(bandwagon effect) 활용 필요: 다수의 사용자가

의사결정을 한 것에 자신의 판단을 맞춤. 그 이후에는 무리효과(herd effect)가 작동할 가능성이 높음

• 설득력 높이는 전략은?유사성-매력(similarity-attraction) 전략 채택 필요! 그러나

결핍된 상태임해당 전략은 긍정적인 감정을 유발하고 유대감을 형성하는데

기여를 할 수 있으며, 성격이 유사한 전문가의 선호도가높아져 구매력이 상승할 가능성이 있음

그러므로, 텍스트의 톤과 매너 그리고 길이 등이 중요함

• 구매력 높이는 전략은?측면별 제거(elimination by aspects) 전략 채택 필요!

그러나 부재함판단의 참조점(reference point)을 다르게 해서 구매 유도

필요. 예를 들면, 상당히 비싼 물품을 팔기 위해서 더 비싼다른 물품의 가격과 비교 처리

• 향후 차별화 전략은?텍스트 외에 비주얼 커뮤니케이션 전략 채택 필요비주얼 검색 엔진을 탑재하여 소통과 구매 촉진 유도 가능함

Visual commerce – UGC 기반의랜딩 페이지: Calvin Klein

Source: http://explore.calvinklein.com/en_US/explore (2016.4.20)

Source: Calvin Klein App (2016.4.20)


UX Guidelines

• I ____ in #MyCalvins(Campaign: #MyCalvins) is not only the first thing that grabs your attention as your scope out the iconic brand’s customized landing page, you will also see user-generated contentfiltered from savvy fans wearing their favorite CK looks on Instagram. With a combined reach of 106 million followers, the stars could fill the top 50 U.S. cities with likes, comments and shares. (Source: http://www.reelativity.co/six-brands-that-love-visual-storytelling/)

• 새로운 시나리오의 등장 가능성 제시! 사용자가 첫 대면하는 페이지를 사용자의 콘텐츠로 대부분 채운다.

이렇게 되면, 페이지에 등장한 사용자는 온라인 매체에 데뷔하는놀라운 경험을 하게 되고, 이것은 곧 자발적인 경험의 공유를촉발하게 된다.

사용자의 콘텐츠는 비주얼만 올릴 수 있는 파트너 앱을 활용하여수급한다. 이것은 상생할 수 있는 생태계 구축을 용이하게 한다.

사용자의 콘텐츠는 자신의 사연이 투영된 옷을 직접 또는 다른 이가입고 사진을 찍어서 만든다. 이때 메시지는 아주 임팩트가 강한키워드를 선정할 수 있도록 유도하는 구조를 만들어야 한다. (예) I ____ in #MyCalvins

참여한 사용자와 수익을 공유한다.

사용자가 직접 새로운 캠페인을 만들어서 운용하도록 하여‘지속가능한 로열티 강화’를 유도한다.

Visual commerce - AR 기반의쇼핑몰: Preksh

Source: https://www.vow360.com/dashsquare (2016.2.16)

Source: https://www.vow360.com/dashsquare (2016.4.20)

Source: https://www.vow360.com/varnam (2016.4.20)

Source: https://www.vow360.com/unilet (2016.4.20)


UX Guidelines

• 단품(제품)이 아닌 ‘총체적 경험’ 판매 시대! 오프라인 월드 -> 온라인 월드 -> 오프라인 월드(AR)

• 구매를 원하는 제품의 접근 어려움 발생 실시간 채팅 서비스(상담) 필요 재고가 없어도, 설사 판매하지 않는 제품이라도 ‘상담’을 통해

선주문(또는 선결제) 가능

• 제품 검색 필요 탐색의 재미는 충분하나 ‘빠른 검색’의 필요성이 사라진 것은 아님.

더욱 강화된 검색 서비스로의 접근 필요(또는 실시간 채팅 서비스로보완 가능)

• AR 영역과 AR 외 영역 간 결합 문제 발생 쇼핑몰의 기본적인 기능 시 사용품질 확보 필요 (예) 상세 페이지로의

이동, 즐겨찾기 메시지

• 취급하는 제품 종류에 따른 정보 퀄리티 재고 필요 토이와 전자제품은 차원이 다른 요구사항이 있으므로, 각각의 제품

특성에 적합하게 정보를 접근하도록 하고, 적합한 해상도 등을제공해야 함

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

온라인 쇼핑몰 UX디자인 파괴적 혁신 트렌드 및 전망: 사례 중심으로 살펴본...

Design

Transcript of 온라인 쇼핑몰 UX디자인 파괴적 혁신 트렌드 및 전망: 사례 중심으로 살펴본...