UI น่าค้นหา 2 – เรียนรู้ UI Design examples จากเว็บ E-Commerce ชื่อดัง !!

Piyawit Sereeyotin

UI design examples – UI (น่า) ค้นหา เป็นซีรีย์เกี่ยวกับเทคนิค UI Design ที่จะโชว์ให้ดูว่า “กล่องค้นหา” จุดเล็ก ๆ บนเว็บไซต์ชื่อดังต่าง ๆ มันมีรายละเอียดมากกว่าที่ตาเห็นอีกมาก หากท่านใดยังไม่ได้อ่านตอนแรก สามารถอ่านบทความ UI น่าค้นหา ตอนที่ 1 ได้ครับ

ในตอนนี้เราจะพูดถึงการออกแบบ UI ค้นหาของเหล่าบรรดาเว็บ E-commerce ดังๆ ที่สนุกแฝงกลยุทธ์ร้อยแปดกระบวนท่าให้เราๆ ได้อึ้ง ทึ่ง แต่ไม่เสียว (ก็ไม่ใช่กายกรรมกวางเจานี่นา ^^)

UI ค้นหา (search box UI) เป็นหน้าด่านแรกที่สำคัญที่สุดของเว็บ E-commerce ที่มีสินค้าขายหลากหลายชนิด เช่น Amazon, ebay, Kayak, Lazada, booking.com, Agoda, Tmall, Rakuten เป็นต้น เพื่อให้ยูสเซอร์ได้เจอสินค้าที่กำลังตามหาอยู่ภายในเวลาอันรวดเร็วและถูกใจที่สุด

เว็บจองโรงแรม (Hotel booking website) เป็นหนึ่งในเว็บที่ต้องพึ่ง UI ตัวนี้เป็นอย่างมาก ยิ่งเป็นเว็บที่จองโรงแรมทั่วโลกแล้ว ยิ่งขาดไม่ได้เด็ดขาด ทำให้นวัตกรรมเกิดขึ้นมากมายบน UI ค้นหาของเว็บประเภทนี้ครับ ดังนั้นผมจึงอาจยกตัวอย่างเว็บในแวดวงนี้เยอะหน่อย เพราะลูกเล่นเค้าเยอะจริงๆ ครับ

UI design examples มาดูตัวอย่างเว็บไซต์ของ E-commerce กันเลย

UI Design ก่อนค้นหา (Pre-search)

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

hotelscombined-presearch ui design examples

โดยปกติ ถ้าเราเพิ่งเข้าเว็บมาใหม่ๆ ในช่องค้นหาจะแสดงตัวอย่างรูปแบบข้อมูลที่สามารถพิมพ์ค้นหาได้ เช่น เว็บ Hotelscombined.com บอกใบ้ว่าช่องใส่สถานที่สามารถใส่ชื่อเมือง, ชื่อพื้นที่, ตำบล, หรือชื่อโรงแรมก็ได้ หรือเราเรียกว่า Hint text โดยจะใช้สีออกจางๆ เพื่อบ่งบอกให้รู้ว่าเป็นแค่ตัวอย่างหรือคำบอกใบ้เท่านั้นนะ

booking-presearch ui design examples

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

lazada-presearch ui design examples

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

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

roomkey-presearch ui design examples

เว็บ Roomkey.com เล่นละเอียดตรงจุดนี้ครับ พอเราเริ่มคลิกที่ช่องเท่านั้น ก็เริ่มมีคำแนะคำค้น (keyword suggestion) ให้เป็นตัวเลือกแรกเลยครับ คือค้นหาโดยใช้ตำแหน่งสถานที่ปัจจุบันเป็นคำค้น ซึ่งผมเห็นว่าเป็นตัวเลือกที่ดีมากๆ ถ้าเอาไปใช้กับเว็บไซต์สำหรับมือถือ (mobile-dedicated website) หรือ app เพราะเราจะได้ใช้ประโยชน์จากอุปกรณ์แสดงตำแหน่ง (GPS, GPRS) เพื่อค้นหาในบริบทที่อ้างอิงกับตำแหน่งที่เราอยู่ (location-based search)

