it-swarm-korea.com

토글 버튼에 현재 상태 또는 변경 될 상태가 표시되어야합니까?

두 상태 사이를 전환하는 버튼에 대한 간단한 질문이 있습니다. (재생/일시 정지 또는 셔플/정규 재생을 생각하십시오.) 제목에서 알 수 있듯이 토글에 현재 상태 또는 전환 될 상태가 표시되어야합니까?

사람들은 Play/Pause 컨벤션에 익숙하다고 생각합니다. 그러나 현재 대신 전환 상태를 표시하면 셔플/일반 재생이 더 혼란 스러울 수 있습니다. 예를 들어 Xbox 360의 내장 음악 플레이어는 다음과 같이 작동합니다. 셔플 모드 인 경우 직접 재생 아이콘이 표시되고 그 반대도 마찬가지입니다.

이런 식으로 봅니다 : 재생/일시 정지는 재생 시작 또는 재생 일시 정지와 같은 동작과 유사합니다. 예, 배후에서 상태 전환이지만 사용자에게는 조치가 있습니다. 셔플/스트레이트 플레이는 옵션이며 현재 상태를 표시하는 것이 가장 좋습니다 (옵션이 활성화/비활성화되었음을 나타내는 아이콘 및 변경 단추가 하나만있을 수 있음). 생각?

461
Michael Brown

에서 About Face 2. (v3는 있지만 가지고 있지 않습니다) Cooper와 Reimann (2003, pp. 341-2)은이 주제를 "플립 플롭 버튼 : 피해야 할 선택 관용구"제목. 발췌 부분 만 제시 할 것이므로이 책을 참조하십시오.

플립 플롭 버튼 컨트롤은 매우 효율적입니다. 단일 제어로 상호 배타적 인 두 가지 옵션을 제어하여 공간을 절약합니다. 플립 플롭 컨트롤의 문제점은 모든 컨트롤의 두 번째 의무를 이행하지 못하여 사용자에게 현재 상태를 알려주는 것입니다. 상태가 꺼져있을 때 버튼에 ON이 표시되면 설정이 무엇인지 확실하지 않습니다. 그러나 상태가 꺼져있을 때 OFF이면 ON 버튼은 어디에 있습니까? 사용하지 마십시오. 버튼이 아니라 메뉴가 없습니다!

저자 (그리고 나는이 주제에 대한 권위라고 생각합니다)는 두 가지 가능한 해결책을 제시합니다 : 당신은 버튼의 행동을 동사구 로 철자해야합니다 (예 : 세로 모드로 전환 따라서 일부 저장 공간이 희생 됨) 또는 다른 기술 을 완전히 사용 ( 예를 들어, 두 개의 라디오 버튼).

268
jensgram

짧은 답변 :

아직 답이 늦었지만 여기에 아무도 지적하지 않은 것에 놀랐습니다. 토글 스위치가 현재 상태 단순히 상태가 바뀌는 상태 버튼 대신 텍스트 외부 를 가짐

Real Life Switches

긴 답변 :

dotancohen이 지적한대로 :

문제는 영어에서 "on"과 "off"는 부사와 형용사입니다.

몸 바깥에 텍스트가있는 버튼은이 사실을 유리하게 사용합니다! 읽어...


iOS On-Off Switch

파란색 인 상태에 초점을 맞추고 예를 들어 ON 이라고하겠습니다.

iOS ON

스위치가 현재 켜져 있는지 또는 슬라이더를 이동/클릭/탭하면 스위치가 켜져 있는지 알 수 있습니까? 텍스트가 분명합니까? 여기서 "ON"이 상태 (형용사) 또는 조치 (동사)입니까? 불분명합니다. 결정에 도움이되는 색상이 있습니까? 아마도 확실하지는 않지만 iOS 사용자는이 디자인의 상태에 익숙 할 수 있지만 비 iOS 사용자가 이것을 어떻게 해석하는지는 알 수 없습니다. 무슨 뜻인지 알아 보려면 iOS 스위치와 동일한 디자인의 실제 트립 스위치를 사용하십시오. 트립 스위치가 현재 켜져 있는지 확인할 수 있습니까?

