ทฤษฎี UI ทฤษฎีเกสตอลท์สำหรับงานออกแบบ UI (Gestalt Theory for UI Design) บทความแรกๆ ของ UI Blogazine ได้นำเสนอทฤษฎีเกสตอลท์ (Gestalt) ในบริบทที่ใช้ในการออกแบบสื่อกราฟิคโดยรวม ไม่ได้เฉพาะเจาะจงเรื่องของ UI มากสักเท่าไรนัก ในบทความนี้ เราจะมาทบทวนทฤษฎีนี้กัน และลงรายละเอียดในหัวข้อที่เกี่ยวกับงานอออกแบบ UI กันครับ พร้อมตัวอย่างและสถานการณ์การนำทฤษฎีเกสตอลท์ไปใช้ทำงานได้จริงๆ ทฤษฎีเกสตอลท์ (Gestalt Theory) เกสตอลท์ (Gestalt) เป็นคำในภาษาเยอรมัน หมายถึง ... By uiblogazinerMay 29, 20160
ทฤษฎี UI Gestalt Theory Rule#6-การปกปิด มาถึงข้อสุดท้ายของทฤษฎีเกสตอลต์แล้วนะครับ นี่คือสุดยอดของสุดยอดของเทคนิคการออกแบบ แต่ต้องใช้ความระมัดระวังและกำหนดเป้าหมายที่เราต้องการจะส่งสารให้ชัดเจน เพราะมันเป็นทฤษฎีที่พึ่งพาศักยภาพทางความคิดและประสบการณ์ของผู้เห็นอย่างมากครับ ทฤษฎีการปกปิด (Closure) มีใจความหลักๆ ว่า ภาพที่เราสื่อสารกับผู้ชมจะมีการลบออกไปบางส่วน และเหลือข้อมูลหรือเงื่อนงำให้ผู้เห็นจินตนาการจากประสบการณ์หรือการจำได้หมายรู้ เดาว่าวัตถุนั้นคืออะไร รูปด้านบนทางซ้าย คงเดาได้ไม่ยาก สมองเราจะรับรู้ว่ามีสามเหลี่ยมสีขาวอยู่ แทนที่จะเห็น Pac man สามตัว ส่วนรูปทางด้านขวา เราก็จะเห็นรูปกล่องลูกบาศก์ เพราะเราไม่เข้าใจรูปทรงของพื้นที่สีดำใช่ไหมครับ ทฤษฎีข้อนี้ทำงานอย่างนี้แหละครับ คือ ... By uiblogazinerJune 29, 20140
ทฤษฎี UI Gestalt Theory Rule#5-ทางร่วม หากสังเกตให้ดี ขณะที่เราเดินอยู่บนทางเท้าหรือพื้นที่สาธารณะที่มีทางให้คนเดินสวนกันได้ เราจะพยายามเดินไปในทิศทางเดียวกับคนข้างหน้า ทั้งที่ๆ ไม่มีใครป้ายกำหนดว่าฝั่งนี้สำหรับเดินเข้า หรือฝั่งนี้สำหรับเดินออก มันเป็นสิ่งที่เราเข้าใจได้จากการไหลและเคลื่อนที่ของกลุ่มว่า หากคนหรือสิ่งใดที่เคลื่อนที่ไปในทางเดียวกัน จะเข้าใจว่าเป็นกลุ่มเดียวกัน หัวใจสำคัญของทฤษฎีข้อนี้ คือ การเคลื่อนไหวและทิศทางครับ หากเรามีวัตถุที่หน้าตาเหมือนกันหมด แต่อยากแยกออกให้เป็น 2 กลุ่ม เรายังสามารถทำได้โดยการทำให้วัตถุเคลื่อนที่ไปในทิศทางที่ต่างกัน 2 ทิศทาง กลุ่มที่ 1 เคลื่อนไปทางซ้าย กลุ่มที่ ... By uiblogazinerJune 29, 20140
ทฤษฎี UI Gestalt Theory Rule#4-ความสมมาตร ให้เราลองดูรูปด้านบนก่อนนะครับ สักประมาณ 1-3 วินาที คิดว่าพวกเราส่วนใหญ่จะเห็นความสมดุล ความสมมาตรในรูปใช่ไหมครับ แทนที่จะเห็นกลุ่มวัตถุ 4 กลุ่ม เพราะจากข้อที่แล้วเรื่องความใกล้ชิดที่บอกว่า วัตถุที่อยู่ใกล้กัน เราจะเข้าใจว่าวัตถุพวกนั้นเป็นกลุ่มเดียวกัน (วงเล็บอันแรกคือกลุ่มที่ 1 วงเล็บที่ 2 และ 3 คือกลุ่มที่ 2 วงเล็บที่ 4 และ ... By uiblogazinerJune 29, 20140
ทฤษฎี UI Gestalt Theory Rule#2-ความเหมือน 2. ความเหมือนหรือคล้ายคลึงกัน ทฤษฎีนี้เข้าใจได้ไม่ยาก วัตถุที่มีคุณลักษณะที่เหมือนกัน เราจะเข้าใจว่าวัตถุนั้นมีความสัมพันธ์กัน ไม่ว่าจะเป็นรูปทรง สี ขนาด พื้นผิว น้ำหนัก กลิ่น ฯลฯ จากรูปเราจะเห็นว่ากลุ่มวัตถุแม้จะมีรูปทรงเดียวกันหมด แต่ด้วยสีแล้ว ทำให้เราเห็นว่ามีการแบ่งความสัมพันธ์ออกเป็น 2 กลุ่ม การนำเอาทฤษฎีข้อนี้มาใช้ เราจะเห็นตัวอย่างได้จากการทำสไตล์ให้กับลิงค์ในหน้าเว็บ จากรูปด้านบนเราจะเห็นได้ชัดเลยว่า วัตถุได้แบ่งออกเป็น 2 กลุ่มอย่างชัดเจน ... By uiblogazinerJune 29, 20140
ทฤษฎี UI 6 หลักการเพื่อออกแบบทุกสิ่งบนโลกนี้ ตอนที่ 1: Affordance (ล่อให้กระทำ) June 22, 201714589 views