brunch

You can make anything
by writing

C.S.Lewis

by UX 컨설턴트 전민수 Oct 18. 2016

체크박스에 호버 효과를 줘야 하는 이유

UX 디자인 배우기 #52

Today UX 아티클


UX Movement에올라온 Anthony의 글 Why You Should Add Hover Effects to Your Checkboxes를 전문(全文) 번역한 글입니다. 


체크박스와 라디오버튼은 텍스트 입력란만큼 많이 이용되지않아서 디자이너들에게 무시를 받곤 합니다. 작아보일 수도 있지만 폼에서 질문에 사용되면 강력한 효과를낼 수 있습니다. 체크박스 및 라디오버튼을 호버효과와 함께 이용하기 쉽게 만들어야 하는 것도 그 이유입니다. 


체크박스와 라디오버튼의 문제점은 클릭 타겟이 작다는겁니다. 이 두가지를 활성화하기 위해서 유저는 작은 네모나 원을 클릭해야 합니다.  레이블을 클릭해도 되는 경우도 있긴 하지만 이게 모든 폼에서 가능한 건 아닙니다. 쓸 수 있는 경우라 할지라도 유저가 직관적으로나 명확하게 그 옵션을 알 수 있는 건 아닙니다. 레이블을 클릭 가능하게 만들어도 클릭 타겟이 커지는 것은 아니어서 여전히 어포턴스에 있어서 명확성이 부족합니다. 




마우스를 체크박스나 라디오버튼에 올렸을 때 호버효과를 보여주면 유저에게 보다 강력하고 직관적인 어포던스를 만들어줄 수 있습니다. 호버 효과는 레이블이 클릭 가능한 타겟이라는 점을 시각적으로 유저에게 알려줍니다. 레이블을 클릭할 수 있다는 것을 유저에게 알려주면 유저가 여러분이 만든 앱을 이용할 때 들이는 시간과 노력을 아껴줄 수 있습니다. 큰 것들이 주로 우리의 시선을 끌긴 하지만, 이 경우엔 작은 것도 시선을 끄는 경우가 있습니다.





12,000명 브런치 구독자를 위한 특별한 혜택!!!!! 
라이브 클래스 PM VOD 패키지(리서치/분석/기획/전략/설계) 추천
300시간 이상 UX 강좌, PM을 위한 180여개 UX 강좌 묵음 패키지 

브런치 구독자에 한해 정가 대비 90% 할인 쿠폰 증정합니다. 

쿠폰 코드: 20241231

상세 정보 확인하기 

https://ebprux.liveklass.com/


매거진의 이전글 링크(links) Hover Effect 원칙

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari