ใน Human Interface Guidelines ของ Apple มีพูดเรื่อง "Apply the 80 Percent Solution" ไว้สั้นๆ ประมาณ 5 บรรทัด แต่สำหรับผมมันคือหัวใจของการออกแบบทีเดียว

HIG พยายามบอกว่าให้เราออกแบบ Application ที่ตอบสนอง 80% ของผู้ใช้ของเราเป็นหลัก แทนที่จะออกแบบให้ครอบคลุมทั้ง 100% ดูเหมือนง่าย ผมเลยลองวาดรูปมาประกอบ

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

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

ลองนึกถึงตัวอย่างก่อนๆ กำหนดกลุ่มเป้าหมาย ถ้าเราทำ iPhoto ให้กลายเป็น aperture กลุ่ม power user ของเราที่เคยเป็น 20% จาก 100 คน จะกลายเป็น 100% ใน 20 คนทันที และยิ่งเราเพิ่ม feature ไปเรื่อยๆ กลุ่มเป้าหมายของเราก็ยิ่งหดลงๆ เป็นวงจรที่ไม่ดีเลย

มาคิดดู ผมว่ามันเป็นปัญหาสำคัญของ opensource ทีเดียวครับ เพราะคนที่รายล้อม นักพัฒนามักเป็น Hard core user ซะมาก คนช่วยแนะนำด้านการตลาดก็มีน้อย ดังนั้นถ้าพวกเราอยากได้ software ดี และอยากหยุดวงจรนี้ ต้องอย่าเงียบครับ แสดงพลังของ 80% ออกมาให้ผู้พัฒนาเห็น อยากยอมแพ้พวก power user

เทคนิคหนึ่งของคนออกแบบคือ ให้เตือนตนเองเสมอว่า "อย่ายอมแลกความสะดวกของผู้ใช้กลุ่มใหญ่ เพื่อผู้ใช้กลุ่มเล็กที่ใกล้ชิดคุณ" ใช้ Design process ให้เป็นประโยชน์เพื่อตามหา 80% solution ให้ได้ เรื่องนี้ยาวไว้เอามาเล่ากันอีกทีนะครับ

ที่มา -- Apple HIG

ปล.1 ขออภัยที่ใช้สีนี้นะครับ ผมไม่มีเจตนาทางการเมืองจริงๆ
ปล.2 สมัยก่อน MS Office เค้าซ่อน feature พวกนี้ไว้ใน menu ครับ พอมี ribbon ถึงค่อยเผยออกมาได้บ้าง

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

มาถึงตอนนี้เลยเริ่มคันไม้คันมือ เข้า google แล้วหาใบ Quotation มาออกแบบกัน

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

พอได้ตัวอย่างยากพอสมควร ไม่ซับซ้อนจนเกินไป เมื่อพิจารณาแล้วผมแบ่งข้อมูลในฟอร์มออกเป็นสามประเภท ยังมีต่อครับ >

เทคนิคการออกแบบ Application โดยสื่อสารกับผู้ใช้ผ่านประสบการณ์จริง

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

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

การออกแบบ interface ก็ต้องรู้ว่ากลุ่มเป้าหมายเช่นกัน ผมลองแบ่งกลุ่มเป้าหมายง่ายๆ เป็น Home user กับ Pro user

Home user ของผมหมายถึงคนที่ไม่มีเวลามาเรียนรู้โปรแกรมของเรา ผู้ใช้มีความต้องการของเค้าอยู่แล้ว เป็นอะไรซื่อๆ ถ้าออกมาดีมากก็ดี ไม่ดีมากก็ไม่เป็นไร อย่าเสียเวลาก็แล้วกัน โปรแกรมประเภทคนี้ก็เช่น iPhoto

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

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

โปรแกรมของคนประเภทนี้คือ Aperture

โปรแกรมทั้งสองตัวเป็นโปรแกรมสำหรับจัดการรูปภาพเหมือนกัน แต่กลุ่มเป้าหมายต่างกันมาก จะเห็นว่า iPhoto จับกลุ่มตลาด Home user ทั้งหน้าจะมีองค์ประกอบน้อยมาก เวลาเรียนรู้แทบจะเป็นศูนย์ พวก advance feature ถูกซ่อนเอาไว้หมด เพราะคนกลุ่มนี้ไม่ได้ใช้บ่อย แต่!! ไม่ใช่ว่ากลุ่มเป้าหมาย Home user แล้วจะพัฒนาโปรแกรมได้ง่ายนะครับ โปรแกรมต้องตอบสนองความงี่เง่าทุกรูปแบบ และจำกัดความคิดของผู้ใช้ให้ได้ และทำ feature ที่มีได้เพียงน้อยนิดให้ดีที่สุด อย่างของ iphoto ผมชอบที่มันจัดการรูปเยอะๆ ได้ดีมากๆ (แต่ผู้ใช้แทบไม่รู้สึกว่ามันเป็นข้อดี จนกว่าจะได้ใช้โปรแกรมอื่น) อีกอย่างที่ชอบคือเวลาแต่งรูปมันทำให้สวยง่ายดี ผมพยายามปรับสีใน Aperture อยู่นานมาก สุดท้ายสรุปว่าปรับบน iphoto ทำให้สวยง่ายกว่า

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

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

ใครบอกว่าโปรแกรมของเราใช้ยาก ก็บอกไปเลยครับว่าโปรแกรมของผมมันของ Pro เค้าใช้กัน :p

