แลนดิ้งเพจกับโฮมเพจ: อะไรคือความแตกต่าง?

การออกแบบหน้าแรกของเว็บไซต์ในช่วงกลางทศวรรษที่ 1990 เป็นฝันร้ายโดยรวมของมาตรฐานการออกแบบในปัจจุบัน แต่ในช่วงวัยเด็กของเว็บ มันคือทั้งหมดที่เรารู้ ไฮเปอร์ลิงก์สีฟ้าครามสดใสที่ลอยอยู่ในอวกาศดูเหมือนเป็นความคิดที่ดีในขณะนั้น

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

ในแง่นั้น หน้าแรกก็เหมือนกับหน้า Landing Page หลังการคลิก แต่ก็ยังมีความแตกต่างที่สำคัญระหว่างพวกเขา คำนึงถึงความแตกต่างในการออกแบบเหล่านี้เพื่อสร้างหน้าที่มีประสิทธิภาพสูง

การออกแบบหน้าแรกของเว็บไซต์เทียบกับการออกแบบหน้า Landing Page หลังคลิก: สิ่งที่คุณต้องรู้

1. หน้า Landing Page และหน้าแรกของเว็บไซต์หลังการคลิกควรสร้างขึ้นสำหรับผู้ใช้ที่แตกต่างกัน

โอเค โอกาสที่คุณจะเจอหน้าแรกที่ดูเหมือนระเบียบของ Microsoft ในปี 1995 นั้นน้อยมาก แต่ทำไม?

Kara Jensen หลักการสร้างสรรค์ที่ BOP Design อธิบายว่า:

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

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

20 ปีที่แล้ว Spacescape ที่เกลื่อนไปด้วยไฮเปอร์ลิงก์อาจดูเท่สำหรับนักออกแบบของ Microsoft แต่มันเป็นสิ่งที่ผู้ใช้สนใจหรือเปล่า อาจจะไม่.

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

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

เป้าหมายของเพจคืออะไร

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

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

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

นี่คือหน้า Landing Page หลังการคลิกที่สร้างโดยบริษัทเดียวกัน:

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

ครึ่งหน้าล่างหน้าแรกมีภาพหน้าจอจากแอปซึ่งเต็มไปด้วยลิงก์ไปยังหน้าอื่นๆ ในขณะที่หน้า Landing Page หลังคลิกมีตัวเลขเฉพาะเพื่อพิสูจน์ประสิทธิภาพของเครื่องมือ

หน้าแรก:

หน้า Landing Page หลังคลิก:

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

หน้าแรก:

หน้า Landing Page หลังคลิก:

ในหน้าแรก เรานับมากกว่า 80 ลิงก์ไปยังหน้าอื่นที่ไม่ใช่ CTA ในหน้า Landing Page หลังการคลิก มี 2 แบบ ถึงกระนั้น สองก็มากเกินไป อัตราส่วนของลิงก์ไปยังปุ่ม CTA (หรือที่เรียกว่า "อัตราส่วน Conversion") ในหน้า Landing Page หลังการคลิกควรเป็น 1:1 เสมอ

ลองมาดูตัวอย่างอื่น คราวนี้จาก FreshBooks อันดับแรก หน้าแรกของพวกเขา ครึ่งหน้าบน:

ตอนนี้ หนึ่งในหน้า Landing Page หลังการคลิกของบริษัท อยู่ในครึ่งหน้าบน:

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

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

นี่คือภาพหน้าจอจากหน้าแรก:

และนี่คือส่วนหนึ่งจากหน้า Landing Page หลังการคลิก:

อย่าปล่อยให้ความขัดแย้งของการเลือกเข้ามา

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

ในร้านอาหารที่เป็นหน้า Landing Page หลังคลิก CTA คือรายการเมนูของคุณ เสนอให้ผู้เยี่ยมชมของคุณเลือกเท่านั้น FreshBooks ทำเช่นนั้นด้วยคำกระตุ้นการตัดสินใจ "ลองใช้ฟรี" ตลอดทั้งหน้า

ในหน้าแรกของพวกเขา FreshBooks เสนอ CTA หลายรายการแก่ผู้เยี่ยมชม ซึ่งถือว่าใช้ได้ "CTA รอง" เหล่านี้เช่น "เรียนรู้เพิ่มเติม" ช่วยให้ผู้มีโอกาสเป็นลูกค้าพบคำตอบสำหรับคำถามของพวกเขา และหากได้รับการออกแบบมาอย่างถูกต้อง พวกเขาก็จะไม่หันเหความสนใจจาก CTA หลักมากเกินไป

คุณมองเห็นคำกระตุ้นการตัดสินใจหลักและคำกระตุ้นการตัดสินใจสำรองในหน้านี้หรือไม่

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

