รีวิวเว็บ

รีวิว app HotelsCombined

0

mascot-hotelcombined

มาสคอตของบริการ HotelsCombined

ไม่ใช่จะมาโฆษณาลูกอมฮอลล์สูตรเย็นซ่าส์ชื่นใจที่มีเหล่าหมีขาวเป็นตัวประกอบนะครัช แต่ผมจะมารีวิว app ที่ใช้สำหรับดูราคาเปรียบเทียบโรงแรมทั่วโลกโดยมีเจ้าหมีใหญ่ขั้วโลกเป็นพระเอกของบริการนี้ครับ ซึ่งหากใครสะดวกใช้งานผ่านเว็บก็ให้เข้าไปใช้งานได้ที่ www.hotelscombined.co.th หรือใครชอบแบบ mobile app ก็เข้าไปดาวน์โหลด app HotelsCombined ได้ทั้งใน app Store หรือ Google Play ก็ได้เช่นกันครับ โฆษณาให้เค้าก่อนที่จะรีวิว เป็นมารยาท ^^!

hotel-combined-01

หน้าจอ Splash Screen ขณะกำลังโหลดข้อมูล (ต่อเน็ต)

เปิด app มา เราจะเจอหน้าเจ้าหมีใหญ่คอยต้อนรับเราที่หน้า splash screen แต่หากใครไม่ต่อใช้งาน Internet จะหยุดอยู่ที่หน้าจอนี้ ซึ่งไม่ควรอย่างยิ่งนะครับ อย่างน้อยให้ยูสเซอร์เข้าไปเห็นหน้าจอแรกหน่อย จะได้รู้ว่า app ใช้งานอะไรได้บ้าง

หน้าจอหลัก

hotel-combined-02

หน้าจอฟอร์มการค้นหาหลัก

หน้าจอหลักของ app นี้คือฟอร์มการค้นหาโรงแรม โดยมีปุ่มให้ค้นหาโรงแรมแบบทันควันในค่ำคืนนี้รอบๆ ตัวเรา (Hotel for tonight near me) ซึ่งเหมาะมากสำหรับผู้ใช้งานบนมือถือ

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

ด้านล่างเป็นคำโฆษณาของบริการ ตรงข้อความแสดงส่วนลด (save up to 80%) เราสามารถใช้สีแดงน่าจะเด่นและกระตุ้นอารมณ์ดีกว่า เพราะเป็นสีที่ค่อนข้างเป็นมาตรฐานไปแล้ว หากเราพูดถึงเรื่องการลดราคา

การแสดงผลการค้นหา

hotel-combined-06

ตัวเลือกแนะนำเมื่อเริ่มพิมพ์คำค้น

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

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

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

UI ปฏิทิน

hotel-combined-07

ปฏิทินเพื่อเลือกวันเข้าพัก

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

UI ปฏิทินโดยตัวมันเองทำออกมาได้ดีทีเดียวครับ เพราะมีการใช้ animation ในการปรากฎและจิ้มเลือกได้ง่าย ตรงเดือนก็เลือกใช้ UI ผสม ให้มาทั้งแบบ dropdown และแบบปุ่มเลื่อน ไป/กลับ

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

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

การเลือกจำนวนผู้เข้าพัก

hotel-combined-08

การเลือกจำนวนผู้เข้าพัก

ส่วนช่องเลือกจำนวนผู้เข้าพัก หากไม่มีในตัวเลือก เราสามารถคลิกที่ตัวเลือก ‘More Options’ ได้ จากนั้นระบบจะสร้างบล็อคเพิ่มให้เราสามารถระบุจำนวนผู้ใหญ่และเด็กได้ตามใจชอบ

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

การแสดงผลหน้ารายการโรงแรม

hotel-combined-09

หน้ารายการโรงแรม

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

ตัวเลือกเรียงลำดับและตัวกรอง

hotel-combined-10

ตัวเลือกการจัดเรียงลำดับและตัวกรองการค้นหา

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

หน้าตัวกรองนี้ยังมีปุ่ม ‘CLEAR FILTERS’ ไว้ใช้สำหรับล้างตัวกรองทั้งหมดให้อีกด้วย คิดมารอบคอบดีจริง

การแสดงผลตัวกรอง

hotel-combined-11

ต้วเลือกตัวกรองและการแสดงผลลัพธ์เมื่อคลิกเลือก

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

แผนที่

hotel-combined-12

