เราใช้ตัวอย่างการออกแบบจาก OS X นะครับ สำหรับ Gnome, KDE, Vista, XP etx. ไว้ค่อยๆ เขียน

การออกแบบ GUI ของเค้ามีแนวคิดในการออกแบบที่เหลือเชื่อมากครับ เก็บรายละเอียดตามทฤษฏีได้ครบมากๆ ตอนที่ไป WWDC เค้าบอกว่า John Geleynse นี่เหมือนพ่อมดเลย สามารถเสกโปรแกรมที่ดูใช้งานยากๆ ให้กลายเป็นโปรแกรมชั้นดีได้เลย ในบทนี้เราจะมาดูกันละส่วนๆ เลยครับ

การออกแบบบน Aqua มีหลักอยู่ 5 อย่าง

• ศึกษา design principle กันก่อนที่จะเริ่มออกแบบ
• จัดระเบียบให้ application ของเราไปในแนวเดียวกับ application อื่นๆ
• เตรียมรับ feedback และสร้าง community ของโปรแกรม เพราะ Help ของเราตอบได้ไม่ครบทุกอย่าง และสำหรับคนออกแบบโปรแกรม feedback ก็เหมือนขุมทรัพย์ทีเดียว
• ใช้ระบบ panel ของ OS X เพราะผู้ใช้คุ้นเคยและเราไม่เสียเวลาเขียน
• ออกแบบฟอร์มให้เป็นมาตรฐาน แล้วผู้ใช้จะเข้าใจโปรแกรมของเรา

Ageless Design Principles

วันนี้ก็พูดถึงตอนแรกสุดครับ คือ design principle จริงๆ พวกนี้มีอยู่ในหนังสือเรียน Application Design อยู่แล้วผมก็คัดเอาที่สำคัญๆ มาบอกให้ฟังว่ามีอะไรที่เราต้องใส่ใจบ้าง

อย่างที่บอกตอนแรกว่า Apple เก็บรายละเอียดดีมากๆ ก็หมายถึงเค้าเก็บรายละเอียดตาม Design Principle ได้ดีมาๆจริง ถ้าเราต้องการให้ผู้ใช้เข้าใจโปรแกรมของเราง่ายๆ ก็ห้ามลืมพื้นฐานเหล่านี้เด็จขาด

Metaphors

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

ใช้สื่อว่าเป็นที่ทิ้งขยะ สามารถนำไฟล์ต่างๆมาใส่ในนี้ และรูปถังขยะเต็มแทนความหมายอีกนัยว่าถ้าเราเผลอทิ้งอะไรลงไปมันจะยังอยู่ในถังขยะ ซึ่งคล้ายๆกับ Recycle bin ของ Windows

บน Windows ไม่ได้ใช้คำที่หมายถึงที่ทิ่งขยะ แต่ให้ความหมายว่าที่กู้ข้อมูลแทน น่าจะเพราะใน windows รุ่นแรกๆ ไม่ได้มี concept ของถังขยะดังนั้นคนจึงไม่ได้ใช้ Recycle bin ในการลบ แต่ใช้ในการกู้ข้อมูลมากกว่า หรือไม่ช่วงแรกอาจจะใช้ชื่อว่า bin แต่กลัวซ้ำกับคำว่า binary ก็เลยใส่ Recycle เข้าไป :D (ส่วนตัวผมว่าตั้งชื่อ garbage น่าจะง่าย)

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

See and Point

ระบบที่ใช้ Mouse จะอยู่บนพื้นฐานสองอย่าง โดยมีสมติฐานว่าผู้ใช้ต้องเห็นทุกสิ่งที่ตัวเองทำบนจอตลอดเวลาและสามารถใช้ mouse ชี้ได้ทุกอย่างที่เห็น (ไม่ใช่ว่าบางบริเวณเลื่อน mouse เข้าไปไม่ได้)

พื้นฐานแรกคือ การเรียงลำดับการสั่งงาน ผู้ใช้เลือกจะเป็นประธาน (the noun) ก่อนจากนั้นจึงเลือกกริยา (the verb) ให้กับประธาน เช่น ในโปรแกรม iTune ผู้ใช้จะต้องเลือกเพลงก่อน จากนั้นจึงกดปุ่มเล่นเพลง ไม่ใช่กดปุ่มเล่นเพลง แล้วค่อยเลือกเพลง เป็นต้น เมื่อผู้ใช้เลือกสิ่งที่ต้องการ ฟังก์ชั้นที่สามารถใช้งานได้ก็จะเปิด (enable) และที่ไม่ใช่ก็จะปิด (disable) ผู้ใช้แค่ดูไปรอบๆ ว่าทำอะไรกับสิ่งนี้ได้บ้าง และเลือกเฉพาะฟังก์ชันที่เปิดอยู่ แทนที่จะต้องจำว่าใช้อะไรได้บ้าง

