ปรับปุ่มลอยสอบถามให้ดีขึ้น: ตำแหน่ง ข้อความ จังหวะการแสดง และการรองรับมือถือ

ตำแหน่งปุ่มลอยสอบถามกับประสิทธิภาพการแปลง: มุมขวาล่างในโซนนิ้วโป้งดีที่สุด มือถือต้องปรับขนาดและแผงขยายแยกต่างหาก

ปรับปุ่มลอยสอบถามให้ดีขึ้น: ตำแหน่ง ข้อความ จังหวะการแสดง และการรองรับมือถือ

สรุปก่อน: ปุ่มลอยสอบถามถ้าใช้ถูกจะเพิ่มจำนวนสอบถามบนหน้าถึง 15% ถึง 25% แต่ถ้าใช้ผิดจะบังเนื้อหาและลดประสบการณ์ผู้ใช้ วิธีหลัก: ตรึงปุ่มไว้มุมขวาล่างในโซนนิ้วโป้ง ใช้ข้อความ “ขอใบเสนอราคา” แทน “ติดต่อเรา” แล้วค่อยแสดงหลังเลื่อน 30%; บนมือถือปุ่มมีเส้นผ่านศูนย์กลาง 48 ถึง 56px แผงขยายใช้แบบลิ้นชักด้านล่างไม่ใช่ป๊อปอัปเต็มจอ; ในหน้าฟอร์ม หน้าบทความ และหน้าที่มีทางเข้าสู่การแปลงอยู่แล้ว ให้ซ่อนปุ่มโดยสมัครใจเพื่อไม่ให้แข่งกันเอง

หนึ่ง: เส้นฐานการแปลงของปุ่มลอย: ตำแหน่งกำหนดการคลิก

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

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

ตำแหน่ง	อัตราการคลิกบนเดสก์ท็อป	อัตราการคลิกบนมือถือ	การบังเนื้อหา	คำแนะนำ
มุมขวาล่าง	2.5% ถึง 4%	4% ถึง 6%	ไม่บังเนื้อหา	ตำแหน่งแรกที่แนะนำ
มุมซ้ายล่าง	2% ถึง 3.5%	3% ถึง 5%	ไม่บังเนื้อหา	ตัวเลือกรอง เหมาะกับคนถนัดซ้าย
มุมขวาบน	0.8% ถึง 1.5%	1% ถึง 2%	บังแถบนำทาง	ไม่แนะนำ
ลอยกลางจอ	0.5% ถึง 1%	0.8% ถึง 1.5%	บังเนื้อหาหลัก	ไม่แนะนำอย่างยิ่ง
แถบติดล่างเต็มความกว้าง	1.5% ถึง 2.5%	2.5% ถึง 4%	บังเนื้อหาด้านล่าง	ใช้ได้บนมือถือ ไม่แนะนำบนเดสก์ท็อป

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

สอง: ข้อความบนปุ่ม: จาก “ติดต่อเรา” สู่ “ขอใบเสนอราคา”

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

ก็อปปี้ที่ดีควรบอกผลลัพธ์ตรงๆ “ขอใบเสนอราคา” มีอัตราคลิกสูงกว่า “ติดต่อเรา” 2 ถึง 3 เท่า เพราะระบุชัดว่าคลิกแล้วจะได้อะไร ก็อปปี้ที่เน้นผลลัพธ์แบบ “ดาวน์โหลดตารางสเปก” “จองเดโม 15 นาที” “ดูเคสในอุตสาหกรรมเดียวกัน” ล้วนมีอัตราคลิกสูงกว่า โทนข้อความบนปุ่มดูตัวอย่างได้จาก แนวทางโทนข้อความสำหรับเว็บไซต์แบรนด์ B2B。

ประเภทข้อความ	ตัวอย่าง	อัตราคลิกที่คาดหวัง	หน้าที่ใช้
เน้นผลลัพธ์	“ขอใบเสนอราคาวันนี้”	3% ถึง 5%	หน้าสินค้า หน้าที่ไวต่อราคา
เน้นทรัพยากร	“ดาวน์โหลดตารางสเปก PDF”	2.5% ถึง 4%	หน้ารายละเอียดสินค้า หน้าเอกสารเทคนิค
เน้นการจอง	“จองเดโม 15 นาที”	2% ถึง 3.5%	หน้าโซลูชัน หน้า Demo
เน้นเคส	“ดูเคสในอุตสาหกรรมเดียวกัน”	1.5% ถึง 3%	หน้า About หน้าโซลูชัน
เน้นอธิบายการกระทำ	“ติดต่อเรา / Contact Us”	0.8% ถึง 1.5%	ไม่แนะนำให้ใช้

