2.토글 스위치 UX UI 가이드
[1]인풋컨트롤
1.토글은 디지털 온/오프 스위치이다.
토글스위치는 옵션을 한개만 선택 할 수 있다.
두개 중 하나를 선택 할 수 있다. (on/off)
디폴트 옵션이 있다. (on 또는 off가 선택되어있음)
상호배타적으로 작동한다. (on이 켜지면 off가 꺼지고 on이 꺼지면 off가 켜진다.
버튼을 누르는 즉시 적용된다.)
토글은 조작 할 때 즉시 적용되어야한다. 저장 또는 제출 버튼을 누를 누르도록 요청하지 않는다. 만약 저장 또는 제출버튼을 누르도록 하려면 체크박스 또는 라디오버튼을 사용해야한다.
리스트를 필터링 하는 경우에는 토글버튼이 아닌 싱글 체크박스가 올바는 적용이다.
2.간결하고 비중립적인 토글 스위치 라벨을 사용한다.
짧고 직접적인 단어를 사용한다.
메뉴와 버튼명은 키워드가 먼저 와야한다. 예를 들어 업데이트 알림 수신에 관련된 토글버튼을 만든다면
이메일 알림받기 (온/오프) 로 만들어야한다.
당신은 이메일로 업데이트 알림 받기를 원하십니까? (온/오프)로 만들지 말아다.
우리는 사용자가 필요한 것만 읽는 다는 것을 알고 있기 때문에 라벨은 키워드로 간결하고 장황한 표현은 줄여서 디자인한다.
의문문으로 작성하는 것은 빨리 내용을 파악하기에는 시간이 걸리니 피한다.
3.표준이 되는 토글 비쥬얼 디자인을 따른다.
토글 스위치는 슬라이더 모양으로 끄고 킬때 색이 칠해지는 모양으로 디자인한다.
맨 앞에 사용자가 토글버튼으로 상태를 변경하게 될 때 토글 스위치는 반드시 위치가 변경되어야한다. 우리가 실제 세상에서 스위치를 끄고 켜는 것처럼 변경되는 것이다.
토글 스위치에서 칼라는 시각적으로 확연하게 변화를 주는 중요한 요소로 두가지를 기억해야한다. 대비와 문화적인 차이이다. 디자이너들이 적은 대비의 컬러 효과로 토글 스위치를 디자인 한다면 변화가 잇는지 없는지 알기 어렵다. 그러므로 항상 높은 대비가 되는 색상으로 디자인하여 어떤 상태의 변화가 있는지 알기 쉽도록 한다. 추가로 사용자의 문화적 배경에 따라 인식되는 컬러 이미지가 다른 것을 고려해야한다. 예를 들어 빨강색은 직관적이지 않다. 대부분 빨강색은 멈추거나 경고를 하는 색으로 사용되기 때문에 빨강색으로 on을 표기하면 켰다는 것인지 껐다는 것인지 헷갈릴 수 있다.
만약에 on과 off를 추가로 적는다면 보통은 왼쪽에 off를 두고 오른쪽에 on을 둔다. 반대 방향일 경우 잘못 인지 할 수 있다.
4.일관성을 유지한다.
토글 스위치를 일관성있게 적용한다. 어떤 곳에는 라디오버튼을 썼다가 다른 곳에는 토글버튼을 사용한다면 사용자는 어떤 버튼을 선택했을때 바로 변경이 되는지 인지하기 위해 시간을 더 쏟을 것이다.
토글 버튼은 사용자가 업데이트 설정, 세팅 등을 조작할때 도움이 된다. 토글을 사용할대는 직접적인 단어와 표준 시각적 디자인 그리고 즉각적인 반응을 보여준다. 토글은 서로 반대되는 두가지 동작 중에 하나를 선택하는 것으로 사용해야한다.
+추가로 토글 스위치와 토글 버튼에 대해 제대로 알아보기
이 부부은 nngroup 이 아닌 uxmovement의 내용이다.
토글 스위치 제대로 사용하기!
토글 스위치가 잘못사용 되는 경우 사용자를 혼란스럽게 하거나 어려움을 겪게 만들수 있다.
토글의 상태와 옵션에 대해서 제대로 이해하고 적용해보자.
맥락 상태 변경 vs 시스템 상태 변경
디자이너들은 자주 이 두가지를 헷갈려한다. 토글 스위치와 토글 버튼은 상태를 변경 할 수 있는 것이 같은 점이지만 밑바탕은 완전 다르다. 토글 스위치는 시스템 상태를 변경하는 것이고 토글 버튼은 맥락을 변경하는 것이다. (영문으로.. Contextual 인데 맥락으로 번역해본다.. 어떤 한글 단어가 좋을까? ;;) 맥락은 오직 현재 스크린의 상태에 집중하는 것으로 시스템 상태는 앱의 모든화면에 영향을 끼지는 것이지만 맥락 버튼은 현재 스크린 페이지에만 적용된다.
이 둘이 혼동되어 잘못 자주 적용되는 예로 서치 필터이다. 서치 필터는 서치 결과에만 적용되는 맥락을 갖기 때문에 전체 시스템에 적용되는 것이 아니므로 체크박스가 적용되는 것이 적절하다. 서치 결과를 필터링하는데 스위치를 사용하는 것은 적절하지 않다.
사용자는 스위치가 즉각적인 효과가 나타나는 것을 기대하고 조작하게된다. 그러나 서치필터의 경우 바로 효과가 나타나는 것이 아닌 필터링하려는 값을 저장한뒤 검색하을 하게 되므로 변화가 바로 일어나지 않는다. 그렇게 때문에 스위치를 적용하는 것을 맞지 않다.
토글 스위치 버튼은 세팅에서 주로 찾아 볼 수 있다. 사용자가 시스템 상태를 변경하려고 접근하는 페이지이기 때문이다.
한 쌍의 옵션 VS 대조되는 옵션
스위치는 한 쌍의 옵션이고 상반되는 옵션이 아니다. 한 쌍의 옵션은 한개의 상태가 꺼지고 켜지거나 true 또는 false 상태로 적용되는 것이다. 대조되는 옵션은 두개의 서로 다른 두개의 상태를 각각의 상태로 사용자가 조작 할 수 있다.
몇몇의 앱들은 이부분에 스위치를 대조되는 옵션에 적용하는 실수를 범한다. 옵션 라벨을 서로 다른 반대편 스위치에 두고 켜고 끄듯이 사용하도록 하는데 이것은 잘못된 적용이다. 이런 조작은 사용자가 헷갈릴 수 있을 분 아니라 두개의 각각 다른 상태를 끌 수 없다고 잘못이해하게된다.
대조되는 옵션을 사용할대는 스위치가 아닌 토글 버튼을 적용한다. 예를 들어 리스트 뷰 또는 맵뷰 둘 중에 하나를 고를 수 있게 한다. 이런 토글 버튼은 스위치보다 나은데 그 이유는 사용자가 각각의 버튼을 양옆으로 눌러보면서 결과를 비교 할 수 있기 때문이다. 그리고 사용자는 옵션을 하나씩 바로 선택 할 수 있고 시각적인 결과물이 즉시 나오기 때문에 분명히 인지하고 조작 할 수 있다.
상태 변경 vs 액션 동작
스위치는 상태를 변경하는 역할이고 버튼은 액션을 일으키는 버튼이다. 다운로드 액션을 일으킬려면 스위치가 아닌 버튼을 적용해야한다. 스위치버튼을 적용하는 것은 다운로드를 할 수 있는 상태로 킨다는 뜻으로 잘못 인지 시킬 수 있다. 다운로드 상태를 켠다음에 어떤 버튼을 눌러야 다운로드가 되는것이지? 라고 생각하게 만들지 말고 다운로드라는 버튼을 심플하게 만들어서 적용한다.
토글 스위치를 적용하는 3가지 조건
1.맥락적인 것이 아닌 시스템 상태를 적용할때
2.대조되는 것들이 아닌 한쌍의 옵션을 표현할때
3.액션을 동작시킬때가 아닌 상태를 활성화 시킬때
https://uxmovement.com/mobile/stop-misusing-toggle-switches/
-
다양한 인터페이스 디자인 패턴에 대한 가이드라인에 대한 내용을 번역하고 옮기면서
내가 경험했던 UX UI디자인에 대한 지식들도 정리하고 공부하는 시간을 갖어보려고 한다!
오래된 아티클이어도~ 클래식은 클래스가 다르다!
이글에서는 인풋컨트롤에서 토글스위치 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] 에러
https://www.nngroup.com/articles/design-pattern-guidelines/#Input%20Controls
