웹사이트 개선을 위한 7가지 사용자 경험 2016년 8월 30일

디지털 마케터로서 귀하는 웹사이트 최적화를 위해 끊임없이 노력하고 있습니다. 웹 통계를 통해 방문자가 사이트를 떠나는 위치와 수에 대한 통찰력을 얻고 싶습니다. 통계가 항상 사람들이 떠나는 이유에 대한 통찰력을 제공하는 것은 아닙니다. 온라인 조사, 특히 실시간 피드백 수집은 방문자의 동기에 대한 많은 귀중한 정보를 제공할 수 있습니다.

Mopinion에서 제 역할을 수행하면서 저는 고객이 받는 피드백을 자주 분석합니다. 이러한 분석은 종종 사용자 경험 측면에서 얻을 수 있는 것이 많다는 것을 보여줍니다. 이 블로그에서는 마케터가 웹사이트의 사용자 경험을 개선하기 위해 빠른 승리를 달성하기 위해 사용할 수 있는 7가지 초점을 제공할 것입니다.

---

무료 평가판을 시작하세요!

지금 모피니언을 사용해 보세요

• 무제한 피드백 수집
• ■
• 14일 무료 평가판

---

팁 1: 페이지 로딩 시간

이것은 분명한 포인트인 것 같습니다. 그러나 우리가 고객을 위해 수집한 피드백을 보면 상당히 방해가 되는 것 같습니다. 자주 언급될 뿐만 아니라(어떤 경우에는 피드백의 약 30%가 수신됨) 성가심 측정기에서도 매우 높은 점수를 받았습니다. 특히 판촉 위주나 월간 주기로 일하는 기업의 경우 특정 방문자 수를 감당하기 위해 고군분투하는 모습을 볼 수 있다. 예를 들어, 그 달의 고정된 순간에 많은 돌연변이를 처리해야 하는 복권 또는 모기지 제공업체의 도면을 생각해 보십시오.

또한 더 복잡한 온라인 도구(예: 자동차의 car-configurator)가 인터넷 연결에서 많은 대역폭을 요구하거나 컴퓨터 또는 기타 장치의 이미지 처리에 영향을 미친다는 사실도 종종 보여줍니다. 물론 그러한 도구는 방문자에게 부가 가치를 제공할 수 있지만 동시에 프로세스가 빠르고 원활하게 실행되지 않을 때 위험을 수반합니다.

호스팅
당신은 생각할 수 있습니다: 당신은 그것에 대해 무엇을 할 수 있습니까? 첫 번째 단계는 사용 가능한 대역폭이 충분한지 확인하는 것입니다. Amazon 또는 Rackspace의 클라우드 호스팅과 같은 유연하고 확장 가능한 호스팅 솔루션을 살펴보십시오. 방문자 수가 가장 많은 필드를 매핑하고 해당 영역에서 Pingdom 또는 Google Pagespeed와 같은 올바른 모니터링 도구를 실행하고 있는지 확인하십시오. IT 부서와 만날 때 무슨 말을 하고 있는지 확인하십시오…

자산
집에 더 가까운 솔루션은 사용하는 자산에서 찾을 수 있습니다. 이미지, CSS, 자바스크립트와 같은 야후 트래픽 잼에 따르면 페이지 로딩 시간의 80%를 문서화한다. 따라서 불필요한 정크를 로드하지 않고 필요한 파일을 올바르게 축소 및 압축했는지 확인하십시오.

또한 불필요한 위치에 위젯과 플러그인이 로드되는 경우가 종종 있습니다. 따라서 필요한 것과 필요한 위치를주의 깊게 확인하십시오. 특정 도구에 대해 1페이지의 플러그인만 필요한 경우 다른 위치에서 로드할 필요가 없습니다.

캐싱도 솔루션을 제공할 수 있습니다. 방문자가 종종 동일한 자산을 불필요하게 로드할 필요가 없도록 하는 도구를 살펴보십시오. 웹사이트가 알 수 없는 프레임워크 또는 CMS(예: WordPress)에서 실행되는 경우 W3 Total Cache와 같은 플러그인 형태로 사용 가능한 캐싱 옵션이 있는 경우가 많습니다.

팁 2: 로그인 절차

유감스럽게도 로그인 문제는 여전히 일상적입니다. 온라인 서비스 제공은 많은 회사에서 기존 및 신규 고객과의 일상적인 접촉의 중요한 부분입니다. 예를 들어 쇼핑 환경이나 내 환경에서 서비스 제공을 사용하기 위해 정기적으로 로그인하는 모든 웹샵, 은행, 에너지 회사 및 통신 사업자를 생각해보십시오.

우리가 처리하는 피드백의 상당 부분(약 5%)은 로그인 절차와 관련된 페이지에서 비롯됩니다.

