모바일 시대와 과거의 다른점은 양방향 소통이 가능하다는 것입니다. 주요 매체가 TV였던 과거에서는 일방적으로 정보를 제공 받았습니다. 일방적으로 정보를 제공받지 않고 사용자의 입력을 통해 매체와 상호작용을 합니다.
인풋은 정보를 다양한 정보를 입력한다는 점에서 양방향 인터랙션에서 기본적이지만 가장 중요한 액션입니다. 특히, 키보드를 이용한 텍스트 인풋은 많은 양의 정보를 시스템에 입력할 수 있어 중요도가 높으면서도 많은 액션을 요구하여 정교한 사용자 경험 설계가 요구됩니다. 인풋과 같이 인터랙션이 많은 컴포넌트를 설계할 때는 사려 깊게 다양한 케이스를 고려해야합니다.
🔑 Takaways
더 나은 텍스트 인풋을 디자인 하기 위해서는 아래 내용을 고려해야합니다.
[높은 접근성]
- 명암비는 AA 이상을 충족해야합니다
- Bold 텍스트는 14pt / Regular 텍스트는 18pt 이상이 되어야합니다
[입력에 대한 명확한 설명]
- 레이블, 가이드 문구를 통해 사용자가 입력해야하는 것을 명확하게 설명해야합니다
- 동사(Action Word)를 사용합니다 e.g. 작성해주세요, 골라주세요
[인터랙티브 해보이는 인풋 영역]
- 본문 텍스트와 다른 컬러를 사용하여 인터랙티브함을 보여줄 수 있습니다
- 영역에 하단 라인을 추가 또는 Border 추가를 고려합니다
대표적인 인풋 스타일 비교
Material 스타일의 경우, 레이블 정보를 계속 노출할 수 있다는 점에서 iOS보다 좋은 사용성을 제공할 수 있지만, 전반적인 레이아웃이 복잡해질 수 있는 단점을 가지고 있습니다. 반면에, iOS 스타일은 더 심플한 레이아웃을 구성할 수 있지만 Placeholder로 레이블을 대신하여 사용하기 때문에 사용성이 떨어질 수 있습니다.
[Material design type]
(+) 레이블을 항상 보여줄 수 있음
(-) 세로 공간을 더 많이 차지함
(-) 긴 인풋에서 복잡하게 보여질 수 있음
[Apple iOS Type]
(+) 세로 공간을 적게 차지함
(+) 더 심플한 레이아웃을 구성할 수 있음
(-) On focus 상태에서 레이블이 사라짐