รีวิวเว็บ รีวิวเว็บ Kayak By uiblogaziner December 6, 20144407 views ShareTweet 0 ห่างหายไปนานกับการรีวิวเว็บ ครั้งนี้ผมขอเลือกรีวิวเว็บ Kayak.com ซึ่งเป็นเว็บที่ใช้ดูเปรียบเทียบราคาตั๋วเครื่องบิน, โรงแรม, เช่ารถ, หรือจะเหมาเป็นเพจเกจท่องเที่ยวเลยก็มีครับ Kayak เป็นเว็บที่มีการออกแบบที่สวยแบบเรียบง่าย, ทันสมัย และมีการเก็บรายละเอียดที่น่าสนใจเอามากๆ จนอยากเอามาแบ่งปันและเขียนอธิบายให้เห็นชัดเจนมากยิ่งขึ้น เมื่อเราเปิดหน้าเว็บมาจะเห็นได้ชัดว่ามีการออกแบบที่ใช้งานพื้นที่ว่าง (white space) ได้อย่างดีเอามากๆ เลยครับ เพราะทำให้สายตาเราจับจ้องไปที่ช่องค้นหาก่อนเป็นอันดับแรก ซึ่งเป็นสิ่งที่ดีไซเนอร์อยากให้ยูสเซอร์กระทำเป็นอันแรกอยู่แล้วครับ ตรงส่วนระบุวันที่เดินทาง ผมชอบเอามากๆ เลยครับ ที่ทางผู้ออกแบบเลือกใช้ animation เลื่อนปฏิทินเวลาเราคลิกเลือกวันที่ขากลับ (สำหรับค้นหาเที่ยวบิน) ใส่ใจในรายละเอียดจริงๆ ทำให้เกิดความต่อเนื่องของการเลือกที่สัมพันธ์กัน แทนที่จะเป็นการเปิดปิดปฏิทินเหมือนที่หลายๆ เว็บใช้กัน ในขั้นตอนสุดท้ายเราต้องเลือกจำนวนคนเดินทางและประเภทชั้นโดยสาร จะเห็นว่า Kayak ออกแบบให้เป็นกลุ่มข้อมูลเดียวกัน พอเราคลิกเลือก จึงจะแตกเป็นรายการย่อยให้เราเลือกอย่างละเอียดอีกที ทำให้เราไม่จำเป็นต้องแสดงตัวเลือกทั้งหมดในตอนแรก เพราะจะทำให้ฟอร์มดูเยอะ จนผู้ใช้งานเกิดความรู้สึกว่าต้องใช้ความพยายามมากในการกรอกข้อมูลค้นหานี้ เสร็จแล้วพอเรากดปุ่มค้นหา ความจริงแล้วเว็บจะเปิดแท็บใหม่เพื่อแสดงรายการผลลัพธ์ที่ค้นหา และที่หน้าแท็บเดิมนี้ก็จะปรากฏ pop-up ให้เราสมัครใช้บริการเมลแจ้งเตือน พูดง่ายๆ ก็คือ อยากได้อีเมลไปใช้ทำ email marketing ด้วยแหละนะ ฉลาดจริงๆ ที่แท็บใหม่หน้าผลลัพธ์ หากข้อมูลกำลังโหลดอยู่ก็มีตัวบ่งชี้ตอบสนองกับยูสเซอร์ว่าระบบกำลังค้นหาข้อมูลอยู่นะ (loading icon) พร้อมมีตัวแถบบอกว่าดำเนินการไปเท่าไรแล้ว (progress bar) พอโหลดเสร็จ เราจะเห็นว่ารายการแรกของผลลัพธ์ไม่ใช่มาจากข้อมูลของระบบ แต่เป็นโฆษณาที่แอบเนียนปนมา (ตรงที่ไฮไลท์สีฟ้าๆ) ซึ่งคงเป็นแบบเดียวกับ Google Adwords คือ จะแสดงรายการแรกๆ ให้กับสปอนเซอร์ที่ยอมจ่ายตังค์มากหน่อย ทางด้านซ้ายก็เป็นส่วนของฟิลเตอร์ ไว้กรองผลลัพธ์ตามเงื่อนไขต่างๆ ตามที่เราต้องการ ส่วนด้านขวาที่เป็นแบนเนอร์โฆษณา ผมไม่ได้แสดงในภาพนะครับ พอเอาเมาส์ไปวางไว้รายการใด ก็มีกรอบชัดเจนว่าเรากำลังเลือกรายการนั้นอยู่ พร้อมแสดง action เพิ่มเติมที่เป็น check box หน้าเที่ยวสายการบิน เราไม่จำเป็นต้องแสดง check-box ตั้งแต่ต้นให้เห็น เพราะเราจะเลือกได้ เราต้องสนใจรายการนั้นก่อน ไม่งั้นแสดงไปก็มีแต่ทำให้ UI ดูเลอะเทอะเกินความจำเป็นครับ (ดูเรื่อง progressive disclosure ประกอบ) ตัวคัดกรองผมว่า Kayak มีตัวเลือกให้ค่อนข้างละเอียดมากทีเดียวครับ ตั้งแต่เวลาที่ใช้ในการเดินทางทั้งไปและกลับ (Flight Leg), เวลาที่มีการพักระหว่างเดินทาง (Layover), ประเภทเครื่องบิน, ราคา แต่ที่ผมอยากจะชี้ให้เห็นว่า ตรงสไลด์เลื่อนเพื่อกำหนดช่วงตัวเลขนั้น บางอันจะมีแค่ให้เลื่อนกำหนดเพดานสูงสุดเท่านั้น ส่วนค่าขั้นต่ำก็ต้องเป็นไปที่อยู่ในระบบ (เพราะมันไม่มีต่ำกว่านี้อีกแล้วนี่นา) เช่น ตัวกรองราคา ก็เริ่มจาก 2044 ดอลลาร์ ต่ำกว่านี้ไม่มีแล้ว จึงไม่มีความจำเป็นต้องทำสไลด์เลื่อนเพื่อกำหนดราคาต่ำสุดนั่นเองครับ อีกตัวคัดกรองนึงที่ผมตื่นตาตื่นใจมาก คือเราสามารถเลือกช่วงเวลาบินระหว่างวัน พร้อมๆ กับเห็นเลยว่าช่วงไหนราคาถูกหรือแพง บอกมาเป็นกราฟชัดเจนสุดๆ นับถือๆ หรือว่าจะเป็นรายละเอียดขั้นเทพที่พอเอาเมาส์ไปวางที่ตัวเลือก จะมีคำว่า only ปรากฏข้างหน้าราคา ซึ่งเป็นจิตวิทยาจริงๆ ทำให้เรารู้สึกว่ามันช่างถูกอะไรซะอย่างนี้ ฟินเวอร์ เด็ดกว่านั้น เราสามารถเลือกมุมมองที่เป็นเหมือนตารางเวลา ตรงเมนูด้านขวาบน ‘Segment’ เพื่อให้เห็นภาพชัดเจนเมื่อเทียบระหว่างสายการบินต่างๆ เช่นเดียวกันเมื่อเราเอาเมาส์ไปวางที่รายการอันใดอันหนึ่ง ก็จะมีรายละเอียดปรากฏขึ้นมา พอคลิกก็เห็นรายละเอียดยิบเช่นเคย กลับมาที่มุมมองเดิม (Round-trip) หากผมอยากดูรายละเอียดของไฟลท์ ก็เลือกคลิกที่ลิงก์ ‘Show details’ ก็จะมีรายละเอียดปรากฏให้เห็นสมใจ จำไว้เสมอนะครับว่า ถ้าเรามีลิงค์หรือปุ่มเพื่อไว้แสดงข้อมูลเพิ่มเติม พอกดแล้ว ปุ่มหรือลิงค์นั้นต้องทำหน้าที่กลายเป็นปุ่มหรือลิงค์ที่ใช้ซ่อนข้อมูล หรือกลับไปสถานะก่อนหน้า พอเราตัดสินใจได้แล้วว่าจะบินไฟลท์ไหน Kayak ก็จะเปิดอีกแท็บใหม่ให้กับเรา (อีกแล้ว) ส่วนแท็บเก่าก็เอามาขายของเพิ่มอีก เช่น จองโรงแรม, เช่ารถ เป็นต้น Kayak เป็นเสมือนแค่พ่อค้าคนกลางนะครับ เพราะงั้นเราจึงเห็นว่าจริงๆ แล้ว เรากำลังซื้อของจากเว็บ Airfare ก็อย่าตกอกตกใจอะไรไปนะครับ ตรงกรอบที่แสดงรายการจำนวนเงินที่เราต้องจ่าย เมื่อเราเลื่อนหน้าลง ส่วนนี้จะอยู่ติดกับขอบบนตลอด (ไฮไลท์สีฟ้า) เพื่อให้เราเห็นจำนวนเงินตลอดจะได้สบายใจพอเลื่อนไปถึงปุ่มกดจ่ายเงินที่อยู่ด้านล่างมากๆ ฟอร์มที่ให้กรอกข้อมูลนักเดินทาง ตรงเบอร์มือถือที่เป็นรหัสประเทศ ผมว่า Kayak สามารถปรับปรุงให้ดียิ่งขึ้นครับ เพราะพอกดเลือก dropdown list แล้ว ผมไม่สามารถพิมพ์ t แล้วตัวเลือกวิ่งไปหาประเทศที่ขึ้นต้นด้วยตัว t อาจเป็นเพราะไปติดปัญหาเรื่องตัวเลขที่ไปอยู่ด้านหน้าของชื่อประเทศก็เป็นได้ เช่น ประเทศไทย จะเป็น +66 Thailand ส่วนวันเกิด Kayak เลือกใช้ dropdown list แยกวัน-เดือน-ปี แทนที่จะเป็น pop-up ปฏิทิน เพราะวันเกิดมันต้องย้อนหลายปี ย้อนอดีตค่อนข้างไกล พอเลือกปีได้ ต้องย้อนเดือนอีก เหนื่อยแน่ครับสำหรับคนอายุ 20 ขึ้น หากกรอกข้อมูลใดไม่ครบหรือผิดพลาดก็จะมีตัวแจ้งเตือน ถัดมาด้านล่าง จะมีฟอร์มให้เราสมัครสมาชิก แต่จะเห็นว่า เราต้องกรอกอีเมลแอดเดรสอีกรอบ ดูแล้วทำให้ยูสเซอร์เหนื่อยเพิ่มขึ้นนะ อาจลองไปใช้วิธี ‘Register on the fly’ เหมือนที่ Lazada ทำก็โออยู่นะครับ หัวข้อที่ 3 ก็ขายประกันเพิ่ม เราเรียกขั้นตอนนี้ว่า Upsell ครับ เช่น ถ้าเป็นเช่ารถ ก็พยายามเสนออัพเกรดรถ, ขายมือถือ ก็พยายามเสนอขายเคสมือถือ เป็นต้น คือ ขายของจนวินาทีสุดท้ายหากยังไม่ได้กดจ่ายเงิน แล้วก็กรอกรายละเอียดการจ่ายตังค์ให้เสร็จสิ้น สังเกตว่า Kayak มีการแจ้งข้อความบอกว่าระบบนั้นได้รับการเข้ารหัสที่รัดกุมปลอดภัยอย่างดี ส่วนนี้ทำให้ยูสเซอร์อุ่นใจได้มากๆ เลยนะครับ มีดีต้องบอก โดยเฉพาะเรื่องเงินเรื่องทอง มาถึงขั้นตอนสุดท้าย ก็ให้เราตรวจสอบข้อมูลอีกรอบ พร้อมเงื่อนไขต่างๆ นานา โดยส่วนตัวผมคิดว่ามันเป็นฟอร์มที่ยาวเอาเรื่องเลยครับ อาจลองพิจารณาซอยขั้นตอนย่อยๆ จะช่วยลดอาการล้าจากการกรอกฟอร์มได้ดีทีเดียว Kayak ยังมีลูกเล่นที่น่าสนใจอีก ให้เราคลิกเลือกที่เมนู ‘Explore’ ที่อยู่ด้านบน แล้วห้เราใส่จุดหมายเริ่มต้น แล้วระบบจะแสดงราคา ณ จุดหมายปลายทางต่างๆ ทั่วโลกในรูปแบบแผนที่ให้เราเห็น เจ๋งเนอะ หรือหากผมเลือกเมนู ‘Package’ พอคลิกเลือกที่ช่องใส่จุดหมายปลายทาง ก็มีตัวเลือก Top ของปีนี้แนะนำให้ด้วย มันเยี่ยมจริงๆ ครับ เก็บทุกเม็ด ทุกขั้นตอน จากการรีวิวเว็บนี้ ทำให้ผมรู้ได้เลยว่า UI ดีไซเนอร์ของเว็บ Kayak เค้าใส่ใจในรายละเอียดเอามากๆ เลยครับ ไม่ว่ายูสเซอร์จะทำอะไร ทุกการเคลื่อนไหว ทุกคลิก ผ่านการออกแบบมาแล้วอย่างดีจริงๆ ความเป็นมืออาชีพวัดกันที่รายละเอียดจริงๆ ^^
