분류 html

양식에 버튼을 놓을 위치

컨텐츠 정보

  • 조회 521 (작성일 )

본문

양식의 버튼 배치는 종종 모양에 따라 무시되거나 우선 순위가 지정됩니다.


그러나 단추를 배치하면 양식을 만들거나 끊을 수 있으며 양식은 사용자의 경험을 만들거나 끊을 수 있습니다. 그렇기 때문에 제대로 하는 것이 중요합니다.


원본 : https://adamsilver.io/articles/where-to-put-buttons-in-forms


버튼과 문제의 형태에 따라 달라 지므로 소리가 더 어려워집니다.


또한 다른 형태를 전체적으로 분석해야 합니다. 그렇지 않으면 우리는 일관성이 없고 혼동되는 다른 장소에 같은 버튼이 나타날 수 있습니다.


여기에서는 연구와 모범 사례를 기반으로 다양한 양식에 버튼을 배치 할 위치를 설명합니다.


기본 버튼을 입력의 왼쪽 가장자리에 맞춥니다 


alignment.png 


왼쪽 : 오른쪽 정렬 버튼 (권장되지 않음). 오른쪽 : 왼쪽 정렬 버튼 (양호).


시선 추적 연구에 관한 그의 기사에서 Luke Wroblewski는 기본 버튼이 입력의 왼쪽 가장자리와 정렬 되어야 한다고 말합니다.


"완료를 향한 명확한 길을 밝히십시오. 입력과 동작을 강한 세로 축에 맞추면 양식을 완성하는 방법을 명확하게 알 수 있습니다." 


이 레이아웃은 화면 돋보기 사용자가 화면을 가로 지르지 않고도 볼 수 있도록 도와줍니다.


zoomed.png 


왼쪽 : 확대하면 오른쪽 정렬 버튼이 보이지 않습니다. 오른쪽 : 확대 한 경우 왼쪽 정렬 된 버튼 — 여전히 표시됩니다.


뒤로 버튼을 양식 위에 놓으십시오. 


back-button.png 


왼쪽 : 기본 버튼 옆에 있는 뒤로 버튼 (권장되지 않음). 오른쪽 : 양식 위의 뒤로 버튼 (양호).


일부 양식이나 설문지가 여러 페이지에 표시되고 일부 사람들은 답을 확인하거나 변경하기 위해 되돌아 가기를 원합니다.


안타깝게도 일부 사용자는 디자인이 잘못되어 양식을 클릭했을 때 데이터를 잃어버린 경험으로 인해 브라우저 뒤로 버튼을 신뢰하지 않습니다. 해결책은 양식 별 뒤로 단추를 제공하는 것입니다.


Mick Couper, Reg Baker 및 Joanne Mechling에 의해 수행 된 연구에 따르면 기본 단추의 오른쪽에 뒤로 단추를 배치하는 것이 혼란스럽고 대신 왼쪽이나 아래로 이동해야 합니다.


아래는 기본 버튼이 일관되게 위치하고 키보드 사용자가 마지막 필드에서 바로 탭할 수 있도록 하기 때문에 바람직합니다.


그러나 연구 결과 페이지 상단에 뒤로 버튼이 있는 옵션은 포함되지 않았습니다.


Government Digital Service의 디자이너 인 Joe Lanman은 뒤로 버튼을 Register To Vote 모범 디지털 서비스의 맨 위에 놓았습니다. 이제 모든 정부 서비스에 대한 표준 접근 방식입니다.


register-to-vote.png 


페이지 상단에 뒤로 링크를 표시하는 투표 등록 서비스의 질문 페이지.


Joe는 뒤로 버튼을 맨 위에 놓으면 다음과 같은 이유로 잘 작동한다고 말했습니다.

  • 대부분의 브라우저가 브라우저 뒤로 버튼을 넣는 곳과 비슷한 곳에
  • 사용자가 잘못된 것으로 보이는 페이지에 도착한 직후 또는 사용자가 방금 입력 한 내용을 확인하려는 경우
  • 사용자가 양식을 작성하면 필요하지 않을 수 있습니다. 양식을 작성하고 다시 클릭하면 답변을 잃게 됩니다.

