* 원문: http://www.sitepoint.com/ux-design-passwords-registration-forms/
확실히 폼 자체가 가지는 중요도는 높아지는 만큼 데이터를 최소한으로 입력하고자 하는 사용자 심리는 만국 공통인듯 하다. 그렇지만 어떻게 배치할 것인가에 대한 UX에 대한 판단은 각 나라별로 작게 또는 크게 차이가 날 수도 있다고 생각한다. 분명한 것은 모바일이 대두되면서 확실히 폼에 대한 개념이 많이 바뀌었으며 지금도 계속 변화하고 있다는 점이다.
그런 의미로 가볍에 읽을만한 글이기에 번역해 보았다.
폼 양식은 특히 사용자 경험을 다듬는 것에 집중할 수 밖에 없는 모바일의 등장 이후로
2015년 웹 디자인에서 결정적인 부분이다.
폼은 전자상거래 사이트에서 강력한 영향을 미치는 전환의 핵심이고 좋은 설계는 보통 성공적으로 사용자를 가입하게 하거나 영원히 그들을 잃을 수 있는 차이를 낸다.
사용자 관점에서 폼은 그들로부터 무엇을 요청할 지에 대해 사용자와 명백히 의사소통이 필요하다. 그들은 접속하는 기기에 상관없이 클릭하고 타자를 치는 것이 힘들지 않아야 한다. 그리고 적절하게 정렬된 라벨로 사용자가 입력해야 할 항목을 표시해야 한다.
예전에는 어쩌면 나중에 필요할지도 모르기 때문에 될 수 있는 한 많은 정보를 요구하는 것이 일반적이었지만 요즘엔 그렇지 않다. 폼은 필요 이상으로 복잡해서는 안된다.
이미지 제공: Will Scully-Power
연구 결과에서는 짧은 폼이 수익이 160% 더 증가할 수 있다는 것을 보여주기에 잘못 설계된 폼이나 너무 많은 데이터를 요구하는 폼은 직접적으로 수익에 타격을 줄 수 있다고 한다.
블루 리서치가 실시한 연구에서 설문을 통해 다음과 같은 내용을 발견하였다.
한결 같은 사용자 메세지는 분명하다. 사용자들은 가입하지 않는 것을 더 좋아하고 가능한 한 가입하는 상황을 피할 것이다. 한 술 더 떠서 이러한 저항은 점차 증가하고 있다. 계정 생성에 선택권이 주어진다면 많은 사용자들은 그들의 모든 계정을 아주 기꺼이 소셜 로그인을 사용할 것이다.
그 결과 우리는 폼 양식이 더 단순하고 짧을 필요가 있고 사업적 관점에서 많은 고객 정보를 가지고 있으면 가끔은 유용해도 정말 수익성이 없다는 것을 깨닳았다.
그래서 폼 양식을 제작할 때 사용자 에러를 방지하도록 만족화를 기준으로 설계할 필요가 있다. 제시카는 사용자를 배려할 수 있는 가장 분명한 방법으로 여러분의 질문 구상에 대해서 특히 중요한 것을 제안한다.
이 문제를 극복하기 위해 여러분은 다음과 같이 해야한다.
이 이유는 사용자가 무의식적으로 대답해야 할 느낌이 들자마자 질문을 읽지 않으려 하기 때문이다.
제시카는 다음과 같은 질문을 하는 것보다
이런 식으로 구성을 해야 한다고 말한다.
이것은 "사용자가 관심있는 부분적인 경험을 말한다." 그래서 여러분은 사용자가 선택하는 것을 확실히 하기 위해 중요한 정보를 "초기 단계"에 놓는 질문 형식으로 해야한다.
만족하기에 대한 자세한 설명과 어떻게 여러분의 폼 설계를 극복할 수 있는지에 대해 전체 글을 확인하라.
비밀번호 관리 프로그램은 일반적으로 전송 폼 이벤트로 동작하고 이름 (name) 이나 값 (value) 필드를 저장하기 때문이다.
폼을 설계할 때 이 비밀번호 항목들이 서로 다른 이름으로 지정되어 있지 않으면 비밀번호 관리 프로그램이 항목 이름을 맞출 수 없기 때문에 폼을 채울 수 없을 것이다.
이런 일은 흔히 일어나는 문제이며 해결하기 위해 Mammal에서는 (정말로 2개를 포함해야 하는 경우) 각 비밀번호 항목의 이름 값이 고유한지 확인하라고 조언한다. 가입 할 때 사이트에 사용자 비밀번호를 요청하지 않지만 사용자 이름은 요청하는 사이트일 경우 Mammal에서 사용자가 비밀번호를 설정하는 위치로 이동할 때 숨긴 이름 항목을 사용하는 것을 추천한다. 그 내용은 아래와 같다.
이메일 항목이 중복된다면 사이트의 대부분은 보통 잘못 사용 (예: 첫 번째 항목에 입력된 내용을 복사하여 붙여넣기) 되었을 뿐 아니라 안좋은 영향을 미칠 것이라고 바로 이해한다.
게리 개프니 같은 일부 사람들은 더욱 더 나아간다. 게리가 말하길
나는 확실히 사용자가 이런 방향을 더 이상 원하지 않다고 본다. 우리는 모두 웹 양식을 사용하는 것이 익숙하기에 배제 시킨다. 대신 여러분은 보다 쉽게 사용자가 입력하는 것을 볼 수 있도록 할 방법을 고려한다.
이미지 소스: LukeW Ideation and Design
이 그림에서는 이메일 주소를 빨간색으로 표시하고 있는데 이렇게 하면 어떤 사용자는 자신이 뭔가 잘못 입력했다고 느낄 수 있고 이로 인해 사용자의 불만이 생길 수 있다. 이런 점에서 보자면 특정 요소가 각기 다른 색상을 나타내는 A/B 테스트를 고려해볼 수도 있다.
비록 데스크탑에서 완벽하게 보여도 (보통 왼쪽 정렬 된 라벨이고 이런 이유로 인해 지양해야 함) 모바일 기기에서 볼 때 폼 항목과 라벨이 일치하지 않은 항목은 심심치 않게 볼 수 있다.
라벨은 항목의 위 또는 아래에 포함하는 가장 일반적인 옵션을 포함하여 몇 가지 다른 방법으로 위치한다. 안쪽이든 바깥쪽이든 항목 위에 라벨이 있는 것은 라벨이 항목 옆에 있을 때 보다 폼을 두 배로 긴 형태로 만든다. 길게 보이는 폼은 만족감을 느낄 것이다.
4월에 UX Movment에서 엔소니가 '안쪽에 상단 정렬된 폼 라벨은 더 빠르게 훑어본다' 라는 글을 포스팅했지만 5월 후속 포스팅에서 제시카가 설명한대로 아직 확실히 논란의 여지가 있다.
한 번 더 다른 라벨 위치의 장단점에 대한 전체적인 개요를 알고 싶다면 확실한 가이드를 참고하라.
continue reading [번역] 비밀번호와 가입 폼을 위한 UX 디자인
확실히 폼 자체가 가지는 중요도는 높아지는 만큼 데이터를 최소한으로 입력하고자 하는 사용자 심리는 만국 공통인듯 하다. 그렇지만 어떻게 배치할 것인가에 대한 UX에 대한 판단은 각 나라별로 작게 또는 크게 차이가 날 수도 있다고 생각한다. 분명한 것은 모바일이 대두되면서 확실히 폼에 대한 개념이 많이 바뀌었으며 지금도 계속 변화하고 있다는 점이다.
그런 의미로 가볍에 읽을만한 글이기에 번역해 보았다.
비밀번호와 가입 폼을 위한 UX 디자인
폼 양식은 특히 사용자 경험을 다듬는 것에 집중할 수 밖에 없는 모바일의 등장 이후로
2015년 웹 디자인에서 결정적인 부분이다.
폼은 전자상거래 사이트에서 강력한 영향을 미치는 전환의 핵심이고 좋은 설계는 보통 성공적으로 사용자를 가입하게 하거나 영원히 그들을 잃을 수 있는 차이를 낸다.
사용자 관점에서 폼은 그들로부터 무엇을 요청할 지에 대해 사용자와 명백히 의사소통이 필요하다. 그들은 접속하는 기기에 상관없이 클릭하고 타자를 치는 것이 힘들지 않아야 한다. 그리고 적절하게 정렬된 라벨로 사용자가 입력해야 할 항목을 표시해야 한다.
예전에는 어쩌면 나중에 필요할지도 모르기 때문에 될 수 있는 한 많은 정보를 요구하는 것이 일반적이었지만 요즘엔 그렇지 않다. 폼은 필요 이상으로 복잡해서는 안된다.
이미지 제공: Will Scully-Power
연구 결과에서는 짧은 폼이 수익이 160% 더 증가할 수 있다는 것을 보여주기에 잘못 설계된 폼이나 너무 많은 데이터를 요구하는 폼은 직접적으로 수익에 타격을 줄 수 있다고 한다.
사용자는 가입하는 것을 좋아하지 않는다
전통적인 가입 절차에 대해 저항하는 사용자가 점점 늘어나고 있고 사용자 계정을 생성하도록 강요하는 경우 최대 86% 정도가 자신의 행동 양식을 바꿀 것으로 나타났다.블루 리서치가 실시한 연구에서 설문을 통해 다음과 같은 내용을 발견하였다.
- 54%는 어쩌면 사이트를 떠날 수 있다고 언급
- 26%는 가입을 요구하지 않는 다른 사이트를 선택할 것이라고 함
- 6%는 그들이 조만간 그 사이트를 피하거나 떠날 것이라고 함
- 14%는 가입을 완료 할 것이라고 언급
한결 같은 사용자 메세지는 분명하다. 사용자들은 가입하지 않는 것을 더 좋아하고 가능한 한 가입하는 상황을 피할 것이다. 한 술 더 떠서 이러한 저항은 점차 증가하고 있다. 계정 생성에 선택권이 주어진다면 많은 사용자들은 그들의 모든 계정을 아주 기꺼이 소셜 로그인을 사용할 것이다.
그 결과 우리는 폼 양식이 더 단순하고 짧을 필요가 있고 사업적 관점에서 많은 고객 정보를 가지고 있으면 가끔은 유용해도 정말 수익성이 없다는 것을 깨닳았다.
만족화
그녀가 작성한 기사인 만족화: 웹 양식은 무엇을 의미하는가에서 제시카 엔더스는 이렇게 설명하고 있다."만족화"라는 용어는 성공적으로 업무를 완수하기 위해 요청된 최소한의 에너지만을 쓰려 하는 사람의 경향과 관련이 있다. 이것은 잠재 의식에서 나오는 현상이다. (대부분의 시간에서) 우리는 어떤 일을 시작하지 않고 "난 이 일에 대해서 최소한으로만 소비할 거야" 라고 생각한다.
그래서 폼 양식을 제작할 때 사용자 에러를 방지하도록 만족화를 기준으로 설계할 필요가 있다. 제시카는 사용자를 배려할 수 있는 가장 분명한 방법으로 여러분의 질문 구상에 대해서 특히 중요한 것을 제안한다.
이 문제를 극복하기 위해 여러분은 다음과 같이 해야한다.
마지막 보다는 첫 질문에서 기준을 배치하라
이 이유는 사용자가 무의식적으로 대답해야 할 느낌이 들자마자 질문을 읽지 않으려 하기 때문이다.
제시카는 다음과 같은 질문을 하는 것보다
Q: 당신은 다른 곳에 2년 내에 거주한 적이 있습니까? (Y/N)
이런 식으로 구성을 해야 한다고 말한다.
Q: 최근 2년 내에 다른 곳에 거주한 적이 있습니까? (y/n)
이것은 "사용자가 관심있는 부분적인 경험을 말한다." 그래서 여러분은 사용자가 선택하는 것을 확실히 하기 위해 중요한 정보를 "초기 단계"에 놓는 질문 형식으로 해야한다.
만족하기에 대한 자세한 설명과 어떻게 여러분의 폼 설계를 극복할 수 있는지에 대해 전체 글을 확인하라.
중복된 항목
다른 애플리케이션에서 각기 다른 위치에 이메일이나 비밀번호 항목이 중복된 사이트를 심심치 않게 볼 수 있다. 이것은 사용자가 떠나도록 유도할 뿐 아니라 비밀번호 관리 프로그램으로 비밀번호를 저장하는 모든 사용자를 골치 아프게 할 수 있다.비밀번호 관리 프로그램은 일반적으로 전송 폼 이벤트로 동작하고 이름 (name) 이나 값 (value) 필드를 저장하기 때문이다.
폼을 설계할 때 이 비밀번호 항목들이 서로 다른 이름으로 지정되어 있지 않으면 비밀번호 관리 프로그램이 항목 이름을 맞출 수 없기 때문에 폼을 채울 수 없을 것이다.
이런 일은 흔히 일어나는 문제이며 해결하기 위해 Mammal에서는 (정말로 2개를 포함해야 하는 경우) 각 비밀번호 항목의 이름 값이 고유한지 확인하라고 조언한다. 가입 할 때 사이트에 사용자 비밀번호를 요청하지 않지만 사용자 이름은 요청하는 사이트일 경우 Mammal에서 사용자가 비밀번호를 설정하는 위치로 이동할 때 숨긴 이름 항목을 사용하는 것을 추천한다. 그 내용은 아래와 같다.
<!-- Set password -->
<form action="/signup" method="post">
<input name="username" style="display:none;" type="text" value="{{ username }}"/>
<input name="password" placeholder="Password" type="password"/>
<input type="submit"/>
</form>이메일 항목이 중복된다면 사이트의 대부분은 보통 잘못 사용 (예: 첫 번째 항목에 입력된 내용을 복사하여 붙여넣기) 되었을 뿐 아니라 안좋은 영향을 미칠 것이라고 바로 이해한다.
게리 개프니 같은 일부 사람들은 더욱 더 나아간다. 게리가 말하길
나는 건방지고 불필요하게 이메일 주소를 반복적으로 요청하는 것을 발견했다. 내가 정말 어떤 서비스를 바라고 있는 상태에서 내 이메일 주소를 잘못 입력했다면 요청했던 서비스를 받지 못한 것을 알아 차릴 것이다. 나는 반복된 이메일 주소를 의미하는 손 잡아 주기 방식이 실제로 필요하지 않다.
나는 확실히 사용자가 이런 방향을 더 이상 원하지 않다고 본다. 우리는 모두 웹 양식을 사용하는 것이 익숙하기에 배제 시킨다. 대신 여러분은 보다 쉽게 사용자가 입력하는 것을 볼 수 있도록 할 방법을 고려한다.
- 입력을 명확히 하도록 공백을 충분히 줌
- 흰 배경에 검은색을 사용
- 입력 항목 크기를 키움
이미지 소스: LukeW Ideation and Design
이 그림에서는 이메일 주소를 빨간색으로 표시하고 있는데 이렇게 하면 어떤 사용자는 자신이 뭔가 잘못 입력했다고 느낄 수 있고 이로 인해 사용자의 불만이 생길 수 있다. 이런 점에서 보자면 특정 요소가 각기 다른 색상을 나타내는 A/B 테스트를 고려해볼 수도 있다.
폼 라벨
가입 폼에서 흔히 실수 하는 것 중에 하나가 폼 라벨과 그 위치이고 심지어 모바일 혁명이 시작된 이후에 더 많이 일어난다.비록 데스크탑에서 완벽하게 보여도 (보통 왼쪽 정렬 된 라벨이고 이런 이유로 인해 지양해야 함) 모바일 기기에서 볼 때 폼 항목과 라벨이 일치하지 않은 항목은 심심치 않게 볼 수 있다.
라벨은 항목의 위 또는 아래에 포함하는 가장 일반적인 옵션을 포함하여 몇 가지 다른 방법으로 위치한다. 안쪽이든 바깥쪽이든 항목 위에 라벨이 있는 것은 라벨이 항목 옆에 있을 때 보다 폼을 두 배로 긴 형태로 만든다. 길게 보이는 폼은 만족감을 느낄 것이다.
4월에 UX Movment에서 엔소니가 '안쪽에 상단 정렬된 폼 라벨은 더 빠르게 훑어본다' 라는 글을 포스팅했지만 5월 후속 포스팅에서 제시카가 설명한대로 아직 확실히 논란의 여지가 있다.
한 번 더 다른 라벨 위치의 장단점에 대한 전체적인 개요를 알고 싶다면 확실한 가이드를 참고하라.
추가 자원
폼은 이제 믿을 수 없을 만큼 디자인에서 중요한 부분이고 충분한 정성을 들여야 한다. 가능한 한 간단하게 사용하도록 해야하고 짧을수록 여러분은 잘 해낼 수 있다. 소셜 등록은 바람직하지만 UX 품질 저하와 사이트 속도 저하를 이유로 우선적으로 생각해서는 안된다.
도움이 될만한 글:
- Jessica Enders: 3 Rules for Painless Account UX Part One and Part Two
- Jessica Enders: The Definitive Guide to Form Label Positioning
- UX Movement: Why Users Fill Out Less if You Mark Required Fields
- Acquire Convert: Conversion Optimization: An In-depth Guide to Forms
글
