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

รูปแบบการออกแบบเป็นวิธีการอย่างเป็นทางการในการบันทึกวิธีแก้ ปัญหา การออกแบบ ทั่วไป แนวคิดนี้ได้รับการแนะนำโดยสถาปนิกคริสโตเฟอร์ อเล็กซานเดอร์เพื่อใช้ในการวางผังเมืองและสถาปัตยกรรมอาคารและได้รับการดัดแปลงสำหรับสาขาวิชาอื่นๆ อีกมากมาย รวมถึงการสอนและการศึกษาการพัฒนาองค์กรและ กระบวนการ และสถาปัตยกรรมและการออกแบบซอฟต์แวร์^{[ 1 ]}

ดังนั้น รูปแบบการออกแบบปฏิสัมพันธ์จึงเป็นวิธีการอธิบายวิธีแก้ปัญหาการใช้งานหรือการเข้าถึงทั่วไปในบริบทเฉพาะ^{[ 2 ]}โดยจะบันทึกแบบจำลองปฏิสัมพันธ์ที่ทำให้ผู้ใช้เข้าใจอินเทอร์เฟซและทำงานให้สำเร็จได้ง่ายขึ้น^{[ 3 ]}

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

รูปแบบการออกแบบในวิทยาการคอมพิวเตอร์นั้นถูกใช้โดยวิศวกรซอฟต์แวร์ในระหว่างกระบวนการออกแบบจริงและเมื่อสื่อสารการออกแบบกับผู้อื่น รูปแบบการออกแบบได้รับความนิยมในวิทยาการคอมพิวเตอร์หลังจากหนังสือDesign Patterns: Elements of Reusable Object-Oriented Softwareได้รับการตีพิมพ์ ตั้งแต่นั้นมา ชุมชนผู้สร้างรูปแบบได้เกิดขึ้นมาซึ่งกำหนดรูปแบบสำหรับโดเมนปัญหาต่างๆ รวมถึงสไตล์สถาปัตยกรรมและเฟรมเวิร์กเชิงวัตถุ เอกสารประกอบการประชุมPattern Languages ​​of Programming Conference (ประจำปี ตั้งแต่ปี 1994 เป็นต้นมา) มีตัวอย่างมากมายของรูปแบบเฉพาะโดเมน

การนำแนวทางภาษาแบบแผนมาใช้ในการออกแบบปฏิสัมพันธ์นั้นได้รับการเสนอแนะครั้งแรกในหนังสือUser Centered System Design ของ Norman และ Draper (1986) นอกจากนี้ คู่มือการออกแบบส่วนติดต่อผู้ใช้สำหรับเครื่อง Macintosh ของ Apple Computer ยังอ้างอิงถึงผลงานของ Christopher Alexander ในส่วนหนังสือแนะนำอีกด้วย

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

ความนิยมของอุปกรณ์พกพา เช่น สมาร์ทโฟนและแท็บเล็ต ทำให้เกิดความต้องการคลังรูปแบบการออกแบบปฏิสัมพันธ์สำหรับอุปกรณ์พกพา

ความต้องการนี้เกิดจากปัจจัยดังต่อไปนี้:

• ความแตกต่างในพฤติกรรมและการโต้ตอบของผู้ใช้บนอุปกรณ์เคลื่อนที่ เช่น การปัดและการแตะ เมื่อเทียบกับการโต้ตอบบน GUI เดสก์ท็อป ซึ่งควบคุมด้วยเมาส์
• ความแตกต่างในด้านคุณลักษณะทางกายภาพระหว่างอุปกรณ์พกพาและอุปกรณ์ตั้งโต๊ะ เช่น ขนาดหน้าจอ หน้าจอสัมผัส เป็นต้น
• แนวทางการออกแบบที่แนะนำโดยระบบปฏิบัติการมือถือ เช่น iOS, Android

