WordPress에서 UX 향상을 위한 양식을 디자인하고 만드는 방법

모든 웹사이트에서 중요한 부분임에도 불구하고 모든 사람이 웹에서 양식 작성을 싫어한다는 것은 공공연한 비밀입니다.

그런데 의문이 생깁니다...

이러한 온라인 양식이 왜 미움을 받는가? 무엇이 그들을 그렇게 짜증나게 만드는가?

대답은 다소 간단하고 간단합니다. 간단히 말해서 잘못된 디자인과 부적절한 배치의 결과입니다. 한마디로 나쁜 형태의 UX가 주범이다. 오늘 이 기사에서는 더 나은 양식을 디자인하고 그에 따라 우수한 사용자 경험을 보장하는 양식을 만드는 방법을 배우게 됩니다.

더 나은 양식을 디자인하고 좋은 UX로 만드는 방법은 무엇입니까?

대부분의 온라인 상호 작용은 온라인 양식에서 발생했으며 모든 종류의 온라인 비즈니스에 없어서는 안될 필수 요소가 되었습니다. 따라서 온라인 비즈니스가 있는 경우 양식을 가장 잘 사용하고 디자인하는 데 주의를 기울여야 합니다.

심층으로 진행하기 전에 표 형식으로 목록을 만들어 보겠습니다.

이제 전술을 살펴보자 ~에 더 나은 UX를 위해 양식을 디자인하고 사용할 때 따라야 할 세부 사항.

정통 양식 디자인

대부분의 경우 양식은 부주의하고 비전문적인 방식으로 설계되었기 때문에 지루하고 진정성이 부족합니다. 사용자에게 양식의 목적을 알려야 합니다.

사용자가 양식을 작성하게 하는 첫 번째 단계는 신뢰를 얻고 목적을 제공하는 것입니다!

사용자는 자신에 대한 정보를 제공하는 경향이 없습니다. 그리고 왜 누군가가 신뢰감을 형성하지 못하는 낯선 사람에게 소중한 데이터를 신뢰할까요? 이 경우 그들이 제공하는 정보가 안전한 손에 있으며 귀하가 이 정보를 어떻게 사용할 것인지 확인해야 합니다.

더 나은 양식을 디자인하는 동안 스팸으로 인해 웹 양식이 조작되는 것을 방지하기 위해 Google Captcha 또는 Goggle reCAPTCHA를 배포할 수 있습니다. 스팸으로 인한 결과가 제거되고 가장 중요한 것은 사용자가 양식을 작성하는 데 편안함을 느낄 수 있다는 것입니다.

색인으로 돌아가기

열 레이아웃 및 섹션 정렬

시선 추적에 관한 연구에 따르면 단일 열 형식이 다중 열 형식보다 좋습니다. 일반적으로 우리는 웹사이트를 아래로 스크롤하면서 양식을 작성하는 경향이 있습니다. 위에서 아래로 이동하며 이것이 우리가 이동하는 콘텐츠에 집중하는 방식입니다. 통해 으.

이 경우 여러 열이 있는 양식은 사용자를 잘못 이끌고 내용에서 주의를 분산시킬 수 있습니다. 평행 열이 있는 형식은 흐름을 중단하고 중단할 수 있지만 단일 레이아웃을 유지하는 것이 더 편리할 수 있습니다. 또한 단일 열 형식은 완료 속도가 더 빠르며 신뢰 수준을 최대 95%까지 높입니다.

색인으로 돌아가기

양식을 단순하고 간단하게 유지

단순함은 무엇이든 진정성 있고 친근하게 느끼게 하는 타고난 힘을 가지고 있습니다. 웹 양식을 디자인할 때도 마찬가지입니다. 웹 양식을 단순화하고 쉽고 간단한 커뮤니케이션 방법을 만드십시오. 연구를 하고 필요한 경우 양식이 사용자에게 방해가 되는 요소에 대한 간략한 연구를 수행하십시오.

양식에 정보를 제출하는 것에 대한 사용자의 무관심을 나타내는 연구가 있습니다. 이는 양식이 제대로 설계 및 관리되지 않으면 전환을 잃을 위험이 있음을 의미합니다. 그렇기 때문에 양식을 단순하고 작성하기 쉽게 유지하는 것이 현명할 것입니다.

