[UX원칙#27] 모바일 폼 사용성 원칙 7가지

 닉 바비치의 [모바일 폼 사용성 원칙 7가지] 소개하고자 합니다.

여러분이 만든 앱이나 사이트를 사용하는 모바일 사용자는 특정한 목표를 가지고 있습니다. 보통 사용자와 그의 목표 사이에 있는 것이 ‘폼(form)’입니다. 사실, 폼은 보통 목표 완수 여정의 마지막 단계라고 여겨집니다. 사용자가 폼을 아무런 혼동 없이 최대한 빨리 마무리할 수 있는 것이 중요한 것도 이런 이유 때문입니다.

다음 7가지 UX 원칙에 따라 빠르고 쉽게 완성할 수 있는 폼을 만들어보세요.

원칙1. 폼은 유저가 데이터를 입력하는 방식에 맞춰야 한다

사용자가 모바일 기기에서 폼을 작성할 때, 입력란과 키보드 간의 상호작용은 매우 중요합니다. 특히, 키보드가 화면의 대부분을 차지하는 모바일 환경에서는 입력란이 가려지는 경우가 빈번하게 발생합니다. 이런 상황에서는 사용자가 입력을 하는 데 어려움을 느끼게 되고, 결과적으로 사용자는 불편함을 겪거나 입력 오류가 발생할 수 있습니다.

따라서, 키보드와 같은 인터페이스 요소가 입력란을 가로막지 않도록 주의 깊게 설계하는 것이 필수적입니다. 사용자가 입력란에 포커스를 맞추면 화면의 레이아웃이 자동으로 조정되어, 키보드가 나타났을 때에도 입력란이 잘 보이도록 해야 합니다. 이러한 조치는 사용자에게 보다 원활한 경험을 제공하며, 입력 과정에서의 스트레스를 줄여줍니다.

또한, 사용자가 한 칸에 입력을 완료했을 때 다음 입력란이 자연스럽게 보이도록 폼이 자동으로 위로 살짝 올라가는 기능은 매우 유용합니다. 이 기능은 사용자가 입력을 완료한 후, 다음 단계로 쉽게 넘어갈 수 있도록 돕습니다. 예를 들어, 사용자가 이메일 주소를 입력하고 '다음' 버튼을 누르지 않고도 자동으로 다음 입력란으로 이동할 수 있다면, 이는 사용자에게 더 직관적이고 편리한 경험을 제공합니다.

이러한 자동 스크롤 기능은 사용자가 폼을 작성하는 데 있어 시각적인 흐름을 유지하게 해주며, 입력란이 가려지는 문제를 효과적으로 해결합니다. 사용자들은 보다 빠르고 효율적으로 입력을 완료할 수 있으며, 결과적으로 폼 작성 완료율이 높아지는 효과를 기대할 수 있습니다.

원칙2. 입력란 개수와 사용자가 들여야 하는 노력을 최소화한다

사용자 경험(UX) 측면에서 폼의 길이와 복잡성이 사용자의 입력 의사에 미치는 영향은 매우 중요합니다. 폼이 길거나 복잡하게 느껴질수록, 사용자는 작성하는 데 부담감과 스트레스를 느끼게 됩니다. 이로 인해 빈칸을 채우지 않을 확률이 높아지게 됩니다.

특히 모바일 기기와 같은 작은 스크린에서는 이러한 경향이 더욱 두드러집니다. 작은 화면에서는 한 번에 볼 수 있는 정보의 양이 제한적이기 때문에, 긴 폼은 사용자가 시각적으로 부담을 느끼게 합니다. 사용자는 화면을 스크롤하거나 여러 개의 입력란을 확인해야 하므로, 이 과정이 불편하게 느껴질 수 있습니다.

입력란의 개수를 최소화하면 사용자는 폼을 덜 복잡하게 인식하게 되어, 입력을 시작할 확률이 높아집니다. 예를 들어, 많은 정보를 요청해야 할 경우, 이를 여러 개의 간단한 폼으로 나누거나 필수적인 정보만 먼저 요청하는 방식이 효과적입니다. 이렇게 단계적으로 정보를 요청하면 사용자는 부담을 덜 느끼고, 각 단계에서 성공적인 입력을 경험할 수 있습니다.

입력란의 개수를 최소화하는 것만으로는 사용자 경험을 개선하는 데 충분하지 않습니다. 사용자들이 데이터를 입력할 때, 단순히 입력란의 수를 줄이는 것 외에도 입력 과정에서 요구되는 노력과 시간을 고려하는 것이 필수적입니다.

사용자가 실제 키보드를 사용할 때조차 입력 오류가 발생할 수 있으며, 이는 수정해야 하는 불편함으로 이어집니다. 이러한 오류는 모바일 기기의 터치 스크린에서 더욱 심각하게 나타납니다. 작은 화면에서 손가락으로 입력할 때 오타가 발생할 가능성이 높아지고, 사용자는 이를 수정하는 데 더 많은 시간을 소모하게 됩니다.

따라서 사용자들이 데이터를 입력하는 데 드는 노력과 시간을 줄이기 위해서는 입력 방식 자체의 개선이 필요합니다. 예를 들어, 드롭다운 메뉴, 자동완성 기능, 체크박스 등을 활용하면 사용자가 반복적으로 타이핑하지 않고도 필요한 정보를 쉽게 선택할 수 있습니다. 이러한 방식은 입력 오류를 줄이고 사용자의 부담을 경감하는 데 큰 도움이 됩니다.

그러므로 타이핑을 최소화해서 유저가 오류를 범하는 일을 방지하려고 노력해보세요. 다음과 같은 방법을 쓸 수 있습니다.

1) 스마트 디폴트(Smart Defaults)

스마트 디폴트(Smart Defaults)는 사용자 경험을 크게 향상시킬 수 있는 중요한 요소입니다. 이는 사용자가 폼을 작성할 때, 미리 설정된 기본값이나 자동으로 채워지는 정보를 제공함으로써 입력 과정을 간소화하고, 더 빠르고 정확하게 폼을 완성할 수 있도록 도와줍니다. 이러한 접근은 특히 사용자로 하여금 불필요한 입력을 줄이고, 오류를 최소화하는 데 기여합니다.

예를 들어, 위치 데이터를 활용하여 사용자의 국가를 미리 선택해주는 경우를 생각해볼 수 있습니다. 사용자가 폼을 작성할 때, 그들의 기기가 GPS 기능을 갖추고 있다면, 시스템은 자동으로 사용자 위치를 감지하여 해당 국가를 입력란에 미리 채울 수 있습니다. 이러한 방식은 사용자가 국가를 수동으로 선택하는 번거로움을 없애고, 입력 시간을 단축시킬 뿐만 아니라, 잘못된 국가 선택으로 인한 오류를 줄여줍니다.

또한, 스마트 디폴트는 사용자에게 친숙한 경험을 제공합니다. 예를 들어, 사용자가 자주 사용하는 주소나 연락처 정보를 미리 저장해두고, 사용자가 폼을 작성할 때 자동으로 제안해주는 방식도 있습니다. 이 경우, 사용자는 반복적인 입력 작업에서 벗어나, 필요한 정보만 추가하거나 수정하면 되므로, 입력 과정이 훨씬 더 원활해집니다.

스마트 디폴트를 활용하는 또 다른 예로는, 나이, 성별, 선호 언어와 같은 기본 정보에 대한 미리 설정된 값을 제공하는 것입니다. 이러한 정보는 사용자의 프로필이나 이전 입력 기록을 바탕으로 자동으로 채워질 수 있으며, 이는 사용자에게 맞춤형 경험을 제공합니다. 사용자는 이러한 기본값을 그대로 사용하거나 필요에 따라 수정할 수 있으므로, 입력 과정에서의 부담이 줄어듭니다.

