[디자인 카타] 회원가입 뷰에서의 힌트 텍스트 어떻게 입력할까?

 

1. 주제 선정

 

회원가입 뷰에서의 힌트 텍스트 어떻게 입력할까?

 

2. 개인 의견

 

[B] 선택

 

왜 해당 UI가 더 좋은지?

• 어떤 방식으로 입력해야 하는 지 예시를 보여주기 때문에 실수가 줄어든다.
• 실제 예시를 제시할 때 정보 전달력이 높아져 입력 폼의 의도를 잘 이해할 수 있다.

 

나머지 하나는 왜 선택하지 않았는지?

• 단순히 입력을 요청하는 문구는 사용자가 기대하는 입력 방식의 예시를 알기 어렵다.
• 이미 기존에 있는 필드명이 불필요하게 중복된다.
• 예시 없이 입력만 요구하면 입력값 오류가 늘어날 수 있다.

실사례 조사

• 예시 텍스트: 빈 입력란의 어포던스 역할을 강화하고, 사용자가 입력란의 목적과 예시를 동시에 확인할 수 있게 해서 직관적인 경험을 제공한다.
• 플레이스홀더 단점: 입력 시 사라져서 사용자가 기억해야 하고, 입력란 의미 확인이 어려움 → 실수 가능성 증가 : 예시 텍스트를 입력란 아래 배치하는 것도 효과적일 것이라고 한다.

[UX원칙#26] 플레이스홀더 텍스트의 UX 원칙 3가지

• 인라인 헬프: 입력 필드 하단이나 옆에 고정적으로 노출되며 플레이스홀더보다 더 구체적이고 상세한 설명을 제공한다.
• 비교하기
  • 플레이스홀더: 예시 중심, 입력 전 참고, 입력 시작 시 사라짐
  • 인라인 헬프: 상세 안내, 입력 중·후 계속 노출, 가이드·오류·조건 등 다양한 정보 제공

 

3. 공통의견 및 정리

✊ 팀원 4명  [B] 선택

 

📖B 선택 이유 정리

• 장점
  • 명확한 가이드를 제시해 사용자의 실수를 줄일 수 있다.
  • 사용자가 기대하는 입력값을 명확하게 인지할 수 있어 직관적이다.

 

• 단점
  • 지나치게 많은 예시를 주면 오히려 읽는 데 부담이 된다.
  • 일부 사용자는 예시 텍스트를 그대로 입력하는 실수를 할 수도 있다.

 

 

 

기억에 남는 팀원 의견

• 플레이스 홀더의 좋은 사례인 것 같다.

Textarea Placeholder: Usage, Examples, and Best Practices | TinyMCE

 

 

결론

• B의 방식이 UI가 사용자에게 더 명확한 가이드를 제공해 실수를 줄이고 직관적인 입력 경험을 만든다.