it-swarm-ko.com

왼쪽 / 오른쪽 확인 / 취소?

할까요 OK 버튼은 왼쪽에 있습니다 Cancel 버튼 또는 그 반대?

해결책 중 하나를 제안하는 연구가 있습니까?

349
Art

모든 것과 마찬가지로 : 사용자 테스트! 고맙게도 사용성 영웅 Jakob Nielsen은 여기에서 확인/취소 버튼에 대한 경고 상자 기사 :

확인 버튼이 취소 버튼 앞이나 뒤에 와야합니까? 개별 대화 상자의 하위 최적화보다 플랫폼 규칙을 따르는 것이 더 중요합니다.

Kostya는 플랫폼 가이드 라인 준수에 대한 조언을 받았습니다. 그러나 웹 기반 플랫폼은 어떻습니까?

웹 기반 응용 프로그램을 디자인하는 경우 결정이 더 어렵지만 대부분의 사용자가 선호하는 플랫폼을 사용해야합니다. 서버 로그에는 특정 웹 사이트 또는 인트라넷에 대한 Windows 사용자 대 Mac 사용자의 백분율이 표시됩니다. 물론 Windows에는 일반적으로 더 많은 사용자가 있으므로 로그를 확인하는 데 방해가되지 않으면 대부분의 상황에 적용되는 지침은 먼저 OK입니다. 마지막 취소입니다.

또한 확인/취소 버튼을 만들 때 고려해야 할 두 가지 추가 중요한 지침에 대해서도 언급합니다.

  • 일반적인 라벨 (예 : "OK")을 사용하는 것보다 버튼 이름을 지정하여 기능을 설명하는 것이 좋습니다. 명시 적 레이블은 "정시 도움말"역할을하여 사용자에게 올바른 조치를 선택하는 데 더 많은 확신을줍니다.
  • 가장 일반적으로 선택한 버튼을 기본값으로 설정하고 강조 표시합니다 (특히 위험한 작업은 제외하고 사용자가 실수로 Enter 키를 눌러 버튼을 활성화하는 대신 버튼을 선택하도록하려는 경우 제외).
202
Rahul

답은 사용하는 시스템의 사용자 인터페이스 지침에 있습니다.

Windows의 경우

커밋 버튼을 다음 순서로 표시하십시오.

  • 확인/[해보기]/예
  • [하지 마라]/아니요
  • 취소
  • 적용 (있는 경우)
  • 도움말 (있는 경우)

따라서 취소는 항상 확인 버튼 오른쪽에 있습니다.

MacOS 용

작업을 시작하는 버튼이 가장 오른쪽에 있습니다. 취소 버튼은이 버튼의 왼쪽에 있습니다.

따라서 MacOS 사용자의 경우 확인 버튼 왼쪽에 취소가 있습니다.

Android

대화 상자의 무시 동작은 항상 왼쪽에 있습니다. 무시 행동은 사용자에게 이전 상태로 돌아갑니다.

긍정적 인 행동은 오른쪽에 있습니다. 긍정적 인 조치는 대화를 시작한 사용자 목표를 향해 계속 진행됩니다.

Android의 경우 확인 버튼 왼쪽에 취소가 있습니다.

다른 시스템에 대해서는 지침을 참조하십시오.

142
Kostya

"읽는"은유를 생각하십시오. 서양인들은 왼쪽에서 오른쪽으로 읽고 뇌는 왼쪽에서 오른쪽으로 흐릅니다. CANCEL은 기본적으로 한 단계 뒤로 (왼쪽), OK/SUBMIT/YES/Etc.는 한 단계 앞으로 (오른쪽)입니다.

64
GoodShovel

Windows OK/Cancel 컨벤션이 사용자에게 많은 두뇌 조절을 한 것처럼 보입니다. 따라서 유용성 테스트는 확실히 많은 사람들과 함께 나올 것입니다. 찾고 왼쪽의 확인 버튼, 오른쪽의 취소.

