เมื่อก่อนตอนที่โลกเรายังแบ่ง Website กับ Application ชัดเจนกว่าตอนนี้ คนจะใช้ Website ในแบบเดินทางไปในเว็บไซต์ และอ่านเนื้อหาบนเว็บไซต์ ส่วน Application คนจะใช้ในการเปลี่ยนแปลง หรือประมวล กระทำบางสิ่งบางอย่างกับเนื้อหา หรือข้อมูล ผ่านทางชุดคำสั่ง โดยที่ตัวเอกของ Website คือ Link และตัวเอกของ Application คือ ฺMenu กับ Button

เมื่อสองสิ่งนี้เริ่มมารวมกันกลายเป็น Web Application ก็ยิ่งมีการผสมผสานของ GUI Control เพื่อให้เว็บทำหลายสิ่งหลายอย่างได้มากขึ้น อย่างเช่น แทนที่จะเป็นเว็บดูสินค้าเฉยๆ ก็มี Shopping Cart ขึ้นมา มีการคำนวณตรวจดูห้องว่างในโรงแรม จองตั๋วเครื่องบิน ค้นหาข้อมูลที่ต้องการ และอื่นๆอีกมากมาย เกินกว่าการที่โยงเนื้อหาไปมาบนหน้าเว็บหน้าต่างๆ

เมื่อเว็บ ทำอะไรได้มากขึ้น การใช้ GUI Control ก็มากขึ้น
รวมไปถึงการใช้ GUI Control ที่ผิดด้วย

ตัวอย่าง GUI-control ที่ผิดบ่อยๆ

Button
Button แต่ไหนแต่ไรก็จะเป็นการส่ง Action ที่จะกระทำต่อข้อมูล หรือการแสดงผล อย่างใดอย่างหนึ่ง โดยเรามักจะต้องกรอกข้อมูล หรือเลือก option บางอย่างก่อน แล้วเราถึงจะคลิก Button ยืนยันสิ่งที่เราเลือกไป เพื่อให้ระบบทำงานส่งผลออกมาอย่างที่เราต้องการ
แต่หลายๆที่ กลับใช้ Button เป็น Navigation ซึ่งจะทำให้ผู้ใช้สับสนได้ง่าย ว่านี่คือการยืนยัน Action หรือว่าเป็นแค่ Link เชื่อมโยงไปที่อื่น

Link
Link แบ่งเป็นสองอย่างตามการใช้งาน ได้แก่
Navigational Link คือ Link ที่พาไปยังจุดหมายที่กำหนดไว้ใน link นั้น
Command Link คือ Link ที่คลิกแล้วทำให้เกิด action บางอย่างบนเว็บ
ข้อเสียของการใช้ Command Link คือ หน้าตามันเหมือนกับ Navigational Link จนบางทีผู้ใช้สับสนว่า Link นี้เป็น Action หรือว่า Navigational กันแน่ ดังนั้น การกำหนด Label ของ Link จึงมีความสำคัญ ซึ่งต้องกำหนดให้ชัดเจนว่า Link นี้ คลิกแล้ว จะเกิดอะไรขึ้น
จากนั้น ควรจะใช้ Command Link กับ Action ย่อย แล้วให้ Button ทำหน้าที่ของมันไปสำหรับ Action หลัก เช่น เราอาจจะใช้ Command Link กับการหยิบของใส่ตะกร้าก็ได้ แต่เมื่อเป็น Action หลัก เช่น การยืนยันการซื้อ ก็ควรจะเป็น Button

Checkbox
Checkbox คือช่องสี่เหลี่ยมที่ให้คลิกเพื่อเลือก
เราจะสามารถเลือกตัวเลือกได้ตั้งแต่ไม่เลือกเลย
จนไปถึงเท่ากับจำนวนตัวเลือกที่มี
และเราใช้ Stand-alone Checkbox ในการเลือกตัวเลือกที่มีเพียง 2 ตัวเลือกตรงข้ามกันได้อย่างมีประสิทธิภาพ เช่น Yes/No, Active/Inactive, Visible/Invisible เป็นต้น

