- UI สามารถปรับปรุงให้ดีขึ้นได้เร็วขึ้นและคาดเดาได้มากกว่าเมื่อใช้ กฎเชิงตรรกะที่สม่ำเสมอ ในการตัดสินใจเรื่องการจัดวาง/ระยะห่าง/ตัวอักษร/สี มากกว่าพึ่งเซนส์ทางศิลปะ
- พื้นฐานคือการจัดองค์ประกอบที่เกี่ยวข้องให้อยู่ร่วมกันด้วยช่องว่าง ใช้รูปแบบเดียวกันกับฟังก์ชันเดียวกัน และสร้าง ลำดับชั้นทางสายตาที่ชัดเจน ด้วยขนาด/สี/คอนทราสต์/ตำแหน่ง
- ควรลดการใช้สีเพื่อการตกแต่งและเส้นขอบที่ไม่จำเป็น และใช้สีอย่างเลือกสรรเพื่อสื่อว่าสิ่งใดโต้ตอบได้ เช่น ลิงก์และปุ่ม
- ตามเกณฑ์ WCAG 2.1 AA องค์ประกอบ UI ควรมีอัตราส่วนคอนทราสต์อย่างน้อย 3:1 และข้อความขนาดเล็กอย่างน้อย 4.5:1 รวมถึงควรมีตัวบ่งชี้อย่างขีดเส้นใต้หรือรูปทรงนอกเหนือจากสี
- การใช้ฟอนต์ sans-serif เพียงชุดเดียวเป็นหลัก พร้อมน้ำหนัก regular/bold, x-height สูง, sentence case, จัดชิดซ้าย และ line-height มากกว่า 1.5 จะช่วยเพิ่มทั้งความอ่านง่ายและความสม่ำเสมอ
วิธีปรับปรุง UI ด้วยกฎเชิงตรรกะ
- การออกแบบ UI ต้องคำนึงถึงทั้งเลย์เอาต์/ระยะห่าง/ไทโปกราฟี/สี รวมถึงการใช้งานจริง/การเข้าถึง/จิตวิทยาไปพร้อมกัน จึงทำให้การตัดสินใจซับซ้อนได้ง่าย
- แทนที่จะขยับองค์ประกอบตามสัญชาตญาณเพื่อหาหน้าตาที่ดูดี การใช้ ระบบกฎที่นำกลับมาใช้ซ้ำได้ จะช่วยให้ตัดสินใจได้เร็วขึ้นและมีเหตุผลรองรับ
- บทความใช้หน้ารายละเอียดที่พักระยะสั้นเป็นตัวอย่าง แล้วค่อยๆ แก้หน้าจอเริ่มต้นที่ซับซ้อนและใช้งานยากทีละขั้น
- เป้าหมายไม่ใช่การเพิ่มลูกเล่นแบรนด์ แต่คือการทำให้ความเข้าใจง่าย การเข้าถึง และคุณภาพงานภาพพื้นฐานอยู่ในระดับที่ดีก่อน
1. จัดกลุ่มองค์ประกอบที่เกี่ยวข้องด้วยช่องว่าง
- เมื่อแบ่งข้อมูลเป็นกลุ่มย่อยที่เกี่ยวข้องกัน ผู้ใช้จะเข้าใจและจดจำโครงสร้างหน้าจอได้เร็วขึ้น
- วิธีจัดกลุ่มองค์ประกอบมี 4 แบบ
- วางไว้ในคอนเทนเนอร์เดียวกัน
- ลดระยะห่างระหว่างองค์ประกอบที่เกี่ยวข้องกัน
- แสดงด้วยรูปร่างที่คล้ายกัน
- จัดเรียงตามเส้นแนวเดียวกัน
- คอนเทนเนอร์เป็นสัญญาณการจัดกลุ่มที่ชัดที่สุด แต่ก็อาจเพิ่มของตกแต่งที่ไม่จำเป็นบนหน้าจอ
- ช่องว่างและการจัดแนว เป็นวิธีที่ละเอียดกว่าและยังช่วยให้หน้าจอดูเรียบง่ายได้
- ในตัวอย่าง มีการเพิ่มระยะห่างระหว่างคอนเทนต์เพื่อแยกกลุ่มข้อมูลที่ต่างกันให้ชัดเจน
2. รักษารูปแบบและพฤติกรรมให้สม่ำเสมอ
- องค์ประกอบที่คล้ายกันควรมีหน้าตาและการทำงานคล้ายกัน ไม่ใช่แค่ภายในผลิตภัณฑ์เดียว แต่รวมถึงเมื่อเทียบกับผลิตภัณฑ์อื่นที่ผู้ใช้คุ้นเคย
- พฤติกรรมที่คาดเดาได้ช่วยลดความจำเป็นที่ผู้ใช้ต้องเรียนรู้วิธีใช้ใหม่ทุกครั้ง และลดโอกาสเกิดข้อผิดพลาด
- ไอคอนในตัวอย่างมีทั้งแบบทึบและแบบเส้นปะปนกัน ทำให้เข้าใจผิดได้ว่าไอคอนแบบทึบคือสถานะที่ถูกเลือก
- จึงปรับไอคอนทั้งหมดให้ใช้มุมโค้งและเส้นขอบ 2pt เหมือนกัน เพื่อให้น้ำหนักทางสายตาสมดุล
- เพิ่มป้ายข้อความเพื่อช่วยทั้งผู้ใช้ที่เข้าใจความหมายจากไอคอนอย่างเดียวได้ยาก และผู้ใช้ screen reader
- ผู้ใช้มักคาดว่าองค์ประกอบที่มีรูปร่างเหมือนกันจะทำงานแบบเดียวกัน ดังนั้น ถ้าฟังก์ชันต่างกัน การแสดงผลก็ควรต่างกันด้วย
- ในตัวอย่าง คอนเทนเนอร์ไอคอนที่ไม่โต้ตอบดูเหมือนปุ่ม
Book nowจึงเอาสีฟ้าและสไตล์ปุ่มออก
3. สร้างลำดับชั้นทางสายตาที่ชัดเจน
- ข้อมูลทุกอย่างไม่ได้สำคัญเท่ากัน ดังนั้นองค์ประกอบสำคัญควรถูกแสดงให้เด่นกว่า
- การปรับขนาด/สี/คอนทราสต์/ระยะห่าง/ตำแหน่ง/ความลึก ช่วยให้ผู้ใช้กวาดสายตาผ่านหน้าจอและหาจุดที่สนใจได้เร็วขึ้น
- Squint Test คือการหรี่ตาหรือมองหน้าจอให้เบลอ แล้วดูว่ายังพอมองออกไหมว่าอะไรสำคัญและหน้าจอนั้นมีไว้ทำอะไร
- ในหน้าจอเริ่มต้น องค์ประกอบหลายอย่างแย่งความเด่นกัน แต่ปุ่มการกระทำหลักที่มุมล่างซ้ายกลับแทบไม่สะดุดตา
- จึงเปลี่ยนปุ่มหลักให้มีสีพื้นหลังที่คอนทราสต์สูงและตัวหนา เพื่อให้กลายเป็นองค์ประกอบที่เด่นที่สุดบนหน้าจอ
- ส่วนข้อความอธิบายถูกเน้นมากเกินกว่าความสำคัญจริง จึงค่อยปรับสีและไทโปกราฟีภายหลังเพื่อลดลำดับชั้น
4. ตัดของตกแต่งที่ไม่จำเป็นออก
- เส้น/สี/พื้นหลัง/แอนิเมชันที่ไม่ได้ช่วยสื่อความหมายหรือจัดกลุ่มองค์ประกอบ อาจดึงสมาธิและเพิ่ม ภาระทางการรับรู้
- ช่องว่างสีขาวและเส้นขอบรอบภาพในตัวอย่างไม่ได้จำเป็นต่อการสื่อข้อมูล จึงถูกลบออก
- เมื่อของตกแต่งน้อยลง หน้าจอก็ดูเรียบง่ายขึ้น และโฟกัสที่ข้อมูลสำคัญกับการกระทำหลักได้ง่ายขึ้น
5. กำหนดบทบาทของสีให้ชัดเจน
- การใช้สีอย่างจำกัดเพื่อสื่อความหมาย ปลอดภัยกว่าการใช้เพื่อการตกแต่ง
- แนวทางที่ได้ผลคือเริ่มจากภาพขาวดำ แล้วค่อยเติมสีเฉพาะจุดที่จำเป็น
- หากใช้สีแบรนด์กับองค์ประกอบที่โต้ตอบได้ เช่น ลิงก์ข้อความและปุ่ม ก็จะช่วยให้ผู้ใช้เรียนรู้ได้ง่ายว่าอะไรคลิกได้
- สำหรับองค์ประกอบอย่างการ์ดที่รูปร่างเองก็บอกความโต้ตอบได้อยู่แล้ว ไม่จำเป็นต้องเติมสีเสมอไป
- ชื่อเรื่องสีน้ำเงินและดาวคะแนนในตัวอย่างเป็นองค์ประกอบที่ไม่โต้ตอบ แต่กลับดูเหมือนคลิกได้ จึงเอาสีออก
- ผลลัพธ์คือความแตกต่างระหว่างองค์ประกอบที่โต้ตอบได้กับข้อมูลทั่วไปชัดเจนขึ้น
6. ใช้คอนทราสต์อย่างน้อย 3:1 กับองค์ประกอบ UI
- คอนทราสต์คือการแสดงความต่างของความสว่างที่รับรู้ได้ระหว่างสองสี เป็นอัตราส่วนตั้งแต่
1:1ถึง21:1 - ตามเกณฑ์ WCAG 2.1 AA องค์ประกอบ UI เช่น ฟิลด์ฟอร์ม/ไอคอน/ปุ่ม ต้องมี คอนทราสต์อย่างน้อย 3:1
- ลูกศรบนภาพในตัวอย่างอาจมองเห็นได้ไม่ชัด ขึ้นอยู่กับภาพพื้นหลัง
- จึงใช้ไอคอนสีเทาและพื้นหลังสีขาวแบบทึบแสง เพื่อให้ได้คอนทราสต์โดยไม่ขึ้นกับภาพ
- เมื่อเพิ่มคอนเทนเนอร์พื้นหลัง พื้นที่กดก็กว้างและชัดเจนขึ้นด้วย
- ปุ่มหลักเริ่มต้นเองก็มีคอนทราสต์กับพื้นหลังไม่พอ ทำให้ผู้ใช้สายตาเลือนรางแยกรูปทรงปุ่มได้ยาก
- จึงเพิ่มคอนทราสต์ของปุ่มให้เกิน 3:1 เพื่อปรับปรุงทั้งการเข้าถึงและลำดับชั้นทางสายตา
- สามารถวัดคอนทราสต์ได้ด้วย WebAIM Contrast Checker หรือ Contrast Figma plugin
7. ใช้คอนทราสต์กับข้อความให้เพียงพอ
- เกณฑ์ WCAG 2.1 AA กำหนดคอนทราสต์ของข้อความต่างกันตามขนาดและน้ำหนักตัวอักษร
- ข้อความขนาดเล็กไม่เกิน 18px ต้องมีอย่างน้อย 4.5:1
- ข้อความตัวหนาที่ใหญ่กว่า 18px หรือข้อความ regular ที่ใหญ่กว่า 24px ต้องมีอย่างน้อย 3:1
- ตัวเลขจำนวนรูปภาพมีคอนทราสต์กับพื้นหลังไม่พอ จึงเพิ่มความทึบของคอนเทนเนอร์สีเทาและเพิ่มเงาให้ข้อความ
- ข้อความตำแหน่งใช้สีอ่อนเกินไปและฟอนต์ก็บาง จึงเปลี่ยนเป็นสีเทาที่เข้มขึ้น
- แม้จะผ่านเกณฑ์คอนทราสต์แล้ว ฟอนต์ที่บางเกินไปก็ยังอ่านยากได้ ดังนั้นต้องปรับน้ำหนักตัวอักษรแยกต่างหากด้วย
8. อย่าแยกสถานะด้วยสีอย่างเดียว
- ผู้ใช้ที่มีความบกพร่องในการมองเห็นสีอาจแยกคู่สีบางแบบได้ยาก หรือมองไม่เห็นสีบางสีเลย
- จึงไม่ควรสื่อความหมาย/สถานะ/ความสามารถในการโต้ตอบด้วยสีเพียงอย่างเดียว
- ลิงก์
Reviewsในตัวอย่าง ถ้าตัดสีน้ำเงินออก ก็แทบไม่ต่างจากข้อความทั่วไป - จึง เพิ่มขีดเส้นใต้ เพื่อให้ยังระบุได้ว่าเป็นลิงก์แม้มองไม่เห็นสี
9. ใช้ฟอนต์ sans-serif เพียงชุดเดียว
- typeface คือชุดรูปแบบตัวอักษรในสไตล์เดียวกัน เช่น Helvetica ส่วนการแปลงขนาดและน้ำหนักอย่าง bold/regular คือฟอนต์แต่ละแบบในชุดนั้น
- สำหรับอินเทอร์เฟซ โดยทั่วไปการใช้ ฟอนต์ sans-serif เพียงชุดเดียว ที่อ่านง่าย เป็นกลาง และเรียบง่าย ถือว่าปลอดภัยที่สุด
- ฟอนต์ serif เชิงตกแต่งของหัวข้อในตัวอย่างอ่านยาก และอาจไม่เข้ากับภาพที่พักหรือบรรยากาศของบริการ
- จึงปรับให้ใช้ฟอนต์ sans-serif ชุดเดียวกับเนื้อหา เพื่อเพิ่มทั้งการใช้งานและความสม่ำเสมอทางสายตา
10. เลือกฟอนต์ที่มี x-height สูง
- ฟอนต์ที่มี x-height สูง ซึ่งหมายถึงความสูงของตัวพิมพ์เล็ก และมีระยะห่างระหว่างตัวอักษรพอเหมาะ มักอ่านง่ายแม้ในขนาดเล็ก
- League Spartan ในตัวอย่างมี x-height ค่อนข้างต่ำ
- จึงเปลี่ยนเป็น Inter ที่มี x-height สูงกว่า เพื่อเพิ่มความอ่านง่ายของข้อความเนื้อหาขนาดเล็ก
11. จำกัดการใช้ตัวพิมพ์ใหญ่
- คนเรามักอ่านเร็วด้วยการรับรู้รูปทรงของทั้งคำ มากกว่ามองทีละตัวอักษร
- คำที่เขียนด้วยตัวพิมพ์ใหญ่ทั้งหมดจะมีรูปทรงสี่เหลี่ยมคล้ายกันไปหมด ทำให้อ่านยากเพราะต้องไล่ดูทีละตัว
- ในตัวอย่าง จึงเปลี่ยนข้อมูลตำแหน่งจากตัวพิมพ์ใหญ่ทั้งหมดเป็น sentence case โดยใช้ตัวพิมพ์ใหญ่เฉพาะคำแรกและชื่อเฉพาะ
- ตัวพิมพ์ใหญ่ทั้งหมดควรใช้แบบจำกัด ยกเว้นกับข้อความสั้นๆ ที่จำเป็นต้องเน้นจริงๆ
12. ใช้น้ำหนัก regular และ bold เท่านั้น
- แม้ฟอนต์หนึ่งชุดจะมีน้ำหนักหลายแบบ แต่ถ้าใช้ทั้งหมด หน้าจอจะมี noise ทางสายตามากขึ้นและควบคุมความสม่ำเสมอได้ยาก
- ทางที่ดีคือทำให้ design system เรียบง่าย โดยยึด regular และ bold เป็นหลัก
- ใช้ bold กับหัวข้อและข้อความที่ต้องการเน้น
- ใช้ regular กับข้อความทั่วไปขนาดเล็ก
- หาก bold หนักเกินไป อาจใช้ semi-bold แทนได้
- น้ำหนักที่บางมากหรือหนามากควรจำกัดไว้กับหัวข้อใหญ่ ไม่ใช่ข้อความขนาดเล็ก
- ข้อความตำแหน่งในตัวอย่างใช้น้ำหนัก light จึงยังอ่านยากแม้เพิ่มคอนทราสต์แล้ว
- จึงเปลี่ยนเป็น regular เพื่อให้อ่านง่ายขึ้น และลดจำนวนรูปแบบน้ำหนักที่ใช้
13. หลีกเลี่ยงข้อความสีดำสนิท
- สีดำสนิทสร้างคอนทราสต์สูงมากกับพื้นหลังสีขาว ซึ่งอาจทำให้ล้าสายตาเมื่ออ่านนานๆ
- บนพื้นหลังสีขาว การใช้ สีเทาเข้ม แทนสีดำสนิทจะปลอดภัยกว่า
- ในตัวอย่าง มีการเปลี่ยนองค์ประกอบสีดำหลายส่วนให้เป็นสีเทาเข้มเพื่อปรับความอ่านง่าย
- ส่วนคำอธิบายที่พักที่เด่นเกินระดับความสำคัญ ก็เปลี่ยนเป็นสีเทาที่อ่อนลงเพื่อลดลำดับชั้นทางสายตา
14. จัดข้อความยาวชิดซ้าย
- ภาษาอังกฤษอ่านจากซ้ายไปขวา และผู้ใช้มักกวาดสายตาเป็นรูปตัว F ดังนั้นการจัดชิดซ้ายจึงมั่นคงที่สุด
- หัวข้อหรือประโยคสั้นๆ อาจจัดกึ่งกลางแล้วอ่านได้เร็วอยู่
- แต่ถ้าจัดข้อความยาวไว้กึ่งกลาง ตำแหน่งเริ่มต้นของแต่ละบรรทัดจะไม่เท่ากัน ทำให้หาบรรทัดถัดไปได้ยาก
- การจัดเต็มบรรทัดและจัดกึ่งกลางอาจทำให้อ่านข้อความยาวได้ยากเป็นพิเศษ โดยเฉพาะสำหรับผู้ใช้ที่มีความบกพร่องด้านการรับรู้
- ในตัวอย่าง จึงเปลี่ยนคำอธิบายที่พักจากจัดกึ่งกลางเป็นจัดชิดซ้าย และยังทำให้สอดคล้องกับข้อความด้านบนมากขึ้น
15. ตั้ง line-height ของเนื้อหาอย่างน้อย 1.5
- line-height คือระยะห่างแนวตั้งระหว่างบรรทัดข้อความสองบรรทัด
- ระยะห่างบรรทัดที่เหมาะสมช่วยลดการอ่านซ้ำบรรทัดเดิม และทำให้อ่านข้อความยาวได้สบายขึ้น
- ข้อความเนื้อหาควรมี line-height อย่างน้อย 1.5 (150%) และโดยทั่วไปช่วง 1.5–2 ถือว่าเหมาะสม
- ในตัวอย่าง มีการเพิ่ม line-height จาก 1 (100%) เป็น 1.5 (150%) เพื่อให้ข้อความอ่านง่ายขึ้น
ผลลัพธ์หลังการแก้ไขและหลักการที่นำไปใช้
- เมื่อค่อยๆ ใช้กฎทั้ง 16 ข้อกับหน้าจอที่เคยซับซ้อน ก็สามารถเปลี่ยนให้เรียบง่ายขึ้น อ่านง่ายขึ้น และเข้าถึงได้มากขึ้น
- ของตกแต่งที่สะท้อนแบรนด์สามารถเติมภายหลังได้ แต่ก่อนอื่นต้องจัดการพื้นฐานอย่างโครงสร้างข้อมูล/การแยกองค์ประกอบที่โต้ตอบได้/คอนทราสต์/ไทโปกราฟีให้ถูกต้องก่อน
- หากใช้กฎที่เป็นกลางและตรวจสอบได้ แทนการพึ่งรสนิยมส่วนตัว ก็จะออกแบบ UI ที่เข้าใจง่ายและเข้าถึงได้ดีขึ้นอย่างรวดเร็ว
- เมื่อใช้กฎเหล่านี้ซ้ำๆ มันจะค่อยๆ กลายเป็นพื้นฐานตามธรรมชาติของกระบวนการออกแบบ และเปิดทางให้ทดลองรูปแบบการแสดงผลหรือของตกแต่งใหม่ๆ ต่อไปได้
ยังไม่มีความคิดเห็น