그러나 그것은 사전 조건없이 시스템과 상호 작용하는 사람의 가장 기본적인 본능을 바꾸지 않습니다. 기본 본능에 따라 적용되는 색상이나 크기에 관계없이 확인/승인/앞으로 이동 버튼이 대화 상자의 오른쪽 가장자리에 있어야합니다.

레이블이나 색상 강조 표시가없는이 대화 상자를 고려하십시오.

enter image description here

어디를 클릭 하시겠습니까? 양식을 제출하려면 오른쪽 가장자리에있는 버튼을 클릭합니다. 그 이유는 Windows 이전에 다음과 같은 방식으로 본능에 적응했기 때문입니다.

  • 영어는 왼쪽에서 오른쪽으로 흐릅니다.
  • 브라우저 탐색은 뒤로 (왼쪽) 및 앞으로 (오른쪽)로 작동합니다. enter image description here
  • Dangerous Dave와 같은 오래된 2D 게임은 더 진행될 때 캐릭터를 오른쪽으로 움직입니다.

enter image description here

  • 숫자 줄의 숫자는 오른쪽으로 증가하고 왼쪽으로 감소합니다.

  • 주기율표의 원자량은 오른쪽으로 증가합니다.

  • 시계가 오른쪽으로 틱합니다.

  • 달력은 날짜를 오른쪽으로 증가시킵니다.

Windows 플랫폼이 OK/Cancel을 사용하여 안티 패턴을 만들었으므로 이제는 유효성 검사에 대한 유효성 검사가 널리 퍼져 있습니다. 그러나 위의 요소를 고려하면 오른쪽에 기본 버튼을 유지하는 것이 정당하고 방어적인 입장이라고 생각합니다.

편집 : 고려해야 할 추가 요소는 일관성입니다. 대화 상자에 추가 버튼이 필요한 경우 오른쪽 가장자리의 기본 버튼은 배치와 일관성을 유지하는 데 도움이됩니다. 시각적 인 예는이를 명확하게합니다.

enter image description here

39
Adnan Khan

언어를 왼쪽에서 오른쪽으로 읽는 사용자의 경우 확인 버튼을 왼쪽으로 두는 것이 좋습니다. 왜냐하면 사용자가 처음 보는 것보다 더 중요하기 때문입니다.

이를 통해 사용자의이 하위 집합이 가능한 빨리 작업을 완료 할 수 있습니다.

17
Ryan Shripat

IMHO "OK"버튼을 놓을 위치가별로 중요하지 않습니다 : 왼쪽에서 오른쪽으로. 어떤 종류의 사용자 (히브리어 또는 아랍어)를 사용하여 사이트를 방문하든 상관 없습니다. 사용하는 소프트웨어 종류는 중요하지 않습니다. 통계에 따르면 사용자의 55 %가 오른쪽에서 "확인"버튼을 보려고하지만 오른쪽에 넣으면 다른 45 %의 사용자가 불만을 나타냅니다.

가장 좋은 해결책은 "확인"버튼을 강조하는 것입니다 ( "취소"보다 눈에 잘 띄게 함). 모든 사용자는 "확인"버튼을 더 중요하고 기본 버튼으로 쉽게 표시합니다.

Google 및 기타 회사는 소프트웨어에서이 방법을 사용합니다.

enter image description here

16
webvitaly

