Human-Computer Interface เป็นอีกสายงานที่ผมสนใจมากๆ ขนาดคิดจะไปเรียนต่อด้านนี้ เผอิญช่วงนี้ไอเดียกระฉูด นั่งออกแบบ UI ของโปรแกรมหลายตัว เลยมาบล็อกเก็บไว้

โปรแกรมทุกตัวเป็น mockup ซึ่งใช้วิธีทำแตกต่างกันไป ทุกตัวยังไม่มีโครงการจะเขียนให้มันทำงานได้จริงๆ (ถ้าสนใจก็ติดต่อมาได้)

เริ่มจากตัวแรกก่อน Organization Chart Visualizer ที่ยังไม่มีชื่อ

ที่มาโครงการ

ช่วงนี้ผมต้องเกี่ยวข้องกับโครงสร้างของหน่วยราชการค่อนข้างบ่อย จะเจอคำถามอย่างเช่น หน่วยงานนี้เป็นอะไรกับหน่วยงานนั้น หน่วยงานนี้มีหน่วยงานย่อยกี่แห่ง หน่วยงานย่อยมีกี่แบบ เหมือนกันมั้ย จนไปถึงหัวหน้าหน่วยงานนี้ชื่ออะไร ซึ่งจริงๆ แล้วข้อมูลพวกนี้เป็นข้อมูลที่เปิดเผย เพียงแต่รู้กันเฉพาะบุคคลภายในเท่านั้น ตัว Organization Chart ขององค์กรอยู่ในรูปแบบ tree หรือจริงๆ คือเป็นกราฟ (ซึ่งเป็นกราฟคนละแบบกับกราฟราคาหุ้น ถ้าไม่เคยเรียนอ่านที่ Wikipedia)

ถ้าเราเอากราฟ Organization Chart ของแต่ละหน่วยงานย่อยๆ มาต่อกัน มันก็ควรจะได้จิ๊กซอว์ชิ้นใหญ่ ที่แสดงโครงสร้างทั้งหมดของหน่วยราชการไทยได้ (โดยที่มีนายกรัฐมนตรีเป็น root node เป็นต้น)

และถ้าเรามีระบบ Visualization เจ้ากราฟใหญ่อันนี้ที่ดี มันก็น่าจะอำนวยความสะดวกได้มาก ในการค้นหาและเปรียบเทียบข้อมูลของหน่วยงานราชการไทย นอกจากนี้ถ้าดีไซน์ให้มัน generalize หน่อย ก็จะเป็น Visualizer ของกราฟอะไรก็ได้เช่นกัน

Mockup Screenshot

ผมนั่งคิดมาสองสามชั่วโมง เลยตัดสินใจสร้าง mockup ขึ้นมาให้ไอเดียในหัวมันชัดเจน ตัวหน้าต่างโปรแกรมใช้ Interface Builder เพื่อความรวดเร็วและสวยงาม ตัวกราฟห่วยๆ ข้างในใช้ GIMPShop (เผอิญฝีมือวาดรูปห่วย) และข้อมูลเป็นข้อมูลจริงของกระทรวง ICT นึกตัวอย่างไม่ออก ก็เอาสังกัดตัวเองนี่ล่ะ

เนื่องจากว่าไม่เคยใช้ Graph Visualization มาก่อนเลย แต่ตั้งใจจะไม่ดูเพราะอยากรู้ว่าลำพังตัวเองจะออกแบบได้ขนาดไหน คิดว่าคงมี flaw อีกเยอะ ที่ต้องเก็บมาแก้ไขใหม่วันหลัง

Required Features

จริงๆ หัวข้อนี้ควรจะอยู่ก่อน screenshot เพราะว่ารูปข้างบนนั้นออกแบบตาม requirement เหล่านี้ เพียงแต่อยากให้คนอ่านเห็นภาพว่าโปรแกรมเป็นยังไง เลยเอารูปขึ้นก่อนแทน

รายการนี้ก็ผสมๆ กันระหว่าง requirement/use case/scenario นะครับ