ใน blog ก่อนหน้านี้พูดถึง Nginx -> Mongrel cluster <- Monit ปรากฏว่า monit มันไม่สามารถไปคุมเจ้า mongrel cluster ได้ คาดว่าเป็นเพราะ Mongrel cluster มันเป็น cluster จึงไม่ได้แยกแต่ละตัวออกเป็น process เดี่ยวๆ แบบที่ monit ชอบ ดังนั้นเลยลองวิธีใหม่ แยกมันเป็น 3 ตัวซะเลย

ตอนนี้เจ้า monit ควบคุม mongrel อยู่หมัด ผมลอง kill process ดู เจ้า monit ก็ start ขึ้นมาให้ ตอนนี้สั่งปิด/เปิด mongrel จาก monit ได้เลย

ขั้นตอนการติดตั้งจะซ้ำกับของเดิมเยอะหน่อย แต่อยากเขียนให้เต็มๆ ครับ เริ่มจาก

1. ติดตั้ง project ของเรา

Add new user

Deploy application ยังมีต่อครับ >

ก่อนหน้านี้มีความคิดฝังหัวว่า GUI ที่ดีคือรูปแบบที่ทำให้ผู้ใช้ทำงานได้มากที่สุด สะดวกที่สุด ให้ผู้ใช้ทำอะไรได้ทุกอย่างโดยใช้ความคิดน้อยที่สุด วันนี้ความคิดนี้เริ่มถูกทำลายเมื่อเห็น Nautilus + ZFS

สำหรับคนที่ไม่ได้ใช้ Gnome เจ้า Nautilus เปรียบเหมือน File manager หลักของ Gnome ซึ่ง Sun เอามาใช้กับ Solaris ของ Sun และได้เพิ่ม plugin ให้กับ Nautilus เพื่อให้สามารถใช้ Feature หลายๆ อย่างของ ZFS (File system ของ sun) เช่นความสามารถในการย้อนเวลา กลับไปเอาไฟล์ที่เคยย้ายไป ลบไป หรือเขียนทับไปแล้ว กลับมาได้

ส่วนนี้น่าสนใจที่สุด เพราะผมไม่เคยเห็น feature ย้อนเวลามาอยู่บน GUI ของ File manager เลย

ในรูปเมื่อผู้ใช้กดปุ่ม "ห่วงยางช่วยชีวิต" เจ้า Nautilus จะแสดง แถบสำหรับย้อนเวลาออกมา ยังมีต่อครับ >

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

From Bank & Home

ดู homepage ได้ที่ http://www.apirak.com/home/index.html คิดแล้วอยากกลับบ้านจังเลย

โปรแกรมที่ออกแบบมาดีคือโปรแกรมที่ทำให้ผู้ใช้รู้สึกเหมือนไม่ได้ใช้โปรแกรมอยู่ ตัวอย่างเช่น "Browser ที่ดี" คนจะไม่เสียเวลาเรียนรู้การใช้งาน ไม่เสียอารมณ์ในการตอบคำถามจุกจิก คนจะใส่ใจในการทำงานของตนให้เสร็จ สนใจที่จะหาข้อมูลบน web สนใจที่จะอ่าน email โดยแทบไม่ได้สังเกตุว่าตนเองใช้งาน Web Browser อยู่ จนกระทั้ง Browser มันมีปัญหาเช่น เตือนเรื่อง security หรือเมื่อหาปุ่ม stop ไม่เจอ หาก browser สามารถจัดการเรื่อง security ให้เราได้ สามารถแสดงปุ่ม stop ให้เราเห็นเมื่อเราต้องการใช้ นั่นจะทำให้ผู้ใช้ลืม browser ไปเลย และจะโหยหาโปรแกรมของเราเป็นสามเท่าเมื่อเค้าขาดมันไป

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

ลองดูวันที่ในตารางของ Windows XP กันก่อน

รูปบนสุดคือการแสดงวันที่แบบเต็มๆ ตอนที่ตารางกว้างที่สุด และ ยังมีต่อครับ >

ช่วงแรกขอการออกแบบ application ผมมองการออกแบบฟอร์มเป็นเรื่องเล็กมากๆ ยิ่งในยุกต์ของเว็บที่ฟอร์มไม่ได้มีข้อมูลให้กรอกมากมายนัก ยิ่งไม่มีปัญหา แต่ล่าสุดผมออกแบบ Online ERP ซึ่งใช้ฟอร์มกันอลังการ งานนี้เลยต้องศึกษาข้อดีข้อเสียของฟอร์มแต่ละแบบกันนิดหน่อย ผลจากการทดลองได้ออกมาสามแบบ classic ดังนี้ครับ

แบบที่หนึ่ง ตัวหนังสือกับกล่องข้อความเป็นบรรทัดเดียวกัน

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

แบบที่สองเหมือนแบบแรก ยังมีต่อครับ >

ลองเขียน column แบบเป็น series ดูบ้าง เลียนแบบ "นั่งเทียน ของ punneng" สำหรับตอนแรกขอเริ่มจาก โปรแกรม "FileZilla" ก่อน เจ้าโปรแกรมนี้เอาไว้ช่วยในการย้ายไฟล์ระหว่างเครื่องผ่าน protocal FTP, SFTP, FTPS จะเรียกว่า "โปรแกรม FTP" ก็ได้

หน้าตาของโปรแกรมเป็นประมาณนี้

ยังมีต่อครับ >