워드프레스 사이트의 사용자 경험(UX) 개선 가이드

게시 됨: 2017-04-22

더 나은 사용자 경험을 위해 웹사이트를 최적화하는 것은 간단한 일이 아닙니다. 그 이유는 대부분 필요한 도구 및/또는 코딩 지식이 한푼도 받지 않기 때문입니다. 그러나 웹 사이트가 사용자 친화성으로 인해 실질적으로 알려지고 사랑받는 플랫폼에서 만들어지면 UXO( 사용자 경험 최적화 )가 훨씬 덜 고통스럽습니다.

WordPress에는 수천 개의 도구가 있으며 그 중 많은 도구가 무료로 제공되어 청중을 더 잘 이해하고(추적 및 분석), 성능을 개선하고(캐싱 및 이미지 최적화 플러그인) 테스트 및 개선(A/B Nelio, OptimizePress 등과 같은 테스트 소프트웨어). 이 가이드는 그들에 관한 것이 아닙니다.

이 가이드는 WordPress 웹사이트에서 사용성 측면에서 간과되기 쉬운 몇 가지 측면과 이러한 실수를 수정하는 가장 좋은 방법에 대해 자세히 설명합니다. 다음부터 시작하겠습니다.

캐러셀

모든 비즈니스의 모든 부서는 회전 목마/슬라이더를 원합니다. 단순히 그것이 아름다운 황금률이기 때문입니다. 모든 사람은 페이지에서 가장 눈에 잘 띄는 단일 공간인 스크롤 없이 볼 수 있는 부분에 제품/캠페인/메시지를 배치합니다.

이것이 가장 바람직한 WordPress 테마가 적어도 하나의 슬라이더 플러그인(일반적으로 Revolution Slider)을 포함하는 이유입니다. 해당 접근 방식의 장단점을 살펴보겠습니다.

장점:

가장 중요한 메시지를 한 곳에 표시합니다.
메시지의 우선 순위를 지정할 수 있습니다(가장 중요한 것은 첫 번째 슬라이드를 가져옴).
모든 방문자 세그먼트("모두를 위한 것")의 관심을 끌 것으로 예상됨

단점:

사용자는 일반적으로 슬라이드가 회전할 때까지 기다리지 않고 현재 보이는 프레임을 보고 회전식 메뉴를 건너뜁니다.
Slides의 콘텐츠는 검색 봇에 의해 쉽게 크롤링되지 않으며 이는 SEO에 나쁜 소식입니다.

이러한 단점을 해결하고 캐러셀 UX를 개선하는 방법이 있습니다.

슬라이드/프레임 수는 5개를 넘지 않도록 합니다.
사용자에게 캐러셀 탐색 제어 권한 부여
자동 전달하지 마십시오.

때로는 가장 간단한 솔루션이 가장 좋습니다. 멋진 프리미엄 슬라이더 플러그인에 의존하는 대신 Slick과 같은 경량 JavaScript(jQuery) 플러그인을 사용하여 WordPress에서 사용자 친화적인 캐러셀을 만들 수 있습니다.

고급 탐색

사이드바의 보조 탐색과 결합된 헤더의 기본 메뉴는 탐색이 완전하고 사용 가능하도록 보장하는 거의 완벽한 방법입니다. 그러나 수천 페이지가 있는 거대한 웹 사이트(특히 전자 상거래 또는 콘텐츠가 많은 대규모 블로그)의 경우 보조 탐색만으로는 문제가 해결되지 않습니다.

이것이 메가 메뉴가 필요한 이유입니다. 그러나 이 동전에도 양면이 있습니다.

장점:

균일한 가시성: 하위 수준의 콘텐츠/페이지가 메가 메뉴에 포함됨
추가 단계 저장: 사용자는 더 멀리 떨어져 있거나 모호한 콘텐츠에 더 빨리 접근할 수 있습니다.

단점:

그래픽/아이콘과 같은 UI 요소가 추가되면 성능에 문제가 발생하는 것으로 알려져 있습니다.
콘텐츠 계층 구조가 좋지 않은 웹사이트에서는 다소 비효율적입니다.
메가 메뉴를 완벽하게 반응하도록 만드는 것은 어려울 수 있습니다.

찬반 양론(그리고 웹사이트에 메가 메뉴가 필요한지 여부)에 대해 토론하기 전에 콘텐츠를 철저히 분류해야 합니다. WordPress 분류에는 이유가 있습니다. 사용해.

