ความลับของบทความที่คนยอมอ่านจนจบ

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

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

3 เทคนิคปรับหน้าเว็บให้คนอยากอ่านต่อ

• กว้างไปใช่ว่าจะดี: ความกว้างของเนื้อหาที่เหมาะกับสายตาคนเราคือประมาณ 45 ถึง 75 ตัวอักษรต่อบรรทัด แนะนำให้จำกัดความกว้างของหน้าบล็อกให้อยู่ในช่วง 680 - 780 px เพื่อให้อ่านง่ายและไม่ต้องกวาดสายตาจนเหนื่อยครับ
• เลือกฟอนต์และขนาดให้เหมือนเปิดหนังสือ: เนื้อหาหลักควรใช้ฟอนต์แบบมีหัว (Serif) เช่น Charter หรือ Georgia และปรับขนาดให้ใหญ่สะใจถึง 21px สำหรับการดูบนคอมพิวเตอร์ หรือ 18px บนมือถือ ที่สำคัญคือระยะห่างบรรทัด (Line-height) ต้องอยู่ที่ 1.7 เสมอเพื่อให้อ่านสบายตาที่สุด
• สีและความห่าง ช่วยสร้างจังหวะหายใจ: สีตัวอักษรไม่ควรใช้สีดำสนิท ให้ดรอปลงมาเป็นสีเทาเข้มประมาณ #1a1a1a ตัดกับพื้นหลังสีขาวล้วนเพื่อสร้างความเปรียบต่างสูงสุด และควรเว้นระยะห่างก่อนขึ้นหัวข้อใหม่ (H2) ให้เยอะหน่อยเพื่อเป็นจุดพักสายตา

ตัวอย่างการประยุกต์ใช้จริงเวลาสร้างบล็อก

เวลาผมทำเว็บให้ลูกค้า ไม่ว่าจะเป็นบล็อกให้ความรู้หรือบทความเพื่อดึงคนเข้า LINE OA ผมจะจัดโครงสร้างคอนเทนต์ให้สอดคล้องกับประสบการณ์ผู้ใช้ (UX) เสมอครับ:

• H1 (ชื่อบทความ): ต้องใหญ่สุดและดึงดูดความสนใจ โดยใช้ฟอนต์ไม่มีหัว (Sans-serif) เพื่อให้ดูเตะตาและตัดกับเนื้อหาที่ใช้ฟอนต์มีหัว
• เนื้อหาเกริ่นนำ (Paragraph แรก): ผมมักจะปรับขนาดตัวอักษรให้ใหญ่ขึ้นนิดนึง เช่น 24px เพื่อทำหน้าที่เป็น Hook ดึงคนให้อยากอ่านเนื้อหาในย่อหน้าถัดไป
• H2 (หัวข้อรอง): เว้นระยะห่างด้านบนให้มากหน่อยประมาณ 2.5em เพื่อแบ่งหมวดหมู่เนื้อหาให้ชัดเจน คนอ่านจะสแกนเนื้อหาได้ง่ายขึ้น
• จุดเน้นและลิงก์: ถ้ามีลิงก์ให้ใช้สีน้ำเงิน (#0066cc) พร้อมขีดเส้นใต้ หรือไม่สีที่ต่างจากสีหลักของเนื้อหา เพื่อให้รู้ว่าสามารถคลิกได้ และถ้ามีประโยคเด็ด (Quote) ให้ทำแถบเส้นขอบสีด้านซ้ายและใช้ตัวเอียงให้โดดเด่นขึ้นมา

---

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

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

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

หวังว่าคงมีประโยชน์กับทุกท่านครับ