Ambiguous Trip Switch

아래 스위치는 iOS 디자인의 라인을 따라 있지만 훨씬 더 나쁩니다.

Ambiguous On-Off Switch

... 슬라이드/클릭 핸들의 절반이 확실하지 않습니다!


Unambiguous On-Off Switch

Jensgram의 인용문에서 나온 질문 ...

상태가 꺼져있을 때 버튼에 ON이 표시되면 설정이 무엇인지 확실하지 않습니다. 그러나 상태가 꺼져있을 때 꺼져 있으면 ON 버튼은 어디에 있습니까?

... 버튼이 ON 또는 OFF로 표시되지 않기 때문에 여기서는 발생하지 않습니다. 또한 ON과 OFF라는 단어의 맥락에 대해 혼동이 없습니다. (일반 디자인에서) 클릭하면 아무것도하지 않기 때문에 매우 명확하게 상태 (형용사)입니다!

이 디자인을 수정하면 버튼의 먼쪽에있는 텍스트를 클릭 가능/탭 가능하게 만들 수 있습니다. 그렇다면 스위치 핸들에 더 가까운 단어는 상태이고 다른 하나는 동작이며 스위치를 토글하면 역할이 바뀝니다.

Modded On-Off Switch

그럼에도 불구하고 스위치에 대한 사용자의 관점은 변경되지 않습니다. 사용자는 현재 스위치의 현재 상태에 대해 혼란스러워하지 않습니다. 실제로 현재 상태를 강조 표시하여 사용자 친 화성을 위해 디자인을 더욱 향상시킬 수 있습니다.

Highlighted On-Off Switch


Win8 On-Off Switch

버튼의 색상은 현재 상태 (실제와 같이 점등 = 켜짐)를 나타내며 옵션 텍스트 아래의 On/Off는 현재 상태를 사용자에게 알려줍니다.

414
SNag

무엇을 결정하든 트위터가하는 일을하지 마십시오.

Aargh don't change the button when I'm about to click it!

60
Daniel Alexiuc

문제는 영어에서 "on"과 "off"는 부사와 형용사입니다. 따라서 또는 동사 또는 형용사로 대체 단어를 찾으십시오. 버튼 :

Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped

매우 늦게 편집 : 내 동료가 디자인 한이 훌륭한 스위치를 참조하십시오. "켜기/끄기"라는 용어를 계속 유지하면서도 여전히 명확합니다.

on off switch

35
dotancohen

버튼이 꺼져있을 때는 버튼이 강조 표시되지 않고 (중립 배경색이있을 수 있음) 켜져있는 상태이면 강조 표시됩니다 (배경색 변경).

예를 들어 Spotify (웹) 앱의이 스크린 샷을 보면 셔플이 켜져 있거나 꺼져 있다고 생각하십니까?

Shuffle is most certainly on

26
Marks Polakovs

나는 당신이 당신의 질문에 꽤 잘했다고 생각합니다.

토글이 동작 (일시 정지/일시 정지) 인 경우 발생할 일을 표시해야합니다. 따라서 일시 정지 된 동안에는 Play가 표시되고 Show Pause가 재생되는 동안 표시됩니다.

토글이 셔플/선형 옵션 인 경우 현재 상태를 표시해야합니다.

한 버튼이 동작이고 다른 버튼이 확실하지 않은 옵션임을 사용자에게 표시하는 방법 ...

25
ChrisF

ChrisF가 말했듯이 작업 단추상태 단추를 구분하는 것이 중요합니다.

버튼에 텍스트가있는 경우 텍스트를 클릭하면 클릭하면 무언가가 수행됨을 표시하도록 변경할 수 있습니다 (예 : "셔플 재생 켜기"). 그러나 귀하의 경우 아이콘만이므로 상태에 따라 활성화/비활성화 된 셔플 아이콘 만 사용합니다. 사용 중지 된 경우 사용자에게 올바르게 재생되는지 명확해야합니다. 불을 켜거나 버튼을 누른 상태로 표시 할 수 있습니다.