색인으로 돌아가기

가장 관련성 높은 질문을 하세요

양식 작성에 대한 사용자의 관심을 확보하려면 사용자가 지루하지 않도록 진정으로 필요한 항목만 요청하십시오. 더 나은 UX를 보장하려면 즉시 구현해야 합니다. 최대 결과를 얻으려면 최소화하십시오.

한 가지, 양식을 디자인할 때 양식에 있는 입력 필드의 길이와 수는 고려해야 할 주요 구성 요소 중 일부임을 기억해야 합니다. 양식의 길이는 탈락률에 비례하기 때문입니다. 즉, 사이트에 더 긴 양식을 고수할수록 더 높은 이탈률을 기대할 수 있습니다.

한 번 Neil Patel은 자신의 기사 중 하나에서 연락처 양식에서 단일 양식 필드만 제거하여 전환율을 26%까지 높일 수 있었다고 밝혔습니다. 따라서 연락처 양식이 가장 관련성이 높은 질문으로 구성되어 있는지 확인하십시오.

다단계 양식 생성

다단계 양식을 만들기 위해 웹 양식을 디자인하는 것은 사용자 참여를 늘리고 양식을 덜 복잡하게 만드는 또 다른 좋은 방법이 될 수 있습니다. 즉, 양식을 여러 단계로 분할하면 양식을 작성하는 동안 피로가 덜해집니다.

다단계 양식을 만들도록 설계하는 동안 첫 번째 단계에서 2-3개 이상의 필드를 유지하지 마십시오. 이 외에도 양식의 진행률 표시줄은 사용자가 전체 양식 작성 프로세스를 완료하도록 동기를 부여합니다. 이렇게 하면 양식을 작성하는 동안 방해가 되지 않습니다.

색인으로 돌아가기

인라인 양식 유효성 검사

온라인 양식은 사용자로부터 가장 유효한 정보를 수집할 수 있도록 설계되어야 합니다. 예를 들어, 누군가 잘못된 정보를 제공하면 양식에 실수 시 빨간색 신호가 표시됩니다. 이 이벤트는 궁극적으로 사용자가 양식을 작성하는 데 도움이 됩니다.

양식 내에 유효성 검사를 배치하면 여러 가지 이점이 있습니다. 그 중 일부는 다음과 같습니다.

• 유효성 검사는 사용자가 양식을 작성하는 동안 오류를 이해하는 데 도움이 됩니다. 이렇게 하면 양식을 사용하여 제공하는 데이터의 정확성이 보장됩니다.
• 또한 사용자들 사이에 자신감을 제공합니다. 성공적으로 완료된 양식 작성은 시각적 피드백을 격려하는 엄지손가락을 나타냅니다.
• 사용자는 정확하고 유효한 정보를 제공함과 동시에 수신자도 확실한 데이터를 얻습니다.

대체 옵션 제공

사용자에게 사이트에 가입할 수 있는 방법을 제공하는 동안 이를 가능하게 하는 하나 이상의 대체 방법을 유지하세요. 이렇게 하면 해당 양식을 작성하려는 사용자의 관심이 확실히 높아집니다.

대체 옵션을 제공하는 가장 좋은 방법은 사용자가 Google, Facebook, Twitter 또는 다른 미디어를 통해 로그인할 수 있도록 하는 것입니다. 전반적으로 아이디어를 양식을 디자인하는 동안 실천해야 하는 "적을수록 좋다"는 철학으로 정의할 수 있습니다.

색인으로 돌아가기

이에 따라 양식 배치

웹 양식을 디자인한 후에는 올바른 위치에 배치해야 합니다. 이렇게 하면 사용자의 참여가 증가하고 적절한 사람들이 귀하가 제공하는 서비스를 신뢰하도록 하는 데 도움이 됩니다.

일부 통계에 따르면 참여 시간은 일반적으로 양식을 최상위 위치에 배치할 때 최고조에 달합니다. 이것은 사용자가 웹 사이트를 방문할 때 처음에 사용자의 관심을 사로잡습니다.

