전환을 위해 웹사이트 모바일 경험을 최적화하는 방법

51.5.

모바일 장치에서 웹 서핑을 하는 온라인 사용자의 비율 입니다 . 이러한 가능성을 고려할 때 상당수의 비즈니스 잠재 고객이 480px 화면에서 귀하에게 올 가능성이 높습니다. 웹사이트의 모바일 버전을 형식이 지정되지 않은 상태로 두거나, 정보를 제거하거나, 단순히 웹사이트가 없는 경우 사이트 방문자의 절반을 전환할 기회를 놓치고 있는 것입니다.

모바일에 최적화하려면 완전히 별도의 웹사이트를 구축하는 것만큼 많은 노력이 필요하다고 생각할 수 있습니다. 하지만 사실은 사이트를 모바일 친화적으로 만드는 쉬운 방법이 많이 있습니다. 다음은 전환율이 높은 웹사이트의 모바일 버전을 만들기 위한 몇 가지 팁과 요령입니다.

속도의 필요성

속도는 모바일 사이트를 구축하는 데 가장 중요한 요소입니다. 이는 사용자가 로드하는 데 3초 이상 걸리는 웹사이트를 떠나기 때문만은 아닙니다. 느리게 로드되는 웹사이트는 이탈률이 더 높습니다. 즉, 사용자가 필요한 시간 동안 콘텐츠에 참여하지 않고 웹사이트의 다른 페이지(예: 연락처 페이지 또는 체크아웃 페이지)를 방문할 가능성이 적습니다.

이상적으로는 웹사이트가 2~3초 이내에 로드되기를 원합니다. 웹사이트 속도를 높일 수 있는 수많은 방법이 있지만 가장 큰 향상을 제공하는 방법을 고수해 보겠습니다.

1. 리소스가 많은 파일 압축

• 이미지는 디자인에 필수적이지만 압축되지 않은 상태로 두면 사이트 속도가 크게 느려집니다. 백엔드에서 이미지를 압축할 수 있는 플러그인이 많이 있습니다. 또는 구식으로 가서 업로드하기 전에 사진 편집기에서 더 관리하기 쉬운 크기로 이미지를 압축할 수 있습니다. 두 경로 모두 작동합니다. 목표는 이미지와 비디오가 페이지에 표시되는 품질을 희생하지 않고 가능한 한 적은 공간을 차지하도록 만드는 것입니다.
• 페이지 빌더를 사용할 때 HTML, CSS 및 JavaScript 코드를 간과하기 쉽습니다. 그러나 이러한 파일에는 종종 중복되거나 빈 줄이 있어 사이트 속도를 저하시킵니다. 버튼 클릭으로 이러한 파일을 축소하는 WP Rocket과 같은 플러그인을 사용하는 것이 좋습니다. 또는 코드를 직접 확인할 수 있습니다. 빈 줄이 보이나요? 해당 줄을 삭제해도 웹사이트의 전체적인 모양에는 영향을 미치지 않으며 약간의 부풀림을 제거하는 데 도움이 되므로 웹사이트의 성능이 향상됩니다.

2. Accelerated Mobile Pages(AMP) 사용 고려

AMP는 속도와 독자가 정보를 쉽게 소화할 수 있도록 하는 데 중점을 둡니다. AMP 플러그인은 원래 사용자가 모바일 사이트를 방문할 때 더 나은 경험을 제공하기 위해 Google에서 개발했습니다. 웹페이지의 AMP 버전은 본질적으로 원본 페이지의 HTML 버전을 축소한 것입니다. 결과? 전환 가능성이 훨씬 더 높은 초고속 웹 페이지입니다.

반응형 디자인

WordPress를 사용하여 웹사이트를 디자인하는 경우 웹사이트의 모양을 제어하기 위해 테마를 설치했을 가능성이 큽니다. 불행히도 모든 테마가 동일하게 생성되지는 않습니다.

일부 테마가 부족한 영역 중 하나는 반응형 디자인이 부족하다는 것입니다. 반응형 디자인은 다양한 화면 크기에 가장 적합한 방식으로 정보와 디자인 요소를 구성합니다. 이 내장된 테마를 갖는 것에 대한 놀라운 점은 CSS 속성이 테마 스타일 시트 자체에 내장되어 자동으로 발생한다는 것입니다.

반응형 디자인이 내장된 테마를 선택하면 모바일용으로 사이트를 최적화하는 것이 훨씬 쉬워집니다. 현재 테마에 이 기능이 없는 경우 이 14가지 모바일 친화적인 WordPress 테마 목록에서 해당 기능을 찾기 시작하는 것이 좋습니다.

터치 및 사용성

모바일 웹사이트에 액세스하는 사용자는 엄지 손가락 터치로 모든 페이지를 탐색하게 됩니다. 이 문제를 제기하는 것이 어리석은 것처럼 보일 수 있지만 이 사실을 염두에 두는 것이 더 나은 모바일 사이트를 설계하는 데 도움이 될 것입니다.

