สรุปวิธี บังคับสมองคนอ่าน ให้เลือกอ่านข้อความ ตามลำดับที่เราตั้งใจ ตามทฤษฎี Text Hierarchy

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

เรื่องที่เกิดขึ้นนี้ไม่ใช่ปรากฏการณ์เหนือธรรมชาติ แต่เป็นเรื่องของ Text Hierarchy

- Text Hierarchy คือ ทฤษฎีที่ว่าด้วยการจัดลำดับความสำคัญของข้อความในงานออกแบบ เพื่อดึงดูดให้ผู้ที่พบเห็น อ่านข้อความใดข้อความหนึ่งตามลำดับก่อน-หลัง หรือทำให้รู้ว่าข้อความใดในงานออกแบบมีความสำคัญมากที่สุด

โดย Text Hierarchy จะแบ่งออกเป็น 2 ส่วนด้วยกัน คือ การกำหนดลำดับความสำคัญของข้อความ และองค์ประกอบอื่น ๆ ที่ทำให้ข้อความมีความโดดเด่น

อันดับแรก คือ เรื่องลำดับความสำคัญของข้อความ

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

- Heading

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

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

- Subheading

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

ซึ่งข้อความในส่วน Subheading จะไม่ได้มีความโดดเด่นมากเท่าข้อความส่วน Heading แต่ยังสามารถมองเห็นได้อย่างชัดเจน เพื่อดึงดูดความสนใจ

- Body

เป็นข้อความส่วนสุดท้ายที่คนจะอ่าน แต่เป็นข้อความที่ให้รายละเอียดหรือข้อมูลมากที่สุด

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

ซึ่งหากสรุปกันอีกครั้ง โดยทั่วไปแล้วคนเราจะอ่านข้อความในงานออกแบบ โดยเรียงลำดับจาก Heading ตามมาด้วย Subheading และ Body เป็นลำดับสุดท้าย

หรือเรียกอีกอย่างหนึ่งว่า เราจะอ่านข้อความในงานออกแบบ โดยเรียงลำดับจากตัวอักษรที่มีขนาดใหญ่ก่อน แล้วจึงอ่านข้อความที่มีขนาดเล็ก

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

1. ขนาดตัวอักษร

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

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

2. แบบอักษร

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

3. ตัวอักษรตัวพิมพ์เล็ก / ตัวพิมพ์ใหญ่

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

4. สีของตัวอักษร

การเลือกใช้สีข้อความสด ๆ หรือสีที่มีคอนทราสต์ตัดกับสีอื่น ๆ ในการออกแบบ จะช่วยเพิ่มความโดดเด่นให้กับข้อความ

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

5. ตำแหน่งและการจัดวางข้อความ

โดยธรรมชาติแล้ว คนเราจะมีวิธีในการอ่านข้อความ โดยการ “สแกน” กวาดสายตา ไปทั่ว ๆ งานออกแบบ

โดยจะอ่านจากทิศทาง บน-ล่าง และซ้าย-ขวา เป็นหลัก หรือที่เรียกกันว่า F-Pattern

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

ทั้งหมดนี้ คือทฤษฎี Text Hierarchy แบบเบื้องต้น ที่ทำให้รู้ว่าทำไมบางข้อความมีแรงดึงดูดให้อ่านก่อนเป็นลำดับแรก ในไม่กี่วินาทีหลังเห็นงานออกแบบ

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

อ้างอิง :
-https://www.toptal.com/designers/typography/typographic-hierarchy
-https://uxcel.com/blog/beginners-guide-to-typographic-hierarchy
-https://www.turing.com/kb/typographic-hierarchy
-https://www.thinknet.co.th/things-we-learn/visual-hierarchy
-https://www.borntodev.com/2022/01/13/ui-visual-hierarchy/
-https://foretoday.asia/articles/fonts/
-https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/
-https://cieden.com/book/sub-atomic/typography/common-reading-patterns