ออกแบบอย่างไร ไม่ให้ผู้ใช้หลงทาง
เมื่อหน้าจอมือถือมีขนาดเล็ก แต่เราไม่ต้องการทำให้เนื้อหาของเรามีขนาดเราเล็กตาม เพราะจะทำให้อ่านยาก ทางเลือกนึงคือออกแบบโปรแกรมให้มีหน้าย่อย ๆ หลายหน้า ซึ่งนำเราไปสู่อีกปัญหาคือ ผู้ใช้หลงทางในโปรแกรมของเรา ไม่รู้ว่าถ้าจะกลับต้องไปทางไหน ถ้าจะลงลึกต้องไปอย่างไร
การออกแบบ Navigation (การนำทาง) จึงเป็นสิ่งจำเป็นเพื่อให้ผู้ใช้สามารถเดินทางไปในโปรแกรมของเราได้อย่างเข้าใจ ในทันทีที่เค้าเริ่มใช้โปรแกรมของเรา ผมพบว่าในเอกสาร Material Design ที่เป็น Guideline จาก Google (ข้อแนะนำ — ไม่ต้องทำตามก็ได้ 😅) ได้เล่าเรื่องนี้ไว้ดีมาก ๆ
ในเอกสารเค้าแบ่ง Navigation ออกเป็นสามกลุ่ม
- Lateral navigation (นำทางแนวข้าง)
- Forward navigation (นำทางไปข้างหน้า)
- Reverse navigation (การย้อนกลับ)
ถ้าถามว่าผู้ใช้เข้าใจถึงขนาดนี้มั๊ย บอกได้เลยว่าไม่ แต่มันก็เหมือนการเลือกสีในภาพ หรือการเลือกโน๊ตตอนเล่นดนตรี ผู้ใช้ไม่ได้เข้าใจเรื่องทฤษฏีสี หรือตัวโน๊ต แต่เค้ารู้ว่ามันสวย หรือมันฟังแล้วราบรื่น การเลือกใช้ UI Element (เครื่องมือต่าง ๆ ในหน้าจอ) ก็เหมือนกัน ผู้ใช้ไม่รู้หรอกว่าแต่ละอันมันคืออะไร ต้องใช้อย่างไร แต่เค้ารู้ว่ามันราบรื่น ใช้แล้วมันไม่หลงทาง
ทีนี้เราลองมาดูว่า Navigation แต่ละแบบมันต้องใช้กับ UI Element อะไร
( 1 ) Lateral navigation (นำทางแนวข้าง)
รูปแบบพื้นฐานที่สุดคือการเลือกหน้าโดยใช้เมนู เมื่อเลือกอันไหนมันก็จะพาเราไปหน้านั้น โดยแต่ละเมนูอาจจะมีความสัมพันธ์กัน หรือไม่เกี่ยวกันเลยก็ได้ สิ่งสำคัญคือเมื่อผู้ใช้กดไปแล้ว ต้องรู้ว่าตัวเองอยู่หน้าไหน โดยทั่วไปก็จะมีชื่อหน้าอยู่ที่ Application Bar ด้านบนสุด หรือที่เมนู ที่ตัวเองเลือกก็จะเด่นชัดขึ้นมา
การเดินทางแบบนี้ผู้ใช้ไม่จำเป็นต้องกด Back สามารถเลือกเมนูที่อยากกลับได้เลย (แต่ถ้าเป็น Android จะมีปุ่ม Back ให้กลับเพิ่มมา)ถ้าตาม Guideline ของ Apple (Human Interface Guideline) เราจะมีแค่ Tab ด้านล่างเท่านั้นใน Lateral Navigation ทำให้การใช้งาน iOS ง่ายมาก ๆ แต่บน Android จะมีถึงสามแบบ (Tab, Bottom Navigation, Navigation Drawer) แต่ละแบบก็มีเงื่อนไขในการใช้งานไม่เหมือนกัน ผู้ใช้ก็จะงง ๆ หน่อย แต่ก็ทำให้ Android มีตัวเลือกที่หลากหลาย ปรับตามบริบทของผู้ใช้ได้ตรงกว่า
ถ้าอยากรู้ว่า Navigation แต่ละแบบของ Android ใช้อย่างไร อยากให้ลองอ่านจากบทความนี้ครับ
( 2 ) Forward navigation (นำทางไปข้างหน้า)
ให้ความรู้สึกเหมือนการดูรายละเอียดเพิ่มเติม สิ่งที่อยู่บนหน้าแรกจะบอกภาพรวมที่กว้างที่สุด จากนั้นผู้ใช้ก็จะเลือกว่าจะเจาะลงไปที่ส่วนไหน แล้วก็เจาะลึกลงไปเรื่อย ๆ โดยผู้ใช้เข้าใจว่าถ้ากดไปบนเนื้อหาส่วนไหน โปรแกรมก็จะพาลงรายละเอียดไปยังเนื้อหาส่วนนั้น
การใช้งาน Navigation แบบนี้ถ้าเนื้อหาหน้าที่สองเลื่อนมาจากทางขวามือ การกลับไปยังหน้าแรก ควรเป็นการกด Back ที่มุมบนซ้าย หรือ Back ของระบบ) เสมือนว่าหน้าจอเลื่อนกลับ แต่ถ้าเนื้อหาเลื่อนขึ้นหรือขยายออกมาก็ควรใช้การกดปุ่มปิด แล้วหน้าจอนั้นก็เลื่อนกลับไปในทิศทางเดิม ซึ่งตรงกับความคาดหวังของผู้ใช้ช่วยให้เค้าไม่รู้สึกสะดุดใจ และมีสมาธิกับเนื้อหาของโปรแกรมได้มากขึ้น
( 3 ) Reverse navigation (การย้อนกลับ)
เมื่อมีการเดินไป ก็ต้องมีการเดินกลับ วิธีการเดินทาง ไป/กลับ ในโลกของ iOS นั้นมีแบบเดียวคือกดปุ่ม Back ซึ่งถือว่าออกแบบมาได้ปึกมาก ๆ จะเห็นว่ามันไม่ได้เปลี่ยนไปเลยตั้งแต่ iOS version แรก ต้องขอบคุณ iPod ที่ช่วยกำหนดรูปแบบที่ชัดเจนมาตั้งแต่ตอนนั้น แม้ว่าปัจจุบันผู้ใช้จะสามารถ slide มือจากขอบได้ด้วย แต่คนส่วนใหญ่ก็ยังเอื้อมมือไปกดปุ่ม Back อยู่ดี
Android เข้ามาแก้ปัญหานี้โดยการทำให้ปุ่ม Back ลงมาอยู่ข้างล่าง ช่วยให้ผู้ใช้กดได้ง่ายขึ้น และเป็นเอกลักษณ์สำคัญของ Android เลย แม้แต่ในเอกสาร Android Guideline เมื่อก่อนจะบอกไว้ชัดเจนว่าบน Android ไม่ต้องใส่ปุ่ม Back เพราะมีปุ่มนี้อยู่แล้ว (เส้นสีเขียวในรูปด้านล่าง)
จนกระทั้ง Material Design ออกมากำหนดพฤติกรรมของปุ่ม Back ที่ด้านบนซ้ายให้ชัดเจนมากขึ้นเราจึงเริ่มได้ใช้มันอย่างจริงจังซะที โดยเค้าเรียกมันว่าปุ่ม Up (Upward) มันมีลักษณะพิเศษที่ไม่เหมือนปุ่ม Back เพราะมันจะไม่ได้กลับไปหน้าที่แล้ว แต่มันจะย้อนขึ้นไปยังหน้า List หนึ่งระดับจากตัวมัน (เส้นสีแดง)
ในส่วนนี้ Google แนะนำนักพัฒนาว่าให้พยายามทำตามเอกสาร หรือให้ใช้ Development Library ที่เตรียมมาให้ ถ้าวันหลังเค้าเปลี่ยนอีก โปรแกรมของเราจะได้เปลี่ยนอัตโนมัติโดยไม่ต้องมาเสียเวลาแก้ code กัน
จากตรงนี้มันดูเหมือนเป็นเรื่องง่าย ๆ ที่นักพัฒนาทุกคนควรเข้าใจ และทำตามนี้ แต่เมื่อไหร่ที่เราโดนเงื่อนไขทางธุรกิจ หรือความต้องการพิเศษของผู้ใช้ แนวทางการใช้ Navigation ง่าย ๆ แบบนี้มักถูกดัดไปจนกลายเป็นสิ่งที่ผู้ใช้ไม่คุ้นเคย เป็นงานให้ต้องจัดอบรมกันก่อนใช้งาน หรือผู้ใช้ต้องมาอ่านหนังสือคู่มือการใช้งานกัน ถ้าเป็นไปได้ผมอยากชวนให้เรายึด Navigation ให้ปกติมากที่สุด แล้วไปเพิ่มทางลัดพิเศษให้ผู้ใช้รู้ว่ามันพิเศษ ดีกว่าการเปลี่ยนของปกติให้กลายเป็นของแปลกไป
ซึ่งยาก!! เพราะเราจะเอาทั้งความง่าย และความถูกต้องทางธุรกิจ แต่นั่นก็ทำให้งาน UI มีคุณค่า และทำให้ผู้ใช้ของเรามีความสุข
ถ้ามีข้อสงสัยในเรื่องนี้สามารถเข้าไปคุยกันได้ที่ uxinthai.com นะครับ หรือถ้าสนใจบทความอื่น ๆ ลองไปดูได้ที่ blog.uxacademy.in.th ครับ
ดู Workshop ของทาง UX Academy ได้บนเว็บไซต์ หรือหาบริษัทมาช่วยทำ UX ผมแนะนำให้ลองติดต่อ Ahancer ดูนะครับ
