Button design
UI component series
Buttons vs Links
버튼은 사용자가 취할 수 있는 액션을 수행하게 한다. Dialog, Form, Toolbar 등의 전반적인 UI에 사용된다. 버튼과 링크의 차이는 다음과 같다.
Link는 "더 보기", "Roger Wright 프로파일 보기" 등 다른 장소로 내비게이션 할 때 사용된다.
Button은 "제출하기", "합치기", "새로 만들기", "업로드" 등 액션을 수행할 때 사용된다.
버튼의 State는 사용자에게 버튼의 상태를 보여준다.
버튼의 인터렉션과 스타일을 맞게 사용하는 것이 중요하다. 각각의 state는 다른 state나 주변의 레이아웃과 확실히 구분되게 보여야 한다. 그러나 컴포넌트의 디자인을 너무 많이 바꾸거나 시각적인 노이즈를 만들어서는 안 된다.
Normal - 컴포넌트가 사용 가능하다는 것을 보여준다.
Focus - 사용자가 키보드나 다른 입력장치로 선택했다는 것을 보여준다.
Hover - 사용자가 동작하는 요소 위로 커서를 위치했다는 것을 보여준다.
Active - 사용자가 버튼을 눌렀다는 것을 보여준다.
Porgress/Loading - 액션이 즉시 수행되지 않을 때나 액션을 수행하는 도중에 있다는 것을 보여줄 때 사용된다.
Disabled - 컴포넌트가 현재 사용 불가능하나, 나중에는 사용 가능함을 보여준다.
버튼은 다양한 색상과 형태, 크기를 가지고 있다.
가장 흔한 형태는 알아보기 쉽고 보기 좋은 둥근 모서리의 사각형 버튼이다. 목적, 플랫폼, 가이드라인에 따라 올바른 스타일의 버튼을 골라야 한다. 다음은 일반적인 형태들이다.
스타일은 액션의 중요도를 나타낸다.
스타일은 주로 덜 중요한 액션과 더 중요한 액션을 구분시켜 주는 데 사용된다. 그리고 사용자가 여러 가지 선택지 중에 어떤 것을 선택해야 하는지에 대해 가이드를 해주는 액션 간의 계층을 만들어 준다. 보통 하나의 가장 중요한 버튼과("primary" 버튼), 여러 개의 중간의 중요도를 가진 " secondary" 버튼, 그리고 별로 중요하지 않은 "teritiary" 버튼을 적용한다.
" default"가 없을 경우도 있다.
일반적으로 가장 자주 사용되는 버튼을 "default"로 포커스 된 상태로(primary 스타일을 사용하여) 놓으면 사용자가 태스크를 올바른 방향으로 빨리 수행할 수 있다.
그러나 모든 선택이 동등한 중요도를 가지거나, 부분적으로 위험할 경우에는 사용자가 즉흥적으로 버튼을 선택하기보다는 명확하게 선택하기를 원할 것이다.
사용자를 생각하게 하지 말라.
터치에 관해 중요한 점은 사용자에게 인터페이스를 퍼즐이나 미로처럼 만드는 것이 아닌, 명확하게 보여주는 것이다. 수년간 여러 가지 기기와 물건들을 사용한 경험에 기반하여, 사용자는 버튼이 어떻게 생기고 동작해야 하는지에 대한 관념을 가지고 있다. "standard"로 여겨지는 것에서 크게 벗어난 형태는 사용자의 판단을 지연시키고 혼란시킬 것이다.
버튼과 버튼이 아닌 것에 동일한 색상을 적용하지 말아라. 동일한 색상이 적용되었다면 사용자는 어떤 것을 눌러야 할지 구분하기 어려울 것이다.
일관성이 속도와 정확성을 개선한다.
"일관성은 가장 강력한 사용성의 원리 중 하나이다. : 사물들이 항상 같은 방식으로 동작한다면, 사용자는 어떤 일이 일어날지 걱정할 필요가 없다." - 제이콥 닐슨
일관성은 속도와 정확성을 개선시켜 주고 에러를 피하게 해 준다. 예측할 수 있게 해 줌으로써 사용자는 컨트롤을 편하게 한다는 느낌을 가지고 제품에서 수행하고자 하는 목적을 달성할 수 있다. Primary, secondary, tertiary 스타일을 만들 때 색상이나 형태 등을 일관성 있게 적용하라. 앱의 디자인 안에서의 일관성을 유지하면서 플랫폼 디자인과의 일관성도 고려하라.
확실히 누를 수 있도록 크게 만들어라.
버튼은 간단한 동작으로 누를 수 있어야 한다. 사용자가 버튼을 성공적으로 누를 수 없거나 실수로 주변의 요소를 누르게 된다면, 사용자는 부정적인 경험을 하게 되고 시간을 낭비하게 될 것이다.
대부분의 플랫폼에서 터치 타겟은 최소한 48x48 dp 이상으로 만들어라. 이 크기의 터치 타겟은 스크린 크기에 관계없이 물리적으로 9mm의 크기를 가진다. 터치스크린에서 타겟의 이상적인 사이즈는 최소한 7~10mm이다.
아이콘 버튼들은 터치타겟의 크기를 아이콘이 보이는 영역보다 크게 만들어라. 모바일과 태블릿뿐만 아니라, 마우스와 같은 포인터 디바이스를 사용하는 웹에서도 똑같이 적용되어야 한다.
접근성을 고려한 디자인
이 부분은 모든 컴포넌트를 디자인할 때 항상 고려해야 한다. 타겟 영역의 크기는 접근성에 영향을 주는 요소 중 하나이다. 그리고 폰트의 크기, 색상, 대비도 접근성에 영향을 주는 요소들이다. 컴포넌트 디자인의 접근성에 대해 측정해 주는 툴들도 많이 나와 있다.
디자이너는 버튼들이 스크린 리더와 잘 작동하는지 개발팀과 잘 확인을 해야 한다. 버튼은 사용자가에 의해 활성화되었을 때 반응을 하고 누를 수 있는 요소가 되어야 한다. role="button"을 추가하면 스크린 리더에서 버튼 컨트롤로 나타난다.
제스처가 일반적으로 사용되고 있다.
제스처는 터치를 이용해서 애플리케이션을 다룰 수 있게 해 준다. 테스크를 실행하는 또 다른 방법으로 제스처를 사용하는 것은 시간을 절약해 주고 촉각적인 컨트롤을 할 수 있게 해 준다. Swipe 하여 컨텍스트 메뉴를 나타나게 하는 제스처, 더블 탭이나 롱 프레스 같은 제스처는 점점 더 많이 이용되고 있지만 일반적인 사용자에게 아주 명확하게 인식되지는 않는다. 이러한 제스처는 고급 사용자에게 액션을 수행하는 부가적인 방법으로 제공하는 것이 좋다.
좋은 버튼 레이블은 액션을 취하기 쉽게 만들어준다.
버튼의 모양뿐만 아니라 버튼의 텍스트 또한 중요하다. 레이블을 잘못 사용하면 사용자를 혼란스럽게 하고, 시간을 낭비하게 하고, 큰 실수를 저지르게 할 수도 있다.
좋은 버튼 레이블은 사용자가 액션을 취하기 쉽게 만들어준다. 동사를 사용하고, 버튼이 실제로 하는 동작으로 이름을 붙여라. Yes, No 또는 Submit 같은 너무 포괄적인 단어는 피하라.
Ok/Cancel, Cancel/Ok 모두 괜찮다.
둘 다 선택일 뿐이다. 디자이너의 선호에 따라 논쟁이 있을 수도 있다.
OK액션을 첫 번째로 두는 것은 읽는 순서에 따라 자연스럽게 읽힌다. 대부분의 사용자가 OK를 선택할 것 같으면 시간을 절약해 줄 수 있다. Windows는 OK를 첫 번째에 두고 있다.
OK를 마지막에 두는 것은 흐름에 적합하다. OK를 마지막에 두는 것은 사용자가 액션을 취하기 전에 모든 액션을 확인하게 해 주고, 실수로 급하게 결정을 내리는 것을 방지해 준다. Apple은 OK를 마지막에 둔다.
두 가지 선택 다 논쟁의 여지가 있을 수 있지만, 둘 다 사용성의 문제를 일으키지는 않는다. 나는 개인적으로 다이얼로그 윈도에서 처럼 OK를 마지막에 두는 것을 좋아한다. (내가 Mac유저이기 때문일 것이다.)
비활성화된 버튼은 좋지 않다.
몇 초 또는 몇 분동안 한 화면을 붙잡고 왜 내가 수행하려는 동작이 비활성화된 버튼에 막혀있는지, 그리고 버튼을 다시 살리려면 어떻게 해야 하는지 고민하는 상황에 모두들 처해봤을 것이다.
비활성화된 컨트롤은 컴포넌트가 현재는 사용할 수 없고 나중에 사용 가능하다는 것을 보여주는 데 사용된다. 비활성화된 버튼은 버튼의 원래 위치에서 버튼을 없앴다가 나중에 나타나게 하는 것이 사용자를 혼란스럽게 할 수 있는 경우에 사용된다.
가능하면 비활성화된 버튼을 사용하지 않기를 바란다. 항상 사용 가능하게 해 놓고 사용자가 요구하는 정보를 제공하지 않을 경우 알림을 보여주어라.
원문 출처 : https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
