[번역] 당신의 판매를 방해하는 심각한 UX 오류

※ 의/오역 있음, 문제 시 삭제합니다.

[쇼핑몰 UX 오류 체크리스트]

1. 사용자의 행동에 대한 적절한 알림이 존재하는가?
ex) 쇼핑 카트에 물건 추가 시 숫자로 카운팅

2. 사용자가 행동을 쉽게 수정할 수 있는가?
ex) 쇼핑 카트 수량 편집 제공, 쇼핑 카트 하단에 방금 본 상품 리스트 제공

3. 액션 버튼이 다른 요소와 명확히 구분되는가?
ex) 분명한 아웃라인, 가독성 있는 폰트, 대비가 적절한 BG 위에 위치

4. 사용자의 인지를 압도하지 않는가?
ex) 한 번에 한 가지의 선택지만 제공

5. 중요한 정보를 가리지 않는가?
ex) 가격을 노출하지 않는 전략 (다크패턴)

6. 다국어를 지원하는가?
ex) 헤더, 햄버거 메뉴, 푸터 등에 영문 버전 제공

7. 중요한 UI 요소를 가리지 않는가? (+모바일 호환성)
ex) 쿠키 정책 모달, 플로팅 요소, 창을 닫기 어려운 팝업, 챗봇 등

8. 익숙하지 않은 패턴을 사용하여 많은 학습을 요구하지 않는가?
ex) 다른 요소에 의해 가려지는 카테고리, 낯선 내비게이션

Serious UX mistakes that might be sabotaging your sales

---

부제: 다음 가이드에 따라 발견하고 수정해봅시다

여름이 성큼 다가왔습니다. 요즘 여기 저기에서 여름 옷과 악세사리들을 쇼핑하고 있습니다. 특히 인터넷에서요. 온라인 쇼핑몰들을 재고해 볼 수 있는 좋은 기회였습니다. 쇼핑 경험이 항상 기쁘지만은 않았기 때문이죠.

온라인 쇼핑과 모바일 쇼핑 모두 상승세에 있습니다. 휴대할 수 있는 디바이스에 대한 접근성이 점점 더 좋아졌기 때문입니다. 알아두면 좋을 점은:

• 현재 대략 5명 중 4명의 미국인들이 온라인 쇼핑을 하고, 그들 중 절반 이상이 모바일 디바이스로 결제합니다.
• 어떤 모바일 쇼핑몰에 부정적인 경험을 가진 사용자들의 구매 가능성은 62%로 감소합니다62% less likely to purchase from you in the future.

다음은 제가 목격한 가장 흔한 UX적 오류에 대한 최근 관찰입니다.

쇼핑 카트의 수량을 항상 표시해야 한다. 사용자에게 그 안에 무엇인가 있다는 것을 알려라.

카트에 숫자가 표시되지 않는다

물건이 마음에 들면, "카트에 담기" 버튼을 누릅니다. 그리고...아무 일도 일어나지 않습니다. 확인 알림도 없습니다. 카트 아이콘은 아무것도 보여주지 않습니다-그저 오른쪽 상단 구석에 존재하며, 실제로 그 안에 무엇인가 있다는 사실을 알려주는데 흥미가 없습니다. "제품이 담긴건가? 아니면 살 수 없는건가? 내가 다시 눌러야 하나?". 오류가 있다고 생각했습니다. 그리고 "추가" 버튼을 다시 눌렀고 또 다시, 그리고 다시 눌렀습니다. 무슨 일인지 카트를 확인해보니, 10개의 상품이 추가되어 있었습니다.

결론: 사용자가 버튼을 누른 직후, 추가한 상품의 수량을 반드시 표시해 주어야 한다.

쇼핑 리스트 편집이 어렵다

상품의 수량을 수정하려 합니다. (예를 들어, 실수로 "카트에 담기" 버튼을 더블 클릭한 경우) 하지만 수정할 간단한 방법이 없습니다. 결국 상품을 카트에서 완전히 삭제한 후, 카탈로그에서 다시 찾아 상품을 추가할 수 밖에 없었습니다. 매우 짜증이 났고 그 상품을 구매하지 않은 채 쇼핑을 종료했습니다.

결론: 상품의 수량을 수정할 쉽고 간단한 방법을 제공해야 한다. 카트 아래 어딘가에 사용자가 관심을 가졌던 상품 목록을 제공해야 한다.

좌: 읽을 수가 없다 / 우: 대비와 가독성이 향상되었다

액션 버튼과 기능 버튼의 악몽-두 가지 중요한 문제점

첫 번째: 액션 버튼, 예를 들면 "구매하기" 나 "둘러보기" 들이 알아보기 어렵습니다. 종종 불분명한 아웃라인, 가독성이 떨어지는 폰트와 함께 대비가 적절하지 않은 사진 위에 위치하는 경우가 있습니다.

왜 그곳에 배치하는 걸까요? 전혀 알아볼 수 없습니다. 사용자들은 버튼을 쉽게 무시하게 됩니다. 많은 사용자 세션을 거쳤고 그 버튼들의 전환율은 0에 가까웠습니다I went through a lot of user sessions and the conversion from those buttons is near 0.

두 번째: "뒤로 가기" 와 "결제 진행하기" 버튼은 정확히 똑같아 보입니다. 대체 왜 그럴까요? 고객들이 정말로 구매하길 바라지 않나요?

