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

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

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

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

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

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

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

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

ลักษณะตัวตน

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

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

มีความพิการ

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

Meryl Evans จาก ID24 พูดคุยกับ Deaf Tech: Travel Through Time from Past to Future

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

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

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

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

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

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

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

Mark Riccobono ประธานสหพันธ์คนตาบอดแห่งชาติ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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