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

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

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

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

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

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

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

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

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

ลักษณะตัวตน

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

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

ใส่ใจผู้พิการ

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

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

Meryl Evans จากงานสัมมนา ID24 เรื่อง Deaf Tech: Travel Through Time from Past to Future

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

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

Jane Smith สูง ผมยาวสีดำ สวมเสื้อแขนยาวสีเทาและกางเกงยีนส์
  • ชื่อ: Jane Bennet
  • อายุ: 57 ปี
  • สถานที่: เอสเซกซ์ สหราชอาณาจักร
  • อาชีพ: วิศวกร UX
  • ความพิการ: มือสั่นจากโรคพาร์กินสันที่เริ่มตั้งแต่อายุยังน้อย (YOPD)
  • เป้าหมาย: ใช้การป้อนข้อมูลด้วยการแปลงคำพูดเป็นข้อความเพื่อให้เพิ่มคำแนะนำโค้ดได้ง่ายขึ้น ค้นหาอุปกรณ์ปั่นจักรยานทางออนไลน์โดยการกดแป้นพิมพ์น้อยที่สุด
  • ความหงุดหงิด: เว็บไซต์ที่รองรับเฉพาะแป้นพิมพ์เท่านั้น แอปสำหรับการออกแบบที่มีพื้นที่เล็กสำหรับการโต้ตอบด้วยการสัมผัส

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

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

เครื่องจำลองการทุพพลภาพ

โปรดใช้ความระมัดระวังสูงสุดเมื่อใช้เครื่องจำลองความพิการเพื่อจำลองหรือเสริมบุคลิกของคุณ

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

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

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

Mark Riccobono ประธานสมาพันธ์แห่งชาติของคนตาบอด (National Federation of the Blind)

วิธีประเมินการช่วยเหลือพิเศษ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่างบางส่วนที่ควรพิจารณาสำหรับการกำกับเนื้อหาเพื่อผู้พิการ ได้แก่

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