UI 디자인 가이드 : Buttons
UI구성 시 주요 인터랙티브 요소 중 하나인 버튼 디자인에 대해 알아야 할 내용들을 정리한 글입니다.
올바른 인터랙션을 설계하기 위해서는 현재 모든 디지털 제품에 많이 사용되는 UI 구성 요소의 직접적인 전신인 물리적 푸시 버튼의 역사와 기원을 되돌아볼 필요가 있습니다.
버튼은 놀랍습니다. 사용자가 기본 메커니즘이나 알고리즘을 이해하지 못하더라도 기기, 자동차 또는 시스템을 작동시키는 손가락의 터치라고 이해합니다.
Power Button에서 Rachel Flotnick은 오늘날의 푸시 버튼 문화의 기원을 추적하고 버튼 누르는 것이 쉽고 신중하며 완벽한 제어를 약속하는 디지털 명령의 수단이 된 방법에 대해 설명합니다.
“You press the button, we do the rest.(버튼만 누르면 나머지는 우리가 알아서 합니다.)”
— Kodak 카메라는 눈에 잘 띄는 직접적인 태그 라인을 통해 잠재 소비자에게 어필했습니다.
이것이 오늘날에도 사용자들을 매료시킵니다.
버튼은 간단한 터치로 액션을 성사시키는 즉각적인 만족감을 느낄 수 있기 때문입니다. 수많은 새로운 가전 제품과 다른 기기들이 터치스크린 제어장치로 옮겨가고 있음에도 물리적인 푸시 버튼은 바로 사라지지 않으며, 그에 의해 형성된 행동 습관은 버튼 디자인이 얼마나 직관적이고 사용하기 쉬운지에 영향을 미치고 있습니다.
버튼 VS 링크
Buttons vs Links
버튼은 사용자가 수행할 수 있는 작업을 전달합니다. 일반적으로 UI 전체에서 Dialogs, Forms, Toolbars 등의 위치에 배치됩니다. 버튼과 링크의 차이는 다음과 같습니다.
링크 : "모두 보기(view all)" 페이지, "Roger Wright" 프로필 등과 같이 다른 장소로 이동할 때 사용
버튼 : "제출(submit)", "병합(merge)", "새로 만들기(create)", "업로드(upload)" 등과 같은 작업을 수행할 때 사용
버튼의 상태는 사용자에게 현재 상태를 전달합니다.
The button state communicate its status to the user
버튼에 대한 올바른 상호 작용과 스타일을 만드는 것은 프로세스의 가장 중요한 부분 중 하나입니다. 각 상태에는 다른 상태 및 주변 레이아웃과 구별되는 명확한 어포던스가 있어야 하지만 구성요소를 크게 변경하거나 많은 시각적 노이즈를 생성해서는 안됩니다.
Normal - 인터랙티브한 버튼 요소이며 활성화되어 있음
Focus - 사용자가 키보드, 마우스 또는 기타 입력 방법을 사용하여 요소를 강조 표시했음
Hover - 사용자가 인터랙티브 요소 위에 커서를 놓았을 때 통신
Activeor Pressed or Clicked사용자 - 가 버튼을 탭(선택)함
Progress/Loading - 작업이 즉시 수행되지 않고 무엇인가 작업을 완료하는 중임을 알릴 때 사용
Disabled - 현재는 비활성화된 상태이지만 나중에 활성화할 수 있음
버튼은 다양한 컬러, 형태 및 크기로 제공됩니다.
Buttons come in various colors, shapes, and sizes.
가장 일반적인 형태는 라운드처리된 직사각형 버튼으로, 쉽게 식별가능하고 입력 필드 옆에서도 잘 보입니다. 버튼에 적합한 스타일을 선택하는 것은 목적, 플랫폼 및 정책에 따라 다릅니다. 다음은 가장 인기 있는 스타일 유형입니다.
스타일은 액션의 중요도를 전달합니다.
Styles communicate the importance of an action
주로 더 중요한 작업과 덜 중요한 작업을 구별하는 데에 스타일이 사용됩니다.
사용자에게 다양한 선택 사항이 있는 곳을 안내하는 작업 위계를 만들어줍니다. 일반적으로 눈에 띄는 하나의 버튼(이 스타일을 primary로 정의함)과 여러 개의 중간 " secondary" 및 낮은 강조의 "tertiary" 작업을 가집니다.
때때로 "Default", 즉, 강조 버튼은 없을 수도 있습니다.
Sometimes there is no “default”
보통은 가장 중요하게 선택해야할 버튼을 "Default"(primary style 사용)로 포커싱 된 상태로 만들어 사용자가 해당 방향으로 고민없이 올바르게 갈 수 있도록 유도합니다.
하지만 모든 선택 사항의 중요도가 비슷하여 동일한 위계를 가지거나, 특정 작업이 특히 위험(에러)을 야기하는 경우는 예외입니다. 이러한 경우 사용자가 실수로 한 가지 버튼을 선택하지 않고 명시적으로 확인하고 선택할 수 있도록 해주어야 합니다.
사용자가 생각하지 않게 하세요.
Don’t Make Me Think
'Don't Make Me Think'는 사용성 엔지니어 Steve Krug의 책 제목이기도 합니다. 여러 가지 중요한 점 중 하나는 퍼즐이나 미로를 만드는 것이 아니라 사용자에게 명확안 인터페이스를 제공하는것이 얼마나 중요한가 하는 것입니다.
다양한 기기와 제품을 다년간 사용해 본 사용자들은 버튼이 보이고 기능하는 것에 대해 일종의 기대를 형성하게 되었습니다. 그래서 "표준"으로 간주되는 것과 큰 차이가 있으면 사용자는 지연과 혼란을 일으키게 됩니다.
한마디로 인터랙티브 요소와 비인터랙티브 요소에 동일한 색상을 적용하지 마세요.
두 요소의 색상이 같으면 사용자들이 고민에 빠지고 탭할 위치를 헤메게 됩니다.
일관성은 속도와 정확도를 향상시킵니다.
Consistency improves speed and accuracy
“Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen.” — Jakob Nielsen
일관성은 속도와 정확도를 향상시키고 오류를 방지합니다.
사용자로 하여금 제품을 제어하고 목표를 달성할 수 있다고 느끼는 데 도움이 되는 예측 가능성을 만들어주세요. 기본(primary), 보조(secondary) 및 기타 스타일(tertiary)을 작성할 때 색상, 모양 등과 같은 몇 가지 공통 요소를 가지도록 하세요.
디자인 시스템 내에서 일관성을 유지하도록 할 뿐아니라 디자인이 적용될 플랫폼에 대해서도 고민이 필요합니다.
유연한 인터랙션을 위해 버튼 사이즈는 충분히 여유있게 만들어주세요.
Make buttons large enough for reliable interaction
버튼을 누르는 것은 쉬운 작업이어야합니다.
사용자가 버튼을 손쉽게 탭할 수 없거나 프로세스에서 실수로 다른 요소를 탭하면 부정적인 경험과 시간의 손실로 이어집니다.
대부분의 플랫폼의 경우 터치 대상을 48 x 48 dp 이상으로 만들기를 권장합니다. 이 크기의 터치 대상은 화면 크기에 관계없이 약 9mm의 물리적 크기를 가지기 때문입니다. 터치스크린 요소의 권장 대상 크기는 보통 최소 7~10mm입니다.
아이콘 버튼의 경우 터치 대상이 요소의 시각적 경계를 초과하는지도 확인해주세요. 이는 모바일 또는 태블릿뿐만 아니라 마우스와 같은 웹의 포인터 장치에도 동일한 크기의 권장 사항이 적용됩니다.
접근성을 위한 디자인 설계
Design for accessibility
이 권장 사항은 모든 구성 요소에 대해 반복 적용되어야 합니다.
대상 영역 크기는 접근성에 영향을 미치는 요인 중 하나였습니다. 그 외에는 글꼴 크기, 컬러 명암비를 체크해야합니다. 컴포넌트의 접근성 설계 방식을 쉽게 확인할 수 있는 툴이 여러종류 있습니다.
또한 디자이너는 개발 팀과 긴밀히 협력하여 버튼이 스크린 리더에서 작동하는지 확인해야 합니다. 버튼 역할은 사용자가 활성화할 때 응답을 트리거하는 클릭 가능한 요소에 사용해야 합니다. role="button"을 추가하면 요소가 스크린 리더에서 버튼 컨트롤로 표시됩니다.
제스처는 상당히 널리 채택됩니다.
Gestures become fairly widely adopted
제스처는 사용자가 터치를 사용하여 어플리케이션과 인터랙션할 수 있도록 합니다. 작업을 수행하는 또 다른 방법으로 터치를 사용하면 시간을 절약하고 촉각으로 제어할 수 있습니다. 상황에 맞는 동작을 트리거하기 위한 스와이프, 좋아요를 두 번 누르기 또는 길게 누르기와 같은 일부 제스처가 매일 더 널리 사용되기 때문에 일반 사용자에게는 여전히 그리 뚜렷하지 않습니다. 고급 사용자를 위한 작업을 수행할 수 있는 다른 방법으로 사용할 것을 제안합니다.
좋은 버튼 레이블은 쉬운 사용자 액션을 유도합니다.
Good button label invites users to take action
버튼 레이블도 모양만큼이나 중요합니다. 잘못된 버튼 레이블을 사용하면 사용자에게 혼란, 시간 손실 및 큰 실수 발생을 야기합니다.
의미가 있는 버튼 레이블은 사용자의 올바른 행동을 유도합니다.
동사를 사용하는 것이 가장 좋으며, 실제로 버튼을 눌렀을 때 발생하는 작업에 대해 레이블을 지정하도록합니다. 버튼이 사용자에게 사용자의 다음행동에 대해 "(장바구니에 추가) 하시겠습니까?" 또는 "(주문 확인)하시겠습니까?"라고 질문하는 것처럼 설계하세요.
예, 아니요 또는 제출과 같이 너무 일반적인 레이블을 사용하지 마세요.
Ok/Cancel 또는 Cancel/Ok? 사실 어느쪽이든 괜찮습니다.
Ok/Cancel or Cancel/Ok? Either is fine
두가지 모두 선택사항일 뿐이며 디자이너는 선호도에 대해 몇시간이건 논쟁할 수도 있을겁니다.
OK(확인) 동작은 먼저 자연스러운 읽기 순서를 지원합니다. 이 옵션을 사용할 경우 시간을 절약할 수 있습니다. Windows에서 확인을 우선합니다.
확인을 마지막으로 나열하면 흐름이 개선됩니다. 다음 버튼을 누르면 사용자가 앞으로 이동하므로 OK라고 주장할 수 있습니다. OK를 마지막으로 배치하면 사용자가 작업을 수행하기 전에 모든 옵션을 평가하도록 돕고 실수를 방지하고 빠른 결정을 내리는데에 도움이 됩니다. 애플은 마지막에 OK를 놓습니다.
사실 어느 쪽을 선택하든 유리한 주장은 있으며, 선택의 여지가 없다고 해서 사용성에 재앙을 초래할 가능성은 없습니다. 저는 개인적으로 다이얼로그 창과 같은 작업 목록에서 대부분 OK를 마지막에 넣습니다.
(어쩌면 제가 주로 Mac 사용자이기 때문일 수도 있습니다.)
* 확인/취소 버튼의 순서에 관한 내용은 아래 링크에서 좀 더 자세히 확인하실 수도 있습니다.
비활성화된 버튼은 짜증을 유발합니다.
Disabled buttons suck
누구나 예전에 이런 상황에 처해봤을겁니다. 몇 초 또는 몇 분 동안 화면에 멈춰서 진행 상황이 비활성화된 버튼에 의해 차단된 이유와 이 기능을 다시 활성화하기 위해 해야 할 일을 알아내려고 애쓰는 것을요.
사실 비활성화된 컨트롤은 구성 요소가 현재는 비대화형이지만 향후 활성화될 수 있음을 나타내는 데 사용됩니다. 비활성화된 버튼은 기본 위치에서 버튼을 제거했다가 나중 컨텍스트에서 공개하면 사용자를 혼란스럽게 할 수 있기 때문에 사용됩니다.
가급적이면 비활성화된 버튼은 피하는 것이 좋습니다.
항상 활성화하는 것이 좋으며 사용자가 일부 필수 정보를 제공하지 않은 경우에는 해당 필드를 강조 표시하거나 메세지를 표시하는 걸로 대체합니다.
You may also like :
Where to Place Icons Next to Button Labels
버튼 레이블 옆에 배치된 아이콘은 목록의 항목 옆에 배치된 글머리 기호와 같습니다.
둘 다 정보가 올바른 위치에 배치되어 있기만 하면 정보를 더 쉽게 찾고 스캔할 수 있습니다. 연구에 따르면 사용자는 보통 시선이 왼쪽에서 수직 이동으로 스캔합니다.
아이콘이 시각적 스캔 보조 도구로 사용되기 위해서는 사용자가 버튼 레이블을 보기 전에 아이콘을 볼 필요가 있습니다. 버튼 레이블 왼쪽에 배치 하면 사용자가 아이콘을 먼저 볼 수 있습니다. 버튼 레이블 오른쪽에 아이콘을 배치하면 사용자가 마지막으로 보기 때문에 사용자가 스캔하는 데 도움을 주기 어렵습니다.
사용자가 라벨을 먼저 읽으면 아이콘은 장식 이외의 용도로 사용되지 않기 때문입니다.
아이콘은 버튼 레이블을 설명하는 것이지 그 반대가 아닙니다.
본문 텍스트가 있는 버튼 레이블에도 아이콘이 잘못 배치됩니다.
사용자는 왼쪽에서 위에서 아래로 수직 방향으로 스캔합니다. 즉, 본문 텍스트가 있는 버튼 레이블의 왼쪽 중앙에 아이콘을 배치하면 사용자가 아이콘 앞에 버튼 레이블을 보게 됩니다. 이것은 사용자가 스캔하는 데 도움이 되지 않습니다. 아이콘을 시각적 스캔 보조 도구로 만들려면 아이콘을 버튼 레이블 및 본문 텍스트 중앙 에 맞추는 대신 버튼 레이블과 정렬하십시오. 그러면 사용자가 아이콘을 먼저 보기 때문에 더 쉽게 스캔할 수 있습니다.
아이콘과 글머리 기호는 유사하게 작동합니다. 글머리 기호는 페이지의 나머지 텍스트에서 주의를 끌기 때문에 효과적입니다. 아이콘은 인터페이스의 나머지 텍스트에서 주의를 끌기 때문에 효과적입니다. 사용자가 버튼 레이블을 쉽게 찾을 수 없으면 사이트를 탐색하는 데 문제가 있습니다. 스캔하기 쉬운 위치에 배치하면 더 적은 작업으로 더 짧은 시간에 버튼을 찾을 수 있게됩니다.
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
