brunch

매거진 UX와 UI 제대로 소화시키기

라이킷 87 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 헤이민 HEYMIN Dec 31. 2018

[번역] 버튼디자인을 위한 기본규칙 7가지

버튼의 UX 디자인은 항상 인지성과 명확성이 고려되어야 합니다.

모바일에서 버튼은 사용자의 습관과 매우 밀접한 요소입니다. 예쁘기보다는 버튼처럼 잘 보이고 잘 눌리는게 중요합니다. 이 아티클은 더 나은 버튼디자인이 되는 방법을 알려줍니다. 대게는 이미 익숙한 내용이지만 되새길만한 부분들이 있었고 개인적으로 ‘배려’라는 단어가 떠오르는 글이었습니다. 사용자가 선택할 수 있는 버튼을 너무 많이 주지 말고! 또 잘 누를 수 있도록 좋은 힌트를 디자인 합시다!

버튼디자인을 위한

기본규칙 7가지

[원문] 7 Basic Rules for Button Design

이미지출처 : Gal Shir

버튼은 인터렉션 디자인의 필수요소입니다. 사용자와 시스템 간의 대화에 있어 중요한 역할을 합니다. 이번 아티클에서 저는 여러분이 효과적인 버튼을 디자인하기위해 알아야하는 7가지 기본규칙에 대해 이야기할까 합니다.

1. 버튼을 버튼처럼 보이게 하세요.

UI에서 인터렉션이 일어날 때, 사용자들은 ‘클릭할 수 있는 것과 아닌 것’을 즉각적으로 알아야 합니다. 일반적으로 UI를 해석하는 데에 오랜 시간이 걸릴수록, UI의 사용성은 떨어질 수 밖에 없습니다.

사용자는 어떤 요소가 인터렉티브한지 아닌지 어떻게 알 수 있을까요? 그들은 UI 오브젝트의 명확한 의미를 파악하기 위해 이전의 경험이나 시각 기호를 통해 알아봅니다. 그래서 버튼처럼 보이도록 디자인하려면 적절한 시각 기호( 크기, 모양, 색상, 그림자 등)가 매우 중요합니다. 시각 기호는 필수 정보의 가치를 살려줍니다. - 그들은 인터페이스에서 요구사항을 표현할 수 있도록 도와줍니다.

안타깝게도, 많은 인터페이스들이 인터렉션을 상징하는 기호가 약하고 알아보기 위해 많은 노력을 요구합니다. 따라서 발견할 수 있는 가능성이 매우 낮습니다.

만약 인터렉션을 위한 확실한 요구사항이 없어 사용자가 ‘클릭할 수 있는 것과 아닌 것'이 무엇인지 혼란스러워한다면, 이게 멋진 디자인이냐는 중요한 문제가 아닙니다. 쓰기 어렵다면 사용자는 좌절감을 느낄테고 결국 사용성은 떨어질 것입니다.

약한 기호는 모바일 사용자들에게 더욱 문제가 됩니다. 요소들이 개별적으로 인터렉션 되는지 아닌지를 알고자 할 때, 데스크탑 사용자들은 요소 위에 커서를 올려보고 커서상태가 바뀌는지 확인하면 됩니다. 그러나 모바일 사용자는 이런 기회를 가질 수 없습니다. 그저 요소를 탭하는 방법 밖에 없습니다. - 인터렉션을 확인해볼 수 있는 다른 방법이 전혀 없습니다.

UI에 있는 것이 사용자에게
명확하다고 가정하지 마세요

대부분의 경우, 디자이너들은 인터렉션 요소가 사용자에게 확실하게 전달될거라고 가정하기 때문에 굳이 버튼을 인터렉션 요소로 정의하지 않습니다. 인터페이스를 디자인을 할 때, 당신은 다음 규칙들을 항상 새겨두어야 합니다.

클릭할 수 있는 기호들을 알아보는 당신의 능력은 사용자의 능력과 다릅니다. 당신은 자신이 의도한 디자인이기 때문에 각각의 요소가 무엇인지 이미 알고 있기 때문입니다.

사용자에게 익숙한 디자인을 하세요

아래에는 사용자에게 가장 익숙한 버튼의 예가 있습니다.

사각형 테두리가 있는 채워진 버튼

모서리가 둥글고 채워진 버튼

그림자가 있는 채워진 버튼

고스트 버튼

이 예시들 가운데에 ‘그림자가 있는 채워진 버튼’이 가장 명확한 디자인입니다. 사용자는 오브젝트의 형태를 보고 누를 수 있는 무언가라는 것을 즉각적으로 알아차립니다.

여백을 잊지마세요

버튼 자체의 시각적인 비율 뿐만 아니라, 여백도 매우 중요합니다. 버튼 주변에 있는 여백의 양은 사용자가 이것이 상호작용하는 요소인지 아닌지를 더 쉽게(혹은 더 어렵게) 판단하도록 만듭니다.

예를 들어, 아래와 같은 상황에서 일부 사용자들은 정보박스인지 고스트버튼인지 헷갈릴 수 있습니다.

당신이 사용자라면, 이게 박스인지 버튼인지 구별할 수 없습니다.

2. 사용자가 찾을 수 있다고 기대하는 곳에 버튼을 두세요

버튼은 사용자가 쉽게 찾을 수 있거나, 볼 수 있다고 기대하는 위치에 놓여져야 합니다. 사용자가 버튼을 사냥하게 만들지 마세요. 만약 버튼을 찾을 수 없다면, 그것이 존재하는지 모를 것입니다.

최대한 보편적인 레이아웃과
표준 UI패턴을 사용하세요

