วันจันทร์, พฤศจิกายน 24, 2551

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: เราสร้างปุ่ม + ไว้ใส่รูป และ - สำหรับลบรูป ถ้าอยู่ด้านบนได้จะดี เพราะเป็นเหมือน tool bar และช่วยให้คนใช้โปรแกรมของเราจากบนลงล่าง
  • เตรียมรูป เราต้องแสดงรูปทั้งหมดที่จะ upload ขึ้นมาให้ผู้ใช้ดู ช่องนี้ยิ่งใหญ่ยิ่งดี และจะดีมากถ้าสามารถ ลากรูปที่ต้องการจาก Finder หรือ explorer มาใส่ได้เลย
  • เลือก album ที่ต้องการ พร้อมสร้าง album ใหม่ เวลาผม upload มักจะใส่ใน folder เดิมๆ ตรงนี้ต้องลอง survey อีกทีว่าคนส่วนใหญ่สร้าง folder ใหม่ตลอด หรือใส่ในของเดิม
  • ดูพื้นที่ ที่เหลือว่ารูปที่กำลังจะ upload ใหญ่กว่าขนาดที่เหลือหรือเปล่า
  • ตั้งค่าขนาดกว้างยาวของรูปที่ต้องการ upload ส่วนนี้น่าจะเหมือนๆ กันในแต่ละครั้ง
  • กำหนดว่าจะ Public หรือไม่
  • ใส่คำอธิบาย ไฟล์
  • บอกว่า เราใช้ account ไหนอยู่
เมื่อคิดได้ดังนี้ ก็มาถึงขั้นตอนการออกแบบครั้ง . . . . ... ส่วนนี้ใครอยากออกแบบไปด้วย ยังไม่ต้องดูของผมก็ได้นะครับ ลองวาดๆ เองดูก่อน ... . . . . ผมเริ่มจากวางสี่เหลี่ยมไปตามลำดับ โดยเริ่มจากวาง +, - ไว้บนสุด และตัด 3 ข้อสุดท้ายมาไว้ใน setup link จากนั้นลงพื้นที่ สำหรับแสดงรูป เอาแบบยิ่งขยายขนาดหน้าจอก็จะยิ่งใหญ่ขึ้น ส่วนด้านล่างของกล่องเอาไว้เลือก album พยายามเอาไว้ด้านในเพื่อสื่อว่าภาพด้านบนจะอยู่ใน Album นี้ทั้งหมด Note. ที่ไม่เอา explorer มาใส่ในหน้าจอนี้เลย เพราะต้องการป้องกันความต้องการที่จะเลือก folder ทั้ง folder มาทีเดียวซึ่งทำให้โปรแกรมของเราเขียนจากขึ้น ไหนจะต้องวิ่งไปใน folder ย่อยๆ เลือกเฉพาะไฟล์ที่ upload ได้ แล้วจะมีความต้องการว่าจะ upload หลาย album ทีเดียวเพราะแยก folder ไว้แล้ว และอีกหลายๆ อย่าง ดังนั้นจึงใส่ช่องสี่เหลี่ยมไว้เฉยๆ แสดง thumbnail อย่างดียว สุดท้้ายผมแทนที่ตัวอักษรเรื่องพื้นที่ ด้วยกราฟแท่ง ซึ่งแสดงพื้นที่ทั้งหมด พื้นที่ที่ใช้ไปแล้ว และพื้นที่กำลังจะใช้ บางทีอาจจะ recycle ไปใช้แสดงสถานนะตอน upload ได้ด้วย จะเห็นว่าเราสามารถ simplify โปรแกรม Uploader ได้อีกมาก ช่วยลดเวลาในการเรียนรู้โปรแกรมได้ด้วย ทีนี้ลองเทียบกับของเก่าดูนะครับ ส่วนที่ยากสุดของงานคือตอนที่เราไม่ใช่คนออกแบบเอง แต่ต้องไปบอกคนออกแบบว่าสิ่งที่เค้าออกแบบมามันไม่ดีอย่างไร
blog comments powered by Disqus