기본: 모바일 양식 디자인

온라인 쇼핑객들은 점점 더 모바일 기기를 사용하여 새로운 스토어를 찾고, 제품을 탐색하고, 구매를 하고 있습니다. 미국에서만 온라인 구매의 35% 이상이 모바일 기기를 사용했으며, 이 수치는 매년 계속 증가하고 있습니다. 

이러한 고객을 구독자로 전환하려면 가입 양식이 데스크톱에서와 마찬가지로 모바일에서도 보기 좋게 표시되는 것이 중요합니다. 

이메일과 SMS 동의를 동시에 수집하려는 경우와 같이 3개 이상의 입력란이 필요한 경우에는 다단계 양식을 고려하세요. 

다단계 양식을 사용하면 잠재 구독자에게 부담을 주지 않으면서 더 많은 정보를 수집할 수 있습니다. 또한 하나의 양식으로 여러 유형의 동의를 수집할 때는 SMS를 위한 별도의 단계를 마련하는 것이 규정 준수 모범 사례입니다. 

또는 고객 여정의 후반부에서 구독자를 다시 타겟팅하여 구독자에 대해 더 자세히 알아볼 수 있습니다. 30일 후에 다른 양식을 보여줌으로써 현재 구독자의 생일을 물어보거나 환영 시리즈의 일부로 물어볼 수도 있습니다.

양식의 모든 입력란이 필수 항목이라고 해도 이름 앞에 생일을 묻는 것은 여전히 이상합니다. 

일반적으로 최소한의 정보부터 가장 개인적인 정보까지 요청합니다. 예를 들어 

1. 이름
2. 이메일 또는 전화번호
3. 생일

단일 열은 모든 입력, 필드 및 버튼이 양식에서 한 줄을 따르는 것을 의미합니다. 여러 열 형식은 데스크톱에서 사용하기에 좋지만 모바일 양식은 복잡해 보이거나 혼잡해 보일 수 있습니다. 단일 열 양식은 모바일에서도 더 쉽게 스캔할 수 있습니다.

단일 열 양식	다중 열 양식

CTA 버튼은 시청자의 스캔 여정 마지막에 위치하여 시청자가 마지막으로 보게 되는 것이어야 합니다. 양식을 작성하기 위해 위로 스크롤하거나 버튼을 검색해야 하는 불편함을 없애고 싶을 것입니다. 

일반적으로 CTA 버튼은 중앙 또는 왼쪽에 배치됩니다. 

닫기 버튼이 오른쪽 상단에 있어야 하는 이유는 단순히 사용자가 가장 많이 보는 위치에 있기 때문입니다. 

왼쪽 상단이나 하단 근처와 같이 다른 곳에 배치하면 사용자가 양식을 닫는 방법을 검색하는 데 시간을 소비하고 양식을 보는 동안 좌절감을 느낄 수 있습니다. 이로 인해 브랜드에 대한 부정적인 인상을 남기고 떠날 수 있으며, 이는 향후 사이트를 방문하거나 고객이 될 가능성이 낮아진다는 의미입니다.

양식의 각 필드 바로 위에 어떤 정보를 제공해야 하는지 명확하게 설명하는 레이블을 배치합니다. 

또한 설명하는 필드와 가까운 곳에 레이블을 배치하여 둘을 명확하게 구분할 수 있도록 하세요.

각 라벨은 모바일 기기에서 볼 때 한 줄 미만을 차지해야 하므로 간결하게 작성하는 것이 중요합니다.

사용자가 텍스트나 숫자를 입력해야 하는 모든 필드에 플레이스홀더를 포함시켜 잠재고객에게 입력할 내용을 표시하세요(예: 이메일, 이름, 날짜 형식 등).

이렇게 하면 누군가가 범할 수 있는 오류의 수를 줄일 수 있습니다. 레이블과 플레이스홀더를 함께 사용하면 사용자가 양식을 쉽게 탐색할 수 있습니다. 

