버튼 차별화가 올바르게 완료되었습니다 (Button differentiation done right)

이 글은 Adir SL Button differentiation done right글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다


presentation
버튼의 예로는 CTA(Call to Action Button)가 있습니다.
CTA(Call to Action Button)는 요즘 웹 디자인에서 일반적으로 사용되며, 입력하는 거의 모든 웹 사이트에는 "log in" 버튼이나 "try now" 또는 "learn more" 버튼이 있으며, 이러한 버튼은 사용자에게 특정 작업을 수행하도록 강요하기 때문에 "Call to Action" 버튼이라고 합니다.
presentation
CTA 버튼의 예제, 직관적으로 클릭하려고 하면 제대로 작동했습니다.
이 버튼들은 보통 텍스트나 비디오의 단락을 따릅니다. 보통 클릭할 수 있는 유일한 것입니다. 메뉴가 부족하고, 접힌 부분 위에 있습니다. 즉, 스크롤하고 찾을 필요가 없습니다. 사용자가 가장 저항이 적은 경로로 이동하게 됩니다. 즉, 대부분의 사용자는 아무 생각 없이 버튼만 클릭하게 됩니다.
이 접근법의 문제점은 확장성이 없다는 것입니다. CTA 버튼의 장점은 이 버튼만 클릭할 수 있다는 것입니다. 그러면 웹 사이트에서 여러 개의 CTA를 만들 수 있는 방법은 무엇일까요? 사용자는 어떤 것을 클릭해야 하는지 어떻게 알 수 있습니까?
웹 디자인에 있어 다른 모든 것이 그렇듯이, 사용자는 "Create an Account"와 "Log in"이 훨씬 더 나은 선택이기 때문에 라벨을 클릭할 버튼과 좋은 쓰기가 일반 "Sign in"과 "Sign up"을 구별할 수 있는 버튼이 아니라 어느 버튼을 클릭해야 하는지 본능적으로 알아야 합니다.
하지만 디자인 부분에 대해 이야기해보죠. 그게 더 재미있기 때문이죠. 그러면 어떻게 여러 개의 CTA 버튼을 만들 수 있을까요? 정답은 아래 나온 것처럼 동일한 버튼 두 개를 만드는 것이 아닙니다.
presentation
혼란스럽죠?

버튼 디자인

웹(및 앱에서도 마찬가지)의 버튼은 일반적으로 디자인 중 하나가 아닙니다. 일반적으로 디자이너는 버튼 디자인을 몇 개만 디자인하고 프로젝트의 모든 버튼은 이러한 규칙을 따르므로 원하는 것을 변경할 수 없습니다. 이러한 규칙은 브랜드 지침의 디자인 설계 시스템의 일부인 경우가 많습니다. 주어진 프로젝트입니다.
버튼은 일반적으로 글꼴 스타일, 글꼴 크기, 글꼴 색, 버튼 색, 버튼 크기, 테두리, 둥근 모서리, 드롭 섀도 또는 예열 효과, 호버 상태 및 애니메이션과 같은 공통적인 특성을 가집니다.
만약 우리가 너무 많은 특징들을 바꾸려고 한다면, 그 버튼들은 프로젝트의 일반적인 디자인에 너무 이질적이라고 느낄 수 있습니다. 그리고 이 경우 사용자는 가장 뚜렷한 것을 클릭하게 됩니다. 그리고 우리는 기본적으로 하나의 CTA 버튼으로 돌아갑니다.
presentation
이 버튼들은 두 가지 다른 프로젝트에서 나온 것 같아요.
presentation
또 다른 예로는, 이것들이 더 나은 것은 아닙니다.
저는 2차 CTA 버튼을 올바르게 하기 위한 공식을 제공하고 싶습니다. 하지만 사실은 그것은 특정 프로젝트에 매우 의존적입니다. 모든 것은 상황에 달려 있습니다. 버튼은 같은 프로젝트의 일부가 될 수 있을 만큼 유사해야 하고, 버튼으로 등록할 수 있어야 합니다.
반면, 버튼은 사용자가 선택할 수 있는 두 가지 고유한 경로를 나타낼 수 있을 정도로 달라야 합니다. 예를 들어, 사용자가 계정이 이미 있는지, 사용자가 다운로드할 준비가 되었는지 또는 더 많은 것을 알고 있는지 알 수 있습니다.
일반적으로, 저는 당신이 당신의 CTA 버튼을 똑같이 디자인해야 한다고 말하고 싶습니다. 그러나 위에 언급된 리스트에서 2가지 특징까지 바꾸세요. 대부분의 색 변화는 제 생각에 가장 잘 어울립니다.
presentation
색깔은 거의 똑같지만 이게 잘 맞는 것 같아요.
presentation
이는 다양한 색상의 이점을 가지고 있으며, 이는 브랜드에 없는 특권일 수 있습니다.
두 가지 특성 변화는 확실한 규칙이 되어서는 안 됩니다. 왜냐하면 어떤 변화들은 기술적으로는 더 많은 특성들이지만, 여러분의 사용자는 여전히 그것들을 하나의 특성으로 인식하기 때문입니다. 아래 예시는 기술적으로는 버튼 색상, 테두리 색, 폰트 색상의 세 가지 특성 변화이지만, 사용자는 디자이너임에도 불구하고 그 버튼들을 단지 서로의 "invert" 상태로 인식할 수 있습니다.쉽게 말해서 그렇지 않다고 할 수 있죠
presentation
기술적으로 버튼 색상, 테두리 색, 글꼴 색 등 세 가지 특성이 바뀝니다.