Luke Wroblewski는 웹 양식 (웹 양식 디자인 : 빈칸 채우기)에 관한 책을 썼으며 다음과 같은 몇 가지 원칙을 다루었습니다. "1 차 및 2 차 조치" ), "상단, 오른쪽 또는 왼쪽 정렬 양식 레이블"(http : // www.lukew.com/ff/entry.asp?504) 또는 "완료 경로"등 ( http : //www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php )

따라서 IMO는 어떤 레이블 배치 (수직으로 선호 됨) 및 왼쪽에서 오른쪽 + 하향식 규칙에 따라 완료를위한 좋은 경로를 확보하기 위해 1 차 조치를 먼저 (OK) 배치 한 다음 2 차 조치를 취해야합니다 (+ + 취소)

편집 : 양식의 레이블 배치, Caroline Jarrett, 2010 http://www.formsthatwork.com/files/Articles/labels-on-forms-for-uxlx-2010.pdf

15
Ecaterina Moraru

나는 모든 사람들이 좋은 지적을했다고 생각하지만 여기서 언급해야 할 핵심 사항이 하나 더 있습니다.

Ok/Submit/Save와 같은 버튼을 긍정적 인 액션 버튼이라고합니다. 마찬가지로 취소/재설정 등의 버튼을 제외 액션 버튼이라고합니다.

이제 쿼리에 응답하기 위해 대부분의 좋은 점이 있지만 여기에 응용 프로그램의 사용자 테스트가 일반적으로 대부분의 문제를 결정한다는 또 다른 인식이 있습니다. 작성된 모든 애플리케이션은 사용자 전용입니다.

사용자의 시력 검사 및 열 테스트가 있었으며 실험실의 가용성에 따라 여전히 수행되고 있습니다. 가장 좋은 시나리오는 대부분의 사용자가 웹 응용 프로그램이나 다른 응용 프로그램을 왼쪽에서 오른쪽으로, 위쪽에서 시작하여 아래쪽으로 스크롤하기 시작하여 주요 핫스팟을 가져오고 일반적으로 왼쪽 아래쪽으로 끝나는 것입니다. 항상 왼쪽에 긍정적 행동 버튼을, 오른쪽에 부정적인 행동 버튼을 유지하는 것이 좋습니다.

또한 이들은 소수의 사용자를 대상으로 한 연구라는 사실을 부인하지 않고 항상 잘 유지할 것이 아니라 대부분의 시간을 할애 할 필요는 없습니다.

여기에는 한 가지 더 중요한 점이 있습니다. 긍정적이고 부정적인 행동 버튼 사이에 더 많은 공간이 있어야 사용자가 부정적인 버튼에 도달하는 데 약간의 시간이 걸리므로 생각하고 반응하는 데 충분한 시간을 할애 할 수 있습니다.

나는 내 경험과 연구 논문에 근거한 몇 가지 요점을 설명하려고 노력했다.

더 많은 것을 배울 수 있도록 의견을 말하십시오.

Deepak Bajaj 감사합니다

9
Deepak Bajaj

확인 대 취소 단추에 대해 서로 다른 스타일을 사용하도록 많은 응용 프로그램이 바뀌 었습니다. 일반적인 UI 중 하나는 확인 버튼이지만 기존 버튼은 있지만 취소는 링크 버튼입니다. 이를 통해 두 가지를 시각적으로 명확하게 구분할 수 있으며 사용자가 확인을 클릭하더라도 시각적 차이로 인해 차이점이 강조되고 사용자가 실제로 원하는 것을 선택할 수 있습니다.

나는 웹과 데스크톱 응용 프로그램에서 이것을 보았습니다.

7
Sam

추론을 명확히하기 위해 :

대화 상자의 정확한 구석에 기본 버튼 (OK)을 배치하는 것이 "정확한"것으로 간주됩니다.

그러나 사용자가 익숙한 것에 따라 달라집니다. Windows 사용자를위한 사이트 나 응용 프로그램을 만드는 경우 Windows 표준을 따르는 것이 좋습니다.

키보드의 "Enter"가 OK와 올바르게 연결되어 있는지 확인하십시오. 많은 사람들이 그것을 사용할 것입니다.

5
Dan Barak

와! 왼쪽이나 오른쪽으로 주장하는 많은 답변.

나는 이것을 직접 테스트하고 통계적으로 결정적이지 않다는 것을 알았습니다.

내가 찾은 가장 좋은 대답은 기본 작업이 명확하게 표시되어있는 한 어떤 순서로 진행하든 문제가되지 않는다는 것입니다. 항상 [Do it]/go/submit/etc에 대해 다채로운 버튼을 사용하고 작은 텍스트 만 사용합니다. [하지 마십시오]/취소/지우기 등의 버튼.

바로 여기 UX StackExchange의 답변 양식 하단에있는 '답변 게시'및 '삭제'버튼과 매우 유사합니다!

4
Andrew Martin

흥미로운 의견을 찾을 수 있습니다 here ; Anthony T.는 "취소"오른쪽에 "확인"버튼을 배치하는 것이 좋습니다.

오른쪽의‘확인’버튼을 사용하면 시각적 고정이 적고 한 방향으로 흐릅니다.

대화 상자의 오른쪽에있는 기본 조치와 왼쪽에있는 보조 조치와 비교하십시오. 사용자는 2 차 조치에서 시선으로 시작하고 기본 조치로 시선을 이동하여 단추를 클릭하십시오. 이렇게하면 한 방향으로 총 두 개의 시각적 고정이 만들어져 사용자에게보다 빠른 시각적 흐름이 제공됩니다. 사용자는 각 버튼을 한 번만 고정하고 기본 작업 버튼을 종료합니다. 기본 액션을 남겨두면 사용자가 더 쉽게 접근 할 수 있지만 사용자의 정신적 프로세스와 시각적 수정 측면에서 속도를 보면 대화 상자의 오른쪽에 기본 액션을 배치하는 것이 실제로 더 빠릅니다.

4
Claudiu Constantin

ASP.NET 웹 응용 프로그램의 경우 기본 버튼 문제를 처리하기 위해 많은 아스피린을 사용한 후 (Enter 키를 누를 때 발생하는 것) 기본 버튼을 왼쪽에두면 마크 업에서 첫 번째가됩니다.

Enter 키를 누를 때 (특히 Enter 키를 누를 때 커서가 텍스트 상자 안에있을 때) 브라우저마다 여러 제출 단추를 다르게 처리합니다. 일부 브라우저는 마크 업의 첫 번째 버튼을 사용하여 양식을 제출합니다.이 양식은 원하는 것이 아닐 수 있습니다 (특히 서버 측에서 무언가를 수행해야하는 경우).

기본 버튼 시나리오를 처리하기 위해 사용자 정의 자바 스크립트를 사용하지 않고 웹 브라우저 기본 동작에 의존하는 경우 기본 버튼을 왼쪽에 배치해야합니다.

4
Adam Toth

가능한 경우 취소 버튼을 완전히 생략하여 딜레마를 해결하는 것이 좋습니다. -때로는 불필요하며 실수로 활성화되기도합니다.

에서 http : //www.nngroup.com/articles/reset-and-cancel-buttons/ :

재설정 단추를 제거하면 대부분의 웹 양식이 유용성을 개선했을 것입니다. 취소 버튼은 종종 웹상에서 가치가 거의 없습니다 .

사용자가 피하고 싶은 일을 저지른 것에 대해 두려워 할 경우 취소 단추를 제공하십시오. 명시 적으로 취소하는 방법은 단순히 떠나는 것만으로도 얻을 수없는 추가적인 안전성을 제공합니다.

취소는 주로 사용자가 조치가있는 하나 이상의 페이지를지나 진행 한 다단계 대화 상자에 유용합니다. 이때 뒤로 단추를 눌러도 이러한 조치가 실행 취소되지 않으며 사용자가 취소를 클릭하는 것이 좋습니다.

4
Adam George

궁극적으로 (특히 위의 모든 답장을 읽은 후)이 토론은 플랫폼 컨벤션 대 '객관적인'사용성으로 요약됩니다. '객관적'이라는 말은 OS 관습에 익숙하지 않은 사용자에게 유용한 기능입니다. 더 구체적으로:

오른쪽에 OK
이 패턴은 사용자가 덜 사용 가능한 창 규칙을 따르지 않는 경우 객관적 유용성 인수에서 유리합니다 ( article 참조). 이 기사에서 설명하는 것처럼 오른쪽에서 OK를 누르면 왼쪽에서 오른쪽으로 읽는 규칙에 따라 작업 흐름이 더 효율적이며 더 나은 코너 대상이되며 타임 라인을 왼쪽에서 오른쪽으로 실행하는 것으로 생각합니다. 오른쪽의 '뒤로'/ '취소'는 시간 패턴으로 되돌아가는 것이 좋습니다.).

