การออกแบบเพื่อการเข้าถึงและการผนวกรวม

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

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

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

“การออกแบบที่ดี [เข้าถึงได้] จะเกิดขึ้นเมื่อคุณดู [การออกแบบ] จากมุมมองหรือเลนส์ที่หลากหลาย”

— ศิลปะแห่งการออกแบบเกม: หนังสือแห่งเลนส์

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

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

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

เลนส์ของการช่วยสำหรับการเข้าถึง คือ:

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

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

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

เลนส์ของแอนิเมชั่นและเอฟเฟกต์

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

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

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

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

— ไพรเมอร์เพื่อความผิดปกติของขนถ่าย

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

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

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

ในการใช้ เลนส์ของแอนิเมชั่นและเอฟเฟกต์ ให้ถามตัวเองด้วยคำถามเหล่านี้:

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

เลนส์เสียงและวิดีโอ

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

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

— หลักเกณฑ์การเล่นอัตโนมัติของ Google

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

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

ในการใช้ Lens of Audio and Video ให้ถามตัวเองด้วยคำถามเหล่านี้:

• มีเสียงหรือวิดีโอที่อาจสร้างความรำคาญจากการเล่นอัตโนมัติหรือไม่?
• เป็นไปได้ไหมที่จะให้การควบคุมเพื่อหยุด หยุดชั่วคราว หรือซ่อนเสียงหรือวิดีโอที่เล่นอัตโนมัติ
• วิดีโอมีการถอดเสียงและ/หรือคำบรรยายหรือไม่

เลนส์สี

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

ตาบอดสีมีผลกระทบต่อผู้ชาย 1 ใน 12 คน และผู้หญิง 1 ใน 200 คน ภาวะตาบอดสี (ตาบอดสีแดง-เขียว) เป็นภาวะตาบอดสีที่พบได้บ่อยที่สุด ซึ่งส่งผลต่อผู้ชายประมาณ 6% ผู้ใช้ที่ตาบอดสีแดง-เขียวมักมองว่าสีแดง สีเขียว และสีส้มเป็นสีเหลือง

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

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

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

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

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

ในการใช้ Lens of Color ให้ถามตัวเองด้วยคำถามเหล่านี้:

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

เลนส์แห่งการควบคุม

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

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

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

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

เพื่อให้ผู้ใช้มีพื้นที่เพียงพอในการเลือกการควบคุมได้อย่างแม่นยำ ขนาดขั้นต่ำที่แนะนำสำหรับการควบคุมคือ 34 x 34 พิกเซลที่ไม่ขึ้นกับอุปกรณ์ แต่ Google ขอแนะนำอย่างน้อย 48 x 48 พิกเซล ในขณะที่ข้อกำหนด WCAG แนะนำให้ใช้อย่างน้อย 44 x 44 พิกเซล ขนาดนี้ยังรวมถึงช่องว่างภายในที่ตัวควบคุมมี ดังนั้นการควบคุมอาจมีขนาด 24 x 24 พิกเซล แต่หากมีช่องว่างภายในเพิ่มเติมอีก 10 พิกเซลในทุกด้านจะทำให้มีความละเอียดถึง 44 x 44 พิกเซล

ขอแนะนำว่าควรวางส่วนควบคุมให้ห่างกันเพียงพอเพื่อลดข้อผิดพลาดในการแตะ Microsoft แนะนำให้เว้นระยะห่างอย่างน้อย 8 พิกเซลในขณะที่ Google แนะนำให้ตัวควบคุมเว้นระยะห่างอย่างน้อย 32 พิกเซล

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

ในการใช้ Lens of Controls ให้ถามตัวเองด้วยคำถามเหล่านี้:

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

เลนส์ของแบบอักษร

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

เทคโนโลยีในปัจจุบันแตกต่างจากเมื่อ 20 ปีที่แล้วอย่างมาก ทุกวันนี้ เบราว์เซอร์สามารถใช้ได้บนอุปกรณ์ทุกขนาด ตั้งแต่นาฬิกาขนาดเล็กไปจนถึงหน้าจอ 4K ขนาดใหญ่ เราไม่สามารถใช้ขนาดแบบอักษรคงที่ในการออกแบบเว็บไซต์ของเราได้อีกต่อไป ขนาดตัวอักษรต้องตอบสนองได้เช่นเดียวกับการออกแบบ

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

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

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

