it-swarm-ko.com

확인 / 취소 버튼을 오른쪽 또는 중앙에 정렬해야합니까?

대화 상자에서 확인/취소 버튼을 어디에 두어야합니까? 하단 중앙에 맞습니까? 나는 둘 다 보았고 개인적으로 상관하지 않지만 응용 프로그램 전체에서 일관된 모양을 만들고 싶습니다. 이것에 대한 지침이 있습니까? 아니면 원하는대로해야합니까?

46

나는 이것이이 질문에도 적용되고 대답한다고 생각합니다.

(스포일러 : 상관 없습니다 .)

이와 같은 경우에는 종종 중요하지 않은 일 이됩니다. 어느 쪽이든 선택에 유리한 주장이 있으며, 어떤 선택도 유용성 파국을 야기하지는 않을 것입니다. 특정 상황에서 "올바른"선택을 선택하면 일부 사용자는 0.1 초를 절약 할 수 있지만, 그 선택이 무엇인지 알아 내기 위해 충분히 정교하게 연구하는 것은 가치가 없습니다. 핵심 성과 지표를 83 % 이상 변경할 수있는 것들에 유용성 리소스를 사용하는 것이 좋습니다.

자세한 정보 : seit.com/alertbox/ok-cancel.html

45
Nacho

정렬에 대해 엄밀히 말하면 일관된 것 외에는 정답이 없습니다.

그러나 버튼의 정렬은 버튼의 위치 또는 논리적 순서 와 관련이 있습니다.

버튼 위치 지정에 적용 할 수있는 두 가지 일반적인 패러다임이 있습니다 **.

  1. 읽기 순서-읽기 순서에서 처음으로 나타나는 버튼은 기본 (Ok)이며 후속 옵션보다 우선합니다 (취소).
  2. 앞으로/뒤로-앞으로 진행 또는 동작 (Ok)은 오른쪽으로 이동하고 뒤로 또는 취소 (취소)는 왼쪽으로 이동합니다.

버튼의 정렬은 사용자의 인식 된 패러다임에 영향을 줄 수있다. 따라서 정렬 및 위치의 일부 조합은 상충되어 사용자에게 혼란을 줄 수 있습니다.

alt text

** 이것은 왼쪽에서 오른쪽으로 읽는 것으로 가정합니다. 오른쪽에서 왼쪽으로 읽는 언어는 동일하지 않을 수 있습니다.

35
g .

응용 프로그램 및 대상 OS에 맞는 것을 수행하십시오.

그러나 지적했듯이 응용 프로그램 전체에서 일관성을 유지하는 것이 더 중요합니다.

24
ChrisF

나는 그것들을 올바르게 맞추는 것이 더 낫고 더 일반적이라고 생각합니다.

4
megubyte

그들은 항상 오른쪽에 있고 사용자는 그들이 오른쪽에 있기를 기대합니다. 공간을 충분히 확보하고 기본 동작을 강조 할 수 있도록 다른 스타일을 지정하십시오.

3
giancarlo

나는 가장 가능성이 높은 행동 (이 경우 OK)을 오른쪽에 배치하고, 쉽게 알아볼 수 있도록 일종의 색깔을 부여하고 왼쪽에있는 덜 행동 (이 경우 취소)은 회색으로 색칠하거나 양식 배경의 선을 따라 색상.

그것들을 서로 옆에 두는 것은 나쁜 디자인이라고 생각합니다. 취소해야 할 때 "생각하지 마십시오"접근 방식에 따라-중지하고 버튼을 찾습니다. 그러나 다른 모든 경우에는 자동으로 행동하고 싶습니다.

또한 i.stackexchange에서이 질문을보십시오 .

3
idophir

플랫폼에 따라 다릅니다. Windows는 오른쪽에 <OK> <Cancel> 순서로 버튼을 배치하고 Mac OSX는 <Cancel> <OK> 순서로 배치합니다. 다른 답변과 마찬가지로 .... 일관성을 유지하십시오. 버튼 배치의 경우 오른쪽 하단을 선호합니다.

