RSS Feed

Tech Support

모바일이 기본입니다. 전 세계적으로 모바일 기기는 웹 트래픽의 약 62%를 생성하며, 데스크톱에서 구매 결정이 이루어지는 B2B 사이트에서도 모바일이 홈페이지 방문의 대부분을 차지합니다.

이는 홈페이지 디자인 방식을 바꿉니다. 휴대폰의 상단 프레임은 27인치 모니터의 상단 프레임보다 훨씬 작습니다. 헤드라인, 서브헤드, 기본 호출은 모두 모바일에서 처음 600개의 세로 픽셀에 맞아야 하며, 그렇지 않으면 방문자는 CTA를 보기 전에 첫인상을 갖게 됩니다.

거의 항상 성과를 내는 몇 가지 모바일 우선 원칙:

영웅을 탭 순서대로 쌓으세요. 헤드라인, 서브헤드, 기본 CTA. 모바일에서 폴드 위에 있는 보조 CTA를 건너뛰세요. 중요한 것들로부터 공간을 훔칩니다.
타겟을 최소 44 x 44 픽셀로 터치합니다. Apple의 HIG와 WCAG 모두 이 기능을 지원합니다. 마우스 클릭을 위한 크기의 버튼은 엄지 손가락 탭을 방해합니다.
햄버거 내비게이션은 주의 사항이 있으면 괜찮습니다. 라벨이 붙은 햄버거 메뉴(아이콘뿐만 아니라 실제 목적지를 알려주는 드롭다운 기능)는 모바일에서 작동합니다. 호버 의존적인 플라이아웃 메뉴는 그렇지 않습니다.
양식은 필드 수가 적고 입력값이 더 큽니다. 필드가 7개인 모바일 양식은 필드 수가 3개인 모바일 양식보다 더 나쁘게 변환됩니다. 브라우저가 방문자의 타이핑을 수행할 수 있도록 자동 채우기 친화적인 필드 이름을 사용하세요.
회전목마를 건너뛰세요. 모바일 회전목마는 무언가를 말하고 있는 데스크탑 회전목마보다 훨씬 더 잘 작동하지 않습니다.
또한 대부분의 B2B 사이트에서는 모바일과 데스크톱 간에 측정 가능한 전환율 격차가 존재합니다. 최근 벤치마크에 따르면 데스크톱 전환율은 약 4~5%, 모바일 전환율은 1.6~2.9%에 가깝습니다. 이러한 격차 중 일부는 구조적이지만(구매 결정은 여전히 데스크톱에서 이루어집니다), 대부분은 모바일 디자인이 좋지 않습니다. 휴대폰에서 작동하는 홈페이지는 이미 사용 중인 방문자의 수를 더 많이 파악할 수 있는 홈페이지입니다.

반응형 디자인은 차별화 요소가 아니라 기준선입니다. 모든 현대 웹사이트는 반응형입니다. 문제는 얼마나 잘 실행되는지이지, 존재 여부가 아닙니다.