로그인(Log-in| Sign-in) 패턴

웹사이트의 대부분은 로그인을 하는 폼이 존재합니다. 로그인 폼의 경우 4가지 요소들로 구성이 되는데요.

1. 아이디를 입력받는 인풋 (Input type="text")
2. 패스워드를 입력받는 인풋 (Input type="password")
3. 로그인과 관련한 세부설정 체크박스 (input type="checkbox")
   
4. 로그인버튼 (input type="button")
   

※ '패스워드를 잃어버린 경우' 또는 '도움말'이 아래에 들어갑니다.
※※ 국내 사이트의 경우 '보안접속' 항목이 하나 더 들어갑니다.

국내 사이트의 로그인 폼을 보게 되면 대부분이 다음과 같은 형태로 구성이 됩니다.
싸이 월드의 경우 가장 처음에 아이디 입력에 포커스가 가게 됩니다. 그리고 탭을 누르게 되면 패스워드 입력, 로그인 버튼, 아이디 저장, 보안접속 순으로 진행되게 되죠.

사용자가 각 input을 마우스로 이동한다고 가정을 해봅니다.
(일반적으로 사이트가 로딩하게 되면 아이디를 입력하는 인풋에 포커스가 가기 때문에 이메일을 클릭할 필요는 없습니다. 따라서 이메일 클릭은 생략하겠습니다.)

1. 아이디를 입력합니다.
2. 그리고, 비밀번호를 클릭한 후 패스워드를 입력합니다. (입력한 후 엔터를 눌러서 바로 로그인할 수도 있겠죠.)
3. 만약, 이메일 저장, 보안 접속을 설정하고 싶으면 마우스로 해당 항목을 클릭합니다.
4. 마지막으로, 로그인 버튼을 누르고 로그인을 합니다.

자, 이제 input을 키보드만으로 이동한다고 가정을 해보겠습니다.

1. 아이디를 입력합니다.
2. 탭을 눌러서 비밀번호로 이동한 후 패스워드를 입력합니다.
3. 탭을 눌러서 로그인버튼을 눌러서 로그인합니다.

여기서 문제가 발생합니다. 사용자가 이메일 저장, 보안 접속을 하려고하면 문제가 발생하게 됩니다. 탭이동에 대한 고려가 없었다고 봐야겠죠.
네이버의 경우에는 패스워드 입력 다음에, 아이디 저장, 보안접속 순으로 이동하기는 합니다만, 로그인 버튼에 포커스가 가지 않기 때문에 로그인을 하기 위해서는 결구 마우스 클릭이 발생하게 되죠.
다음의 경우에는 'ID저장'으로 가는 포커스가 포함되어 있지 않습니다. (보안접속 동일)
엠파스의 경우에도 '아이디 기억', '보안접속'을 클릭하기 위해서는 마우스로 설정해주는 동작이 더 필요합니다.

그러면, 외국 사이트에서는 어떻게 처리하는지 잠시 살펴보겠습니다.
야후의 로그인 창을 들어가게 되면 아래와 같은 로그인 화면이 나옵니다. (좀 더 심플한 케이스도 있습니다만, 하고 싶은 말을 하기 위해서 큰놈으로 골라 봤습니다.^^)
먼 저, 사용자가 아이디, 패스워드를 입력하고, 탭을 누르면 아이디 저장을 선택할 수 있게 됩니다. 그리고 다시 탭을 누르면 Sign In 버튼을 누를 수 있게 되어 있구요. 만약, 아이디, 패스워드를 모르면 탭 이동만으로도 아이디/패스워드 찾기로 이동하거나, 도움말을 클릭할 수 있게 됩니다.

웹페이지를 이동하는 방법 중 하나는 마우스고 하나는 키보드입니다.
마우스가 많은 부분을 차지하지만, 키보드만을 사용하는 사용자들을 위해서 Tab키만으로 이동이 가능하게 하는 것은 중요한 부분이겠죠.

언제 사용할 것인가? (Use When?)

1. 사용자의 로그인 입력을 받아야 하는 경우(Tab키로 이동하는 방법을 지원하고 싶을 때)
   

해결책 (Solution)

1. 아이디/패스워드/로그인 설정/로그인 버튼 순으로 포커스가 이동할 수 있도록 배치합니다.
2. 필요시에는 tab index를 사용하여 순서를 변경합니다.
   

P.S. 패턴이라고 부르기에는 많이 미흡합니다만, 약간의 고려만으로도 사용자 편의성을 얻을 수 있지 않을까요? ^^