UI Patternสอนเทคนิคน่ารู้

10 วิธีออกแบบเว็บเพื่อความร่ำรวยแบบรุกฆาต

0

conversion-rate-trick-01-featured

หนึ่งในตัววัดผลว่าเว็บของเรามีประสิทธิภาพ ไม่ใช่ดูที่เว็บสวยงามหรือไม่ แต่ขึ้นอยู่กับว่าเว็บของเราตอบโจทย์ยูสเซอร์และองค์กรได้มากน้อยแค่ไหน บริษัทจึงต้องดูค่าแปรเปลี่ยนเป็นกำไร (Conversion Rate) ในแต่ละการเปลี่ยนแปลงที่เกิดขึ้นบนหน้าเว็บ เพราะเป็นวิธีการเฝ้าติดตามผลลัพธ์ของงานออกแบบอันจะส่งผลต่อพฤติกรรมของลูกค้าและกำไรของบริษัท ซึ่งผมได้รวบรวมวิธีการออกแบบ UI หน้าเว็บที่จะช่วยเพิ่มตัวเลข Conversion rate ที่ใครๆ ก็สามารถทำได้ มาเริ่มหมากทั้ง 10 วิธีกันครับ

1. ใช้นางแบบ, นายแบบในหน้าแรก

conversion-rate-trick-01

เปรียบเทียบเว็บแบบเดิมกับแบบที่ปรับมาใช้รูปคนเป็นพื้นหลัง

เว็บ 37 Signals ได้ทำการทดลองเปลี่ยนรูปพื้นหลังหน้าสินค้า Highrise มาใช้เป็นรูปหญิงสาวหน้าตาน่ารัก ปรากฎว่า Conversion rate เพิ่มขึ้น 102.5% เหตุเพราะมนุษย์เรามีแนวโน้มที่จะจ้องมองหน้าตามนุษย์ด้วยกัน โดยเฉพาะดวงตาที่จ้องมองมาตรงๆ ที่เหมือนว่ากำลังพยายามสื่อสารและพูดคุยกับเรา จึงล่อยูสเซอร์ให้สนใจข้อมูลในหน้าเว็บ หากครั้งหน้าอยากเปลี่ยนหน้าหลักของเว็บ ลองวิธีง่ายๆ ด้วยการหานางแบบหรือนายแบบมาเป็นพรีเซนเตอร์สักคนซิครับ

2. ย้ำทำ ย้ำให้ทำ

conversion-rate-trick-02

ตำแหน่งการวางปุ่ม Call-to-Action (CTA) ที่ส่วนบนของเว็บ JIRA

วิธีวัด Conversion rate ที่ง่ายที่สุดวิธีหนึ่งคือ การดูจำนวนยูสเซอร์ที่คลิกปุ่มหรือลิงค์ที่นำไปสู่การจ่ายเงินหรือการสมัครสมาชิก เราเรียกปุ่มนั้นว่า ปุ่ม Call-to-Action (CTA)

ในตัวอย่างคือ เว็บ JIRA วางตำแหน่งปุ่ม CTA (ปุ่ม Try it for free) ไว้ทั่วหน้า โดยมีตำแหน่งแรกคือส่วนบนของหน้า (ปุ่มสีเขียว) ที่เปิดมาแล้วเห็นเลย (above the fold)

conversion-rate-trick-03

ตำแหน่งการวางปุ่ม CTA ที่บริเวณส่วนหัวที่ยึดติด (sticky header)

ตำแหน่งที่ 2 เมื่อเราเลื่อนหน้าเว็บลงมาเพื่อดูรายละเอียด จะมี sticky header เลื่อนติดหน้าเว็บอยู่ด้านบนตลอด ซึ่งมีปุ่ม CTA อยู่บน header นี้ด้วย

conversion-rate-trick-04

ตำแหน่งการวางปุ่ม CTA ที่บริเวณส่วนท้ายของหน้าเว็บ JIRA