2) 가로형 태그 리스트

사용자가 여러 옵션 중에서 선택해야 할 때, 가로형 태그 리스트를 활용하는 것은 매우 효과적인 디자인 전략입니다. 특히 모바일 기기나 작은 스크린을 사용할 때, 화면 공간을 효율적으로 활용하는 것이 중요합니다. 가로형 태그 리스트는 수평으로 배열된 버튼이나 태그 형태로, 사용자가 선택할 수 있는 옵션을 직관적으로 보여줍니다.

(1) 가로형 태그 리스트는 스크린 공간을 보다 효과적으로 사용할 수 있도록 도와줍니다

전통적인 세로형 리스트는 사용자가 선택할 수 있는 옵션이 많을 경우, 스크롤을 해야 하는 번거로움이 생깁니다. 반면, 가로형 태그 리스트는 옵션을 한눈에 보여주므로 스크롤이 필요 없거나 최소화할 수 있습니다. 이는 사용자에게 더 나은 시각적 경험을 제공하고, 선택 과정에서의 불편함을 줄여줍니다.

(2) 가로형 태그 리스트는 선택지 간의 비교를 용이하게 합니다

사용자가 여러 옵션을 동시에 볼 수 있기 때문에, 각 옵션의 특징이나 장단점을 쉽게 비교할 수 있습니다. 이는 사용자의 의사결정을 빠르고 정확하게 도와주며, 최종적으로 더 나은 선택을 할 수 있도록 합니다. 예를 들어, 색상 선택이나 스타일 옵션을 제공할 때, 가로형 태그 리스트를 사용하면 사용자가 원하는 항목을 쉽게 찾고 선택할 수 있습니다.

(3) 가로형 태그 리스트는 사용자 인터페이스의 시각적 매력을 높이는 데 도움이 됩니다

수평 배치는 종종 더 현대적이고 세련된 느낌을 주며, 이에 따라 사용자에게 긍정적인 인상을 줄 수 있습니다. 또한, 다양한 색상이나 아이콘을 활용하여 각 태그를 시각적으로 구별할 수 있게 하면, 사용자는 더욱 쉽게 정보를 인식하고 선택할 수 있습니다.

(4) 가로형 태그 리스트는 터치 스크린 환경에서의 사용자 경험을 개선하는 데에도 효과적입니다

사용자가 손가락으로 쉽게 태그를 선택할 수 있도록 충분한 간격을 두어 배치하면, 실수로 잘못된 옵션을 선택하는 것을 방지할 수 있습니다. 이는 모바일 사용자에게 특히 중요한 요소로, 편리하고 직관적인 인터페이스를 제공하는 데 도움이 됩니다.

(5) 가로형 태그 리스트는 사용자 맞춤형 경험을 제공할 수 있는 기회를 제공합니다.

예를 들어, 사용자의 이전 선택이나 선호도를 바탕으로 가장 적합한 옵션을 강조 표시하거나 추천할 수 있습니다. 이렇게 하면 사용자는 더욱 개인화된 경험을 느끼고, 선택 과정에서의 부담을 덜 수 있습니다.

3) 최저가/최고가 또는 예산 범위 설정에 쓰는 슬라이더

가격이나 예산을 입력하는 입력란에서 슬라이더를 사용하는 것은 사용자 경험을 향상시키는 매우 효과적인 방법입니다. 슬라이더는 사용자가 직관적으로 가격 범위를 설정할 수 있도록 도와주며, 시각적으로도 간편하고 매력적인 인터페이스를 제공합니다.

(1) 슬라이더는 사용자가 최저 및 최고 가격을 설정하는 데 있어 간편한 조작 방법을 제공합니다

사용자는 슬라이더를 좌우로 움직여 원하는 가격 범위를 쉽게 선택할 수 있습니다. 이 과정은 드롭다운 메뉴나 텍스트 입력란을 통해 수치를 하나하나 입력하는 것보다 훨씬 더 빠르고 직관적입니다. 특히, 가격 범위가 넓을 경우, 슬라이더를 사용하면 사용자가 원하는 가격대에 더욱 쉽게 접근할 수 있습니다.

(2) 슬라이더는 시각적으로 명확한 단서를 제공하여 사용자가 자신의 상황에 맞는 가격 범위를 설정할 수 있습니다

슬라이더의 양 끝에는 최저가와 최고가가 표시되어 있어 사용자는 한눈에 범위를 이해할 수 있습니다. 이처럼 슬라이더는 사용자가 가격 범위를 설정하는 과정에서 직관성을 높이고, 선택의 어려움을 줄여줍니다.

(3) 슬라이더는 모바일 기기에서 특히 유용합니다

터치 스크린 환경에서는 슬라이더를 가로로 스와이프하는 것이 손가락으로 조작하기에 용이합니다. 사용자는 슬라이더를 간단히 터치하고 드래그하기만 하면 되므로, 입력 과정에서의 불편함이 줄어듭니다. 이는 모바일 사용자에게 매우 중요한 요소로, 효율적이고 편리한 경험을 제공합니다.

그러나 슬라이더를 사용할 때 고려해야 할 점도 있습니다. 슬라이더를 조정할 때, 숫자가 사용자의 손가락에 가려지지 않도록 디자인하는 것이 중요합니다

사용자가 슬라이더를 조작할 때, 현재 선택된 값이 시각적으로 잘 보이지 않으면 설정한 가격을 정확히 파악하기 어려워질 수 있습니다. 이를 방지하기 위해 슬라이더의 위치와 숫자 표시를 적절히 배치하거나, 숫자가 슬라이더의 위쪽이나 옆쪽에 위치하도록 설계하는 것이 좋습니다. 또한, 숫자가 변경될 때마다 즉각적으로 업데이트되는 방식으로 시각적 피드백을 제공하면 사용자는 현재 선택한 가격을 쉽게 확인할 수 있습니다.

또한, 슬라이더의 이동 범위를 적절하게 설정하는 것도 중요합니다

사용자가 선택할 수 있는 가격 범위가 비현실적이거나 너무 좁으면, 사용자는 원하는 가격을 설정하는 데 어려움을 겪을 수 있습니다. 따라서, 실제 사용자가 필요로 하는 가격 범위를 반영하여 슬라이더를 설계하는 것이 필요합니다

원칙3. 폼 레이블은 폼 입력란 위에 배치하거나 플로팅 레이블(floating labels)로 만든다

폼 레이블은 사용자가 입력란의 목적을 이해하는 데 중요한 역할을 합니다. 올바른 레이블은 사용자가 무엇을 입력해야 하는지를 명확하게 전달하여, 입력 과정에서 혼란을 줄이고 효율성을 높입니다. 따라서, 레이블의 텍스트를 깔끔하고 직관적으로 만드는 것은 사용자 인터페이스(UI)를 더욱 접근성 있게 만드는 핵심적인 방법 중 하나입니다.

(1) 레이블은 사용자가 폼을 작성할 때 필요한 정보를 제공합니다

예를 들어, "이름", "이메일", "전화번호"와 같은 레이블은 사용자가 어떤 정보를 입력해야 하는지를 명확하게 알려줍니다. 레이블이 불명확하거나 애매하다면, 사용자는 입력란의 용도를 이해하지 못해 혼란을 겪을 수 있습니다. 이는 전체 폼 작성 과정을 지연시키고, 사용자의 경험을 저하시키는 결과로 이어질 수 있습니다.

(2) 깔끔한 레이블 디자인은 시각적 접근성을 높이는 데 효과적입니다

