แนวทางปฏิบัติที่ดีที่สุดของ Slider: สิ่งที่คุณต้องรู้

เผยแพร่แล้ว: 2018-04-09

คุณต้องการใส่แถบเลื่อนหรือม้าหมุนบนเว็บไซต์ของคุณหรือไม่? ก่อนที่คุณจะทำเช่นนั้น มีหลายปัจจัยที่ควรพิจารณา ตัวเลื่อนที่ใส่ผิดที่และกำหนดค่าได้ไม่ดีไม่เพียงแต่ถูกละเลย มันสามารถสร้างความเสียหายต่อ SEO และรบกวนผู้เยี่ยมชมได้จริง

ไม่ได้หมายความว่ามันไม่ดี เหมือนกับฟีเจอร์หรือปลั๊กอินอื่น ๆ ของ WordPress คุณควรแน่ใจว่าได้กำหนดค่าอย่างถูกต้อง ต่อไปนี้คือแนวทางปฏิบัติที่ดีที่สุดบางประการที่ควรปฏิบัติตามเมื่อติดตั้งแถบเลื่อนในเว็บไซต์ WordPress ของคุณ

ทำให้ Slider ของคุณน่าพอใจ

นอกจากความสวยงามโดยทั่วไปแล้ว ยังมีปัจจัยอื่นๆ ที่ต้องพิจารณาอีกด้วย ความเกี่ยวข้องโดยรวมของตัวเลื่อน ตำแหน่งบนหน้า และแม้แต่ลำดับของรูปภาพล้วนเป็นแง่มุมทางภาพที่สำคัญที่จะต้องพิจารณา

ง่าย ๆ เข้าไว้

โดยเฉพาะอย่างยิ่ง หากคุณเปิดการเล่นอัตโนมัติ สไลด์จะต้องเรียบง่าย มีประสิทธิภาพ และตรงประเด็นอย่างยิ่ง ที่ไม่ได้ใช้กับข้อความเท่านั้น เว้นแต่ว่าคุณกำลังใช้ตัวเลื่อนเป็นแกลเลอรีสำหรับงานศิลปะหรือภาพถ่ายของคุณ ให้ใช้รูปภาพที่สะอาดและไม่กระจัดกระจาย

อย่าออกแบบให้เหมือนโฆษณา

ต้องขอบคุณโฆษณาที่ล่วงล้ำ หลายคนจึงพัฒนา "ตาบอดแบนเนอร์" และตัวเลื่อนที่ออกแบบมาผิดที่และออกแบบมาไม่ดีอาจได้รับผลกระทบจากปรากฏการณ์นี้ หลีกเลี่ยงทุกเคล็ดลับการออกแบบที่ผู้โฆษณาจะปฏิบัติตาม โดยเฉพาะอย่างยิ่งกลยุทธ์ที่ใช้โดยโฆษณาที่น่ารำคาญที่สุด

ซึ่งหมายความว่าอย่าใช้ไฟกะพริบ สีเรียบหรู แบบอักษร Impact และแบบอักษรที่คล้ายกัน และเทคนิคอื่นๆ ที่เบี่ยงเบนความสนใจ แม้ว่าภาพหมุนของคุณจะขายหรือโปรโมตผลิตภัณฑ์ แต่ก็ควรกลมกลืนกับเว็บไซต์และดูเป็นธรรมชาติ คุณอาจต้องการให้คนอื่นมองที่สไลเดอร์ของคุณ แต่กลยุทธ์ที่ก้าวร้าวเหล่านี้ทำให้เกิดสิ่งที่ตรงกันข้าม

ทำให้ Slider ของคุณมีประโยชน์และเกี่ยวข้อง

ทุกสไลเดอร์ที่คุณวางควรมีจุดประสงค์ที่ชัดเจน มันแสดงภาพถ่ายของคุณหรือไม่? นำผู้ใช้ไปยังบางส่วนของเว็บไซต์? อธิบายว่าเว็บไซต์ของคุณเกี่ยวกับอะไร ลองโปรโมทสินค้าดูไหม? ดึงดูดผู้ใช้?

