It’s all about user experience.


การออกแบบ 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

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

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

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 แค่อันเดียว

Engadget โฉมใหม่

Nov 23, 2009 Author: mk | Filed under: Analyze

เว็บไซต์ข่าว gadget ชื่อดังอย่าง Engadget ได้ยกเครื่องรูปโฉมใหม่หมดครับ รายละเอียดดูในบล็อกของ Engadget เอง

engadget1

อันนี้ตัดมาเฉพาะครึ่งบน จะเห็นว่าส่วนบนสุดเป็นโฆษณา ตามมาด้วยโลโก้และ navbar ถัดมาคือ Big Headline ซึ่งมีประโยชน์ช่วยเน้นข่าวเด่นกันจะๆ และตามด้วย Top Stories ซึ่งเป็นข่าวเด่นระดับรองลงมา

ดีไซน์อันนี้ visual กว่าของเดิมมากครับ ธีมโดยรวมมีการตัดขอบเยอะขึ้น ใช้สีดำช่วยเยอะมาก (Engadget เดิมคือขาว+ฟ้าอ่อน สีมันจะดูจางๆ ซีดๆ) (more...)

วันนี้กูเกิ้ลปล่อยของเล่นใหม่ออกมาในซีรีส์ Labs อีกแล้วครับ คือ Google Image Swirl นั่นเอง  ถ้าใครนึกภาพไม่ออก ลองนึกเปรียบเทียบกับ Google WonderWheel ก็ได้ครับ กล่าวคือ เมื่อเราค้นหาภาพใดๆ ตัว Image Swirl จะจัดผลลัพธ์ออกเป็น 12 กลุ่มที่ต่างกัน และเมื่อเราคลิกที่แต่ละกลุ่ม ก็จะได้กราฟของรูปที่ใกล้เคียงกันออกมาครับ เอ๊ะ! ยิ่งอธิบายยิ่งงง คิดว่าดูรูปน่าจะเข้าใจกว่านะ

s1

สมมติค้นหาคำว่า Chocolate จะได้ผลลัพธ์อย่างด้านบน

s2

พอคลิกรูปที่เราสนใจ ก็จะมีรูปคล้ายๆ กันแสดงออกมาเพิ่มอีก

s3

และสามารถคลิกต่อไปเรื่อยๆ ได้

เท่าที่ทดสอบดูตอนนี้คือยังสามารถค้นหาได้จำกัด (คำไหนที่ไม่มีในฐานข้อมูลจะบอกว่า Not Included in Demo) และผลลัพธ์ที่ได้ยังน้อยอยู่ แต่ก็น่าจับตามองว่าถ้าเอามาเชื่อมกับผลลัพธ์การค้นหาจริงๆ แล้ว จะทรงพลังอย่างแรงแค่ไหนครับ :-) (เห็นบอกว่าตอนนี้มีในฐานข้อมูลแค่ 200,000 รูปเอง)

อากู๋เค้าให้สัมภาษณ์ไว้ดังนี้ครับ "Image Swirl ใช้เทคโนโลยีที่เมื่อก่อนเราใช้กับฟีเจอร์ Similar Images (ค้นหารูปคล้าย) และ Picasa Face Recognition (แยกแยะใบหน้าได้) เพื่อที่จะจัดรูปภาพเป็นกลุ่มๆ และสร้างกราฟความสัมพันธ์ในแต่ละกลุ่มนั้น, Thumbnail ที่แสดงในหน้าแรกของผลลัพธ์การค้นหาเป็นตัวแทนถึงรูปภาพแต่ละกลุ่มที่มีความคล้ายคลึงกัน ซึ่งความคล้ายคลึงกันนี้ถูกตัดสินด้วยอัลกอริธึมที่บอกไปไงล่ะตะเอง"

ไปลองทรรศนาได้ด้วยสายตาท่านเองที่ http://image-swirl.googlelabs.com/ ครับผม

ข่าวบางส่วนแปลจาก Mashable ครับ

OS Design History 1981-2009

Nov 12, 2009 Author: Champ | Filed under: Inspiration

จริงๆ ลิงค์เก่าแล้วหละครับ แต่ผมเพิ่งไปเจอมา น่าศึกษาทีเดียวนะ เห็นการเปลี่ยนแปลงได้อย่างชัดเจน โดยเฉพาะจาก Win 98 -> XP และการเริ่มต้นของ OS X

os

ตามลิงค์โลด!

ผู้ใช้ OpenOffice.org ทุกคนรู้ดีว่า UA/UX ของมันห่วยมาก แน่นอนว่ารุ่นพี่อย่าง MS Office ก็ประสบปัญหาเดียวกันนี้ และเลือกแก้ปัญหาโดย Ribbon ใน Office 2007 ซึ่งดูว่ามันจะถูกนำไปใช้อีกนาน

