เคล็ดลับการออกแบบหน้า Landing Page บนมือถือที่ดีที่สุดที่คุณจะไม่พบที่อื่น

มีแหล่งข้อมูลออนไลน์มากมายที่กล่าวถึงการออกแบบหน้า Landing Page หลังการคลิกสำหรับอุปกรณ์เคลื่อนที่ แต่ไม่มีคำแนะนำการออกแบบที่เฉพาะเจาะจงมากนักเกี่ยวกับ วิธี สร้างหน้าที่มี Conversion สูง

เค้าโครงโครงสร้างใดที่แนะนำสำหรับการดูบนมือถือ ปุ่มควรมีจำนวนพิกเซลเท่าใด องค์ประกอบควรแยกองค์ประกอบกี่พิกเซล คุณควรใช้เอฟเฟกต์ "โฮเวอร์" หรือไม่? รูปแบบฉลากควรอยู่ภายในหรือภายนอก?

ฉันชื่อ Cosmin Serban ผู้อำนวยการฝ่ายบริการออกแบบที่ Instapage คุณอาจจะถามว่า อะไรทำให้ Cosmin มีคุณสมบัติที่จะเขียนเกี่ยวกับการออกแบบหน้า Landing Page หลังการคลิกบนมือถือ?

ฉันได้ให้ความรู้แก่ลูกค้าเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดในการออกแบบและจัดโครงสร้างหน้า Landing Page หลังคลิกเพื่อปรับปรุงอัตราการแปลง นอกจากนี้ ฉันมี:

• ตรวจสอบแลนดิ้งเพจหลังการคลิกมากกว่า 1,000 เพจ
• ร่วมมือกับลูกค้าเพื่อให้แน่ใจว่าข้อความของพวกเขาจะถูกส่งผ่านและผู้เยี่ยมชมของพวกเขาได้รับประสบการณ์ที่ดีซึ่งจะนำไปสู่การเปลี่ยนใจในท้ายที่สุด

นอกจากนี้ ฉันยังเป็นส่วนหนึ่งของทีมที่พัฒนาเทมเพลตที่ปรับให้เหมาะสมกว่า 200 แบบ ซึ่งใช้ในการสร้างและเปิดใช้หน้า Landing Page หลังการคลิกมากกว่า 200,000 หน้า คุณสามารถหาเทมเพลตได้ที่นี่

การออกแบบหน้า Landing Page หลังคลิกบนมือถือ: สิ่งที่ต้องรู้ก่อนเริ่ม

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

เริ่มจากความแตกต่างที่สำคัญที่สุดระหว่างประสบการณ์เดสก์ท็อปและอุปกรณ์เคลื่อนที่

โครงสร้าง

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

สิ่งแรกที่อยู่ในใจคือวิธีที่ผู้เยี่ยมชมจะสแกนเนื้อหาบนหน้ามือถือแตกต่างไปจากเดิมอย่างสิ้นเชิง เราเคยได้ยินเกี่ยวกับรูปแบบ F หรือ Z บนหน้า Landing Page หลังการคลิกบนเดสก์ท็อป แต่รูปแบบสำหรับอุปกรณ์เคลื่อนที่เรียกว่าอะไร เราไม่จำเป็นต้องตั้งชื่อให้ แต่เป็นไปได้มากว่าจะเป็นชื่อเชิงเส้นมาก การเลื่อนขึ้นและลงเป็นวิธีเดียวที่จะทำความเข้าใจว่าหน้า Landing Page หลังการคลิกนำเสนออะไร:

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

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

การเปรียบเทียบแบบเคียงข้างกันนี้แสดงให้เห็นว่าหน้าเดสก์ท็อปมีโครงสร้างอย่างไรเทียบกับหน้าบนมือถือ:

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

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

Mobile Aspect Ratio Lock ช่วยให้การจัดกลุ่มเลเยอร์ของคุณไว้ด้วยกันและล็อกอัตราส่วนภาพ ไม่ว่าจะอยู่บนเดสก์ท็อปหรือรูปแบบมือถือ

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

