입력창에 레이블 꼭 달아주세요
placeholder만 쓰지 말아야겠다
UI 하나를 만들더라도 수많은 레퍼런스와 아티클을 뒤져가면서 만든다는 것을 다들 알까?
내가 아직 실력이 모자라서 인지 뭔지는 모르겠지만 5년 차가 되어가는데도 나는 여전히 디자인이 어렵다.
이번엔 로그인과 회원가입 페이지를 제작하는데 이슈가 발생했다.
어떤 곳은 레이블이 있는데 어떤 곳은 placeholder만 있는 곳도 있었다.
레이블이 없는 로그인. 왼쪽부터 무신사/쏘카/쿠챠/글로우픽왜지? 어떤 UI가 UX적으로 좋은 거지?
궁금했다. 그리고 알게 되었다.
레이블은 꼭 사용해야 한다. placeholder만 쓰면 안 된다.
왜 placeholder만 쓰면 안 되는지 알아보자.
1. 번역 문제
브라우저에서 placeholder까지 번역해주지는 않는다. 사용자들에게 input의 내용을 전달하기가 어렵다.
2. 접근성
레이블 대신 사용하는 경우 스크린리더나 보이스오버를 사용하는 유저들은 이 내용을 읽거나 조작하기 힘들 수 있다.
3. 힌트가 사라짐
클릭 시 힌트가 사라지는 것은 UX에서 대단한 비중을 차지한다.
사람의 기억력은 매우 짧기 때문에 사용자가 무엇을 입력해야 하는지 헷갈린다. 나도 가끔 로그인을 할 때 아이디를 입력해야 하는지 이메일을 입력해야 하는지 헷갈릴 때가 있다. 이런 문제를 방지하기 위해 꼭 label을 제공해야 한다.
4. 힌트의 제한
placeholder는 input너비로 제한된다. 모바일 웹일 경우 중요한 정보가 잘릴 수 있다.
Solution
1. 레이블을 꼭 사용할 것
2. 깔끔한 그리드를 사용하고 싶다면 플로팅 레이블을 사용할 것
이것이 바로 플로팅 레이블케이스 스터디를 하다 보니 네이버도 UX를 개선시켰다.
예전 로그인에서는 placeholder로만 로그인했다가 최근엔 앞에 아이콘이 생겼다.
하지만 여전히 레이블이 없는 로그인이 많다.
로그인뿐만 아니라 회원 가입 시에도 placeholder만 사용하면 사용자에게 큰 불편함을 줄 수 있다.
꼭 label을 사용해서 로그인과 회원가입 화면을 제작하자.
참고자료
https://ibrahimovic.tistory.com/30
https://brunch.co.kr/@ebprux/250
