[UI·UX Challenge] TextFields와 Data Entry (이론편)

유쾌한 육회 스터디(UI·UX Challenge) - 대표 이미지

 

 

 

들어가며

우리는 개발을 하면서 다음과 같은 질문을 한 적이 있을까? - '이 부분은 이렇게 하는 것이 좋지 않을까요?' · '이건 이렇게 바꿔보는 건 어떨까요?' - 개발자는 단순히 코드만 잘 짜면 된다는 생각에서 벗어나 프로덕트에 대해 '주체적으로' 생각하고 만들어 나가는 역할이 되어야 한다. 디자이너 및 기획자들과 '주체적으로' 사용성에 대해 소통할 수 있는 힘을 기르는 것이 다음 스터디의 목표다.

- 유쾌한 육회 스터디(UI·UX Challenge) 소개글 중 일부 발췌 -

 

 

 

---

 

 

01. H.I.G에서 알아본 Text Fields

본 내용은  H.I.G - Controls - Text Fields 를 편역한 것입니다.

 

H.I.G에 나와있는 Text Fields 설명 이미지

 

 

개념

• 한 줄의 고정적인 높이를 가진 필드 (둥근 모서리는 선택 요소)
• 사용자가 필드를 탭할 때 키보드가 자동적으로 나타남
• 이메일 주소와 같이 적은 양의 정보를 요청할 때 사용하는 것이 적절함

5가지 포인트

1. 목적 전달에 도움이 될 수 있도록 텍스트 필드 안에 힌트 표시하기
2. 텍스트 필드의 오른쪽 끝에 지우기 버튼❎ 표시하기
3. 적절하게 보안 텍스트 필드(Secure TextField) 사용하기 (optional)
4. 이미지와 버튼을 사용하여 텍스트 필드에 명확성과 기능 제공하기 (optional)
5. 적절한 키보드 유형 표시하기

 

---

 

 

02. H.I.G에서 알아본 Data Entry

본 내용은  H.I.G - User Interaction - Text Fields 를 편역한 것입니다.

 

H.I.G에 나와있는 Data Entry 설명 이미지

 

8가지 포인트

1. 가능하다면 선택 요소 제공하기 (예. Picker와 같은 Control을 이용)
2. 가능할 때마다 시스템에서 정보를 얻기 (유저에게 계속적으로 추가 요청하지 말 것)
3. 추론이 가능한 기본 값(Default value) 제공하기 (가능성이 높은 값으로 필드를 미리 채울 것)
4. 필요한 값을 수집한 후에 버튼(Advanced)을 활성화 하기 (모든 필수 필드에 값이 있는지 확인하고 신호를 제공할 것)
5. 필드 값 동적으로 검증하기 (입력 직후에 필드 값을 확인해서 사용자가 즉시 수정할 수 있도록 할 것)
6. 필요한 경우에만 필드 값 요구하기 (정말 필요한 정보에만 필수 필드를 사용할 것)
7. 값 목록을 통해 쉽게 탐색할 수 있도록 하기 (테이블 또는 피커는 값을 선택하기 용이해야 함, 정렬 또는 빠른 검색 제공)
8. 목적 전달에 도움이 될 수 있도록 텍스트 필드 안에 힌트 표시하기

 

---

 

 

03. 중간 정리

사용자가 앱을 편하게 사용할 수 있게, 더 나아가 데이터 입력을 쉽게 할 수 있도록 하려면 적절한 형태의 입력 폼을 사용해야 한다.

 

 

---

 

04. 디자인 관점에서 바라본 텍스트 필드

텍스트 필드에 대해 알아보던 중 좋은 글을 발견했다. 두 글 모두 읽어보면 좋을 것 같다.

(저작권 때문에 이미지를 첨부할 수 없어서 아쉽다.. 꼭 읽어보시길..)

 

모바일 UI 디자인 기본 요소 - 텍스트 필드

 

텍스트 필드 & 폼 디자인

 

 

---

 

 

05. 사례 소개

사례 01. 배달의 민족

배달의 민족 [주소지 - 상세 주소 입력] 뷰

 

괜찮은 점

 

⭐️ 한 번 더 사용자에게 디테일하게 힌트를 제공하면서, 정보를 쉽게 작성할 수 있도록 유도하고 있다.

• 포커스 시 default placeholder가 테두리로 애니메이션 되는 부분이 인상 깊다.
• 또 다른 detail placeholder가 나오는 것이 인상 깊다.

 

⭐️ 사용자가 현재 어느 필드에 위치해 있는지 명확하게 정보를 제공하고 있다.

• 포커스 되었을 때 테두리 색이 변경된다.

 

⭐️ 상세 주소를 입력하는 경우에는 일반적으로 텍스트 필드를 사용해서 입력받는 정보보다 내용이 많다.

• 텍스트 입력 시에 clear 버튼이 제공하고 있다.
• 크기가 일반 clear 버튼보다 크다. (누르기 편하다.)

 

