ShareTweet 0 แอบดีใจนิดๆ ที่มีลูกค้าสนใจบริการ UI Ask ซึ่งเป็นบริการรีวิวเว็บ / app โดยใช้หลักการออกแบบ UX/UI ทีมีเหตุและผล พร้อมนำเสนอจุดที่ควรปรับปรุงอย่างตรงไปตรงมาแบบไม่หมกเม็ดเลย ในครั้งนี้จะเป็นการรีวิวเว็บ AirCheck24.com ร้านแอร์ออนไลน์อันดับหนึ่งในประเทศไทย ที่ให้ลูกค้าสามารถเช็คราคาเครื่องปรับอากาศ ทั้งแอร์บ้านหรือแอร์สำนักงาน เพื่อเปรียบเทียบราคาแอร์ได้เกือบทุกยี่ห้อเลยเชียว หน้า Home หน้าหลักของเว็บ AirCheck24 ที่แสดงปุ่ม Call-to-Action ชัดเจน ต้องทำความเข้าใจก่อนนะครับว่า เว็บ AirCheck24 เป็นเว็บที่มีจุดประสงค์ให้ลูกค้าส่งความต้องการในตัวสินค้ามาให้กับทางบริษัทได้ทราบเบื้องต้น จากนั้นทางบริษัทจึงจะนำเสนอราคาเครื่องปรับอากาศกลับมาให้ลูกค้าอีกที ดังนั้นในเว็บนี้จึงไม่มีการแสดงราคาแอร์ให้เราเห็นแต่อย่างใด ในหน้าหลัก ทางบริษัทจึงเลือกใช้ Call-to-Action คือ ‘เช็คราคาแอร์เพื่อรับข้อเสนอสุดพิเศษ’ แทนที่จะเป็นการนำเสนอขายแอร์แต่ละตัวแต่ละยี่ห้อเหมือนอย่างเว็บขายของทั่วไปทำกัน ปุ่ม Call-to-Action เช็คราคาแอร์ในตำแหน่งต่างๆ ของหน้าหลัก ซึ่ง Call-to-Action จะอยู่กระจายไปทั่ว ตามตำแหน่งต่างๆ ของเนื้อหาในหน้าหลัก ซึ่งผมนับได้ถึง 5 ลิงค์เลยเชียว ซึ่งอาจนับว่าเยอะไปนิด น่าจะสักประมาณ 3 ลิงค์กำลังดีครับ ตัวอย่างลูกค้าของบริษัท (Testimonial UI) ถัดลงมาจากส่วนเนื้อหาไฮไลท์ เราจะพบ UI ประเภท Social Proof หรือ Testimonial ซึ่งช่วยสร้างความเชื่อมั่นให้กับตัวบริษัทและบริการได้เป็นอย่างดีเลยครับ ข้อมูลผลงานอ้างอิงที่สามารถแทรกเพิ่มในหน้าหลักได้ คำแนะนำของผมคือ บริษัทสามารถเพิ่ม Section ที่เป็น ‘ผลงานที่ผ่านมา (ล่าสุด)’ ของบริษัทในหน้านี้ด้วยก็ได้ จะได้ดูมีความน่าเชื่อถือมากขึ้นอีก ซึ่งข้อมูลส่วนนี้ผมเห็นอยู่ในหน้า ‘ลูกค้าของเรา’ แต่รู้สึกเสียดายที่ไม่ได้เอามาแสดงในหน้านี้ ข้อมูลเสริมความเชื่อมั่นในบริการซึ่งอยู่บริเวณด้านล่างของเว็บในหน้าหลัก โครงสร้างเนื้อหาส่วนอื่นๆ ก็จะเป็นการเน้นอธิบายเรื่องตัวบริการ วิธีการทำงาน และคำการันตี (Confidence message) ที่สื่อออกมาได้ดีทีเดียวครับ ข้อเสนอแนะ หน้า Home มีรายละเอียดเรื่อง UI ที่ควรปรับปรุงในหน้าแรกนี้ โดยเฉพาะสไตล์ของปุ่มและลิงค์ครับ สไตล์สีของสีลิงค์ที่ใช้งานไม่ถูกต้อง สำหรับเว็บ หากเราใช้สีใดสีหนึ่งทำเป็นสีของลิงค์แล้ว เราควรเลี่ยงใช้สีนั้นสำหรับข้อความที่เป็นเนื้อหาธรรมดา ดังนั้นตรงส่วนด้านบนของเว็บ จึงไม่ควรใช้สีฟ้า เพราะมันไม่ใช่ลิงค์ แนวทางแก้ไขข้อความที่ต้องการทำให้เด่น โดยไม่ใช้สีของลิงค์ ทางแก้ที่จะเลี่ยงการใช้สีลิงค์เพื่อให้ข้อความเด่น เราสามารถใช้ ทฤษฎีลำดับชั้น (Hierarchy) เข้ามาช่วยแก้ปัญหาได้ครับ โดยผมลองนำเสนอทางแก้มาให้ดู 3 วิธี ได้แก่ วิธีที่ 1: ใช้สีเป็นตัวเน้น โดยแถวแรกผมใช้สีเฉดเทา แถวที่สองผมใช้สีออกดำเข้ม วิธีที่ 2: หากการใช้สียังไม่ทำให้ข้อความเด่นพอ ก็เพิ่มความหนาให้กับข้อความ วิธีที่ 3: หากทั้งสีที่เข้มและความหนายังไม่พอ ก็เพิ่มขนาดตัวหนังสือให้ใหญ่ขึ้นอีกจนดูรู้แล้วว่าข้อความด้านล่างเด่นมาก เห็นไหมครับ ยังมีทางออกอื่นอีกที่เราสามารถเลี่ยงไม่ใช้สีลิงค์เพื่อทำให้ข้อความเด่นขึ้นมาได้ สไตล์ของลิงค์หรือหัวข้อที่อาจทำให้ยูสเซอร์สับสนได้ ตรงกลางๆ หน้าจะมีรูปแบบการใช้สไตล์ของหัวข้อที่ดูเหมือนจะเป็นปุ่มที่คลิกได้ และสไตล์ของลิงค์ที่ทำเป็นเหมือนหัวข้อ ซึ่งอาจทำให้ยูสเซอร์สับสันได้ ยิ่งถ้าเป็นบนมือถือแล้วด้วย ลิงค์ ‘เช็คราคาแอร์’ สีส้มๆ ไม่มีทางรู้เลยว่าคลิกได้ วิธีการแก้ไขในการทำสไตล์หัวข้อและลิงค์ให้ถูกต้อง การแก้ไขก็ทำได้ไม่ยากเลยครับ กรณีแรก ก็เปลี่ยนไปใช้สไตล์หัวข้อแบบธรรมดาก็เพียงพอแล้วครับ ทำขนาดฟอนต์ให้ใหญ่มองชัด ก็ดูเป็นหัวข้อแล้ว กรณีสอง ก็ทำปุ่ม Call-to-Action เพิ่มเข้ามาตรงด้านล่าง แล้วเอาลิงค์ตรงหัวข้อออกไป สิ่งที่ผมกำลังทำและชี้ให้เห็นคือ การพยายามรักษาสไตล์ของเว็บให้เป็นเหมือนๆ กันทั่วทั้งเว็บ (Consistency) เพื่อลดภาระการเรียนรู้ UI ใหม่ (คือ การลด Cognitive Load) ให้กับยูสเซอร์ นั่นเอง หน้าแบบฟอร์มเช็คราคาแอร์ ฟอร์มเช็คราคาแอร์ เมื่อเราคลิกที่ปุ่มเช็คราคาแอร์ (ปุ่มสีแดงๆ ในหน้าหลัก) ก็จะเป็นหน้าแบบสอบถามความต้องการว่า ต้องการแอร์แบบไหน อย่างไร หากเลือกตอบไม่ถูกอย่างไร ก็มีเบอร์ Call Center ให้เราโทรขอความช่วยเหลือได้อยู่ที่ด้านขวาบน การแสดงผลของฟอร์มเมื่อมีการเลือกคำตอบ พอเลือกตอบเสร็จ ก็จะมีเครื่องมือถูกปรากฏข้างหน้าชัดเจนมากๆ ฟอร์มให้กรอกข้อมูลลูกค้า พร้อมข้อมูลคำพูดจากลูกค้าคนอื่น พอตอบคำถามข้อสุดท้าย หรือกดที่ปุ่มดำเนินการต่อด้านล่าง ก็จะปรากฏฟอร์มให้ใส่ข้อมูลผู้สอบถาม พร้อมข้อมูลผู้ใช้งานจริง และตัวเลขส่วนลด + จำนวนผู้ได้รับส่วนลด แสดงอยู่ข้างๆ เพื่อทำให้ลูกค้าเกิดความรู้สึกมั่นใจในบริการ ข้อเสนอแนะ หน้าแบบฟอร์มเช็คราคาแอร์ ควรทำโลโก้ให้คลิกไปหน้าหลัก และตรวจสอบความถูกต้องข้อมูล โดยปกติโลโก้ของเว็บควรจะคลิกได้เพื่อกลับสู่หน้าหลักเสมอ แต่เมื่อเข้ามาในหน้าฟอร์มจะเห็นว่าสไตล์โดยรวมของหน้าจะแตกต่างจากหน้าอื่นพอสมควร เหตุน่าจะเพราะมันเป็นหน้าที่มีการพัฒนาแยกจากโครงสร้างเว็บหลัก (ซึ่งใช้ WordPress) อีกจุดที่เป็นความผิดพลาดเล็กๆ น้อยๆ คือ ในตัวเนื้อหาข้อความที่บอกว่า ให้ตอบคำถามสี่ข้อ แต่จริงๆ ต้องตอบ 5 ข้อ ซึ่งคิดว่าลูกค้าทั่วไปคงไม่ได้อ่านละเอียดนัก หรือไม่ทันได้สังเกตเห็นตรงจุดนี้เท่าไร ควรมีตรวจสอบรูปแบบข้อมูลที่ให้กรอกเพื่อให้เจ้าหน้าที่ติดต่อได้จริง ในช่องกรอกข้อมูลลูกค้า ผมเห็นว่าน่าจะมีการตรวจสอบรูปแบบข้อมูลที่กรอกหน่อย (Validation) เพื่อให้ได้ข้อมูลที่ถูกต้อง และเป็นการเตือนลูกค้าด้วยว่ากรอกข้อมูลถูกต้องเรียบร้อยจริงๆ ในกรณีนี้ผมซึ่งกรอกข้อมูลอีเมลถูกต้องเรียบร้อย ระบบควรจะส่งอีเมลแจ้งกลับว่า ทางบริษัทได้รับข้อมูลเรียบร้อยแล้ว และจะมีเจ้าหน้าที่ติดต่อกลับตามเบอร์ที่ให้ไว้… แต่กลับไม่มีอีเมลใดๆ ส่งหาเลย หน้าส่งแบบฟอร์มสำเร็จ Popup ให้กด Like หน้า page ของทางบริษัท ขึ้นแสดงในจังหวะที่ไม่เหมาะสม เมื่อกดส่งแบบฟอร์มเช็คราคาแอร์เรียบร้อย เราก็จะถูกพามาที่อีกหน้าหนึ่ง ซึ่งโผล่มาก็เจอ Popup เลย เพื่อเชิญชวนให้กดไลท์ Page ของทางบริษัท ดูแล้วไม่น่าจะเป็นเวลาที่เหมาะสมเท่าไรนะครับ ^^! ข้อมูลแจ้งยืนยันการได้รับข้อมูลและอธิบายข้อมูลที่ควรทราบเกี่ยวกับ AirCheck24 หลังจากที่กดปิด Popup นั้นไป ก็จะมีข้อมูลเนื้อหาถึงกระบวนการทำงานของทีมงาน ซึ่งจะมีเจ้าหน้าที่ติดต่อกลับภายใน 15 นาที เพื่อสอบถามรายละเอียดเพิ่มเติม จากนั้นก็จะได้รับใบเสนอราคาแอร์แบบเปรียบเทียบ 3 ยี่ห้อ มาให้เราได้พิจารณาเลือกซื้อและดำเนินการติดตั้งต่อไป เป็นอันจบขั้นตอนในส่วนของการเช็คราคาแอร์ หากเราสังเกต จะเห็นว่า UI แบบ Testimonial จะปรากฏแทบทุกหน้าเลย ตั้งแต่หน้า Home > หน้าแบบฟอร์ม > หน้าส่งแบบฟอร์มสำเร็จ ด้วยวิธีการนี้จะทำให้ประสบการณ์ความรู้สึกของลูกค้ามีความมั่นใจที่จะลองใช้บริการนี้ดู เพราะอย่างน้อยก็มีคนอื่นๆ ได้ลองใช้ก่อนหน้าแล้ว (คือไม่ใช่เราคนเดียวที่จะถูกหลอกแน่ๆ ^^) ขอชมตรงจุดนี้เลย ข้อเสนอแนะ หน้าส่งแบบฟอร์มสำเร็จ ปรับให้ข้อความแจ้งการได้รับข้อมูลเด่นขึ้น และทวนข้อมูลเบอร์โทรที่ลูกค้ากรอกมา บริเวณส่วนที่แจ้งให้ลูกค้าทราบว่าระบบได้รับแบบฟอร์มแล้ว อาจจะทำให้ดูเด่นขึ้นอีกหน่อย และใช้สีเขียวเพิ่มอารมณ์ว่าได้ทำขั้นตอนนี้เรียบร้อยแล้ว ในข้อความก็อาจมีแจ้งว่าจะมีการโทรติดต่อกลับไปที่เบอร์ของลูกค้า เพื่อให้ลูกค้าตรวจสอบความถูกต้องของเบอร์โทรอีกทีนึง และถ้าเป็นไปได้ หากลูกค้ามีการใส่ที่อยู่อีเมล (ที่ถูกต้อง) ระบบก็ควรจะส่งเมลยืนยันกลับไปว่า ได้รับแบบฟอร์มเช็คราคาเครื่องปรับอากาศเรียบร้อยแล้ว แล้วก็ใส่เนื้อหาคล้ายๆ กับหน้านี้ลงไปในอีเมลก็ได้ครับ สร้างปุ่ม Call-to-Action เช่น ปุ่ม Like ในหน้าส่งแบบฟอร์มสำเร็จ เมื่ออ่านข้อมูลเสร็จ จะเห็นว่าไม่มี Action ต่อจากนี้เลย นี่คือจังหวะที่อาจจะวางปุ่ม Like us on facebook เป็น Call-to-Action ดีกว่าที่จะไปแสดงเป็น Popup ซึ่งอาจจะเป็นการขัดขวาง Flow หลักที่ควรแสดงข้อความตอบรับ (Feedback) ทันทีที่ลูกค้าส่งแบบฟอร์ม หน้าสินค้า ยี่ห้อแอร์ขายดี หน้าสินค้าเป็นการนำเสนอสินค้าตามยี่ห้อของแอร์ โดยจะมีแนะนำ 5 ยี่ห้อเครื่องปรับอากาศขายดีอยู่ด้านบน หน้ารายละเอียดสินค้า หากเลือกยี่ห้อ Mitsubishi ก็จะมีรุ่นให้คลิกเลือกดูรายละเอียดของสินค้า ในกรณีที่เราสนใจแอร์รุ่นนี้ หากคลิกที่ปุ่ม ‘เช็คราคาแอร์’ จะพบว่า เว็บจะพาเราไปที่หน้าแบบฟอร์มเช็คราคาแอร์ในแท็บเดิม โดยไม่ได้มีการใส่ข้อมูลรุ่นแอร์ที่เราได้เลือกไปแล้วเลย ดังนั้นการแก้ไขปัญหาเฉพาะหน้า หากลูกค้าคลิกที่ปุ่ม ‘เช็คราคาแอร์’ ก็ให้เปิดแท็บใหม่ขึ้นมา และแสดงฟอร์มเช็คราคาแอร์ ดีกว่าที่จะแสดงฟอร์มในแท็บเดิม เพื่อให้ลูกค้ายังจำได้ว่า ตัวเองกำลังสนใจรุ่นอะไรอยู่ เค้าจะได้กลับมาจดเอง หรือใช้พูดคุยกับเจ้าหน้าที่ได้ ทดสอบการค้นหาสินค้าด้วยคำว่า ‘แอร์ Daikin’ ซึ่งไม่ปรากฎรายการใดๆ การใช้งานช่องค้นหา พบว่ายังไม่ค่อยสมบูรณ์เท่าไรนัก เช่น หากค้นด้วยคำว่า ‘แอร์ daikin’ จะไม่พบรายการผลลัพธ์เลย ทดสอบการค้นหาสินค้าด้วยคำว่า ‘แอร์’ จะขึ้นสินค้าจำนวนจำกัด ซึ่งควรจะมีมากกว่านี้ แต่ถ้าหากค้นด้วยคำว่า ‘แอร์’ จะพบแอร์ 17 ยี่ห้อ เท่านั้น และก็ไม่ใช่ยี่ห้อดังด้วย การปรับปรุงระบบค้นหาด้วยช่องเสิร์ช อาจไม่จำเป็นรีบร้อน เพราะลูกค้ายังสามารถไปค้นหารุ่นจากการเลือกยี่ห้อแทนได้ ถ้าฟังก์ชันยังทำงานได้ไม่ดีพอ ก็อาจจะพิจารณาปิดไปก่อนก็ได้ครับ หน้าลูกค้าของเรา ข้อมูลลูกค้าและตัวอย่างผลงาน รีวิวมาถึงหน้านี้ ผมคิดว่าเว็บ AirCheck24 ให้ความสำคัญกับข้อมูลประสบการณ์จริงของลูกค้าได้ดีมาก ดังนั้นจึงไม่มีประเด็นอะไรที่ควรปรับปรุงในส่วนนี้เท่าไร หน้าติดต่อเรา ข้อมูลที่อยู่และช่องทางติดต่อบริษัท ข้อมูลและช่องทางติดต่อบริษัทมีความชัดเจนดี แต่อาจมีการเพิ่มข้อมูลนิดหน่อย เพิ่มเวลาเปิดทำการของบริษัท แม้จะมีที่ด้านบนสุดของหน้าเว็บแล้วก็ตาม Line ID, Facebook รหัสไปรษณีย์ ข้อเสนอแนะอื่นๆ การแสดงผลบนมือถือ การแสดงผลบนมือของเว็บ AirCheck24 ที่ยังไม่ได้ทำรองรับ อันที่จริงต่อๆ ไป ผมจะเน้นการรีวิวเว็บ / app บนมือถือมากขึ้น แต่ในกรณีของเว็บ AirCheck24.com ยังไม่ได้ทำให้เว็บแสดงผลได้ดีบนมือถือ หรือยังไม่ได้เป็นเว็บ responsive เลย ซึ่งไม่ดีแน่ เพราะกำลังขัดกับเทรนด์ยอดวิวบนมือถือที่สูงขึ้นทุกวันๆ นำเสนอรุ่นแอร์ยอดนิยม การนำเสนอสินค้าในรุ่นที่ลูกค้าส่วนใหญ่ชอบสอบถามเข้ามา ในหน้าสินค้าหรือที่หน้าหลัก อาจลองนำเสนอเป็นรุ่นแอร์ยอดนิยมที่ลูกค้าส่วนใหญ่ชอบสอบถามเข้ามา โดยจัดเป็น 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 ได้เลยนะครับ รับรองเนื้อหาเข้มข้น ได้ประโยชน์กันทั้งสองฝ่ายครับ ( ̄▽ ̄)ノ uiblogazinerสวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ Website Facebook จิตวิทยาราคาศาสตร์ ภาคปลายPrevious article6 หลักการเพื่อออกแบบทุกสิ่งบนโลกนี้ ตอนที่ 1: Affordance (ล่อให้กระทำ)Next article