KNOWLEDGE

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

Question ศาสตร์ของการชี้ การนำสายตา

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

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

แล้วมันเกี่ยวกับเว็บไซต์ได้ยังไงล่ะครับ ทำไมเรื่องนี้ถึงต้องคำนึงถึงเวลาสร้าง หรือ measurement ด้วย?

ผมขอยกตัวอย่างรูปภาพจาก Facebook นะครับ เผื่อจะเห็นภาพกันง่ายขึ้น

facebook-arrow-user-experience

สังเกตุเห็นอะไรที่ต่างไปบ้างมั้ยครับ..

facebook-arrow-ux

เพียงลูกศรเล็กๆ จุดเดียวก็ถือว่าส่งผลต่อประสบกาณ์ของผู้ใช้ได้เลย จากรูปด้านซ้ายในจุดที่ 1 เนี่ย ถ้าเราหรือผู้ใช้คนไหนไม่ได้เล่น Facebook บ่อยๆ หรือเล่นเป็นมาก่อน พอมาเจอรูปด้านซ้ายก็ยังพอเข้าใจได้ว่า “อ๋อ ไอ้ที่มีรูปมือ แล้วมีลิงค์ชื่อคนเยอะๆ นี่น่าจะเป็นจำนวนคนที่มาชอบโพสต์นี้นี่เอง” กลับกันในรูปที่ 2 ที่ไม่มี สามเหลี่ยมชี้ไปที่ Like

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

kaidee dot com

ซึ่งเหตุผลที่ Kaidee นั้นเลือกชี้ไปที่ปุ่ม “อยากขาย” แล้วก็ทำวงกลมใหญ่กว่าอีกหมวด นั่นก็เป็นเพราะต้องการให้ผู้ใช้ทำ action “ขาย” มากกว่ามา “หาซื้อ” นั่นเองครับ

แค่ชี้เท่านั้นเองหรอ?

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

โปสเตอร์โฆษณา Maybelline
โปสเตอร์โฆษณา Maybelline
โปสเตอร์โฆษณา B'olisi
โปสเตอร์โฆษณา B’olisi

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

นำมาใช้กับเทรนด์เว็บไซต์ยุคปัจจุบัน

เว็บไซต์ในสมัยนี้เน้นการใช้งานแบบ big header, hero image มากขึ้น ซึ่งถ้าเราเข้ามาที่หน้าแรกแล้วก็จะเห็นเป็น intro บ้าง มี tagline บ้าง(ดูตัวอย่างได้จากบทความก่อน Hero Title ให้เว็บไซต์คุณได้แนะนำตัว) ซึ่งคนที่ใช้เว็บไซต์ในรูปแบบนี้อยู่อาจจะเจอปัญหาที่ว่า ผู้ใช้ “ไม่รู้” ว่าเลื่อนลงมาได้ หรือไม่ได้เลื่อนลงมาดูเนื้อหาด้านล่างเลย เพราะคิดว่าหน้าเว็บไซต์มีอยู่แค่นั้น

scrolling website
ตัวอย่างเว็บไซต์ 1

จากตัวอย่างเว็บไซต์ 1 ข้างต้นนี้ ที่จริงแล้ว scroll ต่อลงมาดูเนื้อหาด้านล่างได้อีกเยอะเลยครับ แต่ทันทีที่เห็นครั้งแรก ผมก็คิดเลยว่าเนื้อหาน่าจะจบที่ตรงนี้ แล้วให้คลิกเพื่อไปยัง action ถัดไป ก็ดันเล่นมี footer มาให้ แถมหมายเลขด้านซ้ายก็นึกว่าเป็น indicator ของ carousel อีกตะหาก  ผมจำลิงค์เว็บไซต์ไม่ได้ เสียดายเลยไม่ได้แปะลิงค์ไว้ให้เข้าไปดู แต่ในเว็บตัวอย่างนั้น scroll ลงมาต่อได้ครับ แล้วก็มีหลาย section เลยด้วย

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

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

Huge Web Design
Huge Website
aForm Website
aForm Website

หรือบางเว็บก็ใส่ text ลงไปตรงๆ เลย ไม่ต้องมีอะไรซับซ้อน

scroll for you health website
scroll for you health website

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

everybody scrolls
ภาพประกอบ: everybody scrolls, HughInc

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

พูดคุยกับทีมงาน Messenger Icon