문의 양식은 많은 웹 사이트의 핵심 구성 요소입니다. 일반적으로 간단하지만 리드를 수집하고 사용자와 연락을 유지하려면 사용하기 쉬운 지 확인해야합니다. 이것은 일반적으로 사무실 트래픽에 문제가되지 않지만 모바일 장치를 사용하는 경우 양식 사용이 어려울 수 있습니다.
이 튜토리얼에서는 모바일 친화적 인 양식을 디자인하는 것의 중요성에 대해 조금 이야기 할 것입니다. 다음으로 양식이 모바일 장치에서 원활하게 작동하는지 확인하기위한 XNUMX 가지 팁을 안내합니다.
일하자!
모바일 친화적 인 양식이 중요한 이유
양식은 모든 모양과 크기로 제공됩니다. 대부분의 경우 연락처 양식을 다룰 것입니다.
가입 (구독) 양식은 또한 이메일을 수집하고 캠페인 중에 대상을 지정할 수 있기 때문에 매우 인기가 있습니다.
그러나 양식은 모든 종류의 다른 용도로 사용할 수 있습니다. 예를 들어 다음을 사용하여 정보를 수집 할 수 있습니다. 온라인 설문 조사 또는 설문 조사 ,이 경우 사용자가 응답을 입력 할 수있는 양식이 필요합니다.
즉, 양식은 매우 다양하며 거의 모든 사이트에서 어떤 방식 으로든 양식을 사용합니다. 따라서 양식을 사용하기 쉬운 것이 중요합니다 (방문자에게 실망스러운 경험을 제공하고 싶지 않은 경우).
데스크톱이나 랩톱 컴퓨터에서 양식을 사용하는 것은 일반적으로 매우 쉽습니다. 전체 마우스와 키보드가 있으므로 사용하려는 필드를 선택하고 데이터를 입력하는 것이 문제가되지 않습니다. 그러나 스마트 폰이나 기타 소형 장치에서 웹을 탐색하는 것은 복잡합니다.
작은 화면에서 손가락으로 작업 할 때 잘못된 디자인 결정으로 인해 양식과 상호 작용하는 것이 어려울 수 있습니다. 이것은 자신의 디자인에서 피해야 할 것입니다. 결국 모바일 사용자가 양식과 상호 작용할 수 없으면 전환, 리드를 잃거나 방문자를 성가 시게 할 수 있습니다.
모바일 트래픽이 이제 데스크톱 소스보다 더 중요하지는 않지만 중요하다는 사실을 이해하는 것도 중요합니다. 실제로 최근 몇 년 동안 모바일 트래픽이 이미 후자를 추월했습니다. 즉, 새로운 프로젝트를 시작할 때 모바일 친화적 인 웹 사이트를 디자인하는 것이 주요 목표 여야합니다.
사용하기 쉬운 모바일 양식 설계를위한 5 팁
다행히 모바일 친화적 인 양식을 디자인하는 것은 상상하는 것만 큼 어렵지 않습니다. 대부분의 경우 몇 가지 기본 사항을 염두에두고 양식을 사용하기 전에 철저히 테스트하면됩니다. 방법에 대해 이야기합시다!
1. 불필요한 섹션 모두 삭제
양식에 포함 된 필드가 많을수록 모바일에서 사용하기가 더 어려워집니다. 실제로 모바일에서 양식을 사용하는 것은 더 복잡합니다. 양식에 포함 된 필드 또는 섹션의 수를 줄이면 방문자가 양식을 작성할 가능성을 극대화 할 수 있습니다.
다음은 간단한 예입니다. 연락처 양식 모바일에서는 필요하지 않은 몇 가지 추가 필드가 있습니다.
대부분의 경우 훌륭한 서비스를 제공하기 위해 필요한 모든 것 연락처 양식 수신하려는 메시지의 이름, 이메일 및 본문입니다. 다른 모든 것은 사용 중인 웹사이트 유형과 잠재 고객을 수집하려는 경우에 따라 다릅니다.
궁극적으로 양식에 필드가 적을수록 모바일 방문자가 더 쉽게 사용할 수 있습니다. 결국 터치 스크린을 사용하여 필드를 선택하는 것은 사용자가 만들어야하는 홉 수를 최소화하기 위해 아무리 잘 설계 되었더라도 까다로울 수 있습니다.
이 시점에서 목표는 사이트의 기존 양식을 검토하는 것입니다. 각 섹션을 살펴보고 앞서 언급 한 필드 외에 추가 필드가 정말로 필요한지 확인합니다. 불필요한 필드가 있으면 삭제하면됩니다.
2. 가능하면 드롭 다운 목록을 사용하십시오.
우리 대부분은 모바일 장치에서 타이핑하고 터치스크린을 사용하는 것을 편안하게 느낍니다. 하지만 친구에게 문자를 보내고, 연락처 양식 두 가지 매우 다른 경험입니다. 이것으로 많은 정보를 입력해야 한다면 좌절감을 느낄 가능성이 높습니다.
모바일 방문자의 삶을 더 쉽게 만드는 한 가지 방법은 사이트 요소에 대한 선택을 단순화하는 것입니다. 우리가 말하는 내용에 대한 아이디어를 제공하기 위해 이전 예를 활용해 보겠습니다. 예약 레스토랑:
만들기 위해 예약, 이름, 이메일, 전화번호를 남겨야 할 것입니다. et 시간과 참석 인원수를 표시합니다. 시간을 확인하기 위해 양식 필드를 만드는 방법에는 두 가지가 있습니다. 예약:
- 숫자 만 입력 할 수있는 필드를 구성하십시오.
- 예약 가능한 모든 시간을 포함하는 드롭 다운 목록을 디자인하십시오.
상상할 수 있듯이 후자는 모바일 사용자에게 더 사용자 친화적입니다. 이 접근 방식을 사용하면 숫자를 입력 할 필요가 없으며 포함 된 옵션에서 자신에게 가장 적합한 것을 선택할 수 있습니다.
양식을보고 드롭 다운 메뉴로 바꿀 수있는 필드가 포함되어 있는지 확인하는 아이디어입니다. 드롭 다운 메뉴를 사용하여 이름이나 이메일을 수집 할 수 없기 때문에 항상 그런 것은 아니지만 다른 옵션을 사용할 수 있습니다.
사용 사례가 무엇이든 드롭 다운 메뉴에 모바일 장치에서 쉽게 선택할 수있는 옵션이 포함되어 있는지 확인해야합니다. 즉, 누군가가 올바른 옵션을 선택하기 위해 쪼개지 않아도되도록 메뉴를 크게 만드십시오.
3. 제출 버튼을 쉽게 터치 할 수 있는지 확인
이 팁은 매우 간단하지만 여전히 언급해야합니다. 디자인하는 모든 양식에는 사용자가 입력 한 데이터를 제출할 것인지 확인할 수있는 방법이 포함되어야합니다. 대부분의 경우 제출 버튼을 만드는 것을 의미합니다.
일반 컴퓨터를 사용할 때 제출 버튼을 클릭하는 것은 세상에서 가장 자연스러운 일입니다. 그러나 모바일에서 버튼을 누르기가 훨씬 더 어려운 몇 가지 양식을 발견했습니다.
방문자가 양식에 입력 한 정보를 제출할 수 없으면 모든 노력이 낭비됩니다. 또한 버튼만큼 전문적이지 않은 것은 없습니다. 전송 예상대로 작동하지 않습니다.
모바일 용 제출 버튼을보다 잘 디자인하려면 다음 세 가지 팁을 고려해야합니다.
- 모바일 장치에서 쉽게 탭할 수있을만큼 충분히 큰지 확인하십시오.
- 사용자가 버튼을 올바르게 터치하지 않도록 버튼을 다른 항목에 너무 가까이 두지 마십시오.
- 예를 들어 대비되는 색상이나 창의적인 타이포그래피를 사용하여 버튼을 강조하십시오.
무엇보다도 사이트가 시작되기 전에 버튼을 테스트하고 싶을 것입니다. 이 작업을 수행하는 방법에 대해 잠시 후에 더 자세히 살펴 보겠습니다. 지금은 성능에 대해 이야기하겠습니다.
4. 양식이 빨리로드되는지 확인하십시오.
많은 기사에서 웹 사이트 성능에 대해 많이 이야기하지만 속도가 필요하기 때문이 아닙니다. 요점은 대부분의 사람들이 느린 웹 사이트를 좋아하지 않는다는 것입니다.
인터넷 속도가 빠르기 때문에 웹 사이트가 너무 오래로드 될 때까지 기다리기가 어려울 수 있습니다. 또한 모바일 인터넷 속도는 일반 가정 연결보다 훨씬 더 다양한 경향이 있습니다. 즉, 모든 사용자가 인터넷에 액세스 할 수있는 것은 아니기 때문에 (즉, 빠른) 이러한 사용자를 행복하게 유지하려면 모바일 장치에 맞게 웹 사이트를 고도로 최적화해야합니다.
이 특정 팁은 전체 웹 사이트에 적용될 수 있지만 양식을 표시하는 모바일 페이지에도 중요합니다. 사이트의 이러한 부분을로드하는 데 너무 오래 걸리는 경우 당신 개종을 잃다 방문자와 연결할 수있는 기회
일반적으로 웹 사이트는로드하는 데 XNUMX 초 이상 걸리지 않습니다. 이 한도를 초과하면 이탈률이 급격히 증가하는 경향이 있으며 이는 끔찍한 소식입니다. 모바일 브라우징의 특성을 고려할 때이 시간을 가능한 한 낮게 유지하는 것이 가장 좋습니다. .
이를 염두에 두고 사이트의 전반적인 성능을 향상시킬 수 있는 방법은 여러 가지가 있습니다. 예를 들어 더 나은 요금제로 업그레이드할 수 있습니다.편의, 속도에 최적화된 반응형 테마를 사용하세요. 이미지 압축. 물론 이것은 모든 사용자에게 도움이 될 것이지만 특히 작은 장치를 사용하는 사람들에게 유용합니다.
5. 게시하기 전에 양식을 테스트하십시오.
양식이 대부분의 웹 사이트의 핵심 부분이라는 점을 고려할 때 양식을 게시하기 전에 철저히 테스트하는 것이 좋습니다. WordPress를 사용하면이 프로세스가 매우 간단합니다. 계속해서 특정 페이지를 디자인하여 양식을 표시하고 완전히 테스트 할 때까지 게시하지 않을 수 있습니다.
물론, 사용하려는 플러그인이나 테마는 귀하에게 달려 있습니다 (모바일 사이트 개발에 도움이되는 한). 그러나 테스트 단계에서는 간단하게 유지하고 다음과 같은 도구를 사용하는 것이 좋습니다. 도구 개발의 크롬 일을하기 위해서.
간단한 예를 살펴 보겠습니다. Chrome을 사용하는 경우 테스트 할 양식이있는 페이지를 미리 봅니다. 그런 다음이 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 옵션을 선택하십시오. 검사 . Chrome은 페이지 소스 코드를 검토하고 편집하는 데 사용할 수있는 도구 모음을 오른쪽과 왼쪽에 표시하며 모바일 장치에서 모양을 미리 볼 수 있습니다.
화면 상단에있는 메뉴를 사용하여 다른 해상도로 전환 할 수 있습니다. Chrome에는 널리 사용되는 여러 휴대 기기에 대한 설정이 포함되어 있지만 맞춤 해상도를 입력 할 수도 있습니다.
이 시점에서 여러 장치에서 연락처 양식의 모양과 동작을 확인해야합니다. 아래의 예를 살펴보면 양식이 잘 작동하지만 제대로 맞지 않음을 알 수 있습니다. 특히 화면 가장자리에 너무 가까운 텍스트와 아이콘에 특히주의하십시오.
이 문제를 방지하는 한 가지 방법은 첫 번째 팁에서 언급했듯이 양식을 단순하게 유지하는 것입니다. 아래 예에서 양식은 여러 드롭 다운 목록을 사용하며 XNUMX 개의 필드 만 필요합니다. 이렇게하면 사용하기 쉽고 더 중요한 것은 양식이 너무 간단하여 모든 장치에 완벽하게 맞아야한다는 것입니다.
양식에 문제가있는 경우 당연히 문제를 해결해야합니다. 그렇지 않으면 모바일 청중을 멀어지게 할 위험이 있습니다.
결론
웹 사이트가 모바일 장치와 호환되는지 확인하는 것은 트래픽을 유지하고 방문자를 실망시키지 않는 핵심입니다. 특히 메시지 수신이나 귀중한 리드 수집을 놓치고 싶지 않은 경우 모바일 장치에서 양식을 쉽게 사용할 수 있어야합니다.
모바일 친화적 인 양식을 디자인 할 때 다음과 같은 다섯 가지 팁을 통해 생활을 단순화합니다.
- 모든 불필요한 부분을 삭제하십시오.
- 가능하면 드롭 다운 목록을 사용하십시오.
- 제출 버튼을 쉽게 누르십시오.
- 양식이 빨리 로딩되는지 확인하십시오.
- 양식을 게시하기 전에 양식을 테스트하십시오.