이 방법은 뒤로 버튼과 기본 버튼을 명확히 구분하여 사용자가 진행하는 데 걸리는 시간을 줄여야 합니다. 필요한 경우 추가 버튼을 위한 공간이 생겨 나중에 다루겠습니다.


접선적으로 관련된 동작을 폼 위에 배치 


tangential-links.png 


왼쪽 : 양식 내 '비밀번호를 잊어 버렸습니다'링크 (권장하지 않음). 오른쪽 : 양식 외부의 '비밀번호를 잊어 버렸습니다'링크 (양호 함).


일부 양식에는 데이터를 제출하지 않고 양식 자체와 접하는 관련 작업이 있습니다.


예를 들어 로그인 양식의 '비밀번호를 잊어 버렸습니다'링크를 사용하면 사용자가 비밀번호를 재설정 할 수 있지만 로그인 프로세스 자체는 아닙니다.


비밀번호 입력란 옆에 '비밀번호를 잊어 버렸습니다'링크가 표시되는 경우가 종종 있지만 다음과 같은 이유로 문제가 있습니다.

  • 탭 키가 다음 필드 / 버튼에 초점을 맞출 것으로 예상
  • 링크를 찾기 위해 스크롤 해야 할 수도 있습니다
  • 링크를 클릭하기 전에 이메일 주소를 입력하는 데 시간이 낭비 될 수 있습니다

양식 위에 링크를 넣으면 이러한 모든 문제가 해결됩니다.


그들이 하는 일에 따라 추가 버튼 배치 


여러 개의 버튼이 있는 양식에는 문제가 있습니다.


선택의 수와 복잡성에 따라 결정을 내리는 데 걸리는 시간이 늘어나므로 추가 버튼을 사용하면 선택과 시간이 추가됩니다.


또한 키보드 사용자는 Enter 키를 눌러 양식을 제출할 때 수행 할 작업을 확신 할 수 없습니다.


즉, 때로는 여러 개의 버튼이 필요합니다.


버튼의 기능에 대해 생각하면 버튼을 놓을 위치를 쉽게 결정할 수 있습니다.


다른 치료가 필요한 3 가지 예를 살펴 보겠습니다.


1. 취소 버튼을 기본 버튼 아래에 놓습니다. 


cancel-button.png 


왼쪽 : 기본 버튼 옆에 있는 취소 버튼 (권장되지 않음). 오른쪽 : 기본 버튼 아래에 있는 취소 버튼 (양호).


Luke Wroblewski의 연구에 따르면 취소 버튼은 기본 버튼의 오른쪽에 있고 덜 두드러지게 링크로 표시되어야 합니다.


그러나 취소 버튼을 기본 버튼 아래에 두면 몇 가지 장점이 있습니다.

  • 첫째, 양식 전문가인 Caroline Jarrett의 규칙에 따라 파괴적인 버튼을 찾기가 더 어려워집니다.
  • 두 번째로, 뒤로 단추 및 추가 링크 섹션에 설명 된 대로 취소 단추는 양식 자체와 직접 관련이 없으므로 기본 단추 아래에 배치하는 것이 좋습니다.
  • 마지막으로 직접 관련된 다른 버튼이 같은 행에 놓일 공간을 확보합니다. 많은 버튼을 연속으로 넣으면 사용자가 운동하기가 더 어려워집니다.

2. '다른 버튼 추가'버튼을 기본 버튼 위에 놓으십시오. 


add-another-button.png 

왼쪽 : 기본 버튼 옆에 '다른 버튼 추가'버튼 (권장하지 않음) 오른쪽 : 기본 버튼 바로 위에 '다른 버튼 추가'(양호)


때때로 사용자는 추가 정보를 추가해야 합니다. 예를 들어, 가족 구성원의 이름을 예약에 추가해야 하는 경우.


