เพิ่ม UX ของคุณด้วยหลักการออกแบบการโต้ตอบที่ประสบความสำเร็จเหล่านี้

มีเส้นบางๆ ระหว่างการโต้ตอบที่ได้ผลกับสิ่งที่ใช้ไม่ได้ หลักการออกแบบการโต้ตอบช่วยเชื่อมช่องว่าง

การออกแบบการโต้ตอบที่ดำเนินการอย่างดีมีบทบาทอย่างมากในการใช้งาน UX ที่ยอดเยี่ยม และเป็นหนึ่งในปัจจัยพื้นฐานของหลักการออกแบบ UX ที่ไม่อาจโต้แย้งได้

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

การออกแบบปฏิสัมพันธ์ (IxD) ถูกกำหนดโดยสมาคมการออกแบบการโต้ตอบ (IxDA) ว่าเป็น "โครงสร้างและพฤติกรรมของระบบโต้ตอบ นักออกแบบการโต้ตอบมุ่งมั่นที่จะสร้างความสัมพันธ์ที่มีความหมายระหว่างผู้คนและผลิตภัณฑ์และบริการที่พวกเขาใช้ ตั้งแต่คอมพิวเตอร์ อุปกรณ์พกพา เครื่องใช้และอื่นๆ”

ประสบการณ์เป็นสิ่งสำคัญ เพราะมันเป็นตัวกำหนดว่าผู้คนจะจดจำปฏิสัมพันธ์ของพวกเขาอย่างไรด้วยความรัก —ดอน นอร์แมนใน The Design of Everyday Things.

การปฏิบัติตามหลักการออกแบบการโต้ตอบมีผลอย่างมากต่อการออกแบบการโต้ตอบที่ยอดเยี่ยม ซึ่งจะนำไปสู่ประสบการณ์

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

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

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

หลักการออกแบบปฏิสัมพันธ์และแนวทางปฏิบัติที่ดีที่สุด

การออกแบบปฏิสัมพันธ์อยู่ภายใต้ระเบียบวินัยของการปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (HCI) "สาขาวิชาสหสาขาวิชาชีพที่เน้นการออกแบบเทคโนโลยีคอมพิวเตอร์และโดยเฉพาะอย่างยิ่งปฏิสัมพันธ์ระหว่างมนุษย์ (ผู้ใช้) และคอมพิวเตอร์" - ตามที่กำหนดโดยปฏิสัมพันธ์ มูลนิธิออกแบบ

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

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

มาดำดิ่งลงไปในหลักการที่สำคัญที่สุดบางข้อ (ไม่ใช่รายการที่ละเอียดถี่ถ้วนไม่ว่าด้วยวิธีใด):

การค้นพบได้

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

ซิกเนเจอร์

การเชื่อมโยงอย่างมากกับการค้นพบได้ การใช้ signifiers อย่างมีประสิทธิภาพช่วยให้มั่นใจได้ว่าค่าใช้จ่าย—ความเป็นไปได้ของการดำเนินการกับวัตถุ—ได้รับการระบุไว้อย่างชัดเจนใน UI Signifiers ให้เบาะแสที่ชัดเจนเช่นสัญญาณหรือป้ายบอกทาง พวกเขากะพริบไฟสีเขียวที่ผู้ใช้ตะโกนว่า “ฉันอยู่นี่ คุณสามารถแตะ (คลิก ปัด ฯลฯ) ฉันได้!” เงินที่จ่ายได้อาจมีอยู่ใน UI แต่อาจซ่อนอยู่เพราะหากไม่มีตัวระบุ ค่านั้นก็จะยังมองไม่เห็น ตัวอย่างอาจเป็น "การโต้ตอบด้วยท่าทางที่ซ่อนอยู่" ซึ่งไม่เปิดเผยตัวเอง เว้นแต่ผู้ใช้จะปัดไปทางซ้ายหรือขวาโดยไม่ได้ตั้งใจ (เช่น เพื่อลบบางสิ่ง เป็นต้น)

ค่าใช้จ่ายกำหนดสิ่งที่เป็นไปได้ Signifiers ระบุวิธีที่ผู้คนค้นพบความเป็นไปได้เหล่านั้น: signifiers เป็นสัญญาณ สัญญาณที่มองเห็นได้ของสิ่งที่สามารถทำได้ ตัวบ่งชี้มีความสำคัญต่อนักออกแบบมากกว่าเงินที่จ่ายได้ —ดอน นอร์แมน (นอร์แมน, 2556)

ข้อเสนอแนะ

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

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

แบบจำลองแนวคิดและแบบจำลองทางจิต

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

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

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

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

การทำแผนที่

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

การทำแผนที่ตามธรรมชาติ—การใช้ประโยชน์จากการเปรียบเทียบทางกายภาพและมาตรฐานทางวัฒนธรรม—นำไปสู่ความเข้าใจในทันที ตัวอย่างเช่น นักออกแบบสามารถใช้การเปรียบเทียบเชิงพื้นที่ใน UI:

