UI 해부학 - 버튼을 누르세요
근데 어떻게요?
https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
지금부터는 위 글에 대한 번역입니다.
의역이 몇 부분 포함되어있으니 원문이 궁금하신 분은 확인해보시길 추천합니다.
버튼 디자인
UI 구성요소 시리즈
올바른 인터랙션을 디자인하기 위해서 우리는 현재 널리 사용되는 버튼에 대해 알아야 합니다. 사용자들은 버튼을 누르는 터치 한 번으로도 가전기기, 자동차와 같은 기기를 자세한 작동 원리를 알지 못한 상태에서도 조작할 수 있습니다 'Power Button'에서 Rachel Plotnick은 오늘날 사용되는 버튼의 뿌리에 대해 연구했으며, '버튼을 누란다'는 행위는 아무런 노력이나 지식 없이도 결과를 만들어 낼 수 있는 행위라고 설명했습니다.
"당신은 버튼만 누르세요. 나머지는 우리가 할 테니." - Kodak 카메라는 이런 문구로 사람들의 마음을 사로잡았습니다.
터치 한 번으로 곧바로 무엇인가 일어난다는 이 버튼이 주는 '만족'이란 너무나 매력적입니다. 때문에 아무리 많은 전자기기들이 터치스크린을 도입하고 있더라도, 물리적인 버튼은 쉽사리 사라지지 않을 것입니다. 왜냐하면 물리적 버튼이 지금껏 쌓아온 '직관적인 편리함'이라는 이점은 사용자들의 머릿속 깊이 자리 잡고 있기 때문입니다.
버튼 vs 링크
버튼은 사용자들이 할 수 있는 행위에 대해서 이야기합니다. 버튼은 보통 당신이 보는 본문, 입력창, 툴바, 등등의 UI에서 등장합니다. 그리고 버튼과 링크 사이의 명확한 구분은 매우 중요합니다.
링크 :
링크는 당신을 어디론가 데려갑니다. 예를 들어 '모두 보기', '누구누구의 프로필 보기'와 같은 링크가 있습니다.
버튼 :
버튼은 어떤 행위를 만들어냅니다. 예를 들어 '확인', '전송', '새로 만들기' 등이 있습니다.
버튼 해부도버튼의 상태는
사용자들에게 현재 상태를 알려줍니다.
버튼에 올바른 인터랙션과 스타일을 부여하는 것은 버튼을 디자인하는데 가장 중요한 과정입니다. 각 상태는 명확한 힌트를 제공하여, 다른 상태와의 차별성을 보여주어야 합니다. 대신 외적으로 너무 튀거나 괴리감이 느껴져서는 안 됩니다.
상태에 따라 다양한 모습으로 변하는 버튼Normal :
버튼이 사용 가능하고, 활성화되어 있음을 알려줍니다.
Focus :
사용자가 버튼을 활성화 또는 강조시켰으며, 키보드 또는 다른 입력 요소를 사용했음을 알려줍니다.
Hover :
사용자가 버튼 위에 마우스 또는 손가락을 올렸음을 알려줍니다.
Active :
사용자가 버튼을 클릭 또는 터치했음을 알려줍니다.
Progress / Loading :
버튼으로 유발된 행위가 아직 다 이루어지지 않았음을 알리고, 현재 처리 중임을 알려줍니다.
Disabled :
현재 이 버튼이 비활성화되어있음을 알려줍니다. 후에 조건을 충족하면 활성화될 수 있음을 암시합니다.
버튼은 다양한 컬러, 모양,
그리고 사이즈로 만들어집니다.
가장 널리 사용되는 버튼은 사각형의 모서리가 약간 둥근 형태의 버튼입니다. 쉽게 버튼임을 알 수 있고, Input Field와 함께 사용하기도 좋습니다. 목적, 플랫폼, 가이드라인에 따라 알맞은 스타일의 버튼을 사용하세요. 아래는 가장 유명하고 자주 사용되는 버튼 스타일들입니다.
다양한 스타일의 버튼버튼의 스타일은,
액션의 중요도를 나타냅니다.
스타일은 액션의 우선순위를 구분하기 위해 존재합니다. 액션의 우선순위를 정하고, 그에 해당하는 스타일을 정해 보세요. 주로 '1순위 : 가장 중요한 버튼'을 만들고, '2순위 : 그다음으로 중요한 버튼'을 만든 후에 '3순위 : 나머지 버튼'을 만들어 보세요.
우선순위에 따른 버튼 구성가끔은 Default가 없는 상황도 있습니다.
아마도 가장 많이 선택되는 버튼을 'Default' (가장 중요한 버튼)으로 두고 싶은 경우가 많을 것입니다. 이런 방식은 대다수의 사용자들을 빠르게 행동하여 업무를 마치게끔 도와주며, 올바른 방향으로 안내해줍니다.
하지만 예외는 있습니다. 선택지가 모두 동등하거나, 선택지에 위험부담이 있을 때는 버튼의 무게를 동등하게 두어야 합니다. 한쪽을 강조하게 되면 사용자들이 무의식적으로 잘못된 선택을 할 수 있기 때문입니다.
상황에 따라 동등한 버튼이 필요할때도 있습니다생각하게 하지 마세요
'사용자를 생각하게 하지 마'는 Usability Engineer인 Steve Krug가 쓴 책의 제목이기도 합니다. 책에서 항상 강조되는 것들 중 하나는 '사용자들에게 인터페이스가 얼마나 직관적인지 : 사용자들을 미로나 퍼즐 속에 가두지는 않는지'입니다. 수년간 다양한 기기와 제품을 접하면서 사람들은 버튼에 대한 특정한 사용법과 생김새에 대해 표준적인 모습(버튼이라면 어떻게 생겼을 것이고, 어떻게 작동할 것이라는 기대)을 만들어왔습니다. 때문에 '표준'에서 벗어나는 디자인들은 사용자들에게 혼동을 줄 가능성이 있습니다.
버튼과 같이 인터랙션이 들어가는 부분과 그렇지 않은 부분의 컬러를 구분해주세요. 만약 이 둘이 같은 모습을 하고 있다면, 사람들은 어디를 터치할지 모를 수 있습니다.
보편적인 디자인에서 멀어질수록 어려워집니다일관된 디자인은
사용성에 속도와 정확성을 더해줍니다.
'일관성'은 사용성을 고려할 때 사용할 수 있는 강력한 무기입니다 : 만약 같은 방식으로 일관성 있게 작동한다면, 사용자들은 예상하지 못한 일이 발생할까 봐 걱정할 필요가 없어지기 때문입니다.
- Jakob Nielsen
일관성은 사용성에 속도, 그리고 정확성을 더해주며 오류도 줄여줍니다. 사용자가 예측 가능하도록 버튼을 구성하세요. 그러면 사용자는 이 서비스를 완전히 통제할 수 있다고 느끼고, 편안함을 느끼며, 원하던 행동을 성공적으로 수행할 수 있을 것입니다. 당신이 Primary(가장 중요한 버튼) / Secondary(그다음으로 중요한 버튼) / Tertiary(마지막으로 중요한 버튼)을 구성할 때, 색깔이나 모양 같은 공통점을 만들어 디자인해보세요. 또한 이런 일관성을 디자인 시스템뿐만 아니라 여러분이 만드는 서비스 자체에 녹여내세요.
일관된 버튼으로 사용성을 높여보세요인터렉션을 위한
충분한 사이즈로 만들어주세요
버튼을 누르는 것은 쉽고 단순한 일이어야 합니다. 버튼을 누르는 일이 어려워지는 순간, 실수로 다른 버튼을 누르기도 하고, 결과적으로는 좋지 못한 사용성을 제공하게 됩니다.
가능하다면, 터치되는 버튼을 최소한 48 x 48dp 이상으로 잡으세요. 화면에 상관없이, 버튼의 최소 크기는 약 9mm 이상이라고 생각하세요. 저는 터치 스크린에서 7-10mm 사이의 버튼을 사용할 것을 추천합니다.
아이콘 버튼의 경우, 실제 영역보다 터치 영역을 여유롭게 잡아주세요. 이런 내용은 스마트폰, 태블릿뿐만 아니라 웹에서도 권장하는 내용입니다.
가장 중요한것. 누를 수 있어야 한다접근성을 생각하세요
접근성은 모든 요소에 반드시 필요합니다. 위에서 말한 사이즈도 어떻게 보면 접근성의 측면에서 이야기한 것입니다. 접근성을 생각할 때 고려해야 할 다른 요소는 '글자의 크기 / 컬러 / 대비'입니다. 디자인의 접근성을 평가해주는 서비스는 여럿 있으니 한번 사용해보시길 추천합니다.
디자이너는 개발팀과 긴밀히 소통하며 일해야 합니다. 항상 실제 스크린에서 버튼이 제대로 작동하고 보이는지 확인하세요. 버튼은 반드시 클릭할 수 있어야 하고, 사용자가 클릭하게끔 유도하고 있어야 합니다.
어느 정도 보편화된 제스처
사용자들은 터치를 통해 제스처를 사용합니다. 제스처를 적절히 사용하면 효율성을 높이고 시간을 절약하며 서비스를 이용할 수 있습니다. 옆으로 스와이프, 두 번 터치, 길게 누르기 등의 제스처는 어느 정도 보편화된 제스처입니다. 하지만 모든 사용자가 제스처에 능한 것은 아니기 때문에 저는 제스처를 1순위가 아닌 차선책으로 사용하길 추천합니다.
쓰면 좋은 제스쳐. 하지만 모두가 쓰진 않습니다잘 쓰인 Label은,
사용자들이 움직이게끔 만듭니다.
버튼이 뭐라고 하는지는, 버튼이 어떻게 생겼는지만큼 중요합니다. 잘못된 Label은 사용자들을 헷갈리게 하고, 시간을 낭비하게 하고, 실수하게 합니다.
좋은 버튼 Label은 사용자들을 올바른 방향으로 행동하게 만듭니다. Label에는 동사를 사용하는 것이 가장 좋습니다. 버튼이 실제로 하는 일을 적어주세요. 마치 버튼이 "메일을 보내시겠어요?", 또는 "메일을 보낼까요?"라고 물어본다고 생각해보세요. Yes / No 같은 Label보다는 Submit 같은 Label을 사용해보세요.
'OK / Cancel' or 'Cancel / OK'
사실 둘 다 상관없습니다. 선택의 문제입니다. 디자이너들은 이런 문제로 몇 시간씩 토론하기도 합니다.
OK 버튼을 먼저 보여주는 건 읽기에 자연스럽습니다. 대부분의 사용자들이 OK를 누를 것이라고 예상되는 상황이라면 OK를 먼저 보여주는 것이 시간을 단축해줄 수 있습니다. Windows가 이렇게 하고 있습니다.
OK 버튼을 나중에 보여주는 것은 Flow상 자연스럽습니다. OK를 '다음으로'와 같이 사용한다면 자연스럽게 느껴집니다. 또한 OK가 마지막에 있으면, 사용자들은 무엇인가 결정하기 전에 한번 더 고민하고 결정할 수 있습니다. 결과적으로 실수를 줄일 수 있죠. Apple이 이렇게 하고 있습니다.
두 가지 방법 모두 매력적인 장점이 있고, 취향에 따라 사용하면 됩니다. 저는 개인적으로 두 번째 방법을 선호하기는 합니다. 아마 제가 Mac 사용자라, 두 번째 방법을 더 익숙하게 생각해서 그런 것일지도 모르겠네요.
비활성화 상태의 버튼은
구립니다
아마 한 번쯤은 이런 상황에 처해본 적이 있을 것입니다. 지금 뭔가 하지 않아서 아래의 버튼이 비활성화되어있는데, 어떤 부분을 마저 해야 하는지 모르는 상황이 종종 발생합니다. 보통 'Disabled' 버튼은 해야 할 일을 하지 않았고, 해야 할 일을 마저 한다면 활성화될 것이라는 상태를 알려줍니다.
하지만 저는 이런 방식을 추천드리지 않습니다. 차라리 그냥 활성화 상태로 두시고, 부족한 게 있다면 정확히 어떤 내용이 부족한지를 알려주세요. 그러면 사용자들은 비활성화 버튼이 어떤 내용을 가리키는지 찾을 필요가 없고, 부족한 내용을 빠르게 완수할 수 있을 것입니다.
