โพสต์

กำลังแสดงโพสต์จาก พฤศจิกายน, 2008

BAD Application Design ตอน 4

รูปภาพ
ก่อนที่จะ upgrade มาใช้ Ubuntu 8.10 โปรแกรม KRDC มีหน้าจอที่เรียบง่ายและมีเครื่องมือเท่าที่จำเป็น แต่ในเวอร์ชันใหม่ผู้พัฒนาพยายามใส่ feature ต่างๆ ลงไป รวมถึงเครื่องอำนวยความสะดวกที่อยู่บน toolbar จนทำให้คุณสมบัติหลักเสียไป


สำหรับโปรแกรม Remote Desktop ผมมองว่าสิ่งที่สำคัญที่สุดคือการแสดงผลหน้าจอของเครื่องที่เรา remote ไปให้ครบถ้วนมากที่สุดเพราะเป็นสิ่งที่ผู้ใช้ต้องการทำมากที่สุดในโปรแกรม แต่ผู้พัฒนากลับแลกพื้นที่ทำงานกับ shortcut อย่าง URL, TAB และ Bookmark ซึ่งใช้น้อยมากเมื่อเทียบกับการทำงานทั้งหมด


การมี feature เพิ่มเป็นสิ่งที่ดี แต่ถ้ายังไม่สามารถแก้ปัญหาหลักๆ ได้หมดก็ไม่ควรรีบเปิดเป็นค่า default ทีนี้สมติว่าเราเป็นคนออกแบบ KRDC เราจะแก้ปัญหานี้อย่างไร

1. ตัดส่วนเกินออกให้เหลือเท่าที่จำเป็น ผมเลือกตัด URL, Tab และตัวบอกชื่อ panel ออก สวน Title bar และ Menu คงตัดไม่ได้เพราะจะผิด HIG ของ Windows manager


2. อย่ายอมแพ้... ต้องเอาส่วนที่ตัดออกไปกลับมาให้ได้ และต้องไม่เสียคุณสมบัติสำคัญของโปรแกรมด้วย


 ผมลองจัดแบบนี้ดู

1. ผมเอา Section name ไว้เหนือ favorite เหมือนเดิม แต่กด favorite กั…

วิเคราะห์พื้นที่ใช้งาน Firefox Safari และ Chrome

รูปภาพ
ผมแบ่งพื้นที่ของ Browser ออกเป็นสองส่วนคือส่วนของ เครื่องมือ เช่น ปุ่ม back ช่องใส่ URL หรือช่อง Search เป็นต้น อีกส่วนหนึ่งคือส่วน เนื้อหา ที่อยู่ตรงกลาง อยากให้สังเกตว่าแต่ละ Browser ให้ความสำคัญกับความสมดุลของพื้นที่ทั้งสอองไม่เท่ากัน ก่อนหน้านี้พฤติกรรมการใช้ web ของเราจะเน้นการอ่านเอกสาร หรือค้นหาเอกสาร เป็นหลัก การแบ่งพื้นที่ให้กับเครื่องมือยังมีมากอยู่ จนถึงปัจจุบันการใช้งานเว็บจะเป็น Web Application มากขึ้น คนอยู่กับเว็บหน้าเดียวนานขึ้น เช่น หน้า yahoo mail หรือ google docs เป็นต้น ทำให้ความสำคัญของพื้นที่เครื่องมือจึงลดลง จนเป็นประเด็นให้เราต้องมาพูดถึงกัน ทีนี้ลองมาเปรียบเทียบการจัดสมดุลย์ของพื้นที่แต่ละ Browser กัน Firefox และ Safari เกิดมาโดยมีจุดประสงค์เดียวกันคือการท่องเว็บ ดังนั้นถ้าเทียบตามสัดส่วนนี้จะเห็นว่าพื้นที่ครึ่งหนึ่งจะเป็นของส่วนเครื่องมือ แต่เมื่อพฤติกรรมการใช้งาน Browser เปลี่ยนไปจากที่เราเคยใช้โปรแกรมซึ่งมีพื้นที่ให้เราใช้งานถึง 9 ส่วน ถ้าดูย้อนไปที่ Firefox และ Safari จะเห็นว่าพื้นที่ส่วนตารางเหลือแค่ครึ่งหน้าจอเท่านั้น ถ้า Google ต้องการแก้ปัญหาน…

BAD Application Design ตอน 3

