[번역]당신의 판매를 방해할 심각한 UX실수들

Lee Jiyeon
7 min readJul 18, 2021

본 아티클은 “Serious UX mistakes that are sabotaging your sales”을 번역한 내용으로 전문 번역가가 아니기에 오역 또는 직역 등 부족한 점이 있을 수 있습니다. 참고하셔서 글을 읽어주시면 감사하겠습니다.

여름이 코앞으로 다가왔다. 나는 대게 인터넷을 통해 쇼핑을 해왔고 여름 옷과 악세사리들을 최근에도 샀다. 이것은 이런 인터넷 쇼핑몰이 잠시 생각을 할 수 있는 아주 좋은 기회이다. 쇼핑 경험은 항상 즐겁지는 않았다.

휴대용 기기의 접근이 더 쉬워질수록 E-commerce와 m-commerce 모두 떠오르고 있다.

• 대략 5명의 미국인 중 4명은 현재 절반 이상은 모바일 기기를 사용해 물건을 구매하는 온라인 쇼핑을 하는 사람들이다.

  • 당신의 모바일 스토어에서 부정적인 경험을 갖고 있는 사용자는62%로 향후 당신으로 부터 물건을 구매하지 않게 될 것이다.

여기에 내가 목격해온 가장 공통된 UX실수들에 대해 최근 관찰한 것들이 있다.

항상 쇼핑 카트의 양을 보여줘라. 사용자가 안에 무엇이 있는지 알 수 있다.

카트에 어떠한 숫자도 보여주지 않는다.

나는 제품을 좋아하면, “장바구니에 담기” 버튼을 클릭한다. 그리고… 음.. 아무일도 일어나지 않는다. 어떠한 언급도 없다. 카트 아이콘은 아무것도 보여주지 않는다. — 단지 우측 상단에 있을 뿐이고 실제 그곳에 무엇이 담겨 있는지에 대해 나에게 말해줄 생각이 없어보인다.

“제품이 추가된거야? 아니면 살수 없는건가? 내가 다시 해야하나?” 나는 몇 가지 실수들이 있었는지 생각해보고, “담기” 버튼을 클릭하고 또 클릭하고 또, 또다시, 또 클릭을 하고 내가 마침내 카트에 들어갔는지 확인을 하고 나서야, 그곳에 10개가 담겨있는 것을 확인하였다.

결론 : 사용자가 카트에 물건을 담고 난 후 바로 카트 아이콘에 추가된 아이템의 수를 확실히 보여줘야 한다.

쇼핑 목록을 수정하기 어렵다.

나는 제품의 수를 편집하고 싶었다. (예를들어, 내가 우연치않게 “장바구니에 담기”버튼을 2번 클릭했을 때) 그러나, 그렇게 할 수 있는 쉬운 방법이 없다. 나는 결국 카트에서 그 아이템을 완전히 삭제해야 했고, 다시 추가할 수 있는 방법은 없으며, 카달로그에서 다시 검색해야 했다. 나는 결국 짜증이 났고 물건을 사지 않고 그 쇼핑몰을 떠났다.

결론 : 항상 아이템의 수를 편집할 수 있는 쉬운 방법을 제공해라. 카트 아래 어딘가에는 사용자가 흥미를 가질 수 있을 만한 아이템을 제안해라.

왼쪽 : 읽기가 불가능하다. 오른쪽: 대비와 가독성이 향상되었다.

CTA와 구매 버튼의 악몽

이것에 대해서는 2가지 주요한 문제가 있다.

첫째 : 예를들어 메인 CTA-“지금 구매”, 또는 “콜렉션 만들기”는 거의 보이지 않는다. 종종, 정교한 아웃라인에 매우 읽기 힘든 폰트를 사진위에 적절치 않은 대비로 위치시킨다. 왜 그곳에 놓는건가? 그것은 보이지가 않는다. 사용자들은 그냥 그것을 무시할 것이다. 나는 많은 사용자 세션을 경험했고 그 버튼들의 전환은 거의 0에 가까웠다.

둘째 : 확인할 때, 2개의 버튼 : “뒤로가기” 그리고 “결재 진행”이 완전히 똑같다. 도데체 왜이러는건가?? 당신은 당신의 고객이 정말로 물건을 사기를 원하는 것인가?

결론: 당신의 CTA을 두드러지게 만들어라. 다른 스타일과 컬러를 사용하고 그것은 오직 CTA버튼을 위해서만 사용하라. 이것은 사용자들을 다른 요소들로 부터 CTA버튼을 차별화할 수 있도록 도울 수 있을 것이다.

너무 많은 것이 보여진다.

말 그대로, 쇼핑 사이트에서 모든것들이 소리치고 있는 상황이다. “나를 구매해!!!”, “여기좀 봐!!”, “여기 클릭해봐!!”. 이것은 나를 거의 미치는 단계로 까지 짜증나게 만들었다. 나는 어떤 것에 집중해야할지 모르겠다. 부담스럽게 느껴진다. 많이 제공하고 싶어 하지만 내가 많이 배우고 싶어하나? 아마 아닐 것이다. 안녕…

