Best vs Worst 『form 디자인』

폼 디자인에서 빠뜨리지 말아야 할 사항들을 체크해보자.

 

---

『가시성』

label명

 

의외로 많은 폼에서 label 타이틀이 빠진 경우가 많다.

 

귀찮은 것을 싫어하는 개발자들의 특성상,

placeholder기능으로 label 타이틀을 대체하는 경우가 많다.

 

 

결론적으로 'placeholder'기능은 메모리에 부담을 준다.

또한 placeholder는 사용자가 입력하지 않고 넘어가버리게 만들 수 있다.

 

최악의 경우는 label타이틀, placeholder모두 생략할 때다.

label에 관한 정보가 없다면, 유저는 미완성 사이트라고 생각한다.

 

 

 

 

---

『간결성』

간결함은 신뢰, 전문성을 내포한다.

 

 

반면, 위와 같이 너무 긴 label 타이틀과 같은 경우,

뭔가 장황한 느낌과 동시에 신뢰감을 떨어뜨릴 수 있다.

 

또한 아래처럼 사용자가 입력하는 형식과

폼의 길이가 맞지 않을 때 역시 문제가 발생한다.

 

폼 입력 텍스트 길이와 폼의 길이가 매칭되지 않는 경우

 

입력 필드를 제작할 때는

사용자 입장에서 다시 한번 생각해보는 습관이 필요하다.

 

 

 

 

---

『보편성 』

아래와 같이, 입력 폼에 창의성을 부여하려는 시도를 하는 경우를 볼 수 있다.

 

 

결론적으로 폼 입력에 있어 '창의성'은 사용자의 혼란을 가중시킨다.

 

입력 폼은 수백~수십만명이 이용하는 공공장소와 같은 개념이다.

따라서 창의적인 디자인 혹은 양식보다는 모두가 쉽고 빠르게 이해할 수 있도록

보수적으로 접근해야하며, 보편적인 디자인이 필요하다.

 

 

 

 

---

『모바일 친화적 』

 최근 모바일에서 폼에 접근하는 경향이 높아졌다.

웹 사용자들만을 타겟으로 하는 경우에도 항상 모바일을 염두에 둘 필요가 있다.

 

 

Label 입력폼을 pc에 맞춰, 가로로 정렬하기보다 '세로 정렬'을 사용하자. 

 

 

 

 

---

『그룹핑 』

폼 작성에 시간을 낭비하고 싶은 사용자는 거의 없을 것이다.

 

 

폼 입력을 카테고리별로 그룹화 한다면

사용자의 이해도와 효율성이 높아진다.

 

위와 같이 우편번호, 도시, 주와 같은 입력필드를 일률적으로 나열하기보다는

그룹으로 분류하는 것이 훨씬 이해하기 좋다.

 

 

폼 입력란은 논리적으로 연결될 수 있을수록 사용자에게 좋다.

논리적으로 연결되는 주제는 그룹을 만들자.

 

가령, 위의 오른쪽 사진처럼 라디오 버튼을 그룹핑없이 쭉 나열할 경우,

마치 미완성 폼으로 여겨질 수도 있다.

 

나쁜 그룹핑 & 좋은 그룹핑

 

 

 

 

---

『개인화 』

아래와 같이, '제출'이라고 적혀있는 버튼을 어느 곳에나 넣는 경우가 많은데,

이는 디자인 정체성이 없는 듯한 인상과 함께 베타테스트 버전과 같은 느낌을 준다.

 

 

공식 서비스를 시작했다면,

사용자의 의도에 맞는 정확한 내용을 버튼에 기록하자.

 

 

 

 

---

『과장 』

대문자를 남발하면 사용자에게 부담감을 준다. 

 

 

특히, 회원가입에서 대문자와 bold가 남발되면,

뭔가 꽉 막힌듯한 사이트 분위기를 만들기 때문에 대문자 + bold를 남발하지 않는 편이 좋다.

 

 

 

 

---

『반응형 』

예전과 달리 양방향 바인딩을 손쉽게 사용할 수 있는 프레임워크가 늘어난 만큼,

오류코드를 바인딩으로 친절하게 표시하는 편이 고객 친화적이다. 

 

 

이유를 알 수 없는 상태에서,

에러만 뜨게되면 사용자의 짜증을 유발할 수 있다.

 

 

 

 

---

『주목성 』

아래 이미지의 왼쪽을 살펴보자.

'Create Team' , 'Cancel'의 버튼크기가 같아서 

취소의 무게감이 팀생성과 비슷한 느낌이다.

 

 

반면, 오른쪽 폼에서는 '취소'라는 버튼이 없는 대신 'x' 표시가 우측상단에 작게 표시되어 있다.

이를 통해, 사용자가 주목해야 할 버튼이 'Create Team'인지 'Cancel'인지 분명하게 알 수 있다.

 

폼에서 가장 중요한 행동과 관련된 버튼은 가장 크게 보이도록 하는 편이 좋다.

 

 

 

 

---

『투명성 』

폼 제작의 핵심은 '사용자 친화성'에 있으며,

이를 가장 잘 반영한 방식은 아래와 같이 'process'를 상단에 기입하는 방식이 아닐까한다. 

 

 

특히, 공적인 문서(회계, 입사지원, 사업관련 등...)를 진행하는 경우라면,

상단에 프로세스를 알려주는 편이 좋다. 

 

 

 

 

---

『단일성 』

부트스트랩과 같은 프레임워크로 떡칠하다보면

아래와 같이(좌측) 모달이 겹쳐서 표시되는 황당한 경우가 발생할 수도 있다.

 

 

만일 모달이 여러개로 겹쳐질 정도가 된다면,

폼 내의 input계열 태그를 사용하여 모달을 줄여주자. 

 

폼이 중첩되면, 사용자의 가독성이 심각하게 훼손된다.

 

 

 

 

---

『결론 』

폼 제작에 있어, 결론은 '사용자 친화성'이다.

 

어떠한 경우에도 사용자 중심에서 벗어난다면,

해당 폼은 좋은 평가를 받을 수 없다.