Button UX 디자인 : 모범 사례, 유형 및 상태

안녕하세요!
Early adopter입니다. 제 번역 블로그를 자주 찾아 주셔서 감사드립니다. 이번에 페이스북에 [DTF] 디자인 번역 공장 - Design Translation Factory라는 공개 그룹을 만들어 보았습니다.
저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
그리고 페이스북 친구도 거의 없습니다. ㅠㅠ 친구 맺어주시고 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.



Image credit: designshack
이전 2달 정도 Grid, Typography에 관련된 내용들을 번역했습니다. 이번에는 이번에는 Button에 관련된 글들을 몇 편 번역해보려고 합니다.
ps, 많은 분들은 아니지만 저의 번역의 허접함을 다시금 일깨워 주신 분들께 조금이나 보답하고자 전보다는 조금 더 신경 썼습니다. ^^; - 더 낳아지겠지요... 의견 주신 분들 감사합니다.
그럼 시작합니다.

버튼은 상호 작용 디자인의 일상적인 요소입니다. 그럼에도 불구하고 버튼은 웹 및 앱에서 원활한 대화 흐름을 생성하는 데 필수적인 요소이므로 버튼에 대한 이러한 기본 모범 사례에 주의를 기울여야 합니다. 또한 버튼 유형 및 상태 - 사용자 경험을 향상시키는 효과적인 버튼을 만들기 위해 알아야 하는 중요한 정보를 살펴보겠습니다.

버튼 모범 사례

버튼을 버튼처럼 보이게 만들기

디자인이 행동 유도를 어떻게 전달하는지 생각해보십시오. 사용자가 어떻게 요소를 버튼으로 이해할 수 있습니까? 모양과 색상을 사용하여 요소를 버튼처럼 보이게 만듭니다.
presentation
Groupon - 로그인 폼 기본 동작에 초점.
디자인할 때 터치 대상의 크기 및 padding에 대해 신중히 생각하십시오. 버튼의 크기는 사용자가 이러한 요소들을 식별할 수 있도록 도와줍니다. 다양한 플랫폼이 최소한의 터치 타깃에 대한 지침을 제공합니다. MIT Touch Lab 연구의 결과에 따르면 핑거 패드의 평균 길이는 10-14mm이며 손가락 끝은 8-10mm이며 10mm x 10mm가 최소 터치 대상 크기로 적합합니다.
presentation
Image Source: uxmag

위치 및 순서

사용자가 쉽게 찾을 수 있거나 볼 것으로 예상되는 버튼을 넣으십시오. 예를 들어, iOS UI guidelines에는 버튼의 알려진 위치가 표시됩니다.
presentation
버튼의 순서와 위치에 유의하십시오. 버튼이 들어가는 순서는 특히 '이전'과 '다음'과 같이 해당 쌍이 있는 경우 중요합니다. 디자인이 기본 또는 가장 중요한 행동에 중점을 두는지 확인하십시오.
아래 예제에서는 잠재적으로 파괴적인 동작을 수행하는 버튼에 빨간색을 사용합니다. 기본 동작이 색상 및 대비가 강할 뿐만 아니라 대화 상자의 오른쪽에 있는지 확인하십시오.
presentation
"삭제"버튼은 "취소"버튼보다 두드러집니다.

Labels

레이블 버튼을 어떻게 사용할까요? 클릭 후 발생하는 상황에 대한 명확한 메시지를 추가하십시오.
위와 같은 예이지만 적절한 텍스트 레이블이 없습니다. 차이를 느껴보세요.
presentation
버튼에 레이블이 없습니다.

클릭 유도 문안 (CTA - Call To Action)

가장 중요한 버튼인 것처럼 가장 중요한 버튼을 만드십시오 (특히 클릭 유도 문안에 사용하는 경우).
presentation
이력서 작성은 분명히 CTA 버튼입니다.

버튼 모양

일반적으로 사이트 또는 앱의 스타일에 따라 둥근 모서리가 있는 사각형 또는 정사각형 버튼을 만들려고 합니다. 일부 연구에 따르면 둥근 모서리는 정보 처리를 향상시키고 요소 중심에 눈을 끈다는 것을 알려줍니다.
presentation
둥근 사각형 버튼
더 창조적일 수 있으며 원, 삼각형 또는 맞춤형 모양과 같은 다른 모양을 사용할 수 있지만 후자는 좀 더 위험할 수 있음을 명심하십시오.
presentation
플로팅 동작 버튼은 맞춤형 버튼의 좋은 예입니다.
인터페이스 컨트롤 전체에서 일관성을 유지해야 사용자가 앱 사용자 인터페이스 요소를 버튼으로 식별하고 인식할 수 있습니다.

