ทฤษฎี UI Gestalt Theory Rule#2-ความเหมือน By uiblogaziner June 29, 20142959 views ShareTweet 0 2. ความเหมือนหรือคล้ายคลึงกัน ทฤษฎีนี้เข้าใจได้ไม่ยาก วัตถุที่มีคุณลักษณะที่เหมือนกัน เราจะเข้าใจว่าวัตถุนั้นมีความสัมพันธ์กัน ไม่ว่าจะเป็นรูปทรง สี ขนาด พื้นผิว น้ำหนัก กลิ่น ฯลฯ จากรูปเราจะเห็นว่ากลุ่มวัตถุแม้จะมีรูปทรงเดียวกันหมด แต่ด้วยสีแล้ว ทำให้เราเห็นว่ามีการแบ่งความสัมพันธ์ออกเป็น 2 กลุ่ม การนำเอาทฤษฎีข้อนี้มาใช้ เราจะเห็นตัวอย่างได้จากการทำสไตล์ให้กับลิงค์ในหน้าเว็บ จากรูปด้านบนเราจะเห็นได้ชัดเลยว่า วัตถุได้แบ่งออกเป็น 2 กลุ่มอย่างชัดเจน กลุ่มที่ 1 คือ ข้อความธรรมดาที่ใช้สีดำ และ กลุ่มที่ 2 ข้อความที่เป็นลิงค์ซึ่งใช้สีน้ำเงินและขีดเส้นใต้ ลองดูอีกตัวอย่างนะครับ จากเว็บ Agoda หน้าแสดงผลลัพธ์โรงแรม ทางด้านซ้ายเราจะเห็นฟิลเตอร์ให้เลือกคัดกลุ่มโรงแรมที่เราสนใจเป็นพิเศษ จะเห็นว่าเมื่อเราเลือกเช็คบอกซ์แล้ว ระบบจะทำการใส่สีพื้นหลังพร้อมใส่ข้อความด้านหลังว่า active ให้กับตัวเลือกที่เราเลือก ทำให้ผู้ใช้สังเกตได้ง่ายว่ากลุ่มไหนเป็นกลุ่มที่เราเลือก และกลุ่มไหนที่เราไม่ได้เลือก เพียงแค่เราดูผ่านๆ ก็สามารถทราบได้แล้วว่าเรากำลังฟิลเตอร์หัวข้อไหนอยู่ แม้จะมีจำนวนตัวเลือกอยู่มากก็ตาม อย่างเรื่องการออกแบบโลโก้เว็บ Bake a web ผมก็นำเอาความรู้ข้อนี้มาใช้ให้เห็นเด่นชัด ผมเลือกที่จะไม่ใช้ space ระหว่างคำเพราะจะทำให้โลโก้นั้นดูยาวไป แต่ถ้าอย่างงั้น ผมก็จะต้องพิมพ์เป็น bakeaweb ซึ่งคนทั่วไปคงอ่านเข้าใจลำบาก ผมเลยนำเรื่องสีเข้ามาช่วยเป็นตัวแบ่งคำแทน และใช้สีอ่อนตรงตัว a ซึ่งเป็นคำที่สำคัญรองลงมา ถ้าดูผ่านๆ ก็จะอ่านเห็นคำ bake web เด่นกว่าตัว a ซึ่งก็เพียงพอสำหรับเป้าหมายที่ผมต้องการจะสื่อสารแล้วว่า เว็บนี้ให้บริการอะไรเป็นหลัก เราจะเห็นวิธีการใช้งานแบบนี้ค่อนข้างเยอะ ตรงพวกหัวข้อในหนังสือหรือนิตยสารซึ่งจะเลือกใช้สีเข้มสำหรับหัวข้อใหญ่ และสีอ่อนกว่าสำหรับหัวข้อรอง ลองสังเกตดูนะครับ และตัวอย่างสุดท้าย หน้าปกนิตยสาร Time ฉบับเดือนมีนาคม 2014 ซึ่งผมชอบมาก แสดงการใช้เส้น 2 น้ำหนัก (2 กลุ่มวัตถุ) เพื่อสร้างภาพเครื่องบินออกมา ง่ายๆ แต่สุดยอดใช่ไหมครับ นี่แหละครับพลังของทฤษฎีข้อนี้