모바일 친화적인 양식 디자인을 위한 5가지 팁

문의 양식은 많은 웹사이트의 핵심 구성 요소입니다. 일반적으로 기능이 간단하지만 리드를 수집하고 사용자와 연락을 유지하려면 사용하기 쉬운지 확인해야 합니다. 이것은 일반적으로 데스크톱 트래픽의 문제가 아니지만 모바일 장치를 사용하는 경우 양식을 사용하는 것이 까다로울 수 있습니다.

이 기사에서는 모바일 친화적인 양식을 디자인하는 것의 중요성에 대해 조금 이야기할 것입니다. 그런 다음 양식이 모바일 장치에서 제대로 작동하도록 5가지 팁을 안내합니다.

일하러 가자!

모바일 친화적인 양식이 중요한 이유

양식은 모든 모양과 크기로 제공됩니다. 가장 일반적으로 연락처 양식을 처리하게 됩니다.

가입 양식(또는 옵트인)은 캠페인 중에 이메일을 수집하고 타겟팅할 수 있기 때문에 매우 인기가 있습니다.

그러나 양식은 다른 종류의 목적으로 사용될 수 있습니다. 예를 들어 온라인 설문조사나 퀴즈를 사용하여 정보를 수집할 수 있습니다. 이 경우 사용자가 응답을 입력할 수 있는 양식이 필요합니다.

다시 말해서, 양식은 매우 다재다능하며 거의 모든 사이트에서 어떤 방식으로든 양식을 사용합니다. 따라서 양식을 사용하기 쉽게 하는 것이 중요합니다(방문자에게 실망스러운 경험을 제공하지 않으려는 경우 제외).

데스크탑 컴퓨터나 랩탑에서 양식을 사용하는 것은 일반적으로 매우 간단합니다. 마우스와 풀 키보드가 있으므로 사용하려는 필드를 선택하고 데이터를 입력하는 데 문제가 없습니다. 그러나 스마트폰이나 다른 소형 장치에서 웹을 탐색하는 것은 복잡합니다.

작은 화면에서 손가락으로 작업할 때 잘못된 디자인 결정으로 인해 양식과 상호 작용하는 것이 때때로 고통스러울 수 있습니다. 이것은 자신의 디자인에서 피해야 하는 것입니다. 결국 모바일 사용자가 양식과 상호 작용할 수 없으면 전환, 리드를 놓치거나 방문자를 짜증나게 할 수 있습니다.

모바일 트래픽이 이제 데스크톱 소스보다 중요하지 않다는 사실을 이해하는 것도 중요합니다. 실제로 모바일 트래픽은 지난 몇 년 동안 이미 후자를 능가했습니다. 이는 모바일 친화적인 웹사이트를 디자인하는 것이 새로운 프로젝트를 시작할 때 주요 목표가 되어야 함을 의미합니다.

모바일 친화적인 양식을 디자인하기 위한 5가지 팁

다행히 모바일 친화적인 양식을 디자인하는 것은 생각만큼 어렵지 않습니다. 대부분의 경우 몇 가지 기본 사항을 염두에 두고 양식을 게시하기 전에 철저히 테스트하기만 하면 됩니다. 하는 방법에 대해 이야기합시다!

1. 불필요한 섹션 제거

양식에 포함된 필드가 많을수록 모바일에서 사용하기가 더 어려워집니다. 잘 설계된 것처럼 모바일에서 양식을 사용하는 것이 더 복잡하기 때문입니다. 양식에 포함된 필드 또는 섹션의 수를 줄임으로써 방문자가 양식을 작성할 가능성을 극대화할 수 있습니다.

다음은 몇 가지 추가 필드 없이 수행할 수 있는 연락처 양식의 간단한 예입니다.

대부분의 경우 우수한 연락처 양식에 필요한 것은 이름, 이메일, 수신하려는 메시지 본문뿐입니다. 다른 모든 것은 실행 중인 웹사이트의 종류와 리드를 수집하려는 경우에 따라 다릅니다.

궁극적으로 양식에 포함된 필드가 적을수록 모바일 방문자가 더 쉽게 사용할 수 있습니다. 결국 터치 스크린을 사용하여 필드를 선택하는 것은 잘 설계되어 있어도 어려울 수 있으므로 사용자가 해야 하는 '점프' 횟수를 최소화하고 싶습니다.

이 단계의 목표는 사이트의 기존 양식을 살펴보는 것입니다. 각 섹션을 살펴보고 앞에서 언급한 것 외에 추가 필드가 정말로 필요한지 고려하십시오. 불필요한 필드가 있으면 간단히 잘라냅니다.

2. 가능한 경우 드롭다운 목록 사용

