เข้าใจความสำคัญของการออกแบบตัวอักษร เมื่อต้องออกแบบเว็บไซต์
เผยแพร่เมื่อ 14 Sep 2022 โพสไปที่ความล้ำหน้าของการออกแบบ UI ในเว็บไซต์ในหลายๆ ครั้งแสดงให้เราเห็นว่า visualization นั้นมีความสำคัญกับการออกแบบเว็บมากขึ้น ไม่ว่าจะเป็นการวาง layout, transition ไปจนถึงการทำแอนิเมชันต่างๆ ในหน้าแสดงผล
ทุกเว็บไซต์มีวัตถุประสงค์และเป้าหมายธุรกิจเพื่อตอบโจทย์ความต้องการของผู้ใช้อย่างชัดเจน ซึ่งในโลกดิจิทัล การออกแบบอักษร (Typography) เป็นกระบวนการที่ให้สำเร็จได้ง่ายดายที่สุด
การดีไซน์ตัวอักษรคิดเป็น 95% ของการออกแบบเว็บไซต์ ซึ่งส่วนใหญ่ใช้สำหรับการออกแบบฟอนต์ เพื่อใช้เป็นตัวเลือก การวางระยะห่าง และขนาดของข้อความต่างๆ บนเว็บ เช่นเดียวกับการเรียงลำดับความสำคัญของ layout ตัวอักษร เพื่อช่วยเป็นไกด์ให้ผู้ใช้ทำความเข้าใจข้อความได้ง่ายขึ้น
นอกจากนี้ การออกแบบอักษรยังเป็นตัวกำหนดทิศทางของคอนเทนต์บนเว็บ เพื่อช่วยให้ผู้ใช้ผลิตภัณฑ์อ่านและทำความเข้าใจข้อความบนเว็บไซต์แต่ละหน้าได้อย่างไม่สะดุด ดังนั้น การทำความเข้าใจความสำคัญและทำตามวัตถุประสงค์ของกระบวนการออกแบบนี้ จึงเป็นวิธีที่ง่ายที่สุดในการสร้างความแปลกใหม่ อีกทั้งเป็นการมอบประสบการณ์การใช้งานเว็บไซต์ที่ดีสำหรับลูกค้าของคุณอีกด้วย
ในบทความนี้ เราได้รวบรวมสิ่งสำคัญที่คุณควรรู้เกี่ยวกับการออกแบบตัวอักษร องค์ประกอบที่หลากหลาย รวมถึงความสำคัญของการออกแบบ เพื่อให้คุณส่งมอบประสบการณ์การใช้งานเว็บไซต์ที่ตรงกับความต้องการของผู้ใช้ได้อย่างแท้จริง
แหล่งที่มา Unsplash
การออกแบบตัวอักษรคืออะไร
การออกแบบตัวอักษร (Typography) คือเทคนิคของการออกแบบโครงสร้างอักษรและคำ เพื่อความเหมาะสม ช่วยทำให้อ่านง่ายขึ้น และนำทางผู้ใช้ไปยังหน้าที่ต้องการ อีกทั้งเป็นการสร้างความสวยงามและอรรถรสในหน้าแสดงผล (interface)
เหตุผลที่เราให้ความสำคัญกับองค์ประกอบดังกล่าวเป็นเพราะการออกแบบอักษรนั้นสามารถสร้างประสบการณ์การอ่านที่ดีให้กับผู้ใช้ได้ อีกทั้งเป็นสิ่งที่ผู้ใช้พิจารณาว่าควรใช้เว็บของคุณต่อไปหรือไม่
ดังคำกล่าวที่ว่า “ดีไซเนอร์ที่เก่งๆ จะรู้ว่าควรจัดการกับข้อความบนเว็บไซต์ให้ดีได้อย่างไร ไม่เพียงสร้างคอนเทนต์เท่านั้น แต่ควรรู้วิธีวางตัวอักษรให้มีประสิทธิภาพเสมือนเป็นผู้ใช้เอง” Oliver Richenstein
4 รูปแบบตัวอักษรพื้นฐานที่ใช้ออกแบบ Typography
แต่ละข้อความที่คุณเห็นบนหน้าเว็บไซต์นั้นถูกพัฒนาให้เป็นชุดรูปแบบตัวอักษรที่สร้างบรรยากาศ อรรถรส และ visual layout ซึ่งความแตกต่างระหว่างฟอนต์กับชุดรูปแบบอักษรมักถูกเข้าใจผิดอยู่บ่อยๆ อาจเพราะหลายคนตีความหมายของทั้งสองคำจำกัดความนี้ในลักษณะเดียวกัน
รูปแบบของอักษร คือการออกแบบสไตล์ตัวหนังสือให้มีหลายขนาดและเป็นการให้น้ำหนักความสำคัญที่ต่างกัน แต่ฟอนต์ถูกออกแบบเพื่อนำเสนอโครงสร้างของข้อความ
พูดง่ายๆ ว่า การออกแบบฟอนต์เป็นส่วนประกอบหนึ่งของรูปแบบตัวอักษร ซึ่งฟอนต์เป็นตัวกำหนดความสำคัญ ความกว้าง และสไตล์ของอักษรที่ใช้บนเว็บไซต์ โดยใช้ชุดรูปแบบอักษรพื้นฐานทั้ง 4 ชุด ที่คุณมักเห็นทั่วไปบนเว็บ ดังนี้
Serif
Sans serif
Slab serif
Script
ชุดรูปแบบอักษร Serif และ Sans Serif เป็นชุดที่มักเจอได้บ่อยๆ ในเว็บไซต์ ซึ่ง Serifs เป็นชุดที่ได้รับความนิยม ใช้ได้ตลอด และมีความเป็นทางการกว่าชุดอักษรอื่น ซึ่งช่วยให้ผู้ใช้อ่านข้อความได้ง่าย แม้เป็นข้อความที่เขียนยาว
ชุดรูปแบบอักษร Sans-serifs เป็นชุดที่ไม่ค่อยเป็นทางการและมีลูกเล่นน้อยกว่า จึงทำให้ Serif แสดงผลบนหน้าจอให้ผู้ใช้อ่านเข้าใจได้ง่ายกว่าอักษรชุดอื่น ไม่ว่าจะเป็นในส่วนของเนื้อหาหรือหัวข้อคอนเทนต์ (หัวเรื่อง โลโก้ และอื่นๆ ที่เกี่ยวข้อง) ซึ่งเป็นตัวเลือกที่เราแนะนำให้ใช้สำหรับการออกแบบเว็บ
ในขณะที่ชุดรูปแบบอักษร Slab ถูกออกแบบเพื่อดึงดูดสายตา มีลักษณะหนาและเด่นชัดกว่าอักษรชุดอื่น ซึ่งถูกออกแบบให้เป็นอักษรต้นแบบที่ดูคล้ายกับลายมือที่เขียนหวัดๆ จึงเหมาะที่จะใช้กับอีเวนต์พิเศษๆ เช่น หัวข้อสำคัญ และข้อความอื่นๆ ที่ต้องการให้ผู้ใช้สนใจเป็นพิเศษ
ทำไมชุดรูปแบบตัวอักษรถึงสำคัญกับการออกแบบเว็บไซต์
การดีไซน์ชุดรูปแบบตัวอักษรมีรายละเอียดมากกว่าแค่การเลือกฟอนต์ ซึ่งล้วนเป็นสิ่งจำเป็นสำหรับการออกแบบ UI
ชุดรูปแบบตัวอักษรที่ดีควรมีการกำหนดลำดับความสำคัญอย่างมีประสิทธิภาพ เพื่อทำให้องค์ประกอบด้านกราฟิกสอดคล้องกับเว็บไซต์ โดยพิจารณาภาพรวมของผลิตภัณฑ์ดิจิทัลที่มีจุดประสงค์ในการสร้างประสบการณ์ใช้งานที่ดีให้กับผู้ใช้
1. ช่วยให้ภาพรวมของเว็บเป็นระเบียบ
หนึ่งในองค์ประกอบที่สำคัญที่สุดของการดีไซน์ตัวอักษรสำหรับการออกแบบเว็บคือความเป็นระเบียบ ซึ่งสร้างขึ้นเพื่อเป็นตัวกำหนดแบบแผนสำหรับทั้งเว็บไซต์ เพื่อสร้างภาพลักษณ์ที่น่าเชื่อถือและดูเป็นมืออาชีพ
นอกจากนี้ การออกแบบอักษรยังเป็นไกด์ในการเรียงลำดับความสำคัญด้านการสื่อสารที่กระชับ เพื่อทำให้ข้อความบนเว็บดูสบายตาและอ่านง่าย พร้อมทั้งมอบประสบการณ์การใช้งานอันยอดเยี่ยมให้กับผู้ใช้ได้จริง
ทั้งนี้ การจัดระเบียบของฟอนต์ที่คุณใช้ช่วยป้องกันไม่ให้ผู้ใช้สับสนและไม่ทำให้หน้าจอดูรก ซึ่งคุณต้องจัดสรรประเภทของฟอนต์เดียวกัน ควบคู่กับการให้ข้อมูลที่ชัดเจน เพื่อช่วยให้ผู้ใช้อ่านเข้าใจสิ่งที่คุณต้องการสื่อสารตรงกันได้ทันที
2. ดึงดูดความสนใจจากผู้ใช้
การออกแบบตัวอักษรมีผลกับทัศนคติที่ผู้ใช้มีต่อเว็บของคุณอย่างมาก เพราะการออกแบบที่ดีจะช่วยเรียงลำดับความสำคัญของข้อความในเว็บให้จำได้ง่าย (กระบวนการจัดสรรองค์ประกอบที่ระบุความสำคัญของการออกแบบอักษร) และแสดงผลอย่างลงตัว พร้อมทั้งสร้างความประทับใจให้กับผู้ใช้ได้อีกด้วย ซึ่งสิ่งสำคัญที่สุดของการออกแบบอักษรคือการดึงดูดความสนใจจากผู้ใช้ ให้ไปยังหน้าเว็บที่ต้องการได้สำเร็จ
3. ช่วยให้อ่านข้อความได้ง่ายขึ้น
การอ่านข้อความที่มีตัวอักษรจำนวนมากบนหน้าจอคอมพิวเตอร์หรือสมาร์ตโฟนอาจทำให้เมื่อยตา แต่ชุดรูปแบบตัวอักษรที่มีประสิทธิภาพจะช่วยลดปัญหาข้างต้นที่อาจเกิดขึ้นกับผู้ใช้ได้ ด้วยการสร้างระยะห่างให้ข้อความอ่านง่ายขึ้น โดยเลือกใช้ฟอนต์ที่ใหญ่กว่าปกติ หนา และคมชัด พร้อมทั้งเว้นวรรคระหว่างย่อหน้าให้พอดี เพื่อแบ่งคอนเทนต์และข้อมูลอย่างมีประสิทธิภาพ
4. สะท้อนอัตลักษณ์ของแบรนด์
การออกแบบตัวอักษรที่ดีไม่เพียงช่วยเพิ่มความโดดเด่นให้กับเว็บไซต์เท่านั้น แต่ยังเป็นตัวเชื่อมระหว่างแบรนด์ธุรกิจของคุณและลูกค้าได้ นอกจากนี้ การออกแบบตัวอักษรที่มีลักษณะพิเศษจะช่วยสร้างประสบการณ์การใช้งานดีๆ ให้กับผู้ใช้ สร้างความน่าเชื่อถือให้แบรนด์ของคุณ อีกทั้งเป็นสิ่งที่ช่วยให้ธุรกิจเติบโตขึ้น
5. จัดลำดับความสำคัญของข้อความ
การจัดลำดับความสำคัญเป็นองค์ประกอบที่สำคัญที่สุดของการออกแบบตัวอักษร โดยมีเป้าหมายหลักที่จะทำให้ผู้ใช้เข้าใจลำดับความสำคัญของข้อความได้ทันที ซึ่งการทำความเข้าใจระหว่างแบรนด์ของคุณและผู้ใช้ให้ได้ตั้งแต่เนิ่นๆ เป็นสิ่งสำคัญที่สุดสำหรับในแง่ของประสบการณ์การใช้งานเว็บไซต์
ในกรณีที่ต้องการดึงดูดความสนใจจากลูกค้าบนโซเชียลมีเดียในเวลาสั้นๆ ก็สามารถทำได้ ด้วยการปรับเนื้อหาคอนเทนต์ให้กระชับ เพื่อให้ลูกค้าจับใจความสำคัญได้อย่างรวดเร็ว
ความผิดพลาดของการออกแบบตัวอักษรบนเว็บไซต์
ในขณะที่พัฒนาและออกแบบเว็บไซต์ การออกแบบตัวอักษรเป็นวิธีง่ายๆ ที่จะไม่ทำให้ผู้ใช้สับสนกับการสื่อสารผ่านข้อความ แต่การออกแบบตัวอักษรที่ไม่ดี อาจทำให้ผู้ใช้ที่มีโอกาสเป็นลูกค้าของคุณเปลี่ยนใจไปซื้อสินค้าแบรนด์อื่น ด้วยเหตุนี้ เราจึงรวบรวมความผิดพลาดหลักๆ ที่ดีไซเนอร์ควรหลีกเลี่ยง เมื่อต้องออกแบบตัวอักษรไว้ดังนี้
1. เว้นบรรทัดน้อยเกินไป
ความผิดพลาดของการเว้นบรรทัดไม่เหมาะสม ซึ่งการใส่ช่องว่างระหว่างบรรทัดมีไว้เพื่อพักสายตาเวลาอ่านข้อความต่อเนื่องยาวๆ โดยทั่วไปมักเว้นวรรคอย่างน้อยสองเท่าของขนาดตัวอักษร เช่น เว้นบรรทัดเพิ่มจากขนาด 10pt เป็น 12pt เพื่อช่วยให้อ่านได้สบายตา
อย่างไรก็ตาม การเว้นบรรทัดมากเกินไปทำให้ผู้อ่านเห็นข้อความต่อไปได้ไม่ถนัด และอาจเข้าใจผิดได้ ซึ่งเป็นหนึ่งในข้อผิดพลาดที่ดีไซเนอร์สังเกตได้ และมักเห็นการเว้นบรรทัดอย่างไม่เหมาะสมนี้ได้จากหนังสือพิมพ์และแม็กกาซีนที่จำกัดช่องว่างระหว่างบรรทัด
2. เว้นวรรคน้อยเกินไป
การเว้นช่องว่างระหว่างข้อความบนเว็บไซต์ คือการเว้นระยะห่างระหว่างคำหรือประโยค ซึ่งการเว้นวรรคอย่างเหมาะสมจะทำให้มีระยะห่างระหว่างคำที่ดี
โดยทั่วไป ดีไซเนอร์มักเปลี่ยนการเว้นวรรคให้เหมาะสมตามชุดรูปแบบอักษร เพื่อให้สอดคล้องกับการเว้นระยะห่างระหว่างประโยค รวมถึงการปรับการเว้นบรรทัดของหัวข้อย่อยด้วยเช่นกัน แต่การเว้นบรรทัดมากเกินไปอาจทำให้เป็นอุปสรรคในการอ่าน
3. การออกแบบตัวอักษรในแต่ละหน้าไม่สอดคล้องกัน
การออกแบบให้ตัวอักษรมีความสอดคล้องกันเป็นปัจจัยสำคัญที่ควรใส่ใจ ในกรณีที่ผู้ใช้อ่านข้อความบนจอเล็กๆ สมองของมนุษย์จะสั่งให้อ่านข้อความที่ละย่อหน้า ซึ่งข้อความทั่วไปมักเริ่มจากด้านซ้ายเสมอ จึงทำให้กรอบข้อความด้านซ้ายแต่ละบรรทัดเรียงไม่เป็นระเบียบ
4. ใส่ค่าความเข้มข้นของสีน้อยหรือมากไป
อีกหนึ่งความผิดพลาดที่มักพบได้บ่อย คือการใส่เอฟเฟ็กต์ตัวอักษรที่เข้มเกินไปจนกระทบกับการอ่าน ถ้าการใส่สีตัวอักษรและสีพื้นหลังที่ได้ช่วยให้ข้อความเด่นชัดพอ จะทำให้ผู้ใช้ไม่สามารถอ่านคอนเทนต์ได้
ทั้งนี้ ปัญหาดังกล่าวจะเกิดขึ้นถ้าใส่เอฟเฟ็กต์ contrast ที่เข้มและใช้ฟอนต์ที่หลากหลายเกินไปในหน้าเดียวกัน นอกจากจะทำให้เว็บดูแย่แล้ว ก็ยังทำให้อ่านข้อความได้ยากอีกด้วย ซึ่งสามารถแก้ปัญหาได้ด้วยการเลือกใส่แค่ฟอนต์เดียว และกำหนด saturation ไว้ 2 แบบสำหรับเป็นตัวเลือก เพื่อป้องกันไม่ให้ปัญหาเหล่านี้เกิดขึ้นอีก (เช่น รูปแบบฟอนต์ตัวปกติและตัวหนา)
5. ไม่มีไกด์ไลน์ในการออกแบบตัวอักษร
ไกด์ไลน์การออกแบบตัวอักษร คือแบบร่างในการทำฟอนต์ เพื่อกำหนดให้ฟอนต์ที่เลือกสอดคล้องกันเมื่อต้องออกแบบตัวอักษรที่มีลักษณะเฉพาะของแบรนด์ ซึ่งการไม่ทำไกด์ไลน์เป็นปัญหาที่ดีไซเนอร์มักพลาดไป แต่ถ้าไม่มีไกด์ไลน์ในการออกแบบตัวอักษร ขนาด การเว้นวรรค การเว้นบรรทัด การจัดความเป็นระเบียบให้อักษรเป็นไปในทิศทางเดียวกัน ก็จะไม่มีข้อกำหนดการใช้ชุดรูปแบบตัวอักษรสำหรับเว็บไซต์
กฎของการออกแบบตัวอักษรที่ช่วยให้คุณออกแบบเว็บได้ดีขึ้น
เราได้รวบรวมทริกการออกแบบตัวอักษรที่จะช่วยพัฒนาการดีไซน์ให้ดีขึ้น ดังนี้
1. ออกแบบหัวข้อให้อ่านง่าย
ไม่มีอะไรจะดีไปกว่าการออกแบบหัวข้อให้ดูสบายตาและง่ายต่อการอ่าน เพราะหัวข้อต่างๆ เป็นเหมือนคำพูดแรกที่ผู้อ่านเห็นได้ทันทีเมื่อเข้าสู่เว็บไซต์
เริ่มจากการกำหนดขนาดของตัวอักษรที่จะใช้ในหัวข้อต่างๆ มีความสำคัญเช่นเดียวกับขนาดตัวอักษรที่ใช้สำหรับเนื้อหา ซึ่งการใส่ตัวอักษรในหัวข้อที่ยาวเกินไปอาจทำให้ผู้อ่านเห็นว่าข้อความไม่บาลานส์กับส่วนอื่นๆ และเป็นสาเหตุที่ผู้ใช้หลุดโฟกัสขณะอ่านข้อความ ด้วยเหตุนี้เอง จึงควรกำหนดให้หัวข้ออ่านได้ง่าย พร้อมทั้งกำหนดขอบเขตอย่างชัดเจน ใส่คีย์เวิร์ดของกลุ่มคำเป้าหมายที่มี search volume สูง เพื่อให้ผู้ใช้เข้ามาคลิกเข้าเว็บไซต์
2. จัดระเบียบพื้นที่ว่างไว้พักสายตา
พื้นที่พักสายตาบนเว็บ (White space) หรือเรียกอีกอย่างว่า “Negative space” คือพื้นที่ว่างรอบๆ ข้อความหรือภาพกราฟิก ซึ่งการจัดสรรพื้นที่ว่างนี้จะช่วยให้หน้าเว็บดูเรียบร้อยและสบายตา นอกจากจะทำให้เว็บดูสวยและน่าดึงดูดแล้ว ยังมอบประสบการณ์การใช้เว็บไซต์ที่ตอบโจทย์ความต้องการของผู้ใช้ได้
3. ใส่ปริมาณข้อความให้พอดีกับหน้าเว็บ
ปริมาณของข้อความ (Density of text) หมายถึงจำนวนคำในพื้นที่ใดพื้นที่หนึ่งของเว็บไซต์ ซึ่งปริมาณคอนเทนต์เป็นวิธีที่ช่วยให้อ่านข้อความได้ง่ายขึ้น อย่างการเว้นบรรทัด เว้นวรรคตัวหนังสือ และขนาดข้อความล้วนเป็นตัวกำหนดจำนวนคำ เพื่อให้พอดีกับหน้าเว็บ
ในกรณีนี้ การกำหนดจำนวนคำที่เหมาะสมช่วยทำให้อ่านได้ง่ายและรวดเร็ว ซึ่งคุณต้องกำหนดให้องค์ประกอบทุกอย่างบาลานส์กัน เพื่อรักษาระยะห่างไม่ให้แต่ละคอนเทนต์เบียดเสียดหรือห่างกันเกินไป
4. จัดลำดับความสำคัญของข้อความ
การกำหนด layout ตัวอักษรนั้นอาศัยการเรียงลำดับความสำคัญขององค์ประกอบต่างๆ ในเว็บ เพราะการจัดลำดับที่ดีจะเป็นไกด์ให้ผู้ใช้รู้ว่าควรเริ่มอ่านข้อความไหนก่อน และควรอ่านอะไรเป็นลำดับถัดไป เพียงสร้างคอนเทนต์ให้ผู้ใช้และผู้เข้าชมเว็บเห็นความแตกต่างในการลำดับความสำคัญ เพื่อการใช้บริการในเว็บได้ง่ายขึ้น
5. เน้นข้อความสำคัญให้เด่นขึ้น
การเน้นย้ำข้อความที่ต้องการให้ความสำคัญเป็นพิเศษในส่วนเนื้อหาเป็นอีกหนึ่งสิ่งสำคัญที่ไม่ควรละเลย ประกอบด้วยการใส่ลิงก์ ข้อความตัวหนา และนิยามต่างๆ บนเว็บ
อย่างที่กล่าวไว้ข้างต้น คุณควรกำหนดวัตถุประสงค์ต่างๆ สำหรับการออกแบบตัวอักษรในเว็บไซต์ ด้วยการไฮไลต์ข้อความสำคัญ เพื่อให้ผู้ใช้สังเกตเห็นความแตกต่างของคอนเทนต์ได้ชัดเจน
ต้องการความช่วยเหลือด้านการออกแบบตัวอักษรใช่ไหม
ให้ความสำคัญกับการออกแบบตัวอักษร เพื่อเชื่อมโยงการออกแบบเว็บได้อย่างครอบคลุมและมีประสิทธิภาพ หากคุณทำตามคำแนะนำข้างต้นครบแล้ว แต่ยังไม่ตอบโจทย์ผู้ใช้ในด้านนี้ ลองใช้บริการ User Testing เพื่อปรับปรุงคุณภาพขั้นตอนการออกแบบอักษรกับเราดูสิ
หากคุณกำลังมองหาผู้ช่วยที่สามารถให้คำปรึกษาด้านการทำให้ผู้ใช้งานอินเทอร์เน็ตอ่านข้อความของคุณได้ง่ายขึ้นแบบเจาะลึก เพื่อสื่อสารกับผู้คนให้ชัดเจน พร้อมสร้างความพึงพอใจให้กับผู้ใช้ทุกคนได้อย่างแท้จริง ติดต่อเราวันนี้ รับคำปรึกษาฟรีด้านการออกแบบโดย UX/UI ดีไซเนอร์