레이블의 텍스트가 간결하고 명확할수록, 사용자는 빠르게 이해하고 반응할 수 있습니다. 불필요한 정보나 복잡한 용어를 피하고, 간단하고 직관적인 언어를 사용하는 것이 중요합니다. 예를 들어, "생년월일" 대신 "생일"이라고 간단히 표현하면, 사용자가 더 쉽게 이해할 수 있습니다. 레이블의 글꼴, 크기, 색상도 접근성을 높이는 데 중요한 요소입니다. 충분한 대비를 제공하고, 읽기 쉬운 글꼴을 사용함으로써 다양한 사용자들이 레이블을 쉽게 인식할 수 있도록 해야 합니다.

(3) 레이블은 화면 리더와 같은 보조 기술을 사용하는 사용자에게도 필수적입니다

시각 장애인이나 저시력 사용자들은 화면 리더를 통해 폼을 작성합니다. 이 경우, 레이블이 명확하게 설정되어 있어야만 화면 리더가 올바른 정보를 사용자에게 전달할 수 있습니다. 따라서 레이블 텍스트는 사용자 경험을 개선하는 데 중요한 역할을 하며, 접근성을 강화하는 데 도움이 됩니다. 

(4) 레이블의 위치와 관계 설정도 접근성에 중요한 영향을 미칩니다

레이블은 입력란의 바로 위나 왼쪽에 위치시키는 것이 일반적이며, 이를 통해 사용자는 레이블과 입력란 간의 관계를 쉽게 이해할 수 있습니다. 레이블과 입력란 간의 간격을 적절히 유지하는 것도 중요합니다. 너무 좁거나 넓게 배치하면 사용자는 혼란을 느낄 수 있으므로, 적절한 여백을 두어야 합니다.

(5) 레이블에는 필수 입력란을 구분하는 표시를 추가하는 것도 좋은 접근 방법입니다

예를 들어, 필수 입력란에 별표(*)를 추가하여 사용자가 어떤 입력란이 필수인지 한눈에 알아볼 수 있도록 도와줍니다. 이는 사용자가 폼을 작성하는 데 필요한 정보를 빠르게 파악할 수 있게 해줍니다.

1) 인라인 레이블(inline labels)을 절대 사용하면 안 되는 이유

인라인 레이블, 또는 플레이스홀더 텍스트는 입력란 안에 배치된 텍스트로, 사용자가 입력을 시작하면 사라지는 형태입니다. 이러한 디자인은 스크린 공간을 절약하고, 깔끔한 인터페이스를 제공하는 장점이 있습니다. 하지만 이러한 이점은 사용성 측면에서 심각한 결점을 초래할 수 있습니다.

(1) 인라인 레이블의 가장 큰 문제는 맥락의 손실입니다

사용자가 입력란을 클릭하여 타이핑을 시작하면 레이블이 사라지기 때문에, 입력해야 할 내용에 대한 정보를 잃게 됩니다. 이는 특히 긴 폼이나 복잡한 데이터를 입력해야 하는 경우에 더욱 두드러집니다. 예를 들어, 사용자에게 이름, 이메일, 전화번호 등 다양한 정보를 입력하도록 요구하는 폼에서, 인라인 레이블이 사라지면 사용자는 어떤 정보를 입력해야 하는지 기억하기 어려워질 수 있습니다. 이 경우 사용자는 입력란을 클릭한 후에도 다시 레이블을 확인하기 위해 눈을 스크롤하거나, 입력란을 클릭해 레이블이 사라지기 전의 상태로 돌아가야 합니다. 이는 사용자의 흐름을 방해하고, 입력 과정에서의 불편함을 초래합니다.

(2) 인라인 레이블은 시각적으로 혼란을 초래할 수 있습니다

사용자가 입력을 시작할 때 레이블이 사라지므로, 입력란의 범주를 명확하게 인식하기 어려워질 수 있습니다. 특히, 여러 개의 입력란이 나란히 있을 때, 사용자는 어떤 입력란이 어떤 정보를 요구하는지 파악하기 힘들어질 수 있습니다. 이는 입력 오류를 증가시키고, 사용자가 잘못된 정보를 입력하게 만들 수 있는 위험이 있습니다.

(3) 인라인 레이블은 접근성 측면에서도 문제를 일으킬 수 있습니다

시각 장애인이나 저시력 사용자는 화면 리더를 통해 폼을 작성할 때, 인라인 레이블이 사라지면 어떤 정보를 입력해야 하는지 알기 어려워집니다. 이들은 레이블이 사라진 상태에서 입력란의 목적을 이해하기 힘들어지며, 이는 전체적인 사용자 경험을 저하시킬 수 있습니다. 따라서, 접근성을 고려한 디자인에서는 인라인 레이블보다는 명확한 레이블이 필요합니다.

(4) 인라인 레이블의 사용은 사용자에게 심리적 부담을 줄 수 있습니다

사용자가 입력란에 무엇을 입력해야 하는지 기억하지 못할 경우, 불안감을 느낄 수 있습니다. 이는 입력 과정에서의 스트레스를 유발하고, 최종적으로 폼 작성 완료율을 낮추는 결과를 초래할 수 있습니다. 사용자는 입력란의 레이블을 다시 확인하기 위해 시간을 소모하게 되고, 이는 전체적인 사용자 경험이 저하되는 원인이 됩니다.

결론적으로, 인라인 레이블은 보이게도 좋고 스크린 공간을 절약해주긴 하지만, 이러한 이점이 엄청난 사용성 결점보다 지나치게 중요하게 여겨지고 있습니다. 가장 큰 문제는 맥락이 손실(loss of context)된다는 점입니다.

유저가 텍스트 박스를 한 번 클릭하고 나면, 레이블이 사라져 버려서 유저가 입력해야 할 내용을 제대로 입력했는지 재확인할 수가 없습니다.

하나 더 추가적으로 설명하면,

사용자가 텍스트 박스에 이미 무언가가 입력되어 있다고 생각하면, 해당 입력란을 무시하는 경향이 생길 수 있습니다. 이 현상은 인라인 레이블이나 플레이스홀더 텍스트와 관련이 깊습니다. 사용자는 입력란에 표시된 텍스트를 레이블로 인식하기보다는, 단순한 안내 메시지로 받아들일 수 있습니다. 이로 인해 다음과 같은 문제가 발생할 수 있습니다.

(1) 정보의 인식 부족입니다

사용자가 입력란에 이미 표시된 텍스트를 보고 "이건 이미 입력된 정보다"라고 생각하게 되면, 실제로는 그 입력란에 무엇을 입력해야 하는지를 제대로 인식하지 못할 수 있습니다. 예를 들어, "이메일 주소"라는 플레이스홀더가 있는 입력란을 보면서 사용자가 그 공간을 그냥 지나치고, 다른 입력란으로 이동할 수 있습니다. 결과적으로 사용자는 필수 정보를 입력하지 않게 되며, 이는 폼 제출 시 오류를 발생시키거나 불완전한 제출로 이어질 수 있습니다.

(2) 입력 오류의 증가입니다

사용자가 입력란을 무시하면, 그 입력란이 필수인지 선택 사항인지에 대한 정보를 놓치게 됩니다. 이는 사용자가 필요한 정보를 누락하게 하거나, 잘못된 값을 입력하게 만드는 원인이 됩니다. 예를 들어, 전화번호 입력란에 플레이스홀더가 있으면 사용자는 그 입력란을 무시하고, 나중에 다시 확인하지 않게 됩니다. 이는 전체적인 데이터 품질을 저하시킬 수 있습니다.

(3) 사용자 경험의 저하입니다

