It’s all about user experience.


Firefox 4 นั้นมาพร้อมกับฟีเจอร์ Test Pilot ซึ่งจะช่วยให้ Mozilla มีข้อมูลดิบไปใช้ประกอบการตัดสินใจออกแบบโปรแกรมในอนาคต (เป็นตัวอย่างที่ดีของ data-driven design) ซึ่งผมก็ยินดีให้ความร่วมมือ ยอมให้ Mozilla มาเก็บข้อมูลของเราไปใช้งาน (Mozilla ก็ถือเป็นองค์กรที่เชื่อถือได้ว่าจะไม่แอบเอาข้อมูลส่วนตัวของเราไปใช้)

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

canvasพฤติกรรมการใช้งานของผมคือ ค้นผ่านการเปิดเว็บมากที่สุด (คือพิมพ์ Google แล้วค่อยค้นจากเว็บ) ส่วน Search Box ก็ใช้บ้างประมาณ 22% แต่อันที่แทบไม่ใช้เลยคือ URL bar เพราะ mindset เรารู้สึกว่ามันไม่ใช้สำหรับค้นของ (ต่างจาก Omnibar ของ Chrome) สุดท้าย context menu (ลากคำ คลิกขวาแล้วกด search) อันนั้นนานๆ ใช้ทีแต่ใช้ทีไรก็รู้สึกว่ามันสะดวกอยู่

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

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

firefox-heatmap

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

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

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

ทางโครงการ Mozilla เตรียมเอาเมนูบาร์ออกจาก Firefox ใน Vista/7 เลยต้องสำรวจข้อมูลอย่างเป็นวิทยาศาสตร์ ว่าคนใช้-ไม่ใช้เมนูบาร์มากน้อยขนาดไหน

สุดท้ายได้ออกมาเป็นแผนภาพ แสดงสีตามความถี่ (ดำ = น้อย, แดง = มาก) ดังภาพ คลิกเข้าไปดูภาพใหญ่กันเอง

menubarheatmaplog

ความน่าสนใจ (สำหรับผม)

  • ไม่น่าแปลกที่ Open Location กับ Import กับ Find Again ไม่มีใครใช้
  • Redo ไม่มีคนคลิกเลย!
  • น่าแปลกใจที่เมนู ย่อ-ขยายฟอนต์ คนใช้น้อยกว่าที่คิด แสดงว่าคนส่วนมากไม่รู้จักฟีเจอร์นี้?
  • คนใช้เมนู History ไม่เยอะ (ตามคาด) แต่คนใช้เมนู Bookmark เยอะกว่าที่คาดมาก

จากบล็อกของ Alex Faaborg

การออกแบบ First Run Page

Mar 25, 2010 Author: mk | Filed under: Analyze

Firefox เพิ่งอัพรุ่นเป็น 3.6.2 เปิดมาพบกับหน้า first run ที่สวยงาม

firefox362start

หน้านี้อยู่ที่ http://www.mozilla.com/en-US/firefox/3.6.2/whatsnew/

แนวคิดหลักๆ คงไม่ต้องดูไปถึงขนาด layout หรือ heatmap แต่สรุปง่ายๆ ว่ามันสวยกว่าเดิมมาก ดึงดูดผู้ใช้หน้าใหม่มากขึ้น

ลองดูตัวอย่างที่ไม่ดีบ้าง เป็นของโครงการ Ubiquity ซึ่งเป็น extension ของ Firefox เจ้าของโครงการเพิ่งทำ usability test ไป และบอกว่าอะไรดี อะไรไม่ดี ในหน้า first run ซึ่งผู้ใช้ครั้งแรกทุกคนจะต้องเจอ

ubiq-firstrun1

รายละเอียดอ่านที่ Ubiquity User Testing Reveals Desperate Need for Better First-Run Experience

จากที่เคยเขียนไว้เมื่อชาติปางก่อน แข่งออกแบบ Home Tab ของ Firefox 4.0 ตอนนี้ได้ผู้เข้ารอบ 10 คน และเปิดให้โหวตแล้วครับ

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

ดูวิดีโอทั้งหมด + ร่วมโหวตได้ที่ Mozilla Labs Design Contest

ใน Firefox 4 จะปรับเปลี่ยน UI จากเดิมพอสมควร เปลี่ยนปุ่ม Home มาเป็น tab และในหน้านั้นก็จะใช้เป็นหน้าเริ่มต้น (ลักษณะเดียวกับ Chrome หรือ Opera)

ทาง Mozilla Labs เลยจัดประกวดการออกแบบ Home Tab ของ Firefox 4.0 ว่าควรมีหน้าตาเป็นอย่างไร แถวนี้ใครมันส์มือก็ไปประกวดกันได้ครับ

ภาพหลุดของ 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

เคยเขียนเรื่อง ผลการประกวด Mozilla Labs Design Challenge Spring 09 ไปแล้ว คราวนี้เป็นผลการประกวดรอบ Summer 09 ในหัวข้อให้ออกแบบระบบ Tab แบบใหม่ให้ Firefox ครับ

รางวัลชนะเลิศแบ่งเป็น 5 หมวด ผมคัดที่ชอบมา 3 อันละกัน

(more...)

Firefox 3.5 จะมีการปรับโลโก้ของ Firefox นิดหน่อยในส่วนหาง ทางทีมงานของ Mozilla ได้เปิดเผยเอกสาร Creative Brief ที่แจกให้บริษัทที่รับหน้าที่วาดไอคอนได้รับทราบ

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

(more...)

Categories