'다른 버튼 추가'버튼을 기본 버튼 위에 두면 다음과 같은 이점이 있습니다.

  • 사용자는 기본 버튼을 지나 선택하지 않아도 됩니다. 이 버튼은 Caroline Jarrett의 규칙에 따라 버튼을 적절한 순서로 배치합니다.
  • 기본 버튼은 앞에서 설명한 대로 왼쪽에 일관되게 유지됩니다.
  • 에릭 케네디 (Erik Kennedy)가 3 개의 지역 법칙에서 설명하는 것처럼, 그것은 복제되는 현장 옆에 변화에 영향을 미치는 곳에 위치하고 있습니다.

3. 기본 버튼 옆에‘저장 후 종료’버튼을 배치하십시오 


save-and-exit-button.png 


왼쪽 : 기본 버튼 위의 '저장 및 종료'버튼 버튼 (권장되지 않음). 오른쪽 : 기본 버튼 옆에 있는 ‘저장 및 종료’버튼 (양호).


때때로 사용자는 진행 상황을 긴 형식으로 저장해야 할 수도 있습니다.


‘저장 후 종료’버튼을 기본 버튼 위에 놓으면 더 중요하지 않다는 것을 의미합니다.


아래에 넣으면 스택 버튼이 다루기 어려워지고 취소 버튼 용으로 예약 된 영역이 사용됩니다.


따라서 작업이 양식과 직접 관련되어 있으므로 기본 버튼 옆에 놓을 수 있습니다.


일부 단일 필드 양식에서 입력 옆에 단추를 넣으십시오. 


single-field-form.png 


왼쪽 : 검색 창 아래 버튼 (권장하지 않음). 오른쪽 : 검색 창 옆에 있는 버튼 (양호).


드문 경우지만 입력 옆에 버튼을 놓을 수 있습니다.이 입력은 종종 사이트 헤더의 글로벌 검색 양식에서 볼 수 있습니다.


입력 아래에 버튼을 놓는 것은 특별히 잘못된 것은 아니지만 옆에 놓으면 공간이 절약되고 조금 더 깔끔해 보입니다.


그러나 필드가 하나만 있는 표준 양식에서는 이 작업을 수행하지 마십시오. 일관성이 없고 틀에 맞지 않습니다.


폼 위에 다중 선택 폼에 버튼 넣기 


multi-select-buttons.png 


왼쪽 : 목록 아래 다중 선택 버튼 (권장되지 않음). 오른쪽 : 목록 위의 다중 선택 버튼 (양호).


다중 선택 양식을 사용하면 한 번에 여러 항목을 선택하고 작업 할 수 있습니다. 예를 들어 Gmail에서 여러 이메일을 선택하여 한 번에 보관할 수 있습니다.


이 특별한 경우에는 단추를 양식 위에 놓으십시오.


이것은 컨트롤이 전체 지역의 변화에 ​​영향을 미치는 경우 Erik Kennedy의 규칙으로 인해 작동하는 또 다른 예입니다.


버튼을 목록 위에 놓으면 이러한 인터페이스에서 종종 필요한 페이지 매김 제어를 위해 더 쉽게 발견하고 바닥에 여유 공간을 남깁니다.


요약 


이 기사에서는 다양한 형식으로 단추를 배치 할 위치를 살펴 보았습니다.


표준 양식의 1 버튼이든 다중 선택 양식의 다중 버튼이든, 버튼 배치는 매우 중요하며 주의를 기울여야 합니다.


점검표 


  • 기본 버튼을 입력의 왼쪽 가장자리에 맞춥니다
  • 뒤로 버튼을 양식 위에 놓으십시오.
  • 접선적으로 관련된 동작을 폼 위에 배치
  • 그들이 하는 일에 따라 추가 버튼 배치
  • 일부 단일 필드 양식에서 입력 옆에 단추를 넣으십시오.
  • 폼 위에 다중 선택 폼에 버튼 넣기