หลักการเกสตัลต์คืออะไร - วิธีสมัคร

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

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

กฎแห่งความคล้ายคลึงกัน

หลักการของความคล้ายคลึงกันระบุว่าเมื่อวัตถุมีความคล้ายคลึงกันทางกายภาพ เรามักจะ จัดกลุ่มพวกมันไว้ด้วยกัน และถือว่าพวกมันมี ฟังก์ชั่นเหมือนกัน . ตัวอย่างเช่น ในภาพด้านล่าง ค่อนข้างง่ายที่จะแยกแยะเส้นที่มีวงกลมสีแดงเบอร์กันดีจากส่วนที่เหลือของภาพ เนื่องจากสีที่ต่างกัน

ตัวอย่างหลักการของความคล้ายคลึงกัน ภาพถ่ายโดยผู้เขียน

การใช้ความคล้ายคลึงกันในการออกแบบ UX และ UI

ดูสิ่งนี้ด้วย: 7 เคล็ดลับง่ายๆ ที่จะช่วยให้คุณเรียนรู้วิธีร่างภาพ

ลองจินตนาการว่าบริษัทของคุณพัฒนา แอปชื่อ “Il Mio Chef'' ที่ใช้โดยผู้สนใจรักอาหารอิตาเลียนทั่วสหรัฐอเมริกาและแคนาดา (เราจะใช้สำหรับส่วนที่เหลือของบทความนี้) รายงานล่าสุดที่นักวิจัย UX ของคุณส่งมาให้คุณระบุว่า เมื่อพูดถึงการสั่งอาหารอิตาเลียน ผู้ใช้ส่วนใหญ่สนใจว่าร้านอาหารใดที่ใกล้เคียงกับพวกเขามากที่สุด ท้ายที่สุด เราทุกคนคงต้องการให้ส่งลาซานญ่าหรือพิซซ่าของเราในขณะที่ยังสดและอุ่นอยู่ใช่ไหม

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

การใช้หลักการความคล้ายคลึงกันของ Gestalt ภาพโดยผู้เขียน

กฎแห่งความใกล้ชิด

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

ความใกล้ชิด - ตัวอย่างที่ 1 - กลุ่มใหญ่ ภาพโดยผู้เขียน

ความใกล้เคียง - ตัวอย่างที่ 2 - สามกลุ่มที่แตกต่างกัน ภาพโดยผู้เขียน

การใช้ Proximity ในการออกแบบ UX และ UI

ลองมาดูตัวอย่างจากฟิลด์นี้กัน ของการแสดงข้อมูล

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

แดชบอร์ด KPI - Il Mio Chef ภาพโดยผู้เขียน

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

การใช้หลักการ Gestalt ของความใกล้เคียงในการออกแบบแดชบอร์ด รูปภาพโดยผู้เขียน

กฎหมายของความต่อเนื่อง

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

ตัวอย่างหลักการของความต่อเนื่อง รูปภาพโดยผู้เขียน

การใช้ความต่อเนื่องในการออกแบบ UX และ UI

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

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

การใช้หลักการความต่อเนื่องของ Gestalt ในการออกแบบ UX/UI รูปภาพโดยผู้เขียน

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

‍

ปกประกอบด้วยงานศิลปะโดย Miklos Philips ซึ่งแก้ไขใน Vectornator