มีไอเดีย
แต่ไม่มีคนทำ?

ให้ จินดาธีม สร้างแพลทฟอร์มสำหรับธุรกิจของคุณ

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

หมวดหมู่: ประสบการณ์ผู้ใช้ เขียนเมื่อ: 27/03/2015

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

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

ปุ่มนั้นก็สำคัญไม่แพ้ส่วนอื่นบนหน้าเว็บไซต์เลย คิดเสียว่าปุ่มคือ 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

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

เรื่องที่คุณอาจสนใจ

image

อยากมีระบบชำระเงินบนเว็บไซต์, แอปฯ ต้องคำนึงถึงอะไรบ้าง?

ช่วงหลังโควิดนี้เป็นช่วงที่อุตสาหกรรมไอทีกลับมาบูมอีกครั้ง หลายธุรกิจมีการเปลี่ยนแปลงทั้งโครงสร้า... อ่านต่อ >
image

ข้อเสียบางอย่างเมื่อซื้อธีม WordPress มาใช้

WordPress ถือเป็น CMS ที่ได้รับความนิยมในการทำเว็บไซต์อย่างต่อเนื่อง ด้วยการตั้งค่าที่รวดเร็ว มีร... อ่านต่อ >
image

PDPA – กฏหมายข้อมูลส่วนบุคคล เว็บไซต์ของคุณพร้อมหรือยัง?

หลายคนอาจจะเคยได้ยิน "GDPR" กันมาบ้าง ซึ่งเป็นกฏหมายคุ้มครองข้อมูลส่วนบุคคลของชาวยุโรป ซึ่งบังคั... อ่านต่อ >

กรุณากรอกรายละเอียดให้ครบ

ทีมงานจะทำการประเมินค่าใช้จ่าย และสร้างใบเสนอราคาตามรายละเอียดที่คุณกรอกมาด้านล่างนี้

การแจ้งเตือน

เจ้าหน้าที่ได้รับข้อความของท่านเรียบร้อยแล้ว

preloader

กำลังดำเนินการ กรุณารอสักครู่นะครับ