8.모바일 인풋필드 디자인 체크리스트
[1] 인풋컨트롤
당신이 웹페이지, 웹기반 앱 또는 네이티브 모바일 앱을 디자인하게 될때 기본적인 요소 중 하나가 텍스트 인풋필드 일 것이다. 이 인풋필드 박스는 사용자가 텍스트를 입력 할 수 있는 곳이다.
이 아티클에서 우리는 인풋필드의 핵심에 집중 할것이다. 각각의 이슈는 별것 아닌 것으로 보일 수도 잇지만 우리가 반복적으로 사용성 가이드라인에 적합하지 않게 적용된 것들을 알 수 있으며 특히 모바일 UI에서는 작은 번거로움이 점점 쌓여 산더미 처럼 될때 사용자는 하고자 하는 테스크를 완료하는데 오래거리거나 하지 못하는 경우들을 야기한다.
아래는 14개 가이드라인이다.
<진짜 있어야하는가>
1.이 필드는 진짜 필요한가?
<설명>
2.라벨은 위에 있는가? (안에 있거나 밑에 두지 말자)
3.이 필드는 필수입력필드인가? 선택입력필드인가?
4.필드안에 플레이스홀더를 삭제한 적이 있는가? (플레이스 홀더를 삭제하지 말자)
<가시성>
5.이 필드는 입력될 수 있는 최대길이 텍스트값을 입력 후 보기에 충분한 크기인가?
6.이 필드는 키보드가 화면에 나타났을때 키보드와 필드영역 둘다 잘 보이는가?
<사용자가 입력시>
7.이 필드의 좋은 기본값을 당신은 가지고 있는가?
- 기본값으로 사용 가능한 기록이 있는가?
- 자주 사용되는 값은?
8.당신은 인풋값을 채우기 위해 모바일폰의 기능(카메라, 위치, 음성, 연락처)들을 사용 할수 있는가?
9.검증해야하는 정보를 입력한다면 검증정보에 기반하여 연관 정보를 산출 할 수 있는가? (예 지역기반 우편번호-번호입력 후 지역이름 산출, 쿠폰 번호 입력시 - 유효성 검증)
<타이핑>
10.당신은 복사 붙여넣기가 해당 텍스트 필드 안에서 가능한가?
11.어떤 키보드가 해당 텍스트 필드에 적합한가? (예 숫자입력이면 숫자 키패드, 영문 입력이면 - 이메일주소 등 영문이 디폴트인 키보드 등)
12.당신은 첫글자를 타이핑 할때 키워드제안 또는 자동완성을 지원하는가? (이름, 주소 또는 이메일에 대해서는 자동교정기능을 지원하지 않는다. 서치바 또는 직업검색에서 '사' 자만 입력해도 '사무직' '변호사' 등이 추천되는 기능들이 있다)
13.당신이 만든 입력 필드에 오타 또는 약자입력을 허용할 것인가?
14.당신은 사용자들이 입력하고 싶은 아무 텍스트나 입력하도록 허용 할 것인가? (예 휴대전화번호 또는 신용카드 정보에는 숫자만 입력하면 '.' 닷 또는 '-'대쉬가 자동포맷으로 입력되도록 지원 할 수 있다)
당신의 디자인을 전체적으로 검도하고 체크리스트를 보며 모든 인풋 필드에 대해서 확인해보라. 이 체크리스트를 보면서 검토하는데 당신이 고통스러울 수 있지만 사용자에겐 편리함을 제공한다.
이상적으로 당신은 100% 체크리스트에 준수하여 인풋필드 디자인을 웹사이트 또는 앱에 적용할 수 있다. 다 준수하지 못한다면 불충분한 사용자 경험을 제공하게 된다.
프로그램적으로 당신은 100% 준수하기 위한 리소스가 없을 수 있다. 이런경우에는 중요도가 높은 입력필드로 가장 많이 사용되거나 가장 테스트를 완료하기 위해 필수적인 입력필드을 가이드라인에 맞춰본다.
*저는 전문 번역가가 아니기 때문에 정확한 정보는 아래 원문을 참고하세요*
https://www.nngroup.com/articles/mobile-input-checklist/
https://www.nngroup.com/articles/design-pattern-guidelines/#Input%20Controls
