นักพัฒนาเว็บถกเถียงทางเลือกที่ดีกว่าเชิงอรรถแบบดั้งเดิมสำหรับเนื้อหาออนไลน์

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

ปัญหาของเชิงอรรถดิจิทัล

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

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

ปัญหาของ Footnote แบบดั้งเดิม:

• ต้องเลื่อนหน้าจอไปยังท้ายเอกสาร
• เป้าหมายการคลิกที่เล็กมาก (ตัวเลขยกกำลัง)
• ความยากลำบากในการกลับไปยังตำแหน่งเดิม
• ไม่มีการแสดงตัวอย่างเนื้อหาหรือบริบท
• ข้อจำกัดที่สืบทอดมาจากสื่อสิ่งพิมพ์

โซลูชันและการนำไปใช้จากชุมชน

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

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

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

ตัวอย่างการนำไปใช้งาน:

• Gwern.net: การนำเสนอหมายเหตุข้างเคียงแบบครอบคลุม
• Dorian Taylor: เนื้อหาในวงเล็บที่สามารถขยายได้
• Buttondown: รูปแบบจุดไข่ปลาไปยังหน้าต่างป๊อปอัป
• KOReader: เชิงอรรถแบบป๊อปอัปในรูปแบบ e-book
• Daring Fireball: การเชื่อมโยงเชิงอรรถแบบสองทิศทาง

ทางเลือกที่เสนอ

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

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

ทางเลือกเว็บที่เสนอ:

• วงเล็บ: สำหรับข้อความเสริมสั้นๆ ภายในเนื้อหาหลัก
• ส่วนหมายเหตุ: ใช้ <section role="note"> พร้อมหัวข้อที่อธิบายชัดเจน
• องค์ประกอบ Details: เนื้อหาที่สามารถยุบขยายได้ด้วย <details> และ <summary>
• หมายเหตุข้าง: เชิงอรรถที่แสดงข้างเนื้อหาหลักเมื่อมีพื้นที่เพียงพอ
• กล่องโต้ตอบ Popover: การแสดงผลแบบ modal สำหรับเนื้อหาเชิงอรรถ

ผลกระทบที่กว้างขึ้น

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

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

อ้างอิง: Give footnotes the boot