왼쪽에서 OK
Windows 규칙

불행한 현실이지만, 잘못 디자인 된 패턴 (예 : 왼쪽의 OK)이 컨벤션이되어 사용자가 기대하게됩니다. 객관적으로 더 유용한 패턴이더라도 다른 것을 시도하면 유용성이 떨어집니다. 전형적인 예는 미터법 대 영국식 측정 시스템입니다. 미터법은 사용성, 단위 변환 용이성 등의 측면에서 모든 것을 갖추고 있습니다. 그러나 소도시 미국인들이 인치/피트에 익숙해있을 때 미터와 센티미터 단위로 생각하도록 강요하면 유용성이 떨어지고 사용자는 매우 실망하게됩니다. 교훈은 우리가 처음에는 가난한 컨벤션을 도입하지 않도록 매우 열심히 노력하는 것 같습니다!

개인적으로 웹을 디자인 할 때 OK 버튼을 왼쪽에 놓기로 선택하고, 제국 주의적 인 사람들과 이야기 할 때도 센티미터 단위의 체중과 킬로그램 단위의 체중을 킬로그램으로 표시합니다. 그것은 실제로 마멸의 전쟁이지만, 천천히 제국 제도는 죽을 것이고, 희망적으로 '왼쪽에 OK'컨벤션도 :)

