หลังจากที่คุณ mk พูดถึงคอนเซ็ปท์ที่ทาง Mozilla Team วางไว้สำหรับอินเตอร์เฟสของ Firefox ยุคหน้า (4.0 - ซึ่งกว่าจะได้เห็นจริงๆ ก็อีกนาน) วันนี้มีภาพ mock up ออกมาเพิ่มเติมครับ ดูจากภาพแล้วยังคงเห็นความไม่แน่ใจของทีมออกแบบ ว่าจะนำแท็บขึ้นมาข้างบน (รวมกับ Title bar) หรือว่าจะปล่อยไว้ข้างล่างเหมือนเดิมดี และนอกจากนั้นยังมีคอนเซปท์ในเรื่องการรวมปุ่ม Go, Stop, Refresh เป็นปุ่มเดียวกันด้วยครับ

อันนี้เป็นแบบเดิมครับ คือแท็บอยู่แยกจาก title bar

ส่วนแบบนี้เป็นแบบรวมกัน เหมือน Chrome

(more...)

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

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

1. บ้านทั้งหลาย มีการออกแบบก่อน แล้วจึงลงมือทำ

คนอยากมีเว็บ กลับไม่ค่อยอยากวางแผน คิดแต่ว่าเอาข้อมูลใส่ลงไป แล้วมันจะเป็นเว็บ เลยกลายเป็นว่า เค้าก็ทำไปเรื่อยๆ ทุบไปเรื่อยๆ รื้อท้ิง ทำใหม่ เปลี่ยนสี เปลี่ยนโฉม ทำ 2 ปีแล้วก็ยังไม่เสร็จ (ตัวอย่างนะ มีจริงหรือเปล่าไม่รู้ :P) ย้ายห้องนี้ไปไว้ห้องนั้น เดี๋ยวก็วางห้องด้านหน้าเป็นห้องประชุม (Forum) แล้วก็เปลี่ยนใจ จะเอาร้านขายของมาตั้ง (Catalog) คิดไปอีกที อยากจะเอาป้ายประชาสัมพันธ์บ้านอื่นมาแปะเต็มหน้า (Link) จนคนไม่รู้ว่าบ้านใครหว่า

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

แต่ผมไม่ได้ต่อต้านการเปลี่ยนแปลงนะ ตราบใดที่เราเห็นว่ามันตอบโจทย์ เช่น ขายของได้, ดึงดูดคนเข้ามาง่าย, แสดงสินค้าเด่นๆ ได้ดี ฯลฯ ก็ย่อมควรลงทุนเปลี่ยนเแปลงตามโอกาส เหมือนที่ลงทุนตกแต่งร้านกันได้เรื่อยๆ แต่หากการเปลี่ยนแปลงนั้นเป็นไปเพราะ "เห็นเว็บตัวเองแบบเดิมมา 1 เดือนแระ เบื่อ..." กระผมก็จะพยายามโน้มน้าวทันทีว่า "พี่เบื่อ คนอื่นเค้ายังไม่ทันเห็นเลยพี่"

2. บ้านทั้งหลาย มีพื้นฐานบางอย่างที่ "เค้าคิดมาดีแล้วว่าควรจะมี"

ระหว่างชั้นต้องมีบันได, โต๊ะ เก้าอี้ ควรสูงเท่าไหร่, ห้องควรกว้างอย่างน้อยเท่าไหร่? ห้องน้ำควรอยู่ใกล้ลิฟท์ (จะได้เดินท่อได้ทีเดียว) ฯลฯ ซึ่งเรื่องพวกนี้ เราคุ้นชินจนไม่คิดว่าเป็นการ "ลอก"

แต่เว็บเป็นเรื่องใหม่ คนทั่วไปอาจไม่คิดว่า "คิดมาแล้ว/Best Practice" มันไม่ใช่การลอก เลยพาลเห็นว่า พอทำอะไรก็จะไปคล้ายเว็บนู้นเว็บนี้ไปหมด

เช่น ตำแหน่งโลโก้ในเว็บ ถามจริงๆ เถอะว่ามันจะวางได้กี่ที่เชียว, ตำแหน่งแถบเมนู หรือ Navigation มันก็มีที่ให้วางได้ไม่กี่ที่, ระยะระหว่างคอลัมภ์หรือกรอบ ก็ควรเท่าๆ กัน (ผมเพิ่งมาพบว่า 20px เป็นระยะที่กำลังงาม ซึ่งก็ใช้ใน 960.gs ด้วยน้า), Dropdown Menu มันก็มีเหมือนกันมหาศาล ฯลฯ

ซึ่งเมื่อเปลี่ยนจุดสนใจไปที่เนื้อหาแทน เว็บที่องค์ประกอบอะไรคล้ายๆ กัน ก็อาจกลายเป็นคนละเรื่องกันเลย

(ตัวอย่างหนึ่งที่ผมเห็นว่าขำดีก็คือ รถราคา 7 แสน กับราคา 7 ล้านนั้น อาจจะเหมือนกันมากกว่าเว็บ 2 เว็บที่ใช้ธีมเดียวกันเสียอีก)

