brunch

You can make anything
by writing

C.S.Lewis

by Potatohands Jan 26. 2023

3. 폼에서 체크박스 vs 스위치   UX UI 가이드

[1] 인풋컨트롤

체크박스는 사용자가 목록의 옵션 수를 원하는 대로 선택할 수 있을 때 사용한다.


스위치는 두 가지 옵션 중 한 가지를 선택하는 것도록 할 때 사용한다.

온/오프 또는 예/아니오 두 가지 중 한 개를 선택해야 하는 것을 말한다.

체크박스와 다르게 양자택일이다.



물리적인 환경의 예를 들면 조명을 끄고 켤 때 우리는 스위치를 눌러 끄거나 키거나

둘 중 하나의 상태를 선택하게 된다.


안드로이드 또는 ios에서는 기본 디자인 스위치 컴포넌트를 제공하고 있어

프런트앤드 개발에 용이할 수 있다.



폼이 데스크톱이나 노트북에서 주로 활용될 때는 체크박스가 더 적절할 수 있다.

마우스로 작동시킬 때 데스크톱이나 노트북에서 스위치는 덜 적합하기 때문이다.


폼의 역할에 따라 체크박스나 스위치 적절하게 사용해야 한다.

스위치는 켜는 방향으로 젖혀질 때 즉시 변화가 있어야 한다.


-

동영상으로 되어있는 아티클이어서

앞의 2개의 글을 레벨업하는 정도의 정보량이지만

정리하는 느낌으로 작성해 보았다!


https://www.youtube.com/watch?v=EoEeRWHJ8xs


이글에서는 인풋컨트롤에서 폼에서 체크박스 vs 스위치 UX UI를 다루었다.

[1] 인풋컨트롤

1. 체크박스 vs 라디오버튼
2. 토글스위치 가이드라인

3. 폼에서 체크박스 vs 스위치


------아래는 앞으로 번역하며 공부할 내용------


4. 스탭 UX UI 입력 디자인 가이드라인

5. 날짜 입력 폼의 UX 디자인 가이드라인

6. 스플릿 버튼 (드롭다운 또는 다른 기능 선택버튼) 정의

7. 슬라이더, 노브 (동그란 밸브모양 컨트롤러는 왼쪽 오른쪽으로 돌릴 수 있는 것), 메트릭스 (x, y 도표 위에 있는 선을 컨트롤하는 것)

8. 체크 리스트 모바일 입력 필드

9. 모바일 디바이스에서 쉽게 입력할 수 있는 방법

[2] 폼과 위자드

[3] 툴팁, 다이어로그, 지시문이 있는 오버레이

[4] 아이콘과 인디케이터

[5] 메뉴 디자인

[6] 내비게이션 요소들

[7] 서치

[8] 에러


매거진의 이전글 2.토글 스위치  UX UI 가이드
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari