모바일 사용자 전환을 위한 초보자 가이드

기차를 타거나 공항에 앉아 있거나 단순히 소파에 누워 스마트폰으로 온라인 양식을 작성해야 했던 때를 생각해 보십시오. 모바일 폼 디자인에 주목한 적이 있나요?

당신이 눈치채지 못했을 가능성이 있습니다. 사용자가 양식을 매끄럽게 채우고 하루를 계속할 수 있는 직관적인 경험을 제공하는 것이 목표입니다.

이 가이드에서는 이를 수행하는 가장 효과적인 방법을 검토합니다. 여기에서는 투박하거나 잘못 정렬되지 않고 전환율을 높이고 훌륭한 사용자 경험을 만드는 데 도움이 되는 모바일 양식을 디자인하는 방법을 배웁니다.

목차

모바일 대 데스크탑 양식 디자인

오늘날 웹사이트 방문자는 데스크톱 컴퓨터에서 단순히 사이트를 탐색하고, 콘텐츠를 보고, 양식을 작성하는 것이 아닙니다. 또한 모바일 장치에서 이러한 작업을 완료하고 있습니다.

모바일은 2022년 4월부터 6월까지 전 세계 웹사이트 트래픽의 거의 60%를 차지했습니다. 즉, 모바일 장치를 통해 양식을 간단하게 검토, 작성 및 제출하는 것이 중요합니다.

모바일 폼 디자인이 중요한 이유는 무엇입니까?

최고의 모바일 양식 디자인은 긍정적인 사용자 경험을 제공하여 고객으로 전환하고 재방문자가 될 가능성이 높은 행복한 웹 사이트 방문자를 보장합니다.

모바일 양식의 디자인, 레이아웃 및 기능은 웹 사이트의 전반적인 사용자 경험에서 큰 역할을 합니다.

양식이 모바일 친화적이지 않은 경우 전환율 감소, 모바일 사이트 트래픽 손실, 불만족스러운 고객 증가를 경험할 수 있습니다. 누가 그걸 원해?

모바일 양식 디자인이 데스크탑 디자인과 다른 이유는 무엇입니까?

수상 경력이 있는 마케팅 인플루언서이자 전략가인 Lilach Bullock은 "모바일에서는 모든 것이 다르게 작동하므로 마케팅 담당자는 웹사이트의 모든 요소가 항상 모바일에 최적화되어 있는지 확인해야 합니다."라고 말합니다.

"물론 여기에는 양식도 포함됩니다. 특히 모바일에서 계속해서 양식을 작성해야 하는 것처럼 느껴지기 때문입니다."

구체적으로, 일반적으로 크기가 4.7인치에서 6.7인치인 Apple iPhone과 같은 모바일 장치 간의 디스플레이 또는 화면 크기의 차이를 생각해 보십시오. 일반적으로 크기가 13인치에서 24인치인 Mac 노트북 또는 데스크탑. iPhone 화면에 맞는 형태가 데스크톱 화면에 완벽하게 맞지 않을 것이라고 가정하는 것이 안전합니다.

모바일 방문자가 양식을 쉽게 읽고 작성하고 제출할 수 없는 경우 비즈니스를 잃을 수 있습니다. 따라서 모든 모바일 장치의 화면에 맞는 모바일 친화적인 양식을 만드는 것은 방문자에게 지속적인 인상을 남기고 전환율을 높이는 데 도움이 되는 훌륭한 사용자 경험을 만드는 데 매우 중요합니다.

반응형 웹 디자인이란?

모바일 양식 디자인을 한 단계 더 발전시키고 모든 유형의 장치에서 전체 웹 사이트가 작동하는지 확인하려면 반응형 웹 사이트 디자인을 구현할 수 있습니다.

반응형 웹 디자인은 사용자의 화면 크기, 플랫폼, 방향 및 환경을 고려합니다. 많은 사람들이 다양한 장치에서 다양한 웹 사이트를 지속적으로 방문하고 탐색하기 때문에 이것은 훌륭한 사용자 경험을 만드는 간단하고 효과적인 방법입니다.

사이트가 반응형 디자인인지 확인할 수 있는 몇 가지 방법이 있습니다. 예를 들어 WordPress 사용자인 경우 설치하고 사이트를 디자인하는 데 사용할 수 있는 몇 가지 반응형 WordPress 테마가 있습니다.

또한 Squarespace와 같은 소프트웨어를 사용하여 사이트를 구축 중이거나 구축한 경우 사이트에 반응형 웹 디자인이 자동으로 제공될 수 있습니다.

