วิธีใช้รูปแบบ F เพื่อเพิ่มการแปลง
เผยแพร่แล้ว: 2017-01-26การสร้างหน้า Landing Page หลังการคลิกเพื่อรวมองค์ประกอบหน้า Landing Page ที่สำคัญหลังการคลิกทั้งหมดนั้นมีความสำคัญ แต่สิ่งที่สำคัญไม่แพ้กันก็คือลำดับและตำแหน่งของพวกเขา นั่นคือเลย์เอาต์ของหน้า Landing Page หลังการคลิก
เมื่อออกแบบเลย์เอาต์หน้า Landing Page หลังคลิก ควรพิจารณาวิธีที่ผู้เยี่ยมชมมักจะดูเพจของคุณมากที่สุด การยอมรับแนวโน้มที่จะอ่านจากบนลงล่างเป็นการเริ่มต้นที่ดีในการทำให้ผู้เยี่ยมชมจดจ่ออยู่กับสิ่งที่คุณต้องการให้ทำ คุณสามารถสร้างลำดับชั้นของภาพและวาง CTA ของคุณในตำแหน่งที่ดีที่สุดสำหรับพวกเขาที่จะแปลงโดยการรู้ว่าสายตาของพวกเขาจะไปที่ใด
คลิกเพื่อทวีต
นอกจากนี้ยังมีการวิจัยอย่างกว้างขวางเพื่อสนับสนุนเรื่องนี้ ในปี พ.ศ. 2549 Nielsen Norman Group ได้ทำการศึกษาเกี่ยวกับการติดตามสายตาที่มีประโยชน์มากที่สุดและได้รับการอ้างถึงมากที่สุดในปัจจุบัน ในระหว่างการศึกษา พวกเขาตรวจสอบว่าผู้ใช้ 232 คนดูหน้าเว็บต่างๆ หลายพันหน้าอย่างไร ผลการวิจัยสรุปได้ว่าพฤติกรรมการอ่านหลักของผู้ใช้ค่อนข้างสอดคล้องกันในไซต์และงานต่างๆ ผู้ใช้อ่านในรูปแบบ F-Pattern
รูปแบบ F คืออะไร?
F-Pattern เป็นวิธีที่สายตาของเราเคลื่อนไหวเมื่อเราอ่านเนื้อหาออนไลน์ ภายในเวลาไม่กี่วินาที สายตาของเราจะเคลื่อนไหวด้วยความเร็วที่โดดเด่นในสำเนาของเว็บไซต์และองค์ประกอบภาพอื่นๆ โดยสแกนหน้าตามลำดับนี้:
- ขั้นแรก ให้ข้ามด้านบนสุดของหน้าเพื่ออ่านพาดหัวข่าวที่สำคัญ
- จากนั้นลงด้านซ้ายของหน้าเพื่อดูตัวเลขหรือสัญลักษณ์แสดงหัวข้อย่อย
- สุดท้าย ข้ามหน้าอีกครั้งเพื่ออ่านข้อความตัวหนาหรือหัวข้อย่อย
แผนที่ความร้อนสามแผนที่ด้านล่างได้มาจากการศึกษาการติดตามการมองของผู้ใช้ในเว็บไซต์ต่างๆ สามแห่ง ปุ่มสีมีดังนี้:
- สีแดง = ดูมากที่สุดและตรึงมากที่สุดบน
- สีเหลือง = บางมุมมอง แต่ตรึงน้อย
- สีน้ำเงิน = มีคนดูน้อยที่สุดและแทบไม่มีการแก้ไขใดๆ
- สีเทา = มุมมองแทบไม่มีและไม่มีการแก้ไข
สังเกตว่ารูปแบบ F-Reading เป็นโครงร่างที่หยาบและเป็นภาพรวม ไม่จำเป็นต้องเป็นรูป F ที่แน่นอน นอกจากนี้ โปรดทราบว่าการออกแบบ F-Pattern ไม่ได้จำกัดตัวเองไว้ที่ก้านแนวนอนสองอันเหมือน F แบบดั้งเดิม
จะมีบางครั้งที่ผู้ใช้อ่านเพียงเส้นแนวนอนเส้นเดียว ทำให้รูปแบบดูเหมือน L กลับหัว บางครั้งพวกเขาจะอ่านส่วนที่สามของหน้า ทำให้การออกแบบดูเหมือน E มากกว่า F และ หากหน้า Landing Page หลังจากคลิกของคุณยาวขึ้น คุณจะต้องรวมต้นกำเนิดมากกว่าสองรายการเพื่อช่วยสร้างลำดับชั้นภาพที่ผู้คนมีแนวโน้มที่จะติดตามมากขึ้น
วิธีที่ F-Pattern นำไปใช้กับหน้า Landing Page หลังการคลิก
สิ่งสำคัญคือต้องออกแบบหน้าเว็บที่มีโฟลว์โดยเจตนา หากไม่มีสิ่งใดมาดึงความสนใจจากผู้ชมของคุณโดยเฉพาะ สายตาของพวกเขาจะเคลื่อนผ่านหน้าที่มีเนื้อหาจำนวนมากในดีไซน์ F-Pattern
การออกแบบ F-Pattern ทำงานได้ดีที่สุดสำหรับหน้าที่มีข้อความหนาแน่น เช่น โพสต์บล็อก หน้าผลการค้นหา หน้าขายที่ยาวขึ้น เป็นต้น อย่างไรก็ตาม ไม่ได้หมายความว่าคุณจะไม่สามารถออกแบบหน้า Landing Page แบบสั้นหลังการคลิกด้วย เค้าโครง F-Pattern
ด้วยการใช้ผลจากการศึกษาการติดตามการมอง คุณสามารถออกแบบหน้า Landing Page หลังการคลิกได้อย่างมีกลยุทธ์ เพื่อให้องค์ประกอบที่สำคัญที่สุดเป็นที่ที่ผู้เยี่ยมชมของคุณมักจะให้ความสนใจมากที่สุด
โปรดทราบว่าสายตาของผู้ดูมักจะเริ่มต้นที่มุมซ้ายบนของหน้าก่อนที่จะสแกนส่วนที่เหลือของหน้า ดังนั้น หากหน้า Landing Page หลังการคลิกของคุณไม่ว่าง และคุณต้องการให้ผู้เข้าชมสังเกตเห็นองค์ประกอบเฉพาะทันที เช่น การนับถอยหลังสำหรับข้อเสนอของคุณ อย่าลืมวางไว้ในส่วนซ้ายบนนี้ จากนั้น ออกแบบหน้า Landing Page ที่เหลือหลังจากคลิกด้วยลำดับชั้นภาพที่ชัดเจนและขั้นตอนที่นำผู้ดูไปยัง CTA ของคุณ
หน้า Landing Page หลังการคลิกซึ่งละเว้น F-Pattern
Pest Exterminator ได้สร้างหน้า Landing Page หลังการคลิก และไม่เป็นไปตาม F-Layout ไม่มีลำดับชั้นภาพ:
ความสนใจของคุณไปทางไหนก่อน? รูปภาพ? ส่วนลด? ฟิลด์ฟอร์มเดียว? สามข้อเสนอที่ด้านล่าง?
ดวงตาของคุณไม่ได้ถูกดึงดูดไปยังที่ใดที่หนึ่ง มีการดึงความสนใจของคุณในหลายทิศทางมากเกินไป แต่ละองค์ประกอบได้รับการจัดรูปแบบเพื่อดึงดูดความสนใจมากที่สุด ซึ่งทำให้องค์ประกอบทั้งหมดแข่งขันกันเอง ดังนั้นจึงเป็นเรื่องยากสำหรับผู้เข้าชมที่จะระบุเป้าหมายหลักของหน้าเว็บ และ Pest Exterminator มักจะประสบปัญหาในการสร้าง Conversion
ตอนนี้ มาดูตัวอย่างหน้า Landing Page หลังการคลิกซึ่งเป็นไปตามรูปแบบ F-Reading
โปรดทราบว่าสำหรับหน้า Landing Page หลังการคลิกที่สั้นลง เราได้แสดงทั้งหน้า สำหรับหน้าที่ยาวขึ้น เราจะแสดงเฉพาะครึ่งหน้าบนเท่านั้น นอกจากนี้ บางยี่ห้อในรายการอาจกำลังทดสอบ A/B หน้าของตนโดยใช้เวอร์ชันอื่นนอกเหนือจากที่แสดงด้านล่าง
หน้า Landing Page หลังคลิกซึ่งเป็นไปตาม F-Layout
Dovico
หน้า Landing Page หลังการคลิกของ Dovico ด้านบนใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบเว็บ F-Pattern สังเกตว่าองค์ประกอบที่สำคัญแต่ละอย่างตั้งอยู่ตามเส้นทาง F-Pattern ซึ่งผู้เยี่ยมชมจะดูเป็นธรรมชาติเมื่อดูหน้านี้อย่างไร:
- ผู้ดูจะดูที่มุมซ้ายบนของหน้าก่อน โดยจะมองเห็นโลโก้บริษัท
- เคลื่อนไปตามก้านแนวนอนแรก พวกเขาจะมาที่ใบหน้าที่ยิ้มแย้มของผู้หญิง สิ่งที่น่าสนใจเป็นพิเศษที่นี่คือ F-Angle ลาดลงสู่ใบหน้าของเธอ และไม่ตรงไปยังหมายเลขโทรศัพท์โดยตรง
- เมื่อเลื่อนลงมาทางด้านซ้ายของหน้าไปยังต้นกำเนิดแนวนอนถัดไป ผู้ชมจะมุ่งความสนใจไปที่พาดหัวและหัวข้อย่อย
- สุดท้าย พวกเขาจะต่อ F-Pattern ลงไปตามก้านแนวตั้ง โดยที่พวกเขาจะมาที่ปุ่ม CTA ซึ่งเป็นวัตถุประสงค์หลักของหน้า Landing Page หลังการคลิก
การวางองค์ประกอบหน้า Landing Page ที่สำคัญที่สุดหลังคลิกไว้บน F-Layout เช่นนี้จะช่วยเพิ่มประสิทธิภาพหน้าของ Dovico และโน้มน้าวผู้เยี่ยมชมให้ดำเนินการตามข้อเสนอ
ผลตอบแทนแบบไดนามิก
หน้า Landing Page หลังการคลิกของ Dynamic Yield เป็นไปตามเลย์เอาต์ F-Pattern ด้วย แต่เนื่องจากชื่อและโลโก้ของพวกมันเป็นสิ่งที่เล็กที่สุดในครึ่งหน้าบน สายตาของผู้ชมจึงมีแนวโน้มที่จะเริ่มต้นในตำแหน่งอื่น:
- พวกเขามักจะสนใจพาดหัวของหน้าก่อน เนื่องจากแบบอักษรมีขนาดใหญ่และบางส่วนเป็นตัวหนา
- ถัดไป พวกเขาจะเคลื่อนไปตามก้านแรกไปยังรูปภาพทางด้านขวา ซึ่งทำให้ก้านแนวนอนแรกเสร็จสมบูรณ์
- การสแกนก้านแนวตั้ง ผู้ชมจะอ่านหัวข้อย่อย
- ปุ่ม CTA สีฟ้าสดใสมีแนวโน้มที่จะดึงดูดความสนใจของผู้เข้าชมต่อไป
- หลังจากปุ่ม CTA ป้ายลูกค้าจะทำหน้าที่เป็นส่วนเสริมและหน้าจะดำเนินต่อไปในลักษณะที่คล้ายคลึงกันในครึ่งหน้าล่าง
ไคโรแพรคติกร่วม
เนื่องจากการออกแบบ F-Pattern ไม่จำเป็นต้องเป็นไปตาม F-Shape แบบดั้งเดิมเสมอไป โปรดสังเกตว่าหน้า Landing Page หลังการคลิก The Joint Chiropractic มีต้นกำเนิดแนวนอนค่อนข้างน้อย:
- เช่นเดียวกับ Dynamic Yield บรรทัดแรกจะเริ่มต้นรูปแบบ F (และดำเนินการต่อไปทางขวาด้วยแบบฟอร์ม)
- ประการที่สอง พันธกิจ (ในการพิมพ์ขนาดใหญ่กว่าส่วนที่เหลือของสำเนา) จะอยู่ตามลำต้นถัดไป
- ในที่สุด การยึดถือและผลประโยชน์ที่เด่นชัดของ The Joint Chiropractic ประกอบขึ้นเป็นต้นกำเนิดสุดท้ายของรูปแบบ
แม้จะมีจำนวนต้นกำเนิดที่มากขึ้น แต่หน้าดังกล่าวถูกสร้างขึ้นด้วยแนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบเว็บ F-Pattern ทำให้ผู้เยี่ยมชมสามารถติดตามและมุ่งเน้นไปที่ส่วนที่สำคัญที่สุดของหน้า Landing Page หลังการคลิกได้ง่าย
บอสตันโกลบ
หน้า Landing Page หลังการคลิกของ Boston Globe ไม่เป็นไปตาม F-Shape ทั่วไป ซึ่งช่วยให้พวกเขาชักชวนผู้เข้าชมให้เปลี่ยนจากการส่งเสริมการขายในที่สุด:
- เริ่มต้นที่มุมบนซ้าย ผู้เข้าชมจะมองเห็นโลโก้ของหนังสือพิมพ์ก่อน
- ตรงใต้โลโก้คือพาดหัว ตามด้วยรูปภาพตามก้านแนวนอนเดียวกัน
- เมื่อเดินลงมาตามแนวตั้ง ผู้เข้าชมจะจับจ้องที่ปุ่ม CTA สีเขียวสดใส
- หากพวกเขาเลือกที่จะดำเนินการต่อในแนวดิ่งต่อไป พวกเขาจะได้เรียนรู้สิ่งที่พวกเขาสามารถคาดหวังได้เมื่อลงชื่อสมัครใช้การเข้าถึงแบบไม่จำกัด
ถึงตาคุณที่จะใช้ F-Pattern
การรวมองค์ประกอบหน้าที่เชื่อมโยงไปถึงหลังการคลิกที่จำเป็นทั้งหมดนั้นมีความสำคัญสำหรับการแปลง แต่การจัดวางก็มีความสำคัญเช่นกัน
การออกแบบ F-Pattern ช่วยให้คุณสร้างลำดับชั้นของภาพและขั้นตอนโดยเจตนาเพื่อให้ผู้เยี่ยมชมมุ่งเน้นไปที่องค์ประกอบเฉพาะ หากคุณสามารถทำให้พวกเขาทำตามเส้นทางที่คุณต้องการได้ พวกเขาจะมีโอกาสตีกลับน้อยลงและมีส่วนร่วมมากขึ้นและดำเนินการกับเพจของคุณแทน
เมื่อคำนึงถึงตัวอย่างเหล่านี้ ถึงเวลาที่คุณจะนำ F-Layout ไปปฏิบัติจริง สร้างหน้า Landing Page หลังคลิกแบบมืออาชีพด้วย Instapage ขอตัวอย่าง Enterprise วันนี้