ทฤษฎี UI

Gestalt Theory Rule#6-การปกปิด

0

closure-01

มาถึงข้อสุดท้ายของทฤษฎีเกสตอลต์แล้วนะครับ นี่คือสุดยอดของสุดยอดของเทคนิคการออกแบบ แต่ต้องใช้ความระมัดระวังและกำหนดเป้าหมายที่เราต้องการจะส่งสารให้ชัดเจน เพราะมันเป็นทฤษฎีที่พึ่งพาศักยภาพทางความคิดและประสบการณ์ของผู้เห็นอย่างมากครับ

ทฤษฎีการปกปิด (Closure) มีใจความหลักๆ ว่า ภาพที่เราสื่อสารกับผู้ชมจะมีการลบออกไปบางส่วน และเหลือข้อมูลหรือเงื่อนงำให้ผู้เห็นจินตนาการจากประสบการณ์หรือการจำได้หมายรู้ เดาว่าวัตถุนั้นคืออะไร

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

ทฤษฎีข้อนี้ทำงานอย่างนี้แหละครับ คือ พยายามเติมเต็มช่องว่างในภาพ โดยอิงจากประสบการณ์ที่ผ่านมาของผู้ชม

อธิบายตัวอย่างง่ายๆ กว่านี้ครับ ถ้าผมพิมพ์ประโยค

ฉันชอ_กิ_ขน_หวา_

เราคงจะพอเดาได้ว่าประโยคที่ถูกต้องคืออะไรใช่ไหมครับ

แต่ถ้าผมปกปิดมากไปล่ะก็ เช่น

ฉันชอ_กิ_ข_ _ _ว _ _

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

closure-02มาดูตัวอย่างการประยุกต์ใช้งานด้านการออกแบบโลโก้กันครับ โลโก้ร้าน eight ทางซ้าย เราจะเห็นตัวเลข 8 แฝงอยู่ทุกตัวอักษรเลยใช่ไหมครับ แม้จะแสดงแค่บางส่วน แต่เราก็รับรู้ได้ว่ามันคือ เลข 8 (เติมเต็มให้เป็นเลข 8) และเพราะจากบริบทแวดล้อมเป็นตัวช่วยด้วย เช่น ตัว i หากแสดงเดี่ยวๆ เราคงมองไม่เห็นเลข 8 แน่ๆ

closure-03

หรือแม้แต่เวลาเราอ่านหนังสือการ์ตูน เราก็พยายามเติมเต็มเฟรมที่ขาดหายไป (ปกปิดการกระทำบางช่วงเวลาของตัวละคร) แล้วมองมันเป็นการเคลื่อนไหวที่เชื่อมโยงกันช่องต่อช่อง จนเหมือนเราชม animation

closure-04ในงาน UI เราอาจนำมาใช้เรื่องข้อมูลที่สามารถเลื่อนชมเพิ่มเติมได้ในแนวนอน จากรูปทางด้านบน โดยปกติเรารู้ว่าข้อมูลสามารถเลื่อนขึ้นลงได้อยู่ได้แล้วบนมือถือ แต่กรณีที่ต้องการให้ผู้ใช้งานทราบว่า ข้อมูลบางส่วนสามารถเลื่อนซ้าย/ขวาได้ด้วย เราจำเป็นต้องแสดงรูปหรือข้อมูลบางส่วนเพื่อให้ผู้ใช้เห็น เน้นว่าต้องไม่เต็มส่วนนะครับ (ปกปิด) ซึ่งเป็นการทำให้ผู้ใช้งานเกิดประสบการณ์เหมือนการแสดงผลข้อมูลแนวตั้ง (ปกปิดเหมือนกัน)

หากไม่ทำเช่นนั้น เช่น

closure-05

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

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

gg-map-swipeปุ่ม options ของ Google Map ก็เพียงแสดงให้เราเห็นเพียงบางส่วน เราก็เข้าใจว่ามันสามารถคลิกได้ และเดาได้ว่ามันต้องมีอะไรซ่อนอยู่ถ้าคลิกที่ปุ่มนี้

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

อีกครั้งครับ หัวใจของข้อนี้ คือการปกปิดและให้ผู้ชมหรือผู้ใช้เติมเต็มส่วนนั้นด้วยความคิดหรือการกระทำก็ได้ครับ หากช่องว่างที่จะให้ใส่นั้นกว้าง ผู้ใช้ก็ต้องใช้ความคิดที่มากขึ้นด้วย ดังนั้นอย่างที่ผมได้บอกไป ควรใช้ทฤษฎีข้อนี้อย่างฉลาดนะครับ ไม่งั้นสิ่งที่เราอยากให้เค้าเห็น เค้าอาจจะเห็นเป็นอีกอย่างได้

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

Gestalt Theory Rule#5-ทางร่วม

Previous article

Interface ม่านรูด

Next article

You may also like

Comments

Leave a reply

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