รวมเทคนิคใช้ Progress Indicator ออกแบบ UX/UI จากแอปฯ ระดับโลก ไม่ให้ User รู้สึกว่าต้อง ‘รอ’ นานเกินไป ด้วย Motion Design

สิ่งหนึ่งที่ต้องใส่ใจในการออกแบบ UX/UI คือเราอยู่ในยุคที่ User หรือผู้ใช้งานมีความอดทนในการรอน้อยลงทุกวัน ตามกฏของ Doherty Threshold บ่งบอกไว้ว่าผู้ใช้งานจะยังคงจดจ่อและยังไม่ไปไหนถ้าต้องรอไม่เกิน 0.4 วินาที แต่หลายครั้งที่เราอาจมีข้อจำกัดในการทำตามกฏ 0.4 วินาที หากต้องใช้เวลาในการให้ User รอนานมากกว่านั้น โดยเฉพาะกับการรอที่เกิน 1 วินาทีที่ User จะเริ่มคิดถึงสิ่งอื่นๆ และอาจจะทิ้ง Product(Web, Mobile App) ของเราไป นอกจากการที่ต้อง Optimize ในส่วน Performance ของเว็บหรือแอปฯ ให้ทำงานเร็วที่สุด ในมุมของนักออกแบบ UX/UI อาจใช้การแก้เกมด้วยสิ่งที่เรียกว่า Progress Indicator บอกให้ User รู้ว่าระบบกำลังโหลดหรือทำงานในขั้นตอนไหนอยู่ ซึ่งเป็นวิธีการใช้ Motion Design ให้ Visual Feedback กับ User ให้รู้สึกว่า Product ของเรามีการตอบสนองกับการที่ User เข้ามาทำอะไรบางอย่าง ถือเป็นองค์ประกอบในการออกแบบ UX/UI ที่สำคัญมากต่อประสบการณ์ของผู้ใช้งาน

ตัวอย่างการใช้ Progress Indicator แก้เกมสำหรับการโหลดที่เกิน 1 วินาที

Customize Loader

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

Skeleton Loader

ตัวอย่างที่เห็นได้บ่อยๆ เช่นใน Facebook หรือ Youtube ผู้ใช้งานจะไม่ได้ไปจดจ่อกับการรอแบบทั่วไป แต่จะเห็นโครงเนื้อหาข้อมูล และเห็น UI ค่อยๆ เปลี่ยนไปเรื่อยๆ ทำให้ User รู้สึกว่าระบบกำลังประมวลผลและโหลดข้อมูลมาด้วยความเร็วและจะแสดงผลทันทีที่โหลดเสร็จ

Blur-up

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

อีกประโยชน์ของเทคนิค Blur-up คือการได้จองพื้นที่ไว้สำหรับรูปที่กำลังโหลดอยู่แล้ว จึงจะไม่ทำให้เกิดการ Layout Shift หรืออาการที่คอนเทนท์ในจอขยับเมื่อมีรูปหรือส่วนประกอบอื่นๆ โหลดเสร็จทีหลัง ซึ่งส่งผลเสียต่อประสบการณ์ของ User เป็นอย่างมาก (และ Google ก็ซีเรียสเรื่องนี้มาก)

สำหรับการโหลดที่เกิน 10 วินาที การรอที่นานขนาดนี้ User ก็จะเริ่มหันไปทำอะไรอย่างอื่นแล้ว เราจะแก้เกมอย่างไรได้บ้างให้ User ไม่รู้สึกแย่กับการรอ

Load time estimation

บอก User ไปเลยว่าเราจะใช้เวลาเท่าไหร่ เพื่อให้เขาไปทำอย่างอื่นต่อได้ วางแผนเวลาของตัวเองได้ว่าจะกลับมาใช้งาน Product ของเราอีกทีตอนไหน

หรือบอก User ไปตรงๆ เลยว่ากำลังทำอะไรอยู่ User จะได้เห็นเป็นก้อนเวลาย่อยๆ ว่าระบบกำลังทำงานอยู่ในขั้นตอนไหน ไม่ต้องรู้สึกว่ากำลังรออะไรนานๆ โดยที่ไม่รู้ว่ารออะไรอยู่

Optimistic UI

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

นี่คือส่วนหนึ่งของการออกแบบ UX/UI โดยใช้ Motion Design เข้ามาเป็นส่วนประกอบสำคัญที่อยู่เบื้องหลังแอปฯ หรือเว็บที่เราใช้งานกันอย่างเป็นธรรมชาติ หากสนใจอยากเรียนรู้ว่า Motion Design จะเข้ามาช่วยยกระดับงาน UX/UI ของคุณได้อย่างไรบ้าง ขอแนะนำคอร์ส Improving UX with Motion ที่จะสอนปูพื้นฐานตั้งแต่เริ่มต้นจนลงมือทำ Clickable Prototype ด้วยเครื่องมือสุดฮอตอย่าง Figma และ Framer

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

สมัครวันนี้เพื่ออัปสกิล UX/UI ไปพร้อมๆ กัน รับส่วนลดถึง 4,900 บาท สนใจอ่านรายละเอียดเพิ่มเติมได้เลยที่นี่ >>> https://to.skooldio.com/RDRAdzeqUib