사용자가 입력란을 무시하게 되면, 폼 작성 과정이 복잡하게 느껴질 수 있습니다. 특히, 여러 개의 입력란이 있는 경우, 사용자는 어느 입력란이 필수인지, 어떤 정보를 입력해야 하는지 혼란스러워질 수 있습니다. 이는 사용자의 스트레스를 유발하고, 최종적으로 폼을 완료하지 않으려는 경향으로 이어질 수 있습니다.

(4) 접근성 문제입니다

시각 장애인이나 저시력 사용자들은 화면 리더를 통해 폼을 작성할 때, 인라인 레이블이 사라지면 어떤 정보를 입력해야 할지 알기 어려워집니다. 이들은 플레이스홀더를 단순한 안내 메시지로 이해하게 되어, 입력란을 건너뛰거나 잘못된 정보를 입력할 위험이 높아집니다. 이는 전체적인 접근성을 저하시킬 수 있습니다..

2) 왼쪽 정렬된 레이블이 모바일에서 안 좋은 이유

왼쪽으로 정렬된 레이블은 모바일 폰의 화면 크기 및 비율과 관련하여 여러 가지 사용성 문제를 초래할 수 있습니다. 특히, 모바일 기기에서는 화면의 너비가 제한적이기 때문에 레이블의 배치와 입력란의 크기가 사용자 경험에 큰 영향을 미칩니다.

(1) 왼쪽 정렬된 레이블이 사용되면 입력란의 너비가 줄어들게 됩니다

모바일 화면은 기본적으로 세로로 긴 형태를 가지고 있어, 가로로 넓은 입력란을 확보하기가 어렵습니다. 입력란 앞에 왼쪽 정렬된 레이블이 배치되면, 레이블이 차지하는 공간 때문에 입력란의 유효 너비가 줄어들어 사용자가 입력할 수 있는 정보의 양이 제한됩니다. 이는 특히 긴 문자열이나 복잡한 데이터를 입력해야 하는 경우에 문제를 일으킵니다.

(2) 사용자가 입력한 내용을 쉽게 확인할 수 없게 됩니다

입력란의 너비가 좁아지면, 사용자가 입력한 텍스트가 잘리거나 보이지 않게 될 수 있습니다. 예를 들어, 이메일 주소나 전화번호와 같이 특정 형식이 필요한 입력란에서는 사용자가 입력한 내용을 명확히 볼 수 있어야 하지만, 좁은 입력란에서는 이를 확인하기 어려워집니다. 사용자가 자신의 입력 내용을 확인하지 못하면, 실수로 잘못된 정보를 입력할 가능성이 높아지며, 이는 나중에 폼을 제출한 후에야 인지하게 되는 경우가 많습니다.

(3) 입력 오류를 사전에 찾아내기 어렵습니다

입력란의 내용이 보이지 않으면, 사용자는 오류를 즉시 확인할 수 없기 때문에, 제출 후에야 자신이 실수한 부분을 발견하게 됩니다. 이는 특히 중요한 정보가 포함된 폼, 예를 들어, 결제 정보나 개인 정보와 같은 경우에는 더욱 심각한 문제를 초래할 수 있습니다. 오류가 있는 폼을 제출하게 되면, 사용자는 다시 수정해야 하는 번거로움과 불편을 겪게 되고, 이는 사용자 경험을 크게 저하시킬 수 있습니다.

3) 레이블은 입력란 위 배치한다

폼 레이블을 입력란 위에 배치하는 것은 사용자 경험(UX)을 개선하는 데 매우 중요한 요소입니다. 특히 모바일 환경에서는 레이블의 위치가 사용자에게 입력해야 할 내용의 명확성을 제공하고, 입력란의 효율성을 극대화하는 데 효과적입니다.

(1) 레이블을 입력란 위에 배치하면 사용자가 입력해야 할 내용을 직관적으로 이해할 수 있습니다

레이블은 입력란의 목적을 설명하는 역할을 하므로, 사용자는 무엇을 입력해야 하는지를 쉽게 확인할 수 있습니다. 모바일 화면은 크기가 제한적이기 때문에, 입력란 위에 레이블이 위치하면 사용자는 한눈에 필요한 정보를 확인하고, 입력에 대한 부담을 줄일 수 있습니다. 이는 특히 긴 문자열이나 복잡한 데이터를 입력해야 할 때 더욱 중요합니다.

(2) 입력란 위에 레이블을 배치할 경우, 입력란의 너비를 최대한 활용할 수 있습니다

모바일 기기에서는 화면의 가로 폭이 제한적이므로, 레이블이 입력란과 나란히 배치되면 입력란의 너비가 줄어들게 됩니다. 그러나 레이블이 입력란 위에 위치하면, 입력란은 가로로 충분한 공간을 확보할 수 있어 사용자가 입력한 내용을 명확하게 볼 수 있습니다. 이는 사용자가 입력한 정보의 전체를 확인할 수 있게 하여, 입력 오류를 사전에 방지하는 데 도움이 됩니다.

(3) 레이블을 위에 배치하면 더 많은 내용을 담을 수 있는 장점이 있습니다

왼쪽 정렬된 레이블은 보통 짧은 텍스트로 제한되기 쉽지만, 위에 배치된 레이블은 길이를 한두 단어로 제한할 필요가 없습니다. 사용자는 각 입력란의 목적을 명확히 이해할 수 있도록 충분한 정보를 제공할 수 있으며, 이는 사용자가 보다 정확하게 정보를 입력할 수 있도록 돕습니다. 예를 들어, "이메일 주소"라는 레이블 대신 "본인의 이메일 주소를 입력해 주세요"라는 문구를 사용할 수 있습니다. 이는 사용자가 무엇을 입력해야 하는지를 더 명확히 이해할 수 있도록 도와줍니다.

(4) 레이블을 입력란 위에 배치하면 사용자가 입력하는 과정에서 심리적 안정감을 높일 수 있습니다

사용자가 입력란을 클릭할 때 레이블이 사라지는 것이 아니라 항상 시각적으로 존재하므로, 사용자는 필요한 정보를 지속적으로 확인할 수 있습니다. 이는 사용자가 불안감을 느끼지 않고, 입력 과정에 집중할 수 있도록 도와줍니다. 입력란 위에 배치된 레이블은 사용자가 입력할 때마다 참고할 수 있는 점검 요소가 되어, 입력 오류를 줄이는 데 효과적입니다.

(5) 모바일 환경에서는 터치 스크린을 통해 입력하는 경우가 많기 때문에, 레이블이 명확하게 보이는 것은 더욱 중요합니다

사용자가 손가락으로 입력란을 클릭할 때, 한눈에 레이블을 확인할 수 있어야 합니다. 레이블이 입력란 위에 위치하면, 손가락이 입력란을 가리지 않고 사용자가 입력해야 할 내용을 쉽게 인식할 수 있습니다.

레이블을 입력란 위에 배치하는 방식은 사용자 경험을 향상시키는 데 많은 장점을 가지고 있지만, 한 가지 단점은 세로 공간을 더 많이 차지한다는 점입니다.

이는 모바일 기기와 같은 제한된 화면에서 스크롤을 더 많이 해야 한다는 것을 의미합니다. 그러나 이러한 단점은 현대의 사용자 인터페이스(UI) 환경에서는 그다지 큰 문제가 되지 않습니다. 그 이유를 여러 측면에서 살펴보겠습니다.

(1) 스크롤링의 자연스러움입니다

모바일 기기와 터치 스크린의 발전으로 인해 사용자들은 스크롤링을 매우 자연스럽고 직관적인 동작으로 인식하게 되었습니다. 오늘날의 사용자들은 스크롤을 통해 정보를 탐색하는 것에 익숙해져 있으며, 이는 사용자 경험의 중요한 부분으로 자리잡고 있습니다. 따라서 입력란 위에 레이블을 배치하여 세로 공간을 차지하더라도, 사용자는 이를 불편함으로 느끼기보다는 자연스럽게 스크롤하여 필요한 정보를 찾을 수 있습니다.