• หากต้องการเพิ่มค่าด้วยส่วนประกอบตัวเลื่อน ให้เลื่อนตัวเลื่อนไปทางขวา
• หากต้องการลด ให้เลื่อนไปทางซ้าย

การทำแผนที่โดยธรรมชาติบางอย่างเป็นเรื่องทางชีววิทยา เช่นเดียวกับในมาตรฐานสากลที่ระดับที่เพิ่มขึ้นแสดงถึงระดับที่มากขึ้น ระดับที่ลดลง น้อยลง

ข้อจำกัด

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

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

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

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

ความสม่ำเสมอ มาตรฐาน และการวิเคราะห์พฤติกรรม

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

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

ผลิตภัณฑ์ที่มุ่งมั่นที่จะใช้งานได้อย่างดีเยี่ยมเป็นไปตามอนุสัญญา มาตรฐาน แนวทางปฏิบัติที่ดีที่สุด และการวิเคราะห์พฤติกรรมการใช้งาน (กฎทั่วไปทั่วไป ไม่ใช่แนวทางการใช้งานเฉพาะ)

สอดคล้องกับ ข้อตกลง เช่น อาจเป็นแนวทางในการจัดวางหน้า ผู้ใช้เว็บใช้เวลา 69% ในการดูครึ่งซ้ายของหน้าและ 30% ในการดูครึ่งขวา ดังนั้น ไซต์จะมีโอกาสทำกำไรได้มากกว่าหากเป็นไปตามรูปแบบทั่วไป

มาตรฐาน อาจเป็นเส้นทางแสดงเส้นทาง (อุปกรณ์การวางแนวและอุปกรณ์นำทางที่จดจำได้ทันที) หรือเมนูการนำทางส่วนกลางที่ด้านบนของหน้าเช่นเดียวกับในไซต์ BCC

รูปแบบและความสามารถในการเรียนรู้

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

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

การออกแบบการโต้ตอบที่ดีที่สุดไม่ได้พยายามสร้างวงล้อใหม่ แต่ใช้รูปแบบอย่างมีประสิทธิภาพและประสิทธิผลในรูปแบบใหม่

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

ลำดับชั้นของภาพและการเน้น

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

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

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

กฎของฟิตส์

เชื่อหรือไม่ กฎหมายนี้มาจากการศึกษาเบื้องต้นเกี่ยวกับการเคลื่อนไหวของกล้ามเนื้อของมนุษย์และการกำหนดเป้าหมายของผู้ปฏิบัติงานโทรเลขและการปฏิบัติงานในสายการผลิต และต่อมาได้ปรับให้เข้ากับ HCI (ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์) โดยพื้นฐานแล้วกล่าวว่า: "เวลาที่จะได้รับเป้าหมายคือหน้าที่ของระยะทางและขนาดของเป้าหมาย"

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

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

Gutenberg Diagram, Z- และ F-Pattern Layouts

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

รูปแบบ Z จะอยู่ตามรูปร่างของตัวอักษร Z ในบางกรณี รูปแบบนี้เรียกอีกอย่างว่ารูปแบบ Zig-Zag ความแตกต่างหลักกับแผนภาพ Gutenberg คือรูปแบบ Z แนะนำให้ผู้ชมเดินผ่านพื้นที่รกร้างสองแห่ง มิฉะนั้นจะยังเริ่มต้นและสิ้นสุดที่เดิม และยังผ่านตรงกลาง เช่นเดียวกับ Gutenberg นักออกแบบจะวางข้อมูลที่สำคัญที่สุดตามเส้นทางของรูปแบบ Z

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

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

การรับรู้แทนที่จะจำ

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

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

การออกแบบที่สวยงามและเรียบง่าย

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

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

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

มีเกลันเจโลพูดถึงงานของเขาว่า “ฉันเห็นนางฟ้าในหินอ่อนและแกะสลักจนฉันปล่อยเขาเป็นอิสระ”

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

การป้องกันข้อผิดพลาด

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

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

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

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

อนาคตของการออกแบบปฏิสัมพันธ์

อุปกรณ์ สภาพแวดล้อม และอินเทอร์เฟซใหม่จะดำเนินต่อไปพร้อมกับความเป็นไปได้ในการโต้ตอบแบบใหม่ ตัวควบคุมวิดีโอเกมมีการพัฒนาอย่างต่อเนื่อง และให้การควบคุมอินพุตที่หลากหลาย รวมทั้งการตอบสนองแบบสัมผัส อินเทอร์เฟซท่าทางสัมผัสจะเติบโตจากหน้าจอสัมผัสที่รองรับท่าทางสัมผัส 2D และ 3D ตัวอย่างเช่น ท่าทางสัมผัสบนอุปกรณ์ iOS และ Android ไปจนถึงการใช้ท่าทางมือในพื้นที่ 3D เพื่อโต้ตอบกับพื้นที่เสมือนจริง คอนโซลเกม และอุปกรณ์ IoT ที่ให้เราควบคุมสภาพแวดล้อมของเรา .

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

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

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

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