플로팅 라벨 : 패턴을 사용하여 문의 양식 전환을 늘리세요

약 2 주 전에 웹 사이트를 시작했는데 색인 페이지 하단에있는 문의 양식을 통해받은 문의 건수에 놀랐습니다.

UX 디자이너로서 저는 항상 저와 제 고객의 전환율을 향상시킬 수있는 패턴과 표준을 찾고 있습니다. Matt D Smith의 플로팅 라벨 패턴을 처음 보았을 때 제 웹 사이트에서 테스트하고 싶다는 것을 알았습니다.

문제는 제 웹 사이트가 베타 버전을 출시하는 데 거의 3 년이 걸렸다는 것입니다. (왜냐하면 항상 개인적인 것보다는해야 할 일이 더 중요하기 때문입니다. 물건 🙈), 그리고 2 주가 지난 후, 내 사서함은 그 어느 때보 다 더 많은 이메일을 받았으며, 그것이 패턴 때문이라고 생각하지 않지만 그 뒤에있는 코드를 보여주는 게시물을 만들기로 결정했습니다. 펜은 다음과 같습니다.

약간의 배경 :

플로팅 라벨은 2013 년에 탄생했습니다. Matt D Smith는이 장면에서 처음으로 라벨을 소개했으며 그 이후로 지금까지 가장 많이 논의 된 디자인 패턴 중 하나가되었습니다.

진정하게 공정하기 위해 지지자와 비방 자 모두 플로팅 라벨 사용에 대한 타당한 주장을 드러냈다고 생각합니다. 이 문제에 대한 Chris Coyier의 의견, 가장 비평가 중 한 명인 Brad Frost의 장단점 및 이에 대한 Matt Smith의 답변입니다. 그들은 모두 자신의 가정에 대해 좋은 점을 지적 했으므로 모든 이론적 인 내용은 그대로두고 실용적인 측면에 초점을 맞출 것입니다. 자세히 살펴 보겠습니다!

내 접근 방식은 어떻게 구축 되었습니까?

저는이 펜을 만들기 위해 두 가지 멋진 CSS 기능에 의존했습니다. 형제 선택기와 의사 클래스입니다. 이러한 과소 평가되었지만 강력한 기술의 조합이 다음과 같은 결과를 낳았습니다.

플로팅 라벨 패턴에 대한 가장 일반적인 우려 중 하나는 자리 표시자가 라벨이된다는 것입니다. 그것은 엄청난 사용성 실수입니다. 여기서 비결은 라벨이 대체되지 않습니다 : 시각적으로 숨겨져 있습니다 (화면 판독기에서 여전히 읽을 수있는 opacity : 0; 사용). 입력에 무언가를 입력 할 때까지 : 자리 표시자가 사라지면 레이블이 표시됩니다. CSS 만 사용하면 어떻게 가능할까요? : valid 의사 클래스 덕분입니다.

: valid 의사 클래스는 입력에 적어도 하나의 문자가 있고 자리 표시자가있는 경우 레이블 (입력 필드의 형제)이 표시되도록합니다. 사라졌다. 형제 선택자를 사용하여 그렇게합니다 (고양이를 사용하는 CSS 선택자를 설명하는이 게시물에서 쉽고 재미있는 방법으로 학습).

고려할 사항은 한 가지 뿐이며 입력 콘텐츠의 유효성을 검사하는 것입니다. : valid 의사 클래스는 입력 내부에 콘텐츠가 있는지 확인하는 데 사용되지만 어떤 콘텐츠가 있는지 확인하는 것은 도움이되지 않습니다. 예를 들어 사용자가 입력 한 것은 유효한 이메일입니다. 따라서 : valid 의사 클래스는 프런트 엔드 유효성 검사 라이브러리 (제 경우에는 Parsley이지만 원하는 것을 자유롭게 사용할 수 있음)의 도움을 받아 사용해야합니다. 사용자가 잘못된 콘텐츠를 입력했습니다.

그게 다야! 50 줄 미만의 코드로 웹 사이트에서 가장 확장 된 디자인 패턴 중 하나를 구현하고 여기에 표시된대로 연락처 양식 변환을 높일 수 있습니다. 종속성이없고 브라우저 간 호환이 가능하며 Javascript를 사용할 필요가 없으며 WCAG를 완전히 준수합니다. 원하는 곳에서 스 니펫을 포크하고 사용하는 것을 잊지 마세요. 원하는 경우이 게시물을 공유하고, 더 많은 팁을 보려면 저를 따르세요. & amp; 트릭, 어떻게 진행되는지 알려주세요!