• Navigation - อย่างแรกสุด โปรแกรม Visualization ต้องมีระบบการเลื่อน ย้าย ขยายตำแหน่งที่สะดวกและตรงกับที่ผู้ใช้คาดหวัง ซึ่งตัวอย่างโปรแกรมใกล้เคียงกัน ที่สามารถเลียนแบบการทำงานมาได้แบบเกือบเป๊ะก็คือ Google Maps หรือ Google Earth
• Node Type - ในสถานการณ์จริงเราจะมี node หลายชนิด ถ้าตาม scenario หน่วยงานรัฐ ก็จะมีตั้งแต่ข้าราชการแบบดั้งเดิม รัฐวิสาหกิจ บริษัทที่แปรรูปแล้ว องค์การมหาชน (แบบ SIPA) องค์การอิสระ และอื่นๆ ที่นึกไม่ถึง ชนิดของ node ควรแยกด้วยสี และสามารถ filter ให้แสดง/ไม่แสดง node ชนิดไหนก็ได้แล้วแต่ต้องการ เช่น จงแสดงเฉพาะหน่วยงานมหาชนเท่านั้น เป็นต้น
• Link Type - อันนี้เป็นประเด็นที่ยังคิดไม่ครบนัก แต่ไอเดียคือความสัมพันธ์ (link ในกราฟ) ของแต่ละ node ไม่เหมือนกัน เช่น node A นี้อาจอยู่ใต้ปกครองของ node B ในขณะที่ node C อาจเป็นสาขาของ node D หรือ node E เป็นที่ปรึกษาของ node F ก็ได้ ดังนั้นชนิดความสัมพันธ์ควรแยกด้วยสี และ filter ได้เช่นกัน
• InfoBox - กรอบสีส้มๆ ที่เห็นในรูป เป็นเหมือน tooltip ที่แสดงข้อมูลละเอียดของแต่ละ node ไว้สำหรับกรณีที่ต้องการหาข้อมูลของ node ใดๆ เช่น หาเบอร์โทรของหน่วยงานลูกของกระทรวง A เป็นต้น
• Mark Point - แบบเดียวกับปักหมุดของ Google Earth เพราะถ้าสามารถสร้างกราฟของหน่วยราชการทั้งหมดได้จริง มันจะต้องใหญ่มากแน่ๆ จึงต้องมีหมุดเอาไว้จำตำแหน่งองค์กรที่สนใจ
• Search - ผมค่อนข้างประทับใจฟีเจอร์การค้นหาของ Google Earth มาก ที่เราพิมพ์คีย์เวิร์ด (ที่รู้แล้วว่ามีอยู่จริง แต่ไม่รู้อยู่ตรงไหน) แล้วโลกก็จะค่อยๆ หมุนไปซูมที่จุดหมาย กรณีนี้ก็แบบเดียวกัน คือ พิมพ์ NECTEC ลงไป ก็ควรจะซูมไปที่ node ของ NECTEC เลย
• Node Count - คำถามในโจทย์คือหน่วยงานย่อยมีกี่หน่วย คำตอบควรหาได้จากการลากพื้นที่ที่ต้องการ (หรือกด Shift/Ctrl+Click ว่าไปตามเรื่อง)​มันควรจแสดงให้เห็นว่าที่เลือกนี้มีทั้งหมดกี่ node
• Link Count - อีกคำถามสนุกๆ คือ เรามีลำดับชั้นห่างจากนายกกี่ชั้น ซึ่งข้อมูลตรงนี้ก็ควรจะบอกได้ โดยแสดงเป็นจำนวน link (เพราะ link ของเรามี weight เท่ากัน) ระหว่าง node ที่ไกลที่สุดจาก node ทั้งหมดที่เราเลือกอยู่ วิธีการหาในทฤษฎีกราฟมีขั้นตอนชัดเจน ขอข้ามไป
• Borderline - เป็น filter อีกแบบหนึ่ง ที่แสดงขอบเขตของหน่วยงานที่เราต้องการ เช่น จงแสดงหน่วยงานย่อยทั้งหมดของ สวทช. เราควรเห็นกรอบล้อมหน่วยงานเหล่านี้เป็นกลุ่มก้อนในกราฟรวม ถ้าใครเคยเรียน network มา น่าจะพอนึกแผนภาพของ Autonomous System ออก แบบนั้นเลย

Design Approach