2
sysscore

다음과 같은 이유로 "확인"또는 우선 순위가 지정된 작업 단추가 왼쪽에 있어야한다고 생각합니다. 1 : 양식 또는 대화 상자에서 키보드를 사용하는 사용자 비율이 높고 왼쪽에있는 경우 탭을 통해 가장 유리한 작업에 도달하는 데 시간이 덜 걸립니다 . 2 : 눈 회전 또는 Fitt 's Law 3 : 음성 모드에서 애플리케이션을 운전하거나 액세스 할 때 블라인드 (세미 블라인드) 사람 또는 애플리케이션 사용에 대해 생각하십시오. 4 : 행동으로 가장 적게 동사를 사용하지 마십시오

이 포럼에는 많은 스레드가 있습니다.

또한 내 제안은 소형 장치 용이 아니라는 점을 명심하십시오.

2
Hemchandra

설치 프로그램과 같은 선형 프로세스의 경우 "서부 환경에서" "다음"버튼을 오른쪽에 맞추는 것이 더 직관적 일 수 있습니다.

버튼 순서가 더 중요하다고 말하고 싶습니다. Windows에서 "확인 단추"는 항상 왼쪽에 있고 "취소 단추"는 오른쪽에 있습니다. 사용자는 읽지 않기 때문에 확인 및 취소 단추를 전환하면 (일부 포트 된 Mac 응용 프로그램처럼) 혼동됩니다.

2
Petrus Theron