오늘날 반응형 웹 디자인은 다양한 모바일 장치를 통해 웹 사이트를 방문하는 사람들의 수가 많기 때문에 비즈니스에서 인기 있는 선택입니다. 하지만 지금은 모바일 양식 디자인에 대해 다시 논의해 보겠습니다.

모바일 폼 디자인: 11가지 UX 가이드라인

Bullock은 “모바일 양식을 디자인할 때 일을 단순하게 유지하고 최대한 빠르게 만드는 것이 중요합니다. [Forms]는 모바일에서 완료하기가 더 어렵고 모든 것이 예상보다 오래 걸리는 것처럼 느껴집니다.”

즉, 가장 중요한 것은 최종 사용자를 위한 단순성입니다. 모바일 친화적인 양식을 만들 때 방문자에게 최상의 사용자 경험을 제공하기 위해 수행해야 할 몇 가지 단계가 있습니다. 오늘 구현을 시작할 수 있는 이러한 모바일 양식 디자인 모범 사례 중 11가지를 검토해 보겠습니다.

1. 양식 필드의 수를 최소화하십시오.

"Less is more"라는 말을 들어본 적이 있습니까? 음, 모바일 양식을 만들 때 생각해야 할 것이 바로 그것입니다.

모바일 장치의 화면 크기와 양식에 배치해야 하는 콘텐츠의 양 사이에서 실수로 양식이 복잡하게 느껴지기 쉽습니다. 불필요한 보풀을 제거하는 것을 잊지 마십시오. 절대적으로 필요한 정보에 대해서만 양식 필드를 보관하십시오.

프로세스를 간소화하기 위해 양식 필드에 명확하고 간결하게 레이블을 지정하고 선택적 필드를 "선택 사항"으로 표시하거나 필수 항목 옆에 별표를 포함하는 것이 좋습니다.

이미지 출처

목표는 사람들이 양식을 작성할 가능성이 높아지도록 양식을 최대한 쉽게 작성하는 것입니다.

2. 가능한 경우 입력을 자동화합니다.

실수로 주소를 잘못 입력하여 양식에서 맞춤법을 수정한 경우 양식에서 응답을 자동 으로 수정합니다.

배송 주소를 입력하기 시작하고 저장된 주소로 나머지 양식 필드를 "자동 입력"할지 묻는 나머지 주소가 포함된 상자가 나타나면 양식이 응답을 자동 완성 하는 것입니다.

모바일 양식에 자동 수정 및 자동 채우기 기능을 구현하면 사용자가 세부 정보를 빠르고 간단하고 간단하게 입력할 수 있어 사용자 경험이 향상됩니다.

아래 예에서 표시되는 작은 팝업을 클릭하여 쉽게 정보를 자동으로 채울 수 있습니다.

이미지 출처

3. 단일 열 레이아웃을 사용합니다.

길거나 다단계 양식을 만드는 경우 모든 콘텐츠를 단일 열 레이아웃으로 나열합니다.

이미지 출처

단일 열 양식 레이아웃은 다음과 같습니다.

ㅏ. 더 쉽게 읽을 수 있습니다.

모든 양식 필드를 단일 열 형식으로 배치하면 방문자가 한 번에 하나의 항목에만 집중할 수 있으므로 양식을 더 쉽게 읽을 수 있습니다.

비. 덜 벅차다.

특히 모바일 장치에서와 같이 좁은 공간에서 양식을 보고 많은 양의 콘텐츠가 뭉쳐 있는 것을 보면 압도당할 수 있습니다. 그렇기 때문에 콘텐츠를 행으로 구분하고 양식 필드를 단일 열 형식으로 배치하면 콘텐츠가 덜 위협적으로 보이고 느껴집니다.

씨. 더 빨리 완료할 수 있습니다.

다중 단계 양식을 단일 열에 배치하면 리드가 다중 열 양식보다 더 빨리 완료할 수 있습니다. 형식을 사용하면 양식을 더 쉽게 읽고 단계별로 작업할 수 있기 때문입니다.

데스크톱이나 노트북에서 볼 때 HubSpot 웹 사이트에서 이 가입 양식을 살펴보십시오.

이미지 출처

더 넓은 화면에 작업할 공간이 충분하므로 2열 레이아웃이 적합합니다. 이제 모바일 장치에서 볼 때 동일한 양식을 확인하십시오.