전문가 팁: 버튼에도 레이블이 있어야 합니다. 버튼 텍스트에 설명을 더 많이 넣는 것도 사용자에게 도움이 됩니다. 

예를 들어, 단순한 '제출'이라는 클릭 유도 문안 대신 '뉴스레터 구독' 또는 'SMS 신청'이라고 하면 버튼의 기능을 더 명확하게 파악할 수 있습니다. 또한 작은 크기로 소중한 공간을 절약할 수 있습니다. 

고객에게 어떤 필드를 작성해야 하고 어떤 필드를 작성하지 않아도 되는지 알려주면 사용자 경험이 간소화됩니다. 특정 양식 요소를 필수로 설정하고 다른 요소는 선택 사항으로 설정할 수 있습니다, 

사용자가 양식을 제출한 후 성공 메시지를 포함시켜 사용자가 성공했음을 알 수 있도록 합니다. 

16픽셀 이상의 글꼴 크기를 사용하면 텍스트의 가독성을 높일 수 있습니다. 이렇게 하면 사용자가 글을 읽기 위해 확대할 필요가 없습니다.

16픽셀은 레이블, 자리 표시자, 버튼 텍스트를 포함한 모바일 양식의 모든 텍스트에 권장되는 최소 글꼴 크기입니다. 

사용자가 원하는 필드를 클릭하는 데 어려움을 겪지 않도록 양식의 개별 작업 사이에 충분한 간격을 두세요. 그렇지 않으면 계속 시도하지 않고 포기할 수도 있습니다. 

양식을 작성할 때 사용자가 실수하지 않도록 최대한 어렵게 만드세요. 다양한 유형의 기기에서 사용자 환경을 테스트하세요. 

입력 필드나 버튼과 같은 '터치 대상'은 크고 클릭하기 쉬워야 합니다. 

성인 손가락의 평균 크기는 11mm로 약 41.6픽셀입니다. 이를 고려할 때 터치 타겟을 48픽셀 이상으로 만드는 것이 가장 좋습니다. 

모바일 방문자가 탐색하는 동안 원하는 대로 양식을 열고 닫을 수 있도록 양식 티저를 사용하여 양식이 사이트의 콘텐츠를 가리지 않도록 하세요.
Google은 방해가 되는 전면 광고가 있는 사이트에 대해 페널티를 부과합니다. 티저를 사용하면 이러한 불이익을 피할 수 있지만 양식에 장시간 지연을 사용해야 합니다. 

색상 대비는 전경과 배경에 있는 텍스트 또는 개체 사이의 빛의 차이를 말합니다. 색상 대비가 좋으면 양식의 가독성이 향상되며, 이는 접근성의 핵심 요소입니다. 색상 대비 검사기를 사용하여 색상 대비를 확인합니다.

가장 작은 대비는 1:1로 가독성이 떨어집니다(흰색 배경에 흰색 글자를 생각하면 됩니다). 사용 가능한 최고 대비는 21:1 또는 흰색 배경에 검은색 텍스트입니다. 즉, 비율이 클수록 대비가 더 좋습니다. 

WCAG(웹 콘텐츠 접근성 지침)에 따라 최소 색상 대비는 작은 텍스트, 이미지 및 이미지 내 텍스트의 경우 4.5:1, 큰 텍스트 또는 중요한 요소의 경우 3:1입니다. 

이상적으로는 대비가 더 커야 합니다. WCAG에 따르면 더 나은 최소값은 다음과 같습니다:

• 작은 텍스트, 이미지 또는 텍스트 이미지의 경우 7:1
• 4.5:1(큰 텍스트, 주요 시각적 요소 등) 

열심히 만든 콘텐츠를 모든 사람이 감상할 수 있도록 하는 것이 중요합니다. 특정 색상 조합을 사용하면 일부 그룹에서는 양식을 읽기 어렵거나 심지어 불가능하게 만들 수도 있습니다. 

사용하지 말아야 할 색맹은 빨간색과 초록색뿐만 아니라 다양한 색맹 유형이 있다는 점을 명심하세요.