(2) 정보의 접근성입니다

레이블을 입력란 위에 배치함으로써 사용자는 각 입력란의 목적을 명확히 이해할 수 있습니다. 이는 입력란의 맥락을 잃지 않게 하여, 사용자가 어떤 정보를 입력해야 하는지를 쉽게 파악할 수 있도록 도와줍니다. 스크롤이 필요하더라도, 사용자가 필요한 정보를 명확히 이해할 수 있다면 이는 오히려 긍정적인 요소로 작용할 수 있습니다. 사용자가 스크롤을 통해 추가 정보를 얻는 과정은 사용자에게 더 많은 정보와 선택지를 제공하는 기회가 될 수 있습니다.

(3) 모바일 디자인의 발전입니다

현대의 모바일 디자인은 사용자 경험을 최우선으로 고려하여 설계되고 있습니다. 레이블을 입력란 위에 배치하더라도, 디자인 요소들은 사용자가 스크롤할 때 시각적으로 편안하도록 조정될 수 있습니다. 예를 들어, 충분한 여백과 간격을 두어 각 입력란과 레이블이 시각적으로 분리되도록 하여, 사용자가 스크롤할 때 혼란을 느끼지 않도록 할 수 있습니다. 이는 사용자가 각 입력란을 쉽게 식별하고, 빠르게 입력할 수 있게 합니다.

(4) 사용자 피드백의 중요성입니다

스크롤을 더 많이 해야 하는 상황에서 사용자 경험을 개선하는 또 다른 방법은 피드백을 통해 사용자가 입력 과정에서 느끼는 불편함을 줄이는 것입니다. 예를 들어, 사용자가 입력란을 클릭하거나 입력할 때, 시각적 피드백을 통해 현재 입력 중인 내용이 무엇인지 명확히 보여줄 수 있습니다. 이는 사용자가 스크롤을 하더라도, 현재 어떤 정보를 입력해야 하는지 잊지 않도록 도와줍니다.

(5) 폼의 길이와 구조를 고려해야 합니다

많은 입력란이 있는 긴 폼의 경우, 레이블을 위에 배치하는 것이 불편할 수 있지만, 이를 보완하기 위해 입력란을 그룹화하거나 섹션으로 나누어 사용자에게 더 나은 경험을 제공할 수 있습니다. 예를 들어, 특정 섹션을 스크롤할 때마다 상단에 고정된 레이블이나 힌트를 제공하면 사용자는 스크롤을 하면서도 필요한 정보를 쉽게 확인할 수 있습니다.

4) 상황에 따라 플로팅 레이블(floating lable)을 쓸 수도 있다

플로팅 레이블(floating label)은 현대 사용자 인터페이스(UI) 디자인에서 점점 더 많이 사용되고 있는 혁신적인 접근 방식입니다. 이 방식은 플레이스홀더 텍스트를 기본으로 보여주되, 사용자가 입력란을 클릭하면 플레이스홀더가 사라지고 레이블이 입력란의 상단으로 이동하는 형태를 취합니다. 이러한 디자인은 여러 가지 장점을 제공하며, 사용자 경험을 크게 향상시킬 수 있습니다.

(1) 입력 내용의 명확성입니다

플로팅 레이블은 사용자가 입력할 때 입력란의 목적을 명확하게 전달합니다. 입력란 안에 기본적으로 표시되는 플레이스홀더 텍스트는 사용자가 어떤 정보를 입력해야 하는지를 안내하지만, 사용자가 입력을 시작하면 레이블이 상단으로 이동하여 항상 시각적으로 존재하게 됩니다. 이는 사용자가 입력하는 내용을 확인할 수 있도록 도와주며, 입력란의 맥락을 잃지 않게 합니다. 사용자는 입력 필드의 목적을 쉽게 인식할 수 있고, 입력 오류를 줄일 수 있습니다.

(2) 공간의 효율적 활용입니다

플로팅 레이블은 입력란 위에 레이블을 배치하기 때문에 스크린 공간을 효율적으로 사용할 수 있습니다. 초기에는 플레이스홀더 텍스트가 입력란 안에 위치하므로, 입력란의 사용 공간을 최대한 활용할 수 있습니다. 사용자가 입력을 시작하면 레이블이 상단으로 이동함에 따라 입력란의 시각적 공간을 확장하게 되며, 이는 사용자가 입력한 내용을 가로로 충분히 볼 수 있게 합니다. 이는 특히 모바일 기기와 같은 제한된 화면에서 매우 유용합니다.

(3) 디자인의 세련됨입니다

플로팅 레이블은 현대적이고 세련된 느낌을 주며, 사용자에게 긍정적인 인상을 줄 수 있습니다. 사용자 인터페이스는 단순히 기능적일 뿐만 아니라, 시각적으로 매력적이어야 합니다. 플로팅 레이블은 사용자의 입력 과정에 따라 변화하는 동적인 요소로, 디자인에 생동감을 더해줍니다. 이러한 시각적 요소는 사용자를 끌어들이고, 입력 과정에서의 즐거움을 제공합니다.

(4) 입력 오류 방지입니다

사용자가 입력란에 무엇을 입력해야 하는지를 명확히 이해할 수 있도록 도와주는 플로팅 레이블은 입력 오류를 줄이는 데 효과적입니다. 사용자가 입력란을 클릭했을 때 레이블이 상단으로 이동함으로써, 사용자는 현재 어떤 정보를 입력하고 있는지를 계속해서 인식할 수 있습니다. 이는 특히 긴 입력란이나 복잡한 데이터가 요구되는 경우에 유용합니다. 사용자가 잘못된 정보를 입력하는 것을 최소화할 수 있습니다.

(5) 접근성 향상입니다

플로팅 레이블은 보조 기술을 사용하는 사용자에게도 도움이 됩니다. 화면 리더와 같은 보조 기기를 사용하는 경우, 레이블이 항상 시각적으로 존재하므로 사용자는 입력란의 목적을 쉽게 이해할 수 있습니다. 이는 시각 장애인이나 저시력 사용자에게 긍정적인 경험을 제공하며, 전체적인 접근성을 높이는 데 기여합니다.

(6) 사용자 피드백 제공입니다

플로팅 레이블은 사용자가 입력을 시작할 때 레이블의 위치가 변함으로써 시각적 피드백을 제공합니다. 이는 사용자가 입력을 시작했음을 인식하게 하고, 입력란의 상태를 명확히 알 수 있게 합니다. 사용자는 입력란을 클릭했을 때 즉각적으로 피드백을 받을 수 있으므로, 입력 과정에서의 혼란을 줄일 수 있습니다.

원칙4. 폼에 입력한 내용은 실시간으로 검토한다

이상적인 사용자 경험에서는 사용자가 폼에 필요한 정보만 입력하고, 모든 것이 순조롭게 진행되어 성공적으로 업무를 마무리하는 모습이 그려집니다. 그러나 현실에서는 사용자가 실수를 하거나 입력을 잘못하는 경우가 빈번합니다. 이러한 실수는 사용자가 데이터를 제출한 후에야 인지하게 되는 경우가 많으며, 이는 사용자에게 불편함과 스트레스를 초래할 수 있습니다. 따라서, 사용자가 입력한 데이터의 정확성을 실시간으로 검토하고 피드백을 제공하는 것이 중요합니다.

(1) 실시간 검토의 필요성입니다

