สำรวจหลักการออกแบบของเกสตัลต์

ฟังเวอร์ชั่นเสียงของบทความนี้

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

สมองของมนุษย์นั้นเก่งมากในการเติมช่องว่างในภาพและสร้างส่วนที่มากกว่าผลรวมของส่วนต่างๆ นั่นเป็นเหตุผลที่เราเห็นใบหน้าในสิ่งที่เหมือนใบไม้หรือรอยร้าวบนทางเท้า

หลักการนี้เป็นหนึ่งในแนวคิดพื้นฐานที่สำคัญที่สุดเบื้องหลังหลักการเกสตัลต์ของการรับรู้ทางสายตา ข้อเสนอแรกเริ่มที่ทรงอิทธิพลที่สุดที่เขียนเกี่ยวกับทฤษฎีนี้ได้รับการตีพิมพ์โดย Max Wertheimer ใน กฎหมาย Gestalt ของ 1923 ขององค์กรการรับรู้ แม้ว่าการอภิปรายเกี่ยวกับ Physical Gestalten ของ Wolfgang Kohler ในปี 1920 ยังมีแนวคิดที่มีอิทธิพลมากมายในหัวข้อนี้

ไม่ว่าใครจะเป็นผู้เสนอความคิดเป็นคนแรก (มีบทความเรียงความย้อนหลังไปถึงปี 1890) หลักการเกสตัลต์เป็นชุดแนวคิดที่สำคัญสำหรับนักออกแบบทุกคนที่จะเรียนรู้ และการนำไปปฏิบัติสามารถปรับปรุงได้อย่างมาก ไม่เพียงแต่ความสวยงามของการออกแบบเท่านั้น แต่ยังรวมถึง ฟังก์ชันการทำงานและความเป็นมิตรต่อผู้ใช้

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

มีหลักการทั่วไป 6 ประการที่เกี่ยวข้องกับทฤษฎีเกสตัลท์: ความเหมือน , ความต่อเนื่อง , การปิด , ความใกล้ชิด , รูปร่าง/พื้น และ สมมาตรและระเบียบ (เรียกอีกอย่างว่า ปราญญานซ์ ) นอกจากนี้ยังมีหลักการเพิ่มเติมที่ใหม่กว่าซึ่งบางครั้งเกี่ยวข้องกับการเกสตัลท์ เช่น โชคชะตาทั่วไป

ความเหมือน

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

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

ในการออกแบบ UX การใช้ความคล้ายคลึงกันทำให้ผู้เยี่ยมชมของคุณทราบว่ารายการใดบ้างที่เหมือนกัน ตัวอย่างเช่น ในรายการคุณสมบัติที่ใช้องค์ประกอบการออกแบบซ้ำๆ (เช่น ไอคอนพร้อมด้วยข้อความ 3-4 บรรทัด) หลักการความคล้ายคลึงกันจะทำให้ง่ายต่อการสแกนผ่าน ในทางตรงกันข้าม การเปลี่ยนองค์ประกอบการออกแบบสำหรับคุณลักษณะที่คุณต้องการเน้นทำให้โดดเด่นและให้ความสำคัญมากขึ้นในการรับรู้ของผู้เข้าชม

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

ความต่อเนื่อง

กฎความต่อเนื่องกำหนดว่าดวงตาของมนุษย์จะเดินตามเส้นทางที่ราบเรียบที่สุดเมื่อดูเส้น โดยไม่คำนึงว่าเส้นนั้นถูกวาดอย่างไรจริงๆ

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

เนื่องจากตาจะไล่ตามเส้นโดยธรรมชาติ การวางรายการในชุดข้อมูลในบรรทัดจะดึงดูดสายตาจากรายการหนึ่งไปยังรายการถัดไป แถบเลื่อนแนวนอนเป็นตัวอย่างหนึ่ง เช่นเดียวกับการลงรายการผลิตภัณฑ์ที่เกี่ยวข้องในเว็บไซต์อย่าง Amazon