결론: 액션 버튼을 눈에 띄게 해라. 다른 스타일과 색상을 사용해 오직 액션 버튼에만 적용해라. 고객들이 다른 버튼과 구별할 수 있도록 해라.

지나치게 많다

온라인 쇼핑몰들은 문자 그대로 "이걸 사세요", "여기 보세요", "여기를 클릭하세요" 라고 울부짖고 있습니다. 하지만 그저 긴장하고 불안하게 만들 뿐입니다. 어디에 집중해야 할지 알 수 없습니다. 압도되고 길을 잃게 합니다. 많은 옵션들을 제안하고 있다는 것은 알지만, 고객들이 그것을 더 알아 보고 싶을까요? 아마 그렇지 않을 겁니다.

결론: 사용자들에게 여유를 주고 한 번에 한 가지만 제공하라. 다양한 옵션을 제안하는 것은 좋지만, 선택지가 많을 수록, 실제로 선택하기는 더 어려워진다. "밀러의 법칙"을 진지하게 고려하고 사용자의 인지를 압도하지 말라.

가격을 가리지 말라-신뢰성이 떨어진다

가격이 가려져 있다

상품의 가격을 보여주지 않는 명품 샵들이 있습니다. 그것이 그들의 마케팅 전략이기 때문이죠 (예를 들면, 샤넬-가방과 악세사리들을 좋아하지만 가격은 항상 놀랍고 그것들은 모두 부티크에서의 쇼핑 경험에 대한 것입니다.)

하지만 가끔 일반적인 쇼핑몰에서도 가격을 보여주지 않습니다. 혹은 알아보기 어렵습니다. 왜 그럴까요? 만약 가격이 나에게 문제가 된다면, 가격을 숨기려 할지라도 찾아볼 것입니다. 이는 매우 짜증나는 다크 패턴이고 사용자들은 항상 그것에 대해 불평할 겁니다.

결론: 상품의 가격을 가리지 말라. 알아보기 쉽고 접근할 수 있게 하라.

언어를 바꾸는 것이 숨겨져 있거나 불가능하다

가끔 외국 쇼핑몰에서 방문하고 제안들을 살펴보려고 했습니다wanted to take a look at the offer. 하지만 네덜란드어, 프랑스어, 스페인어... 그리고 모든 언어들을 완전히 이해할 수 없습니다. 그래서 영문 버전을 찾기 시작합니다. 헤더와 햄버거 매뉴, 푸터를 확인하지만, 언어 변경 표시는 찾아볼 수 없습니다.

결론: 영문 버전을 준비하라 (사용자에게 도움이 될 것이다. 전세계로 배송을 제공하지 않더라도if the shop doesn’t ship worldwide). 언어 변경 옵션을 쉽게 접근하고 알아볼 수 있는 곳에 위치시켜라.

모달과 팝업은 사용자의 인내심을 바닥나게 한다

모달과 팝업 아래에 중요한 요소들이 가려진다

모바일 쇼핑몰에서 주로 일어나는 현상으로 항상 놀라곤 합니다. 다른 모바일 디바이스에서 어떻게 보여지고 작동하는지 아무도 확인하지 않은걸까요? QA들에게 유용할 수 있습니다Some QA could come in handy... 몇가지 실생활에서의 예시입니다:

• ,,쿠키 정책" 모달과 다른 플로팅 요소들이 액션 버튼이나 구매 버튼을 가립니다
• ,,뉴스 레터 팝업" 은 액션 버튼을 가릴 뿐 아니라 창을 닫기가 매우 힘듭니다
• ,,챗봇" 은 액션 버튼이나 다른 내비게이션을 가립니다

결론: 사용자를 위해for the user’s sake, 주요한 기능이나 UI 엘리먼트는 항상 가려지지 않아야 한다. 잘 보이고 쉽게 접근할 수 있어야 한다. 데스트톱에서 잘 작동하는 것은 모바일에서 그렇지 않을 수 있다.

불분명한 내비게이션

두 가지 문제점이 있습니다:

• 카테고리가 사진이나 아이콘에 의해 가려지고 충분히 보여지지 않습니다
• 내비게이션이 표준이 아닌 창의적인 방법에 의해 디자인 되었다면, 사용자들이 이해하고 조작하기 어렵습니다

비록 많은 사람들이 햄버거 매뉴를 사용하는 것에 반대하지만, 여전히 햄버거 매뉴는 다른 어떤 낯선, 표준이 아닌 UI 엘리먼트와 패턴보다 낫습니다.

결론: 가장 간결하고 깔끔하며 표준인 내비게이션이 더 낫다. 쇼핑 과정을 빠르고 쉽게 만들기 위해서는 사용자가 어려운 패턴을 배우게 하지 마라.

 

Design: HYPE4 ( https://dribbble.com/dianahype4 )

경험이 쉽고 간단할수록 좋습니다. 쇼핑 과정은 기쁘고 가능한 한 빨라야 합니다. 사용자에게 그들의 선택에 대해 인지시키세요. 중요한 정보를 숨기지 마세요. 내비게이션을 쉽고 이해할 수 있도록 만들면, 사용자들은 조금도 망설이지 않을 것입니다. 잘 알려진 패턴을 사용하는 것은 가장 좋은 방법입니다. 그리고 만약 새로운 기능을 추가한다면, 그것이 데스크톱과 모바일에서 어떻게 보여지는지, 잘 작동하는지 항상 확인하세요.

2020.07.27 작성