Radio Button
Radio Button คือช่องกลมๆที่ให้คลิกเพื่อเลือก เช่นกัน
แต่มันมีความแตกต่างในการใช้งานกับ Checkbox อย่างชัดเจน
เราใช้ Radio Button เพื่อบังคับเลือกเพียงตัวเลือกเดียว
ไม่ว่าจะมีจำนวนตัวเลือกเท่าไร ก็เลือกได้เพียงตัวเดียวเท่านั้น
หรือถ้ามีตัวเลือกเพียง 2 ตัว แต่เป็นตัวเลือกที่ไม่ได้มีลักษณะตรงข้ามกัน เช่น
ให้เลือกสี เลือกเพศ ช่วงอายุ และข้อมูลต่างๆที่ต้องการคำตอบจากผู้ใช้เพียงคำตอบเดียว

แต่ในบางเว็บ แทนที่จะใช้ตาม Behavior เดิมๆของมัน ก็ต้องไปโปรแกรมเพิ่มให้มันมี Behavior ที่ผิดแผกไป เช่น ใช้ Checkbox แต่ทำให้มันมี Behavior เหมือน Radio Button
ใช้ Radio Button แต่ทำให้มันมี Behavior เหมือน Checkbox

Dropdown
Dropdown คือแถบที่มีสามเหลี่ยมคว่ำ กดออกมาเพื่อดูและเลือกตัวเลือกทั้งหมด
Behavior เหมือน Radio Button เด๊ะ
ข้อดีของมันคือ ประหยัดพื้นที่ ถ้ามีตัวเลือกเป็นจำนวนมาก
แต่ข้อเสียคือ ถ้าใช้ไม่เหมาะ เช่น ตัวเลือกน้อยๆก็ยังจะใช้ จะทำให้ผู้ใช้เสียเวลาเลือกตัวเลือก
มากกว่า Radio Button

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

เหล่านี้ เป็นตัวอย่าง GUI control พื้นฐาน
ที่เราควรใช้ให้ถูกธรรมชาติของมัน
อย่างไรก็ดี มาถึงสมัยที่เว็บเป็น Rich Internet Application เช่นนี้
ไม่ว่าจะเป็น Air, Flash, หรือ Silverlight
ซึ่งเราสามารถออกแบบและสร้าง GUI control ได้ด้วยตัวเอง
บางทีนักออกแบบก็มันมือ จนอาจจะทำให้เกิดปัญหาบางอย่างตามมา เช่น

Non-Standard GUI Control
คือนอกเหนือจาก GUI Control พื้นฐานแล้ว
ยังออกแบบ Control ตามความคิดสร้างสรรค์ของตัวเองได้อีกด้วย
ซึ่งมันจะเกิดเป็นปัญหาขึ้น เมื่อผู้ใช้ไม่เก็ตตามผู้ออกแบบว่า
Control นั้นๆ ใช้ทำอะไร

ดูเหมือนจะเป็น GUI-Control ปรกติ แต่ไม่ใช่ซะงั้น
อย่างที่บอกไปว่า บางที่ก็ไม่พอใจ Behavior ดั้งเดิมของ Control นั้นๆ
ก็ไปเปลี่ยนแปลงมันซะให้ใช้ยากขึ้นซะงั้น
หรือทำกราฟฟิกปรกติ ให้ไปเหมือน Control ใด Control หนึ่ง
ที่เจอเป็นปรกติมากเลยคือ ชอบออกแบบให้ Header หรือ Topic มันเหมือน Button
ซึ่งคนในทีมเองเทสต์เองยังเข้าใจผิดว่าเป็น Button เลย
ตรงนี้ เรียกว่า เป็นการใช้ Perceived Affordance ของ GUI-control ที่ผิด
พูดง่ายๆก็คือ มันไม่เป็นไปตามที่หวังว่ามันจะเป็น
ทำให้เกิดความสับสนในการใช้งานได้ง่าย

ปัญหาสามัญประจำออฟฟิศนักพัฒนาอีกอันหนึ่งคือ Inconsistency
คือความไม่สม่ำเสมอของ GUI
มักจะเกิดกับโปรเจคที่เริ่มใหญ่ไปถึงใหญ่จริง
เดี๋ยวหน้านี้เป็น Button เดี๋ยวหน้านั้นเป็น Command Link ทั้งที่ function เดียวกันแท้ๆ
เดี๋ยว Link ด้านบน underline แต่ข้างล่างไม่ underline
กลายเป็นเว็บไซต์วัดไอคิวกันไปหมด
ฉะนั้น การมี CSS plan ควบคุมและวางแผนตั้งแต่ต้น จึงเป็นสิ่งที่ต้องให้ความสนใจมาก

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

นี้คือ Landing Page ที่จะเข้าสู่การยื่นภาษี

