แชร์ผ่าน

คำแนะนำสำหรับมาตรฐานการออกแบบต่อไปนี้

  • บทความ

นำไปใช้กับคำแนะนำรายการตรวจสอบการปรับปรุงประสบการณ์ใช้งานของ Power Platform Well-Architected นี้:

XO:02 ปฏิบัติตามมาตรฐาน ข้อตกลง และแนวทางที่กำหนดไว้ ใช้รูปแบบการออกแบบทั่วไป รักษาความสอดคล้องในองค์ประกอบการออกแบบ คำศัพท์เฉพาะทาง และการโต้ตอบทั่วทั้งอินเทอร์เฟซ ใช้รูปแบบและมาตรฐานที่สอดคล้องกันเพื่อแนะนำผู้ใช้ผ่านอินเทอร์เฟซและสร้างประสบการณ์ของผู้ใช้ที่สอดคล้องกัน

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

กลยุทธ์การออกแบบที่สำคัญ

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

เข้าใจหลักการออกแบบ

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

ปฏิบัติตามรูปแบบและสิ่งแทนทั่วไป

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

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

วางระบบการออกแบบ

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

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

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

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

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

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

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

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

ความพยายามของระบบการออกแบบแบบรวมศูนย์ยังสามารถโฮสต์สินทรัพย์สื่อสากล เช่น โลโก้บริษัทและสินทรัพย์การออกแบบอื่นๆ ในพื้นที่เก็บข้อมูลเพื่อให้สามารถพัฒนาอย่างรวดเร็วในวงกว้าง

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

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

ดำเนินการตรวจทานการออกแบบ

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

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

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

เป็นไปตามมาตรฐานการเข้าถึงเพื่อเพิ่มฐานผู้ใช้

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

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

วิธีการเข้าถึงเนื้อหา

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

เครื่องมือช่วยเหลือ

เครื่องมือช่วยเหลือทั่วไป ได้แก่:

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

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

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

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

สไตล์ภาพ

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

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

ตัวพิมพ์

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

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

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

รูปภาพ กราฟฟิก และการเคลื่อนไหว

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

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

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

การโต้ตอบ

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

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

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

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

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

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

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

การอำนวยความสะดวก Power Platform

ระบบควบคุมที่ทันสมัยมีให้เลือกทั้งสำหรับแอปพื้นที่ทำงานและแอปแบบจำลอง

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

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

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

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

แอปแบบจำลองมีคีย์บอร์ดลัดมาตรฐานในตัวสำหรับการนำทางแบบฟอร์มและมุมมอง

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

รายการตรวจสอบการเพิ่มประสิทธิภาพประสบการณ์

รายการตรวจสอบการเพิ่มประสิทธิภาพประสบการณ์