그러나 사용자가 페이지 콘텐츠를 보기 전에 구독 양식을 제출하는 것은 너무 무리해서 사용자를 짜증나게 할 수 있습니다. 간단히 말해서 페이지에서 양식을 배치해야 하는 위치에 대한 정해진 규칙은 없습니다. 특정 페이지의 목적, 비즈니스 목표, 청중의 일반적인 행동 등과 같은 여러 변수에 따라 다릅니다.

기본적으로 목표와 사용자가 필요로 하는 것 사이의 균형을 맞춰야 합니다. 양식을 적절하게 배치하십시오.

색인으로 돌아가기

강력한 클릭 유도문안 설정

통계에 따르면 B2B 마케터의 72%가 내부 페이지에 클릭 유도문안이 없다는 놀라운 사실이 있습니다. 강력하고 눈에 띄는 클릭 유도문안이 있는지 확인하세요. 양식을 디자인할 때 CTA는 전환과 이탈률 사이의 전환점이라는 점을 염두에 두십시오.

적절한 CTA는 사용자가 긍정적으로 행동하도록 강요하기 때문에 수많은 클릭으로 끝납니다. 게다가 너무 많은 CTA는 사람들을 혼란스럽게 만들기 때문에 제공하는 내용과 CTA 사본이 이를 보여주어야 합니다.

전반적으로 CTA의 크기, 색상 및 텍스트는 영향을 줄 수 있도록 중요해야 합니다. CTA를 브랜드 보이스와 어조에 맞출 수 있습니다. 총 사용자에게 영향을 줄 수 있는 긴박감을 조성하십시오.

색인으로 돌아가기

라벨 배치

레이블은 입력 필드에 입력해야 하는 정보에 대해 사용자에게 알려줍니다. 기본적으로 양식 필드 외부에 위치합니다. 양식 배치 자체와 마찬가지로 레이블 배치에는 정렬 및 배치 위치와 방법에 대한 명확한 지침이 없습니다. 대부분 상황과 요구 사항에 따라 다릅니다.

양식 디자이너는 자리 표시자를 사용하는 대신 레이블을 숨겨 양식에 애니메이션을 적용할 수 있습니다. 그러나 가장 일반적인 것은 양식 필드 외부에 배치하는 것입니다. 레이블을 정렬하여 사용자의 관심을 더 끌 수도 있습니다. 왼쪽 맞춤 레이블은 일반적으로 사용자로부터 더 많은 관심을 받습니다. 따라서 양식 레이블을 적절하게 디자인했는지 확인하십시오.

색인으로 돌아가기

자동 완성 추가

사용자가 이미 관련 필드에서 귀하의 서비스에 등록되어 있는 경우 자동 채우기를 고려하십시오. 이렇게 하면 특정 양식을 작성할 때 직면할 수 있는 시간과 불필요한 부담을 줄일 수 있습니다.

지리적 위치를 사용하여 일부 입력 필드를 자동으로 채울 수도 있습니다. 이렇게 하면 양식을 신속하게 작성하는 데 도움이 됩니다. 이 경우 모든 입력 필드를 사용자 정의에 사용할 수 있는지 확인하고 해당 양식을 채우는 동안 최대 제어를 제공합니다.

색인으로 돌아가기

GDPR 친화적 양식

유럽 ​​연합(EU)이 설정한 규정 내에서 작동하도록 양식을 GDPR 친화적으로 만드십시오. 이것은 오늘날 가장 중요한 측면 중 하나이며 EU 법률의 영향을 받지 않도록 비즈니스를 보호합니다.

GDPR의 영향을 받는 방법은 명확하지 않지만 모든 종류의 조직에 파괴의 원인이 될 수 있습니다. 이에 대해 적절한 연구를 하거나 GDPR을 다루는 전문가와 상담할 수 있습니다.배우다 웹사이트를 GDPR 친화적으로 만드는 방법에 대해 자세히 알아보세요.

또한 읽어보십시오: WordPress 플러그인을 사용하여 웹사이트를 GDPR 친화적으로 만드는 방법.

색인으로 돌아가기

여러 가지 잡다한