디자인에 달려 있다고 생각합니다. 양식에 표준 디자인을 사용하는 경우 오른쪽에 확인/취소 버튼을 배치하고 (http://bit.ly/9IzQo0) CSS를 사용하여 양식을 변경하는 경우 배치합니다. 중앙에 (http://www.tumblr.com/register).

1
rgaspary

양식 필드가 왼쪽 정렬되어 있으면 버튼도 왼쪽 정렬하는 것이 좋습니다. 다음은 사용자의 시선이 실제로 어디로 가고 얼마나 빨리 반응하는지에 대한 연구입니다. http://www.lukew.com/ff/entry.asp?571

이것은이 두 옵션의 왼쪽 정렬이 가장 좋은 디자인 선택임을 시사합니다. 특히 위의 양식 컨트롤도 왼쪽 정렬 된 경우입니다. 왼쪽에 '제출'및 '취소'버튼을 배치하면 사람들의 시선이 이동하는 거리가 줄어 듭니다.

눈의 움직임과 관련하여 사람들은 [오른쪽 정렬 된 버튼이있는 옵션]을 사용할 때 효율성이 가장 떨어졌습니다.

1
Luke

이러한 사례를 사례별로 비판하는 것은 쉬운 일이라고 생각하지만 모든 사람들은 의견 및/또는 테스트 결과를 표명 할 때 전체 디자인 시스템 및/또는 패턴 라이브러리를 고려해야한다고 생각합니다. 문제의 내용은 내용과 테스트에 따라 일부는 왼쪽의 확인과 오른쪽의 확인으로 더 높은 변환을 보여줄 수 있다는 것입니다.

그러나 전체 설계 시스템을 고려할 때 개별 좌/우 테스트에서 가장 잘 작동 할 때보 다 일관성이 더 우수하다고 생각하십니까? "결제 프로필 삭제", 되돌릴 수없는 것 등과 같은 부정적인 외부 요인이있는 경우 CTA를 왼쪽에 배치하고 취소 할 때 의도적으로 "앞으로"조치를 반대하려는 것에 동의합니다. 오른쪽으로.

그러나이 점을 염두에두고도 대부분의 사용자는 현재 Windows 사용자이며 단계별 진행 흐름을 진행한다고 가정 해 보겠습니다. "체크 아웃"또는 "계속"이 오른쪽에 있고 뒤로 또는 취소가 왼쪽에있을 것으로 예상합니다. 그것은 또한 대부분의 모달 사용 취소/확인 레이아웃 (재단 제외)의 경우이지만 개별 A/B 테스트를 주장하거나 더 높은 전환이 발생한 테스트를 사용하는 사람들에게는 적합하지 않습니다. 왼쪽 대 오른쪽.

개인적으로 테스트 경험에서 CTA는 가장 잘 작동하지만 항상 가장 왼쪽에 CTA를 보여주는 스타일 가이드 또는 디자인 패턴이있는 메트릭이 무엇인지 궁금합니다.

1
Arondale
  1. 형제 자임을 암시하기 위해 서로 가까이있는 한 순서는 중요하지 않습니다. 즉, 확인 및 취소 단추는 다른 기능을 수행하지만 동일한 요소에 영향을줍니다.
  2. 왼쪽에서 오른쪽 언어의 경우 버튼을 중앙에 놓거나 오른쪽으로 플러시합니다.
  3. 브랜딩과 일치하는 색상으로 확인 버튼을 강조하고 싶습니다.
0
Tim Huynh

나는 일반적으로 왼쪽에 OK를, 오른쪽에 Cancel을 사용합니다.

이 패턴이 변경되는 것을 볼 수있는 유일한 경우 (그리고 머리카락이 찢어지고 있습니다.)는 사용자 측에서 취소 할 수없는 행동 (예 : 내 계정 삭제, 모든 사람을 죽이는 등)을위한 것입니다. 그들이 행동에 대해 생각하도록하거나 기본 행동이 더 안전한 옵션이되도록 강요하고자합니다.

0
drivingmenuts

Gutenberg Diagram 에 따르면, 터미널 영역 (사용자가 페이지 내용을 스캔 한 후 사이트에서 최종 호출을 표시하는 위치)은 화면의 오른쪽 아래입니다. 서양 독자의 자연스런 독서 패턴으로 인해이 위치에 단추를두면이 위치에서 찾아보기를 마치면 실제로 사용자 피로를 줄입니다. 왼쪽 하단에 버튼이있는 경우 사용자는 일반적으로 터미널 영역에서 작업을 마치고 호출을 기반으로 왼쪽으로 돌아가 작업을 수행해야합니다. 이 패턴은 팝업 및 편집/추가 화면에 모두 적용됩니다.

이 일반적인 패턴은 버튼이 배치되는 순서에도 적용됩니다. 취소 전에 확인을 표시하면 사용자는 원하는 옵션을 선택하기 전에 거의 항상 모든 옵션을 봅니다. 대부분의 경우 사용자는 취소에서 확인을 클릭하려고합니다. 즉, 확인을보고 취소 한 다음 다시 확인으로 돌아갑니다. 매우 작지만 여전히 작업이 추가되었습니다.

0
Brad Hutchison

여기에 좋은 답변이 있습니다. 아무도 언급하지 않은 것은 GUI에서 대상을 클릭하는 속도와 용이성을 제어하는 ​​Fitt 's Law입니다. 기본 버튼을 어디에 두어야하는지에 대한 어려운 과학을 제공합니다.

기본적으로 적합 법 ( https://en.wikipedia.org/wiki/Fitts%27s_law )에 따르면 목표와 거리의 크기는 목표에 도달하는 데 걸리는 시간에 예측 가능하게 작용합니다. 버튼이 "상자"의 모서리에있을 때, 대상 크기는 틀림없이 무한합니다 (실제로 무한한 대상 크기는 커서가 자체적으로 정지하는 컴퓨터 화면의 모서리입니다). 속도가 항상 주요 고려 사항은 아니지만 편안함 (사용 편의성)이 있어야합니다.

대화식 데모 (코너 없음) : http://simonwallner.at/ext/fitts/

0
Rashcom