ปิด

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

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

การปิดมักใช้ในการออกแบบโลโก้ โดยมีตัวอย่างอื่นๆ เช่น USA Network, NBC, Sun Microsystems และแม้แต่ Adobe

อีกตัวอย่างที่สำคัญมากของการปิดในที่ทำงานในการออกแบบ UX และ UI คือเมื่อคุณแสดงภาพบางส่วนที่จางหายไปจากหน้าจอของผู้ใช้เพื่อแสดงให้พวกเขาเห็นว่าจะมีอะไรอีกมากมายให้ค้นหาหากพวกเขาปัดไปทางซ้ายหรือขวา หากไม่มีภาพบางส่วน กล่าวคือ หากแสดงเฉพาะภาพเต็ม สมองจะไม่ตีความในทันทีว่าอาจมีอะไรให้ดูอีก ดังนั้นผู้ใช้ของคุณจึงมีแนวโน้มที่จะเลื่อนน้อยลง (เนื่องจากการปิดปรากฏแล้ว)

ความใกล้ชิด

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

ตรงกันข้ามก็เป็นจริงเช่นกัน โดยการวางช่องว่างระหว่างองค์ประกอบ คุณสามารถเพิ่มการแยกออกได้แม้ว่าคุณลักษณะอื่นๆ จะเหมือนกันก็ตาม

ใช้แวดวงกลุ่มนี้ เช่น

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

รูป/พื้น

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

สมองของคุณจะแยกแยะระหว่างวัตถุที่ถือว่าอยู่เบื้องหน้าของภาพ (รูปหรือจุดโฟกัส) และพื้นหลัง (พื้นที่ที่ร่างนั้นพัก) สิ่งที่น่าสนใจคือเมื่อพื้นหน้าและพื้นหลังประกอบด้วยภาพที่แตกต่างกันสองภาพ ดังนี้:

ตัวอย่างที่ง่ายกว่านี้สามารถเห็นได้จากภาพนี้ ของใบหน้าสองหน้าที่สร้างเชิงเทียนหรือแจกันระหว่างพวกเขา:

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

หลักการฟิกเกอร์/กราวด์มีประโยชน์มากเมื่อนักออกแบบผลิตภัณฑ์ต้องการเน้นจุดโฟกัส โดยเฉพาะอย่างยิ่งเมื่อมีการใช้งานหรือใช้งานอยู่ ตัวอย่างเช่น เมื่อหน้าต่างโมดอลปรากฏขึ้นและส่วนอื่นๆ ของไซต์จางลงในพื้นหลัง หรือเมื่อ คลิกแถบค้นหาและเพิ่มความคมชัดระหว่างแถบค้นหากับส่วนอื่นๆ ของไซต์

สมมาตรและระเบียบ

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

นี่เป็นอีกตัวอย่างที่ดีของหลักการออกแบบเกสตัลต์ “ pragnanz ”:

สมองของคุณจะตีความภาพทางด้านซ้ายเป็นสี่เหลี่ยม วงกลม และสามเหลี่ยม แม้ว่าโครงร่างของแต่ละส่วนจะไม่สมบูรณ์เพราะเป็นรูปร่างที่เรียบง่ายกว่าภาพรวม

ชะตากรรมร่วมกัน

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

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

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

หลักการเกสตัลต์ในการออกแบบ UX

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

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

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• หลักการออกแบบ: บทนำสู่ลำดับชั้น
• แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบ UI และข้อผิดพลาดทั่วไป
• วิธีการใช้หลักการเกสตัลต์อันทรงพลังในการออกแบบ (พร้อมอินโฟกราฟิก)
• คู่มือที่ครอบคลุมสำหรับสถาปัตยกรรมสารสนเทศ
• เพิ่ม UX ของคุณด้วยหลักการออกแบบการโต้ตอบที่ประสบความสำเร็จเหล่านี้