비밀번호 입력창의 값을 보여주기/가리기

개요

비밀번호 창에 입력한 값을 보여주거나 가리는 아이콘은 어떻게 보여야 할까?

평소에 이와 같은 UI/UX에 심한 거부감을 가지고 있다.

• 무엇을 하는 기능 - 이라는 것인지
• 어떠한 상태 - 라는 것인지 알 수가 없는 것이다.

참고 링크: https://heymichellemac.com/improve-usability-of-password-fields

Action and State

Action과 State의 두 관점으로 접근할 수 있다.

Action이라면

• 비밀번호가 ******** 일때에 눈 아이콘을 클릭하면 비밀번호를 보여주는 동작(action)을 하고
• 비밀번호가 보일때에 눈을 가리는 아이콘을 클릭하면 비밀번호가 ******** 되면서 가려주는 동작(action)을 하는 것이다.

반대로 State는

• 비밀번호가 ******** 일때는 눈을 가리는 아이콘을 보여주여 숨긴 상태라는 것을 알려주고
• 비밀번호가 보일때에는 눈 아니콘을 보여주어 상태를 알려주는 것이다.

확실했으면 좋겠다

링크에서는 대안을 제시한다. 헷갈리는 아이콘을 쓰지 말자는 것이다.

• 아예 별도로 체크박스와 설명을 두거나
• 아이콘의 위치에 Show/Hide 라는 동사를 표시하여 클릭하면 해당 동작을 한다는 것을 알려주는 것이다.

속이 시원한 해답이다.