이미지 출처

이 단일 열 레이아웃을 사용하면 컴팩트한 모바일 화면에서 혼란을 방지하면서 시선이 자연스럽게 흐를 수 있습니다.

4. 일관성이 중요합니다(외모도 마찬가지입니다).

랩톱에서 폴더나 열린 탭을 어떻게 닫습니까?

오른쪽 상단 모서리에 있는 'x' 버튼을 클릭합니다.

하지만 특정 애플리케이션에서 버튼이 나타나지 않으면 어떻게 될까요? 창문을 닫으러 갔을 때 기분이 어땠을까요?

혼란스럽거나 짜증이 났을 수도 있습니다. 응용 프로그램을 종료하는 방법을 파악하는 데 1~2분 정도 소요될 수 있습니다.

이것은 광범위한 예에 불과하지만 일관성의 중요성을 잘 보여줍니다. 자세한 내용은 이 비디오를 시청하십시오.

양식 디자인의 일관성은 스타일(색상, 타이포그래피, 로고 등)에만 적용되는 것이 아니라 사람들에게 익숙한 일반적으로 허용되는 규칙에도 적용됩니다.

다음은 일관된 경험을 보장하기 위한 몇 가지 팁입니다.

• 양식의 모양과 느낌을 브랜드 및 웹사이트에 맞추십시오.
• 양식의 스타일과 서식이 일관되고 상호 보완적인지 확인하세요(어떠한 부분도 어색하거나 어울리지 않아야 함).
• 양식 필드 입력을 왼쪽에 맞춥니다.
• 해당 입력 상자 위에 각 레이블을 부착하고 왼쪽 정렬합니다.
• 필수 질문을 표시하려면 별표를 사용하십시오.

이미지 출처

첫인상은 (인생과 사업에서) 지속적인 인상을 남깁니다. 그것은 모바일 양식에 적용됩니다. 아무도 어둡고 읽기 어렵고 어수선하고 매력적이지 않은 형태를 완성하고 싶어하지 않습니다.

귀하의 모바일 양식은 매우 기능적일 뿐만 아니라 심미적으로 보기에도 좋아야 합니다. 외관은 가독성과 긍정적인 사용자 경험에 기여해야 합니다. 이를 달성하려면 간단하고 읽기 쉬운 글꼴 스타일과 크기, 압도적이지 않은 색상 팔레트, 최소한의 양식 필드를 사용하세요.

5. 터치 경험을 염두에 두십시오.

문자를 보내는 동안 휴대전화를 어떻게 잡고 있는지 생각해 보세요.

엄지손가락을 사용하여 화면과 상호 작용하는 동안 두 손으로 전화기를 쥐고 있을 가능성이 높습니다. 또는 한 손으로 입력하거나 검지 손가락을 사용하여 입력할 수도 있습니다.

우리는 노트북이나 데스크탑과는 매우 다르게 스마트폰과 상호 작용하며(엄지 손가락으로 문자 메시지 보내기) 모바일 양식 디자인은 이를 반영해야 합니다.

다음은 염두에 두어야 할 몇 가지 제안 사항입니다.

• 양식을 어수선하지 않게 유지하고 실수로 버튼을 누르는 일이 없도록 적절한 공백을 두십시오.
• 버튼이 논리적으로 배치되었는지 확인합니다(예: 제출 버튼이 양식 하단 근처에 있으므로 사용자가 위로 스크롤할 필요가 없음).
• 작은 모바일 화면에서 텍스트(글꼴 크기 및 스타일)를 읽을 수 있는지 확인합니다(텍스트를 읽기 위해 화면을 확대하고 확대하는 사람은 아무도 없습니다).
• 양식 필드와 버튼이 손가락으로 편안하게 누를 수 있을 만큼 충분히 큰지 확인하십시오.
• 쉽게 접근할 수 있도록 양식 팝업을 화면 하단(가능한 경우)으로 만듭니다.

이미지 출처

6. 입력 제약을 활용하십시오.

입력 제약 조건은 사람이 양식 필드에 입력할 수 있는 응답 유형을 제한합니다. 여기에는 단어 제한(예: 구직 지원서를 작성하는 동안) 또는 숫자만 입력할 수 있는 것(전화 번호의 경우)이 포함될 수 있습니다.

이것은 사람이 자신의 전화번호를 입력하려고 할 때 숫자 키보드가 팝업되는 아래 양식에서 볼 수 있습니다.

이미지 출처

입력 제약 조건은 부주의한 실수, 지연 또는 혼란을 제한하여 양식 효율성을 극대화합니다. 예를 들어 누군가가 식당에서 테이블을 예약하려고 할 때 실수로 과거 날짜를 선택한 경우 제약 조건으로 인해 실제로 해당 날짜를 선택하고 확인할 수 없습니다.

화면이 작을수록 정보를 정확하게 입력하기 어렵기 때문에 모바일용으로 디자인할 때 특히 중요합니다. 입력 제한을 설정하면 양식 필드를 작성하는 동안 사람들의 시간을 절약하고 장황하거나 유효하지 않은 답변을 받는 것을 방지할 수 있습니다.

다음은 입력 제약 조건의 또 다른 예입니다.

이미지 출처

7. 명확한 작업 버튼을 만듭니다.

버튼은 모바일 양식 디자인에서 과소평가된 측면입니다. 생각해보세요. 오른쪽 버튼을 누른 후에만 양식 제출 또는 전환이 발생합니다. 그래서 이 요소를 간과할 수 없습니다.

이 UI 치트 시트와 UX Planet 블로그는 효과적인 버튼 디자인을 위한 훌륭한 리소스입니다. 다음은 모바일 양식에 적용할 수 있는 언급된 원칙 중 일부에 대한 빠른 실행입니다.

• 버튼이 너무 많으면 국물이 망가집니다(양식 필드와 마찬가지로 필수 버튼만 유지).
• 단추의 스타일을 지정하고 레이블을 일관되게 지정하십시오(대소문자, 서식 지정, 정렬 등).
• 기본 버튼(사용자가 취하기를 원하는 주요 작업)을 크기나 색상으로 눈에 띄게 만들어 초점을 맞추세요.
• Right is right — 모바일의 일반적인 경험 법칙은 기본 버튼을 오른쪽에 배치하고 두 번째 버튼을 왼쪽에 배치하는 것입니다(개인의 필요에 따라 다를 수 있음).
• 특정 레이블이 거의 항상 대답입니다("편집"보다 "이 페이지 편집").

이미지 출처

8. 지불을 위해 카드 스캐너를 제공하십시오.

스마트폰을 통해 양식에 신용카드 정보를 입력해 보셨습니까? 작은 화면에 작은 키보드로 여러 숫자를 입력하는 것은 지루한 과정이 될 수 있습니다.

바로 그 이유로 Microblink와 같은 카드 스캔 앱이 점점 인기를 얻고 있습니다. 구매할 때 방문자는 버튼을 클릭하여 모바일 장치의 카메라를 사용하여 면허증이든 신용 카드든 관계없이 카드 앞면과 뒷면의 안전한 사진을 찍을 수 있는 화면으로 이동할 수 있습니다.

이미지 출처

몇 장의 사진만 있으면 모바일 양식 작성 프로세스에서 가장 시간이 많이 걸리는 부분 중 하나로 리드가 완료되어 방문자를 효율적으로 유지하고 좌절과 오류 없이 유지할 수 있습니다.

9. 특정 정보의 필요성을 설명하십시오.

간단한 이메일 가입이나 회원가입 양식을 작성할 때 회원가입 양식과 관련 없는 개인정보를 입력하라는 요청을 받은 적이 있으신가요?

이는 모바일뿐만 아니라 모든 유형의 양식에서 흔히 발생하는 현상입니다. 귀하의 필요성을 설명하지 않고 다른 사람에게 개인 정보 또는 기타 민감한 정보를 요청하는 것은 개략적으로 보일 수 있습니다.

방문자가 양식을 작성하는 이유와 직접적인 관련이 없는 질문을 할 때 이 정보를 요청하는 이유를 이해하기 위해 방문자가 클릭할 수 있는 요약 상자(추가 정보 포함)를 만드는 것이 중요합니다.

이러한 표시기는 지침이 즉시 명확하지 않을 때 양식 필드 작성에 대한 추가 지침을 제공하는 데 도움이 될 수도 있습니다. 아래 이미지에서 사람이 아이콘 위로 마우스를 가져가면 요약 상자가 나타납니다.

이미지 출처

이러한 작은 세부 사항은 사용자가 도중에 떠날 확률을 줄이면서 양식을 전문적이고 사려 깊게 만듭니다.

10. 확인 및 피드백을 수집합니다.

사용자 경험은 우수한 모바일 양식 디자인의 핵심입니다. 그리고 검증과 피드백은 훌륭한 UX를 제공하는 데 중요한 역할을 합니다.