사용자가 입력란에 데이터를 입력하는 즉시, 시스템이 해당 데이터를 검토하여 오류가 있는지 여부를 확인할 수 있다면, 사용자는 즉각적으로 피드백을 받을 수 있습니다. 예를 들어, 이메일 주소 입력란에 잘못된 형식의 이메일을 입력했을 경우, 사용자가 입력하는 순간에 "유효하지 않은 이메일 형식입니다"라는 메시지를 표시해주면, 사용자는 바로 수정할 수 있습니다. 이는 사용자가 데이터를 제출하기 전에 오류를 발견하고 수정할 수 있는 기회를 제공합니다.

(2) 사용자 경험 개선입니다

사용자가 데이터를 입력한 후 제출 버튼을 클릭하기까지는 긴 과정이 될 수 있습니다. 이 과정에서 사용자가 여러 번의 입력을 필요로 하는 경우, 각 입력란에 대한 오류를 실시간으로 알려주면, 사용자는 더 이상 제출 후에 오류를 확인하고 되돌아가는 번거로움을 겪지 않아도 됩니다. 이는 사용자의 스트레스를 줄이고, 폼 작성 과정을 더 매끄럽고 효율적으로 만들어 줍니다. 사용자는 오류를 수정하는 데 필요한 시간을 절약할 수 있으며, 이는 최종적으로 사용자 만족도를 높이는 데 효과적입니다.

(3) 입력 오류의 감소입니다

실시간 피드백은 입력 오류를 줄이는 데 큰 도움이 됩니다. 사용자가 입력한 데이터의 유효성을 지속적으로 확인함으로써, 잘못된 정보를 제출하는 것을 방지할 수 있습니다. 이는 특히 중요한 정보, 예를 들어 결제 정보나 개인 정보와 같은 경우에 더욱 중요합니다. 사용자가 불필요한 오류를 줄일 수 있다면, 이는 비즈니스 운영의 효율성을 높이고, 고객의 신뢰를 구축하는 데 효과적입니다.

(4) 적절한 피드백 제공입니다

실시간으로 검토하는 시스템은 단순히 오류를 지적하는 것에서 그치지 않고, 사용자가 올바른 데이터를 입력할 수 있도록 안내해야 합니다. 예를 들어, 비밀번호 입력란에 보안 기준을 충족하지 않는 경우, "비밀번호는 최소 8자 이상이어야 하며, 대문자, 소문자, 숫자를 포함해야 합니다"라는 구체적인 안내 메시지를 제공한다면, 사용자는 무엇을 수정해야 할지 명확히 알 수 있습니다. 이러한 방식은 사용자가 필요한 정보를 쉽게 이해하고, 오류를 수정하는 데 큰 도움을 줍니다.

(5) 사용자의 자신감 향상입니다

실시간 피드백을 통해 오류를 즉시 수정할 수 있도록 하면, 사용자는 자신의 입력 과정에 대한 자신감을 가질 수 있습니다. 사용자가 데이터를 입력할 때마다 긍정적인 피드백을 받게 되면, 이는 사용자가 계속해서 입력을 진행하도록 유도합니다. 이러한 과정은 사용자가 폼을 작성하는 데 있어 보다 능동적이고 적극적인 태도를 가지게 하여, 최종적으로 입력 완료율을 높이는 데 효과적입니다.

(좌) 제출할 때까지 폼에 입력한 내용이 올바르지 않은지 확인할 수 없고, 제공된 오류 메시지가 대처를 어떻게 해야 하는지 제대로 전달하지 못하고 있습니다

(우) 행동으로 옮길 수 있는 오류 메시지는 맥락에 맞게, 데이터를 입력하면 실시간으로 알려주고 있습니다.

(5) 만일 특정한 형식으로 칸에 입력을 해야 한다면, 적용된 룰을 추가적인 예시 없이 미리 알려줍니다.

첫째, 입력 오류 방지입니다.

사용자가 입력해야 하는 형식이나 규칙이 명확하지 않으면, 잘못된 정보를 입력할 가능성이 높아집니다. 예를 들어, 전화번호나 이메일 주소와 같은 특정 형식이 요구되는 경우, 입력란에 대한 규칙을 미리 안내함으로써 사용자는 입력에 필요한 정보를 정확히 이해하고, 오류를 사전에 방지할 수 있습니다. 이는 최종적으로 제출 후 오류를 발견하고 수정하는 번거로움을 줄이는 데 큰 도움이 됩니다.

둘째, 명확한 기대치 설정입니다

사용자가 무엇을 입력해야 하는지 미리 알면, 입력 과정에서의 혼란을 줄일 수 있습니다. 예를 들어, "전화번호는 하이픈(-) 없이 숫자만 입력해 주세요"라는 안내가 있다면, 사용자는 그에 맞춰 입력할 수 있습니다. 이러한 명확한 기대치는 사용자가 입력란에 대해 혼란을 느끼지 않도록 도와주며, 보다 원활한 입력 프로세스를 제공합니다.

셋째, 시간 절약입니다

사용자가 입력해야 할 형식이나 규칙이 미리 안내되면, 불필요한 시간을 소모하지 않고 빠르게 입력할 수 있습니다. 결과적으로, 사용자는 입력하는 데 필요한 시간을 절약하고, 폼 작성 과정을 더 효율적으로 진행할 수 있습니다. 이는 특히 긴 폼을 작성해야 할 때 유용합니다.

넷째, 사용자 신뢰도 향상입니다

명확한 규칙을 제공함으로써 사용자는 시스템이 자신을 이해하고 있다는 느낌을 받을 수 있습니다. 이는 사용자가 해당 서비스에 대한 신뢰를 높이는 데 기여하며, 더 긍정적인 경험을 제공합니다. 사용자는 자신의 입력이 올바른지를 걱정하지 않고, 보다 자신감 있게 데이터를 입력할 수 있습니다.

다섯째, 접근성 개선입니다

모든 사용자가 동일한 방식으로 정보를 이해하고 입력하는 것은 아닙니다. 특정 형식이나 규칙을 미리 알려줌으로써, 다양한 배경을 가진 사용자들이 입력란의 목적과 요구 사항을 쉽게 이해할 수 있도록 도와줍니다. 이는 특히 비전문가나 기술에 익숙하지 않은 사용자에게 유용합니다.

원칙5. 요구하는 입력 내용과 키보드를 매칭한다

요구하는 입력 내용과 키보드를 매칭하는 것은 사용자 경험을 크게 향상시키는 중요한 디자인 원칙입니다. 사용자가 입력해야 하는 데이터의 유형에 맞춰 적절한 키보드를 제공하는 것은 입력의 정확성을 높이고, 사용자에게 더 나은 경험을 제공합니다. 다음은 이러한 접근 방식의 이점과 필요성에 대한 구체적인 설명입니다.

1) 입력 오류 감소입니다

사용자가 입력해야 하는 데이터의 유형에 맞는 키보드를 제공함으로써, 불필요한 입력 오류를 줄일 수 있습니다. 예를 들어, 신용카드 번호를 입력할 때 숫자만 입력할 수 있는 다이얼패드를 제공하면, 사용자는 문자를 입력할 수 없으므로 자연스럽게 오류를 방지할 수 있습니다. 이는 특히 중요한 정보, 예를 들어 결제 정보와 같은 경우에 더욱 중요합니다. 사용자가 잘못된 형식으로 데이터를 입력하는 것을 방지함으로써, 나중에 발생할 수 있는 문제를 미리 차단할 수 있습니다.

2) 사용 편의성 증대입니다