마우스 오버시 툴팁을 추가하여 더 명확하게 만드십시오.

20
mbillard

두 가지 옵션이 모두 표시되고 그룹화되며 활성 옵션이 명확하게 강조 표시되는 결합 된 동작/상태 버튼 인 iOS (및 다른 곳)에서 사용 된 기술에 대한 언급이없는 것이 놀랍습니다.

끔찍한 아스키 예술 :

[ ON | off ]

Airplane mode toggle on iOS

20
jezmck

나는 "사용하지 마십시오."

명확한 켜기 및 끄기 상태가있는 경우 토글 버튼을 사용할 수 있다고 제안합니다. 예를 들어, 클릭 할 때 회색으로 표시된 단추 줄이있을 때 이런 현상이 발생할 수 있습니다.

이것이 많은 경우에 재생/일시 정지가 작동하는 이유입니다. 재생 버튼은 활성화/비활성화로 두 상태 사이를 토글하지 않습니다. 켜면 밝은 녹색으로 변하고 (재생 중입니다!) 회색으로 바뀌고 || 꺼져있을 때 (나는 재생하지 않습니다!).

다른 버튼도 똑같이 작동하므로 일관성이 여유를 더해줍니다. 또한 테이프 데크 또는 VCR에 대한 과거의 인식을 기반으로했을 것입니다. .

그러나 단순히 "활성화"되지 않은 경우 토글을 못생긴 확인란으로 바꿀 수없는 경우 이미 언급 한 모든 이유로 "사용하지 마십시오"로 기본 설정됩니다.

추가

나는 오늘 Evernote가 매우 효과적인 토글을 가지고 있음을 알았습니다. 그들은 마우스 오버 방식을 취했으며 실제로 실제로 잘 작동했습니다. 이것은 켜짐/꺼짐 스타일 컨트롤의 또 다른 경우입니다.

toggled off

toggled on

추가 추가

오늘이 흥미로운 스위치를 발견했고이 UX Q & A를 상기 시켰습니다. 상태가 어떻게 명백한 지, 그리고 만질 때 상태가 바뀌는 것은 질감 처리 된 "손잡이"(즉, 여유도)에 의해서도 분명해진다는 사실에 주목하십시오. 반대쪽에 지금 말하는 것과 반대라고 말하십시오. 비행기 화장실과 같습니다.

그래서 그들은 잘 할 수 있습니다.

toggled offtoggled on

20
Kato

여기에 이미 18 개의 답변이 있으므로 파티에 늦을 수도 있지만 이러한 상황에서 확인란을 사용하는 것이 좋습니다. 몇 가지 예 :

enter image description here

그리고 선택하면 :

enter image description here

이것은 Facebook의 "Like"가 사용 인 "dim/lit"접근 방식과 유사하지만 더 나은 가시성을 위해 확인란과 결합됩니다. 어쨌든 요점은 사용자가 여러 단어 중에서 결정하도록하는 대신 단 하나의 단어 만 사용 (또는 단어 집합)입니다.

또한 음수 접두사를 사용하지 않도록주의하십시오 ( "Not", "Non-", "Un- = ","Dis- ","Im- ","Mis- "," In- ","Il- ","Ir- ") 그렇지 않으면 사용자는"이중 음수 "를 수행해야합니다. 그가 있었을 때 그의 마음에 un확인란을 선택했습니다.

enter image description here

20
Pacerier

Toggle Button을 사용하여 다음 상태를 가진 간단한 Toggle Button (한 번에 상태가 보이는 버튼)을 사용하여 컬렉션에 요소를 "추가"및 "제거"했습니다.

  • 추가 (버튼을 클릭하지 않은 경우)

  • 제거 (버튼을 이전에 클릭했고 항목이 이제 컬렉션의 일부인 경우)