우리 중 대부분은 모바일 장치에서 타이핑하고 터치스크린을 사용하는 데 익숙합니다. 그러나 친구에게 문자를 보내는 것과 연락처 양식을 작성하는 것은 매우 다른 경험입니다. 후자의 경우 많은 정보를 입력해야 하는 경우 좌절할 수 있습니다.

모바일 방문자의 삶을 더 쉽게 만들 수 있는 방법 중 하나는 사이트 요소와 관련하여 선택해야 하는 사항을 단순화하는 것입니다. 우리가 말하는 내용에 대한 아이디어를 제공하기 위해 이전 레스토랑 예약 예를 바탕으로 해 보겠습니다.

예약하려면 이름, 이메일, 전화번호를 남기고 시간 과 참석 인원을 표시해야 합니다. 예약 시간을 확인하기 위해 양식 필드를 만들 수 있는 두 가지 방법이 있습니다.

1. 숫자 입력만 허용하는 필드를 설정합니다.
2. 예약 가능한 모든 시간을 포함하는 드롭다운 목록을 디자인합니다.

상상할 수 있듯이 후자는 모바일 사용자에게 더 사용자 친화적입니다. 이 접근 방식을 사용하면 숫자를 입력할 필요가 없으며 포함된 옵션 중에서 가장 적합한 것을 선택할 수 있습니다.

양식을 살펴보고 드롭다운 메뉴로 대체할 수 있는 필드가 포함되어 있는지 확인하는 아이디어입니다. 드롭다운 메뉴를 사용하여 이름이나 이메일을 수집할 수 없기 때문에 항상 그런 것은 아니지만 작동할 수 있는 다른 옵션이 있습니다.

사용 사례가 무엇이든 관계없이 드롭다운 메뉴에 모바일 장치에서 쉽게 선택할 수 있는 옵션이 포함되도록 하고 싶습니다. 즉, 누군가가 올바른 옵션을 선택하기 위해 주변을 살피지 않아도 될 만큼 메뉴를 크게 만드십시오.

3. 제출 버튼이 터치하기 쉬운지 확인

이 팁은 매우 간단하지만 여전히 언급할 가치가 있습니다. 디자인하는 모든 양식에는 사용자가 입력한 데이터를 제출할 것인지 확인할 수 있는 방법이 포함되어야 합니다. 대부분의 경우 제출 버튼을 만드는 것을 의미합니다.

일반 컴퓨터를 사용할 때 제출 버튼을 클릭하는 것은 세상에서 가장 자연스러운 일입니다. 그러나 버튼을 누르는 것이 생각보다 훨씬 어려운 모바일에서 몇 가지 양식을 실행했습니다.

방문자가 양식에 입력한 정보를 제출할 수 없는 경우 귀하의 모든 노력은 헛된 것입니다. 또한 의도한 대로 작동하지 않는 제출 버튼만큼 비전문적으로 보이는 것도 없습니다.

모바일용으로 더 나은 제출 버튼을 디자인하려면 다음 세 가지 빠른 팁을 염두에 두어야 합니다.

1. 모바일 장치를 사용할 때 쉽게 누를 수 있을 만큼 충분히 큰지 확인하십시오.
2. 사용자가 잘못된 버튼을 누르지 않도록 버튼을 다른 요소에 너무 가까이 두지 마십시오.
3. 대비되는 색상이나 독창적인 타이포그래피를 사용하는 등의 방법으로 버튼을 강조 표시합니다.

이 모든 것 외에도 웹 사이트가 활성화되기 전에 버튼을 철저히 테스트하고 싶을 것입니다. 1분 안에 이를 수행하는 방법에 대해 더 자세히 알아보겠습니다. 지금은 성능에 대해 이야기하겠습니다.

4. 양식이 빠르게 로드되는지 확인

우리는 여러 기사에서 웹 사이트 성능에 대해 많이 이야기하지만 속도가 필요하기 때문이 아닙니다. 사실, 대부분의 사람들은 느린 웹사이트를 좋아하지 않습니다. 이는 절대적으로 이해가 됩니다.

인터넷 속도가 빨라짐에 따라 웹 사이트가 로드될 때까지 너무 오래 기다리는 것은 귀찮은 일이 될 수 있습니다. 또한 모바일 인터넷 속도는 일반 가정 연결보다 훨씬 더 다양한 경향이 있습니다. 이는 모든 사용자가 적절한(즉, 빠른) 인터넷 액세스를 가질 수 있는 것은 아니기 때문에 해당 사용자를 만족스럽게 유지하려면 웹사이트가 모바일 장치에 대해 고도로 최적화되어야 함을 의미합니다.

