รีวิวเว็บ รีวิว app HotelsCombined By uiblogaziner August 22, 20152721 views ShareTweet 0 มาสคอตของบริการ HotelsCombined ไม่ใช่จะมาโฆษณาลูกอมฮอลล์สูตรเย็นซ่าส์ชื่นใจที่มีเหล่าหมีขาวเป็นตัวประกอบนะครัช แต่ผมจะมารีวิว app ที่ใช้สำหรับดูราคาเปรียบเทียบโรงแรมทั่วโลกโดยมีเจ้าหมีใหญ่ขั้วโลกเป็นพระเอกของบริการนี้ครับ ซึ่งหากใครสะดวกใช้งานผ่านเว็บก็ให้เข้าไปใช้งานได้ที่ www.hotelscombined.co.th หรือใครชอบแบบ mobile app ก็เข้าไปดาวน์โหลด app HotelsCombined ได้ทั้งใน app Store หรือ Google Play ก็ได้เช่นกันครับ โฆษณาให้เค้าก่อนที่จะรีวิว เป็นมารยาท ^^! หน้าจอ Splash Screen ขณะกำลังโหลดข้อมูล (ต่อเน็ต) เปิด app มา เราจะเจอหน้าเจ้าหมีใหญ่คอยต้อนรับเราที่หน้า splash screen แต่หากใครไม่ต่อใช้งาน Internet จะหยุดอยู่ที่หน้าจอนี้ ซึ่งไม่ควรอย่างยิ่งนะครับ อย่างน้อยให้ยูสเซอร์เข้าไปเห็นหน้าจอแรกหน่อย จะได้รู้ว่า app ใช้งานอะไรได้บ้าง หน้าจอหลัก หน้าจอฟอร์มการค้นหาหลัก หน้าจอหลักของ app นี้คือฟอร์มการค้นหาโรงแรม โดยมีปุ่มให้ค้นหาโรงแรมแบบทันควันในค่ำคืนนี้รอบๆ ตัวเรา (Hotel for tonight near me) ซึ่งเหมาะมากสำหรับผู้ใช้งานบนมือถือ ถัดลงมาเป็นช่องค้นหาที่มีค่าดีฟอลต์เป็นสถานที่ ณ ปัจจุบัน ก็ดูเป็นตัวเลือกที่ดีในกรณีนี้ที่ยูสเซอร์ใช้งานบนมือถือ 100% และเมื่อคลิกที่ช่องค้นหา ตัวเลือก ‘Around current location’ ก็เป็นตัวเลือกหนึ่งในสถานที่ที่เราต้องการค้นหาด้วย ในสถานะที่ช่องค้นหาไม่มีตัวอักษรใดๆ เราสามารถที่จะซ่อนปุ่มล้างข้อความ (ปุุ่มกากบาท) ได้ เพื่อลดจำนวนสิ่งรบกวนของยูสเซอร์ ด้านล่างเป็นคำโฆษณาของบริการ ตรงข้อความแสดงส่วนลด (save up to 80%) เราสามารถใช้สีแดงน่าจะเด่นและกระตุ้นอารมณ์ดีกว่า เพราะเป็นสีที่ค่อนข้างเป็นมาตรฐานไปแล้ว หากเราพูดถึงเรื่องการลดราคา การแสดงผลการค้นหา ตัวเลือกแนะนำเมื่อเริ่มพิมพ์คำค้น พอเราเริ่มพิมพ์คำค้น จะมีตัวเลือกแนะนำปรากฎด้านล่าง ตรงหัวข้อของหมวดการค้นหา ผมเห็นว่าน่าจะนำไอคอนกลับไปวางด้านหน้าดีกว่า เพราะประโยชน์ของไอคอนคือ การเป็นสื่อแทนที่คำพูด หากเราแสดงข้อความก่อน ยูสเซอร์จะต้องอ่านข้อความนี้ทุกครั้งเลย แทนที่จะให้เค้าดูแค่ไอคอนก็เข้าใจแล้วว่าเป็นหัวข้ออะไร แต่ถ้านำไอคอนไว้ด้านหน้าก่อนข้อความ ยูสเซอร์จะดูที่ไอคอนและผูกความสัมพันธ์กับข้อความด้านหลัง พอเค้าเห็นไอคอนนี้ครั้งต่อไป ยูสเซอร์ก็ไม่จำเป็นต้องไปเสียเวลาอ่านข้อความแล้ว เพราะเราสื่อข้อความผ่านภาพ (ไอคอน) แทน ซึ่งพิสูจน์แล้วว่ามันมีประสิทธิภาพด้านการจดจำดีกว่าเป็นตัวหนังสือครับ หากอยากแบ่งหมวดหมู่ให้ชัดเจนยิ่งขึ้น เราอาจเลือกใช้เส้นสีที่ดูชัดเจนกว่านี้ก็ได้ครับ เช่น สีเหลือง (มีใช้ในหน้าอื่นของ app ผมจึงยืมสไตล์นี้มานำเสนอ) แต่ที่เป็นอยู่ก็โอเคแล้วล่ะ UI ปฏิทิน ปฏิทินเพื่อเลือกวันเข้าพัก คราวนี้เราต้องเลือกวันเข้าพักและวันออก รูปแบบวันที่แสดง ผมคิดว่าเหมาะสมดีในการที่จะบอกวันด้วย (จันทร์, อังคาร, …) นอกเหนือจากวันที่, เดือน, และปี การไม่บอกวันก็ไม่ได้เป็นปัญหาใหญ่หลวงอะไรครับ แต่การบอกวันด้วยจะช่วยเพิ่มความมั่นใจให้แก่ยูสเซอร์ว่าเค้าได้เลือกวันที่ถูกต้องแล้ว UI ปฏิทินโดยตัวมันเองทำออกมาได้ดีทีเดียวครับ เพราะมีการใช้ animation ในการปรากฎและจิ้มเลือกได้ง่าย ตรงเดือนก็เลือกใช้ UI ผสม ให้มาทั้งแบบ dropdown และแบบปุ่มเลื่อน ไป/กลับ แต่การทำหัวปฏิทินให้มีสีเดียวกับพื้นหลังเป็นการทำลายความสัมพันธ์ระหว่างช่องที่เราคลิกเลือกกับส่วนปฏิทิน ด้านล่างปฏิทินก็มี whitespace น้อยเกินไป จนเหมือนว่า ปฏิทินเลือกวันเข้าพักจะสัมพันธ์กับช่องเลือกวันออกเสียมากกว่าอีก ทางแก้ก็แค่ทำหัวปฏิทินสีขาว แล้วใช้ whitespace ที่ด้านล่างปฏิทินเยอะๆ เลยครับ ไม่ต้องกลัวหรือเสียดายพื้นที่ (design ด้านบนอันขวามือ) เท่านี้ยูสเซอร์ก็ไม่หลงแล้วครับ การเลือกจำนวนผู้เข้าพัก การเลือกจำนวนผู้เข้าพัก ส่วนช่องเลือกจำนวนผู้เข้าพัก หากไม่มีในตัวเลือก เราสามารถคลิกที่ตัวเลือก ‘More Options’ ได้ จากนั้นระบบจะสร้างบล็อคเพิ่มให้เราสามารถระบุจำนวนผู้ใหญ่และเด็กได้ตามใจชอบ แต่ UI ที่ไม่จำเป็นในกรณีนี้ก็คือ การเพิ่มจำนวนห้องครับ เพราะเราไม่จำเป็นต้องรู้ถึงว่า ห้องนี้ลูกค้าจะพักกี่คน ห้องนู้นจะพักกี่คน เพราะในความจริง ลูกค้าก็จะสลับหรือจัดการกันเองภายใน แต่ข้อมูลที่เราต้องการรู้จริงๆ ก็คือจำนวนห้องที่ต้องการเท่านั้นเองครับ ฉะนั้นสิ่งที่เราต้องถามก็คือ จำนวนผู้เข้าพักที่เป็นผู้ใหญ่, จำนวนเด็ก, และจำนวนห้องครับ การแสดงผลหน้ารายการโรงแรม หน้ารายการโรงแรม จากหน้าหลัก เมื่อเราคลิกปุ่มค้นหา จะเข้าสู่หน้ารายการโรงแรมที่เรากำลังค้นหา โดยหากระบบกำลังโหลดข้อมูลก็จะมี popup แสดงสถานะบอกให้เราทราบ (UI feedback) และเมื่อโหลดเสร็จก็จะขึ้นรายการโรงแรม, ข้อมูลบอกจำนวนห้องที่ถูกจองไปในสัปดาห์, พร้อมฟังก์ชันการจัดเรียงข้อมูล, ตัวกรอง, และหน้าดูแผนที่ ตัวเลือกเรียงลำดับและตัวกรอง ตัวเลือกการจัดเรียงลำดับและตัวกรองการค้นหา หน้าตัวเลือกการจัดเรียงข้อมูลและหน้าตัวกรองการค้นหาก็ทำออกมาได้ดี ตรงปุ่ม ‘APPLY FILTERS’ ของหน้าตัวกรอง หากยังไม่มีการเลือกตัวเลือกใด เราอาจสามารถทำเป็นสถานะ ‘ไม่พร้อมใช้งาน’ (disable) ก็ได้ หรือถ้าไม่ทำก็ไม่ได้ส่งผลกระทบกับประสบการณ์โดยรวม หน้าตัวกรองนี้ยังมีปุ่ม ‘CLEAR FILTERS’ ไว้ใช้สำหรับล้างตัวกรองทั้งหมดให้อีกด้วย คิดมารอบคอบดีจริง การแสดงผลตัวกรอง ต้วเลือกตัวกรองและการแสดงผลลัพธ์เมื่อคลิกเลือก ตัวกรองที่จะให้ผลลัพธ์เป็น 0 ก็กันไม่ให้ยูสเซอร์เลือกเลย ดีมากๆ และพอเลือกตัวกรองเสร็จ ที่หน้ารายการโรงแรมก็จะขึ้นให้เห็นว่าตอนนี้กำลังใช้ตัวกรองอะไรอยู่ จะลบตัวกรองแต่ละตัวก็ไม่จำเป็นต้องกลับไปหน้าตัวกรอง เพราะสามารถลบได้จากการคลิกที่ปุ่มกากบาทข้างๆ ตัวกรองแต่ละตัวได้เลย แผนที่ แผนที่แสดงตำแหน่งโรงแรมและ popup รายะละเอียด หน้าแผนที่ ผมลองคลิกเล่นที่ฟังก์ชันด้านล่าง พบว่ามันทำงานผิดปกติ โดยส่วนตัวผมคิดว่ามันไม่มีความจำเป็นด้วยซ้ำ เพราะ Sort ไม่สามารถทำงานร่วมกับการแสดงผลแบบแผนที่ได้ Filter ควรให้จัดการเพียงที่เดียวจากหน้ารายการโรงแรมก็เพียงพอแล้ว List เพื่อกลับไปเป็นการแสดงผลแบบรายการ ยูสเซอร์สามารถใช้ปุ่ม Back ที่อยู่ด้านบนซ้ายแทนได้ อีกทั้งข้อมูลใน popup พอคลิกที่หมุด ก็ดูน้อยเกินและลำดับการแสดงข้อมูลก็แปลกๆ ซึ่งโดยปกติเราจะแสดงชื่อโรงแรม (หัวข้อของ popup) ก่อนแล้วต่อท้ายด้วยจำนวนดาว ส่วนข้อมูลที่เราจะใส่เพิ่มก็อาจเป็นรูปภาพ, คะแนนรีวิว, ดีล เป็นต้น หมายเลขที่อยู่ภายในหมุดก็ดูไม่มีความหมายอะไร (หรือผมไม่รู้คนเดียวหนอ) ควรจะเป็นเปลี่ยนไปเป็นแสดงราคาแทนน่าจะดีกว่าครับ รายละเอียดแต่ละรายการ การใช้ไอคอนไม่สื่อความหมายไม่ชัดเจน กลับมาที่หน้ารายการโรงแรม ผมเห็นไอคอนแปลกเขียวๆ มีเครื่องหมายถูกอยู่ข้างใน การสื่อความเช่นนี้สร้างความคลุมเครือแก่ยูสเซอร์นะครับ เพราะหากไม่ใช่ไอคอนที่เป็นสากลแล้ว เราจำเป็นต้องใช้ข้อความกำกับข้างๆ ไอคอนเสมอนะครับ อย่างกรณีนี้ ไอคอนสื่อว่า โรงแรมนี้มีดีลพิเศษ รายการโรงแรมที่สามารถคลิกเลือกได้หลายๆ ส่วน แต่ละรายการผมสามารถเลือกคลิกได้ทั้งหมด 4 ส่วน แต่มีเพียงส่วนเดียวที่จะนำยูสเซอร์ออกไปข้างนอกหรือลิงค์ไปยังเว็บอื่น ส่วนที่เหลือจะเป็นการคลิกเพื่อดูข้อมูลโรงแรมภายในระบบ HotelsCombined สังเกตไหมครับว่า ในหน้ารายการโรงแรมนี้ตั้งแต่ส่วนเมนูบาร์ลงมา จะเป็นการแสดงผลแบบฝังหน้า HTML ลงบน app อีกที ทำให้ภาพที่แสดงในหน้านี้ ไม่คมชัดเหมือนอย่าง app ที่พัฒนาแบบ native ทั้งหมดน่ะครับ ส่วนท้ายของหน้าจอรายการโรงแรม ส่วนท้ายของหน้าแสดงรายการโรงแรม ถ้าหากเราเลื่อนหน้ารายการลงมาเยอะพอสมควร เราจะเห็นแถบ Back to Top เพื่อช่วยให้เรากลับสู่ส่วนด้านบนของหน้าได้อย่างรวดเร็ว ส่วนด้านท้ายของหน้าก็มีปุ่มเพื่อไปหน้าถัดไป ซึ่งน่าจะมีฟังก์ชันให้เราปรับได้ว่า เราต้องการดูจำนวนรายการต่อหน้าเท่าไร (items per page) แล้วมีข้อมูลบอกหน่อยว่าเรากำลังอยู่ที่หน้าที่เท่าไร กำลังแสดงรายการลำดับไหนถึงไหน ด้านล่างสุดก็จะเป็นส่วนแนะนำสถานที่ใกล้เคียงซึ่งใช้ภาพมาช่วยเพื่อความน่าสนใจแทนที่จะเป็นลิงค์ข้อความเฉยๆ หน้าจอรายละเอียดโรงแรม หน้ารายละเอียดโรงแรม (ข้อมูลภายใน app) กรณีที่ผมคลิกเลือกดูรายละเอียดโรงแรมจาก HotelsCombined เข้ามาครั้งแรกก็มี popup Act Quick! ที่ใช้กลยุทธ์ social proof (กลยุทธ์เสียงส่วนใหญ่) มาช่วยเพิ่มจุดขายให้กับโรงแรมนี้ ที่ตรงภาพโรงแรมก็มีบอกลำดับภาพที่กำลังดูและจำนวนภาพทั้งหมดให้ยูสเซอร์รู้ (สร้างความคาดการณ์ให้กับยูสเซอร์และกระตุ้นให้คลิกดู) เราสามารถเลือกดูภาพโรงแรมขนาดใหญ่ขึ้นได้ด้วยการคลิกที่ไอคอนด้านมุมขวาล่าง จากนั้น app จะเปิดหน้าแกลอรี่โรงแรมขึ้นมา สิ่งที่ผมชอบคือ มีการบอกใบ้ว่าถ้าอยากดูภาพใหญ่กว่านี้ ก็ให้ดูในแนวนอน ซึ่งภาพถ่ายส่วนใหญ่จะเป็นแบบ landscape ซะด้วยซิ app จึงขึ้นข้อความแนะนำเยี่ยงนี้ รายการห้องพักและรีวิว รายการหัองพักและข้อมูลเสริมอื่นๆ เลื่อนไปด้านล่างของหน้ารายละเอียดโรงแรมจะเป็นรายการห้องพัก, สิ่งอำนวยความสะดวก และรีวิวของผู้เข้าพัก ตรงส่วนรีวิวที่ใช้ไอคอนชูนิ้วโป้ง ผมคิดว่าน่าจะเปลี่ยนเป็นไอคอนที่แทนหัวข้อที่ผู้เข้าพักรีวิวน่าจะดีกว่า เช่น รีวิวเรื่องสถานที่ ก็ใช้ไอคอนหมุด เป็นต้น แล้วก็เปลี่ยนตัวหนังสือให้เป็นตัวเลขก็จะช่วยให้ข้อความสั้นลงและเป็นมิตรต่อผู้อ่านมากขึ้น การแสดงผลเมื่อเลือกห้องพัก หน้าจอเว็บ agency อื่นที่ทำธีมให้เสมือนว่ายังอยู่ภายใน app เดิมอยู่ เมื่อผมเลือกห้องที่จะเข้าพักและคลิกแล้ว app จะเตรียมส่งเราไปหน้าเว็บอื่น โดยมีหน้าโหลดข้อมูลแสดงความยินดีที่เรากำลังจะเสียตังค์แล้ว ^^ พอโหลดหน้าเว็บเสร็จ app จะเปลี่ยน UI ไปเป็น browser แทน เพียงแต่ทำธีมให้ดูเหมือนว่ายังคงใช้งาน app อยู่ครับ ข้อเสียของการเป็นเว็บเปรียบเทียบราคาคือ พอเลือกห้องและถูกมาปล่อยลงที่หน้าเว็บอื่น มันกลับไม่มีตัวบอกให้เรารู้เลยว่าห้องที่เราตัดสินใจพัก (จากในหน้า app) คือห้องไหนกันแน่ในหน้าเว็บ หากเว็บนั้นทำ UI รองรับคำสั่งที่ส่งมาจากที่อื่นเพื่อระบุห้องที่ยูสเซอร์ได้เลือกมาก่อนหน้าก็โชคดีไป แต่ถ้าไม่มีก็ไม่สามารถไปบังคับเค้าให้ทำได้ นั่นหมายความว่า ยูสเซอร์ต้องใช้กำลังสมองใหม่ในการค้นหาห้องพัก ซ้ำร้ายกว่านั้น ราคาห้องที่ผมเห็นในหน้า app กลับไม่มีให้เห็นในหน้าเว็บที่ถูกส่งมานี่เลย แล้วราคาที่แสดง เธอเอามาจากไหน T_T คุณหลอกดาว เรื่องการชำระเงินก็เป็น UI ของเว็บนั้นๆ ผมจึงไม่พูดถึงในบทความนี้นะครับ เมนู เมนูของ app มาเก็บตกเรื่องเมนูซึ่งใช้สีพื้นหลังเข้มเพื่อแบ่งแยกออกจากหน้าจอหลักอย่างชัดเจน ตัว app จะมีการเก็บบันทึกโรงแรมที่เราเคยดู, คำค้นที่เราเคยค้นหา, และโรงแรมที่เราแอบปันใจให้ (โรงแรมที่เราเลือกปุ่มหัวใจในหน้าโรงแรม) มาแสดงในเมนู ซึ่งฟังก์ชันเหล่านี้เป็นมีประโยชน์มากๆ เลยครับ เพราะบางครั้งโรงแรมที่เราอยากพักจริงๆ จำได้ว่าเคยคลิกดู แต่กลับนึกชื่อไม่ออกเฉยเลย หน้าจอเข้าใช้งานระบบและลงทะเบียน หน้าจอลงชื่อเข้าใช้งาน หน้าจอลงชื่อเข้าใช้มีส่วนต้องปรับปรังเล็กน้อย เรื่องของเส้นสีเหลืองที่ดูจะขวางกั้นหัวข้อกับส่วนเนื้อหามากเกินไป และปุ่มล้างข้อความที่สามารถซ่อนได้ในตอนแรก แล้วค่อยแสดงเมื่อยูสเซอร์เริ่มพิมพ์ตัวอักษรแรก (Progressive Disclosure UI) หน้าจอลงทะเบียนใช้งาน เช่นเดียวกับหน้าลงทะเบียน แต่เพิ่มเติมตรงที่ checkbok บอกรับอีเมล ถ้าอยากให้ยูสเซอร์รับอีเมลเยอะๆ แล้วล่ะก็ ค่าดีฟอลต์ของ checkbok ควรจะเป็นติ๊กถูกไว้เลย เพราะบางคนอยากได้รับแต่ไม่ได้อ่านข้อความด้านล่างปุ่มซึ่งคิดว่าไม่สำคัญ หรือบางคนจะรับก็ได้ ไม่รับก็ได้ แต่ระบบดันไม่เลือกให้ไว้ตั้งแต่ตอนแรก เนื่องจากความขี้เกียจ ก็เลยไม่เลือกติ๊กซะเลย ก็เสียโอกาสตรงนี้ไปอีก ค่าดีฟอลต์ของ UI จึงเป็นควรใส่ใจให้มากขึ้นครับ สรุปคะแนน ความสวยงาม: 7/10 (แนว Flat design, เลือกธีมสีสื่อถึงแบรนด์, จัดวาง layout ได้ดี, แต่หน้าแสดงรายการโรงแรมเชื่อว่าสามารถทำได้ดีกว่าการที่ฝัง HTML บนตัว app) ความถูกต้องตามหลัก UI: 7/10 (ไม่ค่อยติดปัญหาการใช้งานหลักเท่าไร, บอกสถานะการโหลดข้อมูลให้กับยูสเซอร์ได้ทราบ, ตัวกรองเก็บรายละเอียดขั้นตอนการใช้งานเป็นอย่างดี, ปฏิทินขาดความสัมพันธ์กับช่องเลือกวันเข้า/ออก, หน้าแผนที่ยังต้องปรับปรุงอีกเยอะ) การแสดงผลบนมือถือ: 7/10 (หน้ารายการโรงแรม แต่ละรายการค่อนข้างใช้ตัวหนังสือเล็กเกินไป และ graphics ไม่ได้มีความละเอียดระดับ Retina display, การกดคลิกทำได้ดี ไม่มีไปพลาดโดนลิงค์อื่นที่ไม่ต้องการ) ความคิดสร้างสรรค์: 8/10 (ออกแบบตัวมาสคอตเพื่อใช้เป็นตัวกลางในการเล่าเรื่องได้สนุกดี ทำให้แบรนด์ไม่น่าเบื่อและจดจำง่าย, มีการบอกใบ้การดูภาพโรงแรมในแนวขวาง, ปฏิทินตรงส่วนเดือนมีการผสมผสาน UI ในการเลือกเดือน) ความตอบสนองต่อเป้าหมายของธุรกิจ/องค์กร: 6/10 (ราคาที่ไม่สอดคล้องกันระหว่างหน้า app กับเว็บ agency ทำให้ลูกค้าเกิดความไม่ไว้วางใจในการใช้งาน app) รวม: 7 คะแนน, พอใช้