การออกแบบ UI สำหรับผู้ใช้ตาบอดสี

คนตาบอดสีเป็นสัดส่วนที่สำคัญของประชากร โดยเป็นผู้ชาย 1 ใน 12 คน และผู้หญิง 1 ใน 200 คน อย่างไรก็ตาม ผู้ใช้ที่ตาบอดสีมักเป็นผู้ชมที่มักถูกมองข้ามในการออกแบบ UI

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

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

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

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

ทำไมการออกแบบเพื่อตาบอดสีจึงสำคัญ

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

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

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

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

คำศัพท์เกี่ยวกับสีที่ควรรู้

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

ฮิว: นี่คือคำพ้องความหมายสำหรับ 'สี' และถูกกำหนดโดยความยาวคลื่นสเปกตรัมของสี

ความอิ่มตัว: เรียกอีกอย่างว่า chroma นี่คือความเข้มหรือบริสุทธิ์ของสี โดยพิจารณาจากปริมาณสีเทาที่มีอยู่ ยิ่งมีสีเทาน้อย สีก็จะยิ่งสว่างขึ้น

ความสว่าง: ความสว่างขึ้นอยู่กับปริมาณของสีขาวหรือสีดำที่เติมลงในสี ทำให้เกิดสีอ่อนและเฉดสีตามลำดับ

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

วิธีการออกแบบสำหรับผู้ใช้ตาบอดสี

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

อย่ากำหนดด้วยสีเพียงอย่างเดียว

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

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

คุณควรหลีกเลี่ยงการนำเสนอข้อมูลที่สำคัญในรูปแบบข้อความและรูปภาพที่มีสี หรืออย่างน้อยก็ให้ข้อมูลดังกล่าวในรูปแบบอื่นๆ ที่เข้าถึงได้

ทำความเข้าใจคอนทราสต์และตัวเลือกสี

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

ต่อไปนี้คือวิธีอื่นๆ สองสามวิธีในการปรับปรุงการมองเห็นการออกแบบของคุณ:

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

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

• แดงกับเขียว
• สีเขียวและสีน้ำเงิน
• สีเขียวและสีน้ำตาล
• สีเขียวและสีเทา
• สีเขียวและสีดำ
• สีฟ้าและสีเทา
• สีฟ้าและสีม่วง
• สีเหลืองและสีเขียวอ่อน

ใช้รูปแบบและพื้นผิว

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

ใช้สัญลักษณ์และติดป้ายกำกับทุกอย่าง

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

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

คิดใหม่เกี่ยวกับปุ่ม CTA ของคุณ

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

การออกแบบ UI ที่ดีจะใช้สี แต่ใช้เทคนิคที่โดดเด่นอย่างน้อยหนึ่งอย่างสำหรับปุ่ม CTA เช่นกัน:

• ขนาด
• ตำแหน่ง
• ความคมชัดสูง
• ขอบถ่วงน้ำหนัก
• แบบอักษรที่มีน้ำหนัก
• ไอคอนสัญลักษณ์
• เอฟเฟกต์โฮเวอร์

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

ขีดเส้นใต้ลิงก์เหล่านั้น

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

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

พิจารณามินิมอลลิสต์

Minimalism ยังห่างไกลจากสิ่งใหม่ สุนทรียศาสตร์ได้รับความนิยมมานานหลายทศวรรษ โดยผ่านสถาปัตยกรรม ศิลปะ การตกแต่งภายใน และแน่นอน การออกแบบ

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

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

ใช้เครื่องจำลองตาบอดสี

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

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

ทำให้เว็บไซต์ของคุณสามารถเข้าถึงได้

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

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