UI Pattern

เมนูฉลาดสุดๆ ของ Amazon.com

4

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

myunionplus

หน้าตาของ UI เมกะเมนู ก็จะเป็นดั่งหนึ่งในเว็บที่ผมเคยทำให้ลูกค้าร้านขายส่งเครื่องเขียน myunionplus.net อย่างที่ได้บอกไปแล้วครับว่า UI นี้จะเหมาะกับร้านค้าออนไลน์ที่มีสินค้าหลายหลากประเภท แต่ความพิเศษที่อยากจะมาเล่าเกี่ยวกับ UI นี้ก็คือ ความพิถีพิถันใส่ใจการใช้งานของผู้ใช้อย่างแท้จริงของเว็บ Amazon.com

amazon-fast-2

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

old

ตามปกติเมนูที่มีซับเมนูควรจะมีการหน่วงของซับเมนู เพื่อให้ผู้ใช้มีเวลาเคลื่อนที่ไปเลือกซับเมนูทางด้านขวาได้ทันก่อนที่มันจะหายไป ตัวอย่างด้านบนเป็นเมนูเดิมของเว็บ Khan Academy ครับ ลองสังเกตดูครับ พอเราเลื่อนเมาส์ผ่านเมนู Science & Economics, Computer Science, Humanities เว็บจะไม่แสดงซับเมนูให้เห็น เพราะมีการหน่วงระหว่างเมนูหลักไว้ ซึ่งไม่ดีนะครับ เราควรหน่วงซับเมนูเฉพาะตอนเมาส์เคลื่อนตัวออกจากเมนูหลักที่เรากำลังสนใจเพื่อไปเลือกซับเมนูน่าจะดีกว่า

ayud

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

กรณีของเว็บ Allianz ดูจะไม่ค่อยมีปัญหา เพราะเมนูย่อยอยู่ด้านล่าง แต่สำหรับเมนูย่อยของเว็บ Khan Academy (แบบเก่า) นี่ซิครับ หากไม่มีการหน่วงการแสดงผลระหว่างเมนูหลักจะเกิดอะไรขึ้นครับ

move-to-sub

ดูตามภาพด้านบนและจินตนาการตามผมนะครับ ในตอนนี้เรากำลังสนใจหัวข้อ Math อยู่ จากนั้นเราก็เคลื่อนเมาส์ไปเลือกหัวข้อเมนูย่อยทางด้านขวาในทิศทางตามเส้นสีบานเย็น ก่อนที่เมาส์เราจะไปถึงแผงเมนูย่อย มันต้องผ่านเมนู Science & Economics และ Computer Science นี่ซิ ฉะนั้นหากไม่หน่วงการแสดงผลระหว่างเมนูหลักแล้ว เว็บก็จะแสดงผลซับเมนูของ Science & Economics และต่อไปก็เป็น Computer Science ดังนั้นสุดท้ายแล้วเรากลับได้ซับเมนูของ Computer Science แทนที่จะเป็นเมนูย่อยของ Math แล้วก็จะมาแก้ปัญหาโดยการทำให้การแสดงผลซับเมนูมีการหน่วงเกิดขึ้น ซึ่งผมก็บอกไปแล้วว่าไม่ดีนะครับ เพราะหากเป็นไปได้ควรจะตอบสนองสิ่งที่ยูสเซอร์เลือกโดยทันที

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

บางคนอาจเห็นว่า หากเราเคลื่อนที่เมาส์ในแนวนอนเพื่อไปเลือกซับเมนูก็คงไม่มีปัญหานี้เกิดขึ้น แต่ด้วยพฤติกรรมของผู้ใช้จริง เรามักจะเคลื่อนเมาส์ไปในลักษณะเช่นนี้จริงๆ ครับ และนี่จึงกลายเป็นเบื้องหลังแนวคิดของเว็บ Amazon.com เพื่อออกแบบเมนูหมวดหมู่สินค้าให้สอดคล้องกับการใช้งานจริง

screen_shot_2013-03-06_at_1.17.35_am

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

จากนั้นลองเล่นเปรียบเทียบกับเว็บที่ไม่มีแนวคิดนี้ดูครับ เช่น เว็บ OfficeMate หรือจะเป็นเว็บของลูกค้าผมก็ได้ครับ myunionplus.net แล้วจะเห็นความอลังการงานสร้างของแนวความคิดนี้จริงๆ ครับ

new-full

สุดท้ายเมกะเมนูใหม่ของเว็บ Khan Academy ก็ได้หยิบยืมแนวคิดนี้มาใช้  และเรื่องก็จบอย่างแฮปปี้ เมนูฉลาดสุดๆ นี่มันคูลจริงๆ เห็นด้วยไหมครับ (^ε^)♪

ข้อมูล: ดัดแปลงจาก Ben Kamens นักพัฒนาเว็บ Khan Academy

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

ช่องเดียวเอาอยู่

Previous article

ความทรงจำและความลืมเลือน ตอนที่ 1

Next article

You may also like

4 comments

  1. ผมซื้อของอเมซอนตลอดแต่ไม่เคยสังเกตุเรื่องนี้เลย

    1. นี่แหละครับ พลังและความสนุกของ UI design

  2. ขอบคุณที่เอาความรู้ดีๆมาแชร์ครับ

    1. ด้วยความยินดีครับ (。≖ˇ∀ˇ≖。)

Leave a reply

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

More in UI Pattern