입력하는 데이터에 맞춰 적절한 키보드를 제공하는 것은 사용자에게 더 편리한 입력 환경을 조성합니다. 사용자가 신용카드 번호, 전화번호, 또는 날짜를 입력할 때, 이러한 데이터에 맞는 키보드를 제공하면 입력 과정을 더욱 쉽게 만들어 줍니다. 예를 들어, 날짜 입력을 위해 달력 형식의 선택기를 제공하면 사용자는 원하는 날짜를 쉽게 선택할 수 있습니다. 이는 사용자에게 편리함을 제공하고, 입력 과정을 더 빠르고 원활하게 만들어 줍니다.

3) 입력 속도 향상입니다

데이터 입력에 적합한 키보드를 제공하면 사용자는 더 빠르게 입력할 수 있습니다. 예를 들어, 이메일 주소를 입력할 때는 기본 키보드를 제공하고, 숫자 전용 입력이 필요한 경우에는 숫자 키패드를 제공함으로써 사용자는 입력의 흐름을 방해받지 않고 자연스럽게 진행할 수 있습니다. 이는 특히 긴 입력란이나 복잡한 데이터를 입력해야 할 때 유용합니다. 사용자는 필요한 데이터만 입력할 수 있는 환경에서 더 빠르게 작업을 완료할 수 있습니다.

4) 사용자 경험 개선입니다

사용자가 입력해야 하는 데이터의 유형에 따라 키보드를 자동으로 변경하면, 이는 사용자에게 긍정적인 경험을 제공합니다. 사용자는 자신의 입력이 시스템에 의해 잘 이해되고 있다는 느낌을 받을 수 있으며, 이는 서비스에 대한 신뢰를 높이는 데 효과적입니다. 즉, 직관적이고 편리한 입력 방식은 사용자가 해당 서비스를 지속적으로 사용하도록 유도합니다.

5) 접근성 향상입니다

모바일 기기나 태블릿을 사용하는 다양한 사용자들은 각기 다른 입력 방식에 익숙해져 있습니다. 특정 데이터 유형에 맞는 키보드를 제공함으로써, 사용자는 자신에게 가장 편안한 방식으로 입력할 수 있습니다. 예를 들어, 장애가 있는 사용자는 특정 키보드 레이아웃이 더 쉽게 느껴질 수 있습니다. 이러한 점에서, 키보드를 맞춤형으로 제공하는 것은 더 많은 사용자들에게 접근성을 높이는 데 도움이 됩니다.

(좌) 숫자를 입력하려면 유저가 직접 키보드를 숫자 키보드로 바꿔야 합니다.

(우) 숫자 입력을 요구하는 칸에 맞춰 적절한 숫자 키보드가 자동으로 제공됩니다. Image credit: Google

6) 특정 태스크에서만 이렇게 하지 말고, 앱 전체에 걸쳐 이 룰이 일관되게 적용되었는지 확인해 봐야 합니다

(1) 사용자 경험의 일관성입니다

사용자는 앱을 사용할 때 일관된 경험을 기대합니다. 특정 태스크에서만 입력 방식이나 룰이 다르게 적용된다면, 사용자는 혼란을 느끼고, 그로 인해 입력 과정에서 불편함을 겪을 수 있습니다. 예를 들어, 신용카드 정보를 입력할 때 숫자 전용 키보드를 제공하고, 다른 입력란에서는 일반 키보드를 제공한다면, 사용자는 왜 두 가지 방식이 다른지를 이해하기 어려울 수 있습니다. 이러한 일관성 부족은 사용자에게 불필요한 스트레스를 초래하고, 앱 사용에 대한 부정적인 인상을 남길 수 있습니다.

(2) 학습 곡선 단축입니다

사용자는 특정 입력 방식이나 룰을 학습해야 합니다. 앱 전체에 걸쳐 일관된 룰이 적용된다면, 사용자는 새로운 태스크를 수행할 때마다 이미 익숙한 규칙을 쉽게 적용할 수 있습니다. 예를 들어, 모든 숫자 입력란에서 숫자 키패드가 자동으로 제공된다면, 사용자는 별도로 새로운 규칙을 기억할 필요가 없어져 학습 곡선이 단축됩니다. 이는 사용자에게 더 나은 경험을 제공하고, 앱에 대한 신뢰를 높이는 데 기여합니다.

(3) 입력 오류 감소입니다

일관된 룰이 적용되면 사용자가 입력하는 과정에서 발생할 수 있는 오류를 줄일 수 있습니다. 예를 들어, 입력 방식이 일관되면 사용자는 입력란의 요구 사항을 명확히 이해하고, 이를 기반으로 정확한 정보를 입력할 가능성이 높아집니다. 각기 다른 입력 방식이 적용되면, 사용자는 입력하는 동안 실수를 범할 가능성이 커지며, 이는 결과적으로 추가적인 수정 작업을 초래하게 됩니다.

(4) 신뢰성 구축입니다

사용자가 앱을 사용할 때 일관된 경험을 제공하면, 이는 사용자에게 안정감과 신뢰를 줍니다. 사용자는 앱이 자신의 입력을 잘 이해하고 있다는 느낌을 받을 수 있으며, 이는 장기적으로 사용자 충성도를 높이는 데 효과적입니다. 특히 비즈니스 또는 금융 관련 앱에서는 사용자 데이터의 정확성이 필수적이기 때문에, 일관된 입력 방식은 신뢰를 구축하는 데 중요한 역할을 합니다.

(5) 성능 최적화입니다

일관된 룰을 유지하면 앱의 성능을 최적화하는 데 도움이 됩니다. 개발자와 디자이너는 특정 입력 방식이나 룰에 대한 명확한 기준을 설정할 수 있으며, 이를 바탕으로 앱을 설계하고 개발할 수 있습니다. 이는 코드의 복잡성을 줄이고, 유지보수를 더 용이하게 만들어 줍니다. 또한, 사용자 피드백을 수집하고 이를 반영하는 과정에서도 일관된 룰이 도움이 됩니다.

(6) 브랜드 이미지 강화입니다

일관된 사용자 경험은 브랜드 이미지에도 긍정적인 영향을 미칩니다. 사용자는 일관되게 잘 설계된 앱을 경험함으로써 해당 브랜드에 대한 긍정적인 인식을 가질 가능성이 높아집니다. 브랜드는 사용자에게 신뢰를 주고, 전문성을 느끼게 하는 데 큰 도움이 됩니다. 이는 장기적으로 브랜드 충성도를 높이는 데 기여할 수 있습니다.

원칙6. 도움이 되는 정보를 맥락에 맞게 제공한다

사용자가 폼을 작성할 때, 맥락과 관련된 정보를 제공하는 것은 그들의 입력 과정을 원활하게 하고 오류를 줄이는 데 큰 도움이 됩니다. 그러나 이러한 도움말은 정말 필요한 곳에서만 제공되어야 하며, 그렇지 않으면 오히려 혼란을 초래할 수 있습니다. 다음은 이 접근 방식의 중요성과 그 이유에 대한 구체적인 설명입니다.

(1) 입력의 용이성입니다

사용자가 폼을 작성할 때, 관련된 정보가 제공되면 입력 과정이 더 쉬워집니다. 예를 들어, 특정 입력란에 대한 설명이 필요한 경우, 그에 대한 도움말을 제공함으로써 사용자는 자신이 무엇을 입력해야 하는지를 명확히 이해할 수 있습니다. 예를 들어, "비밀번호는 최소 8자 이상이며, 대문자와 숫자를 포함해야 합니다"라는 구체적인 안내는 사용자가 올바르게 데이터를 입력하는 데 큰 도움이 됩니다. 이러한 정보는 사용자가 입력하는 동안의 불확실성을 줄여주고, 입력 오류를 방지하는 데 도움이 됩니다.

(2) 정보 과부하 방지입니다