그러나 이것은 초보자 사용자 (50 세 이상)와 관련하여 항상 나를 괴롭 혔습니다. 처음에 무슨 일이 있었는지 이해하기 어려웠으며 항목이 이제 컬렉션의 일부라는 것을 알기 전에 버튼이 "제거"를 요구하는 이유는 무엇입니까? 이 경우 누락 된 비트는 "항목을 성공적으로 추가했습니다"라는 알림 메시지입니다. 화면 상단에 나타나는 - http://Twitter.github.com/bootstrap/javascript.html#alerts 를 사용하여 Javascript 기반 상태 메시지를 사용하고 있지만 시각적으로 대체 되었기 때문에 상호 작용의 요소로 일부 사용자의 문제 중 일부만 해결했습니다.

또 다른 문제

버튼은 클릭 할 때마다 "스탠스"또는 "사이드 플립"을 변경합니다. 때로는 "추가 버튼입니다"라고 표시되고 때로는 같은 버튼 (다른 추가 버튼 중 같은 열에 있음)에 "제거 버튼입니다"라고 표시됩니다. 색상을 변경하면 도움이되지만 여전히 하나의 버튼으로 두 가지 역할을 수행합니다. NOT SO 맞습니다.

내 솔루션 :

이 사소하고 잘 논의 된 문제에 대한 나의 해결책은 토글 버튼을 이와 같은 것으로 바꾸는 것입니다.

클릭 후 캡션 "추가"가있는 버튼 클릭 후, 버튼은 "성공적으로 추가되었습니다"라는 메시지로 대체되고 "X"레이블이있는 작은 24x24 버튼을 표시하며 항상 "추가"인 마지막 동작을 취소 할 수 있습니다. . 따라서 "제거"버튼을 클릭하지 않고 이전 "작업 추가"만 "취소"합니다. 또한 페이지에 별도의 "성공적으로 추가됨"알림을 표시 할 필요가 없습니다. 이 방법의 단점은 "성공적으로 추가됨"레이블과 "취소 단추"를 넣을 공간이 더 필요하다는 것입니다. 그러나 이것은 다소 혼란스러운 접근 방법 중 하나입니다.

enter image description here

12
Salman Ehsan

많은 경우 이러한 버튼을 피하는 것이 유용하거나 가능할 수 있습니다.

예 : 셔플/레귤러 플레이의 경우 : 옆에 "셔플"레이블이있는 확인란을 사용하면 아무도 혼동되지 않습니다.

재생/셔플 버튼의 경우 버튼의 레이블을 변경하지 않아도됩니다. "누른"버튼을 사용하여 "재생 중"을 표시하고 "위"버튼을 사용하여 "재생 중이 아님"을 표시 할 수 있습니다. 또는 물론 UI의 다른 곳에 표시기를 넣을 수 있습니다 (내 스테레오 시스템이하는 일입니다 ...).

일부 회사는 특정 위젯을 사용하기 시작한 것이 아니기 때문에 갑자기 모든 것에 사용해야합니다 ...

11
JanC

Facebook에서 좋아요 버튼은 토글 버튼에 대한 좋은 예입니다.

Facebook의 Android 앱에서 좋아요는 버튼에 있으며 꺼져 있으면 회색으로 표시되고 켜져 있으면 파란색으로 강조 표시됩니다. 아래 스크린 샷을 참조하십시오.

기본적으로 나는 그들에 동의합니다-긍정적 인 것을 강조하고 사용자의 두뇌를 엉망으로 만들지 않습니다 (최소한의 변화).

색맹에 좋은 방법인지 확실하지 않습니다. 아마도 그들은 더 대담한 표시를했을 것입니다.

enter image description hereenter image description here

Facebook의 web-app에서 패턴이 다릅니다. 버튼의 텍스트가 변경되어 클릭시 발생하는 동작을 나타냅니다. 혼란 스럽습니다. 그러나 공간이 많고 사용자가 게시물을 좋아한다는 별도의 표시가 있기 때문에 이치에 맞습니다.

enter image description hereenter image description here