Google 및 Apple의 가이드라인

저는 구글과 애플의 가이드라인을 항상 확인하고 싶습니다. 두 회사 모두 훌륭한 디자인 지침을 가지고 있고, 우리 모두가 매일 사용하는 제품을 만들고 있습니다. 그래서 그들의 가이드라인은 지금까지 우리가 익숙해왔던 것입니다. 여러 개의 버튼을 포함하여 제가 생각할 수 있는 거의 모든 디자인 문제를 다루고 있습니다.
"...여러 개의 버튼을 사용할 때는 텍스트 버튼 옆에 있는 포함된 버튼에 더 중요한 동작을 표시합니다."— Google Material Design Guidelines
즉, 버튼 하나를 텍스트 전용 버튼으로 만들어야 하며 아이콘과 함께 사용할 수 있지만 실제 버튼 모양은 포함되지 않으므로 사용자에게 어떤 버튼이 앱의 프로세스나 파이프라인에 더 "중요"하거나 더 많이 삽입되는지는 분명합니다.
presentation
Android 앱 및 Google 제품에서 널리 사용되는 Google의 Material Design 가이드라인입니다.
Google의 지침은 두 개의 버튼을 만들 수 있는 또 다른 옵션을 제공합니다. 이번에는 둘 다 포함되지만 다양한 수준의 강조로 보더값이 있는 버튼이 명확하지 않는다는 것을 알 수 있습니다.
"...여러 개의 버튼을 사용할 때, 포함된 버튼(중간 강조) 옆에 개요 버튼(매우 강조)을 배치할 수 있습니다." — Google Material Design Guidelines
presentation
Google의 가이드라인은 버튼을 모두 포함하려면 다른 옵션을 제공합니다.
여기에서 Google의 가이드라인을 볼 수 있습니다: Buttons- Material Design
Apple의 macOS 가이드라인은 약간 다릅니다. 더 얇은 테두리뿐만 아니라 단색 팔레트로 한 걸음 더 나아가서 색상 버튼이 정말 눈에 띕니다.
"기본 푸시 버튼은 외관상 두드러지며 사용자가 Return을 누르면 자동으로 동작을 수행합니다. 보기에 기본 버튼이 하나만 있을 수 있습니다." — Apple의 macOS 휴먼 인터페이스 가이드라인입니다.
즉, 버튼이 여러 개 있는 경우 "단일 기본 버튼"이 아닌 버튼은 외관상 덜 두드러져야 합니다. Mac에서 볼 수 있는 시각적 예는 다음과 같습니다.
presentation
Apple의 macOS 가이드라인에서 영감을 받은 버튼입니다.
여기에서 Apple의 macOS 가이드라인을 읽습니다 : Apple’s Human Interface Guidelines
반면 Apple의 iOS는 "버튼" 또는 "세그먼트 컨트롤"로 여러 개의 버튼을 가리킵니다. "버튼"은 화면의 두 코너(왼쪽과 오른쪽)로 구분되어야 합니다. "세그먼트 컨트롤"은 적어도 세 개 이상이 있어야 하고 서로 접촉해야 하기 때문입니다. 아래 예에서 차이점을 볼 수 있습니다.
presentation
iOS "버튼"은 두 가지 상충되는 옵션에 대한 것이며 앱이나 화면 제목으로 구분되어 있습니다. "뒤로" 버튼은 사용자에게 자신의 작업을 완료하는 경로임을 알리는 "다음" 버튼만큼 굵지 않습니다.
presentation
iOS "세그먼트 컨트롤"은 앱 내 옵션에 사용되며, 현재 진행 중인 위치를 명확하게 표시하고 있습니다.
Apple이 iOS에 제공하는 두 가지 옵션은 모두 iOS 가이드라인이 웹 개발용이 아니라 앱 개발을 위한 것이기 때문에 CTA 버튼이 아닙니다. 하지만 저는 이 두 가지 옵션의 디자인 솔루션이 매우 흥미롭기 때문에 여전히 App 가이드라인을 알 가치가 있다고 생각합니다.
여기서 Apple의 iOS 지침을 모두 읽습니다: iOS Human Interface Guidelines