3
M.A.X

오른쪽에 "Ok"가 있습니다. 서쪽에서 읽는 방향 때문에 왼쪽에서 오른쪽으로 이동합니다. 그리고 "취소"는 앞으로 나아갈 수 없지만 "확인"입니다.

그러나 완전히 다른 접근법. "확인"을 사용하지 말고 버튼에 작업 내용을 쓰십시오. 예를 들어 "저장"또는 "저장하지 않음"은 사용자가 설명 텍스트를 읽을 필요가 없습니다. 시간을 절약하고 입력 오류를 방지합니다.

2
erikrojo

Lol 나는 도울 수는 없지만 이러한 많은 답변에 웃음을 짓습니다. 나무 숲이 보이지 않는 것 같습니다. 모든 UX 문제와 마찬가지로 기본적으로 양식 배치 방법에 따라 다릅니다. 예를 들어, 레이블 맨 위, 아래 필드 또는 레이블 왼쪽 필드 옆에 있습니다. 전체 페이지와 사용자의 눈이 양식을 따라 흐르는 방식을 살펴보십시오. 최종 '제출'버튼에 명확한 시야가 있습니까?

이전 글에서 웹 양식 웹 양식 디자인에 대한 Luke Wroblewski 책에 언급 된 것처럼 : 빈칸 채우기에는 웹 양식 작성에 대한 최상의 조언과 사용자 관점의 양식에 대한 훌륭한 패러다임이 포함되어 있습니다. 양식은 끝의 수단입니다 의도 된 최종 결과 (예 : 무언가 구매, 어딘가에 액세스하기위한 계정 생성 등)로 인해 허용됩니다. 가능하면 사용자 테스트, AB 테스트는 물론 가능합니다. 최종 목표는 양식을 더 쉽게 작성하는 것이 더 나은 양식을 작성하는 것입니다.

2
mike

나는 부정적인 행동을위한 버튼 (시각적으로)이없고 링크 만있는 사이트를 정말 좋아합니다. 이렇게하면 버튼을 보는 데 시간을 낭비 할 필요가 없으며 버튼이 무엇인지 알 수 있습니다. 그리고 내가 페이지가 원하는 것을하고 싶지 않다는 것을 안다면, 어떻게 진행하는 것이 가장 좋은지 알기 위해 약간의 시간이 걸립니다 (닫기 버튼, 취소 버튼 찾기)