버튼 유형 및 동작

1. Raised Button

Raised Button은 일반적으로 들어올려진 직사각형 버튼 (음영은 클릭할 수 있음을 나타냄)입니다. 들어올려진 버튼은 주로 평면 레이아웃에 치수를 추가합니다. 바쁘거나 넓은 공간에서 기능을 강조합니다.
presentation

용도

인라인 (다양한 내용이 많은 레이아웃의 액션을 더욱 두드러지게 표현). Raised button을 사용하여 다양한 콘텐츠가 많은 레이아웃에서 더 많은 주목을 받게 합니다.

동작

Raised button를 클릭했을 때 색을 채 웁니다.
presentation
Source: Material Design

Raised button은 flat button보다 두드러집니다. Android 애플리케이션의 예.
presentation
Source: Material Design

2. Flat Button

Flat button은 들어 올리지 않지만 클릭했을 경우 색으로 채 웁니다. 플랫 버튼의 주요 이점은 매우 간단합니다. 콘텐츠에서 주의를 최소한으로 산만하게 합니다.
presentation
앱 캔버스의 Flat button.

용도

대화 상자-dialogs (대화 상자-dialogs 내용과 버튼 동작을 일체화하기 위해)
presentation
Flat buttons in Android dialog.
툴바-toolbars에서
presentation
툴바-toolbar의 Flat button. Source: Material Design
한 줄로 되어있고 padding이 있으므로 사용자가 쉽게 찾을 수 있습니다.
presentation
Flat buttons. Source: Material Design

동작

presentation
Source: Material Design

Android 애플리케이션 대화 상자-dialog의 Flat button.
presentation
Flat buttons in dialog. Source: Material Design

3. Toggle Button

Toggle button을 사용하면 두 가지 이상의 상태 사이에서 설정을 변경할 수 있습니다.
presentation
Toggle button.

용도

가장 일반적인 toggle button은 환경 설정에서 On / Off 버튼으로 사용됩니다.
또한 toggle button을 사용하여 관련 옵션을 그룹화할 수 있습니다. 그러나 레이아웃은 특정 toggle button이 그룹의 일부임을 전달하는 방식으로 정렬되어야 합니다. 또한 toggle button에는 다음이 필요합니다.
  • 한 그룹에 적어도 세 개의 toggle button이 있어야 합니다.
  • 텍스트, 아이콘 또는 둘 모두가 포함된 Label button
presentation
하나의 옵션이 있는 Toggle button이 선택됩니다. Source: Material Design.
아이콘은 선택 항목을 선택하거나 선택 취소할 수 있는 toggle button (예 : 항목에 별표 추가 또는 제거)에 적합합니다. 앱 바, 툴바, 액션 버튼 또는 토글에 가장 잘 위치합니다.
presentation
트위터의 "좋아요"버튼이 Toggle button입니다. Source: Ryan Duffy
버튼에 맞는 아이콘을 선택하는 것은 매우 중요합니다. 저는 "Icons as Part of an Awesome User Experience"에서 이 주제를 다뤘습니다.

Apple iOS는 설정 섹션에서 toggle buttons을 사용합니다.
presentation

4. Ghost Button

Ghost button은 직사각형과 같은 기본 모양 양식을 갖는 투명하고 빈 버튼입니다. 내부 섹션은 일반 텍스트로 구성되지만 일반적으로 매우가는 선으로 경계가 지정됩니다.
presentation
다른 디자인의 ghost button입니다. 출처 : Dadapixel

용도

Ghost button을 기본 CTA로 사용하는 것은 대개 좋은 생각이 아닙니다. 부트스트랩 예제와 ghost button 다운로드 부트스트랩을 볼 수 있습니다. 부트스트랩의 메인 로고와 같은 모양으로 사용자를 혼란스럽게 할 수 있습니다.
presentation
다운로드 부트스트랩은 버튼입니다. 알고 계셨나요?
Ghost button은 기본 CTA와 경쟁하지 않아야 하므로 때문에 2차 또는 3차 콘텐츠에 가장 적합합니다. 사용자가 주요 CTA를 본 다음(관련되지 않은 경우) secondary button으로 건너뛰도록 하려는 경우가 이상적입니다.
긍정적인 행동은 훨씬 더 높은 대조를 가지며 사용자는 명확한 행동을 할 수 있게 됩니다.
presentation
Primary button (CTA)은 지금 구입이고 ghost button은 보조 버튼입니다.

동작

presentation
Normal state (왼쪽) 및 Focused state (오른쪽) 출처 : Dadapixel

AirBnB웹 사이트에는 "호스트되기 (Become a Host)"를 위한 ghost buttons이 있습니다.
presentation
AirBnB website.