UI Design ขณะเริ่มค้นหา

คราวนี้เรามาเริ่มค้นหาอะไรสักอย่างกันเลย

hotelscombined-search

หากเราพิมพ์คำค้นในช่องค้นหา เกือบทุกเว็บใหญ่ๆ จะมีระบบแนะนำคำค้น (keyword suggestion) ขึ้นมาเป็นตัวช่วย เช่น ตัวอย่างเว็บ hotelscombined.com พอผมพิมพ์ “bangkok” ก็จะมีขึ้นแนะนำสถานที่ที่เกี่ยวข้องกับ “bangkok” ในระดับต่างๆ เช่น เมือง, สนามบิน, ระดับอำเภอ เป็นต้น

amazon-search-suggestion ui design examples

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

lazada-search-suggestion

Lazada ก็เลียนแบบ Amazon ในกรณีที่คำค้นอยู่หลายหมวดสินค้า แต่ที่ไม่เหมือนคือ การเลือกดูสินค้าได้เลยจากตัวเลือกคำแนะนำในกลุ่มล่าง (Popular products)

agoda-search-with-pic

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

UI Design ช่องค้นหาด้วยรายละเอียด (Attribute search)

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

hotelroom-02

มาดู UI Design Examples ในระบบค้นหาของเว็บ Hotelroom.com กันครับ ซึ่งเป็น UI ค้นหามาตรฐานพื้นๆ สำหรับเว็บจองโรงแรมครับ คือ มีช่องใส่สถานที่ และมีรายละเอียดการค้นหาคือ ช่องเช็คอิน, เช็คเอาท์, ช่องเลือกจำนวนห้อง (บางเว็บเป็นช่องเลือกจำนวนคน หรือเลือกทั้งสองอย่างก็มี) แล้วก็ปุ่มค้นหา

hotelroom-01
UI Design examples หน้าค้นหาโรงแรม

ที่น่าสนใจคือช่องเช็คอิน-เช็คเอาท์ครับ สมมติผมกดที่ช่องเช็คอิน ก็จะปรากฎปฏิทินให้เลือกวันที่ ผมจะต้องคลิกเมาส์ไปทั้งสิ้น 2 ครั้งสำหรับการวันเช็คอิน

hotelroom-03

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

hotelroom-04

และคลิกที่ 3 เพื่อเลือกวันที่

สรุปรวมทั้งหมดเฉพาะช่องเช็คอิน-เช็คเอาท์ ผมต้องคลิกไป 5 ครั้ง

แล้วจะมีวิธีไหนที่จะสามารถลดจำนวนคลิกลงได้ไหมหนอ?? ให้เวลาคิด 2 นาทีครับ ติ๊กต่อกๆๆ….

2 นาทีผ่านไป…

เฉลยคำตอบ ก็ใช้ปฏิทินคู่ซิ

tripadvisor-search

ดูตัวอย่างเว็บ Tripadvisor ครับ ถ้าต้องการเข้าพักในช่วงเวลาคล้ายๆ กัน (เข้า ก.พ. สักวัน ออก มี.ค. สักวัน) เมื่อคลิกที่ช่องเช็คอินหรือเช็คเอาท์ เราจะเห็นปฏิทินทีละสองเดือนเลยครับ จำนวนการคลิกอย่างมากที่สุดสำหรับกรณีเปรียบเทียบนี้ก็คือ 4 ครั้งครับ หากเดี๋ยวนี้เว็บไหนไม่ใช้ปฏิทินคู่ ถือว่าไม่ทันเทรนด์แล้วนะครับ

ทว่ามนุษยชาติไม่ได้หยุดความพยายามอยู่แค่นี้ครับ เรายังสามารถลดจำนวนคลิกได้อีก ลองคิดดูครับ ให้เวลา 1 นาทีนะ ติ๊กต่อกๆๆ…

1 นาทีผ่านไป…กา กา กา

เฉลยคำตอบ ก็เปิดปฏิทินเช็คเอาท์ให้โดยอัตโนมัติซิ ไม่ต้องให้ยูสเซอร์คลิก

