인필드 상단 정렬 라벨이 플로팅 라벨보다 좋은 이유
유저가 양식을 입력하는 필드 창에서 더 좋은 사용자 경험 제공하기(번역)
제가 상단 정렬과 라벨보다 필드 안에 있는 상단 정렬 라벨(infield top aligned labels)이 왜 더 좋은지 그 장점을 소개한 지 5년이 지났습니다.
https://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/
하지만 제 말과 반대로 디자이너들과 개발자들은 플로팅 라벨을 더 많이 사용하는 것 같습니다.
https://material.io/develop/web/components/input-controls/floating-label/
플로팅 라벨
필드 안에 있는 라벨필드 안에 있는 라벨이 더 사용하기 좋을 뿐만 아니라 플로팅 라벨보다 가독성이 좋습니다. 그래서 사람들이 플로팅 라벨을 사용하는 건 안타까운 일입니다. 라벨 정렬 표준은 사용성과 접근성이 좋아야 합니다. 그렇지 않으면 모든 사람이 따라야 하는 모범 사례가 될 수 없습니다.
이 글에서 저는 필드 안에 있는 상단 정렬 라벨이 그 반대의 경우(플로팅 라벨) 보다 왜 더 사용성 있고 접근성 있는지 설명하겠습니다. 여러분이 플로팅 라벨을 사용하고 있다면, 이 글을 읽고 플로팅 라벨 사용을 다시 한번 고려해 보세요.
필드 활성화 상태
플로팅 라벨 : 애니메이션 문제
먼저, 플로팅 라벨에서는 애니메이션 문제가 있습니다. 사용자가 텍스트 필드를 선택했을 때, 라벨은 커서 위치에서 애니메이션과 함께 상단 정렬(top-aligned)로 위치가 변합니다. 이런 활성화 상태를 위한 이펙트가 멋있어 보일 수는 있지만, 모션에 민감한 사용자에게는 문제가 될 수 있습니다.
이펙트가 화려한 플로팅 라벨들전정 장애(평형감각에 문제가 있는 장애)가 있는 사용자를 위하여 인터렉션의 움직임을 줄여주는 게 필요합니다. 필요치 않은 애니메이션은 전정 장애가 있는 사용자에게 혼란과 어지러움, 두통과 메스꺼움을 유발할 수 있습니다.
https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html
만약에 플로팅 애니메이션을 짧은 폼에, 적게 쓴다면 문제가 될 게 없습니다. 하지만 플로팅 애니메이션이 긴 필드에 연속해서 사용한다면 이런 이펙트는 모션에 민감한 사용자들에게 유쾌하지 않은 반응을 일으킬 겁니다.
장애가 없는 사용자에게도 이런 애니메이션은 서비스 안에서 그들의 목적을 완료하는 것에 혼란을 줍니다. 사용자들은 라벨이 플로트 되는지, 혹은 플로팅이 안되는지 처음 필드를 봤을 때 예측하기 힘듭니다. 라벨이 플로팅 된다면, 일부 사용자들은 라벨의 움직임에 당황할 수 있습니다. 사용자들은 심지어 그런 애니메이션을 가지고 놀기도 하는데, 이것은 사용자의 테스크를 완수하는 데 시간이 걸리게 합니다.
필드 안에 있는 상단 정렬 라벨(infield top aligned labels) : 심플한 하이라이트
필드 안에 있는 상단 정렬 라벨에서는 사용자를 놀라게 할 만한 예측 불가능한 애니메이션이 없습니다. 보이는 대로 작동합니다. 이런 정적인 접근은 멋있어 보이지는 않지만, 멋져 보이는 효과는 사용자에게 아무런 이득도 주지 않게 때문에 필요하지 않습니다.
활성화 상태를 나타내는 애니메이션을 사용하는 대신에, 필드 안에 있는 상단 정렬 라벨(infield top aligned labels)에서는 라벨과 테두리를 채도 있는 색으로 하이라이팅 하세요. 또한 더 차이를 주기 위해 테두리가 1에서 2 픽셀 정도 늘어나게 만드는 것도 좋습니다. 더 이상의 부가적인 효과는 오직 사용자가 폼을 채워 넣는 것을 혼란스럽게 할 뿐입니다.
라벨 가독성
플로팅 라벨 : 작은 텍스트 라벨은 가독성에 방해를 준다.
플로팅 라벨이 상단 정렬 위치로 바뀌서, 텍스트 라벨은 줄어들어 매우 작아지게 됩니다. 이런 작은 사이즈의 글자는 사람들이 그들이 입력한 것을 확인하고 고치는 것이 필요할 때 라벨을 읽기 힘들게 합니다. 결과적으로 사용자들은 폼을 제출하기 전에 폼을 다시 확인하는 데에 어려움을 겪습니다.
필드 안에 있는 상단 정렬 라벨(infield top aligned labels) : 처음부터 끝까지 가독성이 좋음
필드 안에 있는 상단 정렬 라벨(infield top aligned labels)은 필드가 활성화될 때 줄어들지 않습니다. 필드 안에 있는 상단 정렬 라벨은 처음부터 읽기 좋은 크기를 유지합니다. 텍스트 크기를 조작하지 않음으로 가독성은 일관되게 유지되고, 사용자들을 갑자기 놀라게 하지 않습니다.
다 채워지지 않은 필드에 대한 인식
프로팅 라벨 : 플레이스 홀더와 혼란을 준다
플로팅 라벨은 필드에서 사용자들이 값을 입력하는 자리인 플레이스 홀더 위치에서 시작합니다. 이런 플레이스 홀더 충돌은 사용자들에게 하여금 다 채워지지 않은 필드가 채워졌다고 인식하게 할 수 있습니다. 왜냐하면 필드는 사용자들이 값을 입력하든 안 입력하든 채워져 있기 때문입니다. 사용자들이 모든 필드가 채워졌다고 생각하고 폼을 제출하고, 예상치 못한 에러 화면을 마주할 가능성이 높습니다. 그뿐만이 아니라, 사용자들이 다시 폼을 채우러 돌아왔을 때, 건너뛰거나 놓친 폼들은 눈에 띄기 힘듭니다.
필드 안에 있는 상단 정렬 라벨(infield top aligned labels) : 안 채워진 항목이 뭔지 직관적으로 알려준다.
필드 안에 있는 상단 정렬 라벨(infield top aligned labels)에서는 플레이스 홀더와의 충돌이 없습니다. 활성화된 상태로 하이라이트 된 라벨은 2배로, 채워지지 않은 필드를 더 빨리 확인할 수 있게 합니다. 필드 안에 있는 상단 정렬 라벨은 사용자가 필드에 들어갔다가 나올 때 하이라이트로 항목이 채워졌다고 표시합니다. 만약 사용자가 건너뛰거나 놓친 필드를 찾고 싶을 때 사용자는 하이라이트가 되지 않은 라벨을 한번 훑어보기만 하면 됩니다.
입력 항목 힌트 표시
프로팅 라벨 : 힌트를 표시할 플레이스 홀더 자리가 없음
정보를 담고 있는 힌트는 사용자에게 적절하게 항목을 입력했는지 확신하지 못할 때 도움을 줄 수 있습니다. 예를 들면 비밀번호 조건 표시 같은 것들입니다. 플로팅 라벨은 이런 힌트를 표시할 공간이 없습니다. 왜냐하면 라벨이 플레이스 홀더 자리를 차지하고 있기 때문입니다. 대신 힌트 텍스트는 필드 밖에 위치합니다. 이것은 사용자가 힌트를 지나치기 쉽게 합니다. 이뿐만이 아니라, 여러 가지 힌트를 쓰면 형태가 어수선해집니다. 추가 텍스트는 라벨과 입력 텍스트와 시선을 분산시켜서 사용자가 집중하기 어렵게 합니다.
필드 안에 있는 상단 정렬 라벨(infield top aligned labels) : 힌트를 표시할 플레이스 홀더 자리가 있음
필드 안에 있는 상단 정렬 라벨(infield top aligned labels)에서는 플레이스 홀더 자리가 있습니다. 힌트는 사용자가 쉽게 확인할 수 있는 자리에 위치합니다. 사용자들은 더 빠르게 라벨과 힌트를 함께 읽을 수 있습니다. 힌트 텍스트는 또한 사용자가 입력값을 넣으면 사라지기 때문에 입력과 충돌하지 않습니다.
입력값과 라벨의 구분
프로팅 라벨 : 2요소간의 좁은 간격
플로팅 라벨은 종종 마진이 입력값과 라벨을 나누기에 부족하기 때문에 그 두 개를 구분하기 힘들게 합니다. 라벨과 입력값은 너무 붙어있기 때문에 둘이 동일한 계층으로 인식되기 쉽습니다. 두 별개의 라인의 텍스트로 읽히지 않고 사용자들은 이것들을 글자 덩어리로 인식합니다.
이런 일이 일어나는 이유는 초기의 라벨과 입력값은 기본 간격을 가지고 있고 필드에서 수직으로 위치가 변하기 때문입니다. 라벨이 필드를 선택했을 때 상단으로 이동함에 따라, 고려하지 못한 상황이 되어서 충분한 간격을 갖지 못합니다. 이 디자인은 라벨이 플로트 된 상황이 어떻게 보일지 충분히 고려하지 않았습니다.
필드 안에 있는 상단 정렬 라벨(infield top aligned labels) : 2 요소 간의 적절한 간격
오른쪽 사진을 보세요. 상단 정렬 라벨은 입력값과 라벨의 충돌하지 않습니다. 필드 안에 있는 상단 정렬 라벨은 두 개의 텍스트에 여러분의 시선을 처음부터 끕니다. 당신이 디자인할 때 라벨과 입력값이 같이 있었을 때 어떻게 보일지 생각해야 합니다. 필드 안에 있는 상단 정렬 라벨을 사용할 경우, 라벨과 입력값에 맞는 충분한 간격을 만들게 해 줍니다. 잘 맞는 간격 안에서, 라벨과 입력값을 구분하기는 쉽습니다.
결론 : 필드 안에 있는 상단 정렬 라벨이 더 낫습니다.
필드 안에 있는 상단 정렬 라벨(Infield top-aligned labels)은 플로팅 라벨보다 더 좋습니다. 이 둘은 비슷하게 보일 수 있지만, 이것들을 구분하는 중요한 차이점들이 있습니다. 이것을 한번 이해하고 나면 여러분은 왜 플로팅 라벨보다 필드 안에 있는 상단 정렬 라벨을 사용해야 하는지 알 수 있을 겁니다.
그럼에도 불구하고 여러분들이 왜 플로팅 라벨을 사용하고 싶어 하는지 압니다. 플로팅 라벨은 애니메이션이 화려하고, 메테리얼 디자인이 플로팅 라벨을 채택했기 때문에 멋져 보이고 패셔너블해 보입니다. 하지만 여러분이 폼을 디자인할 때, 스스로 물어야 합니다. 무엇이 더 중요한가 : 사용성인가? 최신 유행인가? 트렌드는 시간이 지나면 사라집니다. 하지만 본질은 평생 지속됩니다.
이 글은 anthony가 작성한 Why Infield Top-Aligned Labels Beat Floating Labels을 전문 번역한 글입니다.
https://uxmovement.com/forms/infield-top-aligned-labels-floating-labels/