ผมคิดว่าสิ่งสำคัญที่สุดของโปรแกรมตระกูล Visualization คือพื้นที่ในการแสดงเนื้อหา ดังนั้นจึงพยายามลดขนาดของสิ่งไม่จำเป็นอื่นๆ ออกไปให้หมด โดยใช้ทูลบาร์แบบข้อความเท่านั้น และใช้ sidebar ที่สามารถ toggle (เปิด/ปิด)​ ได้

ดูที่ทูลบาร์อันบนก่อน ให้ความสำคัญกับการซูมเป็นพิเศษ ปุ่ม normal view มีไว้แสดงกราฟแบบพอดีจอ ตามมาด้วย slider สำหรับซูมเข้าออก และตัวเลขบอกอัตราขยาย ขวามือสุดเป็นปุ่ม toggle sidebar

สำหรับ sidebar มีประโยชน์สองอย่าง คือไว้เก็บช่อง Search และเป็นรายการที่เราจะ filter

infobox ยังคิดไม่ออกว่าควรมีพฤติกรรมเหมือน tooltip ดี หรือจะเป็นกล่องค้างไว้แบบนั้นดี

ส่วน statusbar ก็แสดงข้อมูลสำคัญ 3 อย่าง คือ Total node, Selected node (Node Count) และ Link Count

Data Structure

ข้อมูลในรูปแบบ tree นี้เหมาะอย่างยิ่งที่จะเก็บด้วย XML เพราะว่าเมื่อ parser จัดการให้เรา มันก็จะมาในรูปของ tree ให้เรียบร้อย

ปัญหาถัดมาคือไฟล์ XML ควรเก็บที่ไหน local หรือ remote คำตอบก็ควรจะเป็น remote เนื่องจากข้อมูลอาจต้องอัพเดตอยู่เสมอ (เช่น ชื่อผู้อำนวยการ) แต่ก็ควรจะเก็บแคชไว้สำหรับดูออฟไลน์ด้วย

Implementation Options

สมมติว่าจะเขียนเจ้านี่ขึ้นมาจริงๆ ผมคงไม่เขียนด้วย C หรือ C++ แน่นอน (Java ด้วย ผมเกลียด Swing) ทางเลือกที่เป็นไปได้

• Python กับ PyGTK หรือ WxWidget แต่ไม่แน่ใจว่ามี lib สำหรับกราฟมั้ย
• C# กับ .NET ผ่าน Mono คิดว่าน่าจะหา lib กราฟได้ง่ายกว่า (แต่อาจไม่ฟรี)
• XUL น่าจะเขียนได้ง่ายสุด สะดวกไม่ต้องคอมไพล์ แต่กราฟต้องเขียนเองแน่ๆ
• JavaScript เปลี่ยนเป็นเว็บไปเลย lib น่าจะหาได้ เอฟเฟคต์มีเยอะ แต่เขียนเว็บจะมีข้อเสียตรง debug ยาก เพราะมันหลายภาษาผสมกัน

Concerned Issues

ปัญหาอื่นๆ ที่ยังไม่ได้วิธีแก้

• ตอนสร้างข้อมูล XML ของแต่ละองค์กรควรทำอย่างไร ควรมีโหมด edit หรือไม่ หรือแยกสร้างเครื่องมือใหม่สำหรับแก้ไขข้อมูลดิบแบบ batch ไปเลย
• การเก็บข้อมูล XML ควรเก็บอย่างไร 1 องค์กร 1 ไฟล์? การนำข้อมูลมาต่อกันต้องคิดเยอะๆ
• define ชนิดของ node ที่เป็นไปได้ทั้งหมด
• define ชนิดของ link ที่เป็นไปได้ทั้งหมด
• วิธีการค้นหา (exact match หรือ full-text search)
• ความอิสระของผู้ใช้ในการกำหนดสีของ node/link

Naming

สุดท้ายคือชื่อ ยังคิดไม่ออกแต่อยากได้ชื่อไทยๆ เหมือน Lopburi Flat คิดว่าตัวนี้คงเป็น "Something VS" หรือ "Something Visualizer" น่าจะเป็นชื่อสถานที่ แต่ก็ต้องเอาอันที่มันสะกดภาษาอังกฤษแล้วอ่านง่ายๆ แล้วก็ต้องไม่โหลแบบเชียงใหม่ ภูเก็ต พัทยา ด้วย ถ้ามีไอเดียก็ช่วยคิดหน่อยละกันนะครับ :D