ตำแหน่งสุดท้ายคือส่วนท้ายของเว็บที่เมื่อเรารับรู้ข้อมูลเสร็จเรียบร้อย ก็ควรต้องมีอะไรให้ยูสเซอร์ทำสักหน่อย นั่นก็คือปุ่มกับดักสุดท้าย Try it for free อีกแล้ว

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

3. เปลี่ยนสีปุ่ม Call-to-Action

red_green_button

เปรียบเทียบสีปุ่มแบบเดิมกับแบบที่เร่งเร้าการกด

วิธีนี้เรียกได้ว่า สามารถทำการทดลองได้ทันที เพราะเราแค่เล่นกับสีของปุุ่ม Call-to-Action (CTA) ให้เป็นสีที่เร่งเร้าและเชิญชวนให้กด อย่างเช่น สีแดง, สีส้ม หรือสีชมพูแดง ซึ่งได้พิสูจน์แล้วว่าได้ผล แต่อย่างไรก็ตาม เราควรต้องชั่งน้ำหนักกับการที่ต้องเสียความเป็นแบรนด์ซึ่งอาจมีการเลือกใช้สีที่เฉพาะเจาะจงอยู่แล้วครับ

4. ทำภาพสินค้าให้ใหญ่ขึ้น

conversion-rate-trick-05

รายการสินค้าที่ใช้รูปขนาดเล็ก

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

conversion-rate-trick-06

หน้ารายการสินค้าที่ปรับให้แสดงรูปในขนาดที่ใหญ่ขึ้น

ดังนั้นแล้วเว็บ e-commerce แห่งนี้จึงทำการเพิ่มขนาดรูปสินค้าให้กว้างเต็มพื้นที่ ผลลัพธ์คือ conversion rate เพิ่ม 9% กว่าๆ แหนะ

5. ขายยกชุด

conversion-rate-trick-07

ตัวอย่างสินค้าในเว็บ Lazada ที่นำเสนอขายเป็นชุดอุปกรณ์

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

เราจะเห็นกลยุทธ์นี้อย่างเด่นชัดเมื่อเป็นสินค้าประเภทไฟล์ดิจิตัล

conversion-rate-trick-08

การนำเสนอแพคเกจสมาชิกที่สามารถอ่าน eBook ได้ทั้งหมดในราคา 99 เหรียญของเว็บ Smashing Magazine

Smashing Magazine นำเสนอขาย eBook กว่า 100 เล่ม ในราคาที่เราจ่ายเพียงแค่ 99 ดอลลาร์เท่านั้นเอง ซึ่งโดยปกติแล้วเล่มละ 5 ดอลลาร์ ไม่ต้องเก่งคณิตศาสตร์ก็รู้ว่า คุ้มสุดๆ

ยังมีพวกเว็บขายภาพ, ขายไฟล์ทำ UI, ขายไฟล์เสียง, ขายเพลง ก็นำเสนอขายด้วยกลยุทธ์เช่นนี้เหมือนกัน เพราะธุรกิจดิจิตอลมีต้นทุนต่ำจึงกล้าเนอะ

6. ใช้คำว่าฟรี

free-stuff-02

การใช้คำว่าฟรีในหน้าเว็บ Invison

ถ้าเว็บขายสินค้าหรือบริการของเรายังไม่มีคำว่า ‘ฟรี’ ให้เราเริ่มพิจารณาใช้คำนี้เลยนะ พยายามเอาไปใช้ในปุ่ม CTA หรือทำเป็นหัวข้อที่สามารถอ่านและมองเห็นได้ชัดเจน ยกตัวเช่น เว็บ Invision ใช้คำว่า GET STARTED – FREE FOREVER แทนที่จะใช้คำแค่ GET STARTED  เฉยๆ ด้านบนตรงปุ่มลงทะเบียนก็เน้นอีกว่า SIGN UP FREE

Fonts Graphics Themes and More Creative Market

การนำเสนอของฟรีของเว็บ Creative Market

ส่วนเว็บ Creative Market มีไฟล์กราฟิคให้โหลดฟรี ก็โฆษณาเป็น popup  แล้วใช้คำว่า Free เป็นส่วนหนึ่งของหัวข้อใหญ่เลย

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

7. สร้างเงื่อนไขด้านเวลาและทรัพยากรที่มีจำกัด

conversion-rate-trick-11

popup แจ้งเตือนการ upgrade Windows 10

วิธีนี้เกี่ยวพันกับวิชาเศรษฐศาสตร์ที่มีหัวใจหลักอยู่ที่การบริหารจัดการทรัพยากรที่มีอยู่อย่างจำกัด โดยตัวแปรที่เราจะนำมาเล่นในข้อนี้คือ เวลาและปริมาณครับ

ถ้าใครใช้ Windows 7 หรือ 8 ในช่วงนี้ จะเห็นไอคอนแจ้งเตือนให้ upgrade เป็น Windows 10 ผมก็คนหนึ่งล่ะ พอตอนแรกเห็นแล้วก็เฉยๆ แต่พอได้อ่านไปเจอรายละเอียดที่บอกว่า For a short time,… นั่นหมายความว่า เฉพาะช่วงเวลาสั้นๆ เท่านั้นนะ แถมด้านหลังบอกว่า upgrade ฟรี! อีกต่างหาก ทำให้ผมตัดสินใจ upgrade เป็น Windows 10 โดยไม่รอช้า โดนเป็นหนูทดลองไปหนึ่งรายในที่สุด -_-! (แต่ก็ใช้งานดีนะ ^^)

conversion-rate-trick-10

หัองพักที่แสดงข้อมูลเรื่องข้อจำกัดด้านเวลาและปริมาณของเว็บ Booking.com

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

8. ซอยตัวเลขใหญ่ให้ดูน้อย

conversion-rate-trick-12

การนำเสนอราคาในรูปแบบที่ย่อยเป็นหน่วยวัน

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

คราวนี้พอรู้เทคนิค เราก็เอาไปใช้ขายอะไรก็ได้ ดูอย่างเช่น หนังสือหน้าละ 0.50 บาท, handy drive เมกละ 9 บ., แพจเกจมือถือวันละ 5 บ., บรอดแบรนด์อินเทอร์เน็ต กิโลไบต์ละ 1 สตางค์ (จะถูกไปไหมเนี่ย ^^!), เป็นต้น

9. เริ่มนับ 2

conversion-rate-trick-13

ส่วน progress bar ที่เริ่มจากขั้นตอนที่ 2 ของเว็บ Booking.com

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

อย่างเว็บ Booking.com พอเข้าหน้าใส่รายละเอียดผู้เข้าพัก จะไฮไลท์ให้เราเห็นว่าอยู่ขั้นตอนที่ 2 แล้วนะ ซึ่งขั้นตอนที่เราเลือกห้องนั้นจะไม่ได้แสดงให้เห็นชัดเจนว่าเป็นขั้นตอนที่ 1 เลย

conversion-rate-trick-14

เปรียบเทียบ progress bar แบบเริ่มจากศูนย์กับแบบที่เริ่มมีแท่งบางส่วน

หรือจะมาประยุกต์เรื่องการรอก็ได้ หากเรามีการทำ UI progress bar ให้ทำแท่งบาร์เริ่มต้นเล็กๆ ไว้ก่อนเลย (แบบด้านล่าง) อย่าทำเป็นแท่งบาร์เปล่าๆ  (แบบด้านบน) เพราะหากระบบต้องใช้เวลาในการโหลดนานในเบื้องต้น การมีบาร์แท่งหลอกไว้ก่อนจะทำให้ยูสเซอร์รับรู้ว่าระบบได้เริ่มทำงานไปแล้วและมีโอกาสรอนานกว่าบาร์ที่ยังไม่ได้แสดงแท่งอะไรเลย แม้ว่าเบื้องหลังจะยังไม่ได้เริ่มทำงานเหมือนๆ กันเลยครับ

