interface design

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

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

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

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

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

BAD Application Design ตอน 1

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

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

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

ความสวยงาม ที่ Linux ไม่ให้ความสำคัญ

ผมยอมรับว่าการเก็บรายละเอียดเล็กๆ น้อยๆ เป็นเรื่องยากมากเมื่อไม่มีคนบังคับให้ทำ การทำด้วยใจก็มีขีดจำกัดในระดับหนึ่ง ยิ่งการรักษาให้ดีสม่ำเสมอยิ่งยากขึ้นไปอีก ดูอย่าง short cut bar ของ linux เป็นต้น

ubuntu 7.04

ubuntu 8.04

ubuntu 8.10

ปัญหาที่เกิดขื้นคือการวาง icon บน bar มันแย่ลงเรื่อยๆ จากเดิมบน 7.04 icon ลอยอยู่ตรงกลางใน task bar แม้ว่าจะเยื้องขึ้นข้างบน แต่ก็ถือว่าอยู่ตรงกลาง แต่พอมาถึง 8.04 แทนที่จะจัดให้อยู่ตรงกลาง กลายเป็น icon ติดขอบข้างบน และเลวร้ายลงกว่าเดิมใน 8.10 icon อยู่ชิดกับขอบทั้งบนและล่าง ทำให้รู้สึกอึดอัดแทน icon firefox เป็นยิ่งนัก

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

ผมลองเขียนดูว่า ถ้าเราต้องการกำหนด interface guide line ตรงส่วนนี้จะต้องกำหนดช่องไฟตรงไหนบ้าง

A คือช่องไฟระหว่างชุดของ component เช่นระยะระหว่าง icon ubuntu กับขอบซ้าย หรือระยะระหว่าง menu กับ short cut icon

ฺB คือช่องไฟระหว่าตัวอักษร หากมีตัวอักษรสองชุดมาต่อกันจะให้ระยะห่างเท่ากับ B

C คือระยะห่างระหว่าง icon

D คือระยะห่างจากขอบด้านบน และด้านล่าง

ถึงแม้จะไม่สามารถกำหนดเป็น pixel ได้ เพราะมันเป็น vector หรือเพราะมันสามารถยืดขยายได้ ก็ควรกำหนดในหน่วยอื่นขึ้นมา เช่นเป็น % ตามขนาดของ bar เป็นต้น (อาจจะง่ายกว่ากำหนดเป็น pixel ซะอีก) บน gnome ตอนนี้ icon ต่างๆ ลากวางได้อย่างอิสระ เป็นการเปิดโอกาสให้ผู้ใช้ทำลายความสวยงามของหน้าจอของตัวเอง แม้ผมยอมรับในความแตกต่างของแต่ละบุคคล แต่ผมคิดว่านักออกแบบที่ดี ควรออกแบบให้ "การทำให้สวยควรจะทำง่ายที่สุด ถ้าอยากได้แบบแปลกๆ ก็อาจจะยากขึ้นตามลำดับ" อย่ายอมให้ความ flexible มาทำให้ความสวยงามลดลง หรือทำให้มันใช้งานยากขึ้น

Syndicate content