입력 폼(Form)에서 유의해야할 UI/UX 디자인 요소

 

프론트엔드에서 입력 폼(Form)을 넣을 때 고민해보면 좋을 UI/UX 디자인 요소를 간단히 정리해보자. 

 

올바른 입력을 유도하려면

레이아웃을 잘 짜자

우선 사용자에게 몇 가지 데이터나 입력받는지, 그 데이터의 형식이 무엇인지 고려한다. 그리고 각 입력 데이터의 예상 너비까지 종합적으로 고려해서 레이아웃을 결정하도록 한다.

tab키로 이동했을 때 흐름이 일관적이어야만 사용자가 더 쉽게 폼을 완성할 수 있다는 점에 유의한다. 왼쪽 위부터 입력 칸을 채우는 사용자에게 2 x 3 과 같은 레이아웃은 혼란을 줄 것이다. 따라서 입력받을 데이터가 여러 개라면, 입력필드를 한 줄로 정렬해야 한다. 정렬은 세로로 한 줄이 되도록 하는 것이 일반적이지만, 상황에 따라 가로로 정렬하기도 한다. 로또 당첨번호와 같이 항상 최대 두 자리 숫자를 입력받는다면, 가로로 정렬하는 방법이 더 적절할 수 있다. 이때 각 입력필드의 너비와 입력필드 간의 너비 또한 일정해야 한다. 성격이 다른 입력 요소(당첨번호 ↔️ 보너스번호)가 있다면 간격을 조정해서 그룹핑되어있음을 표현할 수 있다.

로또미션 당첨번호 입력폼

<input>의 속성을 활용하자

<input>은 매우 다양한 속성(attribute)를 지원한다. 입력받으려는 데이터에 따라 알맞은 속성을 지정하면, 사용자가 오류 없이 한 번에 정보를 입력할 수 있도록 유도할 수 있다. 예를 들어 type="number"속성은 필드에서 숫자만 입력받을 수 있다. min, max, step와 함께 사용해서 최솟값, 최댓값, 숫자 간격 등을 더 디테일하게 제한할 수도 있다. required 속성을 넣으면, 해당 input을 입력하지 않고 제출하려고 할 때 경고 메시지가 떠서 사용자가 필수 정보 입력을 누락하지 않도록 유도할 수 있다. 필수로 작성해야하는 모든 입력필드를 입력하기 전까지는 제출버튼을 비활성화하는 것도 좋은 방법이다.

<input type="number" min="1" max="45" required /> 

힌트를 주자

사용자가 어떤 데이터를 입력해야 하는지 쉽게 파악할 수 있도록 label과 placeholder를 적극 활용하자. 단, 적절한 label 없이 placeholder만 사용하는 방법은 접근성 측면에서 지양하는 것이 좋다.

<label for="nickname">
	Your woowacourse <abbr title="Identification">Nickname</abbr>
</label>
<input 
    type="text"
    id="nickname" 
    aria-describedby="nickname-hint"
    placeholder="우아한테크코스 닉네임을 입력해주세요"
/>

자동포커스를 해주자

자동포커스(autofocus)는 사용자가 입력 필드를 작성하도록 행동을 유도(Call to Action)하는 쉬운 방법이다. 주의할 점은 자동포커스로 인해 포커스가 이동할 때 화면이 불연속적으로 이동한다면 (예를 들어 스크롤이 갑자기 많이 내려가는 경우) 보조기술을 이용하여 웹페이지에 접근한 사용자은 당황할 수 있다. 입력이 주목적인 페이지가 아닐 경우 이런 상황을 특히 조심해야 한다. 자동포커스를 주었을 때 이러한 부작용이 없다면, 자동포커스를 적극 사용하자.

 

 

입력 오류를 알리려면

Alert은 멀리멀리 치우자

사소한 오류로 경고창(Alert)이 띄우는 것은 사용자 경험을 떨어뜨리는 행위이다. 경고창은 모달(modal)이다. 즉, 경고창이 뜨면 경고창을 제외한 다른 영역이 비활성화되고, 경고창을 사용자가 처리하기 전까지 아무것도 할 수 없다. 이렇게 사용자의 자유도를 떨어뜨리는 데다가 불필요한 클릭 행위까지 요구하니 사용자 경험에 부정적인 영향을 끼치는 것이다.

애플의 Human Interface Guideline에서도 경고창 사용을 최소화할 것을 권장하고 있다. 치명적인 데이터의 손실 가능성과 같이 너무너무 중요한 정보나 선택이 아니고서야, 경고창으로 사용자에게 일반적인 정보를 전달하지 않는 것이 좋다. 회원가입 시 8글자 이상, 특수문자 포함과 같은 비밀번호 조건을 지키지 않았을 때마다 경고창이 뜬다면 사용자는 반복되는 경고창에 피로감을 느껴 회원가입을 포기하고 떠나버릴 수도 있다. 오류가 재차 발생할 수 있는 경우라면 더더욱 조심해야 한다. 

실시간으로 알려주자

컴파일 에러를 발생시켜서 런타임 오류를 줄여주듯, 사용자가 제출을 시도하기 전에 오류 발생 여부를 '미리미리 바로바로' 알려주자. 입력 필드를 모두 작성하고 나서야 오류가 존재함을 알게 된다면 사용자는 입력 폼을 완성하기 위해 필드 전체를 다시 검토하고 채워야 한다. 똑같은 작업을 여러 번 반복해서 사용자의 피로도가 올라가는 상황을 방지하기 위해, 지금 사용자가 입력하고 있는 정보가 유효한(valid) 정보인지 사용자에게 즉각적으로 피드백을 주자.

오류 안내 메세지의 구성은

오류 안내 메세지는 (1) 상황에 대한 명확한 설명, (2) 사용자가 어떻게 해결할 수 있는지 대안 제시, 이 두 가지를 모두 포함해야 한다. 사용자가 이 에러 상황에 왜 관심을 가져야 하고 어떻게 해야 하는지 충분히 설명해야 한다. 

예를 들어, 비밀번호 작성 후 "오류가 발생했습니다." 와 같이 어떤 오류인지 알 수 없고 어떻게 해야 하는지도 안내되지 않는 오류 안내 메세지는 좋은 예가 아니다. 이렇게 무성의한 메세지를 던져주는 것은 메세지를 읽는 사용자의 시간을 무의미하게 보내도록 할 뿐이다. "특수문자가 포함되지 않았습니다. '!#$&&@?' 중 하나를 반드시 포함해주세요"와 같이 작성하는 것이 더 좋다. 단, 설명을 너무 열심히 하느라 장황해지지는 않았는지 다시 한번 점검해보자.

 

 

 

참고자료

Design Better Forms

Don’t Use The Placeholder Attribute

모바일 UI·UX 디자인 시 고려해야 할 가이드라인 1-5

Human Interface Guidlines (Color)

Human Interface Guidelines (Text Fields)

Human Interface Guidelines (Alerts)