It’s all about user experience.


ภาพหลุดของ Firefox 4.0

Jul 28, 2009 Author: Champ | Filed under: Scraps

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

ff4-1

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

ff4-2

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

(more...)

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

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

firefox-37

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

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

firefox-40

ที่มา - Firefox Wiki

websiteon

เว็บแทบทุกเว็บต้องเคยอยู่บนกระดาษมาก่อน หากเรามีทิปเทคนิคในการร่างเว็บบนกระดาษให้จ๊าดใจ เราก็จะเห็นภาพของเว็บได้เด่นชัดขึ้น อธิบายกับทีมพัฒนาได้ดีขึ้น และตัวร่างแรกนั้น จะสามารถเป็น reference ในหลายๆ จังหวะของการพัฒนาจริงได้

ไปเจอเว็บ CreativeBriefing เขียนเกี่ยวกับทิปเทคนิคในการร่างเว็บ อ่านแล้วพบว่ามีประโยชน์ดี เลยเอามาแบ่งปันกัน

โดยสรุป หลักการมีสี่ข้อใหญ่ๆ คือ

  1. เห็นภาพเว็บโดยรวมในหัวให้ชัดซะก่อน
  2. ให้ความสำคัญกับสัดส่วน
  3. อย่าเพิ่งไปเจาะลึกลงรายละเอียดมาก (นัก)
  4. อย่าฟุ้ง อย่าเวอร์มาก ให้คำนึงถึงข้อจำกัดทางเทคนิคด้วย

นอกจากนี้ในบทความยังมี case study ให้ดูอีกสามเว็บ ทั้งหมดนี้ ตามไปอ่านได้ที่ CreativeBriefing ครับ

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

เนื่องจากว่าคู่แข่งทั้ง 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 ขึ้นมากเรื่อยๆ จนระบบแท็บรองรับไม่ไหวซะแล้ว

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

firefox-2-big

firefox-2-big

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

UI ของ Fennec

Mar 6, 2009 Author: mk | Filed under: Scraps

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

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

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

เจอจาก Mozilla Wiki

Categories