ทิ้งช่วงการเขียนบล็อกนี้ไป 4 เดือน มาเขียนใหม่ ปรากฎว่าเรื่องต่อกันพอดีซะงั้น

สรุปสั้นๆ คือ Mozilla ทำการวิเคราะห์ heatmap ของ UI ทั้งหมดว่าปุ่มไหนใครกดบ่อย ผลสรุปไม่น่าแปลกใจนัก

เรียงตามอันดับดูบ้าง

เหมาะอย่างยิ่งสำหรับผู้ที่ศึกษาเรื่องการออกแบบ UI แบบมีข้อมูลสนับสนุน

ที่เหลืออ่านกันเอง Firefox Heatmap, Firefox Metric

Stephen Horlander ทีมออกแบบของ Mozilla ได้ลองออกแบบ UI ใหม่สำหรับ Firefox 3.7 (เปลี่ยนเล็กน้อย) และ Firefox 4.0 (เปลี่ยนเยอะเยอะ) เอามาให้ดูเล่นแก้เบื่อครับ UI ทั้งหมดยังเป็นแค่ wireframe mockup นะ ทั้งหมดเป็น UI ของวินโดวส์

Firefox 3.7 เปลี่ยนเล็กน้อย ปรับโน่นนี่นั่น

ของเวอร์ชัน 3.7 มีแบบ mockup สวยๆ แล้ว 3.7 Windows Theme Mockup (ข่าวที่ Mashable, Blognone)

ของ Firefox 4.0 จะเปลี่ยนเยอะหน่อย เอาแท็บไปไว้ด้านบนแบบเดียวกับ Chrome

ที่มา - Firefox Wiki

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 แล้ว หัวข้อคือให้ออกแบบแท็บ ถ้าใครสนใจก็ลองส่งเข้าไปดูได้

คาดว่าคนแถวนี้คงรู้จักกับ Ubiquity ซึ่งเป็นการทดลองท่องเว็บแบบใหม่จากทาง Mozilla โดยใช้ลักษณะคอมมานด์ไลน์แทนการกดปุ่ม และอิงอยู่บนแนวคิดของ semantic web อยู่มาก (ซึ่งเราเห็นเทร็นด์นี้กำลังมาแรง อย่างฟีเจอร์ Accelerator ใน IE8 เป็นต้น)

Ubiquity นั้นเป็นการทดลองในรูปแบบ extension ซึ่งก็มีผลเป็นที่น่าพอใจ เพราะฮิตมาก มาถึงตอนนี้ทาง Mozilla เตรียมจะก้าวไปยังสเต็ปต่อไป โดยการผนวกมันเข้ากับ Firefox แล้ว

เดิมทีใน Ubiquity นั้นจะมี command prompt แยกเป็นของตัวเอง ซึ่งต้องกดปุ่มพิเศษจึงจะโผล่ขึ้นมา ส่วนตัว Firefox เองก็มี Awesome Bar ซึ่งมีลักษณะการใช้งานเป็น prompt สำหรับรอป้อนคำสั่งเหมือนกัน ทำให้ Firefox ที่ติดตั้ง Ubiquity นั้นมี prompt ในตัวถึง 2 อัน

เป้าหมายของ TaskFox นั้นคือรวมเอา prompt สองอันนี้ไว้เป็นอันเดียว เป็นอย่างไรดูได้จากวิดีโอเดโม

เดโมมีให้ลองเล่น (เป็น HTML+JS) ที่นี่ครับ

แน่นอนว่า Firefox เป็นใหญ่ ทาง Ubiquity จึงต้องเป็นฝ่ายปรับตัวตาม