9
AlikElzin-kilaka

예를 들어 iOS 토글의 현재 디자인에 중요한 다음 비디오 (1991 년부터!)를 보는 것이 좋습니다. https://www.youtube.com/watch?v=wFWbdxicvK

그리고 해당 논문 : http://dl.acm.org/citation.cfm?id=143079

비교 한 토글은 다음과 같습니다. The toggles they compared 그리고 선호하는 결과 : Results of the preference test

7
Riche Design

레이블이 지정된 버튼 (토글 버튼)은 종종 지적했듯이 혼란 스럽거나 모호합니다. 대신에
다음과 같이 상태 표시 :

온라인 Go offline

따라서 현재 상태를 명확하게 나타내는 클릭 할 수없는 레이블과 상태 변경 작업을 수행하는 클릭 가능 버튼이 있습니다.

"오프라인으로 이동"버튼을 클릭하면 레이블이 "오프라인"으로 변경되고 버튼이 "온라인으로 이동"으로 변경됩니다.

현재 상태와 작업을 동시에 표시하는 것이 완전히 명확하게하는 유일한 방법입니다. 라디오 버튼은이 작업을 수행하지만 레이블 + 버튼 솔루션은 둘 사이의 명확한 시각적 구분을 제공하므로 더 좋습니다. 또한 라디오 버튼보다 더 컴팩트합니다.

대안에 관해서는, 토글 버튼이 문제가 될 수 있다고 동의합니다. 확인란조차 혼란 스러울 수 있습니다.

 온라인

확인란이 선택되어 있지 않으므로 응용 프로그램이 오프라인 상태입니다. 그러나 이것은 명확하지 않습니다. 한 번 살펴보면 가장 먼저 "온라인"이라는 단어를 보게되므로 잘못된 결론을 내리기가 쉽습니다.

문제는 모든 것이 단일 레이블이라는 것입니다. 레이블이 상태를 나타내는 지 아니면 명령을 나타내는지를 결정하기 전에 약간의 생각이 필요합니다. 이 문제는 확인란과 버튼에 일반적이며 형용사 (또는 동사 등)를 지속적으로 사용하면 문제가 해결 될 수 있지만 문제가 해결되지는 않습니다.

6
Bennett McElwee

재생/일시 정지 예의 경우, 마우스 오버시 현재 상태를 정상적으로 표시합니다 (터치 스크린이 아닌 적절한 경우). 이 항목에는 2 개의 자연 상태가 있으며 통일 동사가 없습니다. 반면에 On/Off는 On 상태가 켜지고 Off 상태가 아닌 Power로 단순화 될 수 있습니다.

4
Rob Allen

나는 항상 현재 상태와 함께 갈 것입니다. 나는 놀이/일시 정지 관용구가 규칙이 아닌 예외 라고 생각합니다. 나는 재생/일시 정지가 오래된 카세트 테이프 데크 시절의 이월 가능성이 있다고 생각합니다. CD 플레이어에서 재생/일시 정지가 결합되었을 때, 그것이 얼마나 시원하고 혁신적인지 생각한 것을 기억합니다.

어쨌든, 현재 상태가 "선택됨"임을 분명히하는 한 가지 방법은 glow 버튼을 약간 만들거나 마법처럼 보이는 파란색으로 윤곽을 그리는 것입니다.

enter image description here

파란색은 일반적으로 일부 상태가 "켜짐"을 의미합니다

따라서 위의 버튼은 실제로 iTunes의 3 상태 버튼입니다. 반복, 모두 반복 및 1의 3 가지 상태가 있습니다. 버튼 얼굴에서 무슨 일이 일어나고 있는지 분명합니다. 반복 1은 on 입니다.

다른 예로, 단일 버튼으로 토글되는 3 가지 카메라 설정 (직교 1- 위, 직교 4- 위 및 투시)이 있습니다. 단일 버튼이 이러한 3 상태를 순환하며 현재 상태 버튼 앞면.