และหลังจากนิ่งนอนใจมานาน ทางโครงการ OpenOffice.org ก็ได้เริ่มโครงการปรับเปลี่ยน UI ของโปรแกรมแล้ว ใต้ชื่อโครงการ Renaissance ซึ่งผมคิดว่าอีกชาติเศษถึงจะเป็นรูปเป็นร่าง

ความพยายามหนึ่งของ Renaissance คือรับฟังเสียงจากทางบ้าน หาไอเดียใหม่ๆ ในการออกแบบการใช้งานโปรแกรม (ลักษณะเดียวกับ Design Challenge ของ Mozilla Labs) โดยโจทย์ข้อแรกคือให้ออกแบบหน้าตาของโปรแกรม OpenOffice.org Impress เสียใหม่ ให้เข้าถึงฟังก์ชันการทำงานได้ง่ายขึ้น

ตอนนี้ผลงานที่ส่งรอบแรกออกมาแล้ว (more...)

คนเขียนเค้าเขียนบล็อกไว้ตั้งแต่ช่วงสงกรานต์ กระผมเพิ่งมีเวลาได้อ่าน พบว่าเยอะจนมึนยิ่งนัก แนะนำผู้ออกแบบเว็บให้ดูยิ่ง ตัวอย่างของการออกแบบเพื่อรองรับภาวะชี้เมาส์ (Hover) ซึ่งก็มีต่างๆ กันไป ทั้งไล่เฉดสีสลับกัน ทำให้เบลอๆ ฟุ้งๆ หรือทำให้มีสีสันขึ้นมา

แน่นอนว่า สรุปแล้วก็คือ การทำให้การเอาเมาส์ไปชี้แล้วเมนูเหล่านี้ "โดดเด่นน่าจิ้ม" นั่นเอง

เชิญอ่านที่ Spoonfed Design

ปล.
หลังๆ นี่เห็นเว็บแต่ละแห่งพยายามรวมกันไปรวมกันมาทั้งนั้น ไม่มีใครจะเขียนอะไรกันใหม่ๆ แล้วหรือค้าบบบ

ปอ. (เลียนแบบคุณแอน - ไม่รู้แปลว่าอะไรเหมือนกัน)
บันทึกนี้ก็เป็นหนึ่งในการ "รวมกันไปรวมกันมา" เช่นกัน เฮ้ย เขียนอะไรใหม่ๆ กันบ้างดิ๊

ปฮ. (ตกลงแปลว่าอะไรเนี่ย ไอ้ ปอ. ปฮ. เนี่ย)
มีตัวอย่างเว็บแอปเปิ้ลด้วย ขอบอกว่าเมนูเค้านี่แหละ เป็นต้นฉบับให้กระผมลอกมาหลายทีและ (ทั้งเมนู ทั้ง css พี่ท่านคิดมาดียิ่งนัก) ดูรูปได้ แต่อย่าทะเลาะกันในนี้เลยค้าบ ไปทะเลาะที่บล็อกนั้นละกัน

globalnavbg

No Tab - ก้าวต่อไปของ Tab?

Apr 15, 2009 Author: iMenn | Filed under: Analyze

จาก บันทึกเรื่องการออกแบบ Firefox 3.2 เจอผ่าน บันทึกของคุณ code.sweet

เค้าให้ความคิดเห็นว่า Browser ที่มี Tab นั้น ดีในยุคที่เน็ทช้า เครื่องช้า และการมีหลาย Session เป็นเรื่องใหญ่ แต่ปัจจุบันโลกมันเปลี่ยนไปแล้ว การเปิด Tab 8-10 อันเป็นเรื่องปกติและกลายเป็นปัญหาของการมี Tab ไป ดังนั้น Browser ในยุคต่อไป น่าจะคิดเรื่องการทำให้ Browser เป็นเหมือนกับการจัดการเว็บซึ่งเหมือนสื่อต่างๆ จำนวนมาก ต่างหาก

แล้วเค้าก็เลยลองทำหน้าจำลองมาให้ดู เหล่าสาวกลัทธิเกลียดแมคคงจะช้ำใจบ้าง เพราะเล่นเอาไอเดียของ iTunes/OSX มาซะงั้น

itunes-ff-a-tabs

รายละเอียด เชิญที่ บันทึกเรื่องการออกแบบ Firefox 3.2 คร้าบ

quality within web designs

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

ตามไปดูที่ wefunction.com จ้ะ

Categories