คำแนะนำสำหรับการเพิ่มประสิทธิภาพการรับรู้และความสวยงามของผู้ใช้
นำไปใช้กับคำแนะนำรายการตรวจสอบการปรับปรุงประสบการณ์ใช้งานของ Power Platform Well-Architected นี้:
| XO:07 | ใช้หลักการออกแบบคลาสสิกกับองค์ประกอบภาพ เช่น แบบแผนสี ตัวอักษร และเค้าโครง มุ่งมั่นเพื่อให้ได้ลำดับชั้นของภาพที่เน้น สมดุล และใช้งานง่าย ซึ่งจะนำความสนใจของผู้ใช้ไปยังองค์ประกอบและการดำเนินการที่สำคัญ |
|---|
คู่มือนี้จะอธิบายคำแนะนำสำหรับรูปแบบการออกแบบภาพสากลที่ส่งผลต่อการรับรู้ของผู้ใช้ ซึ่งอาจส่งผลต่อความพึงพอใจและการนำแอปพลิเคชันไปใช้อย่างมาก องค์ประกอบภาพทำหน้าที่เป็นองค์ประกอบพื้นฐานที่ใช้ในการสร้างประสบการณ์ การใช้หลักการมองเห็นที่สอดคล้องกับวิธีที่มนุษย์รับรู้และประมวลผลข้อมูลเป็นวิธีการที่มีโครงสร้างเพื่อช่วยเลือกและจัดเรียงองค์ประกอบภาพเพื่อสร้างแอปพลิเคชันที่มีประสิทธิภาพและน่าดึงดูด
กลยุทธ์การออกแบบที่สำคัญ
การวิจัยอย่างกว้างขวางเกี่ยวกับการรับรู้ของมนุษย์เกี่ยวกับการออกแบบภาพเผยให้เห็นว่าผู้ใช้ไม่ได้ดูองค์ประกอบภาพแยกจากกัน แต่พวกเขารับรู้สิ่งเหล่านี้โดยสัมพันธ์กับองค์ประกอบอื่นและบริบทที่ปรากฏ ความสัมพันธ์เหล่านี้มีอิทธิพลต่อการรับรู้ของผู้ใช้ ดึงดูดความสนใจไปยังพื้นที่เฉพาะ กระตุ้นอารมณ์ ช่วยให้เกิดความเข้าใจ เพิ่มความสวยงาม และเสริมสร้างเอกลักษณ์ของแบรนด์ การเลือกและการจัดองค์ประกอบภาพอย่างระมัดระวังสามารถสร้างประสบการณ์ผู้ใช้ที่น่าดึงดูด น่าจดจำ และมีประสิทธิภาพ ซึ่งสอดคล้องกับผู้ชมเป้าหมาย
ปรากฏการณ์ความงาม-การใช้งาน
ปรากฏการณ์ความงาม-การใช้งาน หมายถึงแนวโน้มที่จะเห็นว่าผลิตภัณฑ์ที่สวยงามใช้งานได้ดีกว่า ผู้ใช้มีความคิดเห็นเบื้องต้นเกี่ยวกับแอปพลิเคชันภายในเวลาประมาณ 50 มิลลิวินาที ความประทับใจแรกได้รับอิทธิพลจากปัจจัยต่างๆ รวมถึงโครงสร้าง สี ระยะห่าง ความสมมาตร ปริมาณข้อความ และแบบอักษร ความประทับใจแรกเชิงบวกสามารถเพิ่มความพึงพอใจโดยรวมของผู้ใช้ได้ การวิจัยแสดงให้เห็นว่าผู้ใช้จะให้อภัยปัญหาการใช้งานเล็กๆ น้อยๆ ได้มากกว่าเมื่อพบว่าอินเทอร์เฟซดูน่าดึงดูด นอกจากนี้ คุณภาพการออกแบบยังสามารถใช้เป็นตัวบ่งชี้ความน่าเชื่อถือได้
ความสมดุลและน้ำหนัก
สมดุลของภาพแสดงถึงความสมดุลและความกลมกลืนในการรับรู้ทางสายตา ช่วยให้ผู้ใช้ประมวลผลและจัดระเบียบข้อมูลภาพได้อย่างมีประสิทธิภาพมากขึ้นโดยการลดความเครียดทางการรับรู้ โดยทั่วไปองค์ประกอบที่สมดุลจะถูกมองว่าน่าพึงพอใจและเข้าใจง่ายกว่า ช่วยให้ผู้ใช้สามารถมุ่งความสนใจได้อย่างมีประสิทธิภาพและมองสิ่งเร้าทางสายตาได้ง่ายขึ้น ลักษณะการรับรู้ของความสมดุลของภาพนี้เน้นย้ำถึงความสำคัญในการอำนวยความสะดวกในการสื่อสารที่ชัดเจน และปรับปรุงประสบการณ์ผู้ใช้โดยรวม
การจัดองค์ประกอบภาพจะมีความสมดุลเมื่อองค์ประกอบทั้งหมดมีสมดุลทางแสง บ่อยครั้งที่ตำแหน่งทางคณิตศาสตร์ต้องมีการปรับเปลี่ยน องค์ประกอบบางอย่างที่ส่งผลต่อน้ำหนักการมองเห็น ได้แก่ ขนาด สี ความหนาแน่นและช่องว่าง
ขนาด: องค์ประกอบที่ใหญ่ขึ้นมีแนวโน้มที่จะมีน้ำหนักการมองเห็นมากกว่าองค์ประกอบที่เล็กกว่า เพื่อให้เกิดความสมดุล สามารถถ่วงดุลองค์ประกอบขนาดใหญ่ได้โดยการจัดกลุ่มองค์ประกอบที่มีขนาดเล็กกว่าหรือปรับตำแหน่งภายในเค้าโครง
สี: สีที่สว่างหรือเข้มข้นสามารถดึงดูดความสนใจได้มากกว่าและดูหนักกว่าสีที่ด้านหรือเป็นกลาง การปรับสมดุลสีเกี่ยวข้องกับการกระจายสีอย่างเท่าเทียมกันทั่วทั้งอินเทอร์เฟซ หรือใช้สีคู่ตรงข้ามเพื่อสร้างความกลมกลืนของภาพ
ความหนาแน่น: ความหนาแน่นขององค์ประกอบหมายถึงความแน่นหนาขององค์ประกอบต่างๆ ภายในพื้นที่ที่กำหนด การปรับสมดุลความหนาแน่นเกี่ยวข้องกับการทำให้แน่ใจว่าองค์ประกอบต่างๆ มีการกระจายเท่าๆ กันในอินเทอร์เฟซ เพื่อหลีกเลี่ยงความแออัดยัดเยียดหรือพื้นที่กระจัดกระจาย
ช่องว่าง: หรือที่เรียกว่าพื้นที่ว่างเชิงลบ ช่องว่างหมายถึงพื้นที่ว่างระหว่างองค์ประกอบ พื้นที่ช่วยสร้างห้องหายใจและสามารถสร้างสมดุลขององค์ประกอบโดยการส่งเสริมและเน้นองค์ประกอบบางอย่าง
การจัดองค์ประกอบภาพจะมีความสมดุลเมื่อองค์ประกอบทั้งหมดมีสมดุลทางแสง
การจัดวางเค้าโครงที่สมดุลถือเป็นงานที่ยากที่สุดงานหนึ่ง เนื่องจากไม่สามารถวัดผลได้ง่าย ๆ
Color
สีสัน ทินท์ เฉดสี และโทนสีสามารถสื่อความหมาย กระตุ้นอารมณ์ และสร้างความสวยงามได้ สีมีบทบาทสำคัญในการชี้นำความสนใจของผู้ใช้ การสร้างลำดับชั้น การถ่ายทอดข้อมูล และเพิ่มความสามารถในการใช้งาน มีสาเหตุหลายประการที่อธิบายว่าทำไมการออกแบบสีที่รอบคอบใน UI สามารถส่งผลต่อผู้ใช้ตามที่คุณต้องการ:
ความสนใจและการรับรู้ สีบางสีดูสะดุดตามากกว่าสีอื่นๆ ช่วยให้นักออกแบบสามารถดึงความสนใจของผู้ชมไปยังองค์ประกอบเฉพาะได้ คอนทราสต์ของสีช่วยเพิ่มความสามารถในการอ่านและแยกแยะระหว่างส่วนประกอบต่างๆ ช่วยให้การประมวลผลข้อมูลรวดเร็วยิ่งขึ้น
การตอบสนองทางอารมณ์ สีมีความสัมพันธ์ทางจิตวิทยาที่ทำให้เกิดอารมณ์และความรู้สึก โทนสีอบอุ่น เช่น สีแดงและสีส้มสามารถสร้างความรู้สึกถึงพลังและความตื่นเต้น ในขณะที่สีโทนเย็น เช่น สีฟ้าและสีเขียวสามารถทำให้เกิดความนิ่งและความสงบ คุณสามารถกระตุ้นการตอบสนองที่ต้องการเพื่อโน้มน้าวผู้ใช้ไปหาประสบการณ์ที่ต้องการได้
อัตลักษณ์ของแบรนด์ การใช้สีอย่างสม่ำเสมอในสื่อการสร้างแบรนด์จะช่วยสร้างเอกลักษณ์ทางภาพที่แข็งแกร่งและส่งเสริมการจดจำแบรนด์ ผู้ใช้มักจะเชื่อมโยงสีเฉพาะกับแบรนด์ใดแบรนด์หนึ่ง และเชื่อมโยงประสบการณ์ของพวกเขากับความภักดีและความไว้วางใจในแบรนด์
ลำดับชั้นภาพ สีสามารถนำมาใช้เพื่อสร้างลำดับชั้นภาพและจัดระเบียบข้อมูลได้ กำหนดสีต่างๆ ให้กับองค์ประกอบตามความสำคัญหรือหมวดหมู่เพื่อสร้างลำดับชั้นที่ชัดเจน และอำนวยความสะดวกในการนำทางและทำความเข้าใจได้ง่ายขึ้น
ความใกล้ชิด
รายการที่วางใกล้กันมากขึ้นจะดูเกี่ยวข้องกันมากขึ้น เมื่อจัดวางองค์ประกอบ ตรวจสอบให้แน่ใจว่ามีความแตกต่างที่เห็นได้ชัดเจนในระยะห่างระหว่างองค์ประกอบที่เกี่ยวข้องอย่างใกล้ชิดกับองค์ประกอบที่ไม่เกี่ยวข้องกัน
หลักการ Gestalt นี้เสนอว่าระยะห่างเชิงพื้นที่ระหว่างองค์ประกอบทางสายตามีอิทธิพลต่อการรับรู้และจัดระเบียบขององค์ประกอบทางจิตใจ และเน้นย้ำถึงความสำคัญขององค์ประกอบนี้ในการอำนวยความสะดวกในการประมวลผลและทำความเข้าใจสิ่งเร้าทางสายตาอย่างมีประสิทธิภาพ
จัดกลุ่มองค์ประกอบที่เกี่ยวข้องกันซึ่งมีฟังก์ชันการทำงานคล้ายกันหรืออยู่ในหมวดหมู่ลำดับชั้นเดียวกัน ตัวอย่างเช่น ปุ่มที่ทำงานหรือตัวเลือกที่คล้ายกันภายในเมนูแบบเลื่อนลงควรจัดกลุ่มไว้ใกล้กันเพื่อระบุถึงความเชื่อมโยงกัน ในแถบนำทาง รายการเมนูที่มีระยะห่างกันมากจะหมายถึงชุดตัวเลือกที่เกี่ยวข้อง ในขณะที่ช่องว่างที่กว้างขึ้นระหว่างหมวดหมู่เมนูจะทำให้ตัวเลือกเหล่านั้นดูแยกจากกัน รายการแบบฟอร์มที่เกี่ยวข้องควรจัดกลุ่มเข้าด้วยกัน เช่น ฟิลด์ที่อยู่ในส่วนที่เรียกว่า "ที่อยู่"
ปรับปรุงความสามารถในการอ่านในอินเทอร์เฟซที่มีข้อความจำนวนมาก โดยการปรับระยะห่างระหว่างย่อหน้า ประโยค และคำ ระยะห่างระหว่างย่อหน้าที่ใกล้กันมากขึ้นบ่งบอกถึงความเชื่อมโยงเชิงตรรกะหรือความต่อเนื่องของความคิด ในขณะที่ระยะห่างที่มากขึ้นหมายถึงการเปลี่ยนผ่านหรือจังหวะหยุดในเนื้อหา เทคนิคนี้ส่งเสริมความเข้าใจข้อมูลที่เป็นข้อความอย่างมีประสิทธิภาพ
ตรวจสอบให้แน่ใจว่ามีความแตกต่างที่เห็นได้ชัดเจนในการเว้นวรรคระหว่างองค์ประกอบที่เกี่ยวข้องและไม่เกี่ยวข้องเพื่อป้องกันความสับสน การไล่ระดับระยะห่างสามารถช่วยกำหนดระยะห่างที่เหมาะสมที่จำเป็นตามขนาดขององค์ประกอบได้อย่างสม่ำเสมอ
วงกลมทางด้านซ้ายเกี่ยวข้องกับสามเหลี่ยมมากกว่าวงกลมอื่นๆ
การเว้นช่องว่างระหว่างย่อหน้าเล็กกว่าช่องว่างระหว่างส่วน
ความต่อเนื่อง
องค์ประกอบที่จัดเรียงบนเส้นหรือเส้นโค้งจะถูกมองว่าเกี่ยวข้องกันมากกว่าองค์ประกอบที่ไม่อยู่บนเส้นหรือเส้นโค้ง
จัดเรียงองค์ประกอบอินเทอร์เฟซ เช่น เมนูการนำทางหรือขั้นตอนในกระบวนการ ตามแนวเส้นหรือเส้นโค้งเพื่อบ่งบอกถึงลำดับหรือความคืบหน้า เค้าโครงนี้ช่วยให้ผู้ใช้รับรู้ความสัมพันธ์ระหว่างองค์ประกอบและเข้าใจการไหลของข้อมูลหรือการกระทำเชิงตรรกะ
วางองค์ประกอบที่เกี่ยวข้อง เช่น กล่องกาเครื่องหมายหรือปุ่มตัวเลือก หรือข้อมูลในหัวข้อย่อยในรายการ ตามแนวเส้นเพื่อจัดกลุ่มเข้าด้วยกันเมื่อมอง การจัดเรียงนี้บอกให้ผู้ใช้ทราบว่าองค์ประกอบเหล่านี้มีวัตถุประสงค์ร่วมกันหรืออยู่ในหมวดหมู่เดียวกัน ช่วยให้นำทางและทำความเข้าใจง่ายขึ้น หากรายการที่มีลักษณะคล้ายกันเยื้องเข้าด้านในเพิ่มขึ้น ตำแหน่งของรายการจะสัมพันธ์กับตำแหน่งที่ต่ำกว่าในลำดับชั้นภาพ
ใช้เส้นหรือเส้นโค้งเพื่อดึงดูดความสนใจของผู้ใช้และสร้างเส้นทางภาพผ่านอินเทอร์เฟซ ตัวอย่างเช่น ลูกศรสามารถกำหนดทิศทางสายตาของผู้ใช้จากเนื้อหาส่วนหนึ่งไปยังอีกส่วนหนึ่งตามเส้นทางที่กำหนด ซึ่งบ่งบอกถึงความเชื่อมโยงหรือความคืบหน้า เทคนิคนี้ช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของอินเทอร์เฟซได้อย่างเป็นธรรมชาติมากขึ้นและกระตุ้นให้เกิดการสำรวจ
จัดเรียงองค์ประกอบอินเทอร์เฟซหลัก เช่น ปุ่มคำกระตุ้นการตัดสินใจหรือข้อมูลสำคัญ ตามแนวเส้นที่โดดเด่นเพื่อดึงดูดความสนใจของผู้ใช้และสร้างจุดโฟกัส ตัวอย่างเช่น รูปแบบ Fluent MessageBar มักจะแสดงเป็นข้อความที่มีความสมดุลที่โดดเด่นทั่วทั้งพื้นที่เนื้อหา โดยมีข้อความทางด้านซ้าย ซึ่งนำไปสู่ปุ่มคำกระตุ้นการตัดสินใจทางด้านขวา กลยุทธ์การจัดวางนี้เน้นองค์ประกอบเหล่านี้และเน้นความสำคัญขององค์ประกอบดังกล่าว เพื่อเพิ่มโอกาสในการโต้ตอบ
ในการรับรู้ของเรา เส้นโค้ง/เส้นเด่นชัดกว่าสี
วิซาร์ดใช้ความต่อเนื่องเพื่อแสดงให้ผู้ใช้เห็นว่าขั้นตอนต่างๆ เชื่อมโยงกัน โดยไม่ทำให้ข้อมูลมากเกินไป
การปิด
สมองของมนุษย์มีแนวโน้มที่จะเห็นรูปแบบที่สมบูรณ์ โดยจดจำรูปแบบเดียวที่คุ้นเคยเหนือวัตถุแต่ละอย่าง แม้ว่าข้อมูลบางอย่างจะหายไปก็ตาม
ตรวจสอบความสอดคล้องของภาพในองค์ประกอบการออกแบบ เช่น รูปร่าง สี และขนาด เพื่อช่วยให้ผู้ใช้เรียนรู้รูปแบบที่พวกเขาควรคาดหวัง แม้ว่าจะถูกนำเสนอในบริบทที่แตกต่างกันก็ตาม
ใช้ไอคอนหรือสัญลักษณ์ที่เรียบง่ายและคุ้นเคยเพื่อให้ผู้ใช้สามารถกรอกข้อมูลที่ขาดหายไปตามประสบการณ์ที่ผ่านมา ตัวอย่างเช่น ไอคอนรูปแว่นขยายมักเชื่อมโยงกับฟังก์ชันการค้นหา แม้ว่าจะไม่มีข้อความประกอบก็ตาม
นำเสนอข้อมูลแก่ผู้ใช้ทีละน้อย หรือที่เรียกว่าการเปิดเผยข้อมูลแบบก้าวหน้า อนุญาตให้ผู้ใช้กรอกรายละเอียดที่ขาดหายไปในขณะที่โต้ตอบกับอินเทอร์เฟซ เพื่อหลีกเลี่ยงไม่ให้ข้อมูลมากเกินไปและส่งเสริมการสำรวจ
สร้างรูปแบบการมองเห็นที่สอดคล้องกันซึ่งกระตุ้นให้ผู้ใช้รับรู้วัตถุเป็นองค์รวม ตัวอย่างเช่น การจัดกลุ่มองค์ประกอบที่เกี่ยวข้องเข้าด้วยกันสามารถช่วยให้ผู้ใช้เข้าใจความสัมพันธ์และวัตถุประสงค์ของพวกเขาได้ จัดเรียงองค์ประกอบต่างๆ ให้มองเห็นได้อย่างสม่ำเสมอโดยใช้หลักการ Gestalt เพื่อระบุการแบ่งส่วน ใช้พื้นที่อย่างมีประสิทธิภาพเพื่อสร้างความรู้สึกว่าองค์ประกอบอินเทอร์เฟซมีขอบเขต
ใช้ภาพเคลื่อนไหวและการเปลี่ยนภาพเพื่อนำทางความสนใจของผู้ใช้และถ่ายทอดการเปลี่ยนแปลงในสถานะอินเทอร์เฟซ การเปลี่ยนระหว่างสถานะหรือหน้าจอต่างๆ อย่างราบรื่นสามารถช่วยให้ผู้ใช้เข้าใจความสัมพันธ์ระหว่างองค์ประกอบต่างๆ และกรอกข้อมูลที่ขาดหายไป การควบคุมที่ทันสมัยหลายรายการพร้อมใช้งานใน Power Apps การแสดงภาพเคลื่อนไหวโดยธรรมชาติ
สี่เหลี่ยมจัตุรัสจะเป็นที่รับรู้ก่อนวงกลมสี่วงที่ไม่สมบูรณ์
ภาพเคลื่อนไหวจากการ์ดไปยังโมดอลจะช่วยปิดช่องว่างระหว่างทั้งสองและเชื่อมโยงทั้งสองเข้าด้วยกัน
จุดโฟกัส
จุดโฟกัสคือองค์ประกอบการออกแบบที่ดึงดูดความสนใจของผู้ชมได้ทันที ตามหลักการแล้ว การออกแบบควรมีจุดโฟกัสตามลำดับ โดยปกติจะอยู่ระหว่างหนึ่งถึงสามจุด และนำทางผู้ใช้ผ่านเนื้อหาในลักษณะที่จงใจ
ออกแบบอินเทอร์เฟซที่มีลำดับชั้นของข้อมูลที่ชัดเจน โดยเน้นที่เนื้อหาหรือการดำเนินการที่สำคัญที่สุดเป็นจุดโฟกัส ใช้สัญลักษณ์ภาพ เช่น ขนาด สี คอนทราสต์ และตำแหน่งเพื่อทำให้องค์ประกอบเหล่านี้โดดเด่น นำเสนอข้อมูลทีละน้อย โดยเริ่มจากจุดสนใจที่สำคัญที่สุด เทคนิคนี้ช่วยให้ผู้ใช้ระบุเนื้อหาหรือการดำเนินการที่เกี่ยวข้องมากที่สุดได้อย่างรวดเร็ว และนำพวกเขาผ่านอินเทอร์เฟซตามลำดับตรรกะ
วางปุ่มคำกระตุ้นการตัดสินใจหลักไว้อย่างโดดเด่นภายในอินเทอร์เฟซ ทำให้เป็นจุดสนใจที่สำคัญที่สุด ปุ่มเหล่านี้ควรมองเห็นได้ชัดเจนจากองค์ประกอบอื่นๆ และอยู่ในตำแหน่งที่มีกลยุทธ์เพื่อนำทางผู้ใช้ไปสู่การดำเนินการที่ต้องการ เช่น การซื้อหรือลงชื่อสมัครใช้ ภาษาการออกแบบที่คล่องแคล่วแนะนำให้ใช้สีธีมของแบรนด์สำหรับองค์ประกอบเหล่านี้
ใช้คอนทราสต์อย่างมีประสิทธิภาพเพื่อสร้างจุดโฟกัส องค์ประกอบที่โดดเด่นเนื่องจากความแตกต่างในด้านสี ความสว่าง ขนาด หรือตัวพิมพ์จะดึงดูดความสนใจของผู้ใช้โดยธรรมชาติ การตัดพื้นผิวที่สว่างด้วยข้อความสีเข้มหรือองค์ประกอบที่มีแบรนด์จะสร้างจุดโฟกัสที่โดดเด่นยิ่งขึ้น
ใช้ช่องว่างเพื่อเน้นจุดโฟกัสโดยการสร้างการแยกภาพจากองค์ประกอบโดยรอบ เทคนิคนี้ช่วยป้องกันการรบกวนและช่วยให้ผู้ใช้มุ่งความสนใจไปที่เนื้อหาหรือการกระทำที่สำคัญที่สุด องค์ประกอบ UI ที่มีระยะห่างรอบๆ มากกว่าจะดึงดูดโฟกัสได้มากกว่าและมีแนวโน้มที่จะถูกมองว่ามีความสำคัญมากกว่าองค์ประกอบที่มีพื้นที่น้อยกว่า
รักษาความสม่ำเสมอในการใช้จุดโฟกัสทั่วทั้งอินเทอร์เฟซเพื่อมอบประสบการณ์ผู้ใช้ที่สอดคล้องกัน ด้วยการกำหนดรูปแบบของจุดโฟกัส คุณจะชักนำความคาดหวังของผู้ใช้เกี่ยวกับลำดับชั้นที่พวกเขาจำเป็นต้องเข้าใจเพื่อใช้งานอินเทอร์เฟซ และช่วยให้พวกเขาค้นหาข้อมูลหรือการดำเนินการที่สำคัญบนหน้าจอหรือเพจต่างๆ
โปรดทราบว่าสิ่งสำคัญคือต้องรักษาสมดุลและไม่ครอบงำผู้ใช้ด้วยจุดโฟกัสที่แข่งขันกันมากเกินไป
สายตาของผู้ใช้จะถูกดึงดูดไปที่สี่เหลี่ยมสีน้ำเงินก่อน
สามารถทำองค์ประกอบต่างๆ เช่น คำกระตุ้นการตัดสินใจให้เป็นจุดโฟกัสได้เพื่อให้แน่ใจว่าผู้ใช้สังเกตเห็น
ความคล้ายคลึง
วัตถุที่ดูคล้ายกันมักถูกมองว่าเป็นกลุ่มหรือรูปแบบ ทำให้ผู้ใช้คาดหวังว่าจะมีฟังก์ชันการทำงานที่เหมือนกัน
ตรวจสอบให้แน่ใจว่าองค์ประกอบอินเทอร์เฟซที่มีฟังก์ชันคล้ายกันมีสไตล์ภาพที่สอดคล้องกัน ตัวอย่างเช่น ปุ่มที่ดำเนินการคล้ายกันหรือมีน้ำหนักเท่ากันควรมีสี รูปร่าง และขนาดเหมือนกัน เพื่อส่งสัญญาณให้ผู้ใช้ทราบถึงฟังก์ชันการทำงานที่ใช้ร่วมกัน ในทางกลับกัน ตรวจสอบให้แน่ใจว่าสามารถแยกแยะองค์ประกอบที่แตกต่างกันอย่างมากในด้านฟังก์ชันการทำงานได้อย่างชัดเจน เทคนิคทั้งสองป้องกันความสับสนและความหงุดหงิดโดยการสร้างสัญญาณภาพที่ชัดเจน
ใช้ประติมานวิทยาและสัญลักษณ์ที่สอดคล้องกันเพื่อแสดงการกระทำหรือคุณสมบัติที่คล้ายกันทั่วทั้งอินเทอร์เฟซ ผู้ใช้มักจะเชื่อมโยงไอคอนที่คุ้นเคยเข้ากับฟังก์ชันเฉพาะตามประสบการณ์ที่ผ่านมา เพื่อให้เป็นไปตามความคาดหวังเหล่านี้ ให้ใช้สิ่งแทนไอคอนที่เป็นที่ยอมรับในระดับสากล รักษาความสอดคล้องในการออกแบบไอคอนโดยใช้ไอคอนจากชุดเดียวกัน เช่น ไลบรารีประติมานวิทยา Fluent UI
ใช้รหัสสีเพื่อแสดงถึงความคล้ายคลึงกันระหว่างองค์ประกอบหรือหมวดหมู่ ตัวอย่างเช่น การใช้สีเดียวกันเพื่อเน้นรายการที่เกี่ยวข้องในรายการ หรือการจัดกลุ่มจุดข้อมูลที่คล้ายคลึงกันบนแผนภูมิ จะช่วยเพิ่มการเชื่อมโยงกันของภาพและช่วยเหลือผู้ใช้ในการแยกแยะรูปแบบ
รักษาความสม่ำเสมอในการจัดรูปแบบตัวอักษรและข้อความสำหรับองค์ประกอบที่มีจุดประสงค์คล้ายคลึงกัน รูปแบบตัวอักษร ขนาด และการจัดรูปแบบที่สอดคล้องกันมีส่วนทำให้ภาษาภาพสอดคล้องกัน ช่วยให้ผู้ใช้สามารถจดจำเนื้อหาหรือการกระทำที่เกี่ยวข้องได้
ให้ข้อเสนอแนะแบบโต้ตอบที่สอดคล้องกันสำหรับการดำเนินการที่คล้ายกันทั่วทั้งอินเทอร์เฟซ ไม่ว่าจะวางเมาส์เหนือปุ่มหรือคลิกลิงก์ ผู้ใช้ควรคาดหวังการตอบสนองที่สอดคล้องเพื่อเสริมสร้างความสัมพันธ์ระหว่างความคล้ายคลึงกันทางสายตาและการทำงานที่ตรงกัน แม้ว่าแพลตฟอร์มจะแสดงพฤติกรรมการโต้ตอบส่วนใหญ่ในตัว เช่น ค่าสีของสถานะการวางเมาส์เหนือและกด ให้คำนึงถึงหลักการออกแบบนี้เมื่อสร้างองค์ประกอบส่วนประกอบตั้งแต่เริ่มต้น หรือนำสถานะการตอบรับไปใช้ด้วยตนเอง
ตรวจสอบให้แน่ใจว่าความคล้ายคลึงกันของภาพได้รับการเสริมด้วยสัญญาณอื่นๆ เช่น ป้ายข้อความหรือเสียงตอบรับ เพื่อรองรับผู้ใช้ที่มีความต้องการและความชอบที่หลากหลาย การสื่อสารฟังก์ชันการทำงานที่มีประสิทธิภาพผ่านการใช้ประสาทสัมผัสที่หลากหลายช่วยเพิ่มความสามารถในการใช้งานและการไม่แบ่งแยก
องค์ประกอบจะถูกจัดกลุ่มตามรูปร่างและสี ไม่ใช่การจัดเรียง (คอลัมน์และแถว)
หากการ์ดหนึ่งในแดชบอร์ดเปิดเป็นแผงด้านข้าง ผู้ใช้จะคาดหวังให้การ์ดทั้งหมดเปิดในลักษณะนั้น
รูปและพื้น
ผู้คนรับรู้โดยสัญชาตญาณว่าองค์ประกอบต่างๆ นั้นเป็น "รูป" (สิ่งที่โดดเด่นอยู่ด้านหน้า) หรือ "พื้น" (สิ่งที่ถอยออกไปในพื้นหลัง) ดังนั้น บริบทจึงมีอิทธิพลต่อการรับรู้ และจำเป็นอย่างยิ่งที่จะต้องแน่ใจว่ามีรายละเอียดเพียงพอเพื่อแยกองค์ประกอบที่สำคัญออกจากพื้นหลัง ช่องว่าง (พื้นที่เชิงลบ) เพิ่มความเข้าใจในเนื้อหา
ใช้สี ขนาด หรือสไตล์ที่ตัดกันเพื่อสร้างความสัมพันธ์ที่ชัดเจนระหว่างรูปภาพกับพื้นหลัง องค์ประกอบที่สำคัญควรโดดเด่นอย่างเด่นชัดเมื่อเทียบกับพื้นหลัง ทำให้แยกแยะได้ง่ายและดึงดูดความสนใจของผู้ใช้ได้อย่างมีประสิทธิภาพ พื้นผิวที่มีสีสว่างกว่าและมีองค์ประกอบภาพที่ตัดกันกับพื้นหลังมากกว่าจะมีความโดดเด่นมากกว่า วิธีการนี้ช่วยลดความยุ่งเหยิงทางสายตาและช่วยให้ผู้ใช้ระบุข้อมูลสำคัญได้ ให้ความแตกต่างที่เพียงพอระหว่างองค์ประกอบพื้นหน้าและพื้นหลังเพื่อปรับปรุงให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นสามารถอ่านได้ ซึ่งปรับปรุงความสามารถในการเข้าถึงและทำความเข้าใจเนื้อหา
การรักษาความสอดคล้องในตำแหน่งและสไตล์ขององค์ประกอบอินเทอร์เฟซช่วยเสริมความสัมพันธ์แบบรูปพื้นและช่วยให้ผู้ใช้เข้าใจโครงสร้างอินเทอร์เฟซ การใช้รูปแบบการออกแบบและสัญลักษณ์ภาพที่สอดคล้องกันทำให้มั่นใจได้ว่าผู้ใช้สามารถแยกแยะระหว่างองค์ประกอบเบื้องหน้าและพื้นหลังบนหน้าจอและบริบทต่างๆ ได้อย่างรวดเร็ว ความไม่สอดคล้องกันในการออกแบบสามารถรบกวนรูปแบบทางจิตของผู้ใช้ และขัดขวางความสามารถในการนำทางอินเทอร์เฟซได้อย่างมีประสิทธิภาพ
ความคมชัดต่ำและพื้นที่เชิงลบน้อยที่สุดช่วยให้มองเห็นสี่เหลี่ยมสีขาวซึ่งเป็นส่วนหนึ่งของพื้นหลัง
รูปภาพด้านข้างจะต้องถอยไปเป็นพื้นหลังเพื่อให้ผู้ใช้สามารถเน้นไปที่เนื้อหาที่สำคัญได้
การจัดกลุ่ม
องค์ประกอบมักจะถูกมองว่าเป็นกลุ่มหากพวกมันใช้พื้นที่ร่วมกันโดยมีขอบเขตที่กำหนดไว้อย่างชัดเจน
การจัดกลุ่มองค์ประกอบที่เกี่ยวข้องภายในคอนเทนเนอร์ที่มองเห็นได้ เช่น กล่อง การ์ด หรือเส้นขอบ จะช่วยให้ผู้ใช้รับรู้ว่าองค์ประกอบเหล่านั้นเป็นหน่วยที่เชื่อมโยงกัน แนวทางนี้จะจัดระเบียบเนื้อหาและฟังก์ชันการทำงานด้วยภาพ ทำให้ระบุและประมวลผลข้อมูลได้ง่ายขึ้น การจัดกลุ่มที่ชัดเจนช่วยหลีกเลี่ยงอินเทอร์เฟซที่เกะกะ และลดความสับสนหรือความไร้ประสิทธิภาพ การจัดกลุ่มยังมีประสิทธิภาพเมื่อความใกล้ชิดไม่ใช่ตัวเลือก ตัวอย่างเช่น แถบข้อความที่ขยายการควบคุมต่างๆ บนหน้าจอที่ถูกมองว่าเป็นหน่วยที่เกี่ยวข้องกันเนื่องจากเส้นขอบและสีพื้นหลัง
การรักษาสไตล์การมองเห็นที่สอดคล้องกันสำหรับองค์ประกอบที่จัดกลุ่มจะช่วยขับเน้นความเชื่อมโยงและปรับปรุงการใช้งาน การใช้สี แบบอักษร หรือไอคอนที่คล้ายกันสำหรับองค์ประกอบเหล่านี้จะช่วยเน้นให้องค์ประกอบเหล่านั้นอยู่ในประเภทหรือฟังก์ชันเดียวกัน ความไม่สอดคล้องกันในการนำเสนอด้วยภาพอาจทำให้การรับรู้การจัดกลุ่มอ่อนแอลง และทำให้ผู้ใช้มองข้ามความสัมพันธ์ระหว่างองค์ประกอบต่างๆ หรือตีความความหมายหรือวัตถุประสงค์ขององค์ประกอบผิดไป
การเพิ่มเส้นขอบรอบองค์ประกอบหรือกลุ่มขององค์ประกอบจะสร้างการแบ่งแยกจากองค์ประกอบโดยรอบ
การแบ่งส่วนเนื้อหาช่วยให้ผู้ใช้เข้าใจว่าหัวข้อเรื่องกำลังเปลี่ยนไป
สัญญาณกับสัญญาณรบกวน
ตัวชี้นำภาพ เช่น เส้น ความเปรียบต่าง และการเว้นวรรค ถูกนำมาใช้เพื่อแสดงให้ผู้ใช้เห็นว่าบางสิ่งมีความสำคัญ อย่างไรก็ตาม สัญญาณที่มากเกินไป หรือสัญญาณที่เน้นข้อมูลที่ไม่สำคัญจะกลายเป็นสัญญาณรบกวนอย่างรวดเร็ว
ใช้หลักการของจุดโฟกัส เช่น ข้อความตัวหนา สีตัดกัน หรือไอคอน เพื่อส่งสัญญาณข้อมูลหรือการดำเนินการที่สำคัญแก่ผู้ใช้ เช่น ใช้สีสว่างสำหรับปุ่มหรือส่วนหัวที่สำคัญเพื่อทำให้โดดเด่น
พิจารณาเลือกสิ่งที่คุณไฮไลต์เพื่อหลีกเลี่ยงไม่ให้ผู้ใช้ได้รับข้อมูลมากเกินไป เฉพาะองค์ประกอบสัญญาณที่สำคัญอย่างแท้จริงต่องานหรือเป้าหมายของผู้ใช้ สัญญาณที่มากเกินไปอาจสร้างความสับสนและทำให้ผู้ใช้จัดลำดับความสำคัญได้ยาก ระบุข้อมูลที่สำคัญที่สุดต่อผู้ใช้และเน้นย้ำอย่างเหมาะสม โดยทั่วไป ขอแนะนำให้มีปุ่มกระตุ้นการตัดสินใจเพียงปุ่มเดียวต่อหน้า ในแบบฟอร์ม ให้เน้นฟิลด์ที่ต้องกรอกเพื่อดึงดูดความสนใจของผู้ใช้ วิธีนี้จะป้องกันไม่ให้ผู้ใช้หลงไปกับรายละเอียดที่ไม่จำเป็น และช่วยให้พวกเขามุ่งเน้นไปที่สิ่งที่จำเป็น
ตรวจสอบให้แน่ใจว่าสัญญาณเป็นไปตามภาษาภาพที่สอดคล้องกันทั่วทั้งอินเทอร์เฟซ เพื่อใช้เป็นแนวทางที่ช่วยให้ผู้ใช้จดจำรูปแบบและเข้าใจความหมายของสัญญาณต่างๆ ได้อย่างง่ายดาย
ปรับแต่งสัญญาณให้เหมาะกับบริบทเฉพาะและความต้องการของผู้ใช้ ตัวอย่างเช่น หากผู้ใช้กำลังสแกนอินเทอร์เฟซที่นำเสนองานบางอย่าง ให้ส่งสัญญาณสถานะวิกฤติและรายการที่ดำเนินการได้อย่างชัดเจนเพื่อดึงดูดความสนใจของพวกเขา สัญญาณตามบริบทช่วยให้ผู้ใช้ค้นหาข้อมูลที่เกี่ยวข้องได้อย่างรวดเร็วโดยไม่ถูกรบกวนจากรายละเอียดที่ไม่เกี่ยวข้อง
สัญญาณช่วยแนะนำผู้ใช้ผ่านเนื้อหาและถ่ายทอดสิ่งที่สำคัญ
สัญญาณรบกวนที่มองเห็นทำให้เกิดความสับสนและมีผลตรงกันข้ามกับสัญญาณ
การอำนวยความสะดวก Power Platform
ในแอปพื้นที่ทำงาน ให้ใช้ คอนเทนเนอร์เค้าโครง เพื่อจัดกลุ่มองค์ประกอบที่เกี่ยวข้อง ตามหลักการแล้ว คุณควรจัดระเบียบองค์ประกอบของหน้าทั้งหมดในคอนเทนเนอร์ และคอนเทนเนอร์โครงร่างยังสามารถแยกคอนเทนเนอร์ย่อยได้อย่างมีประสิทธิภาพด้วยการปรับคุณสมบัติช่องว่าง
ในแบบฟอร์มแอปที่ขับเคลื่อนด้วยโมเดล สามารถใช้ ส่วน เพื่อจัดกลุ่มฟิลด์หรือองค์ประกอบที่เกี่ยวข้อง
ใช้ความสอดคล้องกันในองค์ประกอบภาพทั่วไปด้วย ส่วนประกอบแบบกำหนดเองที่นำมาใช้ซ้ำได้
ในแอปพื้นที่ทำงาน การควบคุมที่ทันสมัย มีการส่งสัญญาณที่รวมอยู่ภายในการออกแบบ โดยเฉพาะอย่างยิ่ง ตัวควบคุม ปุ่ม และ ป้าย นำเสนอตัวเลือกในคุณสมบัติสไตล์ ทำให้เป็นสัญญาณที่มีประสิทธิภาพ ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดสำหรับแต่ละองค์ประกอบและเลือกใช้การส่งสัญญาณอย่างเหมาะสมเพื่อให้แน่ใจว่ามีการสื่อสารที่เหมาะสมที่สุด
ข้อมูลที่เกี่ยวข้อง
- หลักการจัดกลุ่ม
- จิตวิทยา Gestalt
- ปรากฏการณ์ความงาม-การใช้งาน
- การไล่ระดับระยะห่างของระบบการออกแบบ Fluent UI