ทฤษฎี UI

ทฤษฎีเกสตอลท์สำหรับงานออกแบบ UI (Gestalt Theory for UI Design)

บทความแรกๆ ของ UI Blogazine ได้นำเสนอทฤษฎีเกสตอลท์ (Gestalt) ในบริบทที่ใช้ในการออกแบบสื่อกราฟิคโดยรวม ไม่ได้เฉพาะเจาะจงเรื่องของ UI มากสักเท่าไรนัก ในบทความนี้ เราจะมาทบทวนทฤษฎีนี้กัน และลงรายละเอียดในหัวข้อที่เกี่ยวกับงานอออกแบบ UI กันครับ พร้อมตัวอย่างและสถานการณ์การนำทฤษฎีเกสตอลท์ไปใช้ทำงานได้จริงๆ ทฤษฎีเกสตอลท์ (Gestalt Theory) เกสตอลท์ (Gestalt) เป็นคำในภาษาเยอรมัน หมายถึง ...
ทฤษฎี UI

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

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

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

หากสังเกตให้ดี ขณะที่เราเดินอยู่บนทางเท้าหรือพื้นที่สาธารณะที่มีทางให้คนเดินสวนกันได้ เราจะพยายามเดินไปในทิศทางเดียวกับคนข้างหน้า ทั้งที่ๆ ไม่มีใครป้ายกำหนดว่าฝั่งนี้สำหรับเดินเข้า หรือฝั่งนี้สำหรับเดินออก มันเป็นสิ่งที่เราเข้าใจได้จากการไหลและเคลื่อนที่ของกลุ่มว่า หากคนหรือสิ่งใดที่เคลื่อนที่ไปในทางเดียวกัน จะเข้าใจว่าเป็นกลุ่มเดียวกัน หัวใจสำคัญของทฤษฎีข้อนี้ คือ การเคลื่อนไหวและทิศทางครับ หากเรามีวัตถุที่หน้าตาเหมือนกันหมด แต่อยากแยกออกให้เป็น 2 กลุ่ม เรายังสามารถทำได้โดยการทำให้วัตถุเคลื่อนที่ไปในทิศทางที่ต่างกัน 2 ทิศทาง กลุ่มที่ 1 เคลื่อนไปทางซ้าย กลุ่มที่ ...
ทฤษฎี UI

Gestalt Theory Rule#4-ความสมมาตร

ให้เราลองดูรูปด้านบนก่อนนะครับ สักประมาณ 1-3 วินาที คิดว่าพวกเราส่วนใหญ่จะเห็นความสมดุล ความสมมาตรในรูปใช่ไหมครับ แทนที่จะเห็นกลุ่มวัตถุ 4 กลุ่ม เพราะจากข้อที่แล้วเรื่องความใกล้ชิดที่บอกว่า วัตถุที่อยู่ใกล้กัน เราจะเข้าใจว่าวัตถุพวกนั้นเป็นกลุ่มเดียวกัน (วงเล็บอันแรกคือกลุ่มที่ 1 วงเล็บที่ 2 และ 3 คือกลุ่มที่ 2 วงเล็บที่ 4 และ ...
ทฤษฎี UI

Gestalt Theory Rule#2-ความเหมือน

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