H.I.G: Human Interface Guideline(스위프트 하이) - Data Entry

HIG: Human Interface Guideline (=사용자 인터페이스 지침서)

즉, 절대적으로 이 지침을 따라야 한다는 것이 아니라 앱 개발과 디자인에 있어 "권장"하는 내용이다.

무분별한 백지개발로 퀄리티가 낮은 앱이 개발되는 것을 예방하고, 어느 정도 일정한 패턴과 형식을 가진 앱을 개발하기를 바라는 마음에서 만들어진 지침이다.

 

https://www.youtube.com/playlist?list=PLLFDewH7eSVxGMERS4CrwkDXXYZoE5mVZ 

온라인 독서모임

오늘 공부한 내용은 '스위프트 하이 유튜브 온라인 독서모임'의 'Data Entry'이다.

앱 개발 간 앞으로 고려해야할 내용들이기에 공부하게 되었다.

 

< 요약 >

1. 인터페이스를 탭하든 키보드를 사용하든 정보를 입력하는 것은 사용자에게 지루한 경험이다.

2. 가능하면 선택지를 줘라. Text field보다 Picker, Table을 사용을 권장한다. 

3. 가능하면 시스템에서 정보를 가져와라.

4. 가능한 한 가장 많은 사용자가 선택할 기본값으로 미리 채워두면 결정하는 시간이 짧아져서 프로세스를 더 빨리 할 수 있다.  

5. 가능한 한, 사용자가 입력 직후 값을 필수값 여부 등을 확인하여 바로 수정할 수 있게 해라. 

7. 값 목록을 쉽게 확인할 수 있게 해라. 특히 Table이나 Picker에서는 값을 선택하기 쉬워야한다.

8. 목적을 알 수 있게 Text field에 힌트를 보여줘라.( Placeholder 사용 권장 )

 

< Data Entry >

1. 인터페이스를 탭하든 키보드를 사용하든 정보를 입력하는 것은 사용자에게 지루한 경험이다. 앱에서 무엇인가를 하기 전에 입력할 것이 많아 처리가 늦어지면, 사람들은 실망하거나 금방 그만둘 것이다. ( 사용자는 인내심이 많지 않다. )

 

2. 가능하면 선택지를 줘라. Text field보다 Picker, Table을 사용을 권장한다. 

( 예를 들어, 설문조사를 할 때 주관식이면 생각을 많이 해야하기에 귀찮거나 짜증을 낼 수 있지만, 객관식이라면 덜 지루해 한다. )

Picker와 Table은 역할이 거의 동일하다. -> 언제 Picker이고, Table인지 어떻게 고를 수 있을까?

 

 • Picker

   - 예상 가능한 범주이고, 범주가 크지 않을 때 Picker를 사용한다.(제한적, 예측 가능)

   - Picker의 기본 양식보다 작게 Custom하거나 '확인'버튼을 넣으면 Rejcet사유가 될 수 있다.

   - Picker는 최소한의 크기를 유지해줘야 한다. 선택한 값의 위아래로 3개씩의 값을 통해 사용자는 다음 값이 무엇이고 얼마나 돌려야 되는지를 예측할 수 있다.

 

 •Table

   -표시할 수 있는 범위가 넓기 때문에, 연락처처럼 예상이 어렵고 범주가 넓을 때 사용한다.

< (좌)Picker방식  /  (우)Table방식 >

3. 가능하면 시스템에서 정보를 가져와라.

   - 캘린더나 연락처처럼 사용자의 승인 또는 자동으로 수집될 수 있는 정보를 사용자에게 제공하도록 강요하지 마라.

 

4. 합리적인 기본값을 제공해라.

   - 가능한 한 가장 많은 사용자가 선택할 기본값으로 미리 채워두면 결정하는 시간이 짧아져서 프로세스를 더 빨리 할 수 있다.  

 

5. 반드시 필수값을 수집한 뒤에 다음으로 넘어갈 수 있게 해라.

   -Next나 Continue버튼 입력 전에 필수 값이 입력되었는지 확인하고, 필수값을 처리하는 시각적 신호로써 버튼활성화를 사용해라. 

(버튼이 항상 활성화되어있고, 버튼을 누르면 ‘~~를 입력하셔야 합니다.’라는 알림이 나타나는 방식보다는 입력을 해야 버튼이 활성화가 되는 것이 더 좋은 방식이다.) 가능한 한, 사용자가 입력 직후 값을 필수값 여부 등을 확인하여 바로 수정할 수 있게 해라. 

 

6. 진행에 꼭 필요한 정보만 요청해라.

 

7. 값 목록을 쉽게 확인할 수 있게 해라. 특히 Table이나 Picker에서는 값을 선택하기 쉬워야한다.

   - 선택과 탐색을 용이하게 하기 위해 값 목록을 알파벳순이나 다른 논리적인 방식으로 정렬하는 것을 고려해라.

 

8. 목적을 알 수 있게 Text field에 힌트를 보여줘라.

   - Field 안에 다른 text가 없으면, 이메일이나 비밀번호처럼 Placeholeder를 넣어라. Placeholder text로 충분하면, Text field를 설명하기 위한 별도의 Label를 사용하지 마라.

   ex) Label(email:) Text Field (x) -> Reject사유는 안 되지만, 권장하지는 않음.

   ex) Text Field(placeholder) (o)

 

<애플 HIG공식문서 - Data Entry>

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

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