brunch

You can make anything
by writing

C.S.Lewis

by 김자유 Nov 14. 2018

커머스 UX는 어떻게 디자인할까?(feat.아마존)

아마존에서 배울 수 있는 e-커머스 UX

목차

1.세계 최대 온라인 판매자가 가르쳐주는 e커머스 UX

2.사용자 리뷰를 통한 e커머스 UX 강화

3.매출 증진을 부르는 물건 배치

4.사용자에게 직관적인 스캔 검색 옵션

5.시행착오 없는 원 클릭 주문

6.e커머스 UX계의 Roach Motel

7.당신의 말을 듣고 있는 알렉사

8.아마존에서 배울 수 있는 e커머스 UX 규칙



1.세계 최대 온라인 판매자가 가르쳐주는 e커머스 UX


Jeff Bezos(아마존의 창설자와 최고경영자)의 프로젝트는 2018년 미국 전체 온라인 지출의 49%인 2,582억 달러의 판매 매출을 올릴 예정이다. 아마존은 지난 몇 년 동안 미국 내 온라인 소매 매출의 약 50%를 회사로 가져왔다. 만약 누군가가 사용자 친화적인 이커머셜 경험을 디자인하는 방법을 안다면, 그건 아마존일 것이다.


아마존의 웹 사이트는 “핫 mess” 같은 UI 디자인 지식에 대해 알고있는 것이 이상해보인다. 인간미 없고,아마존 유저들을 생각하지 않고 알고리즘 위주로만 흘러간다. 인터페이스가 매우 불안정해서, Fast co.는 아마존이 사용자 중심의 디자인이 “엄청나게 부족하다”는 사실을 디자이너 팀에게 보완해달라고 요청했다.

 

Justinmind의 UX 팀이 어두운 패턴이나 못생긴 웹디자인을 좋아하지 않는 않지만(뭐, 가끔 우리는 좋아하지만) 여전히 아마존에서 배울 수 있는 유익한 UX 교훈이 있다고 생각한다. 아래에서 확인해보자.



2.사용자 리뷰를 통한 e커머스 UX 강화


아마존 쇼핑객들은 엄청난 양의 리뷰를 남긴다.믿겨지는가?  해리포터와 죽음의 성물에서 Jared Spool이 비교한 아마존과 타겟(Target) 리뷰를 살펴보자.

두 사이트는 온라인 판매량은 비슷하나, 아마존은 1800 이상의 리뷰를 받았다. 상대 회사는 3개였다.

왜 아마존은 사용자가 이와 같은 리뷰를 남기도록 권하는걸까? 왜냐하면 리뷰는 긍정적인 e-커머스 경험을 주기 때문이다. Baymard Institute에 따르면 소비자의 95%가 온라인 리뷰를 통해 제품을 결정할 때 도움을 받는다고 한다. 리뷰들은 온라인 구매의 필수적인 부분이고, 소비자가 지불할때 느끼는 불안을 줄여준다.

 

하지만 아마존 리뷰 시스템 UX 디자인을 대대적으로 끌어올리는 것은 조심해야한다. 결국에는 타겟은 동일한 시스템을 사용하고, 우린 이미 그것이 어떻게 작용하는지 알고 있다.  대신 당신의 e커머스 사이트에서 어떤 종류의 리뷰 시스템이 작동하는지 확인하기 위해 사용자 경험 접근 방법, 프로토타입, 반복을 따르자.

여기에 UX 리뷰 시스템 디자인을 위한 몇 가지 기본적인 최고의 실습이 있다.


UI디자인에서 항상 순위 분포 요약을 포함하라.

사용자에게 리뷰를 남겨달라고 요청할 알림을 설정하자.

직관적인 리뷰 필터링을 만들고  그들이 필터링을 했을 때 피드백을 제공하자.



3.매출 증진을 부르는 물건 배치


아마존의 현재 미국 사이트에서만 4억 8천만 개가 넘는 제품을 판매한다. 그건 바로 정보 계층 구조 퍼즐이다. 아마존은 항상 정보 과부하 문제를 카테고리 네비게이션으로 해결했다. 카테고리 네비게이션의 훌륭한 부분은 드롭 다운 메뉴가 빠르게 반응한다는 것이다.


아마존 UI는 지체없이 순간적으로 각각의 서브 카테고리를 사용자에게 보여준다. 이것은 아마존이 가지고 있는 어마어마한 제품 카테고리들을 볼 수 있게 도와주는 완벽한 플라이아웃 인터렉션이다. Ben Kamens는 초 반응형 드롭다운 네비게이션의 코드학을 설명한다.




4.사용자에게 직관적인 스캔 검색 옵션


내포된 네비게이션은 사용자에게 아주 유용하고 아마존이 가상 상점에서 주문을 할 때 도움이 된다. 하지만 콘텐츠가 많은 사이트 (말 그대로 아마존의 수백만 페이지)에는 정보를 탐색하고 검색하는 여러가지 방법이 있어야 한다. 오른쪽에 다중 엑세스 네비게이션이 있다면 접근성이 높아지고, 찾기 쉬워진다. 잘못 사용하면 e커머스 UX에 역효과를 가져온다.  