결론 : 사용자에게 여유를 주어야 한다. 한 번에 하나씩. 이것은 더 넓게 제공하는 것이 좋으며, 더 많은 옵션은 사용자들이 결정하기 더 힘들게 할 것이다. “밀러의 법칙”을 진지하게 확인해보자 그리고 사용자의 인지에 부담을 주지 말자.

가격을 가리지 말자 — 이것은 진실되지 못해 보이게 만든다.

가격을 숨긴다.

알고있다. 럭셔리 쇼핑몰은 마케팅 전략 때문에 제품의 가격을 보여주지 않는다는 것을 (예를들어, 샤넬 — 내가 그들의 가방과 악세사리를 사랑하지만, 가격은 항상 놀랍고 그늘은 그들의 부티크에서의 쇼핑 경험에 대한 그 자체이다.)

그러나 가끔 일반 쇼핑몰도 가격을 보여주지 않는다. 또는 거의 보이지 않는다. 왜이렇게 하는 것인가? 만일 가격이 나에게 관심을 끈다면, 나는 비록 당신이 고객들로부터 가격을 숨겨두었을지라도 그것을 찾아볼 것이다. 이건 매우 짜증나게하는 다크패턴이고 사용자들은 항상 그것에 대해 불평을 한다.

결론 : 제품의 가격을 숨기지 말라. 그것을 분명히 더 잘 보이고 접근하기 쉽게 해라.

언어를 바꾸는 것을 숨겨두거나 불가능하다.

종종 나는 해외 쇼핑몰에 방문하고는 했고 제공되는 것을 보고 싶었다. 그러나 그곳에는 독일어, 프랑스어, 스페인어 그리고 내가 완전히 이해할 수 없는 언어들이 있었다. 그래서 나는 영어 버전을 찾기 시작했다. 헤더, 햄버거, 메뉴, 푸터를 확인했으나 언어 변환에 대한 어떠한 사인도 없었다.

결론: 쇼핑몰이 영어버전을 갖고 있음을 명확히 해라. (그것은 비록 그 쇼핑몰이 글로벌 배송은 아닐지어도 사용자들에게 도움이 될 것이다.) 언어 변환 옵션의 위치는 쉽게 접근할 수 있고 눈에 띄는 곳에 위치해라.

모달들과 팝업이 사용자의 인내심을 극도록 짜증나게 한다.

중요한 요소들을 모달이나 팝업 아래 숨겨둔다.

이것은 대개 모바일 버전의 쇼핑몰에서 일어나고 나는 항상 놀랍다. 누구나 이 쇼핑몰을 확인하는데, 어떻게 다른 모바일 기기에서 보고 동작하는가? 몇몇 QA는 편안하게 할 수 있다. -실제 사례이다.

• 쿠키 정책 모달 또는 다른 플로팅 요소들이 메인 CTA나 구매 버튼을 덮어버린다.

• 뉴스레터 팝업이 메인 CTA버튼을 덮고 있고 그것을 닫기가 너무 힘들다.

• 챗봇이나 다른 도움을 주는 요소가 CTA나 몇몇 네비게이션을 가린다.

결론: 사용자를 위해서, 항상 다른 요소들이 메인 피쳐나 UI요소를 가리지 않도록 해야하고, 그들이 그것을 잘 보고 쉽게 접근할 수 있도록 해야한다. 데스크탑에서 잘 되는 것들이 모바일에서도 항상 잘되지는 않는다.

왼쪽: 너무 이상하고, 불명확한 패턴들 오른쪽: 더 간단한 양식과 이해하기 좋음

불명확한 네비게이션

역시 2가지 문제가 있다:

• 특정 카테고리를 사진 아래 또는 아이콘 아래에 숨기고 그들이 충분히 눈에 띄지 않는다.

• 네비게이션이 표준이 아니며 독창적으로 디자인 되었고 이것은 사용자들이 이해하고 동작하기 어렵게 한다.

비록 많은 사람들이 햄버거 메뉴를 사용하는 것에 반대하지만, 나는 그것은 여전히 다른 이상하고 전형적이지 않은 UI요소와 패턴들 보다 햄버거가 더 낫다고 생각한다.

결론: 더 심플하고, 분명하고 전형적인 네비게이션이 더 좋다. 당신의 주요 포인트가 쇼핑 프로세스를 빠르고 쉽게 만들어 줄 수 있을 때 사용자를 어려운 패턴을 사용하게 하지 말아라.

더 쉽고 심플한 경험이, 더 좋다.

쇼핑 프로세스는 더 즐거워야 하고 가능한 빨라야 한다. 그들의 선택에 대해 사용자에게 알려줘야 한다. 중요한 정보를 숨기지 말아야 한다. 네비게이션은 쉽고 이해하기 쉽게 만들어서 사용자들이 잠시동안 비틀거리지 않도록 해야한다. 잘 알려진 패턴을 사용하는 것이 최고의 옵션이다. 그리고 만일 당신이 새로운 피쳐를 추가한다면, 항상 어떻게 그것들이 보여질지 그리고 데스크탑과 모바일에서 모두 잘 작동하는지를 확인해야한다.

--

--