ก็อปปี้ยังมีรายละเอียดอีกอย่าง: ข้อความบนปุ่มยิ่งสั้นยิ่งดี บนเดสก์ท็อปใส่ไอคอนบวกข้อความสั้นหนึ่งบรรทัดได้ บนมือถือใส่ได้แค่ข้อความสั้นไม่เกิน 6 ตัวอักษร “ขอใบเสนอราคา” 4 ตัวอักษรกำลังพอดี “ติดต่อเราเพื่อรับข้อมูลเพิ่มเติม” ยาวเกินไป มือถือใส่ไม่ลง

สาม จังหวะการแสดง: อย่าเพิ่งเด้งขึ้นมาทันทีที่เข้าหน้า

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

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

จังหวะการแสดง	เงื่อนไขที่กระตุ้น	อัตราคลิกที่คาดหวัง	ความรู้สึกของผู้ใช้	คำแนะนำ
แสดงทันทีที่โหลดหน้า	DOM พร้อมแล้ว	1% ถึง 2%	ถูกรบกวน หงุดหงิด	ไม่แนะนำ
แสดงหลังอยู่ 3 วินาที	ทริกเกอร์ตามเวลา	1.5% ถึง 2.5%	พอรับได้	ทางเลือกสำรอง
แสดงหลังเลื่อน 30%	ทริกเกอร์ตามความลึกการเลื่อน	3% ถึง 5%	โผล่มาอย่างเป็นธรรมชาติ	ตัวเลือกแรก
แสดงหลังเลื่อน 70%	หลังอ่านลึกแล้ว	2% ถึง 3.5%	อ่านจบแล้วจึงโผล่	เหมาะกับหน้าเนื้อหา
หลังรู้ความตั้งใจผู้ใช้	ลังเลตอนโฮเวอร์/คลิก	3.5% ถึง 5.5%	กำลังพอดี	ตัวเลือกขั้นสูง

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

สี่ การปรับให้เข้ากับมือถือ: ขนาด ตำแหน่ง และแผงที่กางออก

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

เส้นผ่านศูนย์กลางปุ่มต้องอยู่ระหว่าง 48 ถึง 56 พิกเซล — เล็กเกินไปกดไม่โดน ใหญ่เกินไปบังเนื้อหา ห่างจากขอบจอ 16 ถึง 20 พิกเซล แผงที่กางออกใช้แบบ bottom sheet เลื่อนขึ้นจากด้านล่างของจอ ความสูงไม่เกิน 60% ของหน้าจอ ผู้ใช้กรอกไม่กี่ช่องได้โดยไม่ต้องเปลี่ยนไปหน้าเต็ม

รายการที่ต้องปรับ	มาตรฐานเดสก์ท็อป	มาตรฐานมือถือ	ผลถ้าไม่ผ่าน
เส้นผ่านศูนย์กลางปุ่ม	48 ถึง 64px	48 ถึง 56px	เล็กเกินไปกดไม่โดน ใหญ่เกินไปบังเนื้อหา
ระยะห่างจากขอบจอ	24px	16 ถึง 20px	ไกลเกินไปเอื้อมไม่ถึง ใกล้เกินไปชิดขอบ
วิธีกางออก	การ์ดเล็กเด้งมุมขวาล่าง	แผงแบบ bottom sheet	ป๊อปอัปเต็มจอมีอัตราปิดเกิน 80%
ความสูงของแผง	ความสูงอัตโนมัติ สูงสุด 300px	ไม่เกิน 60% ของหน้าจอ	สูงเกินไปเหมือนหน้าใหม่ ผู้ใช้ปิดทันที
การรองรับ safe area	ไม่ต้อง	หลบแถบ gesture ด้านล่าง	ปุ่มถูกแถบ gesture ของระบบบัง

มือถือยังมีปัญหาที่เจอบ่อยอีกอย่าง: ปุ่มแบบเต็มความกว้างด้านล่างชนกับแถบนำทางของระบบ หลายเว็บไซต์อิสระวางปุ่มสอบถามแบบตรึงด้านล่างบนมือถือ ผลคือถูก Home Indicator ของ iOS หรือแถบ gesture navigation ของ Android บัง ต้องใช้ env(safe-area-inset-bottom) ใน CSS เว้นระยะ safe area ไว้ การปรับประสิทธิภาพมือถือดูได้จาก Core Web Vitals เช็กลิสต์ตรวจสอบเฉพาะมือถือของ

ห้า、ข้อผิดพลาดที่พบบ่อยและเส้นแดง