เวลาในการโหลด

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

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

สิ่งเดียวกันกับภาพพื้นหลัง เนื่องจากคุณไม่จำเป็นต้องมีรูปภาพที่มีความกว้าง 2,000 พิกเซลที่ 300kb เพื่อโหลดในส่วนของคุณ ฉันขอแนะนำให้นักออกแบบสร้างรูปภาพที่ปรับแต่งเองซึ่งคุณสามารถตั้งเป็นพื้นหลังของส่วนได้:

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

เนื่องจากโทรศัพท์มือถือส่วนใหญ่จะปรับให้เข้ากับขนาดของพื้นที่เนื้อหาที่มีให้ในตัวสร้างมือถือ กฎง่ายๆ ก็คือต้องมี รูปภาพที่มีความกว้างอย่างน้อย 400 พิกเซล เพื่อให้แน่ใจว่าไม่มีพื้นที่ว่างด้านข้าง

สร้างหน้า Landing Page ของ AMP หลังการคลิก

การสร้างหน้า Landing Page หลังการคลิกในเชิงบวกบนมือถือเป็นสิ่งสำคัญ เนื่องจากหน้า Landing Page หลังการคลิกเป็นจุดที่เกิด Conversion หากหน้าเว็บของคุณโหลดช้าเกินไปหรือสร้างประสบการณ์ที่ไม่ปะติดปะต่อระหว่างโฆษณาไปจนถึงหลังการคลิก ผู้เข้าชมจะตีกลับ

จากนั้น ให้พิจารณาว่า Google พิจารณาประสบการณ์หน้า Landing Page หลังการคลิกเป็นปัจจัยหนึ่งในการพิจารณาลำดับโฆษณา ซึ่งท้ายที่สุดแล้วจะส่งผลต่ออัตราการคลิกผ่านของคุณ เพิ่มทั้งหมดนั้นและแบรนด์มีปัญหาสำคัญในมือของพวกเขา โชคดีที่เฟรมเวิร์ก AMP มีอยู่

โดยเฉพาะอย่างยิ่งหน้า AMP นั้นน่าสนใจสำหรับผู้ลงโฆษณา เนื่องจากช่วยให้ประสบการณ์ของผู้ใช้อุปกรณ์เคลื่อนที่น่าสนใจยิ่งขึ้นผ่านเวลาในการโหลดที่เกือบจะในทันทีและการเลื่อนที่ราบรื่น ในขณะที่ยังคงสนับสนุนการปรับแต่งสไตล์และการสร้างแบรนด์บางอย่าง เนื่องจาก AMP จำกัด HTML/CSS และ JavaScript จึงช่วยให้แสดงหน้า Landing Page หลังการคลิกได้เร็วขึ้น หน้า AMP ต่างจากหน้ามือถือทั่วไปตรงที่ Google แคช AMP แคชไว้โดยอัตโนมัติเพื่อให้ Google โหลดเร็วขึ้น

ประโยชน์ของเฟรมเวิร์ก AMP มีมากกว่าข้อจำกัดอย่างแท้จริง:

• ความเร็วในการโหลดหน้าเว็บที่เร็วขึ้นบนอุปกรณ์มือถือ
• ประสบการณ์ผู้ใช้ที่ดีขึ้นสำหรับการท่องเว็บบนมือถือ
• การใช้หน้า AMP สามารถช่วยเพิ่มคะแนนคุณภาพของคุณได้
• Google จะสนับสนุนหน้าที่ใช้ AMP

ณ เดือนมิถุนายน 2018 Instapage เสนอหน้า Landing Page ของ AMP หลังการคลิก ซึ่งนักการตลาดดิจิทัลสามารถสร้างหน้าที่สอดคล้องกับ AMP ได้ภายในแอปโดยไม่ต้องมีนักพัฒนา เพราะสุดท้ายแล้ว หากการโหลดหน้าเว็บไม่ทันใจ แสดงว่ายังไม่เร็วพอ

ออกแบบให้สัมผัส

