양식의 버튼 배치는 종종 모양에 따라 무시되거나 우선 순위가 지정됩니다.
그러나 단추를 배치하면 양식을 만들거나 끊을 수 있으며 양식은 사용자의 경험을 만들거나 끊을 수 있습니다. 그렇기 때문에 제대로 하는 것이 중요합니다.
원본 : https://adamsilver.io/articles/where-to-put-buttons-in-forms
버튼과 문제의 형태에 따라 달라 지므로 소리가 더 어려워집니다.
또한 다른 형태를 전체적으로 분석해야 합니다. 그렇지 않으면 우리는 일관성이 없고 혼동되는 다른 장소에 같은 버튼이 나타날 수 있습니다.
여기에서는 연구와 모범 사례를 기반으로 다양한 양식에 버튼을 배치 할 위치를 설명합니다.
기본 버튼을 입력의 왼쪽 가장자리에 맞춥니다
왼쪽 : 오른쪽 정렬 버튼 (권장되지 않음). 오른쪽 : 왼쪽 정렬 버튼 (양호).
시선 추적 연구에 관한 그의 기사에서 Luke Wroblewski는 기본 버튼이 입력의 왼쪽 가장자리와 정렬 되어야 한다고 말합니다.
"완료를 향한 명확한 길을 밝히십시오. 입력과 동작을 강한 세로 축에 맞추면 양식을 완성하는 방법을 명확하게 알 수 있습니다."
이 레이아웃은 화면 돋보기 사용자가 화면을 가로 지르지 않고도 볼 수 있도록 도와줍니다.
왼쪽 : 확대하면 오른쪽 정렬 버튼이 보이지 않습니다. 오른쪽 : 확대 한 경우 왼쪽 정렬 된 버튼 — 여전히 표시됩니다.
뒤로 버튼을 양식 위에 놓으십시오.
왼쪽 : 기본 버튼 옆에 있는 뒤로 버튼 (권장되지 않음). 오른쪽 : 양식 위의 뒤로 버튼 (양호).
일부 양식이나 설문지가 여러 페이지에 표시되고 일부 사람들은 답을 확인하거나 변경하기 위해 되돌아 가기를 원합니다.
안타깝게도 일부 사용자는 디자인이 잘못되어 양식을 클릭했을 때 데이터를 잃어버린 경험으로 인해 브라우저 뒤로 버튼을 신뢰하지 않습니다. 해결책은 양식 별 뒤로 단추를 제공하는 것입니다.
Mick Couper, Reg Baker 및 Joanne Mechling에 의해 수행 된 연구에 따르면 기본 단추의 오른쪽에 뒤로 단추를 배치하는 것이 혼란스럽고 대신 왼쪽이나 아래로 이동해야 합니다.
아래는 기본 버튼이 일관되게 위치하고 키보드 사용자가 마지막 필드에서 바로 탭할 수 있도록 하기 때문에 바람직합니다.
그러나 연구 결과 페이지 상단에 뒤로 버튼이 있는 옵션은 포함되지 않았습니다.
Government Digital Service의 디자이너 인 Joe Lanman은 뒤로 버튼을 Register To Vote 모범 디지털 서비스의 맨 위에 놓았습니다. 이제 모든 정부 서비스에 대한 표준 접근 방식입니다.
페이지 상단에 뒤로 링크를 표시하는 투표 등록 서비스의 질문 페이지.
Joe는 뒤로 버튼을 맨 위에 놓으면 다음과 같은 이유로 잘 작동한다고 말했습니다.
이 방법은 뒤로 버튼과 기본 버튼을 명확히 구분하여 사용자가 진행하는 데 걸리는 시간을 줄여야 합니다. 필요한 경우 추가 버튼을 위한 공간이 생겨 나중에 다루겠습니다.
접선적으로 관련된 동작을 폼 위에 배치
왼쪽 : 양식 내 '비밀번호를 잊어 버렸습니다'링크 (권장하지 않음). 오른쪽 : 양식 외부의 '비밀번호를 잊어 버렸습니다'링크 (양호 함).
일부 양식에는 데이터를 제출하지 않고 양식 자체와 접하는 관련 작업이 있습니다.
예를 들어 로그인 양식의 '비밀번호를 잊어 버렸습니다'링크를 사용하면 사용자가 비밀번호를 재설정 할 수 있지만 로그인 프로세스 자체는 아닙니다.
비밀번호 입력란 옆에 '비밀번호를 잊어 버렸습니다'링크가 표시되는 경우가 종종 있지만 다음과 같은 이유로 문제가 있습니다.
양식 위에 링크를 넣으면 이러한 모든 문제가 해결됩니다.
그들이 하는 일에 따라 추가 버튼 배치
여러 개의 버튼이 있는 양식에는 문제가 있습니다.
선택의 수와 복잡성에 따라 결정을 내리는 데 걸리는 시간이 늘어나므로 추가 버튼을 사용하면 선택과 시간이 추가됩니다.
또한 키보드 사용자는 Enter 키를 눌러 양식을 제출할 때 수행 할 작업을 확신 할 수 없습니다.
즉, 때로는 여러 개의 버튼이 필요합니다.
버튼의 기능에 대해 생각하면 버튼을 놓을 위치를 쉽게 결정할 수 있습니다.
다른 치료가 필요한 3 가지 예를 살펴 보겠습니다.
1. 취소 버튼을 기본 버튼 아래에 놓습니다.
왼쪽 : 기본 버튼 옆에 있는 취소 버튼 (권장되지 않음). 오른쪽 : 기본 버튼 아래에 있는 취소 버튼 (양호).
Luke Wroblewski의 연구에 따르면 취소 버튼은 기본 버튼의 오른쪽에 있고 덜 두드러지게 링크로 표시되어야 합니다.
그러나 취소 버튼을 기본 버튼 아래에 두면 몇 가지 장점이 있습니다.
2. '다른 버튼 추가'버튼을 기본 버튼 위에 놓으십시오.
왼쪽 : 기본 버튼 옆에 '다른 버튼 추가'버튼 (권장하지 않음) 오른쪽 : 기본 버튼 바로 위에 '다른 버튼 추가'(양호)
때때로 사용자는 추가 정보를 추가해야 합니다. 예를 들어, 가족 구성원의 이름을 예약에 추가해야 하는 경우.
'다른 버튼 추가'버튼을 기본 버튼 위에 두면 다음과 같은 이점이 있습니다.
3. 기본 버튼 옆에‘저장 후 종료’버튼을 배치하십시오
왼쪽 : 기본 버튼 위의 '저장 및 종료'버튼 버튼 (권장되지 않음). 오른쪽 : 기본 버튼 옆에 있는 ‘저장 및 종료’버튼 (양호).
때때로 사용자는 진행 상황을 긴 형식으로 저장해야 할 수도 있습니다.
‘저장 후 종료’버튼을 기본 버튼 위에 놓으면 더 중요하지 않다는 것을 의미합니다.
아래에 넣으면 스택 버튼이 다루기 어려워지고 취소 버튼 용으로 예약 된 영역이 사용됩니다.
따라서 작업이 양식과 직접 관련되어 있으므로 기본 버튼 옆에 놓을 수 있습니다.
일부 단일 필드 양식에서 입력 옆에 단추를 넣으십시오.
왼쪽 : 검색 창 아래 버튼 (권장하지 않음). 오른쪽 : 검색 창 옆에 있는 버튼 (양호).
드문 경우지만 입력 옆에 버튼을 놓을 수 있습니다.이 입력은 종종 사이트 헤더의 글로벌 검색 양식에서 볼 수 있습니다.
입력 아래에 버튼을 놓는 것은 특별히 잘못된 것은 아니지만 옆에 놓으면 공간이 절약되고 조금 더 깔끔해 보입니다.
그러나 필드가 하나만 있는 표준 양식에서는 이 작업을 수행하지 마십시오. 일관성이 없고 틀에 맞지 않습니다.
폼 위에 다중 선택 폼에 버튼 넣기
왼쪽 : 목록 아래 다중 선택 버튼 (권장되지 않음). 오른쪽 : 목록 위의 다중 선택 버튼 (양호).
다중 선택 양식을 사용하면 한 번에 여러 항목을 선택하고 작업 할 수 있습니다. 예를 들어 Gmail에서 여러 이메일을 선택하여 한 번에 보관할 수 있습니다.
이 특별한 경우에는 단추를 양식 위에 놓으십시오.
이것은 컨트롤이 전체 지역의 변화에 영향을 미치는 경우 Erik Kennedy의 규칙으로 인해 작동하는 또 다른 예입니다.
버튼을 목록 위에 놓으면 이러한 인터페이스에서 종종 필요한 페이지 매김 제어를 위해 더 쉽게 발견하고 바닥에 여유 공간을 남깁니다.
요약
이 기사에서는 다양한 형식으로 단추를 배치 할 위치를 살펴 보았습니다.
표준 양식의 1 버튼이든 다중 선택 양식의 다중 버튼이든, 버튼 배치는 매우 중요하며 주의를 기울여야 합니다.
점검표
등록된 댓글이 없습니다.