หน้าแรกเน้นที่การให้ข้อมูลและให้อำนาจแก่ผู้เยี่ยมชมมากกว่า ในขณะที่หน้า Landing Page หลังการคลิกเน้นที่ การโน้มน้าว ผู้เยี่ยมชม

เป้าหมายของผู้เยี่ยมชมโฮมเพจทุกคนเราไม่สามารถทราบได้อย่างแน่นอน เป้าหมายของผู้เยี่ยมชมหน้า Landing Page หลังการคลิกคือ? มันคือการตัดสินใจ สร้างหน้า Landing Page หลังการคลิกที่ถูกต้องตามหลักกายวิภาคเพื่อช่วยพวกเขาทำ

2. หน้าแรกเป็นไปตามแนวทางที่เรียบง่ายของหน้า Landing Page หลังการคลิก

แม้ว่าเป้าหมายเฉพาะของพวกเขาอาจแตกต่างกัน แต่ในวิธีพื้นฐานหนึ่ง ผู้เข้าชมหน้า Landing Page หลังการคลิกและผู้เยี่ยมชมหน้าแรกต้องการสิ่งเดียวกัน Sergie Magdalin หัวหน้าเจ้าหน้าที่ออกแบบเว็บไซต์ของ Webflow อธิบายว่า:

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

นั่นเป็นเหตุผลหนึ่งที่ทำให้เปลี่ยนจากการออกแบบ skeuomorphic ไปสู่ ​​​​"ประจบ" แนวทางการออกแบบที่เรียบง่ายกว่า ... "

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

การออกแบบเพจเริ่มเปลี่ยนไป

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

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

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

นั่นคือสิ่งที่ทำให้พวกเขามีประสิทธิภาพในการเปลี่ยนใจเลื่อมใส พวกเขาเน้นเนื้อหาด้วยเลย์เอาต์ที่เรียบง่าย และตอนนี้โฮมเพจก็เริ่มทำเช่นเดียวกัน ดูหน้า Landing Page หลังการคลิกของ Autopilot:

ตอนนี้ดูที่หน้าแรกของพวกเขา:

ค่อนข้างคล้ายกันใช่มั้ย? คลิกผ่านและเลื่อนลงเพื่อดูว่าการออกแบบมีความคล้ายคลึงกันแม้จะอยู่ครึ่งหน้าล่าง

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

3. ทั้งหน้า Landing Page หลังการคลิกและหน้าแรกของเว็บไซต์จะต้องแนะนำผู้เยี่ยมชมด้วยลำดับชั้นภาพ

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

บนเว็บนี้เรียกว่ารูปแบบ F-shape:

เพื่อให้ผู้อ่านได้ดูเนื้อหาที่สำคัญที่สุดของคุณ คุณจะต้องสร้างสิ่งที่เรียกว่า "ลำดับชั้นของภาพ" ตามวิธีที่ผู้คนชอบอ่าน ควรมีลักษณะดังนี้:

1. ใช้รูปภาพที่ดึงดูดความสนใจและพาดหัวข่าวขนาดใหญ่เพื่อดึงดูดผู้อ่านของคุณ
2. แบ่งเนื้อหาของหน้าด้วยหัวข้อย่อย
3. ใช้หัวข้อย่อยเพื่อดึงดูดความสนใจไปยังองค์ประกอบในรายการ เช่น คุณลักษณะและประโยชน์
4. ใช้สำเนาเนื้อหาภายในหัวข้อย่อยและหัวข้อย่อยเหล่านั้นเพื่ออธิบายอย่างละเอียดโดยสังเขป

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

ตัวอย่าง

นี่คือตัวอย่างลำดับชั้นภาพที่ดี:

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

ตัวอย่างลำดับชั้นภาพที่ไม่ดี

ต่อไปนี้คือตัวอย่างของลำดับชั้นภาพที่ไม่ดี:

หน้านี้มีพาดหัว หัวเรื่องย่อย หัวข้อย่อย และแม้แต่อินโฟกราฟิก เกิดอะไรขึ้น

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

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

นี่คือโฮมเพจที่สร้างลำดับชั้นภาพที่ดี (คลิกที่นี่เพื่อดูโฮมเพจแบบเต็ม):

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

นี่คือตัวอย่างของลำดับชั้นภาพหน้าแรกที่ไม่ดี (คลิกที่นี่เพื่อดูหน้าแรกแบบเต็ม):

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

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

หน้าแรกของเว็บไซต์และหน้า Landing Page มีความเหมือนกันมากกว่าที่คุณคิด

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

การสร้างหน้า Landing Page หลังการคลิกไม่เคยง่ายขนาดนี้มาก่อน จนถึงตอนนี้ ดังนั้น ลงทะเบียนสำหรับการสาธิต Instapage Enterprise วันนี้