แนวทางปฏิบัติที่ดีที่สุดของ Slider: สิ่งที่คุณต้องรู้
เผยแพร่แล้ว: 2018-04-09คุณต้องการใส่แถบเลื่อนหรือม้าหมุนบนเว็บไซต์ของคุณหรือไม่? ก่อนที่คุณจะทำเช่นนั้น มีหลายปัจจัยที่ควรพิจารณา ตัวเลื่อนที่ใส่ผิดที่และกำหนดค่าได้ไม่ดีไม่เพียงแต่ถูกละเลย มันสามารถสร้างความเสียหายต่อ SEO และรบกวนผู้เยี่ยมชมได้จริง
ไม่ได้หมายความว่ามันไม่ดี เหมือนกับฟีเจอร์หรือปลั๊กอินอื่น ๆ ของ WordPress คุณควรแน่ใจว่าได้กำหนดค่าอย่างถูกต้อง ต่อไปนี้คือแนวทางปฏิบัติที่ดีที่สุดบางประการที่ควรปฏิบัติตามเมื่อติดตั้งแถบเลื่อนในเว็บไซต์ WordPress ของคุณ
ทำให้ Slider ของคุณน่าพอใจ
นอกจากความสวยงามโดยทั่วไปแล้ว ยังมีปัจจัยอื่นๆ ที่ต้องพิจารณาอีกด้วย ความเกี่ยวข้องโดยรวมของตัวเลื่อน ตำแหน่งบนหน้า และแม้แต่ลำดับของรูปภาพล้วนเป็นแง่มุมทางภาพที่สำคัญที่จะต้องพิจารณา
![nb_sbp_1 [1]](/uploads/article/1392/q4bfEbR70vNt8qRQ.jpg)
ง่าย ๆ เข้าไว้
โดยเฉพาะอย่างยิ่ง หากคุณเปิดการเล่นอัตโนมัติ สไลด์จะต้องเรียบง่าย มีประสิทธิภาพ และตรงประเด็นอย่างยิ่ง ที่ไม่ได้ใช้กับข้อความเท่านั้น เว้นแต่ว่าคุณกำลังใช้ตัวเลื่อนเป็นแกลเลอรีสำหรับงานศิลปะหรือภาพถ่ายของคุณ ให้ใช้รูปภาพที่สะอาดและไม่กระจัดกระจาย
อย่าออกแบบให้เหมือนโฆษณา
ต้องขอบคุณโฆษณาที่ล่วงล้ำ หลายคนจึงพัฒนา "ตาบอดแบนเนอร์" และตัวเลื่อนที่ออกแบบมาผิดที่และออกแบบมาไม่ดีอาจได้รับผลกระทบจากปรากฏการณ์นี้ หลีกเลี่ยงทุกเคล็ดลับการออกแบบที่ผู้โฆษณาจะปฏิบัติตาม โดยเฉพาะอย่างยิ่งกลยุทธ์ที่ใช้โดยโฆษณาที่น่ารำคาญที่สุด
ซึ่งหมายความว่าอย่าใช้ไฟกะพริบ สีเรียบหรู แบบอักษร Impact และแบบอักษรที่คล้ายกัน และเทคนิคอื่นๆ ที่เบี่ยงเบนความสนใจ แม้ว่าภาพหมุนของคุณจะขายหรือโปรโมตผลิตภัณฑ์ แต่ก็ควรกลมกลืนกับเว็บไซต์และดูเป็นธรรมชาติ คุณอาจต้องการให้คนอื่นมองที่สไลเดอร์ของคุณ แต่กลยุทธ์ที่ก้าวร้าวเหล่านี้ทำให้เกิดสิ่งที่ตรงกันข้าม
ทำให้ Slider ของคุณมีประโยชน์และเกี่ยวข้อง
ทุกสไลเดอร์ที่คุณวางควรมีจุดประสงค์ที่ชัดเจน มันแสดงภาพถ่ายของคุณหรือไม่? นำผู้ใช้ไปยังบางส่วนของเว็บไซต์? อธิบายว่าเว็บไซต์ของคุณเกี่ยวกับอะไร ลองโปรโมทสินค้าดูไหม? ดึงดูดผู้ใช้?
และวางม้าหมุนของคุณไว้ในพื้นที่ที่เหมาะสม การ วางตัวเลื่อน เป็นหนึ่งในปัจจัยที่สำคัญที่สุดในการสังเกตหรือลืม ตรวจสอบให้แน่ใจว่าไม่ได้ฝังอยู่ในเนื้อหาของหน้าหรือวางแบบสุ่ม ควรอยู่ในตำแหน่งเชิงกลยุทธ์และสังเกตเห็นได้ง่าย เช่น ในแถบด้านข้าง ใกล้กับด้านบนสุดของหน้า หรือใต้โพสต์บล็อก แม้แต่ส่วนท้ายก็สามารถเป็นที่ที่ดีในการใส่ตัวเลื่อน
เลือกลำดับสไลด์ของคุณอย่างระมัดระวัง
อย่าคิดเอาเองว่าผู้เยี่ยมชมจะยืนดูทุกสไลด์ เลือกลำดับของคุณอย่างระมัดระวัง สไลด์สองสามภาพแรกควรพยายามสร้างการมีส่วนร่วมและดึงดูดความสนใจของผู้ใช้ แต่ถ้าไม่สำเร็จ อย่างน้อยต้องแน่ใจว่าคุณเข้าใจประเด็นของคุณ
อย่างไรก็ตาม นั่นไม่ใช่ข้อแก้ตัวที่จะทำให้สไลด์อื่นๆ ของคุณมีประสิทธิภาพน้อยลง ไม่ว่าใครจะคลิกสไลด์ใด พวกเขาทั้งหมดก็ควรตอบสนองวัตถุประสงค์ของพวกเขา เช่น พูดคุยเกี่ยวกับบริษัทของคุณ อวดภาพถ่ายที่ยอดเยี่ยม และอื่นๆ
ทำให้ Slider ของคุณใช้งานได้
กฎสำคัญของสไลเดอร์: ต้องใช้งานง่ายและไม่สร้างความรำคาญให้ผู้มาเยี่ยมชม มีหลายวิธีที่คุณสามารถทำให้ภาพหมุนเข้าถึงได้ง่ายขึ้น ตั้งแต่การปรับให้เหมาะสมสำหรับผู้ชมที่ใช้อุปกรณ์เคลื่อนที่จำนวนมาก ไปจนถึงการปรับเวลาในการหมุนสไลด์อย่างระมัดระวัง
![nb_sbp_2 [1]](/uploads/article/1392/TuXyNSm7yUNqvP7Y.jpg)
พิจารณาปิดการเล่นอัตโนมัติ
การเคลื่อนไหวอาจทำให้เสียสมาธิหรือน่ารำคาญสำหรับผู้ใช้บางคน ในบล็อกโพสต์หรือบนแถบด้านข้างที่ติดตามผู้ใช้ทั่วทั้งไซต์ ให้ปิดการเล่นอัตโนมัติเสมอ การเบี่ยงเบนความสนใจของผู้เข้าชมในขณะที่พวกเขากำลังพยายามอ่านไม่ใช่ความคิดที่ดี
อย่างไรก็ตาม ในบางกรณี คุณอาจต้องการให้ภาพหมุนเป็นสิ่งที่ผู้เยี่ยมชมทุกคนให้ความสนใจ หรืออาจเป็นสิ่งสำคัญที่พวกเขาจะเห็นมากกว่าหนึ่งสไลด์ เมื่อตัดสินใจว่าจะเปิดหรือปิดการเล่นอัตโนมัติ ให้พิจารณาตำแหน่ง เนื้อหา และจุดประสงค์ของตัวเลื่อน
เพิ่มเวลาระหว่างการหมุน
ถ้าจำเป็นต้องเล่นอัตโนมัติสำหรับการออกแบบของคุณ ตรวจสอบให้แน่ใจว่าสไลด์ไม่เปลี่ยนเร็วเกินไป โดยเฉพาะอย่างยิ่งถ้าสไลด์นั้นเกี่ยวข้องกับข้อความ มันน่าผิดหวังเมื่อตัวเลื่อนเลื่อนไปข้างหน้าก่อนที่คุณจะพร้อม ปรับให้เหมาะสมสำหรับความเร็วในการอ่านที่ช้า ดีกว่าม้าหมุนที่ช้าแต่ได้รับการออกแบบมาอย่างดีมากกว่าแบบที่ผลักสไลด์ให้ได้มากที่สุดเท่าที่จะมากได้ภายในสิบวินาที
ปรับตัวเลือกการนำทางให้เหมาะสม
ไม่มีอะไรน่ารำคาญไปกว่าการคลิกลูกศรนำทางและเลื่อนสไลด์โชว์ไปในขณะนั้น ซึ่งจะทำให้คุณต้องข้ามสไลด์ การหยุดชั่วคราวเมื่อวางเมาส์เหนือหรือการนำทางเป็นคุณลักษณะที่หลายคนคาดหวัง แถบเลื่อน Soliloquy มี ฟังก์ชันนี้ และควรเปิดใช้งานบนภาพหมุนส่วนใหญ่ที่คุณสร้าง หากคุณเลือกที่จะเล่นอัตโนมัติต่อไป นี่เป็นสิ่งจำเป็น