도움말을 필요할 때에만 제공하는 것은 정보 과부하를 방지하는 데 중요합니다. 사용자가 폼을 작성할 때 너무 많은 정보가 주어지면, 오히려 혼란을 초래할 수 있습니다. 예를 들어, 모든 입력란에 설명을 추가하면 사용자는 어떤 정보를 중요한 것인지, 어떤 정보를 무시해야 하는지 판단하기 어려워질 수 있습니다. 이는 사용자 경험을 저하시킬 수 있으며, 폼 작성 완료율을 낮출 수 있습니다. 따라서, 진정으로 필요한 곳에만 도움말을 제공함으로써 사용자가 필요한 정보를 쉽게 찾을 수 있도록 해야 합니다.

(3) 맥락에 맞는 정보 제공입니다

도움말은 맥락에 맞게 제공되어야 합니다. 사용자가 특정 입력란에 대해 고민할 때, 그 입력란과 관련된 정보가 제공되면 더욱 효과적입니다. 예를 들어, 주소 입력란에서 "우편번호는 반드시 지역에 맞는 형식으로 입력해야 합니다"라는 안내는 해당 맥락에 맞는 유용한 정보입니다. 이러한 방식은 사용자가 필요한 정보를 즉시 확인할 수 있도록 하여, 입력 과정에서의 혼란을 줄입니다.

(4) 사용자 피드백의 중요성입니다

도움말은 사용자가 입력을 완료한 후에 피드백을 받을 수 있는 기회를 제공합니다. 예를 들어, 사용자가 입력란을 클릭했을 때 그와 관련된 도움말이 나타난다면, 이는 실시간으로 입력에 대한 피드백을 제공하는 효과적인 방법이 될 수 있습니다. 사용자는 올바른 정보를 입력하고 있는지 확인하고, 필요한 경우 즉시 수정할 수 있습니다. 이는 입력 오류를 줄이고, 전반적인 사용자 경험을 향상시키는 데 효과적입니다.

(5) 심리적 안정감 제공입니다

사용자가 입력란에 대한 도움말을 받을 수 있다면, 이는 심리적으로 큰 안도감을 줄 수 있습니다. 특히 복잡한 데이터나 중요한 정보를 입력할 때, 사용자는 자신의 입력이 올바른지에 대한 불안감을 느낄 수 있습니다. 이때 적절한 도움말이 제공된다면 사용자는 보다 자신감을 가지고 입력을 진행할 수 있습니다. 이러한 심리적 안정감은 사용자 경험의 중요한 요소로 작용합니다.

(6) 지속적인 개선 가능성입니다

도움말을 제공하는 방식을 설계할 때, 사용자의 피드백을 적극적으로 반영할 수 있는 기회를 제공합니다. 사용자가 특정 입력란에서 어려움을 겪는 경우, 그에 대한 도움말을 추가하거나 개선함으로써 앱의 품질을 높일 수 있습니다. 이는 지속적인 사용자 경험 개선으로 이어지며, 사용자가 앱을 더욱더 효과적으로 사용할 수 있도록 도와줍니다.

(좌) 유저에게 적절한 날짜 선택 기능이나 도움말 텍스트가 제공되지 않고 있습니다.

(우) 데이터 입력에 쓸 수 있는 달력 위젯이나 간결한 설명 등 도움이 되는 기능이 제공되고 있습니다. Image credits: Google

원칙7. 유연한 형식을 활용한다

사용자가 매우 정확한 정보를 입력해야 하는 Task는 종종 발생합니다. 특히 전화번호와 같은 숫자 정보를 입력할 때, 특정 포맷을 강요하는 것은 사용자 경험(UX)을 저해할 수 있습니다. 따라서, 사용자가 다양한 입력 형식을 인식할 수 있도록 스크린을 디자인하고, 실수를 방지하기 위해 정보를 쉽게 훑어볼 수 있도록 하는 것이 중요합니다. 다음은 이러한 접근 방식의 필요성과 그 이유에 대한 구체적인 설명입니다.

(1) 사용자의 자유로운 입력 허용입니다

사람들은 각기 다른 방식으로 정보를 입력하는 경향이 있습니다. 예를 들어, 전화번호를 입력할 때 어떤 사용자는 하이픈(-)이나 괄호를 포함할 수 있으며, 다른 사용자는 숫자만 입력할 수 있습니다. 특정 포맷으로 강요하는 것은 사용자의 입력 방식을 제한하게 되며, 이는 불필요한 스트레스를 유발할 수 있습니다. 따라서, 다양한 입력 형식을 수용할 수 있는 디자인을 채택하는 것이 중요합니다. 사용자가 자연스럽게 정보를 입력할 수 있도록 하면, 이 과정에서의 불편함을 줄이고, 더 나은 사용자 경험을 제공할 수 있습니다.

(2) 입력 후 피드백 제공입니다

입력한 데이터에 대한 즉각적인 피드백을 제공하는 것은 사용자 경험을 향상시키는 중요한 요소입니다. 사용자가 전화번호를 입력한 후, 시스템이 입력된 번호의 형식을 자동으로 감지하고, 필요한 경우 적절한 형식으로 변환하거나 경고 메시지를 표시할 수 있습니다. 예를 들어, 사용자가 번호를 입력한 후 "입력한 번호가 유효합니다" 또는 "전화번호 형식이 올바르지 않습니다"라는 메시지를 제공하면, 사용자는 자신의 입력을 즉시 확인하고 수정할 수 있습니다. 이는 사용자가 데이터를 제출하기 전에 실수를 바로잡을 수 있는 기회를 제공합니다.

(3) 정보의 가독성 향상입니다

입력된 정보를 사용자에게 훑어보기 쉽게 보여주는 것은 매우 중요합니다. 특히, 숫자로 된 정보를 입력할 때는 사용자가 쉽게 이해할 수 있도록 가독성을 높여야 합니다. 예를 들어, 전화번호 입력란에서 사용자가 입력한 번호를 시각적으로 분리하여 보여주면, 사용자는 자신의 입력 내용을 쉽게 확인할 수 있습니다. 전화번호를 010-1234-5678 형태로 자동으로 포맷팅해주거나, 각 부분을 다른 색상으로 하이라이트하는 방식으로 가독성을 높일 수 있습니다. 이는 사용자가 정보를 쉽게 검토하고, 실수를 방지하는 데 효과적입니다.

(4) 사용자 교육입니다

입력 형식에 대한 안내를 제공하는 것도 중요합니다. 하지만 이를 강요하는 것이 아니라, 사용자에게 도움을 주는 방식으로 접근해야 합니다. 예를 들어, 전화번호 입력란 옆에 "예: 010-1234-5678"와 같이 예시를 제공하면 사용자는 올바른 형식을 이해하고, 이를 바탕으로 입력할 수 있습니다. 이러한 방식은 사용자가 자신의 입력에 대한 자신감을 가질 수 있도록 도와줍니다.

(좌) 데이터 입력 형식 이미리 정해져 있습니다 (예: 전화번호 입력에 칸 세 개 사용)

(우) 여러 정보 입력 형식을 유연하게 허락한 폼 입력란

[보너스] 매일!!! 하루에 한개씩 UX Quiz 풀어보세요!!!!!

[UX Quiz #1]

"UI 정의 시 사용자가 시스템을 조작하는 것을 '입력'이라고 합니다."

이 문구가 맞다면 "Yes"이라고 답해 주세요. 맞지 않다면 "입력"이 아니라고 No 답해 주세요.

여러분의 퀴즈에 도전해 보세요!
정답은 아래 유튜브 영상 보세요~ 

매일 뉴스레터를 통해 UX Quiz 문제를 풀어보며 UX 지식을 쌓아보세요!
여러분, (아래) UX Quiz 제 유튜브 채널도 구독해 주세요~^^