슬라이더 모범 사례: 알아야 할 사항

게시 됨: 2018-04-09

웹사이트에 슬라이더나 캐러셀을 추가하시겠습니까? 그렇게 하기 전에 고려해야 할 많은 요소가 있습니다. 잘못 배치되고 잘못 구성된 슬라이더는 그냥 무시되는 것이 아닙니다. 그것은 실제로 SEO를 손상시키고 방문자를 성가시게 할 수 있습니다.

그렇다고 해서 그것이 나쁘다는 것은 아닙니다. 다른 WordPress 기능이나 플러그인과 마찬가지로 올바르게 구성해야 합니다. 다음은 WordPress 웹사이트에 슬라이더를 구현할 때 따라야 할 몇 가지 모범 사례입니다.

슬라이더를 시각적으로 즐겁게 만드십시오

일반적인 미학과 함께 고려해야 할 다른 요소가 있습니다. 슬라이더의 전반적인 관련성, 페이지에서의 위치, 이미지 순서까지도 모두 고려해야 할 중요한 시각적 측면입니다.

간단하게 유지

특히 자동 재생을 켜면 슬라이드가 간단하고 효과적이며 요점에 도달하는 것이 매우 중요합니다. 이것은 텍스트에만 적용되는 것이 아닙니다. 슬라이더를 예술이나 사진 갤러리로 사용하지 않는 한 깨끗하고 깔끔한 이미지를 사용하십시오.

광고처럼 디자인하지 마세요

방해가 되는 광고 덕분에 많은 사람들이 "배너 실명"을 일으키며 잘못 배치되고 잘못 설계된 슬라이더가 이러한 현상에 노출될 수 있습니다. 광고주가 따를 모든 디자인 팁, 특히 가장 성가신 광고에서 사용하는 전술을 피하십시오.

즉, 깜박이는 조명, 화려한 단색, 임팩트 및 유사한 글꼴 및 기타 주의를 산만하게 하는 기술을 사용하지 마십시오. 캐러셀이 제품을 판매하거나 홍보하는 경우에도 웹사이트와 조화를 이루고 자연스럽게 보여야 합니다. 사람들이 당신의 슬라이더를 보기를 원할 수도 있지만 이러한 공격적인 전술은 정반대의 결과를 초래합니다.

슬라이더를 유용하고 관련성 있게 만드십시오

배치하는 모든 슬라이더에는 명확한 목적이 있어야 합니다. 그것은 당신의 사진을 보여줍니까? 사이트의 특정 부분으로 사용자를 안내하시겠습니까? 귀하의 사이트가 무엇인지 설명하십시오. 제품을 홍보하려고? 사용자의 참여를 유도하시겠습니까?

그리고 캐러셀을 올바른 위치에 놓으십시오. 슬라이더 의 위치 는 눈에 띄거나 잊혀지는 가장 중요한 요소 중 하나입니다. 페이지 콘텐츠에 묻혀 있거나 무작위로 배치되지 않았는지 확인하세요. 사이드바, 페이지 상단 또는 블로그 게시물 아래와 같이 전략적이고 눈에 띄는 위치에 있어야 합니다. 바닥글도 슬라이더를 배치하기에 좋은 위치가 될 수 있습니다.

슬라이드 시퀀스를 신중하게 선택하십시오

방문자가 모든 슬라이드를 보기 위해 주변에 머물 것이라고 가정하지 마십시오. 시퀀스를 매우 신중하게 선택하십시오. 처음 몇 개의 슬라이드는 사용자의 관심을 끌기 위해 시도해야 하지만 실패할 경우 최소한 요점을 전달해야 합니다.

하지만 그렇다고 해서 다른 슬라이드의 효율성이 떨어지는 것은 아닙니다. 어떤 슬라이드를 클릭하게 되더라도 회사에 대해 이야기하고 멋진 사진을 자랑하는 등의 목적에 부합해야 합니다.

슬라이더를 사용 가능하게 만들기

슬라이더의 기본 규칙: 사용하기 쉽고 방문자를 성가시게 하지 않아야 합니다. 모바일을 사용하는 대규모 청중을 위해 최적화하는 것부터 슬라이드 회전 시간을 신중하게 조정하는 것까지 캐러셀을 보다 쉽게 액세스할 수 있는 방법이 많이 있습니다.

자동 재생 끄기 고려

움직임은 일부 사용자에게 주의를 산만하게 하거나 성가시게 할 수 있습니다. 블로그 게시물이나 사이트 전체에서 사용자를 팔로우하는 사이드바에서는 항상 자동 재생을 끄십시오. 방문자가 읽으려고 하는 동안 주의를 산만하게 하는 것은 결코 좋은 생각이 아닙니다.

그러나 경우에 따라 캐러셀이 모든 방문자가 주의를 기울이도록 하거나 둘 이상의 슬라이드를 보는 것이 중요할 수 있습니다. 자동 재생을 계속 사용할지 여부를 결정할 때 슬라이더의 위치, 내용 및 의도를 고려하십시오.

회전 간격 증가

디자인에 자동 재생이 필요한 경우 특히 텍스트가 포함된 경우 슬라이드가 너무 빨리 전환되지 않도록 하십시오. 준비가 되기 전에 슬라이더가 전진하면 실망스럽습니다. 느린 읽기 속도에 최적화하십시오. 가능한 한 많은 슬라이드를 10초 안에 밀어 넣는 것보다 느리지만 잘 설계된 회전 목마가 더 좋습니다.

