미세한 사용성 문제 사례 - 트윈캠프 로그인

팀별 협업툴로 요긴하게 사용중인 트윈캠프다. 굉장히 잘 만들어진 서비스지만, 근래에 익숙치 못한 상황에서 팀원들에게 소개해주다가 로그인 과정에서 잠시 불편을 겪었다.

위 스크린샷만 볼때는 아무 문제가 없다. 로그인 폼에 E-mail address와 password가 보인다. 하지만 이 화면은 내가 임의로 편집한것이다. 트윈캠프에 접속한 다음, 빈 화면의 영역을 클릭해서 포커스를 빼버린것이다.

문제는 트윈캠프를 접속하자마자. http://twincamp.com/ 접속을 하고 나온 화면은 아래와 같다.

커서가 기본으로 아이디 부분에 들어가있다. 이것 때문에 "E-mail address"라는 문구가 보이지 않게 된다. 트윈캠프에 익숙하지 못했던 나는 아이디인줄 알고 miriya라고 입력하고, 패스워드를 넣은다음.. 로그인 삽질의 불편함을 겪게 되었다. 만약 저기 E-mail address가 보였더라면 나는 miriya대신 miriya.lee@gmail.com이라고 적어넣었을 것이고, 로그인은 순조로웠을 것이다.

다음이나 네이버도 비슷한 방식이다. 하지만 이들은 디폴트 커서 위치를 로그인 창이 아니라 검색창에 놨기 때문에 '아이디'라는 텍스트가 안보이는 문제를 피해갔다. 이용자가 로그인을 원할 경우, 아이디창에 클릭하면 '아이디'라는 텍스트가 사라지고 입력이 가능해진다. 예전 다음은 검색창 기본이 아니라 로그인 기본으로 알고있었는데, 당시에는 어땠을지 궁금하다.

트윈캠프랑 동일한 사항이 싸이월드에도 적용된다. 이 부분은 많은 사람들이 불편을 겪었을 것 같다. 싸이월드 역시 메일주소를 아이디로 쓰기 때문이다. 그렇다면 해결책은 뭘까?

이건 다음블로그의 경우다. 아이디가 보이고, 그 상태에서 그냥 커서가 깜빡이고있다. 입력을 시작하면 사라진다. 다소 우왁스러워보이고 모양상 좋지 않아보이기도 한다. 카페쪽은 커서 위치 디폴트가 지정되어있지 않은걸 보니 그냥 아무 생각없이 해놓은것 같아보인다-_-;

HanRSS도 비슷한 방식이지만 좀 더 깔끔하다. 레이아웃상으로 '이메일' 부분의 앞에 공백을 두어 글이 겹치지 않아 깔끔해보인다. 마우스로 클릭하거나 입력을 시작하면 글씨가 사라진다.

이건 외국 사이트 DPreview의 예다. 그냥 가장 클래식하다. 이러면 걱정할 필요는 없다. 다만 공간 활용이 좀 애매해지는게 문제다.

여태까지 로그인 폼은 기본적으로 아이디 + 비밀번호 + 로그인 버튼 (+ ID 저장) 정도 구성요소가 주가 되어왔다. 워낙에 사람들이 자주 쓰는 부분이라 어떤 사이트는 아예 아이디/비밀번호를 안적고 박스 두개만 쳐놓기도 한다. 하지만 일단 문제는 아이디가 아니라 메일 주소를 쓰는 사이트다. 이 부분은 어떻게 노티를 해주는게 가장 좋은 방법일까? 클래식하게 폼 바깥에 표시해주는 방법, 그리고 폼 안쪽에 텍스트를 보여주면서 커서를 보여주는 HanRSS의 방법 이외에 다른 방법이 더 있을까?

이 글이 도움이 되었다면 RSS로 구독하세요.

http://blog.daum.net/xml/rss/miriya

이 블로그의 모든 글은 자유롭게 링크할 수 있으며, 오픈캐스트 발행을 허용합니다.

다음 블로그로 스크랩하거나, 출처와 함께 퍼가도 뭐라 안합니다.(출처 없으면 뭐라 할겁니다.)