불행히도 많은 사람들이 많은 양의 사용자 이름과 비밀번호를 기억하는 데 어려움을 겪습니다. 인적 요소 외에도 로그인 절차 자체에서 많은 문제가 발생합니다. 이메일 주소로 작업하는 것은 많은 사람들이 별도의 사용자 이름보다 기억하기 쉽습니다. 복잡한 고객 번호나 개인 이름을 사용하지 마십시오.

새로고침 중지
프론트 엔드에서 유효성 검사를 사용하면 더 쉽게 사용할 수 있습니다(따라서 서버/데이터베이스를 통해 정보를 수집하지 않고 예를 들어 Javascript 및/또는 Ajax를 통해 브라우저에서 직접). 장점은 페이지를 다시 로드할 필요가 없다는 것입니다. 예: 이메일 주소로 ".com" 대신 "[email protected]"을 실수로 입력한 고객.

Javascript 또는 Ajax 유효성 검사를 사용하면 이메일 주소의 잘못된 입력에 대한 피드백을 사용자에게 즉시 제공할 수 있습니다. 이러한 종류의 트릭을 적용하면 사용자가 더 쉽게 로그인할 수 있습니다. 더 큰 성가심은 잘못된 로그인 후에 모든 필드가 완전히 비어 있고 모든 것이 다시 채워져야 한다는 것입니다.

또 잊은게 있어...?
다음 장애물은 종종 잊어버린 비밀번호를 수집하는 것입니다. 사용자에게 비밀번호를 재설정하거나 이메일로 신청할 수 있는 가능성을 제공하는 것이 어느 정도 표준이 되었습니다. 사용자가 실제로 잘못 로그인을 시도한 후에만 해당 옵션을 표시하는 것이 깔끔해 보일 수 있습니다.

마지막으로: 오류 메시지. 많은 사용자에게 무언가 잘못되었다는 것은 충분히 성가신 일입니다. "잘못된 비밀번호"와 같은 로봇과 같은 메시지를 피하십시오. 커뮤니케이션 부서의 그 좋은 동료를 방문하십시오. 회사의 음색에 맞는 훌륭한 대안을 얻을 수 있습니다. 위 메시지에 대한 제안: "잘못된 비밀번호를 입력한 것 같습니다." 벌써 훨씬 친근하게 들리죠?!

팁 3: 양식

아마도 매우 알아볼 수 있을 것입니다. 선택을 하고 필터를 설정하거나 양식에 데이터를 입력하면 다음 페이지에서 모든 것이 사라지고 모든 동일한 정보를 다시 입력해야 합니다. 귀하의 사이트 방문자 사이에 큰 짜증이 납니다.

우리 플랫폼이 매일 분석하는 웹사이트 피드백의 9%는 양식과 관련이 있습니다. 가장 큰 성가심은 이미 한 번 입력된 정보를 제출하거나 양식 및 선택 항목 내에서 동일한 작업을 여러 번 수행해야 하는 것입니다. 그것은 때때로 작은 자극으로 이어지지만 일반적으로 큰 성가심으로 이어집니다.

양식은 방문자가 정보를 검색하고 제품을 주문하고 리드를 생성할 때 유용합니다. 따라서 양식이 제대로 작동하는 것이 중요합니다. 일반적으로 양식에서 작성하도록 요청하는 필드가 적을수록 전환율이 높아집니다(일부 데이터가 실제로 필수라는 사실을 고려할 때). 단순한 리드 제네레이션 형식일 때보다 결제나 주문 시 더 많은 필드를 작성해야 하는 것은 당연합니다.

사용자가 여전히 많은 정보를 제공해야 하는 경우 중간에 양식을 저장할 수도 있습니다. 이 방법으로 사용자는 나중에 양식을 완료할 수 있습니다.

여행 지도
웹 사이트 내에서 가장 중요한 여정을 매핑하고 사용자가 정보를 제공할 영역이나 데이터를 입력해야 하는 영역을 확인합니다. 해당 데이터를 재활용합니다.

방문자가 누구인지 알고 방문자의 기본 설정을 저장하고 재사용할 수 있는지 확인하십시오. 또한 스마트 도구를 사용하여 양식의 특정 필드를 자동으로 완성하거나 보완합니다.

아직 고객이 아닌 방문자가 문제입니까? 재방문자와 신규 방문자를 구분할 수도 있습니다. 예를 들어, 제품에 대한 콘텐츠를 다운로드할 수 있는 가능성을 제공할 때 처음에 필요한 정보만 요청하십시오. 방문자가 돌아와서 다른 양식을 작성할 때 새 필드만 작성하고 이미 알고 있는 모든 것을 숨겨야 하는지 확인하십시오.

