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

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

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

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

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

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

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

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

ลักษณะตัวตน

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

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

รวมความพิการ

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

มธุริน เอวานส์ จากการพูดคุยใน ID24 เรื่อง Deaf Tech: Travel Through Time from Past to Future

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

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

โปรแกรมจำลองความพิการ

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

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

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

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

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

การคาดคะเนการช่วยเหลือพิเศษ

พิจารณาเพิ่มฮิวริสติก ลงในเวิร์กโฟลว์ขณะสร้างเพอร์โซนาและการออกแบบ ฮิวริสติกคือกฎ สำหรับการออกแบบการโต้ตอบ ซึ่ง 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

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

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

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

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

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

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

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

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

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