3. บ้านทั้งหลาย มีแผนผังที่ชัดเจน รู้เรื่อง

ห้องแต่ละห้อง เปิดดูก็รู้ว่าเอาไว้ทำอะไร เผลอๆ ไม่ต้องเปิดประตู ยังรู้ว่าห้องอะไร!

แต่พอทำเว็บ เรากลับอยากให้ทุกอย่างอยู่ร่วมกัน อยากจะให้แผนผังเว็บเราไม่เหมือนใครในโลก มี Navigation สุดคูล สุดประหลาด และไปไม่ถูก, มี link ของทุกอย่าง อยู่ในทุกหน้า, มีป้ายโฆษณาเยอะจนไม่รู้ว่าหน้านั้นเอาไว้ทำอะไร

ซึ่งหากมันมีอยู่ไม่กี่เว็บในโลก คนก็อาจจะเดินดูเล่น จินตนาการเพลินๆ ได้ (ว่าหน้านี้เอาไว้ทำอะไรหว่า?) แต่เมื่อเว็บมันมีมหาศาล เมื่อเค้าหาของไม่เจอ เค้าก็ไม่อยู่ต่อแล้ว

4. ผู้รับเหมาทุกคน แย่หมด

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

และผู้รับเหมาที่ไม่เจ๊งไปก่อนนั้น เมื่อเจอลูกค้าเปลี่ยน Requirement บ่อย ก็ต้องชิ่งไวเสมอ

ซึ่งก็เหมือนกับการจ้างคนทำเว็บ เมื่อผู้ว่าจ้างไม่รู้ว่ามันควรจะออกมาหน้าตาอย่างไร (และยิ่งถ้าคิดว่า ทำอะไรก็ลอก! ยิ่งไม่รู้จะออกมายังไง) ก็ทำให้ Requirement เปลี่ยนไปเรื่อยๆ และผลสุดท้าย ก็ ไม่มีใครทำเว็บได้ดั่งใจเลย

คนทำเว็บทุกคน ก็เลยแย่หมด

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

เพราะอย่างที่คุณประชา สุวีรานนท์ เคยกล่าวว่า วงการออกแบบนั้น เป็นพื้นที่ทับซ้อนของมือสมัครเล่นและมืออาชีพ เลยไม่รู้ว่าใครฝีมือขนาดไหน

ผู้ว่าจ้างก็ไม่รู้เรื่อง คนทำก็ไม่รู้เรื่อง สุดท้ายก็มีแต่รื้อใหม่ ทำใหม่กันไปเรื่อยๆ

5. บ้านสำเร็จรูป ย่อมถูกกว่าบ้านที่ออกแบบมาโดยเฉพาะ (แต่ขายดีนะ!)

เมื่อเห็นว่าการทำเว็บเหมือนสร้างบ้าน เราก็จะเริ่มเห็นแนวโน้มของ "บ้านสำเร็จรูป" / "เว็บสำเร็จรูป/CMS/Theme" กันมากขึ้น นั่นคือ การทำเว็บที่เร็ว ราคาถูก โดยแลกเปลี่ยนกับ "ความคล้ายๆ กัน" ของงานออกแบบ

ซึ่งก็คล้ายกับเสื้อผ้าสำเร็จรูป หรือสินค้าตามสั่งอื่นๆ คือ มันจะพัฒนาไปสุดทาง 2 แบบ ถ้าหากไม่สำเร็จรูปไปเลย (ง่าย, เร็ว, ถูก ฯลฯ) ก็ต้องมีเอกลักษณ์ไปเลย (เจาะจง,​ สวยงาม, สะท้อนตัวตนคนใส่, สะท้อนตัวตนคนออกแบบ ฯลฯ) ใครก็ตามที่อยู่กลางๆ ก็ย่อมอยู่ลำบากในอนาคต

6. บ้านยังต้องอยู่ เว็บยังต้องเปิด

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

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

แล้วท้ายที่สุด ก็ค่อยคิดว่า

"ทำเว็บใหม่ก่าาาาาา"

Mozilla Labs คือลูกของ Mozilla ที่ทำหน้าที่ค้นหานวัตกรรมใหม่ๆ ให้กับเบราว์เซอร์ ตามที่บล็อกนี้เคยเสนอมาแล้วหลายตอน

ระยะหลัง Mozilla Labs พยายามขยายตัวเข้าหามวลชนมากขึ้น (ยุทธศาสตร์นี้ผมไปฟังมาที่แคนาดาเมื่อกลางปี 08) และก็ได้มีการจัดประกวดงานออกแบบขึ้นโดยใช้ชื่อว่า Mozilla Labs Design Challenge โดยกลุ่มเป้าหมายหลักคือนักเรียนนักศึกษาสาขาพวก interaction design

ผลการประกวดของการแข่งครั้งแรก (Spring 09) ซึ่งหัวข้อเป็นเรื่องทั่วๆ ไปออกมาแล้ว ผู้ชนะมี 4 ราย