탐색 옵션 최적화

탐색 화살표를 클릭하고 그 순간에 슬라이드쇼가 진행되도록 하여 슬라이드를 건너뛰도록 하는 것보다 더 짜증나는 것은 없습니다. 호버 또는 탐색 시 일시 중지는 많은 사람들이 기대하는 기능입니다. 독백 슬라이더에는 이 기능이 있으며 생성하는 대부분의 캐러셀에서 활성화되어야 합니다. 자동 재생을 유지하기로 선택한 경우 이것이 필요합니다.

한편, 탐색 풍선이나 일시 중지 버튼 없이 자체적으로 진행되는 캐러셀은 슬라이드 하나를 찾기 위해 전체 주기가 끝날 때까지 기다려야 하므로 많은 사용자를 짜증나게 할 수 있습니다. 슬라이더에도 탐색 컨트롤 을 추가해야 합니다.

특히 모바일 또는 고령층이 많은 경우 초대형 탐색 컨트롤 을 고려해야 합니다.

마지막으로, 이미지가 많은 캐러셀에서 사용자가 원하는 특정 슬라이드를 쉽게 탐색할 수 있도록 축소판 을 포함하는 것이 좋습니다.

SEO 손상 방지

잘못 구성된 슬라이더는 검색 엔진에 적합하지 않은 슬라이더입니다. 운 좋게도 웹사이트와 캐러셀을 SEO 친화적으로 만드는 많은 조치를 통해 웹사이트를 더욱 사용자 친화적으로 만들 수도 있습니다! 이러한 관행은 따라야 할 가장 중요합니다.

응답성 우선

슬라이더 플러그인을 사용하는 경우 응답성에 대해 걱정할 필요가 없을 것입니다. 그러나 이 부분이 중요합니다. 텍스트와 이미지가 모든 장치에서 멋지게 보이는지 테스트하십시오. 버튼 크기를 조정하고 흐릿한 이미지를 교체합니다. 아름다운 모바일 슬라이더를 위해 무엇이든 해야 합니다.

스와이프도 활성화되어 있는지 확인합니다. 모바일 사용자는 스와이프 제스처가 슬라이더와 같은 요소에 대해 작동할 것으로 예상하며, 그렇지 않은 경우 성가심을 유발할 수 있습니다.

접근성을 위한 디자인

접근성을 염두에 두고 전체 웹사이트를 디자인해야 하지만 슬라이더도 이 방법으로 만들어야 합니다. 장애인이 돌아다니는 데 도움이 될 뿐만 아니라 SEO를 개선하는 경향이 있습니다.

좋은 접근성 디자인의 몇 가지 예에는 키보드 컨트롤 활성화 , 특정 조건에서 자동 스크롤 또는 중지 방지, 텍스트 대비가 충분한지 확인 등이 있습니다.

멋진 슬라이더 영웅 이미지 만들기

한 가지 혁신적인 전술은 "영웅 이미지" 또는 방문 페이지의 배너를 애니메이션 슬라이더로 교체하여 웹사이트에 대해 설명하는 것입니다. 이 기술에는 장점과 단점이 있습니다. 캐러셀은 표준 영웅 이미지만큼 효과적일 수 있지만 신중하게 구현해야 합니다.

홈페이지에 슬라이더를 추가하기로 결정했다면 새로운 방문자가 한 가지 질문을 하게 된다는 점을 기억하십시오. 이 웹사이트는 무엇에 관한 것입니까? 모든 단일 슬라이드는 문맥 없이 단독으로 이 질문에 답해야 합니다.

H1 제목 피하기

검색 엔진에서 H1은 페이지의 제목 역할을 합니다. 따라서 슬라이더 내와 같이 여러 제목이 있는 경우 검색 엔진을 혼동하고 SEO를 낮출 수 있습니다. 안전을 위해 캐러셀에서 사용하지 마십시오.

슬라이더 전용 탐색 링크 피하기

웹사이트에 슬라이더를 통해서만 액세스할 수 있는 페이지가 있습니까? 이것을 피하십시오. 사용자와 검색 엔진 모두를 혼란스럽게 합니다. 링크 슬라이더를 탐색 도구로 사용할 수 있지만 다른 옵션이 있는지 확인하십시오.

효과적인 슬라이더 만들기

웹사이트에 캐러셀을 배치하기로 결정한 후 따를 수 있는 모범 사례 중 하나는 Soliloquy와 같은 플러그인 사용을 고려하는 것입니다. 특히 새로운 웹 개발자인 경우 슬라이더를 직접 만들려고 하면 SEO 재앙으로 끝날 수 있습니다. 플러그인은 작업하기가 훨씬 쉬우며 특히 WordPress 및 검색 엔진에 최적화되어 있습니다.

웹사이트에 유용하고 유용하며 매력적인 슬라이더를 배치하는 방법에 대한 몇 가지 팁을 알게 되었으니 어떻게 사용할 계획입니까? 이 가이드가 향후 웹 디자인 작업에 도움이 되었기를 바랍니다. 그 동안 Twitter와 Facebook에서 우리와 연락하십시오.

저장 저장