[UI/UX 원칙 #9] 폼(Forms) 디자인 14가지 UX 원칙 가이드라인

폼(Forms) 디자인 14가지 원칙

앤드류의 [폼(Forms) 디자인 14가지 UX 원칙 가이드라인] 소개하고자 합니다.

회원가입 흐름, 멀티뷰 스테퍼, 또는 단순한 데이터 입력 인터페이스 등에서 폼(forms)은 디지털 제품 디자인의 핵심 요소 중 하나로 여겨집니다.

이 글에서는 폼 디자인 시 반드시 지켜야 할 사항과 피해야 할 사항을 중심으로 설명합니다. 이러한 지침은 일반적인 가이드라인이므로 예외가 있을 수 있음을 기억해야 합니다.

1) 폼은 한 열로 만들어야 합니다

여러 열을 사용하면 세로로 읽던 사용자에게 혼란을 줄 수 있습니다.

여러 열을 사용하면 정보의 흐름이 복잡해져 사용자가 각 열의 내용을 쉽게 이해하기 어려워질 수 있습니다. 특히 세로로 읽는 사용자에게는 시각적 혼란을 초래할 수 있으며, 필요한 정보를 찾는 데 더 많은 시간이 소요될 수 있습니다. 이는 사용자 경험을 저해하는 요소가 될 수 있습니다.

2)  폼 레이블은 상단에 정렬합니다

사용자는 레이블이 왼쪽에 정렬된 폼보다 상단에 정렬된 폼을 훨씬 더 선호하는 경향이 있습니다. 또한, 레이블이 상단에 정렬된 폼은 모바일 환경에서도 더 효과적으로 작동합니다. 그러나 다양한 옵션과 많은 데이터를 입력해야 하는 경우에는 왼쪽 정렬된 레이블을 고려하는 것이 좋습니다. 이러한 경우에는 왼쪽 정렬된 레이블이 상단 정렬보다 훑어보기가 더 용이하며, 필요한 길이를 줄이는 데 유리하기 때문입니다.

3) 입력란과 레이블을 함께 묶습니다

레이블과 입력란을 가까이 배치하면 사용자가 각 입력란의 용도를 쉽게 이해할 수 있습니다. 특히, 입력란 사이에 적절한 간격을 두는 것은 시각적 혼란을 줄이고, 사용자가 정보를 빠르게 인식하는 데 도움을 줍니다.

4) 모든 내용을 대문자로 표기하지 않습니다

레이블을 전부 대문자로 작성하면 읽거나 훑어보기가 어렵습니다.

레이블을 전부 대문자로 작성하면 글자의 형태가 단조로워져 시각적으로 구분하기 어려워집니다. 이로 인해 사용자가 정보를 빠르게 인식하거나 이해하는 데 방해가 될 수 있습니다. 대문자는 일반적으로 시각적 강조를 위해 사용되지만, 과도하게 사용하면 오히려 가독성이 떨어지는 결과를 초래할 수 있습니다.

5) 옵션 개수가 6개 이하일 경우, 모든 옵션을 표시합니다

드롭다운으로 옵션을 표시하면 사용자가 두 번 클릭해야 하므로, 선택 과정이 불편해질 수 있습니다. 또한, 옵션이 숨겨져 있어 사용자가 원하는 항목을 찾기 어려울 수 있습니다.

따라서 옵션이 5개를 초과할 경우 드롭다운을 사용하여 공간을 절약하고, 25개를 넘을 때는 검색 기능을 추가함으로써 사용자가 더 효율적으로 원하는 옵션을 찾을 수 있도록 돕는 것이 중요합니다.

6) 플레이스홀더 텍스트를 레이블로 사용해서는 안 됩니다

플레이스홀더 텍스트를 레이블로 사용하면 사용자가 입력 필드의 목적을 명확히 이해하기 어려워질 수 있습니다. 입력 필드가 비어 있을 때는 플레이스홀더가 보이지만, 사용자가 내용을 입력하면 사라지므로 사용자가 어떤 정보를 입력해야 하는지 혼란스러울 수 있습니다. 

7) 체크박스와 라디오 버튼은 스캔 가능성을 높이기 위해 세로로 배치합니다

체크박스를 세로로 배치하면 사용자가 시각적으로 항목을 빠르게 비교하고 선택할 수 있게 도와줍니다. 세로 배열은 눈의 이동이 수직으로 이루어져 훑어보기가 더 쉽고, 각 항목 간의 간격이 넓어져 선택할 때의 혼란을 최소화합니다. 따라서 사용자가 원하는 옵션을 빠르게 찾고 선택하는 데 유리합니다.