![nb_sbp_3 [1]](/uploads/article/1392/uoeHB5avffPdqpXH.jpg)
ในขณะเดียวกัน ภาพหมุนที่เลื่อนไปเองโดยไม่ต้องมีกรอบการนำทางหรือปุ่มหยุดชั่วคราว สามารถทำให้ผู้ใช้หลายคนรำคาญใจได้ เนื่องจากต้องรอให้ทั้งรอบสิ้นสุดเพียงเพื่อจะพบสไลด์นั้นเพียงสไลด์เดียว อย่าลืมเพิ่ม การควบคุมการนำทาง ให้กับตัวเลื่อนของคุณด้วย
คุณควรพิจารณา การควบคุมการนำทางที่มีขนาดใหญ่เป็นพิเศษ โดยเฉพาะอย่างยิ่งหากคุณมีผู้ชมที่เป็นมือถือหรือผู้สูงอายุเป็นจำนวนมาก
สุดท้าย บนภาพหมุนที่มีรูปภาพจำนวนมาก ให้พิจารณารวม ภาพขนาดย่อ เพื่อให้ผู้ใช้สามารถเรียกดูสไลด์ที่ต้องการได้อย่างง่ายดาย
หลีกเลี่ยงความเสียหาย SEO
แถบเลื่อนที่กำหนดค่าไม่ถูกต้องคือแถบเลื่อนที่ไม่เหมาะกับเครื่องมือค้นหา โชคดีที่มาตรการหลายอย่างที่ทำให้เว็บไซต์และภาพหมุนของคุณเป็นมิตรกับ SEO ยังทำให้ใช้งานง่ายขึ้นอีกด้วย! แนวทางปฏิบัติเหล่านี้สำคัญที่สุดที่ต้องปฏิบัติตาม
![nb_sbp_4 [1]](/uploads/article/1392/QCqzGNV6F55fhyMo.jpg)
การตอบสนองก่อน
หากคุณกำลังใช้ปลั๊กอินตัวเลื่อน คุณมักจะไม่ต้องกังวลกับการตอบสนองของมัน อย่างไรก็ตาม ส่วนนี้มีความสำคัญ ทดสอบเพื่อให้แน่ใจว่าข้อความและรูปภาพของคุณดูดีในทุกอุปกรณ์ ปรับขนาดปุ่ม แทนที่ภาพที่พร่ามัว สิ่งที่คุณต้องทำสำหรับตัวเลื่อนมือถือที่สวยงาม
ตรวจสอบให้แน่ใจว่าเปิดใช้งานการปัดด้วยเช่นกัน ผู้ใช้มือถือคาดหวังว่าท่าทางการปัดจะทำงานสำหรับองค์ประกอบต่างๆ เช่น แถบเลื่อน และหากไม่ใช่กรณีนี้ ก็อาจทำให้เกิดความรำคาญได้
การออกแบบเพื่อการช่วยสำหรับการเข้าถึง
แม้ว่าคุณควรออกแบบเว็บไซต์ทั้งหมดโดยคำนึงถึงการช่วยสำหรับการเข้าถึง แต่ตัวเลื่อนควรสร้างด้วยวิธีนี้ด้วย ไม่เพียงแต่ช่วยให้ผู้พิการสามารถไปไหนมาไหนได้เท่านั้น แต่ยังมีแนวโน้มที่จะปรับปรุง SEO ด้วย
ตัวอย่างบางส่วนของ การออกแบบการช่วยการ เข้าถึง ที่ดี ได้แก่ การเปิดใช้งาน การควบคุมแป้นพิมพ์ การ หลีกเลี่ยงการเลื่อนอัตโนมัติหรือการหยุดภายใต้เงื่อนไขบางประการ และการตรวจสอบให้แน่ใจว่าข้อความมีความเปรียบต่างเพียงพอ
สร้างภาพฮีโร่ตัวเลื่อนที่ยอดเยี่ยม
กลวิธีใหม่อย่างหนึ่งคือการแทนที่ "ภาพฮีโร่" หรือแบนเนอร์บนหน้า Landing Page ที่อธิบายว่าเว็บไซต์ของคุณเกี่ยวกับอะไร ด้วยแถบเลื่อนแบบเคลื่อนไหว เทคนิคนี้มีข้อดีและข้อเสีย ภาพหมุนสามารถมีประสิทธิภาพเท่ากับภาพฮีโร่มาตรฐาน แต่จำเป็นต้องดำเนินการอย่างระมัดระวัง
![nb_sbp_5 [1]](/uploads/article/1392/0MVSFnvRmUUZhI9f.jpg)
หากคุณตัดสินใจที่จะใส่แถบเลื่อนบนหน้าแรกของคุณ โปรดจำไว้ว่าผู้เยี่ยมชมใหม่มีคำถามหนึ่งข้อ: เว็บไซต์นี้เกี่ยวกับอะไร ทุกสไลด์ในตัวเองและไม่มีบริบทควรตอบคำถามนี้
หลีกเลี่ยงหัวข้อ H1
สำหรับเครื่องมือค้นหา H1 ทำหน้าที่เป็นชื่อหน้า ดังนั้นเมื่อมีหลายหัวเรื่อง เช่น ภายในแถบเลื่อน อาจทำให้เครื่องมือค้นหาสับสนและลด SEO ลงได้ เพื่อความปลอดภัย หลีกเลี่ยงการใช้สิ่งเหล่านี้ในวงล้อ
หลีกเลี่ยงลิงก์การนำทาง Slider-Only เท่านั้น
มีหน้าบนเว็บไซต์ของคุณที่สามารถเข้าถึงได้ผ่านตัวเลื่อนหรือไม่? พยายามหลีกเลี่ยงสิ่งนี้ มันสร้างความสับสนทั้งสำหรับผู้ใช้และเครื่องมือค้นหา คุณสามารถใช้ตัวเลื่อนลิงก์เป็นเครื่องมือนำทางได้ แต่ต้องแน่ใจว่ามีตัวเลือกอื่น
การสร้าง Sliders ที่มีประสิทธิภาพ
แนวทางปฏิบัติที่ดีที่สุดวิธีหนึ่งที่คุณสามารถปฏิบัติตามได้เมื่อคุณตัดสินใจที่จะวางภาพหมุนบนเว็บไซต์ของคุณคือ การพิจารณาใช้ปลั๊กอิน เช่น Soliloquy โดยเฉพาะอย่างยิ่ง หากคุณเป็นนักพัฒนาเว็บใหม่ การพยายามสร้างตัวเลื่อนด้วยตัวเองอาจจบลงด้วยหายนะ SEO ปลั๊กอินใช้งานได้ง่ายกว่ามาก และได้รับการปรับแต่งเป็นพิเศษสำหรับ WordPress และเครื่องมือค้นหา
เมื่อคุณทราบเคล็ดลับบางประการในการวางแถบเลื่อนที่เป็นประโยชน์ มีประโยชน์ และมีส่วนร่วมบนเว็บไซต์ของคุณแล้ว คุณวางแผนจะใช้มันอย่างไร เราหวังว่าคู่มือนี้จะช่วยคุณในการออกแบบเว็บในอนาคต และในระหว่างนี้ ติดต่อเราทาง Twitter และ Facebook
บันทึก บันทึก
บันทึก บันทึก
บันทึก บันทึก
บันทึก บันทึก
บันทึก บันทึก