위에서 언급한 문제 외에도 웹사이트에서 더 나은 UX를 만들기 위해 고려해야 할 몇 가지 다른 문제가 있습니다. 아래 목록을 살펴보겠습니다.

• 일부 통계에 따르면 양식 필드의 자리 표시자는 종종 사용성을 해치고 때로는 양식 작성 프로세스를 복잡하게 만들 수 있습니다. 그러나 때로는 필드 레이블 대신에 유일한 자리 표시자를 유지하는 것이 좋은 선택이 될 수 있습니다. 상황에 따라 다릅니다. 예를 들어 뉴스레터 구독의 경우 레이블 대신 자리 표시자만 사용할 수 있습니다.
• 레이블과 자리 표시자를 동시에 유지할 필요는 없습니다.
• 필요한 경우 사용자가 양식을 더 쉽게 이해할 수 있도록 필드 레이블과 해당 입력 필드를 시각적으로 그룹화해야 합니다. 이 경우 느슨한 패딩에주의하십시오. 때로는 버즈킬이 될 수 있습니다.
• 시작점을 강조하기 위해 자동 초점을 강조할 수 있습니다. 이것은 사용자가 올바르게 시작하는 데 도움이 됩니다.
• 대문자는 읽기 어렵습니다. 레이블을 두 가지 조합으로 작성하는 것이 현명할 것입니다. 때때로 버튼 텍스트는 대문자로 작성될 수 있습니다.
• 버튼은 사용자의 직접적인 행동을 취하기 위한 것입니다. 따라서 버튼 디자인은 특별한 고려가 필요합니다. 버튼은 필드를 붙인 후에 디자인하고 생성해야 합니다.
• 양식 작성을 더 쉽게 하기 위해 마스크 입력을 통합하는 것을 잊지 마십시오.
• 드롭다운 메뉴를 사용하는 대신 라디오 버튼을 사용하는 것이 좋습니다. 이렇게 하면 양식 작성 프로세스가 빨라집니다. 양식 작성 절차를 쉽고 원활하게 만듭니다.
• 사용자가 제출 버튼을 누르기 전에 정보를 확인할 수 있는 비밀번호 미리보기 옵션 또는 기회를 유지합니다. 이 경우 누름 Caps Lock 버튼에 대해서도 사용자에게 알립니다.

색인으로 돌아가기

종료 전

양식은 웹 사이트에서 가장 없어서는 안될 부분 중 하나입니다. 그렇기 때문에 양식을 디자인한 다음 양식을 만드는 것이 사이트에 건전한 UX를 유지하는 데 중요한 측면이 될 수 있습니다. 양식을 디자인하기 전에 사용자의 관점에서 사물을 볼 필요가 있습니다.

모든 양식을 처음부터 끝까지 간결하게 만들고 사용자가 전체 양식을 작성할 수 있도록 하십시오. 관련 리소스에서 적절한 연구를 수행하고 필요한 최선의 노력을 기울이십시오. 양식은 전환 달성의 중요한 부분이므로 사용자가 빠르고 원활하게 양식을 통과할 수 있는지 확인하십시오.

결론

양식은 웹사이트의 중요한 부분이므로 디자인 및 생성에 주의해야 합니다. 웹 양식을 디자인하는 동안 A/B 테스트를 주도하고 현재의 모든 마케팅 동향을 조사하는 것이 항상 중요합니다.

또한 생성한 모든 양식이 모바일 친화적인지 확인해야 합니다. 여기에서 논의한 전술을 따른다면 웹사이트에 가장 적합한 방법이 될 것입니다.

내 권장 사항으로 WordPress 양식 빌더 플러그인을 사용하려면 WP Fluent Forms를 사용하여 WordPress의 UX를 개선하고 있는지 확인하십시오. 이 기사가 사이트 UX를 개선하기 위해 사이트에서 양식을 디자인하는 방법에 대해 더 많이 아는 데 도움이 되었기를 바랍니다. 컨텍스트와 관련하여 질문이 있는 경우 아래에 의견을 남겨 우려 사항을 알려주세요. 곧 다시 연락 드리겠습니다.

몇 가지 멋진 권장 읽기:

? TypeForm 대안

? Caldera Forms 대 WP Fluent Form

? 사용자 참여 증대