폼에 선택 메뉴가 많을 경우 폼 작성을 포기하는 이유
Today
Today UX 아티클
UX Movement에 올라온 Anthony의 글 폼에 선택 메뉴가 많을 경우 유저가 폼 작성을 포기하는 이유를 전문 번역한 글입니다.
폼 입력 포기(form abandonment)는 마치 누군가 만나기로 약속했다가 막판에 취소해버리는 것과 같습니다. 사이트가 제공하는 것에 관심을 보였던 유저라면 무리 없이 폼을 입력하기 시작할 겁니다. 하지만 폼을 완성할 때가 되면, 포기할 이유가 많이 생기게 됩니다.
"선택 메뉴는 유저의 속도를 늦춘다"
한 가지 흔한 원인은 폼에 많은 선택 메뉴(select menu)가 있는 경우입니다. 리서처에 따르면 선택 메뉴가 있는 폼은 많은 경우에 유저들이 중도에 포기한다고 합니다. 완성하는 데 더 많은 시간과 노력을 필요로 하기 때문입니다.
흐름이 끊긴다
대부분의 폼은 유저가 타이핑을 하는 텍스트 필드로 시작합니다. 하지만 선택 메뉴가 등장하면 옵션을 선택하기 위해 손을 키보드에서 마우스로 옮겨야 합니다. 이렇게 되면 타이핑 흐름이 끊기고 속도가 느려지게 됩니다.
읽기 어렵다
선택 메뉴를 열고 나면 옵션을 쭉 훑어보고 알맞은 하나를 골라야 합니다. 옵션 텍스트가 읽기 어렵기 때문에 선택하는데 시간과 노력이 소요됩니다. 선택 옵션은 최소한의 줄 간격을 두고 리스트 안에 우겨 넣어져 있습니다.
미세한 마우스 조작을 해야 한다
선택을 하기 위해서는, 유저가 헤매지 않고 마우스를 정확한 옵션 위에 가져다 대야 합니다. 천천히 선택하지 않으면 잘못된 옵션을 선택하기 쉽기 때문에 미세한 마우스 조작이 필요합니다. 메뉴의 사이즈는 제한되어 있고 옵션 사이에 간격은 최소화되어 있습니다. 몇 픽셀만 마우스를 옮겨도 잘못된 옵션을 선택하게 될 수 있습니다.
선택을 한 후에는 제대로 된 옵션을 선택한 건지 확인해야 합니다. 그 후에 다시 손을 키보드로 옮겨와서 다음 텍스트 입력란에 입력을 해야 합니다. 이 모든 액션을 합쳐보면 선택 메뉴가 이용하기 어렵다는 것을 알 수 있습니다. 유저가 왜 선택 메뉴가 있는 폼 입력을 포기하는지 놀랄 일도 아닙니다.
화살표 키보드를 과도하게 많이 누르게 한다
어떤 유저는 마우스 대신 키보드를 이용해서 선택을 하기도 합니다. 하지만 이는 속도를 더 늦춰버립니다. 옵션을 전부 스크롤해서 내리려면 아래 화살표 키를 많이 눌러야 합니다. 옵션이 많아지면 매우 지루한 태스크가 될 것입니다.
모바일에서 플리킹을 해야 한다
데스크톱 유저는 메뉴를 조작할 때 추가적인 조작이 필요합니다. 하지만 모바일 유저는 피커(picker)에 있는 옵션을 플리킹(flicking) 할 때 추가적인 조작을 해야 합니다.
모바일에서 선택 메뉴를 열면, 휠 피커(wheel picker)가 보입니다. 원하는 옵션에 가기 위해서는 손가락으로 천천히 플리킹을 해야 합니다. 만일 조심스럽게 하지 않으면 지나쳐 버려서 잘못된 선택을 할 수도 있습니다. 이 때문에 조심스럽게 조작해야 하고 불 필요한 시간과 노력을 들이게 됩니다.
뿐만 아니라 옵션 텍스트가 길어지면 끝이 잘리게 됩니다. 말줄임표가 보이고 유저는 옵션 전체를 읽을 수 없게 됩니다. 이렇게 되면 유저가 옵션을 선택하기 어려워지고 폼 입력을 포기하게 될 수도 있습니다.
"선택 메뉴보다 더 나은 대안"
선택 메뉴를 폼에 넣는 건 최대한 피해야 합니다. 유저의 속도를 늦추지 않으면서도 태스크 플로우를 방해하지 않는 더 나은 대안들이 있습니다.
라디오 버튼
선택 메뉴에 옵션을 밀어 넣는 대신 라디오 버튼을 이용해 옵션 리스트를 보여주는 것이 훨씬 더 낫습니다. 모든 옵션을 볼 수 있기 때문에 유저는 메뉴를 열지 않고도 훑어볼 수 있습니다. 각 옵션의 간격도 더 넓기 때문에 타깃에서 벗어나도 잘못 클릭할 확률이 낮습니다.
유저가 라디오 버튼을 클릭하면, 즉각적인 시각적 피드백을 얻게 됩니다. 잘못된 옵션을 선택했어도 메뉴를 다시 스크롤할 필요가 없습니다. 다시 옵션을 찾아서 클릭하기만 하면 됩니다.
라디오 버튼은 버튼처럼 보여야 합니다. 충분한 간격이 있어야 하고 명확한 테두리가 쳐져 있어야 합니다. 그리고 클릭이 되었을 때는, 활성화되었다는 것을 색이나 모양의 변화로 알려줘야 합니다.
자동완성 텍스트 입력란
보여줄 옵션이 여럿일 때는 자동 완성 텍스트 필드를 사용하세요. 유저가 인풋 필드에 타이핑을 하면 그와 매치되는 옵션이 제안되는 것입니다.
유저가 더 많이 입력할수록 보다 구체적인 옵션이 하단에 뜨게 됩니다. 유저는 인풋을 전부 입력하는 대신 제안된 옵션 중에서 선택하여 시간을 아낄 수 있습니다.
자동완성 텍스트 입력란에는 먼저 해당 입력된 텍스트와 가장 잘 매치되는 옵션이 보여야 합니다. 유저가 입력한 텍스트와 제안 옵션은 명확히 구분해야 합니다. 입력한 텍스트와 매치되는 옵션은 다른 색으로 강조하여 대비 효과를 줘야 합니다.
"선택 메뉴를 써야 하는 유일한 상황"
선택 메뉴는 딱 한 가지 상황에서만 이용되어야 합니다. 유저가 특정 전문용어로 답을 해야 하는 경우입니다.
예를 들어, 만일 유저의 민족성을 알고 싶다면, 여러분이 사용하는 전문 용어를 옵션으로 제공하여 유저가 선택하게 해야 합니다. 만일 구체적인 옵션을 제공하지 않으면, 유저는 모호한 답을 줄 것입니다. ‘중국’이라고 쓰는 대신 ‘아시아계’라고 쓸 것이며 ‘독일’이라고 쓰는 대신 ‘유럽계’라고 쓸 겁니다.
"포기 유발"
많은 유저가 폼을 입력하기 시작하지만 전부 폼을 마무리하진 않습니다. 폼을 중간에 이탈할 이유를 주면 안 됩니다. 유저가 제일 싫어하는 것이 미세하게 마우스를 조작하고 선택 메뉴를 플리킹 하는 것입니다.
대부분의 사이트에선 유저가 폼까지 가는 데는 많은 노력을 기울이지만 선택 메뉴를 이용하게 하여 그 유저를 놓치고 맙니다. 유저의 시간과 노력을 아껴준다는 관점에서 고민해보세요. 포기를 유발하지 않는 더 나은 대안을 선택해야 합니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
