วันศุกร์, ธันวาคม 26, 2551

เรียงลำดับความสำคัญในโปรแกรม

ส่วนของการ Prioritizing design decisions เป็นส่วนที่ผมชอบมากอีกส่วนหนึ่งใน Apple Human Interface Guideline เพราะมันช่วยในการตัดสินใจยากๆ ทำได้อย่างเป็นระบบ ก็การตัดสินใจที่จะตัด feature เจ๋งๆ ออกจากโปรแกรมมันทำได้ยากจริงๆ นะครับ ใน HIG เค้าแบ่งความสำคัญออกเป็นสามระดับ โปรแกรมที่รองรับความต้องการพื้นฐานของผู้ใช้ก่อน จึงจะถือว่าเป็นโปรแกรมที่ใช้งานได้ แต่ไม่ได้หมายความว่าโปรแกรมนั้นจะรองรับความต้องการที่ผู้ใช้คาดหวังไว้ หากไม่เป็นไปตามที่ผู้ใช้หวัง จะส่งผลให้โปรแกรมไม่ได้รับความนิยม และสร้างความภักดีกับผู้ใช้ไม่ได้ หรือเรียกว่าสร้าง Brand Royalty ไม่สำเร็จ ความคาดหวังของผู้ใช้เป็นจุดชี้วัดความสำเร็จของโปรแกรม การวิเคราะห์ความคาดหวังของผู้ใช้จึงเป็นสิ่งจำเป็นสำหรับคนที่กำลังออกแบบโปรแกรม หากเราต้องตัดสินใจตัดหรือเพิ่มอะไรในโปรแกรมของเรา ผมคิดว่าแนวทางต่อไปนี้จะช่วยได้มากทีเดียวครับ 1. Meet Minimum Requirement ใน Apple HIG จะพูดถึงการที่โปรแกรมมีความสามารถพื้นฐาน ของ OS เช่นสามารถใช้ Copy & Parse รองรับ Clipboard ของระบบ มีการใช้ Dock และการใช้ Standard controls แต่ผมอยากให้มองอีกมุมหนึ่ง ว่าโปรแกรมของเรารองรับความต้องการพื้นฐานที่โปรแกรมของเราเป็นหรือไม่ เช่น เราทำโปรแกรมสร้าง Quotation โปรแกรมของเราต้อง มีส่วนแสดงรายการ quotation ต้องสามารถเพิ่ม/ลบ/แก้ไข ตัว quotation ได้ บางคนทำแต่เพิ่มกับแก้ไข ดันลบไม่ได้ซะงั้น และหลายครั้งผู้ออกแบบยอมตัดความสามารถพื้นฐานออก เพื่อให้ได้ความสามารถขั้นสูง เช่น โปรแกรมดูรูปบางโปรแกรมตัดความสามารถในการใส่รูป โดยการ browse แล้วแทนที่ด้วยการ drag & drop จากนอก application แทน เป็นต้น 2. Deliver the Features Users Expect เมื่อแน่ใจว่าโปรแกรมของเรารองรับความต้องการพื้นฐานได้แล้ว ลำดับต่อไปก็เป็นรายละเอียดของโปรแกรม เราต้องเดาให้ได้ว่าผู้ใช้คาดหวังอะไร และทำให้โปรแกรมตอบสนองตามนั้น เช่นเมื่อมี error เกิดขึ้นผู้ใช้จะคาดหวังว่าโปรแกรมจะบอกว่า เกิดอะไร เพราะอะไร แก้ไขอย่างไร อย่าบอกผู้ใช้ว่า "Error 404" เพราะนี่ไม่ใช่สิ่งที่ผู้ใช้ทั่วไปคาดหวังแน่นอน สิ่งเหล่านี้เป็นรายละเอียดเล็กๆ น้อยๆ ที่ต้องเก็บให้ครบ อย่างการติดตั้งโปรแกรม ถ้าเป็นบน mac ก็ควรทำเป็นแบบ drag & drop เพราะผู้ใช้ mac คาดหวังแบบนั้น ถ้าเป็นบน windows ก็ให้เป็น setup.exe แล้วก็ next, next, Finish ถ้าเป็นบน Linux ก็ดันเข้า standard package ของทุก Distro ให้ได้ เป็นต้น 3. Differentiate Your Application ถ้าโปรแกรมของเราเหมือนของคนอื่นก็ไม่รู้จะพัฒนาขึ้นมาทำไม ความแตกต่างคือจุดแข็งของทุกโปรแกรม ความครบถ้วน และการตอบสนองความต้องการ เป็นแค่การทำโปรแกรมให้สมบูรณ์ แต่ไม่ได้ใส่ความ Royalty หรือ ความจงรักภักดีในตัวโปรแกรมลงไปในผู้ใช้ ในยุคที่ผู้ใช้มีตัวเลือกมากมาย และพร้อมที่จะเปลี่ยน ความแตกต่างจะเป็นสิ่งเดียวที่ดึงผู้ใช้เอาไว้ ยังไม่ต้องคิดไปไกลมาก แค่เร็วกว่า เสถียรกว่า รองรับหลายภาษา เข้ากับโปรแกรมอื่นๆ ได้ ถ้าไม่มีคนทำได้เหมือนเราก็ถือว่าเราได้ 1 แต้มในเรื่องความแตกต่างแล้ว อย่าพยายามแตกต่างจนทำให้ข้อ 1 และ ข้อ 2 ด้อยลงไป หากจะต้องตัดให้เลือกตัดข้อ 3 ก่อน และอย่ายอมแพ้เพราะเมื่อโจทย์ชัดเจน เราจะมีหนทางในการรักษาข้อ 3 เอาไว้โดยไม่ต้องตัดสองข้อแรกทิ้ง ส่วนตัวเวลาผมออกแบบ Application ผมจะเริ่มจากการไม่สนใจข้อ 1. 2. และ 3. แต่จะ ถ่มถุย ความคิดออกมาให้หมดก่อน ที่เรียกว่าถ่มถุย เพราะ 80% ของความคิดจะเป็นขยะ แต่ไม่ต้องสนใจถุยออกมาเป็นข้อๆ ให้มากที่สุดเท่าที่จะทำได้ จากนั้นจึงเอาแต่ละหัวข้อมาแยกลงในพีระมิด ใส่หัวข้อที่ขาดให้เต็ม ใส่เวลากำกับ ตัดหัวข้อที่เป็นไปไม่ได้ออก มาถึงขั้นนี้การเริ่มงานออกแบบขั้นต่อไปจะง่ายขึ้นมาก รวมถึงการตัดความสามารถออกในอนาคต ก็จะทำได้อย่างมีหลักการ ลดเวลาถกเถียงไปได้มากทีเดียว จุดประกายโดย developer.apple.com

