brunch

매거진 UX 디자인의 모든 것

라이킷 143 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 29. 2016

버튼 UI 설계 6가지 원칙

UX 디자인 배우기 #21

Today UX 아티클

Best Practices을 소개하고자 합니다.

버튼은 매우 간단한 UI 요소처럼 보이지만 가장 중요한 요소 중 하나라고 합니다. 이 글에서는 사용자 경험을 개선해주는 효과적인 컨트롤을 만들기 위해 알아야 할 기본을 다루고 있습니다.

버튼처럼 보이게 만든다

사람들은 ‘시각적 단서’를 통해 클릭할 수 있는 버튼인지 아닌지 알아보기 때문에 적절한 ‘시각적 시그니파이어(visual signifiers)를 사용하는 것이 중요하다고 합니다.

모양

가장 안전한 버튼 모양은 오래전에 도입되어 유저에게 매우 익숙한 사각형이나 모서리가 둥근 사각형이라고 합니다.

처음 윈도우95를 시작했을 때: 유명한 ‘시작(start)’ 버튼을 포함해 모든 버튼이 사각형이라고 합니다.

다른 모양을 사용할 수도 있지만, 조금 위험하고 사람들이 버튼임을 분명히 인지할 수 있게 해줘야 한다는 걸 명심하라고 합니다.

안드로이드 앱에서 주요 액션을 보여주는 플로팅 액션 버튼은 원형으로 보여주고 있습니다.

어떤 모양을 선택하건 가장 중요한 것은 인터페이스 전반에 걸쳐 ‘일관성’을 유지하여 유저가 버튼으로 인식할 수 있게 해주는 것이라고 합니다.

그림자와 하이라이트

그림자 효과를 주면 대상이 튀어 올라온 것처럼 보여 누를 수 있는 대상으로 인지한다고 합니다.

버튼에 미묘하게라도 그림자효과가 있으면 유저는 상호작용할 수 있는 요소로 인지할 수 있다고 합니다.

명확한 레이블을 붙인다

유저는 명확한 의미가 없는 인터페이스 요소는 피하려 한다고 합니다. 때문에 모든 버튼에는 적절한 레이블이나 아이콘을 붙여야 하는데, 이를 선택할 때는 ‘최대한 놀라게 하지 않는다는 법칙(principle of least astonishment)’에 기반해야 한다고 합니다.

명확하고 분명한 레이블

유저는 어떤 액션을 하는 버튼인지 이해하고 있을 때 더 편안함을 느낀다고 합니다. 때문에 ‘제출(submit)’같은 모호한 레이블이나 아래 사례와 같은 추상적인 레이블처럼 액션에 대한 충분한 정보를 주지 않는 레이블을 피해야 한다고 합니다.

무엇을 하는 것인지 헷갈리게 만드는 인터페이스요소는 피해야 합니다.

버튼으로 할 수 있는 행동은 행위 동사를 통해 표현하는 것이 중요하다고 합니다. 예를 들어서, 회원가입을 할 때, ‘Create Account’라는 버튼을 쓰면 버튼을 눌렀을 때 어떤 결과가 나오는지 명확히 알 수 있다고 합니다.

버튼의 레이블은 유저가 눌렀을 때 어떤일이 일어날 것인지 명확히 알려줘야 합니다.

유저가 찾을 수 있는 곳에 버튼을 배치한다.

위치와 순서

native app을 디자인한다면, 버튼의 적합한 위치와 순서를 선택할 때 플랫폼 GUI 가이드라인을 따라야 한다고 합니다. 유저의 기대에 맞는 일관성 있는 디자인을 적용해야 사람들의 시간을 절약해줄 수 있기 때문이라고 합니다. 반면 웹 기반 앱에서는 어디에 버튼을 놓는 것이 유저에게 가장 좋은지 테스팅을 통해 알아봐야 한다고 합니다.

유저가 버튼과 상호작용하기 쉽게 만든다.

버튼의 사이즈와 비주얼 피드백은 유저가 버튼과 상호작용할 때 핵심적인 역할을 한다고 합니다.

사이즈와 간격

버튼의 사이즈는 페이지에 있는 다른 요소와도 조화를 이뤄야 하지만, 동시에 사용하는 사람이 상호작용하기에도 충분히 커야 한다고 합니다.

작은 터치 타겟은 큰 것 보다 누르기 힘들다고 합니다.

터치가 주요 입력 방법이라면, MIT 터치 랩의 연구 결과에 따라 터치 타깃을 최소 10mm x 10mm로 만드는 것이 좋다고 합니다. 마우스와 키보드가 주요 입력 방법일 때는 버튼 사이즈가 약간 줄어도 된다고 합니다.

터치 타겟의 최소 사이즈는 10mm x 10mm이 좋다고 합니다.

버튼 사이의 간격은 두 컨트롤을 분리시켜주고 인터페이스에 숨 쉴 공간을 준다고 합니다.

버튼 사이의 간격

비주얼 피드백 제공

일반적으로 버튼은 여러 상태를 가지고 있으며, 현 상태를 보여주는 시각적 피드백을 제공하는 것이 가장 중요한 태스크가 되어야 한다고 합니다. 머티리얼 디자인에서는 버튼의 여러 상태를 전달하는 방법을 다음과 같이 설명합니다.

버튼 위에 마우스를 올렸을 때 혹은 탭을했을 때와 활성화 되었을 때 버튼의 상태를 다르게 보여주는 것을 고려해야 합니다.

애니메이션은 버튼의 행동을 액션으로 보여줍니다.

가장 중요한 버튼은 시각적으로 강조한다

행동 유도버튼(Call to Action Button)

행동유도 버튼 같은 중요한 버튼은 배경과 대비되는 색상을 이용하고, 유저가 이용하는 경로에 두어야 한다고 합니다. 예를 들어 아래 지메일 UI를 살펴보면 ‘보내기(Send)’ 버튼에는 파란색을 사용하고, 본문 하단에 배치하여 본문 작성을 끝내고 나면 바로 인지할 수 있도록 만들었다고 합니다.

회색톤의 UI에 한 가지 색상을 추가하여 간단하고 효과적으로 눈길을 끌었다고 합니다.

이런 룰은 웹사이트에도 적용할 수 있다고 합니다. 아래 Behance 사례를 보면 색상과 위치를 활용하여 ‘Sign Up’로 눈길을 끌었다고 합니다.

가장 중요한 행동 유도 버튼이 배경과 대비되어 두드러져 보인다고 합니다.

시각적으로 구분된 주요 버튼과 부차적인 버튼

주요 액션을 취하는 버튼과 부차적 액션을 취하는 버튼에 시각적 차이를 주면 사람들이 좋은 선택하는 데 도움이 된다고 합니다. 주요 긍정 액션은 시각적으로 강조하고, 부차적인 액션(‘취소’, ‘뒤로 가기’ 등)은 잠재적 오류의 위험을 최소화하고 성공적인 결과로 사람들을 이끌도록 시각적 강조를 최소화해야 한다고 합니다.