비밀번호 입력 오류 줄이는 인터렉션 설계

패스워드를 입력할 때에 Caps Lock 이 켜져 있어서 소대문자를 잘 못 입력할 때가 있습니다.

입력 박스에 패스워드를 입력할 때에는 입력하는 글자 대신 보통 ‘*’ 를 표시되기 때문입니다. 남을 못 보게 하면 자기도 못 보는 문제가 있습니다. 그래서 패스워드가 번호가 아니라 글자인 경우에, 입력할 때 많이 생기는 오류가 바로 Caps Lock 키가 눌려져 있어서 알파벳을 대문자로 입력하는 경우 입니다.

입력하는 글자가 안보이므로 현재 입력하는 글자가 무엇인지 알 수가 없습니다. 그래서 영문자가 대문자인지 소문자인지 알 수가 없죠.

사실, 패스워드 입력 창은 한글 입력이 안됩니다. 한 글자씩 * 로 표시하게 되어서 영문자만 입력이 됩니다. 비쥬얼 베이직이나 비주얼 스튜디오, 또는 델파이와 같은 개발 환경에서 패스워드 입력 컨트를의 IME 를 보면 확인할 수 있습니다.

한글이 입력이 안되고 영문자와 숫자, 기호만 입력이 되므로 영문자 입력을 모두 전부 대문자로 만들어 주는 Caps Lock 은 비밀번호 입력시 오류를 일으키게 하는데 한 몫하는 것 같습니다.

그래서 패스워드 오류 메시지로 “Caps Lock 이 켜져 있는지 확인해보세요” 라는 메시지를 표시해 주는 친절한 소프트웨어나 웹 사이트들이 있기도 합니다.

Yahoo! Login Error Message

그러나 이 방법은 이미 사용자가 오류를 경험한 후의 일입니다. 입력할 때에 알려주면 오류를 겪지 않아도 될 것입니다.

윈도우즈 XP 를 처음 설치 하고 나서 얼마 후에 발견한 것이 있습니다. 그것은 로그인 할 때에 Caps Lock 이 켜져 있으면 패스워드 입력창에 메시지가 뜬다는 것입니다.
Windows XP caps lock message

로그인창은 화면 캡처를 할 수가 없어서 디지탈 카메라로 찍었습니다^^

인스톨 하는 프로그램에서 패스워드를 입력하는 옵션을 주고 화면 캡처를 했습니다. 여기에도 나옵니다. 윈도우즈 공통 컨트롤의 패스워드 입력창에 이 처리가 되어 있는 모양입니다.

password caps lock

사용자에게 Caps Lock 이 켜져 있다는 것을 알려줄 때에 사용하는 UI 요 소는 다이어로그가 아니라 풍선(Balloon) 이라는 UI 요소를 사용하는 것이 적절합니다.

윈도우즈의 비스타의 풍선 UI 에 대한 가이드라인을 보면

풍선은 어떤 UI 요소에서 심각하지 않은 문제나 특정 조건에서 사용자에게 정보를 알려주는 작은 팝업 윈도우이다.

풍선 UI 요소는 사용자를 방해하지 않고 사용자에게 어떤 조건을 알려줄 때 사용한다. 예를 들면 입력하는 길이를 초과했거나 Caps Lock 를 잘못 세팅했을 때 사용한다. 풍선UI는 입력 포커스를 훔지지 않고 사용자에게 피드백을 준다. 특히 패스워드나 PIN 박스에서 중요하다.

Windows Vista Ballon

비스타의 가이드라인은 기존의 가이라인 방식이 아닌 디자인 패턴 언어 방식으로 쓰여져 있네요. 언제 시간 내서 디자인 패턴 언어에 대해서 글을 써야겠습니다.

윈도우즈 XP 의 패스워드 입력시 Caps Lock 메시지를 잘 된 인터렉션 설계로 생각합니다. 그런데, 윈도우즈 안에서 일관성 있게 적용되지 않은 곳이 있습니다. 바로 윈도우즈 XP 에서 사용자의 패스워드를 변경하는 곳입니다. 패스워드 변경할 때에 Caps Lock 표시가 되지 않습니다.

Windows XP Caps Lock Message

Caps Lock 은 패스워드를 입력할 때만의 문제가 아닙니다. 패스워드를 변경할 때에도 현재 Caps Lock 의 상태를 표시해서 처음 부터 입력 오류를 없애야 할 것입니다.

패스워드를 입력할 때의 사용자의 오타는 시스템이 어떻게 할 방법이 없습니다. 그러나 Caps Lock 과 같은 상태를 알아채서 사용자에게 알려주는 것은 사용자의 입력 오류를 줄이는 좋은 방법인 것 같습니다.

Related Post







Scroll Up