[HIG] Components - Text fields

https://developer.apple.com/design/human-interface-guidelines/components/selection-and-input/text-fields

Text fields - Selection and input - Components - Human Interface Guidelines - Design - Apple Developer

텍스트 필드는 사람들이 작은 특정한 텍스트 조각을 입력하거나 편집하는 직사각형 영역이다.

텍스트 필드의 예시

Best Practices

• 텍스트 필드는 작은 양의 정보를 입력받을 때 사용해야 한다. (이름이나 이메일 주소와 같은!)
• 많은 양의 텍스트를 입력 받아야 할 때에는 text view를 사용하자
• Placeholder를 사용해 텍스트 필드에 힌트를 제공하여 목적을 전달하는 데 도움을 줄 수 있다.
• Placeholder는 사용자가 입력을 시작하면 사라지기 때문에 별도의 Label을 추가하여 텍스트 필드의 목적을 사용자에게 상기시키는 방법도 있다.
• 비밀번호와 같이 보안이 필요한 데이터를 받을 때는 이를 숨기기 위해 secure text field를 사용하자
• 텍스트 필드의 크기를 예상되는 텍스트의 양과 일치시키자. 텍스트 필드의 크기는 사용자가 제공할 정보의 양을 측정하는 데 도움이 된다.
• 텍스트 필드가 여러개 필요한 경우
  • 텍스트 필드 간의 간격을 균등하게 만든다.
  • 각 필드에 해당하는 소개 Label이 속한 입력 필드를 쉽게 찾을 수 있도록 필드 사이에 충분한 공간을 두자
  • 가능한 세로로 텍스트 필드들을 쌓고, 일관된 너비로 만들자
• 여러 필드 간의 탭 이동이 사람들의 예상대로 흘러가야 한다. 필드를 탭할 때 focus가 논리적인 순서로 이동해야 한다. OS가 이것을 디폴트로 제공하기 때문에 지나친 커스텀은 자제하자
• 필드의 유효성 검사
  • 숫자만 입력되어야 하는 필드에서 알파벳이 입력되면 경고를 보여줘야한다.
  • 이메일 주소를 입력할 때는 사용자가 포커스를 변경 할 때 유효성을 검사하는 것이 가장 좋다. (실시간으로 검사 X)
  • 사용자 이름이나 비밀번호를 만들 때는 포커스가 다른 필드로 전환되기 전에 실시간으로 유효성 검사를 수행하는 것이 좋다.
  • 즉, 상황에 따라 유효성을 검사하는 시점이 달라진다.
• 숫자 데이터에 number formatter를 사용하는 것도 좋다.
  • number formatter는 자동으로 텍스트 필드가 숫자만 입력 받을 수 있도록 한다.
  • 특정 소수점 이하 자릿수, 백분율, 통화와 같은 특정 포맷으로 값을 표시할 수 있다.
  • 그러나, 사용자의 locale에 따라 포맷이 달라질 수 있기 때문에 실제 표시 방식을 속단해서는 안된다.

HIG에서 제시한 Number formatter

• 필드의 필요에 따라 줄 바꿈을 조정한다.
  • 기본적으로 시스템은 텍스트 필드의 경계를 넘어 확장되는 모든 텍스트를 잘라낸다.
  • 잘라내기 대신에 새 줄 바꿈이나 시작, 중간, 끝에서 줄임표(...)를 표시하도록 텍스트 필드를 설정할 수 있다.

• 잘라진 텍스트의 전체 버전을 표시하려면 expansion tooltip을 사용하는 것이 좋다.
  • help tag처럼 동작하며 사용자가 필드 위에 포인터를 위치시키면 표시된다.
• 각 OS에서 적절한 키보드 유형을 표시하자. 다양한 키보드 유형이 있으며 각기 다른 유형의 입력을 용이하게 하도록 설계되어있다.

 

iOS, iPad OS

• 입력한 내용을 쉽게 지울 수 있도록 텍스트 필드 끝에 지우기 버튼을 넣자
  • 사용자가 delete 키를 연속해 터치하지 않아도 쉽게 텍스트 필드의 내용을 지울 수 있다.
• 텍스트 필드 양 끝에 이미지를 표시하거나 북마크 버튼과 같은 시스템 제공 버튼을 추가한다.
  • 일반적으로 필드의 앞쪽에는 필드의 용도를 나타내고 뒤쪽 끝에는 북마크와 같은 추가 기능을 제공한다.이미지와 버튼을 사용하여 텍스트 필드에 명확성과 기능을 더할 수 있다.

iOS 앱 검색 텍스트 필드