KNOWLEDGE

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

Question คลิกฉันสิ.. ประสบการณ์ผู้ใช้กับปุ่มบนเว็บ

หากเว็บไซต์เป็นเหมือนบ้านที่อยู่บนโลกออนไลน์

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

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

ถ้าหนึ่งห้องเข้าผ่านหนึ่งประตูก็ปรกติ ไม่ต้องลังเลที่จะเปิด ไม่ต้องลังเลที่จะเข้า

UX Button cover image

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

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

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

  • action ที่อยากจะให้ผู้ใช้เข้าถึงได้ง่ายเหมือนเป็น positive action
  • action ที่ไม่ค่อยอยากให้ผู้ใช้คลิก หรือกดเสียเท่าไหร่ หรือ negative action

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

ผมทำปุ่มข้างล่างมาเป็นตัวอย่างให้ดูครับ

conversions-of-button

greyscale-ux-button

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

swap-button

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

color-filled-button

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

UX ที่ดีคือทำประตูให้ลูกค้าเข้าสู่ห้องน้ำได้อย่างสะดวก รวดเร็ว และไม่ต้องเปลือง state

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

button-study-case-1

button-study-case-2

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

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