UI ไปเรื่อยๆ เผยให้เห็น (Progressive Disclosure)

UI ที่เรียกว่า Progressive Disclosure (ไปเรื่อยๆ เผยให้เห็น) เป็นการแสดงข้อมูลหรือเครื่องมือเพิ่มเติมเมื่อยูสเซอร์มีการกระทำผ่าน UI ใดๆ ส่วนใหญ่ที่ผมพบเห็นการใช้งาน UI นี้ มักจะใช้คู่กับฟอร์มกรอกข้อมูล อธิบายตรงนี้อาจจะยังไม่เข้าใจ เดี๋ยวผมจะยกตัวอย่างก็แล้วกันครับ

อันแรกเป็น feed ในหน้า Google+ ที่ด้านล่างของแต่ละบล็อคจะมีช่องให้เรากรอกคอมเมนต์ จะสังเกตว่าไม่มีปุ่มส่งคอมเมนต์ใช่ไหมครับ

แต่ถ้าเราเริ่มคลิกที่ช่องกรอกคอมเมนต์ จะปรากฎฟอร์มให้กรอกใส่ข้อความที่รองรับตัวอักษรได้มากขึ้น พร้อมปุ่มส่งและยกเลิก

เห็นไหมครับ UI progressive disclosure คือการเปิดเผย UI เท่าที่จำเป็นในช่วงจังหวะเวลาที่เหมาะกับการกระทำแต่ละอย่างของยูสเซอร์

อีกตัวอย่างเป็นหน้าใส่ feed ของ facebook ครับ

เช่นเดียวกับ Google+ พอเราคลิกที่ช่องกรอกข้อความจะปรากฎเครื่องมือให้เราเลือกใช้อย่างมากมายไม่ว่าจะเป็นฟังก์ชันการใส่รูปภาพ, ใส่ชื่อเพื่อน, ใส่สติ๊กเกอร์, หรือใส่ข้อมูลสถานที่ แล้วก็มีปุ่มให้โพสต์ฟีดของเรา

ซึ่งเครื่องมือหรือปุ่มเหล่านี้ ไม่มีความจำเป็นเลยที่ต้องแสดงให้เห็นในตอนแรก (ก่อนที่จะคลิกที่ช่องกรอกข้อความ) หากแสดงแล้วจะทำให้หน้าโดยรวมของ facebook ดูรกเลอะเทอะ และทำให้ผู้ใช้งานใหม่รู้สึกกลัวที่จะใช้ด้วย

หากเราพิจารณาให้ดีแล้วจะเห็นว่า UI progressive disclosure จะซ่อนฟังก์ชันหรือเครื่องมือที่มีลำดับการใช้งานรองลงไปจากเครื่องมือที่เป็นฟังก์ชันหลัก

ในกรณีของ facebook ฟังก์ชันหลักคือ “การกรอกข้อความ”  ส่วนฟังก์ชันรอง คือการใส่รูปภาพ, สติ๊กเกอร์, หรือการเลือกระดับการโพสต์ว่าจะให้เห็นทุกคนหรือเฉพาะแค่เพื่อนเราเท่านั้น

ตัวอย่างสุดท้ายเพื่อให้ภาพการใช้งาน UI นี้มากขึ้น เรามาดูฟอร์มการจ่ายเงินกันครับ

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

แต่ด้วยวิธี progressive disclosure ยูสเซอร์จะเห็นแค่ฟอร์มเพียงแค่ช่องเดียวในตอนแรก จึงรู้สึกว่าไม่ต้องใช้พลังงานเยอะในการทำงานชิ้นนี้ให้สำเร็จ พอเลือกเสร็จก็รู้สึกอีกว่าได้ทำอะไรทีสำเร็จเป็นข้อๆ ไปแล้ว ทำให้เกิดความรู้สึกอยากทำให้ขั้นตอนต่อไปสำเร็จต่อไปเรื่อยๆ (progressive ^^)

พอมาถึงขั้นตอนที่ 3 ในระหว่างที่กรอกเลขบัตร 4 ตัวแรกเสร็จ ในขณะเดียวกัน ระบบก็จะทำการตรวจสอบได้ว่าเป็นบัตรของบริษัทอะไร (Visa, Mastercard, American Express เป็นต้น) หากตรงกับบริษัทไหนก็แสดงภาพบัตรขึ้นให้เห็นว่าเลขบัตรนี้เป็นบัตร Visa เป็นต้น ซึ่งการเผยให้เห็นระหว่างที่ยูสเซอร์กำลังกรอกฟอร์มนี้ ทำให้ยูสเซอร์เกิดความมั่นใจมากขึ้นว่าตัวเองกรอกข้อมูลสำคัญถูกต้องแล้ว (ดูบทความ ช่องเดียวเอาอยู่ ประกอบ)

สรุปการใช้งาน UI progressive disclosure

• หากเราจะใช้ UI นี้ควรพิจารณาใช้กับงานที่มีขั้นมีตอนและวิเคราะห์ flow การกระทำของยูสเซอร์ว่าจะแสดงอะไรให้ยูสเซอร์เห็นในช่วงเวลาใดในแต่ละขั้นตอน
• ส่วนใหญ่จะใช้คู่กับ UI ประเภทฟอร์ม

หมายเหตุ

อันที่จริง Progressive disclosure จะใช้กับ UI ที่กว้างขวางมากที่ช่วยซ่อนข้อมูลหรือเมนูที่ไม่จำเป็นสำหรับยูสเซอร์ทั่วๆ ไป เช่น

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