[본캠프5일차/디자인카타] 회원가입 뷰에서의 힌트 텍스트 어떻게 입력하는게 좋

1. 팀원들과 함께 마음에 드는 토픽을 선정합니다. 5분

 

회원가입에 대한 A 와 B

2. 각자 토픽에 대해 아래 내용을 정리합니다. 30분

• 왜 해당 UI가 더 좋은 지 작성합니다.
  "B" 를 선택하였다.
  >최근 들은 체계적으로 배우는 피그마 기초 강의 3강에서 배운 내용이 생각났다.
  우선, '텍스트 필드 컴포넌트'(인풋 컴포넌트)에 대하여 말해야 할 것 같다.
  
  #텍스트 필드 컴포넌트

사용자가 무언가를 입력할 수 있게 하는 컴포넌트" 를 말한다. 

텍스트 필드 컴포넌트의 구조

1.  인풋 컨테이너()     - 글자를 입력하는 부분

2.  라벨/레이블(Label)     - 입력해야 하는 값이 무엇인지 알려주는 텍스트

3.  텍스트(Text)     - 사용자가 직접 입력하는 텍스트

4. 리딩 엘리먼트(Leading Element)     - 텍스트보다 더 앞쪽에 있는 엘리먼트

5.  트레일링 엘리먼트(Trailing Element)     - 텍스트보다 더 뒤쪽에 있는 엘리먼트

6.  헬퍼 텍스트(Helper Text)     - 유효성 검사 결과를 보여주거나 입력해야 하는 값의 가이드라인을 제공하는 도움말

 

> 이중, '텍스트에 해당하는 플레이스홀더' 와, '헬퍼 텍스트' 가 오늘 주제와 가장 부합하는 정의라고 생각했다.

#플레이스 홀더

플레이스(자리를) + 홀더 (지키고 있는 것)= "자리 표시자" 라고 일컫는다.

• 사용자가 입력해야하는 예시를 제공하는 용도
• 사용자가 텍스트를 입력하기 시작하면 사라짐
• 글자를 모두지우면 다시 나타남

▶플레이스 홀더의 유의사항

• 플레이스홀더 자리에는 입력값의 조건을 적지 않는 것을 권장
• 플레이스홀더는 값을 입력하기 시작하면 사라진다.
• 플레이스홀더에는 조건 대신 입력 예시를 넣어야 한다.
  
  

따라서, 플레이스 홀더 안에는 "예시" 가 입력 되있도록 하고, 조건에 대한 힌트 텍스트는 "헬퍼 텍스트" 가 위치한 하단 왼쪽아래에 배치해야 한다고 생각한다.

 

• 나머지 하나의 UI는 왜 별로인 지, 왜 선택하지 않았는 지 작성합니다.

조건이 복잡하지 않은 경우에는 괜찮지만,
조건이 복잡하거나 어려운 경우에는 사용자가 입력 중에 조건을 까먹을 수도 있다.

그렇게 되면 사용자는 쓰던 걸 지우고 다시 플레이스홀더를 봐야 하는 불편함이 생겨 버림.

 

유저가 타이핑을 시작하거나 클릭을 하게 되면 레이블 내용이 사라져 확인하기가 어려우므로, 사용자의 단기기억에 부담을 준다.
그렇기 때문에 따로 A와 같은 조건 문구는 헬퍼 텍스트로 사용하는 것이 사용자 사용성의 만족감을 한층 높여줄 것이다.

 

 

• 내 의견을 뒷받침 할 수 있는 실 사례가 있는지 찾아봅니다. 도전

 

3. 다같이 모여서 작성한 내용에 대해 토의하고, 결과를 정리해봅니다. 20분

[]

[]

[]

[]

4. 해당 토픽의 댓글을 확인하며 다양한 사람들의 의견을 우리의 의견과 비교해봅니다.

https://designus.io/topic/75

회원가입 뷰에서의 힌트 텍스트 어떻게 입력하시겠어요? | 디자이너스

 

5. 3번을 발전시켜 댓글보다 더 좋은 답변을 만들어서 직접 게시해봅시다.