การออกแบบและประสบการณ์ของผู้ใช้

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

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

การออกแบบที่ไม่แบ่งแยก

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

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

หลักการออกแบบที่ไม่แบ่งแยกที่เน้นการช่วยเหลือพิเศษมี 7 ข้อ ดังนี้

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

ลักษณะตัวตน

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

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

รวมผู้ที่มีความพิการ

"ทุกคนแตกต่างกัน ฉันพูดได้จากประสบการณ์ของฉันเท่านั้น เมื่อคุณ พบคนหูหนวก 1 คน คุณก็จะได้พบคนหูหนวก 1 คน ไม่ใช่พวกเราทุกคน"

Meryl Evans จากการพูดคุยของ ID24 เรื่อง Deaf Tech: Travel Through Time from Past to Future.

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

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

เครื่องจำลองความพิการ

ใช้ความระมัดระวังอย่างยิ่งเมื่อใช้เครื่องจำลองความพิการเพื่อ เลียนแบบหรือเสริมลักษณะตัวตน

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

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

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

มาร์ก ริกโกโบโน, ประธาน National Federation of the Blind

ฮิวริสติกการช่วยเหลือพิเศษ

พิจารณาเพิ่มฮิวริสติก ในเวิร์กโฟลว์ขณะสร้างลักษณะตัวตนและการออกแบบ ฮิวริสติกคือกฎสำหรับการออกแบบการโต้ตอบ ซึ่ง Jakob Nielsen และ Rolf Molich ได้นำเสนอในปี 1990 หลักการทั้ง 10 ข้อนี้ได้รับการพัฒนาขึ้นจากประสบการณ์หลายปีในสาขาวิศวกรรมความสามารถในการใช้งาน และมีการนำไปใช้ในการออกแบบและโปรแกรมการโต้ตอบระหว่างมนุษย์กับคอมพิวเตอร์มาตั้งแต่นั้นเป็นต้นมา

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

ฮิวริสติกการช่วยเหลือพิเศษมี 10 ข้อที่ควรพิจารณาเมื่อวางแผนการออกแบบ ซึ่งคล้ายกับฮิวริสติกชุดเดิม

1. วิธีการและรูปแบบการโต้ตอบ: ผู้ใช้สามารถโต้ตอบกับ ระบบได้อย่างมีประสิทธิภาพโดยใช้วิธีการป้อนข้อมูลที่เลือก (เช่น เมาส์ แป้นพิมพ์ การสัมผัส ฯลฯ)
2. การนำทางและการค้นหาเส้นทาง: ผู้ใช้สามารถนำทาง ค้นหาเนื้อหา และ ระบุตำแหน่งของตนเองได้ทุกเมื่อภายในระบบ
3. โครงสร้างและความหมาย: ผู้ใช้สามารถเข้าใจโครงสร้างของ เนื้อหาในแต่ละหน้าและเข้าใจวิธีใช้งานภายในระบบ
4. การป้องกันและสถานะข้อผิดพลาด: การควบคุมแบบอินเทอร์แอกทีฟมีคำแนะนำที่ชัดเจนและมีความหมายเพื่อช่วยป้องกันข้อผิดพลาด และแสดงสถานะข้อผิดพลาดที่ชัดเจนแก่ผู้ใช้ ซึ่งระบุปัญหาและวิธีแก้ไขเมื่อใดก็ตามที่ระบบแสดงข้อผิดพลาด
5. คอนทราสต์และความชัดเจน: ผู้ใช้สามารถแยกแยะและอ่านข้อความและ ข้อมูลอื่นๆ ที่มีความหมายได้อย่างง่ายดาย
6. ภาษาและความสามารถในการอ่าน: ผู้ใช้สามารถอ่านและเข้าใจเนื้อหาได้อย่างง่ายดาย
7. ความสามารถในการคาดการณ์และความสอดคล้อง: ผู้ใช้สามารถคาดการณ์วัตถุประสงค์ของแต่ละองค์ประกอบได้ และเข้าใจความสัมพันธ์ของแต่ละองค์ประกอบกับระบบโดยรวมได้อย่างชัดเจน
8. การกำหนดเวลาและการเก็บรักษา: ผู้ใช้มีเวลาเพียงพอในการทำงานให้เสร็จ และจะไม่สูญเสียข้อมูลหากหมดเวลา (เช่น เซสชัน)
9. การเคลื่อนไหวและการกะพริบ: ผู้ใช้สามารถหยุดองค์ประกอบในหน้าเว็บที่เคลื่อนไหว กะพริบ หรือเป็นภาพเคลื่อนไหวได้ ผู้ใช้ไม่ควรถูกรบกวนหรือได้รับผลกระทบอื่นๆ จากองค์ประกอบเหล่านี้
10. ตัวเลือกภาพและเสียง: ผู้ใช้สามารถเข้าถึงตัวเลือกแบบข้อความ สำหรับเนื้อหาภาพหรือเสียงใดๆ ที่สื่อข้อมูล

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

ตัวอย่างการตรวจสอบฮิวริสติกการช่วยเหลือพิเศษสำหรับจุดตรวจสอบการนำทางและการค้นหาเส้นทางอาจมีลักษณะดังนี้

จุดตรวจสอบการนำทางและการค้นหาเส้นทาง	ยอดเยี่ยม (+2 คะแนน)	ผ่าน (+1 คะแนน)	ไม่ผ่าน (-1 คะแนน)	ไม่เกี่ยวข้อง (0 คะแนน)
มีการตั้งค่าสัญญาณบอกสถานะที่ชัดเจนและมองเห็นได้ในองค์ประกอบที่ใช้งานอยู่ทั้งหมดเมื่อองค์ประกอบเหล่านั้นได้รับโฟกัสหรือไม่	check
หน้าเว็บมีข้อความชื่อที่มีความหมาย โดยมีข้อมูลเฉพาะของหน้าเว็บอยู่ก่อนหรือไม่			check
องค์ประกอบชื่อหน้าเว็บและ H1 เหมือนกันหรือคล้ายกันหรือไม่		check
มีส่วนหัวที่มีความหมายสำหรับแต่ละส่วนหลักหรือไม่		check
มีการกำหนดวัตถุประสงค์ของลิงก์จากข้อความลิงก์เท่านั้นหรือจากบริบทโดยรอบหรือไม่				check
มีลิงก์ข้ามที่ด้านบนสุดของหน้าเว็บและลิงก์จะปรากฏเมื่อได้รับโฟกัสหรือไม่			check
การจัดระเบียบองค์ประกอบการนำทางช่วยให้การค้นหาเส้นทางง่ายขึ้นหรือไม่	check

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

คำอธิบายประกอบการช่วยเหลือพิเศษ

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

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

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

ตัวอย่างภาพประกอบการออกแบบต่อไปนี้มาจาก ชุดคำอธิบายประกอบการช่วยเหลือพิเศษสำหรับ Figma ของ Indeed.com

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

ส่วนที่ควรพิจารณาสำหรับคำอธิบายประกอบการช่วยเหลือพิเศษมีดังนี้

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