รูปภาพ
โปรแกรม Picasa Web Album Uploader ใช้สำหรับ upload ภาพจากเครื่องไปใส่เว็บ picasaweb.com ทีละหลายๆ รูป แทนที่จะต้องเลือกผ่าน web ทีละรูปๆ ผู้ใช้ลากไฟล์ที่ต้องการมาใส่ในช่อง "Drag Photos and Videos Here" จากนั้นใส่ชื่อ album พร้อมคำอธิบายที่ช่องด้านขวา หรือเลือก album ที่มีอยู่แล้วในอีก tab หนึ่ง เสร็จแล้วกด upload เป็นอันเรียบร้อย ที่นี้ลองคิดใหม่ทำใหม่ 1. ปัญหาที่ทำให้ต้องมีโปรแกรมนี้คืออะไร ปัญหาอันดับหนึ่ง การ upload บน web ต้องเลือกทีละไฟล์ ทำให้ช้า อันดับสองบางครั้งถ้า internet ไม่เร็ว หรือบางคนต้องการประหยัดพื้นที่บน web ทำให้ต้อง copy รูปออกมา เพื่อresize ทุกรูป หลังจากนั้นก็ลบรูปที่ upload แล้วทิ้งไป 2. สิ่งที่โปรแกรมจะเข้ามาแก้ปัญหา สามารถเลือกไฟล์ทีละหลายๆ ไฟล์ได้ และสามารถปรับขนาดของไฟล์ก่อนการ upload พร้อมจัดการไฟล์ที่ resize แล้วทิ้งไป 3. กลุ่มผู้ใช้คือใคร เป็นผู้ใช้แบบครั้งคราว (Home use) หากเป็นโปรแนะนำให้ใช้ plugin บน iphoto หรือ aperture แทน 4. สิ่งที่ต้องมีในโปรแกรมคืออะไร เรียงตามการใช้งานประจำวัน ไม่ใช่การใช้งานครั้งแรก เลือกรูปสำหรับ upload: เรา…

ตุ๊กตา model

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

คำแนะนำเรื่อง 80:20 จาก Apple HIG

รูปภาพ
ใน Human Interface Guidelines ของ Apple มีพูดเรื่อง "Apply the 80 Percent Solution" ไว้สั้นๆ ประมาณ 5 บรรทัด แต่สำหรับผมมันคือหัวใจของการออกแบบทีเดียว HIG พยายามบอกว่าให้เราออกแบบ Application ที่ตอบสนอง 80% ของผู้ใช้ของเราเป็นหลัก แทนที่จะออกแบบให้ครอบคลุมทั้ง 100% ดูเหมือนง่าย ผมเลยลองวาดรูปมาประกอบ สมติว่าทุกคนในรูปเป็นกลุ่มเป้าหมายของเรา แน่นอนว่าแต่ละคนมีความต้องการใช้งานไม่เหมือนกัน กลุ่มสีเหลืองเป็นกลุ่มใหญ่สุด คือ 80% ของผู้ใช้ กลุ่มสีแดงเป็นผู้ใช้ส่วนน้อย ซึ่งมักจะเป็น power user หรือผู้ใช้ที่ใช้โปรแกรมของเราอย่างจริงๆ จังๆ โดยมีกลุ่มผู้ใช้สีส้มมาทำให้ความแตกต่างระหว่างสีแดงและสีเหลืองลดลง ทำให้งานออกแบบของเรายากขึ้น ในการออกแบบเราจะเห็นสีแดงเด่นกว่าสีเหลือมาก จนบางครั้งเรามองว่ากลุ่มสีแดงมีขนาดใหญ่พอๆ กับกลุ่มสีเหลือง ซึ่งไม่เป็นความจริง!! กลุ่มสีแดงเป็นกลุ่มที่เรียกร้อง feature มาที่เรามากที่สุด ดังที่สุด ชัดที่สุด และเมื่อเราพลาด เค้าจะทำให้เราเสียคนและเวลาในการพัฒนา ไปอย่างมากทีเดียว พวกนี้ชอบขอของยากและท้าทายดึงดูดให้พัฒนาเป็นอย่างยิ่ง ส่วนพวก 80% ชอบขอของง…

ออกแบบ Business form จากเอกสารจริง

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

Real Photoshop

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

กำหนดกลุ่มเป้าหมาย

