- หน้าจอโหลดสามารถช่วยยกระดับประสบการณ์ผู้ใช้ได้ โดยทำให้มองเห็นได้ว่าระบบกำลังทำอะไรอยู่
- มีหลายสิ่งที่ควรพิจารณาเพื่อสร้างหน้าจอโหลดที่เหมาะสม
- ก่อนออกแบบ ควรตรวจสอบระบบการโหลดก่อน
- เช่น การโหลดนั้นบล็อกการป้อนข้อมูลของผู้ใช้หรือไม่ สามารถทราบความคืบหน้าได้หรือไม่ โหลดข้อมูลมากน้อยเพียงใด และประสบการณ์บนมือถือเป็นอย่างไร
- เช่น เป็นการโหลดแบบ passive (ระบบโหลดล่วงหน้า) หรือ active loading (โหลดตามการกระทำของผู้ใช้)
- ความเปลี่ยนแปลงตามปริมาณที่แสดงในแต่ละครั้ง
- สำหรับคอมโพเนนต์ที่ซับซ้อน อาจเหมาะกว่าหากค่อย ๆ แสดงทีละส่วน
- สำหรับคอมโพเนนต์ที่ค่อนข้างเรียบง่าย ควรแสดงทั้งหมดพร้อมกันหลังโหลดเสร็จ
- หากมีคอมโพเนนต์จำนวนมาก จำเป็นต้องใช้การโหลดแบบหน่วงเวลา
- ใช้แนวทางอย่าง infinite scroll, ปุ่มดูเพิ่มเติม หรือ pagination
- ความเปลี่ยนแปลงตามความถี่
- หากมีการเปลี่ยนแปลงตลอดเวลา ควรลด UI ที่ใช้แสดงการโหลดให้น้อยที่สุด
- อ้างอิงจาก UI การบันทึกแบบเรียลไทม์ของ Google Drive
- หากมีการเปลี่ยนแปลงเป็นครั้งคราว ควรแสดงให้ผู้ใช้เห็นทันที
- เช่น ป๊อปอัปแจ้งว่าเนื้อหาที่กำลังดูอยู่ได้รับการอัปเดตแล้ว และให้รีเฟรชหน้าจอ
- ความเปลี่ยนแปลงตามระยะเวลาที่ใช้
- ควรพิจารณาก่อนว่าสามารถบอกความคืบหน้าได้อย่างชัดเจนหรือไม่ หรือเป็นสถานะที่ไม่แน่นอน
- กรณีต่ำกว่า 0.1 วินาที
- แสดงผลลัพธ์ได้ทันที
- ในบางกรณี การแสดงหน้าจอโหลดแบบจำลองอาจดีกว่า
- เช่น เมื่องานนั้นมีความสำคัญในมุมมองของผู้ใช้ (เช่น การบันทึก) หรือเมื่อจำเป็นต้องมีช่วงหน่วงให้ผู้ใช้ทำแอ็กชันได้ (เช่น ปุ่มยกเลิกการส่งอีเมล)
- กรณีระหว่าง 0.1 ถึง 1 วินาที
- เป็นช่วงหน่วงที่พบได้บ่อยมาก และมักไม่สะดุดตาผู้ใช้ จึงไม่ควรเพิ่มหน้าจอโหลด
- กรณีมากกว่า 1 วินาที
- เมื่อเกิน 1 วินาที ผู้ใช้จะเริ่มรับรู้เวลาที่ต้องรอ จึงควรเพิ่มหน้าจอโหลดที่เหมาะสม
- หากคอมโพเนนต์ที่กำลังโหลดมีขนาดเล็ก loading spinner เป็นตัวเลือกที่ดี (เช่น การอัปโหลดไฟล์)
- หากเป็นการเปลี่ยนหน้าจอ skeleton loading screen เหมาะกว่า
- หากรูปภาพเป็นคอนเทนต์หลัก การดึงสีหลักออกมาแล้วทำให้เบลอจะได้ผลดีมาก
- กรณีระหว่าง 2 ถึง 10 วินาที
- ตัวบอกเวลา เช่น "ใช้เวลาประมาณ 5 วินาที" อาจมีประสิทธิภาพ
- แถบแสดงความคืบหน้าเป็นตัวเลือกที่ดีเสมอ
- หากกระบวนการประกอบด้วยหลายขั้นตอน การแสดงขั้นตอนเหล่านั้นก็เป็นอีกวิธีหนึ่ง
- แม้ไม่มีขั้นตอนที่ชัดเจน ก็สามารถใช้ข้อความทั่วไปได้ (เช่น กำลังเชื่อมต่อกับเซิร์ฟเวอร์)
- กรณีมากกว่า 10 วินาที
- หากสามารถทราบความคืบหน้าได้อย่างชัดเจน ควรแสดงเปอร์เซ็นต์และเวลาที่เหลือ เป็นต้น (เช่น อัปโหลดไฟล์ไปแล้ว 50%)
- แต่การค้างอยู่ที่ 99% เป็นสิ่งที่เสียหายต่อประสบการณ์อย่างมาก ดังนั้นหากมีโอกาสเกิดขึ้น ควรใช้วิธีอื่น
- หากใช้เวลานานกว่านั้นและไม่สามารถทราบความคืบหน้าได้ชัดเจน ควรแจ้งว่าจะส่งอีเมลหรือการแจ้งเตือนเมื่อเสร็จ และเปิดให้ผู้ใช้ควบคุมได้
- อีกทางเลือกหนึ่งคือให้ทำงานในเบื้องหลังโดยไม่รบกวนการกระทำอื่นของผู้ใช้เลย (เช่น สถานะความคืบหน้าในการอัปโหลดของ Google Drive)
3 ความคิดเห็น
ขอบคุณสำหรับบทความดี ๆ ครับ
. สำหรับผมจะไม่แสดงจนถึง 250ms แต่ก็ไม่แน่ใจว่าถ้ายืดไปถึง 1 วินาทีจะยังโอเคไหม
โอ้ ผมกำลังหาข้อมูลอ้างอิงเกี่ยวกับหน้าจอโหลดอยู่พอดีเลย! ขอบคุณครับ 555
สรุปดูเหมือนจะยาวเกินไปหน่อย... เอาเป็นว่ามีเนื้อหาดี ๆ เยอะมากเลยพยายามหยิบมาให้ได้มากที่สุด
ประเด็นที่ว่าการมีหน้าจอโหลดปลอมจะช่วยเพิ่มความน่าเชื่อถือได้นั้นน่าสนใจดีนะครับ ฝั่ง Hacker News เองก็คุยเรื่องนี้กันพอสมควรเหมือนกัน