- เมนูบริบท ช่วยลดความรบกวนทางสายตาและลดต้นทุนของการโต้ตอบ แต่มี ข้อแลกเปลี่ยนคือมี Information Scent ต่ำและค้นพบได้ยากกว่า
- เหมาะสำหรับใช้ รวบรวมการกระทำรองหรือการกระทำเพิ่มเติมที่ผูกกับออบเจ็กต์เฉพาะ เช่น โพสต์ รูปภาพ หรืออีเวนต์ในปฏิทิน และไอคอน kebab (⋮)·meatball (⋯) โดยทั่วไปถูกมองว่าเป็น “ดูเพิ่มเติม/การทำงานเพิ่มเติม”
- หากขนาดไอคอน คอนทราสต์ หรือการวางตำแหน่งไม่ดี มักเกิดกรณีที่ มองไม่เห็นไอคอนเองหรือเข้าใจความหมายผิด และถ้าซ่อนการกระทำสำคัญไว้ ก็จะทำให้มันกลายเป็น ฟังก์ชันหลักที่หาได้ยาก จนทำลายประสบการณ์ผู้ใช้
- หากต้องการใช้อย่างมีประสิทธิภาพ จำเป็นต้องมีหลักเกณฑ์ที่สม่ำเสมอ เช่น ใส่เฉพาะการกระทำลำดับรอง, วางไว้ใกล้คอนเทนต์ที่เกี่ยวข้อง, อย่าซ่อนเพียงหนึ่งหรือสองการกระทำ, แยกบทบาทจาก hamburger, และรองรับการเข้าถึง
- เมนูบริบทที่ออกแบบมาดีสามารถเป็น เครื่องมือที่ทำให้เลย์เอาต์เรียบง่ายและช่วยให้โฟกัสดีขึ้น แต่หากใช้มากเกินไปหรือใช้อย่างผิดวิธี ก็มีความเสี่ยงจะเพิ่ม ความสับสน·จำนวนคลิกเพิ่มเติม·ภาระในการเรียนรู้ จึงต้องใช้อย่างรอบคอบ
ภาพรวมของเมนูบริบท
- เมนูบริบท คือ เมนูที่รวบรวมชุดการกระทำที่เกี่ยวข้อง ซึ่งเชื่อมโยงกับองค์ประกอบ UI บางตัว พื้นที่บนหน้าจอ ชิ้นข้อมูล หรือมุมมองของแอปพลิเคชัน
- สำหรับโพสต์อาจมีการกระทำอย่าง Edit, Pin, Delete, สำหรับรูปภาพอาจมี Share, Download, Set as Background, และสำหรับอีเวนต์ในปฏิทินอาจมี Delete, Reschedule, Duplicate, Invite
- เมนูประเภทนี้มักใช้เพื่อวาง ฟังก์ชันรองที่อาจต้องใช้เป็นครั้งคราว แต่ไม่จำเป็นต้องแสดงตลอดเวลา ไว้ในตำแหน่งที่เข้าถึงได้ง่าย
- บนเดสก์ท็อป มักเรียกใช้ผ่าน คลิกขวา·คลิกสองนิ้วบนแทร็กแพด, ในสภาพแวดล้อมแบบสัมผัสใช้ กดค้าง, และปัจจุบันมีการใช้ไอคอน kebab (⋮)·meatball (⋯) เป็นตัวกระตุ้นมากขึ้นเรื่อย ๆ
การรับรู้ต่อไอคอน kebab·meatball และข้อจำกัด
- ผู้เข้าร่วมการวิจัยโดยรวมรับรู้ว่าไอคอน kebab (⋮)·meatball (⋯) มีความหมายว่า “ยังมีตัวเลือก/การกระทำอื่นซ่อนอยู่”
- การรับรู้นี้คงอยู่ทั้งบนมือถือและเดสก์ท็อป และจะถูกเข้าใจอย่างสม่ำเสมอยิ่งขึ้นเมื่อ ปฏิบัติตามแนวทางที่ดี
- ไอคอนนี้ถูกมองว่าเป็น “สวิตช์สำหรับเปิดชุดฟังก์ชัน/ไอคอนที่ซ่อนไว้ชั่วคราว”
- ขณะเดียวกัน ไอคอนเหล่านี้ก็มี Information Scent ต่ำ ทำให้ผู้ใช้ต้องคลิกทั้งที่ แทบไม่รู้เลยว่ามีตัวเลือกอะไรอยู่ด้านหลัง
- หากไอคอนถูกออกแบบให้ อยู่ไกลจากคอนเทนต์มากเกินไป มีขนาดเล็กเกินไป หรือมีคอนทราสต์ต่ำ ก็พบกรณีที่ ผู้ใช้ไม่ทันสังเกตว่ามีเมนูบริบทอยู่เลย
ข้อดีและข้อแลกเปลี่ยนของเมนูบริบท
- ในด้านข้อดี เมนูบริบทช่วย ลดความรบกวนทางสายตา ทำให้เลย์เอาต์เรียบง่าย และช่วยคงโฟกัสของผู้ใช้
- แต่ในอีกด้านหนึ่งก็มาพร้อมกับ ปัญหาด้านการใช้งาน ดังต่อไปนี้
- ค้นหาได้ยาก (findability ลดลง): หากไอคอนเล็ก จาง หรืออยู่ไกลจากพื้นที่ที่ผู้ใช้กำลังโฟกัส ก็จะกลายเป็น องค์ประกอบที่มองข้ามได้ง่ายมาก
- Information Scent ไม่เพียงพอ: คาดเดาได้ยากว่าในเมนูมีอะไรบ้าง ทำให้เกิด สภาวะที่ตัดสินใจได้ยากว่าคุ้มค่าที่จะกดหรือไม่
- มีโอกาสถูกเข้าใจผิด: หากการจัดวางหรือวิธีใช้งานไม่ดี ผู้ใช้อาจ เข้าใจผิดว่าเป็น progress indicator หรือ carousel control
- ดังนั้น การจะใช้เมนูบริบทหรือไม่ควรตัดสินจากความสมดุลระหว่าง ข้อจำกัดของเลย์เอาต์ ความคาดหวังของผู้ใช้ และลำดับความสำคัญของงาน
1. ใส่เฉพาะการกระทำลำดับรองหรือไม่ใช่แกนหลักไว้ในเมนูบริบท
- เมนูบริบทไม่ใช่ที่สำหรับ การกระทำหลักที่ใช้บ่อย แต่เป็นที่สำหรับ การกระทำเสริมหรือการกระทำที่มีลำดับความสำคัญต่ำกว่า
- แนะนำให้คัดเลือกฟังก์ชันที่ไม่ได้อยู่ในโฟลว์หลัก แต่ยังถูกใช้งานพอสมควร เพื่อ ซ่อนไว้อย่างมีเหตุผลบนพื้นฐานการวิจัย
- สิ่งสำคัญคือ อย่าซ่อนการกระทำจำเป็นที่ใช้บ่อยไว้หลังเมนูบริบท
- ตัวอย่างเช่น ในอินเทอร์เฟซแชตของ AT&T ที่ใส่ End Chat ไว้ในเมนูบริบท ถือเป็น ตัวอย่างที่ไม่ดีของการซ่อนการกระทำหลักในการจบการสนทนา
- หากซ่อนงานสำคัญไว้หลังเมนู ผู้ใช้จะ หาฟังก์ชันไม่เจอ หรือเผชิญกับความไม่สะดวกซ้ำ ๆ ในงานที่ต้องทำบ่อย
2. วางเมนูบริบทไว้ใกล้คอนเทนต์ที่มันมีผลต่อมัน
- ผู้ใช้ตีความความสัมพันธ์ระหว่างองค์ประกอบต่าง ๆ ผ่าน ความใกล้ชิดเชิงพื้นที่ ดังนั้นตำแหน่งของไอคอนเมนูบริบทต้อง สื่อให้ชัดว่ามันเป็นการกระทำของออบเจ็กต์ใด
- หากเป็นเมนูที่ใช้กับองค์ประกอบเฉพาะ ควรวางไอคอนไว้ ภายในองค์ประกอบนั้นหรืออยู่ข้าง ๆ ทันที
- หากเป็นการกระทำที่ใช้กับทั้งฟิลด์หรือทั้งทรานแซกชัน ก็ควรวางไว้ ใกล้บริเวณที่รวมข้อมูลที่เกี่ยวข้องกัน
- ควรหลีกเลี่ยงการวางไอคอนไว้แบบสุ่ม หรือวางใน ตำแหน่งที่ดูไม่เกี่ยวข้องกับองค์ประกอบใดเลย
- เช่นกรณีของ Ramp.com ที่ ไอคอน kebab ขนาดเล็ก คอนทราสต์ต่ำ ถูกวางแยกออกไปที่มุมขวาล่างของจอ ทำให้ยากจะรู้ว่าเป็นเมนูขององค์ประกอบใด และเป็นตัวอย่างที่ ทั้งค้นพบได้ยากและเชื่อมโยงกับสิ่งที่เกี่ยวข้องได้ไม่ดี
3. ทำให้ขนาดและคอนทราสต์ของไอคอนเพียงพอเพื่อรับประกันการมองเห็น
- ไอคอนเมนูบริบทมักถูกทำให้ ละเอียดอ่อนเกินไปจนแทบมองไม่เห็น โดยเฉพาะในหน้าจอที่หนาแน่นหรือแอปพลิเคชันที่ซับซ้อน
- ไอคอนควรมี ขนาดและคอนทราสต์ที่เพียงพอ และหากเป็นไปได้ควร มองเห็นได้ตลอดโดยไม่ต้อง hover
- แนะนำให้ใช้ คอนทราสต์สีที่ชัดเจน และเส้นขอบหรือพื้นหลังที่ชัดเจน ตามแนวทางการออกแบบภาพที่ผ่านการพิสูจน์แล้ว
- การทำให้เห็นได้เฉพาะตอน hover หรือ ทำให้จางเกินไปเพราะต้องการความมินิมัล จะลดการค้นพบ
- เช่นในตัวอย่างของ Ramp ที่ไอคอน kebab เล็ก คอนทราสต์ต่ำ และอยู่ไกล จนพลาดได้ง่าย และ
- ในทางกลับกัน ตัวอย่างจากแอปมือถือ Rippling ที่ ล้อมด้วยกรอบ และใช้จุดสีดำกับพื้นหลังสีขาวเพื่อเพิ่มคอนทราสต์ เป็นกรณีเชิงบวกที่ช่วยเพิ่มทั้งความสามารถในการแตะและ Information Scent
4. จัดกลุ่มเฉพาะการกระทำที่เกี่ยวข้องกันไว้ในเมนูบริบท
- ตัวเลือกในเมนูบริบทควรถูกจัดรวมเป็น การกระทำที่มีความสัมพันธ์เชิงตรรกะกับออบเจ็กต์ องค์ประกอบ หรือระดับชั้นเดียวกัน
- เช่น ถ้าเป็นไฟล์ ก็ควรมีเฉพาะการกระทำเกี่ยวกับไฟล์อย่าง Duplicate, Share, Delete
- หากทำได้ ก็ควรแสดงบางการกระทำไว้ข้างไอคอนเมนูโดยตรง เพื่อเพิ่ม Information Scent ที่ช่วย บอกใบ้ว่า “ยังมีการกระทำในกลุ่มนี้ซ่อนอยู่อีก”
- ควรหลีกเลี่ยงการ ปะปนการกระทำแบบ global กับการกระทำขององค์ประกอบเฉพาะไว้ในเมนูเดียว หรือใส่การกระทำที่ไม่เกี่ยวข้องกันรวมกัน
- การปะปนแบบนี้ส่งผลเสียทั้งในด้าน clarity, ความง่ายในการค้นหา, ความจำเชิงพื้นที่ และภาระทางความคิด
- เช่นในแอปเดสก์ท็อปของ Slack ที่ เมนูของข้อความซ่อนเฉพาะการกระทำเกี่ยวกับข้อความ ส่วนการกระทำระดับทั้งเธรดถูกวางแยกไว้อีกตำแหน่งหนึ่ง ถือเป็นตัวอย่างที่ดี
5. รักษาความสม่ำเสมอของไอคอนและการทำงานทั่วทั้งอินเทอร์เฟซ
- ไอคอนเมนูบริบทควรรักษา ฟังก์ชัน การทำงาน และรูปลักษณ์แบบเดียวกัน ทั่วทั้งผลิตภัณฑ์
- หากตัดสินใจใช้ไอคอน meatball หรือ kebab เป็นเมนูบริบท ก็ควร ไม่เอาไปใช้ซ้ำในความหมายอื่น และใช้เฉพาะความหมายนั้นเท่านั้น
- ควรหลีกเลี่ยงการใช้ไอคอนเดียวกันโดยในที่หนึ่งหมายถึง ขยายคอนเทนต์ที่ซ่อนอยู่, อีกที่หนึ่งหมายถึง เรียก popup, และอีกที่หนึ่งหมายถึง เปิด side panel
- การใช้งานแบบนี้จะทำลาย mental model และความเชื่อมั่นของผู้ใช้ รวมถึงลดความสามารถในการเรียนรู้และจดจำ
- หากดูผลการค้นหาของ Google จะเห็นว่า ไอคอน kebab ของผลลัพธ์สปอนเซอร์เปิด My Ad Center modal ขณะที่ kebab ของผลลัพธ์ทั่วไปเปิดแผงด้านขวา ทำให้ทั้งพฤติกรรมและตำแหน่งไม่สอดคล้องกัน
- ส่งผลให้การกระทำที่มีประโยชน์อย่าง Like/Block/Report/Share/Save ถูกซ่อนจนพบได้ยาก และผู้ใช้ก็ คาดเดาได้ยากว่าจะเกิดอะไรขึ้นเมื่อกดไอคอนเดียวกันนี้
6. หากไอคอนกำกวม ให้เสริมความหมายด้วย tooltip หรือ label
- ไอคอน kebab·meatball เป็น ไอคอนนามธรรมที่มีความหมายในตัวเองค่อนข้างอ่อน ดังนั้นเพียงเพิ่มคำใบ้สั้น ๆ ก็ช่วยเพิ่มการใช้งานได้มาก
- หากเป็นไปได้ ควรใส่ label ที่มองเห็นได้ หรือ tooltip ตอน hover เพื่อบอกให้ชัดว่าในเมนูมีการกระทำประเภทใดอยู่
- ตัวอย่างเช่น ใช้คำที่ชัดเจนและมีองค์ประกอบเป้าหมายรวมอยู่ด้วยอย่าง Post Actions, Message Options
- ควรหลีกเลี่ยงคำที่กำกวมอย่าง Options หรือ label อย่าง Ellipses ที่แค่อธิบายรูปร่างของไอคอน
- เช่นกรณีของ Patagonia ที่ แมปการขยายรูปภาพไว้กับไอคอน meatball และแสดง label ตอน hover ว่า Ellipses ถือเป็นตัวอย่างของการสื่อความหมายที่ล้มเหลว
- ในทางกลับกัน ตัวอย่างจากแอปเดสก์ท็อป Notion ที่มี tooltip ตอน hover ว่า “Style, Export, and more…” ซึ่งบอกใบ้ประเภทการกระทำในเมนูอย่างเฉพาะเจาะจง เป็นแพตเทิร์นเชิงบวกที่ช่วยเพิ่ม Information Scent อย่างมาก
- tooltip นี้ทำงานแบบเปลี่ยนไปตามบริบทตามเนื้อหาของเมนู
7. ใช้ไอคอนเมนูบริบทเพื่อแสดงการกระทำเท่านั้น และอย่าใช้สำหรับการขยายคอนเทนต์
- ไอคอน meatball·kebab ถูกจดจำว่าเป็นสัญญาณสำหรับ เปิดการกระทำ/ตัวเลือกเพิ่มเติม ดังนั้นจึงไม่ควรใช้เพื่อขยายข้อความหรือรูปภาพ
- หากต้องการแสดงข้อความที่ถูกตัดไว้หรือขยายรูปภาพ แนะนำให้ใช้ label แบบข้อความชัดเจน เช่น Read more, Expand
- เช่นในตัวอย่างรีวิวของ Etsy ที่ใช้ ไอคอน meatball ใต้รีวิวเพื่อเปิดข้อความเต็ม ถือเป็นตัวอย่างที่ไม่ดีเพราะ Information Scent ต่ำ
- ขณะที่ฟังก์ชันเดียวกันใน Google รีวิวซึ่งใช้ ลิงก์ข้อความ More นั้น เหมาะสมกับการกระทำแบบขยายบริบทมากกว่า
- ส่วนไอคอน kebab ที่ด้านบนของ Google รีวิวซึ่งให้ การกระทำเพียงอย่างเดียวคือ Report ก็เป็นกรณีที่ขัดกับแนวทางข้อถัดไปเรื่อง อย่าซ่อนเพียงหนึ่งหรือสองการกระทำไว้ในเมนู
8. อย่าใช้เมนูบริบทเพื่อซ่อนเพียงหนึ่งหรือสองการกระทำ
- หากทำได้ ในสถานการณ์ที่มี เพียงหนึ่งการกระทำหรือมีแค่ไม่กี่การกระทำ ควร แสดงการกระทำนั้นในอินเทอร์เฟซโดยตรง
- การซ่อนแค่หนึ่งหรือสองตัวเลือกไว้หลังเมนู ทำให้ แทบไม่ได้ประหยัดพื้นที่ แต่กลับเพิ่มจำนวนคลิกและต้นทุนด้านการค้นพบ
- โดยเฉพาะเมื่อมีไอคอนมาตรฐานที่คนคุ้นเคยอยู่แล้ว เช่น “x”·ถังขยะ·ธงรายงาน การนำไปซ่อนไว้ใต้ meatball/kebab อีกชั้นจึงแทบไม่มีประโยชน์
- ในกรณีของ Weather.com เมื่อคลิกไอคอน kebab แล้วมันเปลี่ยนเป็น ปุ่มสีดำที่มีแค่ปุ่ม Delete ปุ่มเดียว
- โครงสร้างแบบนี้ใช้พื้นที่หน้าจอ แทบไม่ต่างจากการแสดง Delete ตั้งแต่แรก จึงไม่มีเหตุผลที่จะต้องซ่อน
- ในทางกลับกัน ตัวอย่างของ Pinterest จะแสดงการกระทำสำคัญอย่าง Save (ปุ่มด้านขวาบน) และ Share (ไอคอนด้านขวาล่าง) โดยตรงเมื่อเอาเมาส์ไปวางบนพิน
- วิธีนี้เป็น แพตเทิร์นเชิงบวกที่ไม่ซ่อนการกระทำหลักไว้ในเมนูบริบท และทำให้ใช้งานได้ทันทีเมื่อจำเป็น
9. อย่าใช้ไอคอน hamburger เป็นตัวกระตุ้นเมนูบริบท
- ไอคอน hamburger (☰) เป็นสัญลักษณ์ที่คนรับรู้กันอย่างกว้างขวางว่าใช้แทน การนำทางหลัก/การนำทางระดับ global และ
- ไอคอน kebab·meatball (⋮·⋯) ได้กลายเป็นแพตเทิร์นที่สื่อถึง การกระทำเชิงบริบทที่ผูกกับองค์ประกอบหรือรายการเฉพาะ ไปแล้ว
- จึงแนะนำให้ใช้ไอคอน hamburger เฉพาะกับ การนำทางระดับ global ของเว็บไซต์/แอป และใช้ kebab·meatball สำหรับการกระทำเชิงบริบท
- ควรหลีกเลี่ยงทั้งการใช้ hamburger ใกล้คอนเทนต์เพื่อเก็บการกระทำเชิงบริบท หรือใช้ kebab·meatball ใส่การกระทำระดับ global เช่นการตั้งค่าบัญชีหรือการตั้งค่าทั้งไซต์
- การใช้ปะปนเช่นนี้จะทำให้ความหมายของทั้งสองแพตเทิร์นพร่าเลือน และ ทำลาย mental model ของผู้ใช้จนเกิดความลังเลและการมองข้าม
- ในตัวอย่างแชตของ Banana Republic เมื่อกดไอคอน hamburger ที่มุมล่างซ้ายของหน้าต่างแชต จะพบว่า มีเพียงการกระทำเชิงบริบทอย่าง Save Transcript อย่างเดียว
- นี่ไม่เพียงเป็นการใช้ hamburger แทนเมนูบริบทแทนที่จะเป็นเมนูนำทางระดับ global แต่ยัง ผิดแนวทางข้อ 8 ด้วย เพราะซ่อนเพียงการกระทำเดียว
10. ต้องรับประกันการเข้าถึงด้วยคีย์บอร์ดและสกรีนรีดเดอร์
- เมนูบริบทต้องใช้งานได้ ไม่ใช่เฉพาะกับผู้ใช้เมาส์หรือหน้าจอสัมผัสเท่านั้น แต่ต้องมีโครงสร้างที่ เปิดและนำทางได้ด้วยคีย์บอร์ดและสกรีนรีดเดอร์
- เมนูควรเปิดและเลื่อนภายในได้ด้วย Tab·Enter·ปุ่มลูกศร และรายการในเมนูก็ควร ถูกอ่านโดยสกรีนรีดเดอร์ รวมถึงรับโฟกัสและสั่งงานได้
- ควรหลีกเลี่ยงเมนูที่เข้าถึงได้แค่การคลิกหรือแตะ หรือ อินเทอร์แอกชันแบบคัสตอมที่ทำลายแพตเทิร์นมาตรฐานด้านการเข้าถึง
- การออกแบบที่ให้ความสำคัญกับการเข้าถึงจะช่วยสร้าง ประสิทธิภาพให้ทั้งผู้ใช้ที่มีความพิการและ power user และยังช่วยให้ สอดคล้องกับมาตรฐานการออกแบบแบบครอบคลุม
บทสรุป
- เมนูบริบทเป็น เครื่องมือทรงพลังที่ช่วยให้อินเทอร์เฟซเรียบง่าย แต่ยังสามารถให้การกระทำเพิ่มเติมได้เมื่อจำเป็น
- โดยเฉพาะในฐานะแพตเทิร์นที่ช่วยจัดระเบียบเลย์เอาต์และ เปิดตัวเลือกเพิ่มเติมเฉพาะตอนที่ต้องการระหว่างการโฟกัสกับงาน
- อย่างไรก็ตาม เนื่องจากมันเป็น โครงสร้างที่มีข้อจำกัดด้านการค้นพบและความชัดเจน จึงต้องใช้อย่างระมัดระวังเสมอ
- ควรใช้กับการกระทำที่เป็นลำดับรองจริง ๆ เท่านั้น และต้องออกแบบโดย คำนึงถึงตำแหน่ง ความสม่ำเสมอ Information Scent และการเข้าถึง
- ใจความสำคัญคือ การสร้างสมดุลระหว่างความมินิมัลทางสายตากับการใช้งานจริง และ
- เมนูบริบทจะให้ผลดีที่สุดเมื่อถูกใช้เป็น เครื่องมือจัดระเบียบอินเทอร์เฟซโดยไม่ซ่อนโฟลว์หลัก
1 ความคิดเห็น
บางครั้งผมก็ต้องไปแตะ ๆ ฟรอนต์เอนด์ที่รันอยู่บนอินทราเน็ตภายในบริษัท แล้วเคยโดนดุมาแล้วครั้งหนึ่งตอนใส่ไอคอนอย่าง ☰ ⋮ ⋯ + ไว้ในแดชบอร์ดที่ผู้บริหารใช้ดู พอท่านถามว่าฟังก์ชันนั้นฟังก์ชันนี้หายไปไหน ผมก็บอกว่ากดปุ่มนี้ได้ครับ แต่ท่านบอกว่ามองไม่เห็น ให้เขียนเป็นข้อความไปเลย สุดท้ายก็เลยต้องย้อนกลับไปใช้อินเทอร์เฟซแบบยุค 2000 ที่เคยใช้กันอยู่... จะว่าไปก็เหมือนทุกอย่างนั่นแหละ ฟรอนต์เอนด์นี่มันยากจริง ๆ