It’s all about user experience.

ทิ้งช่วงการเขียนบล็อกนี้ไป 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 แค่อันเดียว

ทางโครงการ Renaissance ได้ปล่อย screenshot แรกของ OOo Impress ที่ผ่านการปรับปรุง UI ใหม่แล้ว โดยชุดแรกเป็นแค่การปรับตำแหน่งของปุ่มต่างๆ (layout) ส่วนหน้าตา (style) ยังเหมือนเดิม เป็นการปรับที่ระดับการใช้งาน (usability) มากกว่าความสวยงาม

OOo Impress ในปัจจุบันประกอบด้วย 3 panes และ 5 views ในเวอร์ชันใหม่จะปรับลดความซับซ้อนของมันลงมาเหลือ 2 panes กับ 3 views ครับ

Panes

  • Slides - แสดงภาพย่อของ slide (ยังอยู่)
  • แก้ไข slide (ยังอยู่)
  • Tasks - งานต่างๆ (โดนตัดไปเป็นเมนู)

Views

  • Normal - โหมดแก้ไข slide แบบปกติ (ยังอยู่)
  • Outline - แสดงข้อความตามโครงสร้างของ slide (ยังอยู่)
  • Notes - หมายเหตุสำหรับคนพูด (โดนเปลี่ยนไปเป็นช่องใส่โน้ตด้านล่างของสไลด์)
  • Handout - หน้าตาของโหมด handout เวลาพิมพ์ (โดนตัดหาย)
  • Slide Sorter - สำหรับเรียง slide (ยังอยู่)

ooo1

OOo Impress โฉมใหม่ เหลือ 2 panes ซ้ายขวา สังเกตว่า Views จะถูกย้ายมาอยู่ใน pane ซ้าย มีช่องใส่ Notes เล็กๆ ด้านล่าง และของที่เคยอยู่ใน Task เช่น Slide Layout กลายมาเป็น context menu ในปุ่มบนทูลบาร์

ooo2

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

ooo3

โหมด Outline เปลี่ยนมาแสดงแทนที่ thumbnail ใน pane ซ้าย จากเดิมที่แสดงใน pane ขวา

ooo4

โหมด Slide Sorter ไม่เปลี่ยนแปลง

ทาง OOo บอกว่าขั้นถัดไปจะไปปรับปรุงส่วน behavior ของโปรแกรมแล้ว เช่น object selection, object alignment, text alignment (พวกนี้เป็นสิ่งที่ OOo ทำได้ห่วยมากในสายตาผม ยิ่งถ้าเทียบกับ Keynote ฟ้ากับเหว หวังว่าคงจะรีบแก้ไขไวๆ)

ที่มา - GullFOSS

ผู้อ่านบล็อก Usably คงคุ้นเคยกับโครงการ Renaissance ของ OpenOffice ซึ่งเป็นการปรับ UI ใหม่ให้กับโปรแกรม Impress (ไปค้น Post เก่าๆ ดูกันเองนะครับ)

คำถามก็คือ เมื่อไรมันจะเสร็จ?

OOo ตอบมาแล้วว่า การปรับ UI จะค่อยๆ ทำแบบช้าๆ ไม่เปลี่ยนแปลงแบบฉับพลัน โดย UI ของ Impress จะเริ่มเปลี่ยนใน OOo 3.3 เป็นต้นไป ส่วนโปรแกรมอื่นๆ คงหลังจากนั้น

ที่มา - GullFOSS

Categories