วันเสาร์, ธันวาคม 13, 2551

BAD for Better Application Design ตอนที่ 5

ไม่ได้เขียนมาพักใหญ่ เนื่องจากต้องเร่งส่งงาน ตอนนี้ส่งเรียบร้อยไประดับหนึ่ง จึงมีเวลาเอาสิ่งที่อยากเขียนมาเขียนซะที วันนี้อยากพูดถึงเว็บไซต์ gotoknow.com ครับ เว็บนี้ผมเข้ามาอ่านประจำแต่พึ่งมีโอกาสได้เขียน comment เมื่อไม่กี่วันมานี้เอง พอเริ่มใช้ฟอร์มใส่ comment ทำให้สัมผัสได้ถึงปัญหา แต่ยังไม่รู้ว่าปัญหาอะไรเลยลองวิเคราะห์ดู ผมพบว่าฟอร์มนี้ประกอบด้วยสี่ส่วน 1. ส่วนระบุตัวตนของคน comment 2. ส่วนของข้อความที่จะ comment 3. ส่วนยืนยันว่าผู้ถามเป็นคน 4. ปุ่มกดเพื่อบันทึก หรือยกเลิก พอแยกเป็นช่องๆ ทำให้เห็นว่ากลุ่มแรกระบบ label เป็นแบบซ้ายไปขวาหมด แต่กล่องที่สองและสาม ไม่ได้เป็นแบบเดียวกัน สีเขียวของผมคือเส้นสายตาที่คาดว่าผู้ใช้จะมองตามนี้ label อันที่ 1 กับ 2 อยู่ในที่ตาม concept ครับ ถึงแม้คำว่าชื่อจะอยู่ห้างจากตัว text box ทำให้เล็งยาก แต่เป็นหัวแถวเลยไม่มีปัญหา label อันที่ 3 จะเหมือนโดนสับขาหลอก เพราะมี label แต่ไม่มีช่องให้กรอก คาดว่าผู้พัฒนามองเป็นอีก attribute หนึ่ง และไม่อยากเอามาไว้ใต้ email เพราะจะทำให้ดูเป็นตัวขยายชุด email ไปซะ อีกปัญหาของ label 3 คือมันอยู่ใกล้กับข้อความมากเกินไปทำให้ดูเป็นประโยคเดียวกัน สูญเสียความเป็น label ไป label อันที่ 4 กับ 5 พยายามอยู่ตรงกับกล่องข้อความ แต่ผมมองว่า label ควรอยู่บนสุดของกล่องนั้นๆ เพราะจะทำให้ผู้ใช้ไล่อ่านได้ง่ายขึ้น คือจากซ้ายไปขวา จากบนลงล่าง ไม่ขึ้นๆ ลงๆ ปัญหาต่อจาก label คือที่อยู่ของปุ่มบันทึก เนื่องจากฟอร์มของเราเป็นแบบชิดซ้้าย ดังนั้นการที่ปุ่ม "บันทึก" กับ "ยกเลิก" จะอยู่ทางด้านขวามือต้องมีเหตุผลหนักมากๆ ถึงจะเลื่อนไปอยู่ทางขวามือได้ เช่น เป็นฟอร์มแบบต่อเนื่อง ต้องการสื่อว่ากดแล้วมีฟอร์มต่อไป ให้กดเพื่อไปทางขวา และในหน้าถัดไปจะมีปุ่ม Back เพื่อกลับมาทางซ้าย หรืออาจเอาไว้ทางขวาเพราะถูกบังคับด้วยขนาดของหน้าจอ เป็นต้น ปัญหาต่อมาคือ ขนาดของคำว่า "ยกเลิก" ผมเข้าใจว่าผู้พัฒนาทำให้เป็น link แทนที่จะเป็นปุ่มเหมือนคำว่า "บันทึก" เพราะต้องการให้คำว่า "บันทึก" เด่นกว่า น่ากดกว่า ชัดเจนกว่า ไว้จำเป็นจริงๆ ค่อยมามองปุ่มยกเลิก แต่ใน safari ผมเห็นคำว่า "ยกเลิก" ตัวใหญ่กว่าคำว่า "บันทึก" ซะงั้น ผมลองจัดใหม่ เพื่อแก้ปัญหาข้างต้น ให้ label มาอยู่ตรงกลาง เพื่อให้ดูง่ายกว่าต้องกรอกที่ช่องไหน แล้วก็เปลี่ยน "IP แอตเดรส" จาก label มาเป็นข้อความ พร้อมเพิ่มคำเพื่อสื่อความหมายว่าเป็น ip ของผู้ส่ง comment และให้อ่านเป็นประโยคไปในตัว ปรับ label ของข้อความ และรหัสสุ่มมาชิดด้านบน ใช้แถบสีช่วยเพื่อให้คำว่าข้อความไม่ดูลอยๆ มากนัก แต่ไม่อยากให้คำว่า "เรียกใช้ตัวจัดการข้อความ" มาอยู่ด้านหน้า เพราะกล่องข้อความควรเด่นกว่า จากนั้นจัดขนาดของกล่องให้แต่ละบรรทัดเท่ากัน ปรับขนาดของ text box ยาวเท่ากัน ช่องระหัสสุ่ม ขยายให้กล่องกรอกระหัสสุมมีขนาดกับตัวรูปภาพจะได้ดูเป็นชุดมากขึ้น พร้อมคำอธิบายและรูปประกอบ หากสงสัยเพิ่มเติมให้กด link "เหตุผล" ผมคิดไปเองว่า gotoknow มีคนที่ไม่ใช่นัก it อยู่มาก เลยอยากให้ความสำคัญตรงส่วนนี้เยอะหน่อย สุดท้ายก็ปรับขนาดของปุ่มบันทึกให้ใหญ่ขึ้น ลดขนาดของคำว่ายกเลิกลง ได้ผลมาแบบนี้ครับ หากเห็นหรือไม่เห็นด้วย ฝากส่งให้ทาง gotoknow ด้วยนะครับ ของดีต้องช่วยกันสนับสนุน