และวางม้าหมุนของคุณไว้ในพื้นที่ที่เหมาะสม การ วางตัวเลื่อน เป็นหนึ่งในปัจจัยที่สำคัญที่สุดในการสังเกตหรือลืม ตรวจสอบให้แน่ใจว่าไม่ได้ฝังอยู่ในเนื้อหาของหน้าหรือวางแบบสุ่ม ควรอยู่ในตำแหน่งเชิงกลยุทธ์และสังเกตเห็นได้ง่าย เช่น ในแถบด้านข้าง ใกล้กับด้านบนสุดของหน้า หรือใต้โพสต์บล็อก แม้แต่ส่วนท้ายก็สามารถเป็นที่ที่ดีในการใส่ตัวเลื่อน

เลือกลำดับสไลด์ของคุณอย่างระมัดระวัง

อย่าคิดเอาเองว่าผู้เยี่ยมชมจะยืนดูทุกสไลด์ เลือกลำดับของคุณอย่างระมัดระวัง สไลด์สองสามภาพแรกควรพยายามสร้างการมีส่วนร่วมและดึงดูดความสนใจของผู้ใช้ แต่ถ้าไม่สำเร็จ อย่างน้อยต้องแน่ใจว่าคุณเข้าใจประเด็นของคุณ

อย่างไรก็ตาม นั่นไม่ใช่ข้อแก้ตัวที่จะทำให้สไลด์อื่นๆ ของคุณมีประสิทธิภาพน้อยลง ไม่ว่าใครจะคลิกสไลด์ใด พวกเขาทั้งหมดก็ควรตอบสนองวัตถุประสงค์ของพวกเขา เช่น พูดคุยเกี่ยวกับบริษัทของคุณ อวดภาพถ่ายที่ยอดเยี่ยม และอื่นๆ

ทำให้ Slider ของคุณใช้งานได้

กฎสำคัญของสไลเดอร์: ต้องใช้งานง่ายและไม่สร้างความรำคาญให้ผู้มาเยี่ยมชม มีหลายวิธีที่คุณสามารถทำให้ภาพหมุนเข้าถึงได้ง่ายขึ้น ตั้งแต่การปรับให้เหมาะสมสำหรับผู้ชมที่ใช้อุปกรณ์เคลื่อนที่จำนวนมาก ไปจนถึงการปรับเวลาในการหมุนสไลด์อย่างระมัดระวัง

พิจารณาปิดการเล่นอัตโนมัติ

การเคลื่อนไหวอาจทำให้เสียสมาธิหรือน่ารำคาญสำหรับผู้ใช้บางคน ในบล็อกโพสต์หรือบนแถบด้านข้างที่ติดตามผู้ใช้ทั่วทั้งไซต์ ให้ปิดการเล่นอัตโนมัติเสมอ การเบี่ยงเบนความสนใจของผู้เข้าชมในขณะที่พวกเขากำลังพยายามอ่านไม่ใช่ความคิดที่ดี

อย่างไรก็ตาม ในบางกรณี คุณอาจต้องการให้ภาพหมุนเป็นสิ่งที่ผู้เยี่ยมชมทุกคนให้ความสนใจ หรืออาจเป็นสิ่งสำคัญที่พวกเขาจะเห็นมากกว่าหนึ่งสไลด์ เมื่อตัดสินใจว่าจะเปิดหรือปิดการเล่นอัตโนมัติ ให้พิจารณาตำแหน่ง เนื้อหา และจุดประสงค์ของตัวเลื่อน

เพิ่มเวลาระหว่างการหมุน

ถ้าจำเป็นต้องเล่นอัตโนมัติสำหรับการออกแบบของคุณ ตรวจสอบให้แน่ใจว่าสไลด์ไม่เปลี่ยนเร็วเกินไป โดยเฉพาะอย่างยิ่งถ้าสไลด์นั้นเกี่ยวข้องกับข้อความ มันน่าผิดหวังเมื่อตัวเลื่อนเลื่อนไปข้างหน้าก่อนที่คุณจะพร้อม ปรับให้เหมาะสมสำหรับความเร็วในการอ่านที่ช้า ดีกว่าม้าหมุนที่ช้าแต่ได้รับการออกแบบมาอย่างดีมากกว่าแบบที่ผลักสไลด์ให้ได้มากที่สุดเท่าที่จะมากได้ภายในสิบวินาที

