ตอนที่ 6 จัดระบบให้เป็นระเบียบ

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

ผู้ใช้ส่วนใหญ่จะเคยชินกับการใช้งานโปรแกรมอื่นๆ อยู่แล้ว ไม่ได้เริ่มต้นจากศูนย์ การจัดระเบียบโปรแกรมให้ทุกไปในแนวเดียวกันกับโปรแกรมอื่นๆ เป็นสิ่งหนึ่งที่ทำให้ผู้ใช้ส่วนใหญ๋เข้าใจโปรแกรมของเราทันทีจากจิตใต้สำนึก สิ่งเล็กๆ น้อยๆ อย่าง ลำดับบน Menu, การจัดวาง layout ของหน้าต่างหลัก, Toolbars หรือ Utility windows เป็นสื่งที่ผู้ใช้ไม่ได้คิด แต่ผู้ใช้รู้สึกได้

สิ่งที่ต้องคิดไว้ในใจเสมอตอนที่ออกแบบโปรแกรม (บน OSX)

• Affordances: ให้ใส่คำบอกใบ้ในการใช้งานส่วนต่างๆ ในโปรแกรม ไม่ว่าจะเป็นรูปใน icon การเคลื่อนที่ของมัน ลองนึกถึง genie effect ที่โปรแกรมของเราถูกสูบลงไปบน dock แทนที่จะหายไปอยู่บน dock เฉยๆ ทำให้คนมองตามแล้วรู้ว่าโปรแกรมของเค้าไปอยู่ที่ไหน และสามารถคาดหวังได้ว่าถ้ากดที่ dock แล้วโปรแกรมจะกลับมาเหมือนเดิม

• Simplicity: มีให้ใช้ตอนที่ต้องใช้มัน เช่นปุ่ม stop บน safari หรืออย่างโปรแกรม driver ทันทีที่ผมติดตั้งโปรแกรมก็หายไป และผมก็สามารถใช้งานอุปกรณ์ของผมได้เลย driver ไม่ควรทิ้งอะไรไว้บน Desktop ไม่ควรติดตั้งโปรแกรมที่เราไม่ต้องการ

• Familiarity: ความรู้สึก หรือแนวคิดของคนมีพื้่นฐานมาจากประสบการณ์ในอดีต ผู้ใช้เคยใช้โปรแกรมอย่างไรก็จะใช้อย่างนั้น พยายามใช้สิ่งที่ OS X มีใว้ให้แล้วเพราะผู้ใช้จะคาดหวังอย่างนั้นเช่นระบบ text to speech หรือการพิมพ์แล้วสั่งบันทึกเป็น pdf ได้ ผู้ใช้คาดหวังจะได้รับสิ่งเหล่านี้จากโปรแกรมของเรา

• Availability: ให้สิ่งที่ผู้ใช้ต้องการจะใช้อยู่บนหน้าจอ หรืออยู่บน toolbar ซึ่งง่ายแก่การใช้งานมากกว่าที่จะอยู่ใน menu ที่ต้องจำถึงสองต่อ (File -> Save) แต่ต้องแน่ใจว่าเป็นสิ่งที่ผู้ใช้ต้องการใช้อยู่บ่อยๆ จริงๆ

• Feedback: ให้ผู้ใช้รู้ว่าตัวเองได้ทำไปแล้วไม่ใช่ทำแล้วนิ่งไปเลย เช่น progress bar, แสดงความเปลี่ยนแปลงที่เกิดขึ้น เป็นต้น เราจะสังเกตว่า OS X มีสิ่งเหล่านี้อยู่ตลอดเช่นตอนที่กดโปรแกรมบน dock ก็ไม่ใช่ว่าหน้าจอจะอยู่นิ่งๆ ไม่มีอะไรเกิดขึ้น แต่ icon บน dock จะกระโดดขึ้นลงตอบสนองต่อการกดของเรา หรือตอน double click บน icon แล้วรูป icon ขยายขึ้นจนหายไปก็เป็นการให้ Feedback กับผู้ใช้เช่นกัน

