직관적이고 사용자 친화적인 404 페이지 디자인

우리 모두는 어느 시점에서 404 페이지와 상호 작용했습니다.

이러한 페이지는 링크가 끊어지거나 페이지가 삭제되거나 사용자가 페이지 주소를 잘못 입력한 경우 나타납니다. 그러나 이유가 무엇이든 고쳐야 할 오류로 남아 있습니다. 또한 끊어진 링크는 사이트 순위에 영향을 미치므로 필요하지 않습니다. 사이트의 SEO 측면은 매우 중요하므로 404 알림을 주시하는 것을 잊었다고 해서 트래픽을 잃고 싶지 않습니다.

404페이지를 최대한 빨리 수정해야 하는 것은 분명하지만 사용자가 링크가 끊어진 시점을 예측할 수는 없습니다. 따라서 준비하고 부정적인 경험을 긍정적인 경험으로 바꾸려면 404 페이지를 사용자 정의하고 사용자 친화적이고 직관적으로 만들어야 합니다.

나쁜 것을 좋은 것으로 바꾸는 방법을 배울 준비가 되셨습니까? 알아봅시다.

사이트의 404 페이지 사용자 지정

대화형 요소가 많은 매우 다채롭고 매력적인 웹사이트를 탐색하다가 갑자기 "404 Page Not Found" 메시지가 있는 빈 페이지를 발견했다고 상상해 보십시오.

약간의 깨우침, 그렇지?

404 페이지는 불쾌한 놀라움으로 나타나서는 안 됩니다. 이것이 전체 사이트 레이아웃과 동일한 디자인을 유지하는 것이 중요한 이유입니다.

이를 위해 배경, 색상, 글꼴 및 기타 요소(해당되는 경우)를 포함하여 404 페이지의 모양을 다른 페이지의 모양과 동일하게 유지하십시오. 또한 많은 웹 사이트에서 404 페이지를 브랜드를 강조하고 사용자에게 다시 한 번 상기시키는 기회로 사용합니다.

사이트의 404 페이지를 디자인할 때 메시지에 주의하십시오. 잘 만들어진 메시지는 영리한 말장난을 포함하거나 눈에 거슬리지 않는 방식으로 제품/서비스에 대해 사용자에게 상기시킬 수 있는 좋은 기회입니다.

무슨 일이 있었는지 설명

Apache에서 기본 404 페이지를 보면 다음이 표시됩니다.

그리고 그게 다야. 사용자는 실제로 일어난 일과 다음에 무엇을 해야 하는지 전혀 모릅니다.

당신은 고객을 생각하고 불쾌한 경험을 무시하고 싶기 때문에 오류에 대한 설명을 제공하십시오. 404의 주요 원인은 일반적으로 다음과 같습니다.

• 사용자가 무언가를 잘못 입력했습니다.
• 링크가 깨져요,
• 페이지가 존재하지 않습니다.
• 서버와의 연결이 끊어졌습니다.

물론 위에서 언급한 모든 문제를 나열할 필요는 없습니다. 설명을 이해할 수 있는지 확인하십시오.

문제에 대해 정직하게 말하면 사용자를 설득하고 사이트에 머물면서 계속 탐색하도록 권장할 수 있습니다.

매력적인 메시지 만들기

404 페이지는 잘 만들어진 메시지를 통해 브랜드의 아이덴티티를 보여줄 완벽한 기회입니다.

404페이지 분량의 최고의 예는 다음과 같은 특징이 있습니다.

• 말장난
• 사이트의 제품 또는 서비스와 관련된 메시지
• 개인적인 호소,
• 대중 문화 및 인식 가능한 이벤트에 대한 참조.

404 페이지는 기본적으로 오류이기 때문에 완전히 반대되는 것으로 긍정적이고 재미있는 경험으로 변환해야 합니다.

GitHub는 404 페이지를 디자인하는 면에서 훌륭한 일을 했습니다. 개발자에 대한 고정 관념과 "스타워즈" 사가에 대한 사랑을 활용하고, 스타워즈 영화를 보지 않은 사람들도 시각적 요소와 페이지 메시지를 즉시 알아볼 수 있도록 하여 자신의 장점으로 활용했습니다.

취할 조치 제안

클릭 유도문안은 정말 중요하며 404페이지 디자인의 필수 요소입니다.

