ทฤษฎี UI Gestalt Theory Rule#6-การปกปิด By uiblogaziner June 29, 20143446 views ShareTweet 0 มาถึงข้อสุดท้ายของทฤษฎีเกสตอลต์แล้วนะครับ นี่คือสุดยอดของสุดยอดของเทคนิคการออกแบบ แต่ต้องใช้ความระมัดระวังและกำหนดเป้าหมายที่เราต้องการจะส่งสารให้ชัดเจน เพราะมันเป็นทฤษฎีที่พึ่งพาศักยภาพทางความคิดและประสบการณ์ของผู้เห็นอย่างมากครับ ทฤษฎีการปกปิด (Closure) มีใจความหลักๆ ว่า ภาพที่เราสื่อสารกับผู้ชมจะมีการลบออกไปบางส่วน และเหลือข้อมูลหรือเงื่อนงำให้ผู้เห็นจินตนาการจากประสบการณ์หรือการจำได้หมายรู้ เดาว่าวัตถุนั้นคืออะไร รูปด้านบนทางซ้าย คงเดาได้ไม่ยาก สมองเราจะรับรู้ว่ามีสามเหลี่ยมสีขาวอยู่ แทนที่จะเห็น Pac man สามตัว ส่วนรูปทางด้านขวา เราก็จะเห็นรูปกล่องลูกบาศก์ เพราะเราไม่เข้าใจรูปทรงของพื้นที่สีดำใช่ไหมครับ ทฤษฎีข้อนี้ทำงานอย่างนี้แหละครับ คือ พยายามเติมเต็มช่องว่างในภาพ โดยอิงจากประสบการณ์ที่ผ่านมาของผู้ชม อธิบายตัวอย่างง่ายๆ กว่านี้ครับ ถ้าผมพิมพ์ประโยค ฉันชอ_กิ_ขน_หวา_ เราคงจะพอเดาได้ว่าประโยคที่ถูกต้องคืออะไรใช่ไหมครับ แต่ถ้าผมปกปิดมากไปล่ะก็ เช่น ฉันชอ_กิ_ข_ _ _ว _ _ อย่างนี้เริ่มเดายากแล้วใช่ไหมครับ แม้เราจะสามารถคิดได้ต่างๆ นานา แต่ถ้าข้อมูลที่เหลือนั้นไม่ไปทำให้ผู้เห็นระลึกได้ หรือเป็นสิ่งที่ไม่อยู่ในประสบการณ์แล้วล่ะก็ ยากที่จะเติมเต็ม สารหรือรูปนั้นก็ถือไม่ประสบความสำเร็จ มาดูตัวอย่างการประยุกต์ใช้งานด้านการออกแบบโลโก้กันครับ โลโก้ร้าน eight ทางซ้าย เราจะเห็นตัวเลข 8 แฝงอยู่ทุกตัวอักษรเลยใช่ไหมครับ แม้จะแสดงแค่บางส่วน แต่เราก็รับรู้ได้ว่ามันคือ เลข 8 (เติมเต็มให้เป็นเลข 8) และเพราะจากบริบทแวดล้อมเป็นตัวช่วยด้วย เช่น ตัว i หากแสดงเดี่ยวๆ เราคงมองไม่เห็นเลข 8 แน่ๆ หรือแม้แต่เวลาเราอ่านหนังสือการ์ตูน เราก็พยายามเติมเต็มเฟรมที่ขาดหายไป (ปกปิดการกระทำบางช่วงเวลาของตัวละคร) แล้วมองมันเป็นการเคลื่อนไหวที่เชื่อมโยงกันช่องต่อช่อง จนเหมือนเราชม animation ในงาน UI เราอาจนำมาใช้เรื่องข้อมูลที่สามารถเลื่อนชมเพิ่มเติมได้ในแนวนอน จากรูปทางด้านบน โดยปกติเรารู้ว่าข้อมูลสามารถเลื่อนขึ้นลงได้อยู่ได้แล้วบนมือถือ แต่กรณีที่ต้องการให้ผู้ใช้งานทราบว่า ข้อมูลบางส่วนสามารถเลื่อนซ้าย/ขวาได้ด้วย เราจำเป็นต้องแสดงรูปหรือข้อมูลบางส่วนเพื่อให้ผู้ใช้เห็น เน้นว่าต้องไม่เต็มส่วนนะครับ (ปกปิด) ซึ่งเป็นการทำให้ผู้ใช้งานเกิดประสบการณ์เหมือนการแสดงผลข้อมูลแนวตั้ง (ปกปิดเหมือนกัน) หากไม่ทำเช่นนั้น เช่น ความจริงหน้าสินค้านี้สามารถเลื่อนดูซ้ายขวาได้ แต่เพราะไม่ได้แสดงให้เห็นข้อมูลสินค้าบางส่วนด้านขวา เราจึงไม่รู้ว่าเลื่อนได้ แต่โชคดีที่ยังมีลูกศรให้ใช้งานอยู่ที่มุมขวาบนทำให้ผู้ใช้งานทราบว่ามีหน้าเพิ่มเติมทางขวาด้วย การออกแบบด้านบน ไม่ใช่ว่าเป็นสิ่งผิดนะครับ เพราะ designer คงคำนึงการแสดงผลที่ดูสวยงามและง่ายต่อการโค้ด จึงได้เพิ่มปุ่มเลือกซ้าย – ขวาเข้ามาด้วย เพื่อไม่ให้ผู้ใช้เลื่อนดูสินค้าในแนวตั้งอย่างเดียวครับ ปุ่ม options ของ Google Map ก็เพียงแสดงให้เราเห็นเพียงบางส่วน เราก็เข้าใจว่ามันสามารถคลิกได้ และเดาได้ว่ามันต้องมีอะไรซ่อนอยู่ถ้าคลิกที่ปุ่มนี้ หรือเวลาเราไปออกแบบโลโก้หรือไอคอนใดๆ เราก็อาจลองซ่อนบางส่วนของรูปดูครับ จะได้เห็นมุมมองใหม่ๆ ที่น่าสนใจไม่ใช่น้อย ปกปิดเพื่อดึงความสนใจว่างั้น เราผู้ชายคงเข้าใจดี ฮิๆ อีกครั้งครับ หัวใจของข้อนี้ คือการปกปิดและให้ผู้ชมหรือผู้ใช้เติมเต็มส่วนนั้นด้วยความคิดหรือการกระทำก็ได้ครับ หากช่องว่างที่จะให้ใส่นั้นกว้าง ผู้ใช้ก็ต้องใช้ความคิดที่มากขึ้นด้วย ดังนั้นอย่างที่ผมได้บอกไป ควรใช้ทฤษฎีข้อนี้อย่างฉลาดนะครับ ไม่งั้นสิ่งที่เราอยากให้เค้าเห็น เค้าอาจจะเห็นเป็นอีกอย่างได้