버튼 디자인을 위한 기본 규칙

버튼은 인터랙션 디자인의 필수 요소이다. 버튼은 사용자와 시스템 간의 대화에서 주요 역할을 한다. 이 글에서는 효과적인 버튼을 만들기 위해 알아야 할 7가지 기본 원칙을 알려준다.

1. 버튼처럼 보이게 만들기

사용자 인터페이스와 상호 작용할 때 사용자는 ‘클릭 가능한(clickable)’ 항목과 그렇지 않은 항목을 즉시 알아야 한다. 디자인의 모든 항목을 디코딩 하려면 사용자의 노력이 필요하다. 일반적으로 사용자가 UI를 디코딩 하는 데 필요한 시간이 많을수록 사용자가 사용할 수 있는 기능이 줄어든다.

그러나 사용자는 특정 요소가 상호 작용하는지 여부를 어떻게 이해할까? 그들은 UI 객체의 의미를 명확히 하기 위해 이전 경험과 시각적 기표를 사용한다. 그렇기 때문에 적절한 시각적 기호(크기, 모양, 색상, 그림자 등)를 사용하여 요소를 버튼처럼 보이게 만드는 것이 중요하다. 시각적 기표(Visual signifiers)는 필수적인 정보 가치를 지니고 있다. 인터페이스에서 행동 유도성(affordances)을 만드는 데 도움 이 된다.

불행히도 많은 인터페이스에서 상호 작용의 기표는 약하고 상호 작용 노력이 필요하다. 결과적으로 검색 가능성을 효과적으로 줄인다.

상호 작용의 명확한 어포던스가 누락되고 사용자가 “클릭 가능한” 것과 그렇지 않은 것에 대해 어려움을 겪는다면 디자인을 얼마나 멋지게 만드는지는 중요하지 않다. 그들이 사용하기 어렵다는 것을 알게 되면 좌절감을 느끼고 궁극적으로 별로 유용하지 않다는 것을 알게 될 것이기 때문이다.

약한 기표는 모바일 사용자에게 훨씬 더 중요한 문제다. 개별 요소가 대화식인지 여부를 이해하기 위해 데스크톱 사용자는 요소에서 커서를 이동하고 커서가 상태를 변경하는지 확인할 수 있다. 모바일 사용자에게는 그러한 기회가 없다. 요소가 상호 작용하는지 여부를 이해하려면 사용자가 해당 요소를 탭 해야 한다. 상호 작용성을 확인할 수 있는 다른 방법은 없다.

UI의 무언가가 사용자에게 명백하다고 가정하지 마십시오.

많은 경우 디자이너는 대화형 요소가 사용자에게 명백하다고 가정하기 때문에 의도적으로 버튼을 대화형 요소로 식별하지 않는다. 인터페이스를 디자인할 때 항상 다음 규칙을 염두에 두어야 한다.

클릭 가능성 표시를 해석하는 능력은 사용자의 디자인과 동일하지 않습니다. 디자인의 각 요소가 무엇을 하려는지 알고 있기 때문입니다.
Your ability to interpret clickability signifiers aren’t the same as your users’ because you know what each element in your own design is intended to do.

버튼에 친숙한 디자인 사용

다음은 대부분의 사용자에게 친숙한 버튼의 몇 가지 예를 보여준다.

사각형 테두리(square borders)가 있는 채워진 버튼
둥근 모서리(rounded corners)가 있는 채워진 버튼
그림자(shadows)가 있는 채워진 버튼
고스트(Ghost) 버튼

그 모든 예 중에서 “그림자로 채워진 버튼” 디자인이 사용자에게 가장 명확하다. 사용자는 물체의 차원을 볼 때 그것이 누를 수 있는 것임을 즉시 알 수 있기 때문이다.

공백을 잊지 마세요

시각적 속성뿐만 아니라 버튼 자체가 중요하다. 버튼 근처에 있는 공백의 양은 사용자가 이것이 대화형 요소인지 아닌지를 이해하기 쉽게(또는 더 어렵게) 만든다. 아래 예에서 일부 사용자는 고스트 버튼을 정보 상자와 혼동할 수 있기 때문이다.

2. 사용자가 찾을 것으로 예상되는 위치에 버튼 배치

버튼은 사용자가 쉽게 찾을 수 있거나 볼 것으로 예상되는 위치에 있어야 한다. 사용자가 버튼을 찾도록 하지 마십시오. 사용자가 버튼을 찾을 수 없으면 버튼이 존재하는지 알 수 없다.

가능한 한 전통적인 레이아웃과 표준 UI 패턴을 사용한다.

기존의 버튼 배치는 검색 가능성을 높인다. 표준 레이아웃을 사용하면 사용자는 각 요소의 목적을 쉽게 이해할 수 있다. 강력한 기호가 없는 버튼이라도~. 표준 레이아웃과 깔끔한 시각적 디자인 및 충분한 여백을 결합하면 레이아웃을 더 쉽게 이해할 수 있다.

사용자와 버튼만 누르면 되는 게임을 하지 마세요.
Don’t play hunt-the-button game with your users