เพื่อให้รูปแบบเป็นประโยชน์ต่อนักออกแบบและนักพัฒนาที่จะนำไปใช้ รูปแบบเหล่านั้นจะต้องสามารถค้นหาและอ่านได้ง่าย^{[ 5 ] [ 6 ] [ 7 ]}

แม้ว่าคำอธิบายรูปแบบจะแตกต่างกันบ้าง แต่คลังรูปแบบจำนวนมากมักมีองค์ประกอบทั่วไปบางอย่าง:

• ชื่อแพทเทิร์น:การเลือกชื่อที่ชัดเจนและสื่อความหมายจะช่วยให้ผู้คนค้นหาแพทเทิร์นได้ง่ายขึ้น และส่งเสริมการสื่อสารที่ชัดเจนระหว่างสมาชิกในทีมระหว่างการพูดคุยเกี่ยวกับการออกแบบ
• คำอธิบายรูปแบบ:เนื่องจากชื่อสั้นๆ เช่น "one-window drilldown" บางครั้งอาจไม่เพียงพอที่จะอธิบายรูปแบบได้ ดังนั้นจึงจำเป็นต้องมีคำอธิบายเพิ่มเติมอีกสองสามบรรทัด (หรือภาพหน้าจอตัวอย่าง) เพื่อช่วยอธิบายวิธีการทำงานของรูปแบบนี้
• คำชี้แจงปัญหา:เขียนด้วยภาษาที่เน้นผู้ใช้เป็นศูนย์กลาง เพื่อสื่อสารสิ่งที่ผู้ใช้ต้องการบรรลุ หรือสิ่งที่ผู้ใช้ปลายทางต้องเผชิญ
• ควรใช้เมื่อใด: "บริบทการใช้งาน" เป็นองค์ประกอบสำคัญของรูปแบบการออกแบบ องค์ประกอบนี้ช่วยให้ผู้คนเข้าใจสถานการณ์ที่รูปแบบการออกแบบนั้นเหมาะสม (และสถานการณ์ที่ไม่เหมาะสม)
• วิธีแก้ปัญหา:วิธีแก้ปัญหาควรอธิบาย "วิธีการ" แก้ไขปัญหา และอาจรวมถึงรายการตรวจสอบที่ระบุขั้นตอน ภาพหน้าจอ หรือแม้แต่วิดีโอสั้นๆ ที่แสดงให้เห็นถึงรูปแบบดังกล่าวในการใช้งานจริง
• เหตุผล:การให้เหตุผลว่าทำไมรูปแบบนี้ถึงได้ผล จะช่วยเสริมความแข็งแกร่งให้กับวิธีการแก้ปัญหา แม้ว่านักพัฒนาที่มีเวลาจำกัดอาจเลือกที่จะไม่สนใจคำอธิบายนี้ก็ตาม
• ตัวอย่าง:ตัวอย่างแต่ละตัวอย่างแสดงให้เห็นว่ารูปแบบดังกล่าวได้รับการนำไปใช้อย่างประสบความสำเร็จอย่างไร โดยมักจะมีภาพหน้าจอและคำอธิบายสั้นๆ ประกอบอยู่ด้วย
• ข้อคิดเห็น:การเพิ่มพื้นที่ให้สมาชิกในทีมได้พูดคุยเกี่ยวกับการใช้งานรูปแบบ จะช่วยให้แหล่งข้อมูลนี้ยังคงใช้งานได้อย่างต่อเนื่องและทำให้ทีมมีส่วนร่วมอยู่เสมอ

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

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

ประโยชน์ของการใช้รูปแบบการออกแบบปฏิสัมพันธ์ ได้แก่:

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

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