ปรับตัวเลือกการนำทางให้เหมาะสม

ไม่มีอะไรน่ารำคาญไปกว่าการคลิกลูกศรนำทางและเลื่อนสไลด์โชว์ไปในขณะนั้น ซึ่งจะทำให้คุณต้องข้ามสไลด์ การหยุดชั่วคราวเมื่อวางเมาส์เหนือหรือการนำทางเป็นคุณลักษณะที่หลายคนคาดหวัง แถบเลื่อน Soliloquy มี ฟังก์ชันนี้ และควรเปิดใช้งานบนภาพหมุนส่วนใหญ่ที่คุณสร้าง หากคุณเลือกที่จะเล่นอัตโนมัติต่อไป นี่เป็นสิ่งจำเป็น

ในขณะเดียวกัน ภาพหมุนที่เลื่อนไปเองโดยไม่ต้องมีกรอบการนำทางหรือปุ่มหยุดชั่วคราว สามารถทำให้ผู้ใช้หลายคนรำคาญใจได้ เนื่องจากต้องรอให้ทั้งรอบสิ้นสุดเพียงเพื่อจะพบสไลด์นั้นเพียงสไลด์เดียว อย่าลืมเพิ่ม การควบคุมการนำทาง ให้กับตัวเลื่อนของคุณด้วย

คุณควรพิจารณา การควบคุมการนำทางที่มีขนาดใหญ่เป็นพิเศษ โดยเฉพาะอย่างยิ่งหากคุณมีผู้ชมที่เป็นมือถือหรือผู้สูงอายุเป็นจำนวนมาก

สุดท้าย บนภาพหมุนที่มีรูปภาพจำนวนมาก ให้พิจารณารวม ภาพขนาดย่อ เพื่อให้ผู้ใช้สามารถเรียกดูสไลด์ที่ต้องการได้อย่างง่ายดาย

หลีกเลี่ยงความเสียหาย SEO

แถบเลื่อนที่กำหนดค่าไม่ถูกต้องคือแถบเลื่อนที่ไม่เหมาะกับเครื่องมือค้นหา โชคดีที่มาตรการหลายอย่างที่ทำให้เว็บไซต์และภาพหมุนของคุณเป็นมิตรกับ SEO ยังทำให้ใช้งานง่ายขึ้นอีกด้วย! แนวทางปฏิบัติเหล่านี้สำคัญที่สุดที่ต้องปฏิบัติตาม

การตอบสนองก่อน

หากคุณกำลังใช้ปลั๊กอินตัวเลื่อน คุณมักจะไม่ต้องกังวลกับการตอบสนองของมัน อย่างไรก็ตาม ส่วนนี้มีความสำคัญ ทดสอบเพื่อให้แน่ใจว่าข้อความและรูปภาพของคุณดูดีในทุกอุปกรณ์ ปรับขนาดปุ่ม แทนที่ภาพที่พร่ามัว สิ่งที่คุณต้องทำสำหรับตัวเลื่อนมือถือที่สวยงาม

ตรวจสอบให้แน่ใจว่าเปิดใช้งานการปัดด้วยเช่นกัน ผู้ใช้มือถือคาดหวังว่าท่าทางการปัดจะทำงานสำหรับองค์ประกอบต่างๆ เช่น แถบเลื่อน และหากไม่ใช่กรณีนี้ ก็อาจทำให้เกิดความรำคาญได้

การออกแบบเพื่อการช่วยสำหรับการเข้าถึง

แม้ว่าคุณควรออกแบบเว็บไซต์ทั้งหมดโดยคำนึงถึงการช่วยสำหรับการเข้าถึง แต่ตัวเลื่อนควรสร้างด้วยวิธีนี้ด้วย ไม่เพียงแต่ช่วยให้ผู้พิการสามารถไปไหนมาไหนได้เท่านั้น แต่ยังมีแนวโน้มที่จะปรับปรุง SEO ด้วย

