버튼 디자인을위한 7 가지 기본 규칙
버튼은 상호 작용 설계의 필수 요소입니다. 그들은 사용자와 시스템 간의 대화에서 중요한 역할을합니다. 이 기사에서는 효과적인 버튼을 만들기 위해 알아야 할 7 가지 기본 원칙을 살펴 보겠습니다.
1. Button을 button처럼 보이게하십시오.
사용자 인터페이스와 상호 작용할 때, 사용자는 '클릭 가능'한 것과 그렇지 않은 것을 즉시 알아야합니다. 디자인의 모든 항목에는 사용자가 해독해야하는 노력이 필요합니다. 일반적으로 사용자가 UI를 디코딩하는 데 필요한 시간이 길어질수록 사용 빈도가 떨어집니다.
그러나 사용자가 특정 요소가 상호작용하는지 아닌지를 어떻게 알수 있을까요? UI 개체의 의미를 명확히하기 위해 이전 경험과 시각적 기호를 사용합니다. 그렇기 때문에 적절한 비주얼 기호 (크기, 모양, 색상, 그림자 등)를 사용하여 요소를 버튼처럼 보이게 만드는 것이 중요합니다. 비주얼 기표는 필수 정보 값을 보관 유지 - 그들이 만드는 데 도움이 어포던스 인터페이스에 있습니다.
불행히도 많은 인터페이스에서 상호 작용의 표식은 약하고 상호 작용 노력이 필요합니다. 결과적으로 검색 가능성이 크게 감소합니다.
명확한 상호 작용의 애리조나가 누락되고 사용자가 "클릭 할 수있는"것과 그렇지 않은 경우로 어려움을 겪는다면 우리가 디자인을 얼마나 멋지게 만드는지는 중요하지 않습니다. 그들이 사용하기가 어렵다고 느낀다면, 그것은 실망스럽고 궁극적으로는 쓸만하지 않다는 것을 알게 될 것입니다.
약한 기호는 모바일 사용자에게 더욱 중요한 문제입니다. 개별 요소가 대화 형인지 여부를 이해하기 위해 데스크톱 사용자는 요소에서 커서를 이동하고 커서가 해당 상태를 변경하는지 여부를 확인할 수 있습니다. 모바일 사용자에게는 그러한 기회가 없습니다. 요소가 대화 형인지 또는 사용자가 상호 작용하는지 여부를 파악하려면 상호 작용을 확인할 수있는 다른 방법이 없습니다.
사용자의 UI에서 명확한 내용이 있다고 가정하지 마십시오.
대부분의 경우 설계자는 의도적으로 버튼을 대화 형 요소로 식별하지 않습니다. 대화 형 요소가 사용자에게 분명하다고 가정하기 때문입니다. 인터페이스를 디자인 할 때는 항상 다음 규칙을 명심해야합니다.
클릭 가능성 기호를 해석 할 수있는 능력은 디자이너는 자신의 디자인에서 각 요소의 의도를 알기 때문에 사용자와 동일하지 않습니다.
버튼에 익숙한 디자인 사용
다음은 대부분의 사용자에게 친숙한 버튼의 몇 가지 예입니다.
•사각형 테두리가 채워진 채워진 단추
•둥근 모서리가 채워진 채워진 단추
•채워진 그림자가있는 단추
•유령 버튼
이 모든 예제 중 "그림자가있는 채워진 단추"디자인이 가장 명확합니다. 사용자는 개체의 차원을 보게되면 즉시 해당 개체를 누를 수 있음을 알게됩니다.
공백을 잊지 마라.
버튼 자체의 시각적 속성이 중요 할뿐만 아니라 버튼 근처에있는 공백의 양은 사용자가 상호 작용 요소인지 아닌지를 쉽게 이해할 수 있도록합니다. 이 예에서 일부 사용자는 유령 버튼을 정보 상자와 혼동 할 수 있습니다.
2. 사용자가 원하는 위치에 버튼을 넣으십시오.
버튼은 사용자가 쉽게 찾을 수 있거나 보길 원하는 위치에 있어야합니다. 사용자가 버튼를 사냥하게하지 마십시오. 사용자가 버튼을 찾을 수 없으면 버튼이 있음을 알 수 없습니다.
가능한 한 많이 전통적인 레이아웃과 표준 UI 패턴 사용
기존 버튼 배치는 검색 가능성을 향상시킵니다. 표준 레이아웃을 사용하면 각 요소의 목적을 쉽게 이해할 수 있습니다. 강력한 기호가없는 버튼 일지라도. 표준 레이아웃과 깨끗한 시각적 디자인 및 충분한 공백을 결합하면 레이아웃을 더 쉽게 이해할 수 있습니다.
사용자와 헌트 -버튼-게임을하지 마세요.
팁 : 검색 가능성에 대한 디자인을 테스트하십시오. 사용자가 먼저 수행 할 작업이 포함 된 페이지로 이동하면 사용자에게 적합한 버튼을 쉽게 찾아야합니다.
3. 버튼에 라벨을 붙입니다.
일반 또는 잘못 이끄는 레이블이 있는 버튼은 사용자에게 큰 좌절감을 줄 수 있습니다. 각 버튼의 기능을 명확하게 설명하는 버튼 레이블을 작성하십시오. 이상적으로는 버튼의 레이블에 해당 동작을 명확하게 설명해야합니다.
사용자는 버튼을 클릭 할 때 일어나는 일을 명확히 이해해야합니다. 간단한 예를 들어 보겠습니다. 예기치 않게 삭제 작업을 시작한 다음 아래와 같은 오류 메시지가 표시된다고 가정 해보십시오.
막연한 레이블 'OK'는 동작 버튼에 대해 너무 많이 말하지 않습니다.
이 대화 상자에서 '확인'과 '취소'가 무엇을 나타내는지는 분명하지 않습니다. 대부분의 사용자는 " '취소'를 클릭하면 어떻게됩니까?"
'OK'와 'Cancel'두 버튼으로 만 구성된 대화 상자 나 폼을 설계하지 마십시오.
'OK'라벨을 사용하는 대신 '제거'를 사용하는 것이 더 좋습니다. 이렇게하면이 버튼이 사용자에게 무엇을하는지 명확하게 알 수 있습니다. 또한 '삭제'가 잠재적으로 위험한 작업 인 경우 빨간색을 사용하여이 사실을 알릴 수 있습니다.
'제거'는 사용자가 어떤 버튼을 사용하는지 분명히합니다.
잠재적으로 위험한 행동 인 '카드 사용 안함'은이 인터페이스에서 빨간색으로 표시됩니다. 이미지 : Ramotion 4. 버튼의 크기를 적절히 조절하십시오.
버튼 크기는이 요소의 우선 순위를 화면에 반영해야합니다. 큰 버튼은 더 중요한 행동을 의미합니다.
버튼 우선 순위 지정
가장 중요한 버튼을 가장 중요한 버튼처럼 보이게하십시오. 항상 기본 작업 버튼을 더 두드러지게 만드십시오. 크기를 늘리면 (버튼이 커지면 사용자에게 더욱 중요 해집니다) 대조 색상을 사용하여 사용자의주의를 끌 수 있습니다.
Dropbox는 크기 및 색상 대비를 사용하여 'Dropbox Business 무료'CTA 버튼을 사용하여 사용자의주의를 집중시킵니다.
모바일 사용자를 위해 손가락 친화적 인 버튼 만들기
많은 모바일 앱에서 버튼이 너무 작습니다. 이것은 종종 사용자가 실수를 할 때 상황을 초래합니다.
왼쪽 : 알맞은 크기의 버튼. 오른쪽 : 버튼이 너무 작습니다. 이미지 : Apple
MIT Touch Lab 연구에 따르면 손가락 패드의 평균 길이는 10-14mm이며 손가락 끝은 8-10mm입니다. 이로 인해 10mm x 10mm가 최소 터치 타겟 크기가됩니다.
5. 순서를 주의하십시오.
버튼 순서는 사용자와 시스템 간의 대화의 성격을 반영해야합니다. 이 화면에서 사용자가 어떤 순서로 기대하고 그에 따라 디자인할지 스스로에게 물어보십시오.
사용자 인터페이스는 사용자와의 대화입니다.
예를 들어 페이지 넘김에서 'Previous / Next'버튼을 어떤 순서로 배치합니까? 당신을 앞으로 움직이는 버튼은 오른쪽에 있어야하고, 뒤로 움직이는 버튼은 왼쪽에 있어야한다는 것은 논리적입니다.
6. 너무 많은 버튼을 사용하지 마십시오.
이는 많은 앱과 웹 사이트에서 공통적으로 발생하는 문제입니다. 너무 많은 옵션을 제공하면 사용자는 아무 것도하지 않게 됩니다. 앱이나 웹 사이트에서 페이지를 디자인 할 때 사용자가 취해야 할 가장 중요한 작업에 대해 생각해보십시오.
7. 상호 작용에 대한 시각 또는 음성 피드백 제공
사용자가 버튼을 클릭하거나 탭하면 사용자 인터페이스가 적절한 피드백으로 응답 할 것으로 기대합니다. 작동 유형에 따라 시각 또는 음성 피드백이 될 수 있습니다. 사용자가 피드백을받지 못하면 시스템이 명령을받지 못했음을 고려하여 조치를 반복합니다. 이러한 동작은 종종 불필요한 여러 작업을 유발합니다.
왜 이런 일이 일어나는 걸까요? 인간으로서, 우리는 물체와 상호 작용 한 후 약간의 피드백을 기대합니다. 시각적, 청각 적 또는 촉각 적 피드백 일 수 있습니다. 상호 작용이 등록되었다는 사실을 인정하는 모든 것.
다운로드와 같은 일부 작업의 경우 사용자 입력을인지 할뿐만 아니라 프로세스의 현재 상태를 표시 할 가치가 있습니다.
결론
버튼이 상호 작용 디자인의 일반적인 요소이기는하지만이 요소를 가능한 한 훌륭하게 만드는 데 많은주의를 기울일 가치가 있습니다. 버튼 UX 디자인은 항상 인식과 명료성에 관한 것이어야합니다.
고맙습니다!
