It’s all about user experience.

ว่าด้วย UI ของ IE9

Sep 24, 2010 Author: mk | Filed under: Analyze

ปกติเขียนแต่เรื่อง Firefox เพราะอ่าน feed ของ Firefox เยอะ แต่คราวนี้เป็นคิวของ IE บ้าง

บน IE Blog ได้มีเรื่องเบื้องหลังการออกแบบ UI ของ IE9 น่าสนใจหลายอย่าง เช่น

  • วิธีการแบ่งส่วนแท็บกับ URL bar โดยขึ้นกับขนาดของหน้าจอ
  • กระบวนการตัดสินใจ "ตัด" UI บางส่วนที่ไม่สำคัญออกไป เช่น Favourite Bar โดยใช้ "ข้อมูล" ว่าเอาจริงแล้วใครใช้อะไรกันบ้าง
  • แนวคิด "เว็บสำคัญกว่าเบราว์เซอร์" ทำให้ปุ่ม Back ถูกซ่อนอยู่ด้านหลังเว้บเพจ
  • การจัดกลุ่มปุ่มสำคัญๆ เช่น Home, Favourite, Settings ไว้ใกล้กันด้านขวา และใช้ shape ที่แยกแยะได้ง่าย

ภาพที่ผมชอบคือ เทียบพื้นที่แนวตั้งของเบราว์เซอร์ 5 ตัว ตอนนี้ IE9 ชนะเลิศนะ

mirko_ie9sites_6

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 ว่าควรมีหน้าตาเป็นอย่างไร แถวนี้ใครมันส์มือก็ไปประกวดกันได้ครับ

Find Bar ของ OpenOffice

Dec 17, 2009 Author: mk | Filed under: Analyze

เป็นการปรับปรุงเล็กๆ ของ OpenOffice แต่น่าจะเป็นประโยชน์ นั่นคือ Find Bar หรือ Find Toolbar ที่ริเริ่มโดย Firefox แล้วเป็นที่นิยมในหมู่ซอฟต์แวร์ตัวอื่นๆ ในเวลาถัดมา (เช่น Chrome และ Safari)

ของ OOo ก็ทำบ้าง แต่ว่าไม่อยู่ด้านล่างให้กินที่ รวมเป็นส่วนหนึ่งของทูลบาร์มาตรฐานไปเลย

findbar2

หน้าตาเรียบง่ายครับ มีช่องให้พิมพ์ และเลื่อนขึ้น-ลง เอาฟีเจอร์แค่นี้ก็พอ ถ้าอยากได้มากกว่านี้ค่อยเรียก Find & Replace dialog อันเก่าขึ้นมา

หน้าตาแบบเต็มๆ เป็นอย่างนี้

oo-findbar

เค้ายังไม่บอกว่าจะเข้ามาใน OOo เวอร์ชันไหน แต่คาดว่าคงอีกไม่นาน

ที่มา - GullFOSS

ดีไซน์ใหม่ของ Songbird 1.4.1

Dec 17, 2009 Author: mk | Filed under: Analyze

Songbird โปรแกรมฟังเพลงลูกผสมเบราว์เซอร์ ใกล้ออกเวอร์ชัน 1.4.1 พร้อมปรับหน้าตาใหม่เล็กน้อย

songbird-141

ธีมใหม่นี้มีชื่อว่า Purple Rain (ชื่อเท่เกิ๊น) ไอเดียหลักไม่ต่างอะไรจากเดิมมาก (นั่นคือ "ลอก iTunes" ฮ่าๆ) แต่ในรายละเอียดก็ต่างไปพอสมควร

การเปลี่ยนแปลงสำคัญ 2 ข้อ

  1. ปรับให้หน้าตาคล้าย media player มากขึ้น เพราะของเดิมทำเอาผู้ใช้สับสนว่า ตกลงมันเป็นอะไรกันแน่ เป็นเบราว์เซอร์หรือเปล่า
  2. reduce complexity ซึ่งส่งผลให้ reduce functionality บางอย่างลงไปด้วย

การตัดสินใจเปลี่ยนนี้มีเหตุผลสนับสนุนในเชิงวิศวกรรมและพฤติกรรมมากมาย ผมคิดว่าเป็นตัวอย่างที่ดีของ data-driven change ซึ่งเป็นสิ่งที่พึงกระทำ อ่านได้จาก Songbird Wiki

Ars Technica ปรับโฉมใหม่เป็นเวอร์ชัน 5.5

arstechnica

รายละเอียดอ่านได้จาก Ars Technica

การเปลี่ยนแปลงที่สำคัญคือ เอา thumbnail ของข่าวเด่นที่เคยอยู่ด้านบนของหน้าจอออกไป ทางทีมงาน Ars บอกว่าผู้ใช้สับสนว่ามันเป็น banner โดยเอา thumbnail ไปไว้ด้านบนของ sidebar ด้านขวาแทน

แนวทางนี้ส่วนทางกับ Engadget ที่ปรับโฉมใหม่อย่างชัดเจน นั่นคือ Ars ใหม่หน้าตาคล้าย Engadget อันเดิม ในขณะที่ Engadget ใหม่ก็คล้าย Ars รุ่นก่อนหน้านี้

การเปลี่ยนแปลงอย่างที่สองคือ Ars เพิ่ม "ข่าวสั้น" หรือ brief เข้ามา เป็นข่าวที่สรุปมาจากเว็บอื่นๆ สั้นๆ ง่ายๆ อ่านได้เร็ว ไม่ต้องลงรายละเอียดมาก ทำให้ตอนนี้ Ars มี content type ทั้งหมด 3 แบบ

  1. Featured Story - ข่าวยาวหรือสกู้ป ซึ่งจะแสดง thumbnail ประกอบในหน้ารวม
  2. ข่าวปกติ ตอนนี้ไม่แยกเป็น journal แล้ว
  3. Brief หรือที่เห็นในจอเขียนว่า Etc.

เนื้อหาทั้งหมดจะถูกแสดงในหน้าแรกตามลำดับเวลา (reversed-chronology) ไม่แยกว่า ข่าวเต็มแสดงในหน้าแรก ส่วน journal ไม่แสดง เหมือนในเวอร์ชันก่อน แต่เปลี่ยนเป็นแยกแยะตัว tag แทน (คล้ายกับ journal ของเดิม) ดูได้จาก tab ส่วนบนของหน้าจอ

การเปลี่ยนแปลงครั้งนี้เป็นการ "back to basic" กลับสู่สามัญ มี single content stream แล้วปล่อยให้ content ไหลไปเรื่อยๆ เข้าใจง่ายไม่ซับซ้อน และมีเครื่องมือในการกรองข่าวคือ tag หรือ category ซึ่งจัดหมวดหมู่ตาม journal ของเดิม

เทียบกับกรณีของ Blognone ก็จะคล้ายๆ กันครับ คือมี single content stream อยู่ที่หน้าแรก (แยกหน้าด้วย pager) และสามารถ filter ได้ด้วย tag ซึ่งของ blognone จะเยอะกว่าของ Ars (จะคล้ายกับ tag ของ Engadget มากกว่า) แนวทางนี้ใช้กันในเว็บบล็อกอื่นๆ ด้วย เช่น TechCrunch

หมายเหตุ: Blognone จริงๆ แล้วมี content stream 2 อัน ถ้านับรวม upcoming ด้วย แต่ไม่ได้จับกลุ่มผู้ใช้ทั่วไปอยู่แล้ว มีแต่สมาชิกเท่านั้นที่เห็น ในทางปฎิบัติแล้วก็ถือว่ามี content stream แค่อันเดียว

Recent Comments