UI Patternสอนเทคนิคน่ารู้ 10 วิธีออกแบบเว็บเพื่อความร่ำรวยแบบรุกฆาต By uiblogaziner August 27, 20154255 views ShareTweet 0 หนึ่งในตัววัดผลว่าเว็บของเรามีประสิทธิภาพ ไม่ใช่ดูที่เว็บสวยงามหรือไม่ แต่ขึ้นอยู่กับว่าเว็บของเราตอบโจทย์ยูสเซอร์และองค์กรได้มากน้อยแค่ไหน บริษัทจึงต้องดูค่าแปรเปลี่ยนเป็นกำไร (Conversion Rate) ในแต่ละการเปลี่ยนแปลงที่เกิดขึ้นบนหน้าเว็บ เพราะเป็นวิธีการเฝ้าติดตามผลลัพธ์ของงานออกแบบอันจะส่งผลต่อพฤติกรรมของลูกค้าและกำไรของบริษัท ซึ่งผมได้รวบรวมวิธีการออกแบบ UI หน้าเว็บที่จะช่วยเพิ่มตัวเลข Conversion rate ที่ใครๆ ก็สามารถทำได้ มาเริ่มหมากทั้ง 10 วิธีกันครับ 1. ใช้นางแบบ, นายแบบในหน้าแรก เปรียบเทียบเว็บแบบเดิมกับแบบที่ปรับมาใช้รูปคนเป็นพื้นหลัง เว็บ 37 Signals ได้ทำการทดลองเปลี่ยนรูปพื้นหลังหน้าสินค้า Highrise มาใช้เป็นรูปหญิงสาวหน้าตาน่ารัก ปรากฎว่า Conversion rate เพิ่มขึ้น 102.5% เหตุเพราะมนุษย์เรามีแนวโน้มที่จะจ้องมองหน้าตามนุษย์ด้วยกัน โดยเฉพาะดวงตาที่จ้องมองมาตรงๆ ที่เหมือนว่ากำลังพยายามสื่อสารและพูดคุยกับเรา จึงล่อยูสเซอร์ให้สนใจข้อมูลในหน้าเว็บ หากครั้งหน้าอยากเปลี่ยนหน้าหลักของเว็บ ลองวิธีง่ายๆ ด้วยการหานางแบบหรือนายแบบมาเป็นพรีเซนเตอร์สักคนซิครับ 2. ย้ำทำ ย้ำให้ทำ ตำแหน่งการวางปุ่ม Call-to-Action (CTA) ที่ส่วนบนของเว็บ JIRA วิธีวัด Conversion rate ที่ง่ายที่สุดวิธีหนึ่งคือ การดูจำนวนยูสเซอร์ที่คลิกปุ่มหรือลิงค์ที่นำไปสู่การจ่ายเงินหรือการสมัครสมาชิก เราเรียกปุ่มนั้นว่า ปุ่ม Call-to-Action (CTA) ในตัวอย่างคือ เว็บ JIRA วางตำแหน่งปุ่ม CTA (ปุ่ม Try it for free) ไว้ทั่วหน้า โดยมีตำแหน่งแรกคือส่วนบนของหน้า (ปุ่มสีเขียว) ที่เปิดมาแล้วเห็นเลย (above the fold) ตำแหน่งการวางปุ่ม CTA ที่บริเวณส่วนหัวที่ยึดติด (sticky header) ตำแหน่งที่ 2 เมื่อเราเลื่อนหน้าเว็บลงมาเพื่อดูรายละเอียด จะมี sticky header เลื่อนติดหน้าเว็บอยู่ด้านบนตลอด ซึ่งมีปุ่ม CTA อยู่บน header นี้ด้วย ตำแหน่งการวางปุ่ม CTA ที่บริเวณส่วนท้ายของหน้าเว็บ JIRA ตำแหน่งสุดท้ายคือส่วนท้ายของเว็บที่เมื่อเรารับรู้ข้อมูลเสร็จเรียบร้อย ก็ควรต้องมีอะไรให้ยูสเซอร์ทำสักหน่อย นั่นก็คือปุ่มกับดักสุดท้าย Try it for free อีกแล้ว เห็นไหมครับว่า การวางปุ่ม CTA ไว้ทั่วทั้งหน้า (แต่อย่าเยอะเกินไปนะ) จะทำให้เราแน่ใจได้ว่า ไม่ว่ายูสเซอร์จะอยู่ที่ส่วนไหนของหน้า ถ้าหากเค้าตัดสินใจที่จะใช้บริการหรือซื้อสินค้าแล้ว ต้องสามารถมองเห็นปุ่มคำสั่งได้ทันที 3. เปลี่ยนสีปุ่ม Call-to-Action เปรียบเทียบสีปุ่มแบบเดิมกับแบบที่เร่งเร้าการกด วิธีนี้เรียกได้ว่า สามารถทำการทดลองได้ทันที เพราะเราแค่เล่นกับสีของปุุ่ม Call-to-Action (CTA) ให้เป็นสีที่เร่งเร้าและเชิญชวนให้กด อย่างเช่น สีแดง, สีส้ม หรือสีชมพูแดง ซึ่งได้พิสูจน์แล้วว่าได้ผล แต่อย่างไรก็ตาม เราควรต้องชั่งน้ำหนักกับการที่ต้องเสียความเป็นแบรนด์ซึ่งอาจมีการเลือกใช้สีที่เฉพาะเจาะจงอยู่แล้วครับ 4. ทำภาพสินค้าให้ใหญ่ขึ้น รายการสินค้าที่ใช้รูปขนาดเล็ก ในหน้าแสดงรายการสินค้าหรือบริการ หากเป็นไปได้เราอาจทดลองเพิ่มขนาดของรูปให้ใหญ่ขึ้น ตัวอย่างรูปเล็กเกินไปที่จะเห็นรายละเอียด หน้ารายการสินค้าที่ปรับให้แสดงรูปในขนาดที่ใหญ่ขึ้น ดังนั้นแล้วเว็บ e-commerce แห่งนี้จึงทำการเพิ่มขนาดรูปสินค้าให้กว้างเต็มพื้นที่ ผลลัพธ์คือ conversion rate เพิ่ม 9% กว่าๆ แหนะ 5. ขายยกชุด ตัวอย่างสินค้าในเว็บ Lazada ที่นำเสนอขายเป็นชุดอุปกรณ์ การโพสขายสินค้า เราอาจลองเสนอขายเป็นชุดสินค้าแบบครบเซ็ตดู เช่น เราไม่เพียงโพสขายกีตาร์ในหน้าเว็บ Lazada แค่ตัวเดียว แต่ยังขายพ่วงกระเป๋ากีตาร์, ปี๊กกีตาร์, สายสะพาย, คาโป้, สายกีตาร์ ไปด้วย ราคาบางทีอาจแพงกว่าซื้อแยกเสียอีก แต่โดยส่วนใหญ่ก็จะถูกกว่าซื้อแยกล่ะนะ เราจะเห็นกลยุทธ์นี้อย่างเด่นชัดเมื่อเป็นสินค้าประเภทไฟล์ดิจิตัล การนำเสนอแพคเกจสมาชิกที่สามารถอ่าน eBook ได้ทั้งหมดในราคา 99 เหรียญของเว็บ Smashing Magazine Smashing Magazine นำเสนอขาย eBook กว่า 100 เล่ม ในราคาที่เราจ่ายเพียงแค่ 99 ดอลลาร์เท่านั้นเอง ซึ่งโดยปกติแล้วเล่มละ 5 ดอลลาร์ ไม่ต้องเก่งคณิตศาสตร์ก็รู้ว่า คุ้มสุดๆ ยังมีพวกเว็บขายภาพ, ขายไฟล์ทำ UI, ขายไฟล์เสียง, ขายเพลง ก็นำเสนอขายด้วยกลยุทธ์เช่นนี้เหมือนกัน เพราะธุรกิจดิจิตอลมีต้นทุนต่ำจึงกล้าเนอะ 6. ใช้คำว่าฟรี การใช้คำว่าฟรีในหน้าเว็บ Invison ถ้าเว็บขายสินค้าหรือบริการของเรายังไม่มีคำว่า ‘ฟรี’ ให้เราเริ่มพิจารณาใช้คำนี้เลยนะ พยายามเอาไปใช้ในปุ่ม CTA หรือทำเป็นหัวข้อที่สามารถอ่านและมองเห็นได้ชัดเจน ยกตัวเช่น เว็บ Invision ใช้คำว่า GET STARTED – FREE FOREVER แทนที่จะใช้คำแค่ GET STARTED เฉยๆ ด้านบนตรงปุ่มลงทะเบียนก็เน้นอีกว่า SIGN UP FREE การนำเสนอของฟรีของเว็บ Creative Market ส่วนเว็บ Creative Market มีไฟล์กราฟิคให้โหลดฟรี ก็โฆษณาเป็น popup แล้วใช้คำว่า Free เป็นส่วนหนึ่งของหัวข้อใหญ่เลย ใครๆ ก็ชอบของฟรีใช่ไหมล่า ส่วนเบื้องหลังของฟรีก็รู้ๆ กันอยู่ว่า อาจจะเป็นขออีเมลหรือเบอร์โทร เพื่อที่ทางเว็บจะได้ตามหลอกหลอนนำเสนอขายสินค้าให้กับเราไปตลอดชีวิต (แต่เราก็สามารถยกเลิกการสมัครรับจดหมายทางเมลได้ทุกเมื่อนะครับ) 7. สร้างเงื่อนไขด้านเวลาและทรัพยากรที่มีจำกัด popup แจ้งเตือนการ upgrade Windows 10 วิธีนี้เกี่ยวพันกับวิชาเศรษฐศาสตร์ที่มีหัวใจหลักอยู่ที่การบริหารจัดการทรัพยากรที่มีอยู่อย่างจำกัด โดยตัวแปรที่เราจะนำมาเล่นในข้อนี้คือ เวลาและปริมาณครับ ถ้าใครใช้ Windows 7 หรือ 8 ในช่วงนี้ จะเห็นไอคอนแจ้งเตือนให้ upgrade เป็น Windows 10 ผมก็คนหนึ่งล่ะ พอตอนแรกเห็นแล้วก็เฉยๆ แต่พอได้อ่านไปเจอรายละเอียดที่บอกว่า For a short time,… นั่นหมายความว่า เฉพาะช่วงเวลาสั้นๆ เท่านั้นนะ แถมด้านหลังบอกว่า upgrade ฟรี! อีกต่างหาก ทำให้ผมตัดสินใจ upgrade เป็น Windows 10 โดยไม่รอช้า โดนเป็นหนูทดลองไปหนึ่งรายในที่สุด -_-! (แต่ก็ใช้งานดีนะ ^^) หัองพักที่แสดงข้อมูลเรื่องข้อจำกัดด้านเวลาและปริมาณของเว็บ Booking.com หรือเวลาเราจองโรงแรมผ่าน Booking.com ก็มักจะมีคำเตือนว่า โอกาสสุดท้ายแล้วนะ – เหลือเป็นห้องสุดท้ายเท่านั้นบนเว็บของเรา ซึ่งเป็นการเร่งเร้าด้านเวลาและให้ข้อมูลว่าเป็นทรัพยากรที่มีปริมาณจำกัดนะ ทำให้เรารีบตัดสินใจจองห้องนั้นให้เร็วที่สุด โดยไม่รอที่จะจองวันอื่น สำหรับเว็บก็จะเสี่ยงต่อการถูกลืมและอดได้ตังค์ในที่สุด 8. ซอยตัวเลขใหญ่ให้ดูน้อย การนำเสนอราคาในรูปแบบที่ย่อยเป็นหน่วยวัน วิธีนี้ใช้กันมากเลยกับพวก (หลอก) ขายประกัน, ขายรถและขายบ้านหรือคอนโด เพราะถ้าจะโฆษณาตัวเลขเต็มๆ ฟังแล้วรู้สึกท้อและไม่กระตุ้นให้เราเป็นหนี้ แต่ถ้าซอยราคาผ่อนเป็นวัน อย่างเช่น มิตซูมิชิ มิราจ ผ่อนวันละ 99 บ. เห็นแล้วยั่วน้ำลาย จากของราคาครึ่งล้าน กลายเป็นของที่ฟังแล้วเหมือนถูกเลยล่ะ คราวนี้พอรู้เทคนิค เราก็เอาไปใช้ขายอะไรก็ได้ ดูอย่างเช่น หนังสือหน้าละ 0.50 บาท, handy drive เมกละ 9 บ., แพจเกจมือถือวันละ 5 บ., บรอดแบรนด์อินเทอร์เน็ต กิโลไบต์ละ 1 สตางค์ (จะถูกไปไหมเนี่ย ^^!), เป็นต้น 9. เริ่มนับ 2 ส่วน progress bar ที่เริ่มจากขั้นตอนที่ 2 ของเว็บ Booking.com วิธีนี้จะเป็นการหลอกให้ยูสเซอร์รับรู้ว่าเค้าไม่ได้เริ่มจากขั้นตอนนับ 1 นะ ยูสเซอร์จะรู้สึกว่าเค้าจะใช้เวลาน้อยลงในการทำภารกิจที่เหลือให้สำเร็จ อย่างเว็บ Booking.com พอเข้าหน้าใส่รายละเอียดผู้เข้าพัก จะไฮไลท์ให้เราเห็นว่าอยู่ขั้นตอนที่ 2 แล้วนะ ซึ่งขั้นตอนที่เราเลือกห้องนั้นจะไม่ได้แสดงให้เห็นชัดเจนว่าเป็นขั้นตอนที่ 1 เลย เปรียบเทียบ progress bar แบบเริ่มจากศูนย์กับแบบที่เริ่มมีแท่งบางส่วน หรือจะมาประยุกต์เรื่องการรอก็ได้ หากเรามีการทำ UI progress bar ให้ทำแท่งบาร์เริ่มต้นเล็กๆ ไว้ก่อนเลย (แบบด้านล่าง) อย่าทำเป็นแท่งบาร์เปล่าๆ (แบบด้านบน) เพราะหากระบบต้องใช้เวลาในการโหลดนานในเบื้องต้น การมีบาร์แท่งหลอกไว้ก่อนจะทำให้ยูสเซอร์รับรู้ว่าระบบได้เริ่มทำงานไปแล้วและมีโอกาสรอนานกว่าบาร์ที่ยังไม่ได้แสดงแท่งอะไรเลย แม้ว่าเบื้องหลังจะยังไม่ได้เริ่มทำงานเหมือนๆ กันเลยครับ 10. วางตัวหลอก ตารางราคาก่อนปรับแก้ รูปด้านบนเป็นตัวอย่างตารางราคาก่อนการปรับเปลี่ยน เราจะเห็นความแตกต่างแค่เรื่องระยะเวลาเท่านั้น ในแง่ธุรกิจแล้ว เค้าอยากให้เลือกอันสุดท้ายมากกว่าอันแรก แต่ในความเป็นจริงไม่เป็นเช่นนั้น ตารางราคาหลังปรับแก้โดยเพิ่มตัวเลือกหลอก ทางบริษัทก็เลยได้ออกแบบตารางราคาใหม่ คราวนี้มีแพคเกจที่ 2 มาคั่น และจัดฟีเจอร์ที่ได้ของแพจเกจที่ 1 ให้เหลือเท่าแพคเกจที่ 2 โดยฟีเจอร์ 2 อันแรก (Core feature) เป็นอันที่ยูสเซอร์ส่วนใหญ่ใช้ ส่วนใครที่อยากซื้อแพคเกจแบบรายปีก็ต้องคงต้องงงกับตัวเลขและฟีเจอร์ เพราะถ้าซื้อแพคเกจที่ 3 เพิ่มแค่ 10 ดอลลาร์ แต่จะได้ฟีเจอร์เพิ่มมาอีก 4 ฟีเจอร์ ทั้งๆ ที่รู้ว่าฟีเจอร์พวกนี้ แถบไม่ได้ใช้งานเลย แต่ยูสเซอร์ส่วนใหญ่ก็เลือกซื้อแพคเกจที่ 3 อยู่ดี จากการเปลี่ยนแปลงนี้ ทำให้บริษัทได้ตัวเลข Conversion rate ที่ 233% โดย 86% ของลูกค้าเลือกแบบที่ 3 ส่วน 14% ที่เหลือเลือกแบบที่ 1 แล้วแบบที่ 2 ล่ะ? ก็ทำมาหลอกไงล่ะ ถ้าขายได้ก็ไม่ได้เสียหายอะไร แต่ขายแบบที่ 3 ได้กำไรเพิ่มขึ้นตั้งรายละ 10 ดอลลาร์เชียวนะ การนำเสนอขายสินค้าที่ใช้ตัวหลอก หรือจะใช้ร่วมกับวิธีที่ 5 โดยวางตัวหลอกเป็นสินค้าขายเดี่ยว แต่สินค้าที่เราอยากขายเป็นแบบขายพ่วง กรณีนี้เราก็ตั้งราคาสินค้าขายเดี่ยวให้สูงเวอร์ไปก่อน ส่วนสินค้าขายพ่วงก็ตั้งราคาที่ถูกกว่าหรือเท่ากันก็ได้ พอลูกค้ามาเห็นเปรียบเทียบก็อาจตีความได้ว่า ร้านค้าอาจลงราคาผิด หรือสินค้าขายพ่วงมันเป็นสินค้าโปรโมชัน จากนั้นลูกค้าก็เสร็จเรา รุกฆาต! สรุป 10 วิธีออกแบบเว็บเพื่อความร่ำรวย ใช้รูปคน (หน้าตาดีหน่อยนะ) เป็นตัวล่อสายตา กระจายปุ่มหรือลิงค์ที่นำไปสู่การจ่ายตังค์ให้ทั่วหน้าเว็บ เปลี่ยนสีปุ่ม Call-to-Action ให้ดูชวนเร่งรีบให้กด (สีแดงจะได้ผลดี) ปรับสินค้าที่เล็กเกินให้ใหญ่ขึ้น เสนอขายสินค้าหรือบริการแบบเหมารวม ใช้คำว่าฟรี เน้นคำว่าฟรี ใช้เงื่อนไขด้านเวลาและปริมาณที่จำกัด เพื่อรบเร้าการตัดสินใจ ย่อยตัวเลขที่ดูแพงให้ดูเป็นสินค้าราคาถูก ใช้ UI ที่สื่อว่าขั้นตอนได้ดำเนินการไปแล้ว สร้างตัวเลือกหลอกเพื่อให้เกิดการเปรียบเทียบที่ดูไม่ค่อยสมเหตุผล ลองนำไปทดลองใช้ดูนะครับ ได้ผลอย่างไร มาบอกกันด้วยล่ะ อยากเผือกๆ ^^ อ้างอิง http://goodui.org/ https://blog.kissmetrics.com/100-conversion-optimization-case-studies/