รูปภาพ
การกำหนดกลุ่มเป้าหมายเป็นบทแรกๆ ตอนที่เรียนวิชา Marketing เรียนไปก็เหมือนง่าย แค่บอกว่าลูกค้าของเรา เป็นผู้หญิง ผู้ชาย เด็ก หรือแก่ เงินเดือนเท่าไหร และอื่นๆ ต่อจากนั้นก็มาวางแผน ทำวิจัยว่า กลุ่มเป้าหมายของเรามีพฤติกรรมอย่างไร ชอบเดินสยามหรือเปล่า หรือว่านั่ง starbuck ต้องดูว่าเค้าชอบใช้ Windows หรือ Mac และอะไรเป็นเหตุจูงใจให้เค้าชอบแบบนั้น เพื่อออกแบบสินค้าให้ตรงกับความต้องการมากที่สุด อันนี้เริ่มยาก การออกแบบ interface ก็ต้องรู้ว่ากลุ่มเป้าหมายเช่นกัน ผมลองแบ่งกลุ่มเป้าหมายง่ายๆ เป็น Home user กับ Pro user Home user ของผมหมายถึงคนที่ไม่มีเวลามาเรียนรู้โปรแกรมของเรา ผู้ใช้มีความต้องการของเค้าอยู่แล้ว เป็นอะไรซื่อๆ ถ้าออกมาดีมากก็ดี ไม่ดีมากก็ไม่เป็นไร อย่าเสียเวลาก็แล้วกัน โปรแกรมประเภทคนี้ก็เช่น iPhoto ผมถือว่าโปรแกรมนี้เป็น fast food ชั้นเยี่ยม มีคนยอมจ่ายราคาแพงแลกอาหารชุดชั้นเลิศ สั่งง่าย กินง่าย ไม่ต้องกังวลเรื่องไขมัน หรือความสะอาด แถมทำออกมาสวยด้วย แต่จะมาสั่งสุกปานกลาง หรือสุกมาก ไม่ได้นะ มีให้แค่นั้น ถ้าลูกค้าเริ่มจุ๊กจิก อาจจะเพราะเค้าต้องเอาอาหารไปขายต่อ หรือลูกค้า…

ติดตั้ง Rails ด้วย Nginx -> 3xMongrel <- Monit

ใน 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 # สำหรับ ubuntu sudo /usr/sbin/adduser mongrel # สำหรับ redhat ที่ใส่ -r เพราะไม่ต้องสร้าง home ให้ user sudo /usr/sbin/adduser -r mongrel Deploy application sudo mkdir /var/www sudo mkdir /var/www/project sudo chown -R mongrel:mongrel /var/www/project cd /var/www/project su mongrel svn checkout svn://host.com/project/trunk/ --username xxx --password xxx . rake db:create:all rake db:migrate rake db:migrate RAILS_ENV="production" #ทดสอบว่าติ…

ออกแบบ GUI ให้จำกัดความคิดของผู้ใช้

รูปภาพ
ก่อนหน้านี้มีความคิดฝังหัวว่า GUI ที่ดีคือรูปแบบที่ทำให้ผู้ใช้ทำงานได้มากที่สุด สะดวกที่สุด ให้ผู้ใช้ทำอะไรได้ทุกอย่างโดยใช้ความคิดน้อยที่สุด

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

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

ห่วงยางช่วยชีวิต

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

ย้อนเวลา
เมื่อเลื่อนแถบไฟล์ต่างๆ ที่อยู่ด้านล่างจะย้อนเวลาไปยังช่วงที่เราเลือก อย่างในรูปพอเลื่อนไปเมื่อ 10 วันก่อน ไฟล์ Screenshort-3.png จะปรากฏออกมา พร้อมบอกว่าไฟล์นี้ขนาดเล็กกว่าไฟล์ปัจจุบันนะ ถ้าเราสนใจจะเอากลับมาก็ click ขวาแล้วเลือกให้กลับมา 

ปัญหาที่เกิดขึ้นคือ GUI มันเปิดกว้างมากท…

บ้านที่อุตรดิตถ์

รูปภาพ
บ้านผมเองครับ อยู่ที่อุตรดิตถ์ เป็นบ้านที่พ่อกับแม่ปั้นขึ้นมา ลูกๆ เห็นแล้วก็ภูมิใจ ตอนแรกๆ ก็ไม่คิดอะไรบ้านใหญ่ดูแลยาก ค่าใช้จ่ายสูง แต่พอคิดว่าต้องขายก็ใจหาย อยากให้มีคนมาอยู่มากกว่า 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 กันก่อน รูปบนสุดคือการแสดงวันที่แบบเต็มๆ ตอนที่ตารางกว้างที่สุด และรูปล่างลงมาเป็นการลดขนาดของตาราง ซึ่ง Window…

การเลือกรูปแบบของฟอร์มในโปรแกรม

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