ภาพหมุนในการออกแบบเว็บ - ประโยชน์และแนวทางปฏิบัติที่ดีที่สุด

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

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

ภาพหมุนผลิตภัณฑ์สำหรับอีคอมเมิร์ซ

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

มี สองตำแหน่งหลัก สำหรับตัวเลื่อนผลิตภัณฑ์อีคอมเมิร์ซ:

1. บนหน้าแรกของร้านค้า
2. บนหน้าผลิตภัณฑ์

พวกเขาทั้งสองทำงานแตกต่างกัน แต่ ให้บริการเป้าหมายเดียวกัน - เพื่อขายผลิตภัณฑ์ในลักษณะที่มองเห็น.

ตัวอย่างที่ 1: Au Lit Fine Linens - โฮมเพจ

ลองดูที่หน้าแรกของ Au Lit Fine Linens ใช้ม้าหมุนหมุนอัตโนมัติแบบเต็มหน้าจอ เพื่อแสดงผลิตภัณฑ์ที่แตกต่างเช่นผ้านวมหมอนและผ้าคลุมเตียง.

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

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

ตัวอย่างที่ 2: กรณีโทรศัพท์ Eden - หน้าผลิตภัณฑ์

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

ฉันคิดว่าสิ่งเหล่านี้เล็กน้อย “มากเกินไป” ในโลกของอีคอมเมิร์ซ เมื่อดูผลิตภัณฑ์ที่ฉันต้องการ ในการควบคุมการสลับระหว่างภาพต่างๆ.

ทางเลือกที่ดีกว่าคือการทำคลังภาพ ด้วยการควบคุมให้กับผู้เข้าชม. ตัวอย่างเช่นหน้า Design by Humans ใช้ รูปขนาดย่อสำหรับแต่ละรูปภาพ ซึ่งเป็นกำลังใจมากกว่าและให้การควบคุมแก่ผู้ใช้มากขึ้น.

ภาพสไลด์บนเว็บ

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

ตัวอย่างที่ 1: Biboun - โฮมเพจ

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

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

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

ตัวอย่างที่ 2: เว็บไซต์ของ Aaron Blaise - โฮมเพจ

ฉันชอบตัวอย่างที่พบในเว็บไซต์ของ Aaron Blaise เพราะเขา โชว์ผลงานของเขาในฐานะผลงาน, แต่ส่วนใหญ่ใช้เว็บไซต์นี้เพื่อ ขายวิดีโองานศิลปะของเขา. Aaron Blaise ทำงานที่ Disney มาสองทศวรรษแล้วและเขามีทักษะในการพิสูจน์ด้วย.

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

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

แนวโน้มการออกแบบทั่วไป

หากคุณดูตัวอย่างด้านบนของฉันคุณจะสังเกตเห็นว่ามีตัวเลื่อนสองประเภทที่แตกต่างกัน: เต็มจอ และ ความกว้างคงที่.

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

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

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

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

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

สิ่งที่ต้องหลีกเลี่ยงค่าใช้จ่ายทั้งหมด

นี่คือสิ่งสำคัญที่ฉันคิดว่าเป็นการส่วนตัว ตกอยู่ภายใต้ “หลีกเลี่ยงค่าใช้จ่ายทั้งหมด”. ลองดูหรือคลิกที่ภาพหน้าจอด้านล่างและลองเดาว่ามันอาจจะเป็นอะไร.

เว็บไซต์ร้านกาแฟ Yozenn ใช้แถบเลื่อนส่วนหัวแบบเต็มหน้าจอ มันไม่หมุนอัตโนมัติซึ่งยอดเยี่ยม แต่สไลด์ก็เช่นกัน ไม่มีจุดประสงค์อื่นนอกจากการตกแต่ง.

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

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

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

คุณสมบัติการโต้ตอบ

วิธีที่ผู้ใช้นำทางแบบหมุนมีผลต่อการออกแบบของตัวเอง มี หลากหลายสไตล์การนำทาง, แต่สิ่งเหล่านี้ได้รับความนิยมมากที่สุด:

• การนำทางแบบจุด
• ลูกศรนำทาง
• การนำทางรูปย่อ
• รายการลิงค์หรือรายการหัวข้อ

ที่พบมากที่สุดคือ การนำทางแบบจุด ซึ่งคุณจะพบกับเว็บไซต์ทันสมัยหลายร้อยเว็บไซต์.

ตัวอย่างที่ 1: Chic at Home - โฮมเพจ

Chic at Home เป็นตัวอย่างที่ดีในการใช้ จุดเล็ก ๆ สามจุดใต้แถบเลื่อน เพื่อแสดงการนำทาง ภาพแต่ละภาพจะหมุนโดยอัตโนมัติและจุดที่เกี่ยวข้องในซีรีส์ เต็มไปด้วยสีดำ. อีกสองจุดที่ว่างเปล่า แสดงว่าสไลด์ที่มีศักยภาพ สำหรับผู้ใช้เพื่อเรียกดู.

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

ตัวอย่างที่ 2: Pure Cycles - โฮมเพจ

โฮมเพจของ Pure Cycles ใช้ การรวมกันของการนำทางจุดและลูกศร. วิธีนี้ผู้ใช้มีการนำทางไปข้างหน้า & ย้อนกลับ แต่ ยังเห็น “ทั้งหมด” การเดินเรือ ผ่านจุดเชื่อมโยงด้านล่าง.

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

ตัวอย่างที่ 3: IGN - โฮมเพจ

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

ลิงก์เหล่านี้ อาจถูกแทนที่ด้วยภาพขนาดย่อ, หรือแม้กระทั่งรวมภาพขนาดย่อจากแต่ละเรื่องราว - อย่างไรก็ตาม มุมมองภาพจะปรากฏในม้าหมุน, ดังนั้นการข้ามภาพขนาดย่อจะช่วยประหยัดพื้นที่.

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

ประเด็นที่สำคัญ

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

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

หากคุณกำลังมองหาข้อมูลเพิ่มเติมเกี่ยวกับภาพหมุนบนเว็บโปรดดูโพสต์ต่อไปนี้:

• Carousels โดย Brad Frost
• ข้อกำหนด UX 8 ประการสำหรับการออกแบบ Carousel โฮมเพจที่ใช้งานง่าย
• การใช้งานแบบหมุน: การออกแบบ UI ที่มีประสิทธิภาพสำหรับเว็บไซต์ที่มีการโอเวอร์โหลดเนื้อหา