Hover States

Hover 상태는 요소가 변환되는 상태이며, 일반적으로 마우스 커서가 "호버"에 있을 때 버튼의 상태가 변경되어 클릭할 수 있음을 나타내며, CTA 버튼은 해당 Hover 상태에서 동일하게 동작해야 합니다. 이때 Hover에 대한 사용자 지정 애니메이션을 가지고 있지 않은 경우 두 번째 CTA 버튼을 위해 수정할 수 있지만, 다이버가 작동하더라도 유의해야 합니다. 그것은 사용자와 비슷한 느낌을 제공해야 합니다.
presentation
단순 호버 상태 애니메이션에서는 파란색이 아닌 밝은 색상으로 색상이 변경됩니다.
presentation
이것은 간단한 호버 상태의 또 다른 예이며, 두 CTA 버튼 모두 동일한 호버 애니메이션을 가져옵니다.
때때로 우리의 디자인은 좀 더 화려한 애니메이션을 요구합니다. 그것이 바로 제가 주문제작 애니메이션이라고 부르는 것입니다. 하지만 아래의 예시에서는 같은 호버 애니메이션을 두 번 복제하는 것은 게으른 것처럼 보입니다.
presentation
느릿느릿하게 중복된 호버 상태, 이 애니메이션은 복제하기에는 너무 커 보입니다.
presentation
훨씬 더 좋았던 것은, 두 번째 버튼 회전이 뒤집혔고 이제 두 애니메이션이 모두 맞춤형으로 보입니다.

요약

결론적으로 여러 개의 CTA 버튼을 신중하게 검토하고 서로 협력해야하지만 각기 다른 경로를 나타내는 신호를 표시 할 수있을만큼 뚜렷해야합니다. 특성은 약 1 ~ 2 가지로 서로 다르며 디자인이나 브랜드를 손상시키지 않아야합니다.
이것은 규칙은 아니지만 두 가지 이상의 특성을 변경할 수 있습니다. 버튼이 사용자와 유사하게 나타나야하므로 다른 하나는 너무 단순하게 유지하면서 디자인하지 말고 계속 나타나야합니다. 동일한 프로젝트 또는 동일한 설계 시스템에 속하는 것.
There isn’t a “one size fits all” solution here, but I prefer to either change the button color or to “invert” the logical colors of the second button, now should the more important button be on the left or on the right?
여기에 "한 가지 크기에 모두 맞는"해결책은 없지만 버튼 색을 변경하거나 두 번째 단추의 논리 색을 "반전"하는 것이 더 좋습니다. 더 중요한 버튼이 왼쪽이나 오른쪽에 있어야합니까?
그것은 다른 시간에 대한 질문입니다.
presentation
이것은 내가 선호하는 솔루션이지만, 모든 프로젝트가 다르며 "한 가지 크기가 모두 적합"솔루션이 아닙니다.

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp