Drupal Usability 1 - Create Content

ช่วงนี้ประเด็นร้อนในหมู่นักพัฒนา Drupal คนสำคัญๆ คือ usability ของ Drupal ต้นเหตุมาจาก[รายงานการศึกษา usability โดยมหาวิทยาลัย Baltimore (PDF)](http://groups.drupal.org/files/DrupalUsabilityResearchReport.pdf) ซึ่งก่อให้เกิดเสียงฮือฮาในแวดวงพอสมควร (อารมณ์ประมาณเพิ่งรู้ว่ามันห่วย) ผู้นำโครงการอย่าง Dries เองถึงกับ[บล็อกเรื่องนี้](http://buytaert.net/usability-usability-and-usability)ไว้ว่า > I printed the report, taped it on my wall, and I won't release Drupal 7 until I crossed of at least 90% of the problems they identified. (อ่านแล้วแทบน้ำตาไหล) ผมอ่านผลการวิจัยตั้งแต่มันออกใหม่ๆ และตั้งท่าจะเขียนถึงประเด็นนี้มาเกือบเดือนแล้ว แต่เนื่องจากเรื่อง usability เป็นเรื่องที่ซับซ้อน (พอมารวมกับ Drupal ที่ซับซ้อนอยู่แล้ว ก็ยิ่งยากขึ้นไปอีก)​ทำให้ต้องใช้พลังเยอะ พลอยไม่ได้เขียนเสียที วันนี้เกิดมีไฟ แถมนึกขึ้นได้ว่าแบ่งส่วนเขียนได้นี่นา เอาส่วนง่ายมากเขียนก่อน #### เกริ่น ผู้ใช้ Drupal แบ่งได้เป็น 3 กลุ่มใหญ่ๆ * ผู้ชมเว็บอย่างเดียว อย่างเก่งก็เขียนคอมเมนต์ * คนเขียนเนื้อหา * แอดมิน กรณีแรกไม่ใช่ปัญหาเพราะว่างานมันง่ายมาก การ "อ่าน" เว็บ (หรือพูดให้จริงจังหน่อยคือค้นหาและเสพข้อมูลจากเว็บ) เป็นเรื่องที่เกิดขึ้นมาพร้อมๆ กับเว็บ และเรามี conventional wisdom ที่รู้จักกันแพร่หลายให้ใช้ เช่น ระบบนำทางเว็บด้วยเมนูหรือ sidebar เป็นต้น ส่วนการตอบคอมเมนต์ก็ไม่มีอะไร แค่พิมพ์ๆ ลงในกล่องแล้วกด submit เท่านั้น กลุ่มที่สองมีปฏิสัมพันธ์กับ Drupal มากขึ้น นั่นคือได้เขียนเนื้อหาของเว็บไซต์ผ่าน Drupal ด้วย ก็จะมีโอกาสได้ยุ่งเกี่ยวกับ Drupal สูงขึ้น ปัญหาที่เกิดจึงมากขึ้นตาม กลุ่มสุดท้ายคือแอดมินของระบบ คนที่ควบคุม Drupal อย่างจริงจัง (ถ้าเป็นเว็บบล็อกที่เขียนคนเดียวอย่างเว็บนี้ กลุ่มสองกลุ่มสามก็จะเป็นคนเดียวกัน) ชีวิตที่เหลืออยู่ก็ต้องวนเวียนอยู่ใน Drupal ตลอดกาล ถ้าระบบออกแบบมาไม่ดี กลุ่มนี้จะมีปัญหาเยอะที่สุด แนวคิดเรื่องหน้าแอดมินของ Drupal จะต่างจาก CMS ตัวอื่นๆ ที่แบ่งเป็นโหมดชัดเจน (ภาษาของ Mambo เรียกว่ามี backend/frontend) แต่ของ Drupal มันจะปนกันมั่วๆ เล็กน้อย เรื่องนี้เป็นที่ถกเถียงกันมาก และไอเดียผมยังไม่ breakthrough มากนักขอข้ามไปก่อน วันนี้มาว่ากันเรื่องที่ยากน้อยลงคือหน้าเขียนเนื้อหาอย่างเดียว #### Drupal หน้าเขียนเนื้อหาของ Drupal มีหน้าตาดังภาพ (หน้าของ Blognone) จะเห็นว่าค่อนข้างยาวและงงๆ เล็กน้อย ในหน้านี้จะแบ่งเป็น 2 ส่วนหลักๆ ได้แก่ส่วนที่สำคัญแก่การเขียนเนื้อหาจริงๆ เช่น title, body (และในบางกรณีคือ tag) ซึ่งอยู่ในวงสีแดงที่ทำเครื่องหมายไว้ กับตัวเลือกเพิ่มเติมอื่นๆ นอกวงสีแดง ส่วนแรกนั้นแทบไม่ต่างกันใน CMS แต่ละตัว เพราะถูกบังคับด้วยฟังก์ชันการใช้งานอยู่แล้ว แต่บน Drupal มันกลับมีปัญหาจนได้ ปัญหายอดนิยมอันดับหนึ่งของคนทำเว็บด้วย Drupal คือไม่มี WYSIWYG ให้ในตัว (ซึ่งจำเป็นมากสำหรับผู้ใช้เว็บทั่วไปที่คุ้นเคยกับการเขียนเอกสารด้วย Word) ทางแก้แบบ workaround ในปัจจุบันคือใช้ WYSIWYG ภายนอก ซึ่งตัวยอดนิยมได้แก่ TinyMCE กับ FCKeditor โดยส่วนตัวแล้วผมไม่ชอบทั้งคู่ ไม่ชอบพฤติกรรมของ FCKeditor ซึ่งมันชอบทำอะไรเกินเลย แต่ TinyMCE เวอร์ชันสำหรับ Drupal เองก็ยังไม่ polish เท่าไรนัก ยังดูเป็นเวอร์ชันแฮ็คแก้ขัดมากกว่า แต่สรุปว่ามีทางเลือกให้แค่นี้ ส่วนที่สองที่เป็นตัวเลือกต่างๆ นั้นก็มีปัญหาคือเยอะมากยาวมาก นี่คือภาพที่แสดงตัวเลือกทั้งหมดออกมาให้เห็น (ตัวเลือกของ Blognone จะเยอะกว่าปกติหน่อย แต่ว่ารุ่นมาตรฐานก็ยังเยอะอยู่ดี) ปัญหาของตัวเลือกเยอะๆ ยาวๆ แบบนี้จะเกิดกับผู้ใช้หน้าใหม่ที่ไม่คุ้นเคย ทำให้ learning curve สูงขึ้นอย่างไม่จำเป็น สรุปว่าของ Drupal นั้นทำไม่ค่อยดี (แต่ไม่ถึงกับแย่เหมือนกับ Mambo/Joomla ที่ทำให้ metaphor ของเว็บเสียไป) ทีนี้เรามาดูกันว่าอันที่ทำออกมาดีมันเป็นอย่างไรบ้าง ชาวบ้านเขาแก้ปัญหาเดียวกันของงานแบบเดียวกันอย่างไร #### WordPress WordPress เป็น CMS สำหรับ "เขียน" ต่างจาก Drupal ที่เป็น CMS ครอบจักรวาล การที่ WordPress มีจุดมุ่งหมายเฉพาะเพียงหนึ่งเดียว ทำให้สามารถ (และจำเป็น) ต้องโฟกัสให้ผู้ใช้ซอฟต์แวร์ "เขียน" ได้ง่ายที่สุด หน้าเขียนบล็อกของ WordPress เป็นดังภาพ (ยกมาจาก Wordpress.com คิดว่าเป็น 2.6 แล้วนะ) ในกรอบสีแดงอันบน เป็นส่วนหลักของการเขียน ซึ่งจะกล่าวต่อไป ส่วนกรอบล่างเป็นส่วนของการใส่แท็ก ซึ่ง WordPress มีทั้ง Tags และ Category (ต่างจาก Drupal ที่มองว่ามันคืออันเดียวกัน) เรื่องแท็กนี้อยู่นอกสโคปของบล็อกก็คงไม่พูดถึง สำหรับส่วนตั้งค่าของ WordPress นั้นถูกแบ่งเป็น 2 ส่วนคือ ด้านใต้ (Advanced Options) และด้านข้าง (Publish Status) มาดูที่ส่วนหลักของการเขียนกันก่อน WordPress นั้นใส่ใจกับการเอามาทำเป็นบล็อกมาก จึงให้ WYSIWYG มาเลย ดังภาพ ปุ่มใน WYSIWYG ของ WordPress นั้นคัดเลือกมาเป็นอย่างดี พอเหมาะพอควร พวกที่ไม่ค่อยจำเป็นอย่าง Undo หรือ Horizonal line ก็ไม่ให้มา (ตรงนี้ต่างจาก FCKeditor ที่ให้ชุดปุ่มมาตรฐานมา 3 แบบแต่ไม่ถูกใจผมสักอัน หรือ TinyMCE ที่แอดมินต้องมานั่งเลือกเองว่าจะเอาปุ่มอะไร) ข้อจำกัดของ WYSIWYG คือมันชอบทำอะไรให้เราเกินเลย ดังนั้นสิ่งที่ WYSIWYG ต้องมีคือการเปิดโอกาสให้คนเขียนแก้โค้ด HTML เองได้ ซึ่งบางค่าย (เช่น TinyMCE) ใช้ปุ่ม toggle ปิด-เปิดโหมดแก้ไข HTML (ถ้าจำไม่ผิดรู้สึกจะแสดงในหน้าต่างใหม่นะครับ) แต่ของ WordPress ใช้แท็บ ซึ่งให้ความรู้สึกของโหมดเหมือนกัน แต่ไม่ต้องแสดงในหน้าต่างใหม่ และไม่ปะปนกับปุ่มทั่วไปด้วย ข้อสังเกตอีกอันคือมีการรวบปุ่ม Add media (ซึ่งเป็นของสำคัญในบล็อก แต่ไม่ใช่ในการเขียนเอกสารบน Word processor จึงใช้ UI เดียวกันไม่มีประสิทธิภาพเท่าไร) ไว้ต่างหาก อันสุดท้ายที่ชอบมากของ WordPress คือปุ่มแทรกภาพ กดแล้วจะไม่มี popup ขึ้นมาให้เสียโฟกัส แต่ใช้เป็น div อันใหม่ในหน้าเดียวกันแทน (เรื่อง modal dialog นี้เป็นประเด็นคลาสสิก ตัวอย่างใกล้เคียงที่ใกล้ตัวคือ Find toolbar ของ Firefox ที่เปลี่ยนจาก modal dialog แบบเดิมมาเป็นทูลบาร์ และได้รับเสียงตอบรับดีมาก) สำหรับส่วนของตัวเลือกในการโพสต์บล็อก WordPress เองก็ไม่มีทางเลือกมากนัก ต้องใช้วิธีแสดงไว้ด้านล่างเช่นเดียวกับ Drupal และซ่อนตัวเลือกทั้งหมดไว้ให้ผู้เขียนกดเอง เมื่อคลี่ออกมาแล้วก็จะคล้ายๆ กันดังภาพ สิ่งที่ WordPress ทำดีกว่าคือจำกัดจำนวนตัวเลือกให้เหลือเฉพาะอันที่จำเป็นจริงๆ เลยมีเท่าที่เห็น แต่จุดสำคัญอยู่ที่ตัวเลือกอีกส่วนที่แบ่งมาใส่ด้านขวามือของกรอบเขียนเนื้อหา การออกแบบนี้ชาญฉลาดมาก นอกจากจะใช้เนื้อที่ด้านข้างซึ่งเหลือทิ้งเปล่าประโยชน์แล้ว (เพราะว่า WordPress ใช้ระบบ backend-frontend จึงไม่มี sidebar เกะกะเหมือนกับ Drupal) ยังเป็นการนำเอาปุ่มสำคัญที่สุดคือปุ่ม Submit (ในที่นี้คือ Publish) มาไว้ในตำแหน่งใกล้กับส่วนหลัก (Body) ของการเขียนด้วย นั่นแปลว่าถ้าผู้เขียนไม่ต้องการตั้งค่าตัวเลือกอะไรเป็นพิเศษ ก็จิ้มที่ปุ่ม Save/Publish ได้เลย ไม่ต้องเลื่อนหน้าลงไปแบบ Drupal (หมายเหตุ: ส่วนของ Related และ Shortcuts นั่นเป็นของแถม ขอข้ามไป) เมื่อดูรายละเอียดในแต่ละจุดครบหมดแล้ว ให้ลองกลับไปดูภาพแรกสุดของ WordPress เพื่อดูภาพรวม สิ่งที่ต่างจาก Drupal อย่างชัดเจนคือสีครับ จะเห็นว่า WordPress มีการใช้สีและเส้นเข้าช่วยในการแบ่งหมวดหมู่อย่างมีประสิทธิภาพ (ต่างจาก Drupal ที่ขาวล้วน) และไม่ใช่มากเกินไปจนมารบกวนงานหลักคือการเขียน สีที่ใช้เป็นสีโทนเรียบไม่ฉูดฉาด ไม่ distract การทำงาน #### Blogger ตัวอย่างที่ดีอีกอันคือ Blogger บริการบล็อกที่นิยมที่สุดในโลก หน้าตาส่วน backend อันปัจจุบันของ Blogger นี้เพิ่งมีหลังจากโดนกูเกิลซื้อไปแล้ว ผมทันรุ่นก่อนแต่จำไม่ได้ว่าเป็นยังไง รู้แต่ว่าเวอร์ชันปัจจุบันดีกว่าเดิมมาก หน้าเขียนบล็อกของ Blogger เป็นดังภาพ จะเห็นว่าคล้ายกับ WordPress มาก คือมี WYSIWYG และใช้แท็บสำหรับสลับโหมด ส่วนที่ถูกแสดงมีแค่ส่วนที่จำเป็นจริงๆ เท่านั้นคือ Title, Body และ Label สำหรับตัวเลือกจะถูกซ่อนไว้เช่นกัน (Post Options) และเมื่อคลี่ออกมาแล้วจะพบว่ามันมีตัวเลือกให้น้อยจริงๆ น้อยกว่า WordPress เยอะเลย (แต่ต้องไม่ลืมว่าจำนวนของตัวเลือกนั้นแปรตามฟีเจอร์ด้วย) หลักการต่างๆ พูดในของ WordPress ไปเยอะแล้วคงไม่พูดซ้ำเพราะเหมือนกันเกือบหมด ที่ Blogger ด้อยกว่าคงเป็นปุ่มใส่ภาพซึ่ง Blogger ยังใช้การเปิดหน้าต่างใหม่ขึ้นมาแทน แต่สิ่งที่ Blogger ทำดีกว่าคือใส่ใจกับผลลัพธ์ (บล็อกที่เขียนเสร็จแล้ว) มาก จะเห็นว่าในภาพข้างบนมีลิงก์ View Blog ในแท็บด้านบน กับ Preview ในแท็บด้านล่าง เท่านั้นยังไม่พอ เมื่อเขียนเสร็จแล้ว หน้าถัดไปก็จะมีลิงก์ View Blog ให้เห็นเด่นชัด ผู้ใช้สามารถกดตามไปดูผลงานสดๆ ร้อนๆ ของตัวเองได้ทันที ไม่ต้องงงว่าไอ้ที่เขียนไปเมื่อกี้มันจะอยู่ตรงไหน ออกมาตรงใจหรือเปล่า (นอกจากนี้ยังมีลิงก์อำนวยความสะดวกที่ใช้บ่อยอีกสองอันให้ด้วย คือ แก้ไขบล็อกอันที่เพิ่งเขียนไป หรือเขียนเรื่องใหม่ต่อถ้าไฟแรง) ข้อสรุปง่ายๆ ของผมคือ 1. Drupal ต้องใส่ WYSIWYG (ซึ่งดูเป็นไปได้ยาก อาจจะได้เห็นใน Drupal เวอร์ชัน Acquia แทน) 2. ปรับหน้าเขียนบล็อกให้มาแนวเดียวกับ WordPress/Blogger (ซึ่งจะไปติดข้อจำกัดเรื่อง frontend-backend นิดหน่อยแต่ไม่เยอะมาก) ไว้มีแรงจะแปลเป็นอังกฤษ แล้วโพสต์ลง [Drupal Usability Group](http://groups.drupal.org/usability)
Keyword
Submitted byxinexoon Thu, 07/17/2008 - 12:04

เพราะมันทำได้เยอะ usability มันก็เลยห่วย ผมมีโอกาสได้เล่นกับ drupal พักนึงเพราะต้องเขียน module ของบริษัทให้ เจอหน้า post blog มันก็อึ้งแล้ว ปุ่มเยอะเกินคำบรรยาย

ถ้าจะทำแค่ blog ลืม drupal ไปได้เลยครับ (ผมคิดว่างั้นนะ)

Submitted bythepon Thu, 07/17/2008 - 15:05

ผมไม่เคยใช้พวก WYSIWYG เลยแฮะ ทั้งของ blogger ทั้งของ TinyMCE ถ้าเจอก็มักจะคลิกเข้า HTML mode เป็นโรคจิตอะไรสักอย่างที่เห็น WYSIWYG แล้วไม่สบายใจ กลัวโค้ดไม่สวย :P

ปัญหาของ WYSIWYG ที่พบตอนไปลง drupal + TinyMCE ให้บริษัทแห่งหนึ่งคือ เวลาพนักงานจะโพสต์หรือเขียน comment จะใช้วิธี copy + paste จาก word มาเลย ซึ่ง HTML code จะเละมาก ทั้ง hard-code ฟอนต์ กำหนด paragraph style แบบ manual ฯลฯ เลยทำให้เว็บทั้งหมดไม่มีเอกภาพ แต่ละโพสต์ก็สไตล์ใครสไตล์มัน

Submitted bymarkpeakneton Thu, 07/17/2008 - 16:08

@thep: คิดแบบเรา มันเลยไม่รวยสักทีไงครับ :P

Submitted bythepon Thu, 07/17/2008 - 20:14

นั่นสิ ผมเลยได้อบรม HTML พื้นฐานแถมให้เขาอีกคอร์สนึง :P

ผมเลือกที่จะ educate user มากกว่าถ้าทำได้ เพราะถ้าปล่อยให้ใช้เวิร์ดผ่าน TinyMCE ต่อไป เว็บจะดูไม่จืดเลย เดี๋ยวตัวเล็ก เดี๋ยวตัวใหญ่ แต่ละคนตั้ง default font ในเวิร์ดไม่เหมือนกันอีก

Submitted byamaudyon Thu, 07/17/2008 - 22:19

ผมก็หาวิธีให้มันใช้ง่ายกว่านี้เหมือนกันครับ

ส่วนปัญหา Copy&Paste จากเวิร์ด ผมให้ผู้ใช้ ไปวางใน Notepad แล้ว Copy&Paste อีกครั้งนึง

Submitted byiMennon Fri, 07/18/2008 - 12:53

คารวะ 1 จอก

กระผมเข้ามาเพื่อสรรเสริญเวิร์ดเพรสโดยเฉพาะ แถมโฆษณานิดหน่อยถึงบล็อกของกระผม เวิร์ดเพรส - โค้ดดั่งบทกวี

เมื่อก่อน ชอบการโพสต์ในรูปแบบ Texttile ของ TextPattern มาก มันรกน้อยกว่า HTML แต่ยังไม่เกะกะเหมือน WYSIWYG กระนั้นเมื่อเจอ Wordpress ก็ถึงกับอ่อนเปลี้ยและก้มกราบ - ทำไมกระผมไม่สามารถคิดได้แบบนี้ตั้งนานแล้วฟระ?

@thep @mk อยากให้ดูว่า Wordpress นั้นประณีประนอมกับ WYSIWYG เพียงใดครับ ไม่อวดฉลาด รักษาความสำคัญของโค้ดอันสะอาดสะอ้าน ลองกดขวาสุด มันจะเพิ่ม Toolbar อีก แต่กระนั้น มันก็ไม่มีการอนุญาตให้เปลี่ยน Font Size แต่อนุญาตให้เปลี่ยน H1, H2, PRE, etc. ซึ่งเข้าท่ากว่ามาก, การมีปุ่ม Paste as Plain Text แสดงถึงการเข้าใจภาวะกักขฬะของ Rich Text เป็นอย่างดี การใส่ link และถอด link ซึ่ง WYSIWYG Editor อื่นๆไม่ฉลาดเท่านี้ ฯลฯ

แม้กระทั่งด้าน HTML มันก็ยังฉลาดขนาดที่ว่า ใส่ P ให้เราเองได้ (ธรรมดานี่?) แต่จะไม่ใส่คร่อม Tag ที่ไม่ควรใส่ เช่น Table, TH, TD (เฮ้ย แม่งรู้อีก)

เพราะแท็ก P กับ BR นี่แหละ ที่ทำให้ลูกค้าหลายรายไม่อยากใส่ข้อมูลเป็น HTML

Submitted bymarkpeakneton Fri, 07/18/2008 - 13:55

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

จริงๆ บล็อกอันนี้ไม่ได้ตั้งใจเขียนประเด็น WYSIWYG แต่เป็นการดีไซน์หน้า create content แต่ WYSIWYG ฮิตมาก เดี๋ยวเขียนเป็นเอ็นทรีใหม่

Submitted byo_sinbiz@hotmail.comon Sun, 08/03/2008 - 18:26

ขอวิธีการใช้อย่างละเอียดได้ไหมครับ อยากได้มาก ถ้าจะเป็นไปได้จะขอบพราคุณมากครับ