1. แนวทางที่เป็นนามธรรม เช่นกฎทองแปดข้อของการออกแบบส่วนต่อประสานโดย Shneiderman ไม่ได้เสนอวิธีการแก้ปัญหาเหมือนกับรูปแบบการออกแบบปฏิสัมพันธ์หลายๆ รูปแบบ และไม่สามารถนำไปใช้ในการสื่อสารข้ามสาขาวิชาได้ นอกจากนี้ แนวทางเหล่านี้ยังไม่ได้ให้คำอธิบายว่าทำไมวิธีการแก้ปัญหาเฉพาะเจาะจงนั้นจึงได้ผล
2. แนวทางปฏิบัติที่เป็นรูปธรรม เช่น แนวทางปฏิบัติเกี่ยวกับส่วนติดต่อผู้ใช้ของ Macintosh นั้นถูกออกแบบมาให้เหมาะสมกับส่วนติดต่อผู้ใช้เฉพาะกลุ่มมากเกินไป ดังนั้นจึงไม่มีประสิทธิภาพเท่าที่ควรเมื่อนำไปใช้กับส่วนติดต่อผู้ใช้แบบอื่น (โดยเฉพาะส่วนติดต่อผู้ใช้ที่ไม่ใช่ของ Macintosh)
3. ปัญหาอื่นๆ ของแนวทางปฏิบัติคือ มักมีจำนวนมากเกินไป ทำให้ผู้ออกแบบยากที่จะนำแนวทางปฏิบัติเหล่านั้นไปใช้ได้อย่างถูกต้อง นอกจากนี้ แนวทางปฏิบัติยังสันนิษฐานว่าถูกต้องสมบูรณ์แบบ ในขณะที่โดยทั่วไปแล้วสามารถนำไปใช้ได้เฉพาะในบริบทเฉพาะเท่านั้น ผลที่ตามมาคือ แนวทางปฏิบัติมักขัดแย้งกันเอง เนื่องจากขาดการอธิบายบริบท

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

• รูปแบบการออกแบบ
• เกมเพลย์
• องค์ประกอบของการออกแบบ
• สถาปัตยกรรมสารสนเทศ
• การออกแบบปฏิสัมพันธ์
• ปฏิสัมพันธ์
• การออกแบบอินเทอร์เฟซ
• การโต้ตอบผ่านมือถือ
• การออกแบบปฏิสัมพันธ์ทางเสียง
• ความสามารถในการใช้งาน
• การออกแบบที่เน้นผู้ใช้เป็นศูนย์กลาง

• แนวทางการออกแบบปฏิสัมพันธ์โดยใช้รูปแบบโดย Jan Borchers, ISBN 0-471-49828-9
• หนังสือ "A Pattern Language for Web Usability"โดย Ian Graham, ISBN 0-201-78888-8
• รูปแบบการออกแบบปฏิสัมพันธ์สำหรับการบันทึกข้อมูลอิเล็กทรอนิกส์แบบ NFC-basierteโดย Andreas Prinz, Prinz Publishing, Dieburg 2014, ISBN 978-3-9816875-0-7.
• การออกแบบเว็บไซต์: รูปแบบสำหรับการสร้างเว็บไซต์ที่ประสบความสำเร็จ (ฉบับที่สอง)โดย Douglas K. van Duyne, James A. Landay และ Jason I. Hong, ISBN 0-13-134555-9
• การออกแบบส่วนต่อประสาน: รูปแบบสำหรับการออกแบบปฏิสัมพันธ์ที่มีประสิทธิภาพโดย เจนิเฟอร์ ทิดเวลล์ISBN 0-596-00803-1
• การออกแบบส่วนต่อประสานทางสังคม: หลักการ รูปแบบ และแนวปฏิบัติเพื่อปรับปรุงประสบการณ์ผู้ใช้โดย คริสเตียน ครัมลิช และ เอริน มาโลนISBN 0-596-15492-5
• การออกแบบปฏิสัมพันธ์สำหรับกิจกรรมการรับรู้ที่ซับซ้อนด้วยการแสดงภาพ: แนวทางตามรูปแบบโดย Kamran Sedig และ Paul Parsons, AIS Transactions on Human-Computer Interaction 5(2), 84-133

• 10 เว็บไซต์ยอดเยี่ยมสำหรับรูปแบบการออกแบบ UIจาก Interaction Design Foundation
• คลังรูปแบบการออกแบบของ Yahoo