마케팅 콘텐츠
구매 버튼, 크게만 넣으면 끝일까요?
상세페이지 구매·옵션 버튼의 터치 영역이 작으면 손가락 끝이 다른 요소를 눌러 오탭이 생기기 쉽습니다. 버튼 크기와 간격 기준, 영역을 넓히는 실무 방법을 정리합니다.
상세페이지를 스마트폰으로 직접 눌러본 적 있으신가요? 구매 버튼인 줄 알고 눌렀는데 옆 아이콘이 눌리는 경우가 종종 있습니다.
PC 모니터로 시안을 확인할 때는 버튼이 충분히 커 보였는데, 손가락으로 직접 누르는 모바일 화면에서는 사정이 다릅니다.
문제는 디자인 시안을 모니터로만 확인하고, 실제 손가락이 누르는 터치 영역의 크기를 따로 점검하지 않는다는 것입니다.
하지만 터치 영역의 최소 크기 기준과 버튼 사이 간격만 지켜도 오탭을 크게 줄일 수 있습니다. 지금부터 그 기준을 살펴보겠습니다.
상세페이지 버튼, 왜 자꾸 다른 게 눌릴까요?
스마트폰으로 상세페이지를 보는 고객은 마우스 커서 대신 손가락 끝으로 화면을 누릅니다. 손가락 끝이 실제로 닿는 면적은 화면에 보이는 버튼 모양보다 훨씬 넓어서, 버튼이 작으면 의도한 곳이 아니라 옆 요소가 눌리는 일이 자주 생깁니다.
디자인 시안에서 보기 좋던 버튼이 실제 화면에서는 손가락에 가려 다른 영역을 누르게 만드는 경우가 많습니다. 구매 버튼, 옵션 선택 버튼, 찜하기 아이콘이 나란히 붙어 있는 상세페이지일수록 이 문제가 두드러집니다.
이번 글에서는 모바일 환경에서 실제로 쓰이는 터치 영역 크기 기준과, 버튼을 촘촘히 배치했을 때 생기는 오탭을 줄이는 간격 기준을 살펴보겠습니다.
