플레이스홀더 텍스트의 UX 원칙 3가지
앤드류의 [플레이스홀더 텍스트의 UX 원칙 3가지] 소개하고자 합니다.
플레이스홀더 텍스트는 거의 모든 HTML 인풋 유형에서 사용될 수 있는 속성이지만, 플레이스홀더를 제대로 이해하지 못한 디자이너와 개발자들은 망설임 없이 사용하곤 합니다. 복잡한 폼에서 텍스트 도움말을 제공해야겠다는 생각을 하기 쉽고, 혹은 심미성을 높이기 위해 인풋 레이블을 제거해야겠다고 생각하기도 쉽습니다. 하지만, 플레이스홀더 텍스트를 집어넣는 것은 많은 사용성 문제를 야기합니다.
이번 글에서는 흔히 볼 수 있는 안 좋은 사례들을 살펴보고 그 대안을 제안해보도록 하겠습니다.
1. 레이블로 사용된 플레이스홀더 텍스트
플레이스홀더 텍스트 대신 입력 레이블을 사용하는 것이 사용자에게 더 나은 경험을 제공하며, 입력 과정에서의 혼란을 줄이고, 직관성을 높이는 데 도움이 됩니다.
(1) 단기 기억의 부담
플레이스홀더 텍스트는 사용자가 입력을 시작할 때 사라지기 때문에, 사용자는 입력한 내용을 기억해야 합니다. 이는 특히 긴 입력란이나 복잡한 정보를 입력할 때 사용자의 단기 기억에 부담을 주어 실수할 가능성을 높입니다.
(2) 정보 가시성 부족
플레이스홀더 텍스트가 사라지면 사용자는 입력란의 의미를 다시 확인하기 어려워집니다. 입력 후 내용을 수정하거나 확인할 때 레이블이 보이지 않으면 사용자는 혼란을 겪을 수 있습니다. 이는 사용자 경험을 저하시킵니다.
(3) 입력 유도
입력란 바로 위에 레이블을 배치하면 사용자는 입력란의 목적을 즉시 이해할 수 있습니다. 비어 있는 입력란은 데이터 입력을 유도하는 어포던스를 제공합니다. 사용자는 입력란을 보고 어떤 행동을 취해야 하는지를 명확히 판단할 수 있습니다.
(4) 직관적인 경험 제공
레이블이 항상 보이면 사용자는 입력란의 의미를 쉽게 인식하고, 입력해야 할 내용을 명확히 알 수 있습니다. 이는 불필요한 학습이나 기억을 요구하지 않으므로 사용자 경험이 향상됩니다.
(5) 사용자 신뢰성 향상
명확한 레이블은 사용자가 입력하는 내용의 정확성을 높이는 데 도움을 줍니다. 사용자는 입력란을 보고 어떤 데이터를 입력해야 하는지 확실히 알 수 있어, 전반적인 신뢰성이 증가합니다.
2. 예시로 사용된 플레이스홀더 텍스트
예시 텍스트를 입력란 아래에 배치하는 것은 사용자의 이해를 돕고, 입력 과정에서의 혼란을 줄이며, 더 나은 사용자 경험을 제공하는 데 효과적입니다.
(1) 정보의 가시성 유지
플레이스홀더 텍스트는 사용자가 입력을 시작할 때 사라지므로, 사용자는 입력란의 의미를 잊게 됩니다. 예시 텍스트를 입력란 아래에 배치하면 사용자가 입력을 하더라도 예시가 항상 보이므로, 입력해야 할 내용을 명확히 기억할 수 있습니다.
(2) 혼란 방지
플레이스홀더 텍스트가 사라지면 사용자는 무엇을 입력해야 할지 혼란스러워질 수 있습니다. 입력란 아래에 위치한 예시 텍스트는 사용자가 현재 입력하고 있는 내용과 비교할 수 있게 만들어 주어, 입력의 정확성을 높입니다.
(3) 어포던스 역할 강화
빈 입력란은 사용자가 데이터를 입력해야 한다는 시각적 신호를 제공합니다. 예시 텍스트가 아래에 위치하면 빈 입력란의 어포던스 역할이 더욱 강조되어 사용자는 어떤 행동을 취해야 하는지를 쉽게 판단할 수 있습니다.
(4) 직관적인 사용자 경험
예시 텍스트를 입력란 아래에 배치하면, 사용자는 입력란의 목적과 예시를 동시에 확인할 수 있어 더욱 직관적인 경험을 제공합니다. 이는 사용자가 입력할 내용을 더 쉽게 이해하고, 입력 과정에서의 오류를 줄이는 데 도움을 줍니다.
(5) 사용자 편의성 향상
예시가 항상 보이면 사용자는 여러 번 입력을 하거나 수정할 때도 참고할 수 있어, 전체적인 사용자 편의성이 향상됩니다. 이는 사용자에게 긍정적인 경험을 제공하고, 앱이나 웹사이트에 대한 신뢰도를 높이는 데 효과적입니다.
3. 도움말로 사용된 플레이스홀더 텍스트
플레이스홀더 텍스트를 긴 메시지 전달의 수단으로 사용하는 것은 비효율적이며, 사용자에게 혼란을 초래할 수 있습니다. 대신 다른 효과적인 대안을 활용하여 사용자 경험을 개선하는 것이 중요합니다.
(1) 정보의 가시성 저하
플레이스홀더 텍스트는 사용자가 입력을 시작하면 사라지므로, 긴 메시지를 전달하는 데 적합하지 않습니다. 사용자가 입력을 시작할 때 중요한 정보를 잃게 되어, 입력 과정에서 혼란을 초래할 수 있습니다.
(2) 입력 과정의 비효율성
플레이스홀더 텍스트에 긴 메시지를 담으려면 사용자가 그 내용을 기억해야 하므로, 입력 시 불필요한 인지적 부담이 발생합니다. 이는 사용자가 입력란의 목적이나 형식을 이해하는 데 방해가 되며, 전체적인 효율성을 저하시킵니다.
(3) 디자인 원칙의 이해 부족
플레이스홀더 텍스트를 사용하여 긴 메시지를 전달하려는 시도는 UI 디자인의 기본 원칙을 간과한 것으로 볼 수 있습니다. 디자이너와 개발자가 이러한 점을 이해하지 못하면, 사용자 경험이 저하되고 혼란을 초래할 수 있습니다.
(4) 대안의 필요성
다양한 대안이 존재하는데, 예를 들어 입력란 위에 간단한 레이블을 추가하거나, 입력란 아래에 예시 텍스트를 배치하는 방법이 있습니다. 이러한 방법은 사용자에게 필요한 정보를 명확히 전달하고, 입력란의 의미를 쉽게 이해하도록 돕습니다.
4. 보조 레이블로 사용된 플레이스홀더 텍스트
플레이스홀더 텍스트 대신 일반적인 레이블을 사용하는 것은 폼의 사용성을 높이고, 사용자에게 더 명확한 정보를 제공하여 입력 과정을 원활하게 만드는 데 효과적입니다.
(1) 정보의 지속성
플레이스홀더 텍스트는 사용자가 입력을 시작하면 사라지기 때문에, 사용자는 입력란의 의미를 잊게 될 수 있습니다. 반면, 일반적인 레이블은 항상 보이므로 사용자가 입력하는 동안에도 입력란의 목적을 명확하게 인식할 수 있습니다.
(2) 혼란 방지
보조 레이블을 플레이스홀더 텍스트로 사용하면 사용자가 입력할 내용이 무엇인지 혼란스러워질 수 있습니다. 일반적인 레이블을 사용하면 사용자에게 필요한 정보를 명확히 전달할 수 있어, 입력 과정에서의 혼란을 줄이고 더 나은 경험을 제공합니다.
(3) 입력 유도 기능 강화
일반적인 레이블은 사용자가 어떤 정보를 입력해야 하는지를 더 명확하게 안내합니다. 이는 특히 복잡한 입력란이나 다양한 형식의 데이터가 필요한 경우에 유용합니다. 사용자는 레이블을 보고 직관적으로 어떤 행동을 취해야 하는지를 판단할 수 있습니다.
(4) 접근성 향상
일반적인 레이블은 시각적으로 더 많은 사용자에게 인식될 수 있습니다. 특히 색각 이상이나 시각적 인식에 어려움을 겪는 사용자에게도 도움이 됩니다. 플레이스홀더 텍스트는 이러한 사용자에게 불리할 수 있습니다.
(5) 사용자 경험 개선
일반적인 레이블을 사용함으로써 사용자는 입력란의 의미를 쉽게 이해하고, 필요한 정보를 즉각적으로 파악할 수 있습니다. 이는 전체적인 사용자 경험을 향상시키고, 사용자가 폼을 더 쉽게 완성할 수 있도록 돕습니다.
플레이스홀더 텍스트가 없애거나 위에서 언급한 다른 대안으로 대체하면 폼의 사용성 이슈를 줄일 수 있습니다.
5. 그래도 꼭 써야 한다면…
원칙1. 입력란에 적는 텍스트보다 더 옅은 색을 써야 한다
(1) 가독성 향상
입력란에 사용자가 입력하는 텍스트보다 옅은 색을 사용하면, 플레이스홀더 텍스트가 배경과 자연스럽게 조화를 이루어 가독성을 높여줍니다. 이는 사용자가 입력할 때, 입력 내용과 플레이스홀더 텍스트를 쉽게 구분할 수 있게 해줍니다.
(2) 입력 유도 기능 강화
플레이스홀더 텍스트가 더 옅은 색일 경우, 사용자는 빈 입력란이 데이터 입력을 요구하는 시각적 신호로 인식하기 쉽습니다. 이는 사용자가 입력란에 데이터를 채우도록 유도하는 데 도움을 줍니다.
(3) 혼동 방지
플레이스홀더 텍스트가 입력 내용과 비슷한 색상일 경우, 사용자는 이미 입력된 내용이라고 오해할 수 있습니다. 옅은 색을 사용하면 이러한 혼란을 줄이고, 사용자가 입력란의 빈 상태를 명확히 인식할 수 있도록 합니다.
(4) 시각적 일관성
입력란의 플레이스홀더 텍스트가 입력 내용보다 옅은 색이면, 시각적으로 일관된 디자인을 유지할 수 있습니다. 이는 전체적인 사용자 경험을 향상시키고, 사용자가 인터페이스를 직관적으로 이해하는 데 도움을 줍니다.
(5) 사용자 경험 개선
옅은 색의 플레이스홀더 텍스트는 사용자가 입력을 시작할 때 더 자연스럽게 인식하게 해줍니다. 이는 입력 과정에서의 혼란을 줄이고, 사용자에게 긍정적인 경험을 제공합니다.
입력한 텍스트와 구분할 수 있게 해줍니다
원칙2. 모든 스크린에서 잘 보여야 한다
플레이스홀더 텍스트가 너무 옅으면 가독성이 떨어지고, 접근성 문제를 야기하며, 사용자 경험을 저하시킬 수 있습니다. 따라서 모든 스크린에서 잘 보이도록 적절한 색상과 대비를 유지하는 것이 중요합니다.
(1) 가독성 저하
플레이스홀더 텍스트가 지나치게 옅은 경우, 사용자가 입력란을 쉽게 인식하지 못할 수 있습니다. 이는 특히 밝은 배경이나 조명이 강한 환경에서 더욱 두드러지며, 사용자가 내용을 보기 위해 눈을 찡그리고 보게 만드는 불편함을 초래합니다.
(2) 접근성 문제
모든 사용자가 동일한 시각적 능력을 가지고 있는 것은 아닙니다. 색각 이상이나 시각적 민감성을 가진 사용자에게는 너무 옅은 색의 플레이스홀더 텍스트가 더욱 어려움을 줄 수 있습니다. 이는 접근성을 저해하고, 다양한 사용자에게 불편함을 초래할 수 있습니다.
(3) 디자인 일관성
플레이스홀더 텍스트가 특정 스크린에서는 잘 보이지만 다른 스크린에서는 잘 보이지 않는 경우, 디자인의 일관성이 결여됩니다. 이는 사용자에게 혼란을 줄 수 있으며, 전체적인 사용자 경험을 저하시킬 수 있습니다.
(4) 사용자 경험 저하
사용자가 입력란을 인식하고 내용을 이해하는 데 어려움을 겪으면, 입력 과정에서 불필요한 스트레스를 경험하게 됩니다. 이는 입력을 꺼리게 하고, 전반적인 사용자 경험을 부정적으로 영향을 미칠 수 있습니다.
(5) 디바이스 다양성
다양한 디바이스와 화면 크기에서 플레이스홀더 텍스트가 잘 보이도록 디자인하는 것이 중요합니다. 모바일, 태블릿, 데스크톱 등 다양한 환경에서 동일한 사용자 경험을 제공하기 위해서는 텍스트의 색상과 대비를 신중하게 고려해야 합니다.
원칙3. 플레이스홀더 텍스트는 유저가 입력란을 누르면 사라져야 한다
입력란을 클릭한 후에도 플레이스홀더 텍스트가 사라지지 않도록 하는 것은 사용자의 단기 기억 부담을 줄이고, 혼란을 방지하며, 더 나은 사용자 경험을 제공하는 데 중요한 역할을 합니다.
(1) 단기 기억 부담 감소
플레이스홀더 텍스트가 사라지지 않으면 사용자는 입력해야 할 내용을 기억할 필요가 없으므로 단기 기억에 부담이 줄어듭니다. 이는 특히 복잡한 정보나 긴 내용을 입력할 때 유용합니다. 사용자는 입력란의 목적을 쉽게 확인할 수 있습니다.
(2) 혼란 방지
입력란을 클릭한 후에도 플레이스홀더 텍스트가 계속 보이면 사용자는 어떤 내용을 입력해야 하는지 명확히 알 수 있습니다. 이는 입력 과정에서 발생할 수 있는 혼란을 줄여줍니다. 사용자가 입력을 시작하지 않더라도 플레이스홀더 텍스트가 사라지지 않으면, 입력란의 의미를 잃지 않게 됩니다.
(3) 입력 유도 기능 강화
플레이스홀더 텍스트가 계속 보이면 사용자는 빈 입력란이 데이터 입력을 요구하는 시각적 신호로 인식하게 됩니다. 이는 사용자가 입력을 시작하도록 유도하는 역할을 합니다.
(4) 사용자 경험 향상
사용자가 언제든지 입력란에 필요한 정보를 확인할 수 있도록 하면, 전체적인 사용자 경험이 향상됩니다. 이는 사용자가 입력을 더 쉽게 하고, 입력 과정에서의 스트레스를 줄이는 데 효과적 입니다.
(5) 정보 지식의 유지
입력란을 클릭한 후에도 플레이스 홀더 텍스트가 남아 있으면 사용자는 필요한 정보를 쉽게 참고할 수 있습니다. 이는 특히 입력이 지연될 경우(예: 생각할 시간이나 다른 요소를 고려할 때) 유용합니다.
댓글
의견을 남겨주세요