ความเข้าใจผิด	วิธีที่ทำกันทั่วไป	ผลลัพธ์ที่ตามมา	วิธีที่ถูกต้อง
แสดงทุกหน้าทั่วทั้งเว็บ	ขึ้นทั้งหน้าแรก บล็อก หน้าแบบฟอร์ม	ปุ่มในหน้าแบบฟอร์มแย่ง conversion ของฟอร์ม	ซ่อนเองในหน้าแบบฟอร์มและหน้าเนื้อหา
ข้อความบนปุ่มเขียนว่า “ติดต่อเรา”	แบบที่ใช้กันทั่วไปที่สุด	อัตราคลิกต่ำกว่า 1.5%	ใช้ข้อความที่บอกผลลัพธ์: ขอใบเสนอราคา
แสดงปุ่มทันทีที่เข้าหน้า	ปรากฏทันทีที่หน้าโหลดเสร็จ	ผู้ใช้รู้สึกรบกวน อัตราคลิกต่ำ	ค่อย ๆ จางเข้ามาหลังเลื่อน 30%
มือถือใช้ป๊อปอัปเต็มจอ	กดปุ่มแล้วเด้งไปฟอร์มเต็มจอ	อัตราปิดเกิน 80%	แผงแบบ bottom sheet สูงครึ่งจอ
ปุ่มเล็กเกินไปกดไม่โดน	เอาไอคอน 32px ไปวางเลย	อัตราแตะผิดพลาดบนมือถือสูง	เส้นผ่านศูนย์กลาง 48 ถึง 56px
ปุ่มด้านล่างไม่ทำ safe area	ตรึงไว้ที่ก้นจอ	ถูกแถบ gesture ของระบบบัง	เพิ่ม env(safe-area-inset-bottom)

ในหกข้อผิดพลาดนี้ ข้อแรกคือข้อที่ซ่อนลึกที่สุด — หลายคนคิดว่าปุ่มลอยเป็น “ของมาตรฐานทั้งเว็บ” แต่พออยู่ในหน้าแบบฟอร์มกลับกลายเป็นตัวรบกวน: ผู้ใช้กรอกไปได้ครึ่งทาง เห็นปุ่มมุมขวาล่าง ชะงักนิดหนึ่ง แล้วก็ปิดหน้าไป ปุ่มลอยในหน้าแบบฟอร์มต้องซ่อน อย่าสร้างคู่แข่งให้ตัวเอง

FAQ คำถามที่พบบ่อย

ปุ่มสอบถามแบบลอยวางตำแหน่งไหนดีที่สุด?

มุมขวาล่างคือตำแหน่งแรกที่ควรเลือก บนเดสก์ท็อปมุมขวาล่างมีอัตราคลิก 2.5% ถึง 4% บนมือถือ 4% ถึง 6% เพราะมุมขวาล่างอยู่ในโซนนิ้วโป้งที่เอื้อมถึง เวลาผู้ใช้ใช้มือเดียว นิ้วโป้งจะตกลงตรงนั้นเองตามธรรมชาติ มุมซ้ายล่างเป็นตัวเลือกรอง เป็นมิตรกับผู้ใช้ที่ถนัดซ้าย มุมขวาบนเด่นที่สุดแต่มีอัตราคลิกแย่ที่สุด (0.8% ถึง 1.5%) เพราะบังแถบนำทาง ผู้ใช้จะปิดเป็นอย่างแรก ส่วนการลอยกลางจอแย่ที่สุด เพราะบังเนื้อหาหลักโดยตรง หลักการเลือกตำแหน่งคือ: ไม่บังเนื้อหา และอยู่ในจุดที่นิ้วโป้งหรือเมาส์ของผู้ใช้ตกลงตามธรรมชาติ

ข้อความบนปุ่มลอยแบบไหนเพิ่ม Conversion ได้สูงสุด?

ข้อความที่เน้นผลลัพธ์ได้ CTR สูงสุด: “ขอใบเสนอราคาวันนี้” ได้ 3% ถึง 5%, “ดาวน์โหลดตารางสเปก PDF” ได้ 2.5% ถึง 4%, “จองเดโม 15 นาที” ได้ 2% ถึง 3.5% ส่วนข้อความที่บอกแค่การกระทำ (ติดต่อเรา, Contact Us) ได้ CTR ต่ำสุดเพียง 0.8% ถึง 1.5% เพราะนักซื้อ B2B ไม่ได้สนใจว่าคุณให้เขาทำอะไร แต่สนใจว่ากดแล้วจะได้อะไรกลับมา ยิ่งข้อความปุ่มสั้นยิ่งดี บนมือถือไม่ควรเกิน 6 ตัวอักษรจีน เพราะยาวเกินจะใส่ไม่พอดี

ควรแสดงปุ่มลอยตอนไหนจึงจะดีที่สุด?