유효성 검사를 통해 사람들은 입력한 정보가 올바른지 아닌지 알 수 있습니다. 아래 양식 필드에서 녹색 체크 표시를 확인하십시오.

이미지 출처

모바일 양식을 작성하는 동안 방문자는 여기저기서 실수를 할 수밖에 없습니다. 양식은 이러한 오류를 실시간으로 표시하여 사용자가 즉시 수정할 수 있도록 해야 합니다.

예를 들어 누군가가 주소 옆에 잘못된 우편번호를 추가하면 모바일 양식에 오류 메시지가 표시되어야 합니다. 이것은 이해하기 쉬운 언어로 오류 위치와 사용자가 오류를 수정할 수 있는 방법을 나타내야 합니다(아래 이미지 참조).

이미지 출처

사람들이 양식을 작성할 때 피드백을 제공하는 것도 중요합니다. 예를 들어 긴 다단계 양식의 진행률 표시줄은 사용자가 도달한 거리와 완료까지 남은 시간을 보여줌으로써 양식 채우기 프로세스를 더욱 흥미롭게 만들 수 있습니다.

이미지 출처

진행률 표시줄 없이 위의 양식을 작성하는 사람을 생각해 보십시오. 그들은 양식이 언제 끝나는지 모른 채 '다음' 버튼을 클릭할 것이고 좌절감에 마지막 단계 직전에 포기할 수도 있습니다.

사람들이 양식을 제출하면 "성공!"과 같은 내용이 있는 다른 화면이나 페이지로 안내해야 합니다. 또는 "감사합니다"라고 표시하여 제출이 제대로 되었는지 알 수 있습니다.

다음은 사용자가 무료 Google Ads 키트를 받기 위해 가입한 후 표시되는 HubSpot 성공 페이지의 예입니다.

이미지 출처

11. 양식을 액세스 가능하게 만드십시오.

접근성은 양식 사용의 기본입니다. 접근성을 염두에 두고 설계된 양식은 시각, 신체, 감각 및 인지 장애가 있는 사람들을 포함하여 더 넓은 범위의 사람들이 사용할 수 있습니다.

다음은 World Wide Web Consortium Web Accessibility Initiative, WebAIM 및 The A11Y Project Checklist에서 액세스 가능한 양식을 만들기 위한 몇 가지 특정 권장 사항입니다.

• 더 나은 시각화를 위해 양식을 확대할 때 텍스트가 픽셀화되거나 흐릿해지지 않는지 확인하십시오.
• 화면 판독기로 읽을 때 명확하게 이해할 수 있는 방식으로 양식 요소에 레이블을 지정하십시오.
• 세로 모드와 가로 모드 모두에서 양식에 액세스할 수 있는지 확인하세요.
• 사람들에게 응답할 충분한 시간을 주기 위해 시간 제한(가능한 경우)을 사용하지 마십시오.
• 양식에 비디오 또는 오디오 구성 요소에 대한 캡션 또는 대본을 포함합니다.
• 색상 대비를 염두에 두십시오. 여기에 도움이 되는 무료 도구가 있습니다.
• 키보드만으로 양식을 완전히 사용할 수 있는지 확인하십시오.

위의 모든 모바일 양식 디자인 전략을 고수하는 가장 좋은 방법은 양식 디자인에서 하지 말아야 할 사항을 탐색하는 것입니다. 아래 비디오는 모바일과 데스크톱 모두에서 양식을 디자인할 때 하지 말아야 할 몇 가지 예를 보여줍니다.

당신에게 돌아

웹사이트 방문자가 모바일 장치를 통해 웹 양식을 작성하고 제출하는 것은 비밀이 아닙니다. 대부분의 사람들이 어떤 유형의 모바일 장치를 어디서나 가지고 다니기 때문에 편리하고 효율적이기 때문에 양식이 모바일 친화적이어야 합니다.

그렇지 않으면 양식을 읽고 작성하고 제출하기가 어려워 리드를 좌절시키거나 비즈니스를 완전히 잃을 수 있습니다.

모바일 양식 디자인을 고려하고 이러한 지침을 구현하면 모바일 양식 사용자 경험을 향상하고 잠재 고객 및 고객과 긍정적인 관계를 구축하며 전환율을 높일 수 있습니다.

편집자 주: 이 게시물은 원래 2018년 12월에 게시되었으며 포괄적인 내용을 위해 업데이트되었습니다.