ตัวอย่างบางส่วนของ การออกแบบการช่วยการ เข้าถึง ที่ดี ได้แก่ การเปิดใช้งาน การควบคุมแป้นพิมพ์ การ หลีกเลี่ยงการเลื่อนอัตโนมัติหรือการหยุดภายใต้เงื่อนไขบางประการ และการตรวจสอบให้แน่ใจว่าข้อความมีความเปรียบต่างเพียงพอ

สร้างภาพฮีโร่ตัวเลื่อนที่ยอดเยี่ยม

กลวิธีใหม่อย่างหนึ่งคือการแทนที่ "ภาพฮีโร่" หรือแบนเนอร์บนหน้า Landing Page ที่อธิบายว่าเว็บไซต์ของคุณเกี่ยวกับอะไร ด้วยแถบเลื่อนแบบเคลื่อนไหว เทคนิคนี้มีข้อดีและข้อเสีย ภาพหมุนสามารถมีประสิทธิภาพเท่ากับภาพฮีโร่มาตรฐาน แต่จำเป็นต้องดำเนินการอย่างระมัดระวัง

หากคุณตัดสินใจที่จะใส่แถบเลื่อนบนหน้าแรกของคุณ โปรดจำไว้ว่าผู้เยี่ยมชมใหม่มีคำถามหนึ่งข้อ: เว็บไซต์นี้เกี่ยวกับอะไร ทุกสไลด์ในตัวเองและไม่มีบริบทควรตอบคำถามนี้

หลีกเลี่ยงหัวข้อ H1

สำหรับเครื่องมือค้นหา H1 ทำหน้าที่เป็นชื่อหน้า ดังนั้นเมื่อมีหลายหัวเรื่อง เช่น ภายในแถบเลื่อน อาจทำให้เครื่องมือค้นหาสับสนและลด SEO ลงได้ เพื่อความปลอดภัย หลีกเลี่ยงการใช้สิ่งเหล่านี้ในวงล้อ

หลีกเลี่ยงลิงก์การนำทาง Slider-Only เท่านั้น

มีหน้าบนเว็บไซต์ของคุณที่สามารถเข้าถึงได้ผ่านตัวเลื่อนหรือไม่? พยายามหลีกเลี่ยงสิ่งนี้ มันสร้างความสับสนทั้งสำหรับผู้ใช้และเครื่องมือค้นหา คุณสามารถใช้ตัวเลื่อนลิงก์เป็นเครื่องมือนำทางได้ แต่ต้องแน่ใจว่ามีตัวเลือกอื่น

การสร้าง Sliders ที่มีประสิทธิภาพ

แนวทางปฏิบัติที่ดีที่สุดวิธีหนึ่งที่คุณสามารถปฏิบัติตามได้เมื่อคุณตัดสินใจที่จะวางภาพหมุนบนเว็บไซต์ของคุณคือ การพิจารณาใช้ปลั๊กอิน เช่น Soliloquy โดยเฉพาะอย่างยิ่ง หากคุณเป็นนักพัฒนาเว็บใหม่ การพยายามสร้างตัวเลื่อนด้วยตัวเองอาจจบลงด้วยหายนะ SEO ปลั๊กอินใช้งานได้ง่ายกว่ามาก และได้รับการปรับแต่งเป็นพิเศษสำหรับ WordPress และเครื่องมือค้นหา

เมื่อคุณทราบเคล็ดลับบางประการในการวางแถบเลื่อนที่เป็นประโยชน์ มีประโยชน์ และมีส่วนร่วมบนเว็บไซต์ของคุณแล้ว คุณวางแผนจะใช้มันอย่างไร เราหวังว่าคู่มือนี้จะช่วยคุณในการออกแบบเว็บในอนาคต และในระหว่างนี้ ติดต่อเราทาง Twitter และ Facebook

บันทึก บันทึก

บันทึก บันทึก

บันทึก บันทึก

บันทึก บันทึก

บันทึก บันทึก