아마존은 운좋게도, 2014년에 스캔 검색하는 기능을 추가할 때 멀티 엑세스 네비게이션 기능이 있었다. 그 당시 아마존 앱 사용자들은 그들의 핸드폰 카메라로 CD, 그림, 로고같은 물체를 스캔해서 아마존 매장에서 관련 제품들을 찾을 수 있었다.


처음부터 스캔 검색 기능이 있는 아마존은 AR 기능을 통합시켰다. 이젠 매일 물건을 스캔해서, 매장에서 해당 물건을 가져올 수 있게 되었다. 또한 주변에 있는 매장의 물건을 예상할 수 있다. 현관에서 전등이 보기 좋을지 확신이 서지 않는가? 아마존 AR은 이걸 해결한다.


이 훌륭한 기능에는 한 가지 문제가 있다. 아마존 중독자라고 자처하는 디자이너 Agnes Kim은 몇 년 동안 앱을 사용하고 난 후 이것을 발견하고는 놀랐다. 다른 사용자들에게 게릴라 테스트를 해서 그들 중 아무도 스캔이나 음성 검색 기능을 사용하지 않는것을 발견했다. 흥미로웠다. 아마존은 현재 앱 검색바에서 카메라 아이콘으로 스캔 검색 기능에 신호를 보낸다.



이 기능은 검색 옵션으로 앱 홈페이지에서 더욱 유명해질 수 있고, 아마 오늘의 특가를 대체할 수도 있을 것이다.




5.시행착오 없는 원 클릭 주문


아마존의 원 클릭 주문 시스템은 펜실베니아 와튼 대학에  따르면, e커머스 UX 세계의 "a game-changer” 였다. (*a game-changer 판도를 바꾸는 사람) 사용자가 결제와 우송료 정보를 한 번에 입력하면 다음 클릭 한 번으로 계속 구매할 수 있다는 생각은 온라인 쇼핑에 혁명을 일으켰다.



왜냐고? 사용자들은 클릭을 싫어하기 때문이다. 그래 사실 그들은 클릭을 싫어하지 않는다. 실제로 Jacon Jakob Nielsen는 디자인 변경 후 e커머셜에서 제품을 찾을 확률이 600%높아서 홈페이지에서 4번의 클릭이 있어야 했다.

 

즉, 아마존의 원클릭 구매가 마찰과 인지 부하를 줄여준다. 쇼핑을 하는 사람들은 까다로워질 수 있는 양식을 채울 필요가 없고, 구매 결정에 대해 겁먹을 시간도 없다. 물론 아마존 UX가 모두 최고는 아니다. 버리고 싶은 UX도 있다.



6.e커머스 UX계의 Roach Motel


아마존 프라임 계정을 삭제해 본 적 있는가? 만약 있다면, 당신은 “로치모텔” 전술로 알려진 것을 경험했을 것이다. 이 어둠의 UX 패턴은 사용자가 프라임 계정을 삭제하려고 할 때 혼란스러운 드롭 다운 옵션과 관련된 여러 화면을 사용자에게 보여준다. 그리고 갑자기 튀어나온 이건? 부질없는 시도를 한 후에야 직접 당신의 계정을 삭제할 수 없다는 것을 알게 된다. - 고객 서비스 프로그램이 하는 일이다. 비록 UX를 베낀 것이 사용자 친화적이진 않지만, e커머스 UX의 측면에서는 어느 정도 개선시켰다.

혜택 받는 것을 끝내려고 하는가? 뭐라고 말할까? 아마존에서 “내 계정 해지”라고 말하고 있는가?



7.당신의 말을 듣고 있는 알렉사


2017년 7월, Engadget (역자 주 : IT 전문 매체) 알렉사가  “going to murder you in your sleep” 인지 묻는 유일한 매체는 아니었다. 많은 사람들이 예상치 못할 때 소름끼치는 웃음을 내는 알렉사에게 조금 겁을 먹었다.


아마존은 알렉사가 실수로 “알렉사, 웃어” 라는 명령을 들었다는 문제를 확인했다. 그들은 그 문제를 아주 빨리 해결했다. 하지만 여전히 오싹하다. E-commerce UX의 첫 번째 규칙. "무서워하지 마라." Nielsen Norman 그룹은 여기에 더 많은 아마존의 UX 비평글이 있다.



8.아마존에서 배울 수 있는 e커머스 UX 규칙


아마존의 UX가 완벽하다고 말하는 것은 아니다. 하지만 거대한 온라인 안에서의 실수와 개선으로부터 배워야 할 의미있는 교훈이 있다. 특정 사이트나 앱에 적합한지 확인하기 위해 아마존 템플릿을 테스트하고 제품 검색과 계산 모든 장애물을 줄이면 더 나은 구매 경험을 제공할 수 있을 것이다.


저자 : Justinmind

원문 링크: https://uxplanet.org/e-commerce-ux-lessons-we-can-learn-from-amazon-f1047c389bc7

번역: REASIGN

문의: reasign.newsletter@gmail.com


*무단 전재 및 재배포 금지


최신 해외 디자인 아티클을 한글판으로 편하게 받아보세요!

읽는 디자인, <디독D.dok>(구:REASIGN) 구독링크: http://bit.ly/2FNQNpv


https://brunch.co.kr/@thinkaboutlove/197


매거진의 이전글 2018 그래픽 디자인 트렌드 정리
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari