UI Blogazine

รีวิวเว็บ

รีวิวเว็บ AirCheck24 (เว็บร้านแอร์ออนไลน์)

featuring-aircheck24

แอบดีใจนิดๆ ที่มีลูกค้าสนใจบริการ UI Ask ซึ่งเป็นบริการรีวิวเว็บ / app โดยใช้หลักการออกแบบ UX/UI ทีมีเหตุและผล พร้อมนำเสนอจุดที่ควรปรับปรุงอย่างตรงไปตรงมาแบบไม่หมกเม็ดเลย

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

หน้า Home

aircheck24_01

หน้าหลักของเว็บ AirCheck24 ที่แสดงปุ่ม Call-to-Action ชัดเจน

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

ในหน้าหลัก ทางบริษัทจึงเลือกใช้ Call-to-Action คือ ‘เช็คราคาแอร์เพื่อรับข้อเสนอสุดพิเศษ’ แทนที่จะเป็นการนำเสนอขายแอร์แต่ละตัวแต่ละยี่ห้อเหมือนอย่างเว็บขายของทั่วไปทำกัน

aircheck24_02

ปุ่ม Call-to-Action เช็คราคาแอร์ในตำแหน่งต่างๆ ของหน้าหลัก

ซึ่ง Call-to-Action จะอยู่กระจายไปทั่ว ตามตำแหน่งต่างๆ ของเนื้อหาในหน้าหลัก ซึ่งผมนับได้ถึง 5 ลิงค์เลยเชียว ซึ่งอาจนับว่าเยอะไปนิด น่าจะสักประมาณ 3 ลิงค์กำลังดีครับ

aircheck24_03

ตัวอย่างลูกค้าของบริษัท (Testimonial UI)

ถัดลงมาจากส่วนเนื้อหาไฮไลท์ เราจะพบ UI ประเภท Social Proof หรือ Testimonial ซึ่งช่วยสร้างความเชื่อมั่นให้กับตัวบริษัทและบริการได้เป็นอย่างดีเลยครับ

aircheck24_04

ข้อมูลผลงานอ้างอิงที่สามารถแทรกเพิ่มในหน้าหลักได้

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

aircheck24_05

ข้อมูลเสริมความเชื่อมั่นในบริการซึ่งอยู่บริเวณด้านล่างของเว็บในหน้าหลัก

โครงสร้างเนื้อหาส่วนอื่นๆ ก็จะเป็นการเน้นอธิบายเรื่องตัวบริการ วิธีการทำงาน และคำการันตี (Confidence message) ที่สื่อออกมาได้ดีทีเดียวครับ


ข้อเสนอแนะ หน้า Home

มีรายละเอียดเรื่อง UI ที่ควรปรับปรุงในหน้าแรกนี้ โดยเฉพาะสไตล์ของปุ่มและลิงค์ครับ

aircheck24_06

สไตล์สีของสีลิงค์ที่ใช้งานไม่ถูกต้อง

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

aircheck24_07

แนวทางแก้ไขข้อความที่ต้องการทำให้เด่น โดยไม่ใช้สีของลิงค์

ทางแก้ที่จะเลี่ยงการใช้สีลิงค์เพื่อให้ข้อความเด่น เราสามารถใช้ ทฤษฎีลำดับชั้น (Hierarchy) เข้ามาช่วยแก้ปัญหาได้ครับ โดยผมลองนำเสนอทางแก้มาให้ดู 3 วิธี ได้แก่

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

เห็นไหมครับ ยังมีทางออกอื่นอีกที่เราสามารถเลี่ยงไม่ใช้สีลิงค์เพื่อทำให้ข้อความเด่นขึ้นมาได้

aircheck24_08

สไตล์ของลิงค์หรือหัวข้อที่อาจทำให้ยูสเซอร์สับสนได้

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

aircheck24_09

วิธีการแก้ไขในการทำสไตล์หัวข้อและลิงค์ให้ถูกต้อง

การแก้ไขก็ทำได้ไม่ยากเลยครับ

  • กรณีแรก ก็เปลี่ยนไปใช้สไตล์หัวข้อแบบธรรมดาก็เพียงพอแล้วครับ ทำขนาดฟอนต์ให้ใหญ่มองชัด ก็ดูเป็นหัวข้อแล้ว
  • กรณีสอง ก็ทำปุ่ม Call-to-Action เพิ่มเข้ามาตรงด้านล่าง แล้วเอาลิงค์ตรงหัวข้อออกไป

สิ่งที่ผมกำลังทำและชี้ให้เห็นคือ การพยายามรักษาสไตล์ของเว็บให้เป็นเหมือนๆ กันทั่วทั้งเว็บ (Consistency) เพื่อลดภาระการเรียนรู้ UI ใหม่ (คือ การลด Cognitive Load) ให้กับยูสเซอร์ นั่นเอง


หน้าแบบฟอร์มเช็คราคาแอร์

aircheck24_10

ฟอร์มเช็คราคาแอร์

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

aircheck24_11

การแสดงผลของฟอร์มเมื่อมีการเลือกคำตอบ

พอเลือกตอบเสร็จ ก็จะมีเครื่องมือถูกปรากฏข้างหน้าชัดเจนมากๆ

aircheck24_12

ฟอร์มให้กรอกข้อมูลลูกค้า พร้อมข้อมูลคำพูดจากลูกค้าคนอื่น

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

ข้อเสนอแนะ หน้าแบบฟอร์มเช็คราคาแอร์

aircheck24_13

ควรทำโลโก้ให้คลิกไปหน้าหลัก และตรวจสอบความถูกต้องข้อมูล

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

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

aircheck24_14

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

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

ในกรณีนี้ผมซึ่งกรอกข้อมูลอีเมลถูกต้องเรียบร้อย ระบบควรจะส่งอีเมลแจ้งกลับว่า ทางบริษัทได้รับข้อมูลเรียบร้อยแล้ว และจะมีเจ้าหน้าที่ติดต่อกลับตามเบอร์ที่ให้ไว้…  แต่กลับไม่มีอีเมลใดๆ ส่งหาเลย


หน้าส่งแบบฟอร์มสำเร็จ

aircheck24_15

Popup ให้กด Like หน้า page ของทางบริษัท ขึ้นแสดงในจังหวะที่ไม่เหมาะสม

เมื่อกดส่งแบบฟอร์มเช็คราคาแอร์เรียบร้อย เราก็จะถูกพามาที่อีกหน้าหนึ่ง ซึ่งโผล่มาก็เจอ Popup เลย เพื่อเชิญชวนให้กดไลท์ Page ของทางบริษัท ดูแล้วไม่น่าจะเป็นเวลาที่เหมาะสมเท่าไรนะครับ ^^!

aircheck24_16

ข้อมูลแจ้งยืนยันการได้รับข้อมูลและอธิบายข้อมูลที่ควรทราบเกี่ยวกับ AirCheck24

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

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


ข้อเสนอแนะ หน้าส่งแบบฟอร์มสำเร็จ

aircheck24_17

ปรับให้ข้อความแจ้งการได้รับข้อมูลเด่นขึ้น และทวนข้อมูลเบอร์โทรที่ลูกค้ากรอกมา

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

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

aircheck24_18

สร้างปุ่ม Call-to-Action เช่น ปุ่ม Like ในหน้าส่งแบบฟอร์มสำเร็จ

เมื่ออ่านข้อมูลเสร็จ จะเห็นว่าไม่มี Action ต่อจากนี้เลย นี่คือจังหวะที่อาจจะวางปุ่ม Like us on facebook เป็น Call-to-Action ดีกว่าที่จะไปแสดงเป็น Popup ซึ่งอาจจะเป็นการขัดขวาง Flow หลักที่ควรแสดงข้อความตอบรับ (Feedback) ทันทีที่ลูกค้าส่งแบบฟอร์ม

หน้าสินค้า

aircheck24_19

ยี่ห้อแอร์ขายดี

หน้าสินค้าเป็นการนำเสนอสินค้าตามยี่ห้อของแอร์ โดยจะมีแนะนำ 5 ยี่ห้อเครื่องปรับอากาศขายดีอยู่ด้านบน

aircheck24_20

หน้ารายละเอียดสินค้า

หากเลือกยี่ห้อ Mitsubishi ก็จะมีรุ่นให้คลิกเลือกดูรายละเอียดของสินค้า ในกรณีที่เราสนใจแอร์รุ่นนี้ หากคลิกที่ปุ่ม ‘เช็คราคาแอร์’ จะพบว่า เว็บจะพาเราไปที่หน้าแบบฟอร์มเช็คราคาแอร์ในแท็บเดิม โดยไม่ได้มีการใส่ข้อมูลรุ่นแอร์ที่เราได้เลือกไปแล้วเลย

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

 

aircheck24_21

ทดสอบการค้นหาสินค้าด้วยคำว่า ‘แอร์ Daikin’ ซึ่งไม่ปรากฎรายการใดๆ

การใช้งานช่องค้นหา พบว่ายังไม่ค่อยสมบูรณ์เท่าไรนัก เช่น หากค้นด้วยคำว่า ‘แอร์ daikin’ จะไม่พบรายการผลลัพธ์เลย

aircheck24_22

ทดสอบการค้นหาสินค้าด้วยคำว่า ‘แอร์’ จะขึ้นสินค้าจำนวนจำกัด ซึ่งควรจะมีมากกว่านี้

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


หน้าลูกค้าของเรา

aircheck24_23

ข้อมูลลูกค้าและตัวอย่างผลงาน

รีวิวมาถึงหน้านี้ ผมคิดว่าเว็บ AirCheck24 ให้ความสำคัญกับข้อมูลประสบการณ์จริงของลูกค้าได้ดีมาก ดังนั้นจึงไม่มีประเด็นอะไรที่ควรปรับปรุงในส่วนนี้เท่าไร

หน้าติดต่อเรา

aircheck24_24

ข้อมูลที่อยู่และช่องทางติดต่อบริษัท

ข้อมูลและช่องทางติดต่อบริษัทมีความชัดเจนดี แต่อาจมีการเพิ่มข้อมูลนิดหน่อย

  • เพิ่มเวลาเปิดทำการของบริษัท แม้จะมีที่ด้านบนสุดของหน้าเว็บแล้วก็ตาม
  • Line ID, Facebook
  • รหัสไปรษณีย์


ข้อเสนอแนะอื่นๆ

การแสดงผลบนมือถือ

screenshot_20170607-111909

การแสดงผลบนมือของเว็บ AirCheck24 ที่ยังไม่ได้ทำรองรับ

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


นำเสนอรุ่นแอร์ยอดนิยม

aircheck24_25

การนำเสนอสินค้าในรุ่นที่ลูกค้าส่วนใหญ่ชอบสอบถามเข้ามา

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


สรุปคะแนน

ความสวยงาม:  7/10 (เลือกธีมสี (ฟ้า) เข้ากับตัวธุรกิจดี)

การนำเสนอเนื้อหา: 8/10 (ครบถ้วนดีครับ มีทั้งบล็อค, สินค้า, ลูกค้าตัวอย่าง, Call-to-Action ดูชัดเจนมากๆ)

ฟังก์ชันการใช้งานหลัก: 6/10 (การใช้งานง่าย แต่จะมาเสียตรงฟังก์ชันการค้นหาสินค้าที่ยังไม่สมบูรณ์ และการตรวจสอบรูปแบบข้อมูลของฟอร์ม)

ความถูกต้องตามหลัก UI/UX: 6/10 (มีเอาสีลิงค์ไปใช้ในหัวข้อหรือเอาไปใช้เน้นข้อความ, มี popup ขัดจังหวะการดูข้อมูลตอบสนองจากระบบ หลังจากที่กดส่งฟอร์มเช็คราคา)

การแสดงผลบนมือถือ: N/A (ไม่ได้รองรับ Responsive จึงไม่มีการประเมิน)

ความคิดสร้างสรรค์: 6/10 (เว็บมีการแสดงผลข้อมูลเรียบง่าย)

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

ขอบคุณที่ได้ให้โอกาสรีวิวเว็บ AirCheck24.com ครับ

บริษัทหรือเจ้าของเว็บไหน สนใจบริการรีวิวเว็บ/app มือถือ ติดต่อมาที่อีเมล s.piyawit@gmail.com ได้เลยนะครับ รับรองเนื้อหาเข้มข้น ได้ประโยชน์กันทั้งสองฝ่ายครับ ( ̄▽ ̄)ノ

Tagged , ,

About uiblogaziner

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

View all posts by uiblogaziner →

Leave a Reply

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