TIP : 검색 가능성에 대해 디자인을 테스트하기 바란다. 사용자가 수행하기를 원하는 몇 가지 작업이 포함된 페이지를 처음 탐색할 때 사용자에게 적절한 버튼을 쉽게 찾을 수 있어야 한다.

3. 버튼의 기능을 라벨(Label)로 지정

일반적이거나 오해의 소지가 있는 레이블이 있는 버튼은 사용자에게 큰 불만의 원인이 될 수 있다. 각 버튼의 기능을 명확하게 설명하는 버튼 레이블을 작성하기를 바란다. 이상적으로는 버튼의 레이블이 해당 동작을 명확하게 설명해야 한다.

사용자는 버튼을 클릭할 때 어떤 일이 발생하는지 명확하게 이해해야 한다. 간단한 예를 들어보자. 실수로 삭제 작업을 실행했는데 이제 다음 오류 메시지가 표시된다고 상상해 보자.

이 대화 상자에서 ‘OK’ 및 ‘Cancel’가 무엇을 나타내는지 명확하지 않다. 대부분의 사용자는 “‘Cancel’를 클릭하면 어떻게 됩니까?”라고 자문할 것이다.

‘OK’과 ‘Cancel’ 두 개의 버튼으로만 구성된 대화 상자나 양식을 디자인한 적이 없다.
Never designed a dialog box or form that consisted solely of the two buttons ‘OK’ and ‘Cancel’.

‘OK’ 레이블을 사용하는 대신 ‘Remove’를 사용하는 것이 좋다. 이렇게 하면 이 버튼이 사용자에게 무엇을 하는지 명확하게 알 수 있기 때문이다. 또한 ‘Remove’가 잠재적으로 위험한 작업인 경우 빨간색을 사용하여 이 사실을 표시할 수 있다.

잠재적으로 위험한 작업인 ‘Disabled Card’는 이 인터페이스에서 빨간색으로 표시된다. 이미지: 라모션 (Ramotion)

4. 버튼의 적절한 크기

버튼 크기는 화면에서 이 요소의 우선순위를 반영해야 한다. 큰 버튼은 더 중요한 작업을 의미한다.

버튼 우선순위 지정

가장 중요한 버튼을 가장 중요한 버튼처럼 보이게 한다. 항상 기본 작업 버튼을 더 눈에 띄게 만든다. 크기를 늘리고(버튼을 더 크게 만들면 사용자에게 더 중요해 보임) 대비되는 색상을 사용하여 사용자의 관심을 끌 수 있다.

Dropbox는 크기와 색상 대비를 사용하여 ‘Dropbox Business 무료 체험’ CTA 버튼에 사용자의 관심을 집중시킨다.

모바일 사용자를 위해 손가락 친화적인(finger-friendly) 버튼 만들기

많은 모바일 앱에서 버튼이 너무 작다. 이것은 종종 사용자가 잘못 입력하는 상황으로 이어진다.

왼쪽: 적절한 크기의 버튼. 오른쪽: 버튼이 너무 작습니다. 이미지: Apple

MIT Touch Lab 연구에 따르면 손가락 패드의 평균은 10-14mm이고 손가락 끝은 8-10mm이다. 이것은 10mm(38px) x 10mm(38px)가 좋은 터치 영역 사이즈를 의미한다.

5. 주문에 주의

버튼의 순서는 사용자와 시스템 간의 대화 특성을 반영해야 한다. 사용자가 이 화면에서 어떤 순서를 기대하는지 스스로에게 물어보고 그에 따라 디자인하는 것이 좋다.

사용자 인터페이스는 사용자와의 대화이다.
User interface is a conversation with your users

예를 들어 페이지 매김에서 ‘이전/다음’ 버튼의 순서를 지정하는 방법은 무엇인가? 앞으로 이동하는 버튼은 오른쪽에, 뒤로 이동하는 버튼은 왼쪽에 있어야 하는 것이 논리적이다.

6. 너무 많은 버튼을 사용하지 마십시오

이것은 많은 앱과 웹사이트에서 흔히 발생하는 문제이다. 너무 많은 옵션을 제공하면 사용자는 아무것도 하지 않게 된다. 앱이나 웹사이트에서 페이지를 디자인할 때 사용자가 취하기를 바라는 가장 중요한 행동에 대해 생각해보라.

7. 상호작용에 대한 시각적(visual) 또는 청각적(audio) 피드백 제공

사용자가 버튼을 클릭하거나 탭 하면 사용자 인터페이스가 적절한 피드백으로 응답할 것으로 기대한다. 작업 유형에 따라 시각적 피드백 또는 오디오 피드백이 될 수 있다. 사용자에게 피드백이 없으면 시스템이 명령을 받지 못한 것으로 간주하고 작업을 반복한다. 이러한 동작으로 인해 불필요한 작업이 여러 번 발생하는 경우가 많다.

왜 이런 일이 발생할까? 인간으로서 우리는 물체와 상호 작용한 후 약간의 피드백을 기대한다. 시각적, 청각적 또는 촉각적 피드백 — 상호 작용이 등록되었다는 사실을 인정하는 모든 것이 대상이다.