반응형
모바일 사용이 온라인에서 가장 인기가 높다는 사실을 감안할 때(2014년에는 모바일 사용이 데스크톱을 능가했습니다) 방문자가 스마트폰이나 태블릿을 사용할 가능성이 큽니다. 따라서 사용 가능한 공간, 터치 인터페이스 및 양식 길이를 신중하게 고려하십시오. 다단계 양식은 실제로 양식을 조각으로 자르고 화면당 1 또는 2개의 필드만 표시하기 때문에 솔루션을 제공합니다. Optimizely와 같은 도구를 사용하여 여러 변형을 테스트하는 것이 유용할 수 있습니다.

팁 4: 올바른 페이지 또는 정보 찾기

우리 소프트웨어가 고객을 위해 분석하는 피드백의 22%는 방문자가 정확한 정보를 찾을 수 없다는 사실과 관련이 있습니다. 최악의 경우 필요한 정보를 전혀 사용할 수 없으며 방문자는 완전히 중단됩니다.

많은 대기업과 웹샵은 단순히 많은 양의 정보를 제공합니다. 때로는 제품의 범위가 넓기 때문입니다. 이 문제는 아주 쉽게 해결할 수 없습니다. 그러나 여전히 사용자 경험 을 개선하기 위해 이전 경험을 기반으로 하는 여러 가지 팁이 있습니다.

이 일반적인 문제를 해결하기 위한 첫 번째 단계는 온라인 여정을 매핑하는 것입니다. 방문자가 귀하의 웹사이트를 방문할 때 어떤 목표를 염두에 두고 있는지 직접 확인하십시오. 방문자는 종종 목표를 달성하기 위해 여러 단계를 거쳐야 합니다. '매핑' 여정은 방문자가 경험하는 문제와 특정 정보가 필요한 위치에 대한 통찰력을 얻는 데 도움이 됩니다.

클릭 동작
또한 클릭 행동을 사용하여 사람들이 떠나는 위치를 분석할 수 있습니다. 이러한 점에서 정량적 피드백을 얻는 것도 유용할 수 있습니다. 이렇게 하면 클릭 동작의 원인이 밝혀집니다. 예를 들어 특정 흐름 내에서 앞뒤로 이동하는 것과 같은 반복적인 동작에 신호를 보낼 때 피드백 양식이 능동적으로 나타나도록 할 수 있습니다. 여기에서 질문할 수 있는 논리적 메트릭은 목표 완료율(GCR)입니다. 질문은 "예", "아니요" 또는 "부분적으로" 옵션과 함께 "목표를 달성할 수 있었습니까?"와 같은 것입니다. GCR로 "예" 비율을 보고합니다. GCR 질문 다음에 공개 설명을 요청하는 것이 좋습니다.

팁 5: 명확하지 않은 텍스트

우리가 매일 분석하는 피드백의 약 7%는 불분명한 웹 콘텐츠와 관련이 있습니다. 여기에는 제품 정보뿐 아니라 주문 흐름 또는 FAQ와 같은 셀프 서비스 페이지의 콘텐츠가 포함될 수 있습니다.

사람들은 특정 목표를 염두에 두고 웹사이트에서 정보를 찾고 있습니다. 그 목표는 일반적으로 질문에 대한 답을 찾는 것입니다.

방문자와 고객은 정보를 읽고 테이블에서 무언가를 찾거나 비디오를 봅니다. 예를 들어 제품이 요구 사항을 충족하는지 여부, 가격 책정 모델이 적합한지 여부 또는 지원 관련 문제를 해결하기 위한 것입니다.

정보가 명확하고 너무 길지 않아야 한다는 사실 외에도 방문자는 즉시 정보를 찾을 수 있기를 원합니다. 따라서 내용을 쉽게 스캔할 수 있는지 확인하고 불필요한 정보는 생략하여 사람들이 중요한 사항을 파악할 수 있도록 하십시오.
전체가 쉽게 흡수될 수 있도록 이미지와 비디오를 추가합니다.

귀하의 질문에 대한 답변은?
더 많거나 더 복잡한 정보를 제공해야 하는 페이지에서는 방문자가 정보를 경험하는 방식을 항상 찾는 것이 좋습니다. 이것은 다음과 같은 질문을 하는 간단한 포함된 피드백 양식을 통해 수행할 수 있습니다. 응답 옵션은 "예" 또는 "아니오"이며 열린 의견을 남길 수 있습니다. 예를 들어 방문자는 여기에 어떤 정보가 부족한지 또는 정확히 무엇이 불분명한지를 나타낼 수 있습니다.

이 피드백은 방문자가 귀하의 콘텐츠를 평가하는 정도, 콘텐츠가 적절한지, 콘텐츠 품질을 개선하기 위해 무엇을 할 수 있는지에 대한 접근 가능한 통찰력을 수집하는 데 사용할 수 있습니다.

팁 6: 어디에나 있는 버그

너무 나빠. 버그는 피할 수 없습니다. 그들은 항상 몰래 들어갈 방법을 찾을 것입니다 ....

