ตอนที่ 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 ทำอย่างไรให้ผู้ใช้สามารถบริหารจัดการเพลงของตัวเองได้

itune

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

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

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

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

unison

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

icon

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

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

harddisk

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

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

BikeRoute

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

ย้าย Codenone

ประกาศย้าย Codenone ไปใช้ Forum ของ Blognone แทนครับ ตามไปตั้งกระทู้ต่อได้ที่ Codenone Forum (รายละเอียดอ่านจากกระทู้ ย้าย Codenone ไปรวมกับ Blognone)

กระทู้เก่าๆ จะย้ายตามไปในภายหลัง ตอนนี้ปิดการโพสต์กระทู้ไว้ เหลือไว้เฉพาะอ้างอิงเท่านั้น