⭐️ 현 예시에서는 글자 수가 크게 영향을 주진 않지만..

• 글자 수는 제한이 있는데 넉넉한 글자 수로 설정되어 있음

 

---

 

 

사례 02. 앱 스토어

앱스토어 - 암호 입력 뷰

 

괜찮은 점

• placeholder가 제공되고 있다.
• 암호 입력하고 로그인 시도했을 때 로딩 인디케이터가 우측에 표시되고 있다.
• 암호 입력이 실패했을 때 실패 메시지 대신, 좌우로 흔들리는 애니메이션으로 실패를 표시하고 있다.
• 스크린 녹화할 때 비밀번호 입력 부가 보이지 않았다. (너무 당연한건가..^^)

아쉬운 점

• clear 버튼이 제공되지 않고 있다.

 

---

 

사례 03. 29cm

29cm - 배송지 신규 입력 뷰

 

아쉬운 점 및 개선 점

• 텍스트 필드가 일단 휴대전화 양식에 맞게 필드가 3개이다.
  • 이런 부분도 필드를 3번이나 옮겨가면서 입력을 해야 해 피로도가 높아진다.
  • 이런식으로 만들거면 자릿수에 맞춰서 입력했을 때 다음 필드로 넘어가게 하면 좋을 것 같다.
  • 만약 하나의 필드로 가져갈거면 전화번호를 입력했을 때 자동적으로 대쉬가 구분되도록 하면 좋을 것 같다.

 

---

 

06. 사례 구현 예시

배달의 민족에서 사용하는 텍스트 필드를 커스텀해서 구현해보았다.

 

배달의 민족 텍스트 필드 구현 예시

 

 

Placeholders로 레이블을 대체하지 말라.

위에서 언급했던 블로그에 있던 내용 중 인상 깊었던 내용 일부를 가져왔다.

• placeholder 텍스트가 사라지게 되면, 사용자는 단기 기억을 하고 있어야 한다.
• 예를 들어, 사용자가 모든 필드에 입력을 마치고 제출하려고 한다.
• 만약 레이블이 없고, 입력 폼 자체가 너무 많다면 모든 정보를 맞게 기입했는지 확인하기가 어렵다.
• 다음과 같은 문제는 floating labels 형태로써 해결할 수 있다.

 

자리 표시자 텍스트가 충분한 경우 텍스트 필드를 설명하기 위해 별도의 레이블을 사용하지 마십시오.

 

H.I.G에는 아래와 같은 문구가 적혀있다. 처음에는 굳이 레이블을 더 만드는 것은 낭비라고 보았다.

하지만 위 글을 읽고 생각해보니

1. 입력 폼이 너무 많고 최종 제출 전 한 번 더 점검하고 싶은 경우
2. 앱을 나갔다 들어와서 다시 입력을 이어나가는 경우
3. ...

등등의 예시를 생각해보면, 레이블이 제공되는 것이 더 나아보인다고 생각이 들었다.

 

배달의 민족에서 사용하는 텍스트 필드, 그리고 생각

• 해당 텍스트 필드에서도 floating labels 형태로써 레이블을 대체하고 있고,
• 좋았다고 생각하는 부분은 레이블이 올라가고 난 다음 디테일한 placeholder가 또 한 번 제시되고 있었다는 점이다.
• 예를 들어 상세 주소라고 한다면 어떤 형태로 주소를 입력해야 하는지 설명해줌으로써 사용자가 해당 뷰에서 너무 많은 시간을 소비하지 않도록 돕는다.
• 사실 floating text field는 이미 많이 보이는 형태다. 레이블이 텍스트 필드 위로 올라가는 것도 많이 있는데 이 예시가 좋았던 것은 테두리에 레이블이 걸치면서 하나의 필드라는 부분을 보여주는 것 같아 필드 구분이 편하다고 생각했다.
• 또한, 부드러운 애니메이션이 상당히 인상 깊었다. 적절한 애니메이션은 앱을 사용하고 싶게 만든다.
• 사례를 조사하다보니, clear button이 없는 앱들이 정말 많았는데 이런 부분은 수정이 필요하다고 느꼈다. 사용자 입장에서 글자를 하나씩 지우는 것은 특히 힘들다.

 

---

 

07. 마무리하며

이번편에서는 텍스트 필드와 데이터 엔트리에 대한 사례 조사와 많은 고민을 해보았다. 단순히 개발만 하는 것이 아니라 더 나아가 사용성에 대한 고민을 해볼 수 있는 유의미한 시간이었다. 다음편에서는 커스텀 텍스트 필드 구현 후기에 대해서 공유하도록 하겠다. 구현하느라 꽤나 힘들었는데 막상 구현을 하고 나니 뿌듯했다.

 

앞으로도 UI·UX에 대해서 더 고민하는 개발자가 되도록 하겠다. 🙌