이 특정 팁은 일반적으로 전체 웹사이트에 적용될 수 있지만 양식을 표시하는 모바일 페이지에도 중요합니다. 사이트의 해당 부분을 로드하는 데 너무 오랜 시간이 걸리면 방문자와 접촉할 기회와 리드를 잃게 됩니다. 일반적으로 웹사이트는 로드하는 데 2초 이상 걸리지 않아야 합니다. 일단 그 선을 넘으면 이탈률이 극적으로 증가하는 경향이 있는데 이는 당신에게 끔찍한 소식입니다.

모바일 브라우징의 특성을 고려할 때 이 시간을 최대한 줄이는 것이 좋습니다. 이를 염두에 두고 사이트의 전반적인 성능을 높일 수 있는 방법은 많이 있습니다. 예를 들어 더 나은 호스팅 계획으로 업그레이드하고 속도에 최적화된 반응형 테마를 사용하고 이미지를 압축할 수 있습니다. 물론 이는 모든 사용자에게 도움이 되지만 더 작은 장치를 사용하는 사용자에게는 특히 유용합니다.

5. 양식을 게시하기 전에 테스트하십시오.

양식이 대부분의 웹사이트에서 중요한 요소라는 점을 고려하면 양식을 게시하기 전에 철저히 테스트해야 합니다. WordPress를 사용하면 이 프로세스가 충분히 간단합니다. 계속 진행하여 양식을 표시할 특정 페이지를 디자인하고 완전히 테스트할 때까지 게시하지 않을 수 있습니다.

물론 사용하려는 플러그인이나 테마는 사용자에게 달려 있습니다(모바일 사이트 개발에 도움이 되는 한). 그러나 테스트 단계가 진행되는 한 작업을 단순하게 유지하고 Chrome 개발자 도구와 같은 도구를 사용하여 작업을 완료하는 것이 좋습니다.

간단한 예를 살펴보겠습니다. Chrome을 사용하는 경우 테스트하려는 양식이 포함된 페이지를 미리 봅니다. 그런 다음 해당 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 검사 옵션을 선택합니다. Chrome은 페이지의 소스 코드를 검토하고 편집하는 데 사용할 수 있는 도구 모음을 오른쪽과 왼쪽으로 표시합니다. 모바일 장치에서 어떻게 보이는지 미리 볼 수 있습니다.

화면 상단에는 다양한 해상도 간에 전환하는 데 사용할 수 있는 메뉴가 있습니다. Chrome에는 여러 인기 있는 휴대기기에 대한 설정이 포함되어 있지만 사용자 지정 해상도를 입력할 수도 있습니다.

이 시점에서 연락처 양식이 여러 장치에서 어떻게 보이고 작동하는지 확인해야 합니다. 아래의 예를 살펴보십시오. 양식은 완벽하게 작동하지만 예상만큼 확장되지 않는 것을 볼 수 있습니다. 특히 화면 테두리에 너무 가까운 텍스트와 아이콘에 주의를 기울이십시오.

이 문제를 방지하는 한 가지 방법은 첫 번째 팁에서 설명한 대로 양식을 단순하게 유지하는 것입니다. 아래 예에서 양식은 여러 드롭다운 목록을 사용하며 세 개의 필드만 필요합니다. 따라서 사용하기 쉽고 더 중요한 것은 양식이 매우 간단하여 모든 장치에서 완벽하게 확장되어야 한다는 것입니다.

양식에 문제가 있는 경우 즉시 수정해야 합니다. 그렇지 않으면 모바일 청중을 소외시킬 위험이 있습니다. 이는 우리가 처음부터 피하려고 하는 것입니다!

결론

웹사이트가 모바일 친화적인지 확인하는 것은 트래픽을 유지하고 방문자를 실망시키지 않는 데 가장 중요합니다. 특히, 메시지를 받거나 귀중한 리드를 수집하는 것을 놓치고 싶지 않다면 양식은 모바일 장치에서 사용하기 쉬워야 합니다.

모바일 친화적인 양식 디자인과 관련하여 다음은 삶을 더 쉽게 만드는 5가지 빠른 팁입니다.

1. 불필요한 섹션을 제거하십시오.
2. 가능하면 드롭다운 목록을 사용하십시오.
3. 제출 버튼을 누르기 쉬운지 확인하세요.
4. 양식이 빠르게 로드되도록 합니다.
5. 양식을 게시하기 전에 테스트하십시오.

Divi를 사용하여 모바일 친화적인 양식을 만드는 방법에 대해 질문이 있습니까? 아래 댓글 섹션에서 문의하세요!

Irina Adamovich/Shutterstock.com의 기사 축소판 이미지.