#10. Buttons in UI Design
The Evolution of Style & Best Practices
Nick Babich가 기고한 글의 번역입니다. (원문) 버튼 디자인은 UI디자인에서 가장 빈번히 고민하게 되는 컴포넌트 중의 하나일 것입니다. 그에 관한 흥미로운 내용이라 번역해보았습니다.
UI디자인에서의 버튼들: 스타일의 발전과 그 예시들(Buttons in UI Design: The Evolution of Style and Best Practices)
by Nick Babich
버튼은 인터랙션 디자인에서 굉장히 자주 사용되는 요소입니다. 비록 버튼 디자인이 보기에는 굉장히 단순해 보일지라도, 수십년동안 그 디자인은 변화해왔습니다. 그리고 지금도 버튼에 대한 인식과 명확성에 대해서 디자이너들은 계속 고민하고 있죠. 이 글에서 우리는, 버튼 디자인이 어떻게 발전해왔고 효과적인 버튼을 디자인하기 위해선 어떤 방식들이 가장 중요한지 이야기해 볼 참입니다.
스타일의 발전(The Evolution of Style)
01. 입체적인 버튼(Three-Dimensional Button)
예전부터, 시스템 버튼들은 돌출과 그림자를 통해서 그외 다른 요소들과 확연히 구분을 짓곤 했습니다. 이와 같은 디자인 해결방식은 간단한 원칙을 기반으로 하고 있었습니다. 보더를 이용하고 그라디언트와 드롭 쉐도우를 사용함으로 인해 버튼을 두드러지게 하는 것이었죠. 이는 배경과 그외 다른 상황들로부터 시스템 버튼들을 확연히 눈에 띄게 해주었고 확실하게 클릭 가능한 요소라고 인식하게 해주었습니다.
Notice how the buttons appear raised아래 윈도우 95(역자:…오우, 추억이네요) 대화창은 강한 그림자 효과와 하이라이트를 사용해 3D효과를 연출했고 이를 통해 유저들은 시각적인 위계 질서를 해석하고 어떤 요소가 반응할 수 있는가를 이해할 수 있었습니다.
Elements that appear raised look like they could be pressed down (clicked with the mouse)02. 스큐어모픽 버튼 (Skeuomorphic Button)
디지털 디자인에서 스큐어모피즘은 UI 요소를 실제 오브젝트와 비슷하게 디자인하는 것을 뜻합니다. 실제 오브젝트의 텍스쳐를 그대로 카피해오거나 버튼을 디자인 할 때 실제 생활에서 쓰이는 버튼을 연상할 수 있게끔 디자인하는 것이죠. 스큐어모픽 디자인은 유저들이 그전에 익숙하게 알던 오브젝트에 대한 개념을 그대로 스타일화시켜 적용함으로써 새로운 인터페이스를 쉽게 이해하도록 하는데 그 의도가 있습니다. 예를 들어 아래 계산기 메타포를 사용한 경우는, 유저들이 그 전에 익숙하게 사용했던 물리적인 계산기 메타포를 디지털 환경에 녹여냄으로 인해 본래 가지고 있던 관념을 거부감없이 치환할 수 있도록 도와줍니다.
Image credit: theultralinx03. 플랫 디자인 버튼 (Flat Design Button)
최근의 UI 디자인 트렌드에서 가장 큰 흐름 중 하나는 스큐어모픽 버튼으로부터 3D 효과들을 제거하고 플랫 디자인이 다수를 차지하고 있다는 점입니다. 스큐어모픽 디자인과 다르게 플랫 디자인은 실제 물리적 세계로부터의 외양 유사성을 배제합니다. 그 결과로, 플랫 디자인은 클릭할 수 있다거나 탭할 수 있다는 것을 보여주기 위해 사용되었던 무겁고 강한 시각적 효과들을 제거했습니다.
Regular and Flat button
Calculator app for Apple iOS모든 것이 다 플랫하다면, 유저들은 어떻게 어떤 것들이 버튼인지 알 수 있을까요?
유저들에겐 어디를 클릭하거나 탭해야하는지 알려주는 기표가 필요합니다. 그러므로, 컬러는 플랫 디자인에서 굉장히 중요한 위치를 차지합니다. 당신이 플랫 버튼을 사용한다면 이 컬러들은 아마도 유저들이 버튼들을 인식하는데 있어서 가장 중요한 구별 요소 중 하나일 것이기 때문이죠.
04. 약간의 효과를 준 플랫 디자인과 플로팅 액션 버튼 (Almost Flat Design and Floating Action Button)
약간의 효과를 준 플랫 디자인(Almost flat design)은 플랫 디자인의 새로운 변화입니다. 이 스타일은 거의 플랫하지만, UI 요소에 약간의 깊이를 부여하기 위해서 미묘한 그림자와 하이라이트, 그리고 일부 레이어들을 사용합니다. 구글의 머테리얼 디자인 언어가 알맞은 우선순위를 보여주는 좋은 예이며 여기서 FAB(Floating Action Button)이라는 새로운 버튼 유형이 생겨났습니다. 이 버튼들은 다른 인터페이스들보다 상위에 위치하며, 다른 기능들보다 우선하는 액션을 부여하고 유저들로 하여금 거기에 시선이 가게 합니다. 마치 Call to Action(특정 액션을 촉진하는) 버튼과 같이 기능하죠.
구글 맵은 FAB 버튼이 훌륭하게 적용된 케이스입니다. 구글 맵에서 유저가 주로 하게 되는 액션은 방향이 어디인지 파악하는 것이고 이 시점에서 FAB(구글 맵에서는 방향을 알려주는) 버튼은 제 역할을 충실히 하고 있습니다.
Google Map in AndroidFAB가 사용된 또 다른 좋은 예제는 에버노트입니다. 에버노트 앱은 대부분 영역에서 일반적인 플랫 UI를 사용했음에도 불구하고 네비게이션 바와 FAB버튼(여기서는 플러스 버튼)에는 아주 약간의 그림자를 사용했습니다.
Evernote app for Android05. 고스트 버튼 (Ghost Button)
2014년에 UI 디자인을 관통했던 또 하나의 흐름은 고스트 버튼입니다. 고스트 버튼은 기본적인 직사각형 혹은 정사각형 형태를 가진, 투명도를 가지고 있거나 / 비어있는 버튼입니다. 고스트 버튼들은 “empty”, “naked”, “hollow” 버튼이라는 이름들도 가지고 있습니다. 이 버튼들은 보통 매우 얇은 보더라인을 가지고 있으며 버튼 안에는 플레인 텍스트로 구성되어 있는 경우가 대부분입니다.
Normal state (left) and Focused state (Right)Evernote app for Android고스트 버튼의 등장은 플랫디자인의 발전에서부터 비롯되었고, 하나의 트렌드처럼 자주 쓰이게 된 것은 애플이 iOS7을 릴리즈 하면서부터였습니다. iOS UI에 등장하는 많은 버튼들은 우리가 고스트 버튼이라고 부를 수 있는 것들입니다. 정돈된 서체와 단순한 사각형은 플랫UI와 완벽하게 어우러집니다.
‘Name’, ‘Release Data’ and ‘Featured’ are ghost-like buttons. ‘Get’ is a ghost button.위의 “Get” 버튼 처럼 고스트버튼들은 종종 Call to Action (CTA) 버튼으로 기능하고 매우 깔끔한 룩을 보여줍니다. 아래 “Specular” 사이트는 고스트 버튼의 이런 사용을 보여주는 또 다른 좋은 예제 입니다.
Specular has a flat button as a primary ‘Purchase Now’ action and a ghost button ‘Take Tour’ as a seBasic Best Practices for Buttons
버튼을 본격적으로 디자인해보기 전에 이젠 디자인이 어떻게 ‘행동유도(Affordance)'를 일으키는지 생각해볼 때 입니다. 유저는 어떻게 특정 요소를 ‘버튼'으로 인식할까요? 그를 위해선 먼저 아래와 같은 것들을 생각해보아야 할 것입니다:
버튼의 모양을 버튼처럼 보이게 (Shape 항목 참고)
버튼과 인터랙션을 용이하도록 (Size and Padding 항목 참고)
버튼에 그 역할과 관련된 내용을 라벨링 (Label 항목 참고)
유저에게 액션을 안내하기 위한 컬러 대비 사용 (Color 항목 참고)
그리고 또한 잊지 말아야 할 것은 당신의 인터페이스 전반적으로 일관성을 유지해야 한다는 것입니다. 그럼으로 인해 유저들은 당신의 앱이나 사이트에 있는 UI 요소들을 혼란없이 인지할 수 있습니다.
01. 모양 (Shape)
버튼 디자인을 하는 안전한 방법은 정사각형의 버튼 혹은 약간의 라운디드 코너를 지닌 정사각형 버튼을 사용하는 것입니다. 사이트나 앱의 스타일에 따라서 약간 달라질 순 있지만요. 직사각형 버튼 또한 디지털 세계에서 워낙 오랜시간 사용되어 왔고 유저들에게 매우 익숙합니다.
어떤 연구는 라운디드 코너를 가진 버튼이 정보의 흐름을 강화하고 우리의 눈으로 하여금 버튼의 가운데(주로 텍스트)를 주목하게 한다고 이야기합니다.
Rounded rectangular button물론 원형이나 삼각형 등의 모양을 사용해서 좀 더 창의적으로 버튼을 만들 수 있겠지만, 그럴수록 좀 더 위험해 집니다.
Floating Action Button example
02. 크기와 패딩 (Size and Padding)
버튼의 사이즈 역시 유저가 요소들을 버튼으로 인식하는데 중요한 역할을 합니다. 또한 클릭가능한 요소로 만드는데 있어서 패딩에 대한 부분도 고려해야합니다.
크기(Size)
탭은 현재 앱이나 사이트에서 제일 우선시되는 인풋 방법이며, 이를 위한 알맞은 버튼 사이즈를 정하는데 있어서 MIT Touch Lab의 연구가 크게 도움이 됩니다. MIT 연구에 따르면, 평균적인 핑거 패드의 탭 크기는 10–14mm이며 손끝의 범위는 8–10mm이기 때문에 최소한 10mm x 10mm의 사이즈를 만족시킬 수 있도록 제작하는 것이 좋다고 합니다.
Image Source: uxmag이 제안이 완벽하게 에러 발생을 막을 수 있는 건 아니지만, 적어도 실전적인 레벨에서 에러의 수를 줄여줍니다.
Image credit: ux.stackexchange.com만약 마우스나 키보드가 우선시 되는 인풋 방법이라면, 조금 더 오밀조밀한 UI가 사용될 것이고 버튼의 크기는 조금 더 줄어들 수 있습니다.
패딩 (Padding)
버튼 간의 패딩은 원활하게 기능을 제어할 수 있도록 도와주며 당신의 UI 디자인이 시각적으로 숨을 쉴 수 있게 공간을 제공해줍니다.
Padding between flat buttons in Material design dialog03. 라벨 (Label)
버튼에는 알맞은 라벨을 부여해야 합니다. 알맞은 라벨의 선택은 사용자가 보았을 때 놀랄 가능성을 최소한으로 한다는 원칙에 기초합니다. 만약 버튼에 무언가 깜짝 놀랄만한 이름을 가진 라벨이 붙어있다면 그 라벨은 바뀌어야 합니다.
버튼 라벨링의 가장 좋은 규칙은 이 버튼이 어떤 역할을 하는지 극명히 보여주는 것입니다. 이 버튼을 클릭하거나 탭하면 어떤 일이 일어날지 깔끔한 메시지로 보여주거나 행위 동사를 사용하여 암시해주는 것이 좋습니다.
아래 예시는 드롭박스(Dropbox)의 웹앱에서 파일을 업로드하려고 할 때 나타나는 대화창입니다. 여기서 ‘Awesome!’이라고 라벨링된 하나의 버튼을 볼 수 있는데요, 보통의 유저들은 이 라벨을 보곤 이 다음에 무슨 일이 일어날지 명확하지 않아 혼란을 느낄 것 입니다.
Image credit: uxmatters
04. Color
컬러팔레트를 선택할 땐, 어떻게 컬러가 유저를 액션으로 유도하고 그 기능을 이해하도록 돕는지 고려해야합니다.
컬러와 컬러대비의 알맞은 사용은 유저에게 앱 컨텐츠를 해석하고, UI 요소들과 상호작용하며 어떤 액션들이 발화될지 이해하도록 도와줍니다. 아래의 예시에선 잠재적으로 삭제할수 있는 가능성을 가진 버튼에 대해 빨간 색을 부여한 것을 볼 수 있습니다.
Notice how the action ‘Uninstall’ is stronger in colour and contrast. Image credit: Material Design가장 주요한 버튼들을 디자인 할 때는 (특히나, 그 버튼이 Calls to action 기능을 가진 버튼일 때) 그 버튼이 실제로 가장 중요해 보여야 합니다. 예를 들어 Amazon은 확연히 눈에 띄는 노란색 버튼(Add to Cart)을 통해서 유저들을 그들이 생각하는 가장 중요한 액션으로 유도합니다.
Amazon uses contrasting colors for CTA button ‘Add to Cart’결론 (Conclusion)
모든 버튼들은, 당신이 ‘유저들이 했으면…’ 하는 액션으로 명확하게 유도하기 위해 있는 것입니다. 당신의 웹사이트나 앱을 바쁜 유저와 하는 대화라고 생각해보세요. 이 상황에서 알맞게 디자인 된 버튼은 핵심적인 역할을 담당하게 됩니다. 그리고 버튼과의 부드러운 상호작용은 그 대화를 부드럽게 흘러가도록 도와줄 것입니다. 잘못된 버튼 디자인을 통해 유저들이 버튼을 찾지 못한다거나 하는 문제들이 대화를 방해하고 결국에는 그 대화 자체를 실패하게 만드는 것과는 다르게 말이죠.
