[UX/UI디자인] 폼 박스(가입, 로그인 양식 등) 디자인시 유의할점 8가지

 

폼박스는 UI디자인 중에 가장 빈번하게 쓰이는 양식중 하나입니다.

폼박스가 갖춰야할 기본적인 사항들을 파악하면 다른 UI디자인 부문에도 적용이 가능하니 꼭 알고 가는것이 좋습니다.

 

 

1. 인풋필드 제작의 기본사항

인풋필드는 모든 UI폼에서 쓰입니다. 좋은 인풋필드를 제작하기 위한 기본 팁을 알아 봅시다.

 

① 필드의 이름은 위에 적습니다.

 

② 대문자로 필드이름을 적지 않습니다.(가독성이 떨어짐)

 

③ 기입양식을 미리 보여줍니다.

 

④ 기입할 숫자의 개수를 미리 알려줍니다.

 

⑤ 내용의 길이에 따라서 박스 크기를 조정합니다.

 

 

 

2. 인풋필드 더 좋게 만들기

많은 사용자가 불편한 폼양식 때문에 사이트를 이탈 하곤 합니다. 이탈을 막기위한 더 좋은 팁을 알아 봅시다.

 

① 팁 아이콘을 덧붙이자.(유저가 입력을 어려워 할거 라고 예상되는 폼에 도움을 주기 위해)

 

② 선택된 필드는 선택되었다는 것을 알아보기 쉽게 컬러로 하이라이트를 주자.

 

③ 잘못 입력한 란은 눈에 띄게 알려주고 그 이유를 짧게 설명하자.

 

④ 필드에 입력완료 표시를 해주자.(중요한 정보가 이미 다 입력 되었을 때)

 

 

3. 폼박스는 한 열(column)로 만듭니다.

 

유저의 눈은 위에서 아래로 주욱 읽는게 자연 스럽기 때문에 폼 박스는 한줄로 만드는것이 더 효과 적입니다.

양식의 개수가 적을 수록 더욱 그렇고, 양식이 많다면 그룹핑 시키는 것이 좋습니다.

두열 이상의 폼박스는 유저의 시각을 분산 시킵니다.

 

 

4. 드롭다운 메뉴는 지양합니다.

 

 

드롭다운메뉴는 클릭하기전에 어떤 선택이 있는지 알수 없습니다.

또한 클릭을 하게 되면 그 아래의 내용을 가리기 쉽습니다.

선택할 것의 개수가 적다면 드롭다운 메뉴 대신, 개방형으로 하는것이 좋습니다

 

 

5. 가능하면 텍스트를 입력하지 않게 합니다.

 

키보드로 텍스트를 직접 입력하는 것보다, 손가락으로 스와이프하는것이 더 쉽고 빠릅니다.

 

 

6. 필드 수를 가능한 줄입니다.

 

입력할것이 많으면 유저가 부담을 느끼고 이탈할 확률이 높아 집니다.

가능한 필요한 정보만 입력을 요구 하고, 여러 필드를 하나로 합치는게 가능하면 그렇게 할것을 권장합니다.

 

 

7. 프라이머리 액션과 세컨더리 액션을 구분지어야 합니다.

 

에러율을 줄이고 유저의 혼동을 막기 위해 프라이머리와 세컨더리 액션을 구분짓고, 가장 중요한 프라이머리 버튼을 강조 합니다.

 

 

8. 연관된 내용끼리 그룹핑합니다.

 

여백의 길이를 다르게 하여 폼이름과 폼을 하나의 그룹으로 보이게 합니다.

또한 연관된 내용끼리 그룹을 지어 네이밍하면, 유저가 내용을 더 쉽게 파악 할수 있습니다.

 

 

출처 - https://www.instagram.com/p/ByQBBWdAUNS/?utm_source=ig_web_copy_link