KNOWLEDGE

คลังข้อมูล รวบรวมบทความที่เป็นประโยชน์ และคำถามที่พบบ่อย

Question Hero Title ให้เว็บไซต์คุณได้แนะนำตัว

ก่อนอื่นต้องบอกก่อนเลยว่าเทรนด์เว็บดีไซน์สมัยนี้มักนิยมใช้ cover image ใหญ่ๆ ในการออกแบบหัวเว็บไซต์ อย่างแรกคือเพราะว่ามันง่าย ช่วยให้นักพัฒนาหรือเขียนเว็บไซต์ในส่วนนี้ได้อย่างรวดเร็วโดยไม่ต้องใส่ element อะไรลงไปมาก อีกทั้งยังช่วยให้ผู้เข้าเว็บไซต์ส่วนใหญ่เข้าใจถึงสิ่งที่เรา หรือบริษัทนั้นๆ ต้องการจะสื่อสารออกมาได้ดีกว่าแบบเก่า

ก็แน่นอนละครับ เมื่อ element ต่างๆ มีน้อย การกวาดสายตาเข้ามาในตอนแรกก็ทำได้สบาย ไม่ต้องไปมองจุดนั้นก่อน จุดนี้ทีหลัง เรามาดูตัวอย่างเว็บไซต์ที่ใช้ hero image กันหน่อยครับ

hero image 1

woothemes-woocommerce-landing-hero-image

01-daniel-filler-portfolio-design

kinhr-kin-clean-legible-homepage

themetrust-website-branding-design

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

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

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

Aerofs
Aerofs website

ผมพึ่งรู้จักเว็บไซต์ aerofs ได้ไม่นานจากลิงค์ที่แนะนำกันมาผ่านกลุ่มใน facebook อ่านชื่อเว็บไซต์ครั้งแรกก็ยังไม่ค่อยเข้าใจเท่าไหร่ว่า aerofs เนี่ยหมายถึงอะไร สร้างสินค้าหรือบริการอะไร เลยลองเปิดเข้าไปดู ทันทีที่ได้อ่าน Hero Title ของเว็บไซต์นี้ที่เขียนว่า “Like Dropbox but behind your firewall” ก็พอจะเข้าใจแล้วก็นึกภาพคร่าวๆ ออกแล้ว ที่เหลือก็เป็นหน้าที่ของวิดีโอด้านข้างที่ช่วยให้เข้าใจการทำงานมากขึ้นเท่านั้นเอง

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

tenslife
tenslife

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

Hero Title ให้เว็บไซต์คุณได้แนะนำตัว
Black Ribbon