사용자는 빈 페이지와 0개의 선택 사항을 남겨두어서는 안 됩니다. 따라서 404와 같은 일이 발생하더라도 상호 이익으로 이어질 대안을 제시하십시오.

404 페이지에서 가장 인기 있는 CTA는 다음과 같습니다.

• 검색창
• 홈페이지
• 최고의 제품/서비스
• 제품 또는 뉴스레터 신청
• 무료 평가판 제안

CTA 버튼 디자인에 주목하십시오. 그것들은 쉽게 눈에 띄어야 하고 배경과 섞이지 않아야 합니다. 그렇지 않으면 사용자가 눈치채지 못할 것입니다. 또한 CTA 버튼 메시지에 대해 생각해 보십시오. "여기를 클릭하십시오"와 같은 진부한 표현 대신 더 창의적인 것을 사용하십시오("우리가 얻은 정보 보기").

검색창 추가

사용자가 무언가를 검색했기 때문에 404 페이지를 방문했습니다. 따라서 페이지에 검색 창을 추가하여 다시 시도할 수 있는 옵션을 제공하십시오.

다음과 같은 메시지로 지원할 수 있습니다. "검색어를 찾을 수 없는 것 같습니다...다시 시도하지 않으시겠습니까?" 잘 작성된 CTA는 참여율이 높고 이미지와 잘 어울립니다.

또한 검색 창에 힌트 텍스트를 추가하십시오. 텍스트가 있는 막대는 빈 막대보다 참여도가 더 높습니다.

종료 지점 추가

404 페이지의 검색창으로는 충분하지 않습니다. 사용자가 자신에게 필요한 것이 무엇인지 잘 모를 경우 어떻게 합니까?

404 페이지에서 잠재적인 전환으로 사용자를 탐색하려면 "홈페이지" 또는 기타 관련 버튼을 추가하세요. 또한 "문의하기" 버튼을 추가하여 신뢰성을 높일 수 있습니다.

일부 회사는 404 페이지를 제품 및 서비스에 대해 상기시키고 페이지에 해당 링크를 배치하는 기회로 사용합니다.

제품/서비스 표시

예를 들어 전자 상거래 상점인 경우 베스트 셀러 제품을 404 페이지에 배치하여 사용자가 최고의 제품을 발견하고 구매할 수 있는 기회를 제공할 수 있습니다.

다른 사이트의 경우 사용자에게 가치 있는 것을 제공할 수 있습니다. 제품의 무료 평가판, 과정 등록 제안 또는 사이트의 유용한 영역에 대한 안내가 될 수 있습니다.

재미있게 만들어

위에서 이미 말했듯이 404 페이지는 사용자가 의도한 결과를 얻지 못했기 때문에 부정적인 경험입니다. 문제를 해결하려면 페이지를 대화형으로 만들거나 재미있는 요소를 추가하세요.

자신을 고도로 전문적인 브랜드로 포지셔닝하더라도 약간의 유머는 문제가 되지 않습니다. 또한 많은 회사에서 404 페이지에 게임화 및 비디오를 추가하여 사용자의 참여를 유도하고 계속 즐겁게 합니다.

404 오류 추적

404 오류는 사용자의 일이 아닙니다. 그러나 이를 추적하고 오류의 원인과 사용자 여정을 식별하는 것은 귀하의 작업입니다.

404 오류 추적 도구를 선택할 때 염두에 두어야 할 몇 가지 사항이 있습니다.

모든 404 오류 소스 고려

404 오류가 반드시 귀하의 사이트에 있는 것은 아닙니다. 고객이 이전 뉴스레터를 열고 링크를 따라가거나 Google의 검색 결과에 나타날 수 있습니다.

따라서 오류 모니터링 도구를 선택할 때 모든 곳에서 404 오류를 검색하여 모두 수정할 수 있는지 다시 확인하십시오.

404 오류 비용 보고

사이트 소유자로서 해야 할 일은 백만 가지가 있으며 404 오류를 수정하는 것은 목록의 맨 위에 있지 않을 수 있습니다.

이것이 404 오류 비용을 알려주는 도구가 필요한 이유입니다. 여기서 우리는 돈에 대해 이야기하는 것이 아닙니다. 전환 손실 비율, 이탈률 증가, 사용자 손실 수의 비율일 수 있습니다.

404 오류가 비즈니스에 미치는 영향을 확인하면 작업의 우선 순위를 지정하고 404 오류를 목록 위나 아래로 이동하는 것이 더 쉬울 것입니다.

지속적인 모니터링