อย่างที่สองคือ การเลือกประธาน และกริยา สามารถทำได้ในขั้นตอนเดียว เช่น การการลากเอกสารไปใส่ใน folder เป็นต้น ในกรณีนี้ผู้ใช้ไม่ได้เลือก copy paste จาก menu แต่ใช้วิธีสั่งงานโดยตรงซึ่งตรงไปตรงมากว่า แต่ในกรณีนี้ผู้ใช้ต้องจำได้ว่าสิ่งที่กำลังลากไปจะทำอะไรกับสิ่งที่รออยู่ เช่นเมื่อลากไฟล์ไปใส่ถังขยะหมายถึงลบไฟล์ หรือเมื่อลากรูปภาพไปใส่ printer มันจะ print ให้ หรือลาก ไฟล์ไปใส่ใน Terminal มันจะแปลงเป็น part ของไฟล์นั้นๆ เป็นต้น

Direct manipulation

ทำให้ผู้ใช้รูปสึกว่าสามารถควบคุมโปรแกรมของเราได้ การกระทำของผู้ใช้ควรได้ผลทันที ยกตัวอย่างเช่การ drag and drop เมื่อผู้ใช้ click แล้ว drag ในเสี้ยววินาทีนั้นสิ่งที่ผู้ใช้ลากไว้ก็ควรติด mouse ขึ้นมาด้วย เป็นต้น

พยายามเขียนโปรแกรมให้รองรับการทำ Direct manipulate เช่นถ้าเราพัฒนาโปรแกรม fax เมื่อผู้ใช้ลาก เอกสามาใส่ในโปรแกรมของเราบน dock (task bar) โปรแกรมก็ควรเริ่มกระบวนการส่ง fax แทนที่ผู้ใช้จะต้องเปิดโปรแกรมแล้วกดปุ่ม Fax

User control

อย่าให้คอมพิวเตอร์คิดแทนคน ต้องให้ผู้ใช้เป็นคนกำหนดค่าต่างๆ หรือควบคุมโปรแกรมด้วยตนเอง บางโปรแกรมพยายามกำหนดตัวเลือกให้กับผู้ใช้ ซึ่งเป็นเรื่องที่ดีแต่ต้องระวังว่าจะเป็นการจำกัดทางเลือกของผู้ใช้และการทำแบบนี้จะเป็น Computer control ไม่ใช่ User control

ตัวอย่างเช่นโปรแกรม MS Excel

ออกแบบตัวเลือกสีเป็น computer control โดยบังคับให้เลือกสีเท่าที่มี น่าจะเป็นความพยายามของ excel ที่เลือกสีที่ควรเหมาะสมให้กับผู้ใช้ หรือช่วยให้ผู้ใช้เลือกสีให้เหมือนกันได้ง่ายๆ

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

ตัวอย่างโปรแกรมที่เป็น user control จะแนะนำผู้ใช้และเปิดให้ผู้ใช้เลือกสิ่งที่ต้องการ

อีกหนึ่งตัวอย่างที่เป็น user control และแนะนำผู้ใช้เมื่อทำผิดพลาดแต่ถ้าต้องการทำจริงๆ ก็สามารถทำได้ด้วย

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

Feedback and communication

การให้ Feedback และ communication เป็นอะไรที่มากกว่าการส่ง error message ให้กับผู้ใช้ จริงๆแล้วมันคือการที่ให้ผู้ใช้ได้รับรู้ถึงสิ่งเกิดขึ้นและเริ่มที่จะสื่อสารกับโปรแกรมของเรา

เมื่อผู้ใช้เริ่มต้นทำอะไรซักอย่าง โปรแกรมจะต้องสื่อสารว่าได้รับรู้การกระทำนั้นๆ แล้วและแสดงให้เห็นว่ากำลังดำเนินการอยู่ ผู้ใช้จะได้รู้ว่าสั่งแล้วโปรแกรมรับรู้หรือเปล่าหรือว่าต้องสั่งใหม่ การใช้ภาพแสดงการทำงานของโปรแกรมเป็นวิธีที่ดี ที่จะทำให้ผู้ใช้รู้ว่าโปรแกรมรับรู้การสั่งการแล้ว และกำลังดำเนินการอยู่ (โปรแกรมส่วนมากจะเงียบและบอกผู้ใช้อีกทีเหมือนทำเสร็จแล้ว โดยเฉพาะ web application) ตัวอย่างที่ดีอย่างหนึ่งคือตอนที่ double click บน application แล้ว icon กระโดดขึ้นลงแสดงให้เห็นว่ากำลังเปิด application นี้อยู่

ผู้ใช้ส่วนใหญ่ไม่ชอบรอถ้าไม่เห็น feedback จากโปรแกรม จะเริ่มบ่นและอาจจะปิดโปรแกรมไปเลยก็ได้ อย่างน้อยถ้ามี animation ว่ากำลังทำงานอยู่ น่าจะดีกว่า

Consistency

WYSIWYG

Forgiveness

Perceived stability

Aesthetic integrity

Modelessness

Reflect the User’s Mental Model

Explicit and Implied Actions

Managing Complexity in Your Software

ช่วยๆ กันเติมเต็มได้นะครับ ผมคนเดียวคงนานเลย

ทุกข้อมีความสำคัญในตัวเอง ถ้าใครอยากจะศึกษาการออกแบบโปรแกรมบน Aqua ก็แนะนำให้อ่านที่นี่ครับ Human Interface Design Principles ในนี้มีหลักการคิดของแต่ละหัวข้ออยู่ครบเลย ถ้าสงสัยตรงไหนก็คุยกันได้ครับ คิดว่า อ.เดฟ สอนวิชานี้อยู่น่าจะช่วยให้คำตอบชัดๆ กับเราได้