จะยกตัวอย่างให้ดูนะครับ

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

เราแบ่งส่วนประกอบหลักๆ ของโปรแกรมได้เป็น

• ส่วนแรกคือ song ที่เป็นส่วนที่ใหญ่ที่สุดในโปรแกรม
• collection ที่ใช้ใส่ playlist
• playback ที่ใช้ควบคุมการเล่นเพลง ซึ่งออกแบบมาให้มีขนาดใหญ สามารถเข้าใจได้ทันที (ลองเทียบกับ winamp ดู)
• ส่วนของการค้นหา search

ผู้ใช้ส่วนใหญ่สามารถที่จะใช้งานโปรแกรมได้อย่างรวดเร็ว แทบจะไม่ต้องเรียนรู้อะไรเลย “Just get it” ในขณะที่คนที่มีความต้องการเฉพาะก็จะต้องเรียนรู้เพิ่มเช่น หน้าต่าง equalizer ไม่ได้ขึ้นมาในหน้าแรก เพราะผู้ใช้ส่วนใหญ่ไม่ได้ใช้ ถ้าต้องการก็ต้องเลือก menu bar กลับกันถ้าไม่ใช่โปรแกรม iTune แต่เป็นโปรแกรม pro logic ซึ่งที่คนส่วนใหญ่ต้องการกำหนดคุณภาพเสียงอย่างละเอียด ก็ควรมี equalizer ขึ้นมาบนหน้าจอเลย ไม่ต้องให้ผู้ใช้กลุ่มใหญ่ของโปรแกรมต้องศึกษา

ตัวอย่างอันที่สอง เป็นโปรแกรม Unison เป็นโปรแกรมที่ใช้ในการดึงข้อมูลจาก uninet แหล่งความรู้ขนาดใหญ่เลยละครับ

ทันทีที่เห็นโปรแกรมเราก็เข้าใจถึงการเก็บข้อมูลเป็นชั้นๆ ได้ทันทีโดยอาศัยว่าผู้ใช้คุ้นเคยกับการใช้ file & folder ใน Finder อยู่แล้ว (เมื่อดูความสัมพันธ์ของ menu ก็ทำให้เราเข้าใจโปรแกรมได้มากขึ้นและพอจะคาดได้ว่ากด group แล้วจะมีอะไรออกมา) เราจะสังเกตุว่า icon ที่อยู่ในแต่ละกลุ่มแสดงให้เราเห็นว่าจะมีอะไรอยู่ด้านในบ้าง เมือเรา double click ไปที่ icon นั้นๆ

โปรแกรมก็แสดงอย่างชัดเจนว่าคนดูสามารถดูอะไรได้บ้าง (Message, File, Image, Music) และแน่นอนเราจะเห็นถึงความสัมพันธ์กับ menu ด้านบน

ตัวอย่างต่อไปเป็นโปรแกรมบริหารจัดการ RAID ซึ่งใช้ในการดูว่า Harddisk แต่ละก้อนของเราถูกเชื่อมกันอย่างไร และช่วยกันทำงานอย่างไร

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

ตัวอย่างต่อไปเป็นโปรแกรม Bike Route เราสามารถ load แผนที่ขี้นไปได้เองแล้วสร้าง route map ของตัวเองขึ้นมาถ้าในชอบขี่จักรยานที่นั้นโปรแกรมนี้คงโดนครับ

จะเป็นว่าภาพที่สื่อออกไปบอกถึงลำดับการใช้งาน โดยมีตัว File อยู่นอกสุด ต่อมาด้วย Zone และด้านในเป็น Route ซึ่งเป็นชั้นๆ ตามการใช้งานของ object ในโปรแกรม ทำให้ผู้ใช้เข้าใจได้ทันทีว่าจะใช้งานอย่างไร นอกจากนี้อยากให้สังเกตความสัมพันธ์ระหว่าง menu ตัวแต่ตัวอย่างแรกจนถึงตัวอย่างนี้ว่า menu จะถูกจัดเรียงตามความลำดับเช่นกัน