Gestalt Theory Rule#1-ความใกล้ชิด

ลองมองดูภาพด้านบน แล้วบอกผมว่า คุณเห็นอะไร…

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

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

ทฤษฎีเกสตอลท์ (Gestalt Theory) เป็นเรื่องที่ว่าด้วย “เราจะรู้สึกนึกคิดอย่างไรกับข้อมูลที่เป็นรูปภาพ” ทฤษฎีอันเก่าแก่นี้ถือกำเนิดมาในช่วงต้นศตวรรษที่ 20 โดยเริ่มจากนักปราชญ์ชาวออสเตรีย Christian von Ehrenfels และถูกพัฒนาร่วมกันกับนักจิตวิทยาชาวเยอรมัน Max Wertheimer และนักคิดร่วมสมัยท่านอื่นๆ อีกมากมาย

ทฤษฎีเกสตอลท์ถูกจัดแบ่งออกเป็น 6 หัวข้อ ซึ่งได้แก่

• ความใกล้ชิด (Proximity)
• ความเหมือนหรือคล้ายคลึงกัน (Similarity)
• รูปร่างและพื้นหลัง (Figure-Ground)
• ความสมมาตร (Symmetry)
• ทางร่วมกัน (Common Fate)
• การปกปิด (Closure)

1. ความใกล้ชิด

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

คราวนี้ผมลองเปลี่ยนเอาวงกลมไปใส่แทนสี่เหลี่ยมบางอันในกลุ่มด้านขวาบ้าง แต่เหมือนว่าเราก็ยังเข้าใจว่ารูปนี้ยังถูกแบ่งเป็น 2 กลุ่มใหญ่ๆ อยู่ดี เพราะสมองเราจะมองภาพในมุมมองใหญ่ก่อน แล้วค่อยมองไปในรายละเอียดภายหลัง สรุปก็คือ กลุ่มวัตถุด้านขาวก็ยังถูกเข้าใจว่าเป็นกลุ่มที่มีความสัมพันธ์กัน แม้จะมีรูปทรงอื่นแทรกสอดเข้ามา

เราสามารถนำเอาทฤษฎีข้อนี้ไปใช้ในการออกแบบ UI ได้นะครับ เช่น การออกแบบฟอร์ม มาดูตัวอย่างกัน

จากฟอร์มที่ผมออกแบบจะเห็นเลยใช่ไหมครับว่า จะมีข้อมูลที่เราต้องกรอกแบ่งออกเป็น 2 กลุ่ม คือ ข้อมูลส่วนตัวและที่อยู่

แม้ว่าผมจะลบเอาหัวข้อออกไป ก็ยังเข้าใจว่า ข้อมูลแบ่งออกเป็น 2 กลุ่มอยู่ดี

ดังนั้นหากเราอยากสร้างความสัมพันธ์ให้กับวัตถุสองสิ่งขึ้นไปแล้ว ก็แค่เอามาวางไว้ให้ใกล้ๆ กัน เท่านั้นเองครับ ซึ่งจะช่วยให้ user เมื่อเข้ามาเห็น UI เราแว๊บแรก ก็จะเข้าใจการใช้งานหรือสิ่งที่จะต้องทำในภาพรวมทันทีครับ

หรือจะเอาไปประยุกต์ในชีวิตจริงก็ได้นะ ถ้าเราอยากสร้างความสัมพันธ์กับใครแล้วล่ะก็ ลองหาวิธีไปอยู่ใกล้ๆ เค้าดูซิ 😉