아이튠즈 계정 생성 입력 폼 UI 실패
2010. 10. 15. 11:59ㆍUI 가벼운 이야기
아이튠즈 계정을 만들어주다가 계속 실패했습니다. 암호 정하는걸 잘못 했다고 에러가 났는데, 처음에는 내가 실수 했거니 했는데 설명(요구사항)을 잘 읽고 따라해봐도 계속 다시하라고 해서 짜증이 나기 시작했습니다.
1. 암호 요구 사항을 잘 못 적어놓았습니다.
결국 포기하고 나중에 한국 아이튠즈로 들어가니까 대문자,소문자를 하나씩은 포함해야 한다고 나와있네요. 영어 설명에는 대소문자를 포함해야 한다는 말이 없습니다. 아놔.
must have at least 8 characters, one number, one letter, and no spaces.
2. 에러 메세지의 주의 강조 방법이 잘못되었습니다.
다시 보니 상단 메시지에 암호에는 대문자가 하나 이상 있어야 한다고 적고 있습니다. 물론 보긴했지만 전 읽지 않았습니다. 근데 이건 제 잘못이 아니라 디자인이 잘못 된것입니다.
폼 입력하는건 귀찮은 일이라, 사용자는 문제가 있는 필드를 빨리 고치고 빨리 다음으로 진행하고자 합니다. 잘못된 필드를 빨간색 화살표로 강조해 표시해 주어서 가장 먼저 그곳에 시선이 가고, 필드의 요구사항을 빨갛게 강조하고 있어서 자연스레 요구사항으로 시선이 이동하여 다시 잘 읽어보았습니다. 해당 필드의 요구사항을 강조했기때문에 상단의 메시지는 당연히 일반적인 에러가 있다는 알림정도로 생각하고 무시했던거죠. 암호 필드의 오른쪽 설명을 빨갛게 강조하지만 않았다면 당연히 상단의 메시지에 시선이 가서 읽게 되겠죠.
사용자가 절대 순서대로 읽지만은 않습니다. 주의에 따른 시선의 흐름을 만들어주는 것도 디자인의 역할입니다.
수정 이미지 : 좋은 해결은 아니지만 상단의 메시지를 읽게된다.
물론 가장 좋은 방법은 개별 필드의 문제는 저렇게 동떨어진 위치가 아니라 해당 필드 바로 위나 아래에 강조색으로 표시해 주는 것입니다. 요즘 웹폼들은 가변적으로 레이아웃을 바꿀 수 있어서 이런 패턴을 주로 사용하는데 아이튠즈는 애플리케이션이라서 귀찮으니까 저렇게 코딩해 놓은 것 같습니다.
윕폼디자인에 관해서는 루크 로블르스키의 블로그를 추천합니다.
웹폼디자인이라는 책도 번역서가 나와있고요.