겁먹지 마세요. 1000개 이상의 브라우저/플랫폼 조합이 유통되고 있습니다. 따라서 사이트 어딘가에 버그가 나타날 위험이 큽니다. Browserstack과 같은 도구는 거의 모든 가능한 조합으로 웹사이트를 테스트할 수 있는 가능성을 제공합니다. 그런 다음 일반적으로 프론트 엔드의 버그를 포함합니다. 백엔드 소프트웨어 자체에서 모든 종류의 일이 잘못될 수도 있습니다(예: 양식에 대한 유효성 검사, 권리 관련 문제 또는 데이터베이스 출력 문제).

가장 광범위한 테스트를 수행하더라도 라이브로 전환한 후에도 버그가 계속 발생할 수 있습니다. 당신의 고객은 일반적으로 그들을 먼저 발견하는 사람들입니다. 따라서 방문자가 직접 구성한 모든 테스트 위원회 외에도 버그를 쉽게 보고할 수 있는 기회를 제공하는 것이 좋습니다.

피드백 양식을 통해 이를 보고할 수 있는 가능성을 제공하면 관련 통찰력을 빠르게 얻을 수 있습니다. 우리가 고객을 위해 분석하는 피드백의 약 20%는 버그 알림과 관련이 있습니다. 따라서 고객이 사용하지 않은 신호 버그를 도울 수 있는 기회를 남겨두지 마십시오.

팁 7: 모바일이 먼저입니까?

또한 팁 3 에서 "모바일"용으로 양식을 최적화하는 예를 표시했습니다. 온라인 경험의 전체 폭에 걸쳐 모바일이 여전히 다소 무시된다는 사실이 적용됩니다. 온라인 방문의 평균 절반 이상이 모바일을 통해 이루어진다는 점을 감안하면 이상한 일입니다.

플랫폼에서 받는 피드백의 약 6%는 모바일 장치의 문제와 관련이 있습니다. 여러 블로그에서 모바일은 검색 엔진 최적화(SEO)와 같은 문제와 관련하여 중요한 주의 사항으로 언급됩니다. 따라서 사용자 경험 뿐만 아니라 사이트의 검색 가능성에도 매우 중요합니다.

중요한 점은 이미지의 사용입니다. 가장 작은 "뷰포트"로 시작한 다음 더 큰 화면까지 작업하십시오. 콘텐츠가 dpi가 더 높은 Retina 화면에도 깔끔하게 적용되는지 확인하세요.

이 블로그의 이전에 언급했듯이 긴 로딩 시간은 사용자 경험에 부정적인 영향을 미치므로 파일이 너무 커지지 않도록 하고 올바른 크기만 로드해야 합니다. 일러스트레이션과 아이콘으로 작업을 많이 할 때 SVG(Scalable Vector Graphics)의 사용을 볼 수도 있습니다. 이것은 실제로 설계에 따라 쉽게 확장되는 라인 파일입니다.

텍스트 및 글꼴
또한 텍스트와 글꼴의 사용에 세심한 주의를 기울이십시오. 이것은 또한 피드백을 분석할 때 문제가 자주 발생하는 영역 중 하나입니다. 너무 가늘고 복잡한 글꼴은 피하세요. 사람들은 종종 스마트폰을 사용할 때 더 작은 화면에서 읽어야 합니다. 글자와 줄 사이의 공백을 스마트하게 처리하여 가독성을 높입니다. 또한 다른 뷰포트에서 텍스트 레이아웃을 확인하십시오. 여기에서 텍스트 대 컨테이너 의 이상적인 비율 구성에 대한 자세한 정보를 찾을 수 있습니다.

모바일 내비게이션
마지막으로, 우리는 종종 모바일 탐색과 관련하여 꽤 많은 장애물을 발견합니다. 운 좋게도 많은 모바일 메뉴가 예를 들어 WordPress와 같은 시스템의 알려진 템플릿에 이미 포함되어 있습니다. 그러나 이러한 시스템을 사용하지 않으려면 작은 화면에서 시작해야 합니다. 공간이 제한되어 있으며 터치 를 통해 사용할 것이라고 가정합니다. Apple의 지침에 따르면 평균 "손가락"은 44픽셀입니다.

가장 중요한 페이지에 빠르게 접근할 수 있도록 하고 옵션의 수를 제한하십시오.
예를 들어 모바일 탐색 설계에 대한 자세한 정보는 여기에서 찾을 수 있습니다.

마지막 팁으로 모바일 브라우저는 앞서 언급한 Browserstack으로도 완벽하게 테스트할 수 있습니다.

참고: 우리가 분석한 피드백 양에 대한 백분율은 2015년 자체 피드백 데이터에 대해 수행한 연구에 속합니다. 이 블로그 게시물을 읽고 모든 결과를 확인하고 싶습니다.