8) 행동을 유도하는 버튼에는 해당 행동을 명확히 나타내는 레이블을 사용해야 합니다

행동 유도 버튼이 그 목적을 명확하게 전달해야 하는 이유는 사용자가 버튼의 기능을 쉽게 이해하고 올바른 행동을 취할 수 있도록 하기 위해서 입니다. 명확한 레이블은 사용자가 혼란 없이 클릭할 수 있게 도와주며, 사용자 경험을 개선하고 실수를 줄이는 데 도움이 뒵니다. 또한, 사용자에게 신뢰감을 주고 인터페이스의 효율성을 높이는 데 중요한 역할을 합니다

9) 오류가 발생한 부분은 인라인으로 표시해야 합니다

사용자에게 오류가 발생한 위치를 보여주고 그 원인을 설명해야 하는 이유는, 사용자가 문제를 이해하고 해결할 수 있도록 돕기 위해서입니다. 명확한 피드백은 사용자 경험을 개선하고, 사용자가 실수를 수정하는 데 필요한 정보를 제공하여 전체적인 효율성을 높입니다. 또한, 이러한 접근은 사용자에게 신뢰감을 주고, 서비스에 대한 긍정적인 인식을 형성하는 데 도움이 됩니다.

10) 사용자가 입력란을 모두 채운 후에, 입력 내용의 유효성을 확인하기 위해 인라인 검사를 진행합니다

사용자가 입력하는 동안 유효성을 확인하는 인라인 검사를 사용하지 말아야 하는 이유는, 실시간으로 오류 메시지를 보여주면 사용자가 불필요한 스트레스를 느끼고 입력에 집중하기 어려워질 수 있기 때문입니다. 특히 비밀번호, 사용자 이름, 메시지와 같이 입력이 완료되기 전에는 사용자가 의도한 내용을 완전히 입력하지 않았기 때문에, 중간에 오류를 지적하는 것은 오히려 혼란을 초래할 수 있습니다. 따라서 입력이 완료된 후에 유효성 검사를 진행하는 것이 더 효과적입니다.

11) 기본적인 도움말은 숨기지 않아야 합니다

기본적인 도움말을 노출해야 하는 이유는 사용자가 입력할 때 필요한 정보를 즉시 제공함으로써 입력의 정확성을 높이고, 사용자의 혼란을 줄일 수 있기 때문입니다. 도움말이 입력 중에 나타나면 사용자가 올바른 형식이나 내용을 이해하는 데 도움을 주어, 실수를 예방하고 전반적인 사용자 경험을 개선하는 데 도움이 됩니다.

12) 주요 액션과 부가적인 액션을 구분합니다

주요 액션과 부가적인 액션을 구분하는 이유는 사용자가 중요한 작업에 집중할 수 있도록 돕기 위해서입니다. 주요 액션은 사용자가 수행해야 할 핵심 작업을 나타내며, 부가적인 액션은 선택 사항이나 보조적인 기능을 나타냅니다. 이러한 구분은 인터페이스를 명확하게 하고, 사용자가 어떤 작업을 우선적으로 수행해야 하는지를 쉽게 이해할 수 있도록 합니다. 

13) 입력란의 길이를 사용하여 입력 내용을 유도합니다

입력란의 길이가 입력해야 할 답변의 길이를 암시하는 이유는 사용자가 필요한 정보를 보다 쉽게 입력할 수 있도록 돕기 위해서입니다. 특히 전화번호나 우편번호와 같은 정해진 형식이 있는 경우, 입력란의 길이를 통해 사용자는 예상되는 글자 수를 인지하고 올바른 형식으로 입력하려는 경향이 생깁니다.

14) 관련된 정보를 그룹화합니다

사용자가 정보를 묶음으로 인식할 수 있는 이유는 인간의 인지 과정에서 관련된 정보들을 함께 처리하는 것이 더 효율적이기 때문입니다. 지나치게 긴 폼은 사용자가 필요한 정보를 찾는 데 어려움을 겪게 하고, 결과적으로 혼란을 초래할 수 있습니다. 따라서 논리적인 그룹을 만들어 정보를 체계적으로 배열하면 사용자가 폼을 더 쉽게 이해하고, 입력 과정을 원활하게 진행할 수 있도록 도와줍니다.