ฮีโร่เซกชัน · หน้าจอแรก

ฮีโร่เซกชันควรมีอะไรบ้าง

ฮีโร่เซกชันมีแค่ 3 อย่างก็พอ คือ “ที่นี่ทำอะไร” “ทำไมต้องที่นี่” และ “ตอนนี้ต้องทำอะไร” ลูกค้าต้องตัดสินได้จากหน้าจอแรกว่าจะดูต่อหรือติดต่อมา

ใส่เยอะไม่ได้แปลว่าดีขึ้น ยิ่งองค์ประกอบมาก แต่ละอย่างก็ยิ่งเห็นน้อยลง จึงควรแยกสิ่งที่จำเป็นจริง ๆ ออกจากสิ่งที่ย้ายลงไปด้านล่างได้

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

ลูกค้าตัดสินจากหน้าจอแรกจริงหรือ

ไม่ได้ดูแค่หน้าจอแรก แต่หน้าจอแรกเป็นจุดที่อยู่นานที่สุดจริง งานวิจัยติดตามสายตาที่ Nielsen Norman Group เผยแพร่ในปี 2018 พบว่าเวลาราว 57% ของการดูหน้าจอ ไปอยู่ที่ส่วนก่อนเลื่อนลง

ในงานวิจัยเดียวกัน 2 หน้าจอแรกกินเวลาดูราว 74% หมายความว่าลูกค้าเลื่อนลงก็จริง แต่ยิ่งลงไปข้างล่างยิ่งดูละเอียดน้อยลง

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

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

เขียนข้อความฮีโร่อย่างไร

พื้นฐานของข้อความฮีโร่คือใช้คำที่ลูกค้าใช้ตอนค้นหา และใส่ประเภทธุรกิจ · ย่าน · จุดเด่นไว้ในประโยคเดียว คำที่เข้าใจได้ทันทีอ่านง่ายกว่าคำที่ฟังดูเท่

ลองเขียนตามลำดับด้านล่าง ร้านส่วนใหญ่จะได้ข้อความที่ใช้ได้ อย่าพยายามเขียนให้สมบูรณ์ตั้งแต่แรก ทำไว้ 2–3 แบบแล้วเปรียบเทียบ

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

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

1. 01เขียนคำที่ลูกค้าน่าจะใช้ค้นหาร้านเรา (เช่น “สั่งเค้ก มังวอนดง” “ตัดผมเลเยอร์ ฮงแด”)
2. 02จากคำเหล่านั้น ทำหัวข้อใหญ่สั้น ๆ ที่มีประเภทธุรกิจและย่าน
3. 03เติมคำอธิบายเล็ก ๆ หนึ่งบรรทัด บอกจุดที่ต่างจากร้านอื่นหนึ่งอย่าง (เช่น “สั่งได้ภายในวัน” “ปรึกษาแบบ 1:1 ก่อนทำ”)
4. 04ตั้งข้อความบนปุ่มเป็นการกระทำของลูกค้า (เช่น “สอบถามการจองเค้ก” “ดูช่วงเวลาว่าง”)
5. 05ลองใส่ในหน้าจอมือถือ ถ้าขึ้นบรรทัดใหม่เยอะเกินไปให้ตัดคำลง
6. 06ให้คนที่ไม่รู้จักร้านดู 5 วินาที แล้วถามว่า “ที่นี่น่าจะทำอะไร”

ใส่รูปหรือวิดีโอใหญ่ ๆ ไว้ในหน้าจอแรก จะทำให้ช้าไหม

ถ้าไม่ดูแลก็จะช้า รูปใหญ่ในหน้าจอแรกมักเป็นองค์ประกอบที่ใหญ่ที่สุดบนหน้าจอ จึงสะท้อนตรง ๆ ในตัวชี้วัด LCP (เวลาที่เนื้อหาที่ใหญ่ที่สุดแสดงผล) ที่ Google ใช้วัดความเร็วการโหลด

ตามคำแนะนำของ web.dev ถ้า LCP ไม่เกิน 2.5 วินาทีถือว่า “ดี” พื้นฐานคือย่อรูปในหน้าจอแรกให้พอดีกับขนาดหน้าจอ เปลี่ยนเป็นฟอร์แมตที่เบา และไม่ตั้งให้โหลดทีหลัง (Lazy loading) กับรูปนี้

ความเร็วบนมือถือจะช้ากว่าคอมพิวเตอร์ และบนอินเทอร์เน็ตมือถือจะช้ากว่า Wi-Fi เวลาตรวจหน้าจอแรก การปิด Wi-Fi แล้วเปิดด้วยมือถือเองใกล้เคียงมุมของลูกค้าที่สุด

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

หน้าจอแรกของแต่ละธุรกิจจัดอย่างไร

แต่ละธุรกิจ ลูกค้าอยากตรวจสิ่งต่างกันในหน้าจอแรก รูปและปุ่มจึงต้องเลือกให้สอดคล้อง ด้านล่างเป็นรูปแบบที่ร้านเล็กนิยมใช้

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

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

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

• คาเฟ่: รูปบรรยากาศร้านหรือเครื่องดื่มเด่น “คาเฟ่กาแฟดริปย่านยอนนัมดง · เปิดทุกวัน 10:00–22:00 น.” ปุ่ม “นำทาง”
• ร้านทำผม: รูปผลงานจริง “3 นาทีจากสถานีฮับจอง · เชี่ยวชาญดัดผมแบบผมเสียน้อย” ปุ่ม “จองตามช่างผม”
• ร้านงานฝีมือ: รูปมือระหว่างเรียน “คลาสปั้นเซรามิกวันเดียวช่วงสุดสัปดาห์” ปุ่ม “ดูตารางเดือนนี้”
• ขายออนไลน์: รูปสินค้าเด่น “กราโนลาโฮมเมดอบเอง · จัดส่งทั่วประเทศ” ปุ่ม “ไปดูสินค้า”

ความผิดพลาดที่พบบ่อยในหน้าจอแรกมีอะไรบ้าง

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

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

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

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

ดูแบบร่างหน้าจอแรก ควรถามบริษัทรับทำเว็บไซต์อะไรบ้าง

เมื่อได้แบบร่างแล้ว ให้ถาม 4 ข้อด้านล่างนี้ ถ้าได้คำตอบโดยยึดหน้าจอมือถือเป็นหลัก งานแก้หลังเปิดเว็บไซต์จะลดลง

• ในหน้าจอแรกบนมือถือ เห็นปุ่มโดยไม่ต้องเลื่อนหรือไม่
• ตรวจขนาดไฟล์และความเร็วโหลดของรูปหน้าจอแรกให้หรือไม่
• ตัวอักษรบนรูปยังอ่านง่ายแม้เป็นรูปสว่างหรือไม่
• ถ้าใช้สไลด์ ลูกค้าหยุดหรือเลื่อนเองได้หรือไม่