10. วางตัวหลอก

pricing

ตารางราคาก่อนปรับแก้

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

pricing_new

ตารางราคาหลังปรับแก้โดยเพิ่มตัวเลือกหลอก

ทางบริษัทก็เลยได้ออกแบบตารางราคาใหม่ คราวนี้มีแพคเกจที่ 2 มาคั่น และจัดฟีเจอร์ที่ได้ของแพจเกจที่ 1 ให้เหลือเท่าแพคเกจที่ 2 โดยฟีเจอร์ 2 อันแรก (Core feature) เป็นอันที่ยูสเซอร์ส่วนใหญ่ใช้ ส่วนใครที่อยากซื้อแพคเกจแบบรายปีก็ต้องคงต้องงงกับตัวเลขและฟีเจอร์ เพราะถ้าซื้อแพคเกจที่ 3 เพิ่มแค่ 10 ดอลลาร์ แต่จะได้ฟีเจอร์เพิ่มมาอีก 4 ฟีเจอร์ ทั้งๆ ที่รู้ว่าฟีเจอร์พวกนี้ แถบไม่ได้ใช้งานเลย แต่ยูสเซอร์ส่วนใหญ่ก็เลือกซื้อแพคเกจที่ 3 อยู่ดี

จากการเปลี่ยนแปลงนี้ ทำให้บริษัทได้ตัวเลข Conversion rate ที่ 233% โดย 86% ของลูกค้าเลือกแบบที่ 3 ส่วน 14% ที่เหลือเลือกแบบที่ 1 แล้วแบบที่ 2 ล่ะ? ก็ทำมาหลอกไงล่ะ ถ้าขายได้ก็ไม่ได้เสียหายอะไร แต่ขายแบบที่ 3 ได้กำไรเพิ่มขึ้นตั้งรายละ 10 ดอลลาร์เชียวนะ

conversion-rate-trick-15

การนำเสนอขายสินค้าที่ใช้ตัวหลอก

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

จากนั้นลูกค้าก็เสร็จเรา รุกฆาต!

สรุป 10 วิธีออกแบบเว็บเพื่อความร่ำรวย

  1. ใช้รูปคน (หน้าตาดีหน่อยนะ) เป็นตัวล่อสายตา
  2. กระจายปุ่มหรือลิงค์ที่นำไปสู่การจ่ายตังค์ให้ทั่วหน้าเว็บ
  3. เปลี่ยนสีปุ่ม Call-to-Action ให้ดูชวนเร่งรีบให้กด (สีแดงจะได้ผลดี)
  4. ปรับสินค้าที่เล็กเกินให้ใหญ่ขึ้น
  5. เสนอขายสินค้าหรือบริการแบบเหมารวม
  6. ใช้คำว่าฟรี เน้นคำว่าฟรี
  7. ใช้เงื่อนไขด้านเวลาและปริมาณที่จำกัด เพื่อรบเร้าการตัดสินใจ
  8. ย่อยตัวเลขที่ดูแพงให้ดูเป็นสินค้าราคาถูก
  9. ใช้ UI ที่สื่อว่าขั้นตอนได้ดำเนินการไปแล้ว
  10. สร้างตัวเลือกหลอกเพื่อให้เกิดการเปรียบเทียบที่ดูไม่ค่อยสมเหตุผล

ลองนำไปทดลองใช้ดูนะครับ ได้ผลอย่างไร มาบอกกันด้วยล่ะ อยากเผือกๆ ^^

อ้างอิง

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

รีวิว app HotelsCombined

Previous article

รู้จักชั้นเชิง UI (UI Stack)

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *

More in UI Pattern