ในการใช้ Lens of Font ให้ถามตัวเองด้วยคำถามเหล่านี้:

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

เลนส์ของรูปภาพและไอคอน

เขาว่ากันว่า "ภาพหนึ่งภาพแทนคำพูดนับพันคำ" ถึงกระนั้นภาพที่คุณไม่สามารถมองเห็นได้ก็พูดไม่ออกใช่ไหม?

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

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

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

“คุณแทบไม่เคยบรรยายว่าภาพนั้นเป็นอย่างไร แต่คุณอธิบายข้อมูลที่อยู่ในภาพแทน”

— กฎทองห้าข้อสำหรับข้อความแสดงแทนที่สอดคล้อง

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

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

ตัวอย่างเช่น หากคุณจะอธิบายภาพนี้สำหรับโปรแกรมอ่านหน้าจอ คุณจะพูดว่าอย่างไร

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

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

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

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

ในการใช้ เลนส์ของรูปภาพและไอคอน ให้ถามตัวเองด้วยคำถามเหล่านี้:

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

เลนส์คีย์บอร์ด

การช่วยการเข้าถึงด้วยแป้นพิมพ์เป็นส่วนที่สำคัญที่สุดของการออกแบบที่เข้าถึงได้ แต่ก็เป็นสิ่งที่มองข้ามไปมากที่สุดเช่นกัน

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

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

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

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

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

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

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

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

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

ในการใช้ Lens of Keyboard ให้ถามตัวเองด้วยคำถามเหล่านี้:

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

เลนส์ของเค้าโครง

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

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

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

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

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

ในการใช้ Lens of Layout ให้ถามตัวเองด้วยคำถามเหล่านี้:

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

เลนส์แห่งความซื่อสัตย์ของวัสดุ

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

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

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

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

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

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

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

— การออกแบบเว็บที่ยืดหยุ่น

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

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

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

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

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

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

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

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

ในการใช้ เลนส์แห่งความซื่อสัตย์สุจริต ให้ถามตัวเองด้วยคำถามเหล่านี้:

• การออกแบบนั้นซื่อสัตย์ต่อผู้ใช้หรือไม่?
• มีองค์ประกอบใดบ้างที่มีพฤติกรรม ดู หรือทำหน้าที่เป็นองค์ประกอบอื่นหรือไม่?
• มีส่วนประกอบใดบ้างที่รวมลักษณะการทำงานที่แตกต่างกันเป็นองค์ประกอบเดียว? การทำเช่นนี้ทำให้ส่วนประกอบไม่ซื่อสัตย์หรือไม่?

เลนส์ของความสามารถในการอ่านได้

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

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

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

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

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

— วิชาการพิมพ์: คู่มือการออกแบบ

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

ในการใช้ Lens of Readability ให้ถามตัวเองด้วยคำถามเหล่านี้:

• ภาษาธรรมดาและเรียบง่ายหรือไม่?
• แต่ละย่อหน้าเน้นที่แนวคิดเดียวหรือไม่
• มีย่อหน้ายาวๆ หรือบล็อกยาวๆ ของข้อความที่ไม่ขาดตอนหรือไม่?
• ส่วนหัว ลิงก์ ตัวควบคุม และป้ายกำกับทั้งหมดมีความชัดเจนและสื่อความหมายหรือไม่

เลนส์ของโครงสร้าง

ตามที่กล่าวไว้ใน Lens of Layout เค้าโครงโครงสร้างคือสิ่งที่ใช้โดยโปรแกรมอ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์ ในขณะที่ Lens of Layout มุ่งเน้นไปที่เลย์เอาต์ภาพ Lens of Structure จะเน้นที่เลย์เอาต์โครงสร้างหรือ HTML และความหมายของการออกแบบ

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

ยกตัวอย่าง การออกแบบสำหรับสายการแข่งขันแบบคัดออกเดี่ยว

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

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

“จอร์จ, เฟร็ด, ไลนัส, ลูซี่, แจ็ค, จิลล์, เฟร็ด, จิงเจอร์, จอร์จ, ลูซี่, แจ็ค, จิงเจอร์, จอร์จ, จิงเจอร์, จินเจอร์”

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

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

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

• องค์ประกอบแลนด์มาร์ค (ส่วนหัว การนำทาง หลัก และส่วนท้าย)
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” คุณอาจถาม

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

Bringing It All Together

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”