애플 휴먼 인터페이스 가이드라인(9) User Interaction -4 Data Entry

Data Entry

Whether tapping interface elements or using the keyboard, inputting information can be a tedious process. When an app slows down the process by asking for lots of input before doing anything useful, people can get discouraged quickly, and may even abandon the app entirely.

 

데이터 입력

화면 요소를 탭하거나 키보드를 사용할 때, 정보 입력 과정은 지루할 수 있습니다. 어떤 실용적인걸 하기도 전에 이것저것 질문하면서 이 과정을 더 느리게 만들면, 사용자들은 빠르게 의욕이 꺾이고 앱을 완전히 제거할 수도 있습니다. 

 

When possible, present choices. Make data entry as efficient as possible. Consider using a picker or table instead of a text field, for example, because it’s easier to choose from a list of predefined options than to type a response.

가능하다면 선택지를 보여주세요. 데이터 입력과정을 가능한 효율적으로 만드세요. 텍스트 입력창 대신 피커나 표를 사용하면 답변을 텍스트로 입력하는 대신 미리 정해진 옵션 리스트 중 선택할 수 있어 더 쉽습니다.

 

Get information from the system whenever possible. Don’t force people to provide information that can be gathered automatically or with the user's permission, such as contact or calendar information.

가능하다면 시스템에서 미리 정보를 받아오세요. 시스템에서 자동으로 불러올 수 있거나 연락처나 캘린더 일정과 같이 허가를 받아 모을 수 있는 정보들을 새로이 입력해달라고 하지 마세요.

 

Provide reasonable default values. To the extent possible, prefill fields with the most likely values. Providing good defaults minimizes decision making and speeds up the process.

상식적인 디폴트값을 제공하세요. 입력창에 가장 자주 입력될만한 값을 미리 채워두세요. 좋은 디폴트값을 제공하면 사용자의 의사결정과정을 최소화하고 데이터 입력 과정의 속도를 높일 수 있습니다.

 

Enable advancement only after collecting required values. Before enabling a Next or Continue button, make sure all required fields have values. Use the enablement of the button as a visual cue that it’s time to proceed.

요구되는 값을 입력받은 뒤 다음단계를 활성화 시키세요. 다음 혹은 이어서.. 버튼을 활성화 시키기 전에, 입력창에 필요한 데이터 값들이 모두 적혔는지 확인하세요. 버튼 활성화 기능을 다음단계로 진행할 때가 되었다는 시각적 신호로서 활용하라는 뜻입니다.

 

Dynamically validate field values. It’s frustrating when you have to go back and correct mistakes after filling out a lengthy form. Whenever possible, check field values immediately after entry so users can correct them right away.

데이터(필드값)가 유효한지 실시간으로 확인하세요. 긴 양식을 모두 다 채우고 난 뒤에 실수를 고치려 돌아가야 하는건 좌절스런 일입니다. 가능하다면 값이 입력됐을 때 즉시 체크해 사용자들이 바로 고칠 수 있도록 하세요.

 

Require field values only when necessary. Use required fields only for information that is truly necessary to proceed.

필요한 경우에만 데이터를 요구하세요. 필수 입력 항목은 정말로 필요한 경우에만 사용하세요.

 

Ease navigation through value lists. Especially in tables and pickers, it should be easy to pick a value. Consider sorting value lists alphabetically or in another logical manner that facilitates speedy scanning and selection.

값 리스트를 쉽게 탐색할 수 있도록 하세요. 특히 표나 피커를 사용할 땐 값을 쉽게 고를 수 있어야 합니다. 값을 알파벳 순서나 논리적인 순서로 배열해 신속한 스캔과 선택을 할 수 있도록 도우세요.

 

Show a hint in a text field to help communicate purpose. A text field can contain placeholder text—such as "Email" or "Password"—when there’s no other text in the field. Don’t use a separate label to describe a text field when placeholder text is sufficient.

목적을 달성할 수 있도록 텍스트 입력창에 힌트를 보여주세요. 다른 텍스트가 없다면 텍스트 입력창에 "이메일"이나 "비밀번호"와 같은 placholder text* 를 포함할 수 있습니다. placeholder text가 충분한 경우엔 구별된 라벨을 또 써서 텍스트 입력창을 설명하지 마세요.

*Placeholder text 예시_ 중간의 회색 글자 (First name ~ Confirm password)

 

 

참고_

Placeholder text는 유용성에 대해 논의되고 있는데, 정리된 아티클들을 첨부한다.

 

플레이스홀더 텍스트는...

1. 텍스트필드에서 요구하는 값을 뜻하는 중요한 라벨로서 사용되선 안된다.

2. 사라지기 때문에,

2-1. 사용자가 기억하는데 부담을 느낀다.

2-2. 양식 제출 전 입력을 잘 했는지 확인할 수 없다.

2-3. 오류메세지 발생 시 문제 해결 방법을 바로 찾기 어렵다.

3. 텍스트필드에 옅게 채워져있으므로 사용자는 값이 자동으로 채워졌다고 착각할 수 있다.

4. 대부분 밝은 회색으로 사용되기 때문에 명도 대비가 낮아, 접근성에 문제를 줄 수 있다.

5. 자동으로 번역/ 음성변환이 되지 않기 때문에, 접근성에 문제를 줄 수 있다.

 

등의 내용으로 정리할 수 있다. 그러나 플레이스홀더가 앱에서 사용되는 경우 + 오류메세지의 즉각 반응 등의 사용성을 충분히 고려하면 잘 사용될 수 있는 요소라고 생각한다.

 

www.nngroup.com/articles/form-design-placeholders/

Placeholders in Form Fields Are Harmful

www.smashingmagazine.com/2018/06/placeholder-attribute/

Don’t Use The Placeholder Attribute — Smashing Magazine

원문_

developer.apple.com/design/human-interface-guidelines/ios/user-interaction/data-entry/

Data Entry - User Interaction - iOS - Human Interface Guidelines - Apple Developer