콘텐츠 계층 구조가 충분히 길들여지고 구성되면 Max Mega Menu, uberMenu 등과 같은 WordPress 플러그인을 사용하여 웹사이트에 메가 드롭다운 메뉴를 추가할 수 있습니다. Ajax Layered Navigation과 같은 WooCommerce 확장은 상점에 필터링 인터페이스를 추가합니다.

성능

당신이 믿고 싶은 것이 무엇이든 간에: 당신은 배타적이지 않습니다.

사용자는 콘텐츠를 기다리는 것을 원하지 않으므로 콘텐츠를 기다리게 하지 마십시오. 그렇지 않으면 다른 곳으로 이동하게 됩니다. 귀하의 순위조차도 느린 웹 사이트로 인해 어려움을 겪습니다. 이는 사용자 경험에서 성능 최적화에 대한 요구 사항의 총계입니다.

다음을 사용하여 성능을 위해 WordPress 웹 사이트를 최적화하십시오.

CDN: 전 세계 사용자를 수용하고 트래픽이 중간에서 높은 웹사이트를 위한 실행 가능한 옵션입니다. MaxCDN과 W3 Total Cache 플러그인은 빠른 로딩 천국에서 만들어진 매치입니다.

캐시: 위에서 언급했듯이 W3 Total Cache는 CDN 지원 없이도 필요한 유일한 캐싱 플러그인입니다. 또한 개발자에게 Redis 및 Memcached와 같은 서버 측 솔루션에 대해 문의하십시오.

프런트 엔드 최적화: EWWW Image Optimizer와 같은 플러그인은 이미지를 압축합니다(품질 저하 없이). 또한 테마 파일에 인라인 CSS와 JS가 가능한 한 적은지 확인하십시오. 스타일시트와 JavaScript 파일도 압축 및 축소합니다.

외부 종속성을 줄이고 CSS 스프라이트를 사용하며 플러그인을 다운로드하는 동안 매우 까다롭습니다(적을수록 좋음). 웹 호스팅 제공업체에 연락하여 도움을 요청할 수도 있습니다. 때로는 웹 호스트에서 성능 관련 문제가 발생합니다.

모달 팝업

상호 작용 및 전환이라는 이름으로 불쾌감을 주지 마십시오.

네, 모달 팝업(중단 마케팅)은 훌륭한 전환 도구입니다. 말 그대로 수천 개의 플러그인이 있습니다(현재 대부분의 소셜 미디어 플러그인에 이 기능이 있습니다). 사용자에게 메시지를 표시하여 소셜 미디어의 콘텐츠를 공유/팔로우/좋아요, 구독 또는 가입하도록 '정중하게' 상기시켜줍니다. 할인 등을 이용하십시오.

잘못된 점이 너무 많습니다... 하지만 잠시 후 이에 대해 알아보겠습니다.

장점:

전환율 향상이 입증됨

단점:

산만함: 방문자는 콘텐츠를 위해 여기에 있고 팝업은 방해가 됩니다.
팝업은 사용자 여정과 적절하게 맞지 않는 한 (많은 광고와 마찬가지로) 백색 잡음으로 처리됩니다.
접근성이 좋지 않음

컨텍스트에서 멋지게 사용되는 팝업의 예가 있습니다. BrainPickings.org는 사용자가 사이트에 반복적으로 액세스하고 콘텐츠 읽기를 마친 경우에만 청중을 이해하고 '기부' 링크를 홍보합니다. Reebok Crossfit 팝업은 타이밍이 좋지 않지만 제품 페이지의 구독 할인으로 약간 만회합니다.

출처: 리복

시간 및 트리거 지연은 괜찮지만 더 큰 그림에 초점을 맞추고 원하는 사용자와 관련이 있는 방식으로 팝업을 묶는 것도 필요합니다.

지금까지는 순전한 힘으로 인해 전환율 증가가 더 많았지만 현명하게 하면 전환율 및 후속 리드의 품질을 높일 수 있습니다. 처음 방문자에게 웹사이트 구독을 요청하면 99/100번 양질의 리드를 얻을 수 없습니다.

팝업에 지능적으로 WordPress 플러그인을 사용해 보세요. (Supsystic의 Popups와 같은) 좋은 것들이 있습니다. 단일 페이지의 상호 작용에만 초점을 맞추는 대신 이들과 함께 작업하십시오.

미주

사용자 경험을 개선하려면 이 조언을 조금이라도 받아들이고 모든 것을 테스트하기를 바랍니다(Google Analytics, Nelio A/B 테스트 또는 기타 도구 사용: 사용자에게 달려 있음).

그리고 계속해서 발전할 것을 약속하십시오.

더 읽어보기 WordPress 플러그인 | WordPress 사이트에 대한 5가지 빠른 수정