แผนที่แสดงตำแหน่งโรงแรมและ popup รายะละเอียด

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

  • Sort ไม่สามารถทำงานร่วมกับการแสดงผลแบบแผนที่ได้
  • Filter ควรให้จัดการเพียงที่เดียวจากหน้ารายการโรงแรมก็เพียงพอแล้ว
  • List เพื่อกลับไปเป็นการแสดงผลแบบรายการ ยูสเซอร์สามารถใช้ปุ่ม Back ที่อยู่ด้านบนซ้ายแทนได้

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

หมายเลขที่อยู่ภายในหมุดก็ดูไม่มีความหมายอะไร (หรือผมไม่รู้คนเดียวหนอ) ควรจะเป็นเปลี่ยนไปเป็นแสดงราคาแทนน่าจะดีกว่าครับ

รายละเอียดแต่ละรายการ

hotel-combined-14

การใช้ไอคอนไม่สื่อความหมายไม่ชัดเจน

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

hotel-combined-15

รายการโรงแรมที่สามารถคลิกเลือกได้หลายๆ ส่วน

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

สังเกตไหมครับว่า ในหน้ารายการโรงแรมนี้ตั้งแต่ส่วนเมนูบาร์ลงมา จะเป็นการแสดงผลแบบฝังหน้า HTML ลงบน app อีกที ทำให้ภาพที่แสดงในหน้านี้ ไม่คมชัดเหมือนอย่าง app ที่พัฒนาแบบ native ทั้งหมดน่ะครับ

ส่วนท้ายของหน้าจอรายการโรงแรม

hotel-combined-17

ส่วนท้ายของหน้าแสดงรายการโรงแรม

ถ้าหากเราเลื่อนหน้ารายการลงมาเยอะพอสมควร เราจะเห็นแถบ Back to Top เพื่อช่วยให้เรากลับสู่ส่วนด้านบนของหน้าได้อย่างรวดเร็ว ส่วนด้านท้ายของหน้าก็มีปุ่มเพื่อไปหน้าถัดไป ซึ่งน่าจะมีฟังก์ชันให้เราปรับได้ว่า เราต้องการดูจำนวนรายการต่อหน้าเท่าไร (items per page) แล้วมีข้อมูลบอกหน่อยว่าเรากำลังอยู่ที่หน้าที่เท่าไร กำลังแสดงรายการลำดับไหนถึงไหน

ด้านล่างสุดก็จะเป็นส่วนแนะนำสถานที่ใกล้เคียงซึ่งใช้ภาพมาช่วยเพื่อความน่าสนใจแทนที่จะเป็นลิงค์ข้อความเฉยๆ

หน้าจอรายละเอียดโรงแรม

hotel-combined-16

หน้ารายละเอียดโรงแรม (ข้อมูลภายใน app)

กรณีที่ผมคลิกเลือกดูรายละเอียดโรงแรมจาก HotelsCombined เข้ามาครั้งแรกก็มี popup Act Quick! ที่ใช้กลยุทธ์ social proof (กลยุทธ์เสียงส่วนใหญ่) มาช่วยเพิ่มจุดขายให้กับโรงแรมนี้

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

รายการห้องพักและรีวิว

hotel-combined-19

รายการหัองพักและข้อมูลเสริมอื่นๆ

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

การแสดงผลเมื่อเลือกห้องพัก

hotel-combined-18

หน้าจอเว็บ agency อื่นที่ทำธีมให้เสมือนว่ายังอยู่ภายใน app เดิมอยู่

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

พอโหลดหน้าเว็บเสร็จ app จะเปลี่ยน UI ไปเป็น browser แทน เพียงแต่ทำธีมให้ดูเหมือนว่ายังคงใช้งาน app อยู่ครับ

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

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

ซ้ำร้ายกว่านั้น ราคาห้องที่ผมเห็นในหน้า app กลับไม่มีให้เห็นในหน้าเว็บที่ถูกส่งมานี่เลย แล้วราคาที่แสดง เธอเอามาจากไหน T_T คุณหลอกดาว

เรื่องการชำระเงินก็เป็น UI ของเว็บนั้นๆ ผมจึงไม่พูดถึงในบทความนี้นะครับ

เมนู

hotel-combined-20

เมนูของ app

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

หน้าจอเข้าใช้งานระบบและลงทะเบียน

hotel-combined-04

หน้าจอลงชื่อเข้าใช้งาน

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

hotel-combined-05

หน้าจอลงทะเบียนใช้งาน

เช่นเดียวกับหน้าลงทะเบียน แต่เพิ่มเติมตรงที่ 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 คะแนน, พอใช้

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

UI ดักการตัดสินใจด้านลบของยูสเซอร์

Previous article

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

Next article

You may also like

Comments

Leave a reply

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