โดย Sander Potjer
Joomla นั้นยืดหยุ่นและให้ทางเลือกมากมาย ข้อเสียหนึ่งคือการใช้ Joomla อาจจะดูซับซ้อนไปบ้าง ด้วยเรื่องของการตั้งค่าและ navigation ต่างๆ สำหรับผู้เชี่ยวชาญด้าน Joomla แล้ว นี่ไม่ใช่ปัญหาแต่อย่างใด แต่สำหรับผู้ใช้ทั่วไป นี่อาจเป็นทางตันเลยทีเดียว การเพิ่มบทความใหม่ผ่านทาง frontend ของ Joomla เป็นหนึ่งในหลายสิ่งที่ผู้ใช้ต้องเจอเป็นด่านแรกๆ ซึ่งควรจะเป็นเรื่องที่แสนง่ายแต่หลายคนกลับมองว่าซับซ้อน
แบบทดสอบ End User
ผมอยากจะลองดูและทดสอบว่าผู้ใช้พบเจออะไรบ้าง ผมจึงสร้างเว็บไซต์ Joomla อย่างง่ายขึ้นมา 3 เว็บ และขอให้ Julianne แฟนผมช่วยดู แฟนผมรู้จักว่า Joomla คืออะไรแต่ไม่เคยใช้ ผมให้ข้อมูล login แก่เธอและขอให้เธอช่วยทำสิ่งต่อไปนี้:
- Login โดยใช้ข้อมูลที่ให้ไป
- ตีพิมพ์บทความในหน้า homepage โดยมีชื่อเรื่อง ข้อความ รูปภาพ และ tag
- Logout
วิดีโอต่อไปนี้ ซึ่งเล่นด้วยความเร็ว 2 เท่าของความเร็วปกติ แสดงให้เห็นว่า Julianne ได้พยายามทำโจทย์ที่กำหนดให้อย่างไรบ้าง การเพิ่มชื่อเรื่องและข้อความนั้นทำได้ง่าย ส่วนการเพิ่มรูปและ tag นั้นยากนิดหนึ่ง แต่เธอก็ทำได้ในที่สุด
อย่างไรก็ตาม การ save บทความนั้นทำให้สับสนมากโขอยู่ บทความไม่ได้อยู่ในหน้า homepage มันไปไหนเสียล่ะ? หลังจากที่คลิกไปเรื่อยๆ จนกระทั่งเข้าไปที่ backend ของ Joomla เธอก็สังเกตได้ว่า category ดังกล่าวไม่ได้ถูกเลือกYou must accept cookies and reload the page to view this content
โดยรวมแล้ว Julianne ใช้เวลา 8 นาที 22 วินาทีในการตีพิมพ์บทความ ซึ่งไม่เลวเลยทีเดียว แต่ก็ควรจะทำได้ด้วยเวลาที่น้อยกว่านี้
วิดีโอหลังจากปรับปรุง usability
วิดีโอต่อไปนี้เล่นด้วยความเร็ว 2 เท่าของความเร็วปกติ ใช้โจทย์เดียวกัน แต่ครั้งนี้ใช้ optimized Joomla 3 ซึ่งผมได้ปรับปรุง usability เรียบร้อยแล้วYou must accept cookies and reload the page to view this content
คราวนี้ Julianne ใช้เวลาแค่ 1 นาที 29 วินาทีเท่านั้น ก็แน่ล่ะ นี่ไม่ใช่ครั้งแรกที่เธอใช้ Joomla นี่นา แต่ก็ต้องขอบคุณการปรับปรุงที่ทำให้เธอทำโจทย์ดังกล่าวได้ง่ายดายและไวขึ้น
เคล็ดลับ 10 ประการในการปรับปรุง usability ของ Joomla
สำหรับเราๆท่านๆที่เป็นผู้เชี่ยวชาญ Joomla นั้น บางอย่างอาจจะฟังดูสมเหตุสมผล แต่กลับไม่สามารถเข้าใจได้สำหรับ end user จึงเป็นการดีที่จะลองคิดจากมุมของ end user ดูบ้าง เราอาจจะคอยระแวดระวังในเวลาที่ใครใช้เว็บไซต์อยู่ นี่เป็นแรงบันดาลใจให้ผมสำหรับส่วนเพิ่มเติมต่อไปนี้
1. redirect ไปยังหน้าที่เกี่ยวข้องหลังจาก login
โดยปกติแล้ว ผู้ใช้จะถูก redirect ไปยังหน้า profile หลังจาก login เข้าเว็บไซต์ Joomla โดยการตั้งค่าต่างๆ มากมายจะถูกแสดงไว้ในหน้า profile นี้ ซึ่งทำให้เกิดคำถามตามมา
อย่างไรก็ตาม น่าจะดีกว่าถ้าเราตั้งค่า URL ของเพจที่อยากให้ redirect ไว้ใน menu item ของ login ยกตัวอย่างเช่น ควร redirect ไปยังหน้าสร้างบทความใหม่ในกรณีที่การสร้างบทความใหม่เป็นจุดมุ่งหมายหลักของการ login เข้าเว็บไซต์
2. พยายามทำให้มันง่ายๆ โง่ๆ เข้าไว้
ลองพยายามซ่อนหรือ disable ทุกอย่างที่ไม่เกี่ยวข้องกับเว็บไซต์ดูสิ เพราะยิ่งมีเรื่องจุกจิกให้ผู้ใช้พิจารณาน้อยลงเท่าใด ก็ยิ่งน่าใช้มากขึ้นเท่านั้น แต่ก็ต้องแน่ใจว่าสิ่งที่เหลือปรากฏอยู่จะไม่ทำให้ผู้ใช้งงไปเสียก่อน
คุณมี menu item “Login” ในเว็บไซต์คุณหรือไม่ ตรวจสอบให้แน่ใจว่าจะไม่มี menu item นี้ปรากฏอยู่หลังจาก login แล้ว และแสดง menu item “Logout” แทน
คุณสามารถทำสิ่งที่กล่าวมาได้โดยการใช้ “Guest” access level หากตั้งค่าไว้สำหรับ menu item หรือ article หรือ module มันจะปรากฏต่อผู้ใช้ที่ไม่ได้ login เข้าเว็บไซต์เท่านั้น
3. ใช้งานการตั้งค่า Joomla
การตั้งค่าหลายๆอย่างใน Joomla อาจจะเป็นข้อด้อย แต่คุณก็สามารถใช้สิ่งเหล่านี้ในการปรับปรุง usability สำหรับ end user ได้ การตั้งค่า “Session Lifetime” อาจจะทำให้สับสนได้มากทีเดียว ลองนึกภาพว่าผู้ใช้คนหนึ่งกำลังสร้างบทความมาเป็นระยะเวลาหนึ่ง บันทึกบทความ แต่กลับพบข้อความ “กรุณา login ก่อน” เพราะเวลาใน session หมดเสียแล้ว ดังนั้น อาจจะเพิ่มการตั้งค่านี้เป็น 60 นาที เป็นต้น
อีกตัวอย่างคือการวางรูปแบบ category ตั้งต้นของบทความใหม่ที่ส่งมาทาง frontend ถามว่าผู้ใช้สามารถตีพิมพ์บทความใน category “Blog” ได้เท่านั้นใช่หรือไม่ จงตั้งค่า category นี้ให้เป็นค่าตั้งต้นที่การตั้งค่า menu item และวิธีการดังกล่าวจะช่วยป้องกันไม่ให้บทความถูกเพิ่มเข้าไปในบริเวณที่ไม่ปรากฏบนเว็บไซต์
4. ลดตัวเลือกใน text editor
TinyMCE editor เป็น text editor ตั้งต้นใน Joomla มีหลากหลายตัวเลือกในการใช้เขียนบทความ หรือบ่อยครั้งอาจจะมากเกินไปด้วยซ้ำ เพื่อขจัดปัญหาดังกล่าว ผู้ใช้หลายคนจึงหันไปใช้ text editor ของ third party แทน
แต่คุณรู้หรือไม่ว่า TinyMCE editor นั้นก็สามารถตั้งค่าได้หลายแบบเช่นกัน เนื่องจากมันเป็น plugin ถ้าคุณเปิดด้วย plugin manager ก็จะสามารถตั้งค่า functionality ให้เป็น “Simple” ได้ และด้วยวิธีการนี้ก็จะมีเพียงแค่ตัวเลือกพื้นฐานที่จำเป็นในสำหรับ text editor เท่านั้น
5. ทำให้ user group และ access level เข้าใจได้ง่าย
ทุกเว็บไซต์ Joomla จะประกอบไปด้วย user group ตั้งต้นและ access level ตั้งต้นหลังจากการติดตั้ง บ่อยครั้ง หลายๆกลุ่มดังกล่าวไม่ค่อยมีประโยชน์สักเท่าไหร่ สามารถลบทิ้งได้ไม่มีปัญหา
สำหรับ user group และ access level ที่คงเอาไว้นั้น จะเป็นประโยชน์มากถ้าตั้งชื่อใหม่เสียให้เข้าใจได้ง่าย เช่น “Administrator” นั้นชัดเจนกว่า “Super user”, ใช้ “Bloggers” แทนที่จะใช้ “Special” โดยเฉพาะอย่างยิ่งในยามที่ผู้ที่ไม่ได้สันทัดในเรื่อง Joomla นักใช้เว็บไซต์ เหนือสิ่งอื่นใด การที่บทความปรากฏต่อ “Bloggers” แทนที่จะเป็น “Special” นั้น สร้างความกระจ่างขึ้นอีกมาก
6. เลี่ยงความสับสน อย่าให้ access ที่ไม่จำเป็น
Joomla มีระบบอนุมัติขั้นสูง (Advanced Permission System) คือ ACL ซึ่งจะช่วยให้คุณวางแบบแผนได้ชัดเจนว่า user group ใดสามารถทำสิ่งใดได้บ้าง สำหรับ user group ตั้งต้นนั้น ความสามารถเหล่านี้ถูกกำหนดมาเรียบร้อยแล้ว แต่แน่นอนว่าสามารถปรับเปลี่ยนได้อย่างเต็มรูป
ต้องขอบคุณระบบ ACL นี้เองที่กำหนดให้แต่ละคนสามารถเข้าถึงบริเวณที่จำเป็นสำหรับหน้าที่บางอย่างเท่านั้น ซึ่งในทางหนึ่ง เป็นการช่วยป้องกันการเปลี่ยนแปลงที่ไม่พึงปรารถนา และอีกทางหนึ่งช่วยป้องกันไม่ให้ผู้ใช้ต้องประสบกับตัวเลือกมากมายมหาศาลที่ไม่เกี่ยวข้องกับตนและชวนให้สับสนด้วย
7. ใช้ language override เพื่อให้กระจ่างยิ่งขึ้น
วิธีการหนึ่งที่เรียบง่ายทว่าทรงพลังในการปรับปรุง usability ของ Joomla คือการใช้ language override ทุกๆข้อความและป้ายของระบบจะถูกบรรจุไว้ในไฟล์ภาษา คุณสามารถ override ค่าคงตัวภาษาเหล่านี้ได้อย่างง่ายดายด้วยข้อความที่เกี่ยวข้องกับเว็บไซต์มากกว่า ผ่านทาง Joomla Language Manager
ถามว่า ป้าย “Access” ที่บทความ ยังชัดเจนไม่พอใช่หรือไม่ ก็เปลี่ยนเป็น “Visible for” เสีย หรือเปลี่ยนตัวเลือกสถานะ จาก “Unpublished” เป็น “Concept” แทน ซึ่งทำให้หลายคนเข้าใจถ้าต้องการจะบันทึกการเปลี่ยนแปลงในบทความ คุณสามารถแม้แต่จะเพิ่มค่าคงตัวภาษาของคุณเองได้หากต้องการ
8. เปลี่ยนการแสดงผลเว็บไซต์ด้วย template override
template override นั้นซับซ้อนกว่า language override แต่ก็ช่วยให้คุณ customize การแสดงผลของ Joomla ได้อย่างเต็มรูปแบบโดยไม่ต้องเปลี่ยน Joomla core code และด้วยวิธีการนี้คุณสามารถขจัดฟังก์ชันที่ไม่ต้องการออกไปได้ หรือจะเพิ่มฟังก์ชันที่ต้องการเข้ามาก็ได้
ตั้งแต่ Joomla 3 เป็นต้นมา การสร้าง template override ทำได้ง่ายขึ้นมาก เมื่อต้องการปรับแต่ง template ใน template manager จะมีปุ่มใหม่ชื่อ “Create Overrides” ในรูป คุณคลิกไฟล์ที่ต้องการจะ override จากนั้น override file จะถูกสร้างขึ้นโดยอัตโนมัติสำหรับการปรับแก้ต่อไป
9. Optimize ด้วย CSS และ JavaScript
คุณสามารถปรับปรุง usability ด้วย CSS และ JavaScript ได้เหมือนกัน ส่วนใหญ่แล้ว ทุก element ในการแสดงผล Joomla จะมี class ของมันเอง ที่คุณสามารถใช้ effect หลากหลายแบบกับ element เหล่านี้ได้
คุณสามารถใช้ CSS เพื่อแสดง title input field ของ new article submission form ให้ใหญ่ขึ้นได้ เพิ่ม placeholder ได้ด้วย JavaScript หรือซ่อน label หรือ field บางอย่างด้วย CSS ก็ได้เช่นกัน
10. แบ่งแยก article input fields
ผู้ที่ใช้ Joomla มาเป็นเวลานานจะพบประเด็นนี้ นั่นคือ ผู้ใช้เพิ่มรูปเข้ามาในบทความ ก่อนที่จะทันรู้ตัว ก็พบว่ารูปใหญ่ขนาด 2000 pixels ถูกเพิ่มเข้ามา วางผิดที่ผิดทางไปหมด ซึ่งทำให้เว็บไซต์น่าเกลียด ไม่เข้าที่เข้าทาง
โชคดี ที่บัดนี้ผู้ใช้สามารถเลือกรูปผ่านทาง field ที่แยกต่างหาก ตราบเท่าที่ template รองรับฟังก์ชันการใช้งานนี้ รูปจะแสดงอย่างสม่ำเสมอ ไม่ผิดที่ผิดทาง ผู้ใช้ก็ใช้ง่าย และเว็บไซต์ก็สวยเก๋ดังเดิม
อย่าให้ฉันต้องคิด!
จุดเริ่มต้นของเกร็ดในการปรับปรุง usability เหล่านี้ คือ “อย่าให้ฉันต้องคิด” (เป็นชื่อคู่มือแนะนำ เขียนโดย Steve Krug ด้วย) กล่าวคือ ช่วยให้ผู้ใช้ไม่ต้องสงสัย ค้นหา หรือใช้งานโครงสร้างที่ไม่สมประกอบ ที่จะทำให้พวกเขาทำอะไรผิดๆถูกๆโดยไม่จำเป็น
Template override สำหรับหน้า “สร้างเนื้อหา”
ในแบบทดสอบนี้ เราใช้ template override สำหรับ view ที่ใช้ในการสร้างบทความหรือแก้ไขบทความ มาเป็นตัวอย่าง ทุกๆเคล็ดลับที่กล่าวมาข้างต้นสามารถใช้ผสมผสานกับ template override นี้ได้
ฉันใช้ override นั้นได้หรือไม่?
แน่นอนว่าได้! สามารถดู code ที่สมบูรณ์ของ template override นี้ได้ที่นี่: https://gist.github.com/sanderpotjer/5488c2a10dceeee7db7d.
สร้าง template override ใหม่ผ่านทาง template manager สำหรับ com_content -> form หรือสร้างไฟล์ใหม่ใน template override directory ของคุณ: templates/template-name/html/com_content/form/edit.php. เพียงแค่ copy และ paste template override code จากไฟล์ดังกล่าว และ customize ต่อไปได้ตามที่ต้องการ
ขอให้เพลิดเพลินกับการปรับปรุง usability ของ website คุณ!