404 오류는 정기적으로 발생하는 것이 아닙니다. 완벽하게 잘 수행하다가 갑자기 사용자에게 404가 표시될 수 있습니다.

그렇기 때문에 추적 도구는 404 오류를 지속적으로 모니터링하고 오류를 발견하면 즉시 알려야 합니다. 이런 식으로 적시에 문제를 수정하고 다른 사용자가 404 페이지를 우연히 보게 될 위험을 제거할 수 있습니다.

추적 도구의 유형

404 오류를 정확히 찾아내고 성공적으로 수정하는 데 도움이 되는 다양한 유형의 사용 가능한 추적 도구가 있습니다.

크롤링 도구

Screaming Frog와 같은 크롤링 도구는 웹사이트를 빠르게 스캔하고 깨진 링크가 있는지 확인하는 데 적합합니다.

이러한 도구는 웹사이트의 링크를 분석하고 어떤 링크가 손상되었으며 오류의 원인이 무엇인지 알려줍니다. 또한 크롤링 도구는 일반적으로 관리 및 설치가 쉽습니다.

이러한 도구의 가장 큰 결점은 웹사이트의 링크만 분석한다는 것이며 고급 분석의 중요성에 대해 우리가 말한 것을 기억하십니까? 또한 크롤링 도구는 404 오류 비용을 알려주지 않고 오류를 식별하는 데만 도움을 줍니다.

크롤링 도구는 확실히 유용하며 상점에서 모든 것이 제대로 작동하는지 확인하기 위해 정기적으로 배포해야 합니다. 그러나 눈에 띄지 않은 다른 오류가 없는지 확인하기 위해 정기적 및 고급 분석을 수행하는 것을 잊지 마십시오.

백링크 도구

크롤링 도구와 달리 백링크 도구는 사용자를 사이트의 깨진 링크로 안내하는 외부 소스에 중점을 둡니다.

Moz의 Link Explorer는 사용자를 귀하의 사이트로 안내하는 웹사이트를 찾는 데 도움이 되는 도구 중 하나입니다. 이러한 분석은 404 링크를 제거하고 사이트 순위를 높일 수 있으므로 SEO에 정말 유용합니다.

그러나 크롤링 도구와 마찬가지로 백링크 추적 도구는 끊어진 링크를 식별하는 한 가지 측면만 다룹니다. 오래된 뉴스레터나 소셜 미디어에 있는 링크를 포함하여 모든 404 오류 링크를 찾으려면 보다 포괄적인 분석이 필요합니다.

Google 애널리틱스로 추적

404페이지 오류를 추적하는 가장 일반적이고 효율적인 방법 중 하나는 Google Analytics를 사용하는 것입니다.

이를 위해 다음 코드를 복사해야 합니다.

<script>  
   // Create Tracker - Send to GA
   // Replace UA-11111111-11 with your own Tracking ID
 ga('create', 'UA-11111111-11');
   ga('send', {
     hitType: 'event',
     eventCategory: '404 Response',
     eventAction: window.location.href,
     eventLabel: document.referrer
});
</script>

404 오류 페이지/템플릿에 추가합니다. 코드에 Google 계정의 ID를 붙여넣는 것을 잊지 마십시오.

그런 다음 404 오류를 일으키는 정확한 URL과 사람들이 해당 URL을 받는 위치를 확인할 수 있습니다.

그리고 마지막으로: 문제를 해결하십시오!

사고가 발생하고 그것이 사실입니다. 성가신 사용자가 기다리는 동안 미친 듯이 문제를 해결하는 것보다 미리 보기 좋은 404 페이지를 가지고 있는 것이 좋습니다.

그러나 404는 오류이며 수정해야 합니다. 오류 우선 순위에 따라 링크를 리디렉션하거나 페이지를 복원하거나 소스 링크를 수정할 수 있습니다. 또한 다음을 수행합니다.

• 자동화 및 정기 404 보고서를 도입하여 404페이지를 주시하고 적시에 수정합니다.
• 404에서 실시간 알림을 설정하고,
• 감사를 수행하여 끊어진 링크를 식별합니다.

대체로 사용자 친화적인 404 페이지는 사용자에게 가치를 제공하고 전체 웹사이트 디자인 측면에서 일관되어야 하며 사이트 탐색에 도움이 되어야 합니다. 이러한 규칙을 따르면 사용자를 유지하는 동시에 전환을 높일 수 있습니다.