kayak-search-01

เว็บ Kayak เป็นตัวอย่างที่ดีมากเลยครับ หลังจากผมคลิกเลือกวันที่เช็คอินเรียบร้อยแล้ว (เสียไป 2 คลิก)

kayak-search-02

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

Kayak จึงสามารถสำเร็จการเลือกวันเช็คอิน-เช็คเอาท์ ด้วยจำนวนเพียง 3 คลิก (ในเงื่อนไขเปรียบเทียบ) ด้วยประการะฉะนี้แล ตบมือให้เลย ม่าๆๆ (แปะๆๆ)

รายละเอียดอีกอย่างที่น่าแปะๆ ให้กับ Booking.com คือยอมให้ค้นหาโดยไม่ต้องใส่รายละเอียด

booking-search-with-destination

เราเพียงแค่ใส่ชื่อเมืองที่เราต้องการพัก ช่องอื่นไม่ต้องสน

booking-search-without-date
UI Design examples หน้ากล่องค้นหาจาก Booking.com

คลิกที่ปุ่ม “Search” ได้เลย ตรงช่อง “I don't have specific dates yet” จะติ๊กให้เราเอง จากนั้นรับรู้ว่าเรายังไม่มีวันค้นหานะ แล้วก็กดปุ่ม “Search” อีกครั้งเพื่อเริ่มทำการค้นหาโดยไม่มีรายละเอียดเรื่องวันเข้าพัก

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

agoda-seach-01

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

ในแต่ละพฤติกรรมและสถานการณ์ เราต้องเลือกหัวข้อรายละเอียดการค้นหาให้เหมาะกับธุรกิจนั้นนะครับ

rental-car-search

อย่างเว็บ Rentalcars.com สิ่งที่เป็นเอกลักษณ์สำหรับธุรกิจเช่ารถคือ เวลารับรถและเวลาคืนรถ ต้องมี!

booking-night-display

ธุรกิจจองโรงแรม จุดเด่นคือ จำนวนคืนเข้าพัก ควรมี! ซึ่ง Booking.com เว็บอันดับหนึ่งก็ไม่พลาดเรื่องนี้ครับ

ตัวอย่างสุดท้ายเป็นการทำ UI ค้นหาให้เหมือนกับการเติมคำในช่องว่างของประโยคให้สมบูรณ์

sentence-search

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

Bonus: UI Design กล่องค้นหาของ Google Chrome

ก่อนจบ ขอทิ้งท้ายความน่าค้นหาของ UI นี้ ด้วยความสามารถลับของ Chrome ที่หลายๆ คนอาจยังไม่รู้

search-with-chrome-01

อันดับแรกให้เปิดเบราเซอร์ Chrome จากนั้นพิมพ์ booking.com แล้วเคาะ spacebar หรือ tab ก็ได้ครับ

search-with-chrome-02

ชะแว่บ! มันกลายเป็นช่องค้นหาสำหรับเว็บ booking.com คนเดียวไปแล้ว ได้ไงเนี่ย

search-with-chrome-03

งั้นเราลองพิมพ์ชื่อโรงแรมสักแห่งดูแล้วกันนะ ดุสิตธานีเป็นไง

search-with-chrome-04 ui design examples

แม่เจ้า เข้าตรงหน้าโรงแรมเลย ไม่ต้องผ่าน Google แต่ไปโผล่ถึงดูไบเลยนะเนี่ย -_-!

นี่เป็นหนึ่งในฟิเจอร์เด็ดช่องค้นหาของ Chrome หรือที่เราเรียกว่า Omnibox ซึ่งเว็บที่จะใช้ฟีเจอร์นี้ก็ต้องใส่โค้ดให้รองรับด้วยถึงจะใช้งานได้เยี่ยง booking.com ล่ะ

ถึงตรงนี้คงได้แต่ฝากว่า โลกของ UI ยังมีอะไรให้น่าค้นหาอีกเยอะจริงๆ ครับ เพราะฉะนั้นอย่าหยุดค้นหานะครับ ;)

Piyawit Sereeyotin

Piyawit Sereeyotin

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