6 ตัวอย่างการออกแบบโฮมเพจที่ดีเพื่อเพิ่มคอนเวอร์ชั่น

เผยแพร่แล้ว: 2019-07-05

6 ตัวอย่างการออกแบบโฮมเพจที่ดีสำหรับการแปลงที่เพิ่มขึ้น 1 1

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

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

ในแง่นั้น มันเหมือนกับ ป้ายบอก ทางมากกว่าหนังสือ

หน้าแรกมีอยู่ด้วยเหตุผลสองประการ:

  • เพื่อสร้างความไว้วางใจ (เพื่อให้ผู้เข้าชมอยู่รอบ ๆ ไซต์) และ
  • เพื่อนำผู้เยี่ยมชมออกจากหน้าแรก (เพื่อให้พวกเขาสามารถเจาะลึกและค้นหาสิ่งที่ต้องการได้)

เพื่อให้โฮมเพจทำในสิ่งที่ตั้งใจจะทำ ต้องทำสามสิ่งให้สำเร็จเมื่อผู้เยี่ยมชมมาถึง:

  • ทำให้ผู้เข้าชม รู้สึกว่ามาถูกที่แล้ว
  • ทำให้ผู้เยี่ยมชม รู้สึกดีกับเว็บไซต์
  • ทำให้ ชัดเจนว่าผู้เยี่ยมชมควรทำอะไรต่อไป

ต่อไปนี้คือตัวอย่างโฮมเพจที่ประสบความสำเร็จในเรื่องนี้และวิธีดำเนินการ

1. PDFfiller

PDFfiller.com - example of good homepage design

การออกแบบหน้าแรกของ PDFfiller นั้นสามารถสื่อถึงสิ่งที่เป็นเว็บไซต์ได้ทันทีเมื่อผู้เยี่ยมชมมาที่นี่:

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

หน้านี้มีองค์ประกอบความน่าเชื่อถือที่น่าสนใจ โดยใช้ประโยชน์จาก หลักฐานทางสังคม โดยระบุว่ามีการกรอก ลงชื่อ และส่งแบบฟอร์มจำนวนมากผ่านบริการนี้

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

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

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

ที่ครึ่งหน้าล่างขวา หน้าจะระบุ ประโยชน์ ของการใช้บริการ

คำรับรองจากลูกค้า การให้คะแนน และการรับประกันคืนเงิน/ ตราประทับการรักษาความปลอดภัยก็มีให้เช่นกัน สิ่งเหล่านี้ช่วย สร้างความไว้วางใจและความน่าเชื่อถือ

ที่ด้านล่างสุด หน้ามีจุดเริ่มต้นการทำงานที่แตกต่างกัน หากผู้ใช้ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งที่พวกเขาสามารถทำได้กับเอกสารของตนผ่าน PDFfiller

2. นิราจุ

NyrajuSkinCare.com: Example of good homepage design - functional tagline and headline, CTA color that pops, composite images of products to represent product categories

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

หน้านี้ทำให้ผู้เยี่ยมชมรู้สึกดีเกี่ยวกับไซต์โดยวางองค์ประกอบความน่าเชื่อถือไว้ด้านหน้าและตรงกลาง:

  • หมายเลขโทรศัพท์อยู่ในตำแหน่งมาตรฐาน – ผู้ใช้คาดหวังให้อยู่ที่ส่วนบนขวาของหน้า
  • โลโก้ของบริษัทสื่อที่มีการกล่าวถึง Nyraju จะปรากฏที่ครึ่งหน้าบน
  • รับประกันการช้อปปิ้งที่ปลอดภัย 100% การรับประกันการช้อปปิ้งของ Norton และ Yahoo! มีตราประทับ Live Store Secure Site

เช่นเดียวกับ PDFfiller Nyraju ยังใช้ สี CTA ที่ตัดกับส่วนที่เหลือของหน้า นอกจากปุ่ม CTA แล้ว สีเขียวยังใช้กับหมายเลขโทรศัพท์อีกด้วย สิ่งนี้ทำให้หมายเลขโทรศัพท์โดดเด่น และมีประสิทธิภาพมากขึ้นในฐานะองค์ประกอบที่น่าเชื่อถือ

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

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