대신에 :

[NOOOOO!] [CLICK ME! CLICK ME!]

이있을 것:

아니요 괜찮습니다! [예, 부탁합니다!]

이 방법으로 버튼을 어디에 두어야하는지 실제로 중요하지 않으며 시각적으로 하나만 표시되므로 쉽게 찾을 수 있습니다.

1
fallenboy

내 응용 프로그램에서는 동작 버튼 목적을 강조하기 위해 시각적 색상을 사용하고 있습니다. 왼쪽이든 오른쪽이든 상관 없습니다. 나는 개인적으로 오른쪽에 "확인"버튼을 선호합니다 (오른 손잡이 및/또는 osx 사용자이기 때문에 실제로 링크입니다.)

  • 유효성 검사를위한 큰 녹색 버튼
  • 삭제를위한 큰 빨간 버튼
  • 취소를위한 (큰가 아닌) 회색 버튼
1
Marc D

나에게 이것은 논리적 순서가 될 것이다.

<LeftRight>

<PreviousNext>

<BackForward>

<BackDone

Do nothingDo it

CancelOK

OK를 제외하고 다음과 같은 실제 조치로 대체되어야합니다. SaveDeleteAcceptExit 또는 Send.

퍼팅을 주장하는 사람들을 만날 때 OK 왼쪽에는 항상 배치하도록 요청합니다 Left vs RightPrevious vs NextBack vs Forward그들이 왜 그런지 논쟁하기 전에 그들이 왜 그 순서대로 넣었는지 논쟁하게한다. OK 왼쪽에 있어야합니다.

1
Ole Tange

우선 순위에 따라 사용 가능한 첫 번째 솔루션을 사용하십시오.

  • 플랫폼 지침
  • 시작부터 끝까지 (서부 언어의 시작은 일반적으로 남지만, 아랍어가 오른쪽에서 시작하고 왼쪽에서 종료되는 것과 같이 다를 수 있음)
  • 사용자가 가장 기대하는 방식

그러나 스크린 리더 및 유사한 접근성 도구의 경우 시작시 주요 동작 (서양 문화에서는 왼쪽)을 사용하면 이러한 특수 사용자가 많은 시간을 절약 할 수 있습니다!

1
straya

물론 양쪽에 대해 많은 논쟁이 있습니다.

그래도 이렇게 넣겠습니다. "네거티브 양성 배치가 최고라고 생각하십니까? 아니오 또는 예?"

요점은 "예 또는 아니오"라고 말하면 더 잘 흐릅니다. 이는 Microsoft에서 음수 버튼 순서를 선택한 이유를 설명합니다.

다른 한편으로, 부정적인 긍정적 인 흐름은 종종 긍정적 인 주장에 무게를 더하고 사람의 마음에 신선하게 유지하기 위해 수사와 토론에 사용됩니다. "당신은 당신의 아이들이 상대방의 손에 고통받는 것을보고 싶습니까? 아니면 우리의 정당에 투표하고 미래를 지키고 싶습니까?" 등등.

0
Seth Jeffery

왼쪽이나 오른쪽에서 긍정적 인 조치를 취해야하는지, 특정 운영 체제 나 물리적 장치 (책), 추상적 구성 (마법사 형식 흐름) 등의 행동 과학, 행동 과학의 편견을 무시해야하는지 결정해야한다고 가정합니다. 통계적으로 가장 왼쪽에있는 옵션이 첫 번째 선택으로 더 자주 선택되는 것으로 보입니다.

이는 다른 요인이 고려되지 않은 경우 왼쪽에 긍정적 행동 (OK 또는 명시 적 행동 레이블)을 선호하는 것을 의미합니다.

출처 : 왼쪽에서 오른쪽으로 세는 사람 만 있는가?

0
too