보편적인 버튼의 배치는 발견할 가능성을 높여줍니다. 표준 레이아웃 역시 사용자들이 요소 각각의 목적을 쉽게 이해할 수 있도록 합니다. - 버튼이 강하게 드러나지 않더라도 말입니다. 시각적으로 명료한 디자인의 표준 레이아웃에 충분한 여백이 더해진다면 더욱 이해하기 쉬울 것입니다.

사용자들이 버튼사냥게임을 하게 만들지마세요.

팁: 당신의 디자인에서 발견가능성을 테스트 해보세요. 당신이 의도한 몇 가지 액션이 포함된 페이지를 사용자가 처음으로 탐색할 때, 적절한 버튼을 쉽게 찾을 수 있어야 합니다.

3. 버튼으로 할 수 있는 작업을 나타내주세요

포괄적이거나 잘못 이끄는 라벨의 버튼은 사용자들의 큰 불편을 야기시킵니다. 각 버튼이 수행하는 것을 명확하게 명시해주세요. 버튼의 라벨은 버튼의 동작을 확실하게 설명해야 합니다.

사용자들은 직접 버튼을 클릭했을 때 어떻게 되는지 명확히 알 수 있습니다. 예를 들어 볼게요. 당신이 갑자기 삭제 액션과 그리고 이런 에러 메세지를 마주했습니다.

‘OK’는 모호한 라벨은 액션버튼이 할 수 있는 것을 명확하게 설명하지 못합니다.

이 다이얼로그에서 ‘OK’와 ‘Cancel’이라는 표현이 의미하는 것이 명확하지 않습니다. 대부분의 사용자들은 “내가 Cancel 버튼을 누르면 어떻게 되는건데?”라고 물을 것입니다.

‘OK’와 ‘Cancel’ 2가지 버튼만 있는 다이얼로그 박스는 절대 디자인하지 마세요.

‘OK’라벨을 사용하는 대신에 ‘Remove’를 사용하세요. 그래야 사용자에게 버튼이 하는 일을 명확하게 보여줍니다. 만약 ‘Delete’가 위급상황이라면, 상태를 나타내기 위해 빨간색을 사용할 수 있습니다.

‘Remove’ 라벨은 버튼이 하는 일을 사용자에게 명확하게 전달합니다.

이 인터페이스에서 잠재적인 위험 액션 ‘Disable card’는 빨간색으로 되어있습니다. (이미지출처: Ramotion)

4. 적절한 사이즈로 디자인하세요

버튼 사이즈는 화면에서 해당요소의 우선순위를 반영해야 합니다. 큰 버튼일수록 중요한 액션을 의미합니다.

버튼의 우선순위를 정하세요

가장 중요한 버튼은 ‘이게 제일 중요한 거구나’라고 느껴지게 만드세요. 주요 액션버튼이 더욱 눈에 띌 수 있게 항상 노력하세요. 사용자에게 중요한 것으로 보이도록 버튼을 더 크게 만들고 사용자의 주의를 끌 수 있도록 대비되는 컬러를 사용하도록 합니다.

Dropbox는 ‘Dropbox Business를 무료로 사용하세요’라는 CTA버튼에 사용자의 주의를 끌 수 있는 사이즈와 대비되는 컬러를 사용하고 있습니다.

모바일 사용자들의 손가락에
편한 버튼을 디자인하세요

많은 모바일 앱들을 보면, 버튼들이 너무 작습니다. 그래서 사용자가 잘못 선택하는 상황들을 초래하기도 합니다.

좌: 적절한 버튼 사이즈 / 우: 너무 작은 버튼 사이즈 (이미지출처: Apple)

MIT Touch Lab 연구는 손가락 패드 영역은 10-14mm 정도 되며 손가락은 8-10mm 입니다. 따라서 10mm*10mm 사이즈가 터치하기에 적합한 최소 사이즈라고 할 수 있습니다.

이미지 출처 : uxmag

5. 버튼의 질서를 기억하세요

버튼의 질서는 사용자와 시스템 사이에 일어나는 대화의 성격을 반영해야 합니다. 사용자가 이 화면에서 기대하는 것이 무엇인지 자문해보고 그에 따라 디자인하도록 하세요.

UI는 사용자랑 나누는 대화와도 같습니다.

예를 들어, ‘이전/다음’ 버튼을 보여줄 때 어떻게 해야할까요? 논리적으로 생각하면 당연히 다음으로 이동시키는 버튼은 오른 쪽에 있어야하고, 이전으로 이동시키는 버튼은 왼쪽에 있어야 합니다.

6. 너무 많은 버튼을 사용하지 마세요

이건 많은 앱과 웹사이트에서 찾을 수 있는 흔한 문제입니다. 당신이 너무 많은 옵션을 제공하면 사용자들은 아무것도 안해버릴 수 있습니다.(->관련된 TED영상 링크) 당신의 앱이나 웹사이트의 페이지를 디자인할 때, 사용자에게 원하는 가장 중요한 액션에 대해 생각해야 합니다.

버튼이 너무 많잖아!

7. 인터렉션에 대해 시각적으로 또는 음성으로 피드백을 제공하세요

사용자가 버튼을 클릭하거나 탭하면, 그들은 UI가 적절한 피드백을 줄거라 기대합니다. 적용유형에 따라 피드백은 시각적인 것 또는 음성이 될 것입니다. 아무런 피드백이 없다면 사용자는 시스템이 명령을 처리하지 못했다고 생각하고 다시 액션을 시도할 것입니다. 이런 상황은 종종 불필요한 작업을 여러번 하게 만듭니다.

왜 이런 일이 발생하는걸까요? 인간으로서 우리는 오브젝트와 상호작용한 후에 어떠한 피드백을 기대하게 됩니다. 피드백은 시각적인 것, 음성 또는 기술적인 것이 될 수 있습니다. - 상호작용이 입력되었다는 사실을 알려주는 어떤 형태든 가능합니다.