ชิ้นแรกเป็นสาวโรมาเนีย เสนอแนวคิดแท็บ-เอกสารที่เป็นไอคอนแบบไอโซเมตริก เดโมมีให้ลองเล่นแต่ผมโหลดไม่สำเร็จแฮะ

ชิ้นที่สองเป็นแท็บแบบ Bar (เค้าบอกว่าเหมือนโปรแกรมพวก Media Center) อันนี้ผมเฉยๆ เพราะรู้สึกว่ามันเหมือน Flock (เดโม)

ชิ้นที่สามผมค่อนข้างชอบ เป็นการเสนอแนวคิด scrollbar ผสมกับ thumbnail ของเว็บ เดโมเป็น Flash วิธีเล่นคือคลิกบน Flash แล้วกด Spacebar ค้างไว้

ชิ้นสุดท้ายผมดูไม่ค่อยเข้าใจนัก เอาเป็นว่ามันเน้นไปทาง semantic คล้ายๆ กับฟีเจอร์ Accelerator ใน IE8 เดโมไม่มีให้เล่นมีแต่คำอธิบาย

อ่านเพิ่มได้ใน Mozilla Labs Design Challenge - Spring 09

ตอนนี้เขาเริ่มรอบต่อไปคือ Summer 09 แล้ว หัวข้อคือให้ออกแบบแท็บ ถ้าใครสนใจก็ลองส่งเข้าไปดูได้

เพิ่งมาเจอเว็บที่รวบรวมกับ แนวทางการออกแบบ (Design Pattern) นั่นคือ ตัวอย่างงานออกแบบสำหรับกรณีต่างๆ เช่น หน้าลงทะเบียน, โหวต, การดูรายละเอียดรูป ฯลฯ มีทั้งที่เว็บแบ่งประเภทไว้ให้ (Design Pattern), มีทั้งหน้าจอตัวอย่าง (Screen Shot) และรูปจากทางบ้าน (User Sets)

ดีไซน์ แพทเทิร์น (Design Pattern) นั้นเป็นศัพท์ที่ใช้กับหลายแวดวง ทั้งการออกแบบกราฟฟิค, เขียนโปรแกรม, CSS, การทำ User Interface ความหมายคือ เมื่อมันมีการเกิดขึ้นซ้ำๆ แล้ว ก็สมควรเรียกว่า "แนวต่างๆ" ได้แล้ว เหมือนกับที่เราฟังเพลงมาเยอะๆ แล้วเราก็แบ่งประเภทของเพลงต่างๆ เป็น "แนวเพลง" (มันไม่ได้ลอก มันแค่แนวเดียวกัน)

เอ้า งั้นมาดูการออกแบบแนวต่างๆ กันบ้าง

เชิญที่ UI-Patterns.com คร้าบ

เห็นข่าวที่คุณ mk นำมาลงที่ blognone แล้วก็เกิดความปรีดาปราโมทย์เป็นอย่างยิ่ง, ปกติเราเป็นคนชอบแคปเจอร์อะไรแปลกๆ มาเก็บไว้ดูทีหลังอยู่แล้ว พอได้เห็นคลิปวิดีโอ Microsoft 2019 ที่แสดงวิสัยทัศน์ของไมโครซอฟท์ว่าอีก 10 ปี คอมพิวเตอร์จะหน้าตา ฟังก์ชั่น ฟีเจอร์เป็นอย่างไร แล้วก็ยิ่งยินดี แคปเจอร์กันมือระวิง

เท่าที่สังเกตดู อินเตอร์เฟซต่างๆ ในคลิปวิดีโอนี้ ใช้สีน้อยลง ส่วนใหญ่จะเป็นสีในโทนฟ้า เขียว น้ำตาล (อาจเกี่ยวข้องกับโทนของวิดีโอที่ดูรักษาสิ่งแวดล้อมชะมัดด้วยก็ได้) Round Corner ยังคงอยู่, ฟอนต์ใช้แบบบางๆ เป็นหลัก ก็ทันสมัยนี่เคอะ, ไอคอนเป็น monotone, อีก element ที่เห็นว่าใช้บ่อยมากคือวงกลมแบบมีด้านหนึ่งเป็นสี่เหลี่ยมอย่างที่เห็นนี้

เจ้านี่มีชื่อมั้ยครับเนี่ย?

โดยส่วนตัวคิดว่าข้อมูลบางส่วนใส่เข้ามาให้ดู "เยอะๆ" "Info เยอะๆ สิโว้ยจะได้ดูแน่นๆ" ไปหน่อย ฟอนต์ของข้อมูลบางอย่างเลยถูกหดเสียจนกระจิดริดขนาดว่าถ้าไม่มองในระยะ 5 เซ็นติเมตรคงอ่านไม่ออก

บ่นมาเยอะแล้ว ไปดูรูป (พร้อมคอมเมนต์เลวๆ ของข้าพเจ้า) กันเลยดีกว่าครับ (รูปเยอะนะ)

(more...)