บทความ IT เจ๋งๆ

ปัจจุบันมีการพูดถึง Landing Page กันมากขึ้น เพราะมันมีส่วนสำคัญของธุรกิจ ไม่ว่าจะเป็นการเพิ่มยอดขายหรือการให้กลุ่มลูกค้ามุ่งหวัง (Leads) กรอกข้อมูลเพื่อให้ทีมงานติดต่อกลับ เป็นต้น ในบทความนี้จะมาบอก 13 เคล็ดลับ เพื่อปรับปรุง Landing Page Design ให้ดียิ่งขึ้น

1. การใช้สีพร้อมกับ Text ซ้อนทับบนรูปภาพ

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

2. อย่าใช้ Negative Space มากเกินไป

Designer มักจะชอบใช้ Negative Space และเราก็มักจะได้ยินเสมอว่า เราควรมีพวกมันเพิ่มเติมบน Web แต่การที่มี Negative Space ระหว่าง Elements ต่าง ๆ มากเกินไป มันจะกลับกลายเป็นการดึงดูดสายตาให้มองไปยังพื้นที่ที่ว่างเปล่าเหล่านั้น แทนที่จะมองไปยัง Elements อื่น ๆ ที่สำคัญกว่า 

3. ไม่มีใครชอบอ่านอะไรที่เยิ่นเย้อไม่ตรงประเด็น

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

4. แม้จะมีแค่ Text แต่ควรจัด Layout ให้ดูน่าสนใจ

มันอาจเป็นเรื่องยากในการออกแบบ Landing Page ใน Section ที่มีเฉพาะ Text โดยเฉพาะอย่างยิ่งหากคุณไม่มีโอกาสหรือ Resource ต่าง ๆ ในการใช้ภาพประกอบภาพ, Icon หรือ รูปภาพ คุณอาจใช้สีของ Brand และใช้เทคนิคการออกแบบจัดวาง Text เพื่อยกระดับการออกแบบของคุณให้ดูน่าสนใจยิ่งขึ้น

5. Icons ควรมีขนาดเล็ก แต่รูปภาพประกอบควรมีขนาดใหญ่

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

6. ใช้การเว้นช่องว่างระหว่างตัวอักษรเท่าที่จำเป็นเท่านั้น

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

7. อย่าลืมดูความยาวของแต่ละบรรทัดใน FAQs

FAQ Section น่าจะเป็นจุดอ่อนอันดับ 1 ของ Web ในแง่ของความยาวแต่ละบรรทัดที่มากเกินไป ความยาวของบรรทัดที่เหมาะสมที่สุดคือ อยู่ระหว่าง 45 ถึง 75 ตัวอักษรรวมทั้งช่องว่างและการเว้นวรรค

8. แสดงสิ่งที่เป็น Value ที่แท้จริง

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

9. ไม่มีใครชอบอักษรตัวเล็ก ๆ

ในตัวอย่างนี้ เป็นการจัดวางรูปแบบตัวอักษรบน Web ใน CSS โดยในสถานการณ์นี้ใช้ Body Copy ที่มีขนาด 11 px และ Navigation Links ที่ขนาด 9 px ซึ่งค่าเริ่มต้นของ Browsers ที่มีขนาดตัวอักษร 16 px นั้นเป็นการใช้งานเมื่อ 20 ปีมาแล้ว ปัจจุบันเรานิยมใช้ Font สมัยใหม่ที่ออกแบบมาสำหรับ Screen และใช้ Body Copy ที่มีขนาดเริ่มต้นที่ 18 – 20 px แล้ว

10. ใช้ Rule of Odds

นั่นคือ Layouts ควรจะมี Elements ที่แสดงเป็นจำนวนคี่ หากคุณมี 4 หัวข้อที่จะนำเสนอ ก็ให้ลองปรับให้เหลือ 3 หัวข้อ โดยอาจรวม 2 หัวข้อที่คล้ายกันให้อยู่ภายใน 1 หัวข้อ หรือหากไม่สามารถทำได้ ก็ให้จัดลำดับความสำคัญของแต่ละหัวข้อเสียใหม่ แล้วตัดหัวข้อที่สำคัญน้อยกว่าหัวข้ออื่นออก หรือไม่ก็แยกออกเป็น 5 หัวข้อ ดังตัวอย่างด้านล่างนี้ หากทำเป็น 5 หัวข้ออาจดูมากเกินไป จึงยุบเหลือเพียง 3 หัวข้อ

11. จัดการกับจำนวนหัวข้อที่มากเกินไป

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

12. ใช้สีที่สว่างเพื่อเน้นให้เด่นขึ้น

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

13. ตรวจสอบความคมชัดของข้อความที่เป็นสีเทาเสมอ

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

ที่มา:  https://uxplanet.org/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• 21 Python Mini Projects พร้อมตัวอย่าง Code ที่แนะนำให้คุณลองสร้าง
• 15 VSCode Extensions ที่ช่วยเพิ่ม Dev Productivity สำหรับปี 2021
• 5 Linux Commands มีประโยชน์ ที่ทุกคนควรรู้จักไว้