หนึ่งในความท้าทายที่ใหญ่ที่สุดของคุณกับการออกแบบหน้า Landing Page หลังการคลิกบนมือถือคือการทำให้แน่ใจว่าผู้เข้าชมดำเนินการได้ง่ายที่สุด การกระทำนั้นอาจเป็นการส่งแบบฟอร์มหรือการแตะปุ่มง่ายๆ คุณคาดหวังว่าคนส่วนใหญ่จะทำการปรับเปลี่ยนบางอย่าง แต่ก็ไม่เสมอไป

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

ปุ่ม

แต่ปัญหาที่ใหญ่ที่สุดที่เราสังเกตเห็นคือ ขนาดของปุ่ม บนหน้า Landing Page หลังการคลิก ทีมงานของเราแนะนำให้ออกแบบปุ่มที่มี ความสูงอย่างน้อย 70 พิกเซล และอย่ากลัวที่จะทำให้มันกว้างที่สุดเท่าที่จะเป็นไปได้ แต่อย่าขยายจนเต็มความกว้าง (400 พิกเซล) เนื่องจากอาจสับสนกับส่วนเล็กๆ

เอฟเฟกต์โฮเวอร์เป็นสิ่งที่ดีสำหรับหน้าเดสก์ท็อปเพราะเป็นสัญญาณให้ผู้เยี่ยมชมสามารถดำเนินการกับองค์ประกอบนั้นได้ บนมือถือ เอฟเฟกต์โฮเวอร์จะซ้ำซ้อน

ระยะขอบ

สำหรับระยะขอบ เราแนะนำให้จัด โซนปลอดภัยอย่างน้อย 20 พิกเซลใน แนวตั้งในแต่ละด้าน และหลีกเลี่ยงความตึงเครียดทางสายตาที่อาจปรากฏขึ้นพร้อมกับองค์ประกอบที่อยู่ใกล้กับด้านข้างของหน้าจอโทรศัพท์มากเกินไป

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

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

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

ความสามารถในการอ่าน

คุณอาจคิดว่าสามารถอ่านเนื้อหาได้อย่างชัดเจน แต่หลายครั้งที่เราเคยเห็นหน้า Landing Page หลังคลิกซึ่งข้อความมีขนาดเล็กหรือใหญ่เกินไป การหาสมดุลที่ดีนั้นค่อนข้างง่าย หลักการง่ายๆ ที่ดีสำหรับ ขนาดฟอนต์ที่ ใช้สำหรับองค์ประกอบเฉพาะคือ:

• หัวเรื่องหลัก: 28 พิกเซล
• หัวเรื่องย่อย: 22 พิกเซล
• ย่อหน้า: 17 พิกเซล
• รายละเอียดอื่นๆ: 15 พิกเซล

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

อีกรายการที่น่ากล่าวถึงคือ ความสูงของบรรทัดที่ มีองค์ประกอบข้อความ

ในบางสถานการณ์บนเดสก์ท็อป ควรมี 1.0 หรือ 1.2 เมื่อคุณสร้างหน้า Landing Page หลังการคลิกสำหรับอุปกรณ์เคลื่อนที่ ตรวจสอบให้แน่ใจว่าความสูงของบรรทัดสำหรับองค์ประกอบข้อความมี อย่างน้อย 1.4

บรรทัดด้านล่าง: ยิ่งขนาดฟอนต์เล็กลง ความสูงของบรรทัดก็จะยิ่งมากขึ้น

แบบฟอร์ม

เนื่องจากแบบฟอร์มเป็นส่วนที่สำคัญที่สุดของหน้า Landing Page หลังการคลิก การทำให้ผู้คนส่งข้อมูลได้ง่ายจึงเป็นสิ่งสำคัญ

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

อีกอย่างที่ออกมาบ่อยมากคือการจัดการกับฟอร์มที่มีฟิลด์มากมาย

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

เพิ่ม Conversion บนอุปกรณ์เคลื่อนที่ของคุณตั้งแต่วันนี้

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

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