• 엄지 영역: 우리가 가제트를 잡는 방법에 대한 기사에서는 엄지 손가락이 화면을 더 정확하게 쓸 수 있는 영역으로 엄지 영역을 언급합니다. 페이지의 맨 위와 맨 아래 영역은 스마트폰에서 접근하기 가장 불편한 영역입니다. 웹 디자이너로서 우리는 사용자가 가장 쉽게 만질 수 있는 영역에 전환 요소(만져보고 싶은 항목)를 배치해야 합니다.
• "클릭" 상호 작용: 모바일 장치를 사용할 때 사용자는 스와이프하여 페이지를 아래로 스크롤하고 부드럽게 탭하여 요소를 사용하는 두 가지 작업을 수행할 수 있습니다. 클릭할 수 있음을 사용자에게 알리기 위해 호버에서 애니메이션이나 색상 변경이 없습니다. 그 요소를 잃어버렸기 때문에 다른 방법으로 보충해야 합니다. 페이지에서 무언가를 클릭할 수 있다면 모바일의 버튼처럼 보여야 합니다. 또는 클릭할 수 없어 보이는 항목 아래에 버튼을 추가하여 사용자에게 진행 방법을 안내할 수 있습니다.

팝 업

휴대전화에서 클릭할 수 없는 웹사이트를 방문했을 때 팝업이 뜬 적이 있습니까? "x"가 너무 작거나 약간 시야에서 벗어나서 클릭할 수 없습니다. 이는 모바일 사이트의 팝업과 관련된 일반적인 문제입니다.

해결책은 간단합니다. 모바일 사이트에서 팝업을 사용하고 있다면 시간을 들여 팝업을 포맷하고 테스트해 보세요. 양식과 버튼에도 동일한 원칙이 적용됩니다. 모바일의 모든 팝업은 적절한 크기를 유지하는 것이 중요합니다. 마지막으로 원하는 것은 전환하려는 의도를 가진 사용자가 귀하의 웹사이트에서 그렇게 하는 것을 저지하는 것입니다.

콘텐츠를 단순하게 유지

1. 명확한 경로 제공

웹사이트의 데스크톱 버전에서는 헤더에 모든 주요 페이지에 대한 링크를 표시하는 메뉴가 표시되는 것이 일반적입니다. 모바일 사용자는 종종 메뉴가 열리는 토글 버튼을 클릭하여 해당 옵션을 얻습니다. 이는 방문자가 중요한 홈페이지 사이를 빠르게 탐색할 수 있도록 하는 한 가지 방법이지만, 웹 디자이너로서 방문자를 원하는 페이지, 즉 전환 페이지로 안내할 수 있는 다른 방법이 있습니다.

예를 들어 많은 전자 상거래 웹사이트는 메뉴 옆에 카트 아이콘을 배치합니다. 이렇게 하면 카트가 전면 중앙에 배치되어 사용자가 쉽게 찾고 결제할 수 있습니다. 서비스를 판매하는 웹사이트는 연락처 버튼을 대신 사용할 수 있습니다. 이는 사용자를 고객으로 전환하려는 목표를 달성할 뿐만 아니라 원하는 것을 쉽게 찾을 수 있도록 하여 사용자의 목표를 달성하는 데도 도움이 됩니다.

2. 중요한 것으로 이끌어라

목표는 웹사이트에서 전환을 생성하는 것입니다. 모바일 버전을 만들 때 이를 염두에 두십시오. 더 작은 영역이므로 일반적으로 전환을 생성하지 않는 정보나 페이지에 주요 부동산을 낭비하지 마십시오.

데스크톱 사이트에서는 미학을 희생하지 않고 세 개의 열에 해당하는 정보를 편안하게 맞출 수 있습니다. 모바일 사이트에서는 1열 또는 2열 레이아웃으로 제한될 가능성이 높습니다. 일부 사용자는 페이지를 끝까지 스크롤하지 않습니다. 그렇기 때문에 CTA(Call-to-Action)와 사용자가 조치를 취할 수 있는 기회가 상단에서 쉽게 액세스할 수 있어야 합니다.

3. 사이트를 제거하지 마십시오.

행동을 독려하는 정보로 이끄는 것이 다른 모든 것을 제거해야 한다는 의미는 아닙니다. 웹 디자이너는 때때로 사이트의 모바일 버전을 완전히 제거하고 데스크톱 버전에서 사용할 수 있는 정보의 일부만 남기고 싶은 유혹을 받습니다. 이것은 실수입니다. 2019년 7월 Google은 모바일 우선 인덱싱을 발표했습니다 . 즉, Google은 검색 결과 순위를 결정할 때 웹사이트의 모바일 버전을 먼저 살펴봅니다.

2021년 3월은 Google이 모든 웹사이트에서 모바일 우선 색인 생성을 표준으로 만드는 날짜입니다. 모바일 웹사이트에서 중요한 정보를 제외하면 전체 SEO 전략을 희생할 수 있습니다.

그렇다면 읽기 쉽고 모바일 친화적인 웹사이트를 디자인하면서 어떻게 해당 정보를 포함할 수 있을까요? 답은 간단합니다. 조직 개편입니다. 해당 정보를 전면 및 중앙이 아닌 다른 페이지로 이동하고, 사용자가 계속 이동할 수 있도록 링크와 버튼을 추가하고, 필요한 경우 데스크톱 버전을 압축할 수도 있습니다. 코트를 입지 않은 채 추운 날씨에 사이트의 모바일 버전을 밖에 두지 마십시오.

전환의 절반을 잃지 마십시오

모바일 사용량은 이미 데스크톱 사용량을 넘어섰고 매년 계속해서 증가하고 있습니다. 잠재 고객의 비즈니스를 파악하는 가장 좋은 방법은 모바일 웹사이트에서 프로세스를 단순하게 만드는 것입니다.

앞서 언급한 51.5%의 사용자를 기억하십니까? 글쎄, 그들은 아직 거기에 있습니다. 문제는 이 기회를 이용하여 그들을 전환할 것인가입니다.