5. Floating Action Button

Floating action button은 Google Material Design의 일부입니다. 클릭 시-press에 잉크 반응을 일으키고 표시하는 원형 재료 버튼입니다.

용도

Floating action button은 프로모션 동작에 사용됩니다.

동작

Floating action button은 UI 위를 떠다니는 동그라미 모양의 아이콘으로 구별되며 morphing, launching 및 anchor point 전송과 같은 동작 동작을 포함합니다.
presentation

Button 유형 선택

버튼 스타일을 선택하는 것은 버튼의 우선순위, 화면상의 컨테이너 수 및 화면 레이아웃에 따라 다릅니다.
presentation
Google Material Design에서 제안한 버튼 유형 선택.
presentation
Z-depth.
Function: Is button important and ubiquitous enough to be a floating action button? (<-좋은 번역 기다립니다.^^;)
Function : 이 버튼은 floating action button으로써 충분히 중요하고 어디에나 있습니까?
Dimension : 컨테이너에 따라 버튼 유형을 선택하고 화면에 몇 개의 z-space layers가 있는지에 따라 선택합니다.
Layout: 주로 컨테이너 당 하나의 버튼 유형을 사용하십시오. 중요한 기능을 강조하는 것과 같은 좋은 이유가 있을 때만 믹스 버튼 유형을 사용하십시오.

Button States

이제는 초기 버튼이 사용자에게 어떻게 보이는지에 관한 것이 아니라 버튼을 마우스 오버해도 아무것도 변경되지 않는 상황을 생각해 보세요. 사용자는 혼란스러워할 수 있습니다. "버튼인지 아닌지. 버튼처럼 보이는 버튼이 실제로 버튼인지 알아보려면 클릭해야 합니다. 잘..."
버튼은 하나의 상태 객체가 아닙니다. 버튼은 다중적인 상태를 가지고 있습니다. 현재 버튼 상태를 나타내는 시각적 피드백을 사용자에게 제공하는 것이 최우선 과제입니다.

Normal State

이 상태 버튼의 기본 규칙은 normal state의 버튼처럼 보입니다. Windows 8은 이러한 문제에 대한 좋은 예입니다. 설정 메뉴에서 버튼을 클릭할 수 있는지를 알기가 어렵습니다.
presentation
Windows 8에서는 Normal state의 버튼입니다.

Focused State

사용자에게 버튼에 마우스를 올려놓는 시각적 피드백을 제공하는 것이 좋습니다. 사용자는 자신의 행동이 수락되었음을 즉시 알게 되며 시각적 보상에 기뻐하고 싶어 합니다.
presentation
Source: CSS Buttons

Pressed State

디자인의 여러 요소에 애니메이션을 적용하여 독창적이고 유용한 모션을 통해 사용자에게 즐거움을 선사할 수 있습니다.
presentation
Source: Colin Garven

Inactive State

버튼을 숨기거나 비활성화된 상태로 표시하는 것은 두 가지 가능성이 있습니다.
버튼을 숨기는 것에 대한 논쟁 :
  • 명쾌함. 현재 진행 중인 작업에 필요한 것을 보여 주기만 하면 됩니다.
  • Save estate. 이 도구를 사용하면 다른 방법으로 같은 공간을 사용하여 컨트롤을 변경할 수 있습니다. 많은 일이 있을 때 편리합니다. Gmail에서 이를 수행합니다.
presentation
Gmail은 사용되지 않는 버튼을 숨 깁니다.
presentation
사용자가 조치를 취한 경우에만 표시됩니다.
Disabled state 사용에 대한 논쟁 :
  • 행동의 가능성을 보여주십시오. 버튼이 사용 중이지 않은 경우에도 사용자는 해당 작업이 가능하다는 것을 알 수 있습니다. 사용 기준을 설명하는 툴팁이 있을 수도 있습니다.
  • 제어 위치. 사용자는 인터페이스 내에서 컨트롤과 버튼의 위치를 파악할 수 있습니다.
presentation
Disabled state button

결론

버튼은 사용자가 원하는 행동을 취하도록 유도하기 위한 것입니다. 원활한 이동으로 대화가 계속 흐릅니다: 그렇지 못한 경우는-제대로 된 버튼을 찾을 수 없는 것과 기껏해야 중단 또는 최악의 경우 오류입니다.
버튼 UX 디자인은 항상 인식과 명료함에 관한 것입니다. 웹 또는 앱을 바쁜 사용자가 시작한 대화라고 생각하십시오. 버튼은 이 대화에서 중요한 역할을 합니다.

번역 글 추천(신청) 받습니다.

안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일 정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역 글입니다. 원본 링크입니다.
Button UX Design: Best Practices, Types and States by Nick Babich