[번역]텍스트 버튼은 사용성을 어떻게 해치는가?
이 글은 UX Movement의 설립자인 Anthony가 UX Movement에 기고한 글을 번역한 글입니다.
버튼에 대한 사용성 기준은 데스크톱보다는 모바일에서 더 중요하다. 화면이 작고, 모바일 버튼은 손가락으로 조작을 해야 하기 때문에 누르고, 읽고, 인식하기가 더욱 쉬워야 한다. 대부분의 색상이 채워진 버튼은 이 기준에 맞지만, 텍스트 버튼은 이 기준을 거의 따르지 못한다. 앱에 텍스트 버튼을 적용하기 전에, 당신이 알아야 할 것들이 있다.
텍스트 버튼은 누르기가 어렵다.
손가락은 마우스 커서보다 크다. 손가락을 작은 타깃에 올리는 것은 어색한 기분이 든다. 버튼에 손가락을 올려도 액션이 실행되었는지에 대한 시각적인 피드백이 없기 때문이다. 텍스트가 충분히 길다면 피드백을 약간이라도 받을 수 있겠지만, 타깃을 눌렀다는 것을 확신하기에는 여전히 부족하다.
작은 크기의 텍스트 버튼은 사용자가 타깃 위치에 정확히 손가락을 올리도록 강요한다. 정확하게 눌러야 할수록 사용자의 노력이 많이 든다. 텍스트 버튼을 정확히 누르기 위해 손가락과 타깃을 똑바로 보고 있어야 하기 때문이다.
확실한 테두리가 없다면 경계를 구분하기 어려워 누르기가 어려워진다. 색으로 채워진 버튼은 타깃 영역이 크고 경계가 분명하기 때문이 이러한 문제가 없다.
대문자로 된 버튼은 더 읽기 어렵다.
텍스트 버튼의 누르기 어려운 문제를 개선하기 위해, 텍스트 버튼을 모두 대문자로 만들기도 한다. 구글의 메터리얼 디자인 시스템은 이런 버튼 스타일을 제안하지만, 문제점이 있는 방식이다.
대문자 텍스트 버튼은 읽기가 어렵다. 특히 독서 장애자에게는 더욱 읽기 어려워진다. 사용자는 단어를 읽기 위해 형태를 본다. 다문자는 어센더와 디센더의 차이가 없기 때문에 단어를 한눈에 읽기가 어렵다.
텍스트 버튼은 인식하기가 어렵다.
텍스트 버튼과 색상이 적용된 텍스트는 구분하기가 어렵다. 특히 색맹인 사용자에게는 더욱 그렇다. 확실히 형태가 차이 나지 않는다면 사용자는 텍스트 버튼은 인지하지 못할 것이다.
텍스트 버튼 대신에 사용 가능한 것들
부차적인 액션이나 중요도가 낮은 액션에 주로 텍스트 버튼을 사용하곤 한다. 그러나 모바일 사용성을 해치지 않는 더 좋은 방법들이 있다.
아웃라인 버튼
한 가지 방법은 텍스트 주변에 선을 둘러 아웃라인 버튼으로 만드는 것이다. 버튼 주변에 경계를 만들어 줌으로써 더 크고 명확하게 보여 누르기 좋게 만들어 준다. 아웃라인 안쪽의 아무 데나 눌러도 액션을 실행할 수 있다.
색상이 적용되어 있지 않기 때문에 메인 CTA(Call To Action) 버튼과 부딪히지도 않는다.
밝은 색 버튼
또 다른 방법은 밝은 색 버튼 위에 텍스트를 배치하는 것이다. 밝은 색 배경의 버튼은 메인 CTA버튼과 부딪히지 않으면서 배경과 버튼을 구분해 준다. 배경은 배경과 자연스럽게 묻히면서 시각적으로 충분한 대비를 유지해야 한다.
시각적으로 중요하게 보이는 것(Visual Weight)
아웃라인 버튼과 밝은 색 버튼 모두 두 번째로 중요한 액션 버튼으로 사용할 수 있다. 그러나 밝은 색 버튼이 아웃라인 버튼보다 약간 더 시각적으로 누르기 좋은 느낌을 준다. 얇은 외곽선보다는 채워진 색상이 더 누르기 쉬운 느낌을 준다.
텍스트 버튼이 유용한 경우
텍스트 버튼이 유용한 경우도 있다. 두 번째로 중요한 버튼으로 사용하는 것 대신에, 세 번째 중요도를 가진 액션에 사용하라. 세 번째 액션은 사용자가 자주 눌러야 할 필요가 없고, 눈에 띄지 않아도 된다. 첫 번째와 두 번째 액션은 더 중요하기 때문에, 시각적으로 더 눈에 띄어야 할 필요가 있다.
텍스트 버튼이 중요한 또 다른 케이스는 사용자가 액션을 취할 때 도움이 필요한 경우이다. 사용자가 최선의 옵션을 선택하는 것을 돕기 위해 정보를 제공해야 할 경우 텍스트 버튼을 사용하라. 텍스트 버튼은 다른 버튼들보다 돋보이지 않기 때문에 사용자가 도움말을 CTA 버튼으로 착각하지 않게 해 준다.
텍스트 버튼을 남용하지 말아라
텍스트 버튼은 디자인하기 어렵지 않기 때문에 쉽게 적용할 수 있지만 그 결과는 사용자가 버튼을 읽고, 인지하고, 누르기 어렵게 만들어 좌절감을 갖게 되는 것이다. 귀찮음으로 인해 텍스트 버튼을 남용하지 말아라. CTA버튼은 텍스트를 포함하고 있겠지만 항상 버튼처럼 보여야 한다.