• ตัด parameter บางอย่างของ Ubiquity ที่ใช้วิธีการพิมพ์ออกไป แล้วเปลี่ยนมาเป็นปุ่มกดแทน (ดูตัวอย่างของภาษาที่ใช้ในการแปล
• ยังไม่มีการพูดถึงการคลิกที่ข้อความ แล้วเลือกคำสั่งจาก Ubiquity ในเดโม เราเห็นแต่การพิมพ์คำสั่งหลักก่อนใน URL Bar แล้วพิมพ์พารามีเตอร์ตาม

โดยส่วนตัวแล้วผมยังสงสัยเรื่องหน้าจอพรีวิว (ที่ต้องกดลูกศรเลื่อนไปทางขวา) ว่ามันจะมีประโยชน์แค่ไหน เพราะเส้นแบ่งระหว่าง "พรีวิว" กับ "การเปิดเว็บจริง" นั้นจางมาก (เป็นปัญหาอันเดียวกับ WebSlice ของ IE8 รวมถึง Accelerator บางอันอย่าง Maps ด้วย)

จาก Mozilla Labs

ตอนแรกว่าจะอัพยาวๆ แต่ว่าพลังงานไม่พอ เลยมาอัพสั้นๆ บอกข่าวกันก่อนละกันครับ

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

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

โปรแกรมตัวนี้จะช่วยให้เราดูง่ายขึ้นว่าเว็บที่พัฒนาขึ้นมานั้นมีหน้าตาท่าทางอย่างไรในเบราเซอร์ชนิดต่างๆ ที่แจ๋วคือ มีโหมด overlay โชว์เว็บในแต่ละเบราเซอร์ซ้อนกันให้ดูด้วย เผื่อใครต้องการจะเทียบในระดับ pixel

ตอนนี้โหลดเบต้ามาลองได้แล้ว (ขนาด 200 เมก) ใครที่สนใจก็ลองโหลดมา แล้วถ้าจะรีวิวให้ก็จะเป็นพระคุณมากครับ

อ่านบทความต้นเรื่องได้ที่ iStartedSomething

เอาไปเอามาชักกลายเป็นบล็อกดีไซน์ของ Firefox ซะแล้วแฮะ

เนื่องจากว่าคู่แข่งทั้ง Chrome, IE และ Safari ต่างทำหน้า New Tab ที่แสดงรายการเว็บที่เคยเข้าบ่อยๆ กันถ้วนหน้าแล้ว ทางทีม Firefox เลยต้องคิดหาวิธีการลอก... เอ้ย... "ตามฟีเจอร์ให้ทัน" กันบ้าง

หน้าที่การออกแบบก็ตกเป็นของทีม Mozilla Labs นำโดย Aza Raskin คนเดิม (ลูกชายของ Jef Raskin คนคิดอินเทอร์เฟซของแมครุ่นแรก และหมอนี่อยู่ในทีม Ubiquity ด้วย) ทางทีมนี้ได้ออกแบบตัวอย่างของหน้าแท็บใหม่มามากมาย (หลายๆ อันออกแบบโดยทีมของ Oliver Reichenstein/iA ตามที่เขียนไปในตอนที่แล้ว) ผมก็ทำหน้าที่แค่แปะรูปให้ดูกันครับ

(more...)

ไม่มีอะไรมากครับ แค่ว่าทาง Mozilla ได้ขอให้สตูดิโอ Information Architects (ซึ่งเป็นฝรั่งในญี่ปุ่น) ลองออกแบบ UI ของ Firefox ในอนาคตดูว่าเป็นอย่างไร ทางทีม iA ได้ตัดสินใจทิ้งระบบแท็บ และเปลี่ยนมาใช้ระบบ media library แบบที่ iTunes และโปรแกรม media manager สมัยใหม่ใช้กัน ด้วยเหตุผลว่าเว็บมีลักษณะเหมือน media ขึ้นมากเรื่อยๆ จนระบบแท็บรองรับไม่ไหวซะแล้ว

หน้าตามันออกมาประมาณๆ นี้ครับ (คลิกเพื่อดูภาพใหญ่)

ใครสนใจก็อาจไปแลกเปลี่ยนเสวนากับคนออกแบบได้ที่ iA Blog

Fennec คือ Firefox บนมือถือ ยังไม่เสร็จ รายละเอียดดูข่าวเก่าๆ ใน Blognone นะครับ แบบว่าขี้เกียจค้น

เผอิญไปเจอสไลด์นำเสนอ UI ของ Fennec ทั้งในส่วนที่ทำแล้ว และส่วนที่ยังไม่ได้ทำ แต่เป็นการนำเสนอโซลูชันทาง UI

ผมคิดว่าสไลด์อันนี้ดีมาก เพราะแทบไม่มีตัวอักษรเลย มีแต่รูปเราก็เข้าใจได้ ในอีกทาง มันเป็นการสอนว่า UI mockup ที่ดีควรเป็นยังไงบ้าง ให้คนดูแต่รูป (ยังไม่ต้องใช้จริง) แล้วเห็นภาพขึ้นมาในหัว (สไลด์เพิ่งออกมาสดๆ วันที่ 2 มีค. นี้เอง)

เจอจาก Mozilla Wiki

สวัสดีครับ

ว่าจะเขียนเรื่องนี้ลงบล็อกมานานแล้ว แต่ก็เรื้อนไปเรื่อย เห็นว่ามีเว็บนี้ขึ้นมา ก็เลยมาขอร่วมฉลองเขียนซะหน่อยนะครับ

เรื่องของชื่อหน้า (page title) นั้นมีปัญหากับผมมานานแล้วครับ แต่ก่อนจะเป็นเมื่อใช้บุ๊คมาร์ค ซึ่งค่าดีฟอล์ตของบราวเซอร์ จะกำหนดให้ชื่อที่แสดงของแต่ละบุ๊คมาร์คเป็นชื่อของหน้านั้น ทำให้หน้าที่ "ชื่อมีปัญหา" ต้องลำบากพิมพ์ชื่อใหม่ทุกครั้งที่บุ๊คมาร์ค และปัญหานี้ก็เพิ่มมากขึ้น เมื่อผมได้ใช้ Awesome Bar ใน Firefox 3

ก่อนที่จะไปดูว่ามันมีปัญหาอะไรกับ Awesome Bar ลองดูยกตัวอย่างของ "ชื่อมีปัญหา" กันก่อนดีกว่าครับ เช่น

• เว็บที่มีหน้าเนื้อหาจำนวนมาก (เช่น หนังสือพิมพ์) ใช้ชื่อของเว็บเป็นชื่อของหน้าทุกหน้าเหมือนกัน
• เว็บที่พยายามทำ SEO โดยการเอาคีย์เวิร์ดสารพัดมายัดไว้หมดในชื่อหน้า

(more...)