ค้นหาว่า SiteTuners ช่วยให้ Nyraju Skin Care เพิ่ม Conversion ได้มากถึง 277% ได้อย่างไร

อ่านกรณีศึกษา

3. โรเซตต้าสโตน

RosettaStone.com: Example of good homepage design - clear USP, establishes authority, caters to top to mid of the funnel visitors, visible benefit statements

Rosetta Stone ทำให้ ข้อเสนอการขายที่เป็นเอกลักษณ์ ของพวกเขาชัดเจนในทันทีด้วยพาดหัวและเนื้อหาของข้อความด้านล่าง

ผู้เข้าชมมีแนวโน้มที่จะรู้สึกดีกับไซต์นี้เนื่องจากรูปลักษณ์ที่ทันสมัย

บริษัทยังสามารถ จัดตั้งอำนาจ โดยแสดงตราประทับ Editor's Choice ของ PCMAG.com ไว้เหนือครึ่งหน้าอย่างเด่นชัด และระบุว่าแบรนด์ได้รับรางวัล "ซอฟต์แวร์ภาษาที่ดีที่สุด" 7 ปีติดต่อกัน

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

  • “ลองใช้การสาธิต” สำหรับผู้เข้าชมช่วงต้นถึงกลางและ
  • “ช้อปเลย” สำหรับคนพร้อมลุย

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

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

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

4. Uber

Uber.com: Example of good homepage design - distinct user tasks, pathway for early stage visitors

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

ข้อดีของโฮมเพจของ Uber คือวิธีที่ผู้ใช้สามารถดำเนินการ ต่างๆ ได้ โดยมีตัวเลือกที่แตกต่างกันออกไป (เช่น “รับเงิน” “ขี่” “กิน” เป็นต้น)

นอกจากนี้ยังเหมาะสำหรับทั้งผู้เข้าชมช่วงปลายที่พร้อมจะ "ลงทะเบียน" และผู้เข้าชมในระยะเริ่มต้นผ่านลิงก์ข้อความ "เรียนรู้เพิ่มเติมเกี่ยวกับการขับรถและการส่งมอบ"

ผู้เข้าชมเว็บส่วนใหญ่ไม่พร้อมที่จะแปลง เรียนรู้วิธีให้บริการแก่ผู้เยี่ยมชมระดับแนวหน้า

อ่าน “การจัดเลี้ยงสำหรับผู้เข้าชมระยะเริ่มต้นเพื่อปรับปรุงการแปลง”

5. บีแอนด์โฮ

BHPhotoVideo.com: Example of good homepage design - follows web conventions, establishes leadership, employs scarcity principle, uses visual navigation with a collage of products to represent categories

B&H ปฏิบัติตามข้อตกลงทางเว็บ โดยวางโลโก้บริษัทที่มุมซ้ายบนและหมายเลขโทรศัพท์ที่มุมบนขวาของหน้า

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

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

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

6. FreshBooks

FreshBooks.com: Example of good homepage design - directs user attention to the CTA, borrows trust from media companies, presents CTA in every screenful

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

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

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

หน้าเว็บนี้เหมาะสำหรับผู้เข้าชมที่อยู่ในระดับแนวหน้าของช่องทางโดยมี CTA “เรียนรู้เพิ่มเติม” (แม้ว่าจะอยู่ครึ่งหน้าล่าง) ตลอดทั้งหน้า

การมี CTA ในทุกหน้าจอยังช่วยให้ผู้ใช้ดำเนินการได้ไม่ว่าพวกเขาจะอยู่ที่ใดบนหน้า

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

  • แทนที่จะแสดงย่อหน้า ข้อมูลสามารถนำเสนอใน หัวข้อย่อย
  • คำที่มีข้อมูลสำคัญสามารถเป็น ตัวหนา ได้ จึงเน้นไว้

ทำให้การออกแบบหน้าแรกเป็นศูนย์กลางการแปลง

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

มีบางสิ่งที่คุณสามารถทำได้เพื่อให้แน่ใจว่าสิ่งนี้จะเกิดขึ้น:

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

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

ส่วนท้ายของบล็อก Cta1