progress-indicator
Design

รวมเทคนิคใช้ 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

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

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

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

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

You may also like

Business

ทำความรู้จัก Voxel Art งานกราฟิก 3D ยอดฮิตที่สร้างได้ตั้งแต่ Item, Character ยันเมือง

หลายๆ คนอาจจะคุ้นหน้าคุ้นตากับงานภาพสไตล์ Pixel Art หรืองานภาพ Computer Graphic แบบ 8bit ที่ทำให้เรานึกถึงอดีตกันมาบ้างแล้ว (ถ้าใครนึกไม่ออกก็ลองคิดถึงภาพ Arcade Game อย่าง Pac-Man ...
Design

รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง!

ในยุคที่คนทำงานออกแบบ UX/UI เกือบทุกคนหันมาใช้เครื่องมือมาแรงแห่งยุคอย่าง Figma กันอย่างจริงจัง เนื่องจากหน้าโปรแกรมที่เข้าใจง่าย ส่งต่องานกับทีมได้อย่างไม่มีสะดุด ใช้งานแบบฟรีก็ทำได้ แถมมาพร้อมลูกเล่นมากมายที่ช่วยให้งานออกแบบในยุคนี้ทำได้ง่ายกว่าเมื่อก่อน มี Community ที่เปิดให้ทุกคนมาแชร์ widgets หรือ plugins ...

More in:Design

Design

Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดในวงการ Design!

Figma คืออะไร ??? ทำไมจึงเป็นเครื่องมือออกแบบอันดับ 1 ที่ UXUI Designer ทั่วโลกเลือกใช้  Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, ...
UX Writing คืออะไร Design

ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
Web Design Font Pairing Design

เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...
ui-design-Cover Design

ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...

Comments are closed.