UI Pattern

UI ไปเรื่อยๆ ค่อยๆ ลด (Progressive Reduction)

1

pr-05

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

ว่าตามหลักหยิน-หยาง แล้ว ในเมื่อมี UI progressive disclosure (ไปเรื่อยๆ เผยให้เห็น) ก็ต้องมี UI แบบ progressive reduction (ไปเรื่อยๆ ค่อยๆ ลด) แต่มันจะมีการใช้งานอย่างไงล่ะ เริ่มคิดไม่ออกแล้วใช่ไหมล่า งั้นมาดูกันเลย

UI progressive reduction มีแนวคิดที่ว่าเมื่อยูสเซอร์เริ่มคุ้นเคยกับ Interface ที่ใช้งานอยู่บ่อยๆ เราสามารถที่จะลดรูป UI นั้นๆ ได้ตามระยะเวลาการใช้งานที่ผ่านมาของยูสเซอร์

อย่างเช่น ง่ายๆ เลยครับ

pr-01เว็บ  Invision ตรงโลโก้ด้านบน เราจะเห็นรูปแบบเต็มเมื่ออยู่ด้านบนสุดของหน้า

pr-02แต่พอเราเลื่อนหน้าลงไป โลโก้จะถูกลดรูปเหลือให้เห็นส่วนที่เป็นอัตลักษณ์ของ UI (โลโก้) เท่านั้น

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

มีอีกตัวอย่างที่ต้องใช้ระยะเวลานานพอสมควร หากเราต้องการที่จะลดทอนรูปของ UI อย่างถาวรครับ

pr-03รูป Interface ด้านบน ให้เราเห็นว่าปุ่ม ‘Signpost’ ค่อยๆ ถูกลดทอนไปเรื่อยๆ ตามกาลเวลา จากปุ่มที่มีไอคอนและตัวอักษรกำกับ -> ปุ่มพร้อมไอคอน -> จนเหลือเฉพาะไอคอน

อย่างที่ผมบอกไป คีย์หลักของ UI progressive reduction คือ ระยะเวลา ‘ยิ่งยูสเซอร์เห็น UI นั้นนานเท่าไร โอกาสในการลดรูป UI ให้มีประสิทธิภาพก็ยิ่งมากขึ้นเท่านั้น’

และการใช้ UI นี้ควรใช้กับ web หรือ app ที่มียูสเซอร์เป็นกลุ่มผู้ใช้งานอยู่เป็นประจำ เช่น web ที่ใช้ภายในองค์กร หรืออีกนัยหนึ่ง มันอาจจะยากสักหน่อย หากจะนำ UI progressive reduction ไปใช้กับ web / app ทั่วๆ ไป ที่มียูสเซอร์หน้าใหม่อยู่ตลาดเวลา

pr-06ภาพด้านบนนี้สื่อได้ดีมากเกี่ยวกับการใช้งาน UI progressive reduction แต่เนื่องด้วยเหตุผลที่มีข้อจำกัดเกี่ยวกับยูสเซอร์ใหม่ ทำให้ UI นี้ยังคงไม่นิยมใช้ และรอแนวทางการพัฒนาเพื่อนำไปใช้งานได้หลากหลายหนทางมากขึ้นครับ

ที่มา: Progressive reduction evolving the experience for your most frequent users , The challengers with progressive reduction

 

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

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

Previous article

7 สคริปต์ Photoshop มีไว้ใช้ให้ฟินเวอร์

Next article

You may also like

1 comment

  1. […] Disclosure นี้ได้ที่บล็อคของผม และต่อด้วย Progressive Reduction […]

Leave a reply

Your email address will not be published. Required fields are marked *

More in UI Pattern