여러 상태의 단일 버튼은 익숙해지면 혼동되지 않습니다. 그것들은 group 상호 배타적 인 설정이기 때문에 훌륭하고 많은 고유 한 버튼으로 UI를 저장합니다 cluttering 어떤면에서는 소형 라디오 버튼과 같습니다.

내가 생각할 수있는 다른 옵션은 다음과 같습니다.

  • 현재 상태를 표시하고 메뉴를 표시하여 상태를 변경합니다 (2 개의 옵션 만있는 경우에도)

예를 들어 Mac OS에서 BlueTooth 또는 공항의 상태를 표시하는 방법이 있습니다. 각 작업이 수행 할 작업에 대한 전체 문장이 포함 된 팝 아웃도 있습니다.

enter image description here

현재 상태를 표시하고 (회색으로 흐리게 표시됨) 전체 문장이있는 팝업 메뉴를 통해 다음 상태를 표시합니다.

3
bobobobo

재생/일시 정지와 같은 토글 버튼의 ​​레이블은 바뀌지 않아야합니다. 버튼 자체는 버튼을 눌렀 음을 시각적으로 표시해야합니다 ( 'Play'라는 레이블이 남음). 이것은 모든 혼란을 제거합니다.

2
Denzo

Evernote의 @Kato의 답변 이미지는 다음과 같이 명확하게 설명합니다. 토글 ( "자동 저장")에 의해 제어되는 것을 나타내는 레이블과 상태 표시기 (O | I)의 두 배인 토글이 있습니다.
일부 토글의 문제점은 동일한 비트를 두 가지 다른 목적으로 사용하려고 시도하는 것입니다 : 상태 통신 및 동작 통신.
예를 들어, 내 집의 조명에는 익명의 전환과 밝은 표시등이 있습니다 (전구가 고장 났을 때 일반적으로 전환이 켜져 있는지 꺼져 있는지 알 수 없습니다) .
극 | 일시 정지 배열에는 명확한 표시 등, 음악 자체의 소리도 있습니다. 토글은 하나의 기능 (제어)을 수행하고 음악은 다른 기능 (통신 상태)을 수행합니다.
셔플 대 선형 토글은 상태를 제어하지만 통신하지는 않습니다. CD 케이스를 가져 와서 테마가 완료 될 때까지 기다렸다가 다음에 시작하는 것이 목록에서 다음인지 아닌지 확인하십시오 (반복해야 함). 그러나 셔플이라고 생각하면 | 바이너리 옵션을 셔플하지 않으면 제어하는 ​​동작 (동사로 "셔플") 뒤에 레이블을 지정하고 상태를 밝게 표시하여 상태를 전달할 수 있습니다.
아시다시피, 어쨌든 당신은 상태를 전달해야합니다.
내 친구가 자동차의 자물쇠 리모컨에 대해 화가납니다. 상태가 인쇄되어 있으며 조치인지 피드백인지 알 수 없습니다.

1
Juan Lanus

모호성을 줄이기 위해 다음과 같이 제안합니다.

  1. 동작을 상태가 아닌 토글 버튼의 ​​텍스트로 사용하십시오.

  2. 버튼이 강조 표시되어 있지 않은지 확인하십시오.

  3. 마우스 오버/포커스에서 동작을 강조 표시하여 발생하는 상황을 강조합니다.

  4. 현재 상태를 강조 표시하고 버튼 옆에 배치하십시오.

예를 들어 ...

enter image description here

(다른 예 : "켜기"+ "끄기", "끄기"+ "켜기")


또는 슬라이더

  1. 썸 컨트롤에 나타나야하는 현재 상태를 강조 표시합니다

  2. 빈 영역 내에 상태를 전환하는 작업을 배치합니다 (강조 표시하지 않음)

예를 들어 ...

enter image description here

(썸 컨트롤이 버튼 컨트롤이 아니라 엄지 컨트롤처럼 보인다고 상상해보십시오)


내 답변에서 닫힌 중복 질문 에 약간의 개선이있었습니다.

0
Danny Varod