แนะนำให้แสดงหลังจากผู้ใช้เลื่อนหน้าจอลงไป 30% แล้วค่อยแสดง โดยใช้แอนิเมชันเฟดอิน 200 มิลลิวินาที ปุ่มที่แสดงทันทีที่หน้าโหลดได้ CTR เพียง 1% ถึง 2% เพราะผู้ใช้เพิ่งเข้ามายังไม่ได้เริ่มอ่านเนื้อหาก็ถูกปุ่มขัดจังหวะ ส่วนปุ่มที่แสดงหลังเลื่อน 30% ได้ CTR 3% ถึง 5% เพราะผู้ใช้กำลังอ่านเนื้อหาอย่างจริงจัง ปุ่มที่โผล่มาตอนนี้จึงเป็น “ตัวช่วยให้เขาสะดวก” ไม่ใช่ “ตัวรบกวน” ส่วนหน้าบทความเลื่อนไปได้ถึง 70% ค่อยแสดง เพราะเป้าหมายของหน้าบทความคือการอ่าน ไม่ใช่การสอบถามโดยตรง

ปุ่มลอยบนมือถือต้องปรับอย่างไร?

การปรับให้เข้ากับมือถือมี 3 เกณฑ์ตายตัว: เส้นผ่านศูนย์กลางปุ่ม 48 ถึง 56px, ห่างจากขอบจอ 16 ถึง 20px, แผงที่กางออกใช้แบบลิ้นชักจากด้านล่างและสูงไม่เกิน 60% ของหน้าจอ ห้ามใช้ป๊อปอัปเต็มจอเด็ดขาด เพราะป๊อปอัปเต็มจอบนมือถือมีอัตราการปิดเกิน 80% แผงแบบลิ้นชักจะเลื่อนขึ้นจากด้านล่างจอ ผู้ใช้กรอกไม่กี่ช่องได้โดยไม่ต้องเปลี่ยนไปหน้าใหม่ อีกอย่างต้องใส่ CSS env(safe-area-inset-bottom) เพื่อหลบแถบ gesture ของ iOS และ Android ไม่งั้นปุ่มจะถูกบังจนกดไม่ได้

หน้าไหนควรซ่อนปุ่มลอย?

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

ปุ่มลอยกับป๊อปอัปตอนจะออกจะชนกันไหม?

ชนกันแน่ ต้องประสานให้ดี ข้อแรก หลังจากผู้ใช้กดปุ่มลอยเปิดแผงแล้ว ป๊อปอัปเจตนาจะออกจะไม่ทำงานอีก เพื่อไม่ให้ช่องทาง Conversion สองอันแย่งคนพร้อมกัน; ข้อสอง ผู้เข้าชมที่เคยส่งคำถามผ่านปุ่มลอยแล้ว ภายใน 7 วันจะไม่แสดงปุ่มลอยอีก และไม่กระตุ้นป๊อปอัปเจตนาจะออกด้วย; ข้อสาม ข้อมูลการคลิกปุ่มลอยต้องติดแท็กแยกที่มา (floating-button) อย่ารวมสถิติกับเส้นทางฟอร์มปกติ ประสานดีแล้วทั้งสองจะเป็นส่วนเสริมกัน: ปุ่มลอยคือช่องทางประจำ ป๊อปอัปเจตนาจะออกคือตัวสำรองตอนสุดท้าย

ทิ้งท้าย

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

สี่ขั้นตอนลงมือทำ: อย่างแรกตรึงปุ่มไว้มุมขวาล่าง เลี่ยงทุกหน้าที่มีช่องทางConversionอยู่แล้ว จากนั้นเปลี่ยนข้อความจาก “ติดต่อเรา” เป็นประโยคสั้นที่เน้นผลลัพธ์อย่าง “ขอใบเสนอราคา” ต่อมาตั้งจังหวะแสดงผลให้ค่อย ๆ ปรากฏหลังเลื่อน 30% สุดท้ายทำการปรับให้เข้ากับมือถือแยกต่างหาก ปุ่มขนาด 48 ถึง 56px แผงแบบดึงขึ้นจากด้านล่าง และการรองรับ Safe Area สามอย่างนี้ขาดอย่างใดอย่างหนึ่งไม่ได้

ประโยคที่จำได้ง่าย: ปุ่มลอยไม่ใช่ “พื้นที่โฆษณาที่อยู่ทุกที่” แต่เป็น “ประตูที่เปิดไว้ให้คนที่ยังลังเล” — ตำแหน่งอยู่ในโซนนิ้วโป้ง ข้อความบอกผลลัพธ์ชัดเจน จังหวะรอให้ผู้ใช้พร้อมก่อนแล้วค่อยปรากฏ ถึงจะเป็นตัวช่วยผลักดันConversion ไม่ใช่แหล่งรบกวน