มองไป มองมา หาที่ยื่นไม่เจอ – -”
ยื่นภาษีตรงไหน ช่วยด้วย

ก็เลยต้องอ่านรายละเอียดทุกบรรทัด
เพื่อให้เห็นว่า อ้อ link ไปที่ยื่นภาษีมันคืออันนี้นี่เอง
ทั้งๆที่การไปยื่นภาษีออนไลน์ น่าจะเป็น Activity หลักของเว็บ
แต่กลับหาทางเข้า At a glance ไม่ได้
ทำให้ผู้ใช้ต้องมาเสียเวลานั่งอ่านรายละเอียดที่ไม่เกี่ยวข้อง

พอดั้นด้น กรอกข้อมูลส่วนตัวเรียบร้อยแล้วเข้ามาถึงหน้ากรอกตัวเลข ดังนี้

ดูเผินๆ ก็ไม่มีอะไรใช่ไหม
ก็เป็นฟอร์มธรรมดา

มันเกิดความสับสนให้กับผู้ใช้เหมือนกัน
ในกรณีที่อิฉันกรอกไปแล้วว่าเป็นสาวโสดโฉดหมวย
แต่เมื่อมาถึงหน้านี้ ช่อง”คู่สมรส” แถบขวาทั้งแถบ
บวกกับช่องคู่สมรสในมาตรา 40(2) ก็โผล่มาให้มึนตึ้บเล่นๆ
เอ๊ะ บอกว่าโสดไง หรือว่าฉันไปแต่งงานกับใครไว้แล้วลืมไปหว่า
มันทำให้เกิดการ Overwhelm ทางด้านข้อมูล
แทนที่ผู้ใช้จะงงภาษีและรายได้ของตัวเองมาก่อนหน้านี้แล้ว
ระบบก็ยังไม่เห็นใจ ยังทำให้ผู้เสียภาษีต้องงงต่อไปอีก

ต่อมา มีการ mix ช่องที่ผู้ใช้อาจ expect ว่าเป็น text only
กลายเป็นบางข้อมี GUI control โผล่ขึ้นมา
อย่างเช่น Radio Button ซึ่งบางข้อ ก็ไม่ให้ผู้ใช้เลือกได้อีก
ถึงแม้ช่องที่ผู้ใช้เลือกไม่ได้จะทำเป็นตัวเทา
แต่นั่นก็ยังดูแปลก เพราะ Control เหล่านี้
ผู้ใช้มักจะเข้าใจว่าเลือกได้ตลอด
เพราะจากประสบการณ์การใช้งาน การเรียนรู้มันบอกว่างั้น
พอมายื่นภาษีออนไลน์ที ต้องเรียนรู้ใหม่เกือบหมดเลยซะนี่

สุดท้าย ถ้าเห็นเป็นแบบฟอร์มธรรมดา
พอกรอกลงมาจนถึงด้านล่างเสร็จแล้วปุ๊บ
ผู้ใช้ก็จะหวังว่าจะได้กด “ต่อไป” หรือ “จบ” เพื่อไปยัง step ต่อไป
อันนี้เป็นพื้นฐานในการกรอกฟอร์ม
แต่เมื่อเลื่อนลงมาถึงด้านล่างจริงๆ กลับต้องงงเป็นไก่ตาแตก
เมื่อมีแต่ Button ไล่ให้กลับไปหน้าแรก ให้ล้างข้อความให้หมด
แล้วก็ให้ยกเลิกการยื่นภาษี

นั่งงงอยู่อึดใจ แล้วถ้าฉันยื่นภาษีต่อ ฉันต้องกดปุ่มไหน
แล้วก็ทำตัวไม่มีเหตุผลไปสักพัก
ถึงจะบางอ้อว่า เง้ย สงสัยมันต้องกดตรงแถบๆฟ้าๆข้างบนนี่แน่ๆเลย

นั่นหมายความว่า Flow ของการทำงาน ถูกขัดขวางด้วยการวางตัวของ Interface
เมื่อผู้ใช้ต้องกรอกข้อมูลลงมาถึงข้างล่างสุด
action ต่อไปต้องมีรองรับไว้ คือการเดินหน้าไปยังขั้นตอนต่อไป
แต่นี่ กรอกเสร็จก็มีแต่ตัวเลือกให้ตัดสินใจถอยหลัง
แปลว่า Flow มันต้องไหลย้อนกลับขึ้นไปด้านบน
ก็งงกันล่ะงานนี้
โอเค ติ๊ต่างว่า เราฉลาดแล้ว เลยไต่กลับขึ้นไปที่หน้าเว็บด้านบน
เมนูฟ้าๆด้านบน เห็นแล้วคนที่กรอกภาษีปีละครั้งอย่างเรา ก็เหนื่อยใจ

ความดีของ Menu อันนี้ เห็นจะเป็นอย่างเดียวก็คือ
มันยังอุตส่าห์ highlight ว่า ตอนนี้เราอยู่ที่หน้าไหน

แต่การออกแบบ interface นั้น ไม่ได้สื่อเลยว่า
ต้องทำไปตามขั้นตอนนี้ หรือห้ามข้ามขั้นตอนไหน
interface มีลักษณะเป็น Tab ซึ่งโดยตัวของมัน
มักจะใช้กับการเลือกหน้าได้โดยอิสระ ไม่มีหน้าใดผูกกับหน้าใดเป็นพิเศษ
ไม่ Afford ให้ผู้ใช้รับรู้ว่า Tab ใดเป็น Tab ที่จำเป็นต้องคลิก
ไม่มีอะไรบอกว่า ต้องกรอกข้อมูลใน Tab ผู้จ่ายเงินได้ ก่อนถึงจะยื่นภาษีได้
หรือแม้แต่ไม่มีอะไรที่บ่งบอกว่า ต้องกด Tab สรุปภาษี ถึงจะยื่นภาษีได้

ทำไมชีวิตมันถึงได้ยากเย็นยิ่งนัก
อีกอย่างก็คือ การแปะ Label ของ Tab นั้น
เป็น Label ภาษากรมสรรพากร ซึ่งไม่ใช่ภาษาของประชาชนทั่วไป
แปลว่า คนที่จะมากรอกภาษีได้ ต้องไปอ่านมาก่อนว่า
เงินได้ 40(1)(2) คืออะไร
เงินได้ 40(3) คืออะไร
เงินได้ 40(6) คืออะไร
ถ้าไม่รู้ว่าอะไร ก็ต้องคลิกดูอีกทีว่า ต้องมีอะไรกรอกหรือเปล่า
ทำให้เสียเวลาทำมาหาเงินมาเสียภาษีโดยใช่เหตุ

ซึ่งทำให้ Interface ที่คาดว่าตอนสร้างขึ้นมา
คงคิดว่าแบ่งเป็น Tab แล้วจะใช้งานง่ายดี
แต่…มันไม่ใช่อะกิ๊บ…

นี่ก็เป็นอีกตัวอย่างที่แสดงให้เห็นว่า
ข้อมูลที่ไม่เกี่ยวข้อง ช่องที่ไม่เกี่ยวข้อง อยู่ในแบบฟอร์มมากเกินไป

อย่างเช่นในรูป มาตรา 40(1) ใส่เงินเดือนเข้าไปแล้ว
เมื่อหักเงินได้ที่ได้รับการยกเว้นกรณีเป็นผู้สูงอายุ
(ทำไมมันคำนวณจากข้อมูลส่วนตัวไม่ได้ฟะว่าอิฉันสูงอายุพอหรือไม่พอ)
มันก็จะคงเหลือเงินที่นำไปคำนวณภาษี เท่านั้นเท่านี้
แต่ตรงช่อง “คงเหลือ” เนี่ย มันเกี่ยวข้องกับ textbox เงินรายได้ในช่องซ้ายสุดเท่านั้น
ช่องขวาถัดมาไม่ได้เกี่ยวอะไรกับเขาเลย ก็ยังขอแจมปรากฏซะหน่อย

เพื่ออะไร – -”
เข้าใจในความยากของระบบระเบียบการจัดเก็บภาษีเหมือนกัน
เขาคงพยายามแล้ว เราก็ต้องพยายามต่อไปของเราเหมือนกัน
ขออย่างเดียว อย่าโดนเก็บภาษีเพิ่มอีกเลย ฮือๆๆ

 

ป.ล.
ยื่นภาษีปีหน้าคงต้องมาเปิดดูบทความนี้ใหม่
อิงจาก
http://www.useit.com/alertbox/application-mistakes.html
http://www.useit.com/alertbox/command-links.html
http://www.useit.com/alertbox/20040927.html
http://www.useit.com/alertbox/20050711.html
http://www.rd.go.th/