progress-indicator
Design

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

สิ่งหนึ่งที่ต้องใส่ใจในการออกแบบ 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

Customize Loader / Source : Perlego

Customize Loader

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

skeleton-loader

Skeleton Loader / Source : Youtube

Skeleton Loader

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

Blur-up

Blur-up / Source: Medium

Blur-up

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

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

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

ios-loader

Load time estimation / Source: iOS

Load time estimation

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

greg

Source : Greg

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

ig

Optimistic UI / Source : Instagram

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

โปรโมชันพิเศษสำหรับช่วงนี้ ราคาเพียง 1,490 จากราคาเต็ม 1,990 แค่กรอกโค้ด … จำกัดสำหรับ 100 สิทธิ์เท่านั้น! สนใจสมัครเลย >>> https://to.skooldio.com/RECY278pUib

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

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

You may also like

Business

ทำความรู้จัก Design Thinking – สกิลมาแรงที่บริษัทชั้นนำทั่วโลกกำลังมองหา

Design Thinking ไม่ใช่แค่ชื่อวิชาในคลาสเรียนของเด็กออกแบบ แต่เป็นสกิลที่กำลังเป็นที่ต้องการของบริษัทชั้นนำในหลายประเทศทั่วโลก เช่น Apple, Google , Microsoft, Tesla หรือ Startup ไทยอย่าง Bitkub อีกด้วย ...
Business

วิธีสร้าง Pitch แบบโอมากาเสะ – ด้วย Storytelling Framework

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

More in:Design

Business

ทำ Data Visualization ให้เวิร์ก – กับ 9 แหล่งความรู้ที่มือโปรแนะนำ

📊 แนะนำ 9 แหล่งความรู้อัปสกิล ซึ่งสรุปจากไอเดียของ 4 Speakers ผู้เชี่ยวชาญในวงการ Data Visualization ที่ไปพูดคุยใน 🔴 Skooldio Live ตอน ...
Design

Motion กับการออกแบบ UX ตามหลักจิตวิทยาการออกแบบ และการทำงานในสมองของ User

Why Motion? ทำไม UX/UI Designer ควรให้ความสำคัญกับการนำ Motion Design มาใช้ในงานออกแบบมากขึ้น? หลายคนอาจคิดว่า Motion มีส่วนแค่ทำให้งานมีความสวยงามมากขึ้น ดู Modern มากขึ้นเท่านั้น ...
Design

“เมื่อเป็ดกลายมาเป็น UX” ดีไซเนอร์ผู้อยากทำงานสายการศึกษา และเชื่อว่า UX อยู่ในชีวิตประจำวัน

สำหรับคนที่เรียกตัวเองว่า “มนุษย์เป็ด” อาจกำลังสับสนที่เส้นทางการเรียนรู้และสายอาชีพไม่ได้เดินเป็นเส้นตรง หรือไม่ได้มีจุดหมายปลายทางที่ชัดเจนนัก มนุษย์เป็ดอาจไม่รู้ว่าสิ่งที่กำลังเรียนหรือตั้งใจทำอยู่จะแปลผลเป็นอะไรในอนาคต และไม่แน่ใจว่าควรสะสมทักษะ ประสบการณ์อะไรต่อไปดี การมาสู่ UX Designer ของคุณปุ้ม บุศยา กิตติรังสิ Head of ...
ทำงานสาย UX ไม่ได้มีแค่เรื่องของ UX และ UI | Skooldio Blog Design

การทำงานสาย UX ไม่ได้มีแค่เรื่องของ UX และ UI

หลายคนอาจจะคิดว่า UX/UI designer ต้องจบจากด้าน Design หรือทำงานด้าน Graphic Design มาก่อนเท่านั้นถึงจะทำได้ แต่ในความเป็นจริงแล้ว ไม่ว่าใครก็สามารถทำได้ เราทุกคนที่ทำงานสายนี้ ต่างต้องเรียนรู้เพิ่มเติมเกี่ยวกับศาสตร์นี้กันตลอด ยิ่งยุคสมัยเปลี่ยนไป ความต้องการของคนก็เปลี่ยน ...

Comments are closed.