It’s all about user experience.

วันนี้เพิ่งมีข่าว Google มีแผนจะทำ Google Chrome OS ซึ่งเน้นไปที่กลุ่มผู้ใช้เน็ตบุ๊ค (แต่ยังไม่มีภาพ mock-up หรือ screenshot มายั่วน้ำลายแต่อย่างใด) เลยเอา Intel's Moblin ซึ่งเป็นอินเตอร์เฟสสำหรับเน็ตบุ๊คเช่นกันมาฝากครับ

ดูแล้วก็เข้าท่าดี แต่ผมชอบ Jolicloud มากกว่า

สนใจเพิ่มเติม ตามลิงค์นี้ไปเลยครับ :-)

How to Design Icons (by Jon Hicks)?

Jun 30, 2009 Author: mk | Filed under: Tutorial

ผมไม่ใช่ "นักออกแบบ" ที่ดีเท่าไรนัก ดังนั้นมีอะไรก็อ้าง "นักออกแบบตัวพ่อดีกว่า"

Jon Hicks คนออกแบบโลโก้ของ Firefox (ปัจจุบันโดน Opera ซื้อตัวไปแล้ว) ไปพูดที่งาน @media 2009 ที่ London เรื่อง Icons for Interaction แน่นอนว่าแจกสไลด์ (จริงๆ เป็น handout คือ สไลด์ + คอมเมนต์บรรยาย)

ถึงแม้ว่าสไลด์จะขนาดโตมาก (18MB PDF) แค่ภาพโฆษณาก็ได้ใจแล้ว ซูเปอร์ไฮลี่เร็คคอมเม็นเด็ด.... (ตัวสไลด์เองก็สวยมากครับ) มีทุกอย่างตั้งแต่แนวคิดดั้งเดิมของไอคอน วิธีการออกแบบ เครื่องมือ การนำไปใช้ เทคนิคต่างๆ ฯลฯ

ภาคต่อของ Jolicloud

Jun 8, 2009 Author: mk | Filed under: Scraps

แชมป์เคยเขียนถึง Joli Cloud Interface (UI สำหรับ Netbook ที่สร้างครอบ Ubuntu) ตอนนี้เริ่มคืบหน้าแล้ว

TechCrunch ได้รุ่น Alpha มาทดสอบแล้ว รีวิวออกมาดีทีเดียว น่าเสียดายว่ายังไม่เปิดให้คนทั่วไปทดสอบ ส่วนของ web app นั้นสร้างด้วย Mozilla Prism

อ่าน บันทึกของคุณพัช ที่เปรียบเทียบการทำเว็บกับบ้านแล้วยังไม่โดนใจนัก แต่ด้วยสมาทานคำขวัญคุณมาร์ก "อยากได้ ทำเองเว้ย" จะไปบ่นก็ใช่ที่ กระผมจึงคิดว่า ควรเขียนบรรยายความคิดซักหน่อยดีกว่า

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

1. บ้านทั้งหลาย มีการออกแบบก่อน แล้วจึงลงมือทำ

คนอยากมีเว็บ กลับไม่ค่อยอยากวางแผน คิดแต่ว่าเอาข้อมูลใส่ลงไป แล้วมันจะเป็นเว็บ เลยกลายเป็นว่า เค้าก็ทำไปเรื่อยๆ ทุบไปเรื่อยๆ รื้อท้ิง ทำใหม่ เปลี่ยนสี เปลี่ยนโฉม ทำ 2 ปีแล้วก็ยังไม่เสร็จ (ตัวอย่างนะ มีจริงหรือเปล่าไม่รู้ :P) ย้ายห้องนี้ไปไว้ห้องนั้น เดี๋ยวก็วางห้องด้านหน้าเป็นห้องประชุม (Forum) แล้วก็เปลี่ยนใจ จะเอาร้านขายของมาตั้ง (Catalog) คิดไปอีกที อยากจะเอาป้ายประชาสัมพันธ์บ้านอื่นมาแปะเต็มหน้า (Link) จนคนไม่รู้ว่าบ้านใครหว่า

เวลาทุบตึก เราอาจจะยอมรับได้ว่า มันมีค่าใช้จ่าย แต่พอรื้อเว็บ เรากลับรู้สึกว่า "เฮ้ย นิดเดียวน่า ช่วยหน่อยน่า" ซึ่งเมื่อไม่รู้ แน่นอนว่างานก็ย่อมไม่เสร็จโดยง่าย

แต่ผมไม่ได้ต่อต้านการเปลี่ยนแปลงนะ ตราบใดที่เราเห็นว่ามันตอบโจทย์ เช่น ขายของได้, ดึงดูดคนเข้ามาง่าย, แสดงสินค้าเด่นๆ ได้ดี ฯลฯ ก็ย่อมควรลงทุนเปลี่ยนเแปลงตามโอกาส เหมือนที่ลงทุนตกแต่งร้านกันได้เรื่อยๆ แต่หากการเปลี่ยนแปลงนั้นเป็นไปเพราะ "เห็นเว็บตัวเองแบบเดิมมา 1 เดือนแระ เบื่อ..." กระผมก็จะพยายามโน้มน้าวทันทีว่า "พี่เบื่อ คนอื่นเค้ายังไม่ทันเห็นเลยพี่"

2. บ้านทั้งหลาย มีพื้นฐานบางอย่างที่ "เค้าคิดมาดีแล้วว่าควรจะมี"

ระหว่างชั้นต้องมีบันได, โต๊ะ เก้าอี้ ควรสูงเท่าไหร่, ห้องควรกว้างอย่างน้อยเท่าไหร่? ห้องน้ำควรอยู่ใกล้ลิฟท์ (จะได้เดินท่อได้ทีเดียว) ฯลฯ ซึ่งเรื่องพวกนี้ เราคุ้นชินจนไม่คิดว่าเป็นการ "ลอก"

แต่เว็บเป็นเรื่องใหม่ คนทั่วไปอาจไม่คิดว่า "คิดมาแล้ว/Best Practice" มันไม่ใช่การลอก เลยพาลเห็นว่า พอทำอะไรก็จะไปคล้ายเว็บนู้นเว็บนี้ไปหมด

เช่น ตำแหน่งโลโก้ในเว็บ ถามจริงๆ เถอะว่ามันจะวางได้กี่ที่เชียว, ตำแหน่งแถบเมนู หรือ Navigation มันก็มีที่ให้วางได้ไม่กี่ที่, ระยะระหว่างคอลัมภ์หรือกรอบ ก็ควรเท่าๆ กัน (ผมเพิ่งมาพบว่า 20px เป็นระยะที่กำลังงาม ซึ่งก็ใช้ใน 960.gs ด้วยน้า), Dropdown Menu มันก็มีเหมือนกันมหาศาล ฯลฯ

ซึ่งเมื่อเปลี่ยนจุดสนใจไปที่เนื้อหาแทน เว็บที่องค์ประกอบอะไรคล้ายๆ กัน ก็อาจกลายเป็นคนละเรื่องกันเลย

(ตัวอย่างหนึ่งที่ผมเห็นว่าขำดีก็คือ รถราคา 7 แสน กับราคา 7 ล้านนั้น อาจจะเหมือนกันมากกว่าเว็บ 2 เว็บที่ใช้ธีมเดียวกันเสียอีก)

3. บ้านทั้งหลาย มีแผนผังที่ชัดเจน รู้เรื่อง

ห้องแต่ละห้อง เปิดดูก็รู้ว่าเอาไว้ทำอะไร เผลอๆ ไม่ต้องเปิดประตู ยังรู้ว่าห้องอะไร!

แต่พอทำเว็บ เรากลับอยากให้ทุกอย่างอยู่ร่วมกัน อยากจะให้แผนผังเว็บเราไม่เหมือนใครในโลก มี Navigation สุดคูล สุดประหลาด และไปไม่ถูก, มี link ของทุกอย่าง อยู่ในทุกหน้า, มีป้ายโฆษณาเยอะจนไม่รู้ว่าหน้านั้นเอาไว้ทำอะไร

ซึ่งหากมันมีอยู่ไม่กี่เว็บในโลก คนก็อาจจะเดินดูเล่น จินตนาการเพลินๆ ได้ (ว่าหน้านี้เอาไว้ทำอะไรหว่า?) แต่เมื่อเว็บมันมีมหาศาล เมื่อเค้าหาของไม่เจอ เค้าก็ไม่อยู่ต่อแล้ว

4. ผู้รับเหมาทุกคน แย่หมด

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

และผู้รับเหมาที่ไม่เจ๊งไปก่อนนั้น เมื่อเจอลูกค้าเปลี่ยน Requirement บ่อย ก็ต้องชิ่งไวเสมอ

ซึ่งก็เหมือนกับการจ้างคนทำเว็บ เมื่อผู้ว่าจ้างไม่รู้ว่ามันควรจะออกมาหน้าตาอย่างไร (และยิ่งถ้าคิดว่า ทำอะไรก็ลอก! ยิ่งไม่รู้จะออกมายังไง) ก็ทำให้ Requirement เปลี่ยนไปเรื่อยๆ และผลสุดท้าย ก็ ไม่มีใครทำเว็บได้ดั่งใจเลย

คนทำเว็บทุกคน ก็เลยแย่หมด

แต่ยังมีสิ่งที่แย่กว่า นั่นก็คือ คนจ้างทำเว็บ ไม่รู้ว่ามันมี "ผู้รับเหมาทำเว็บ" กับ "สถาปนิกทำเว็บ" และ "ผู้รับเหมาทำเว็บ" ทุกคน ดันนึกว่าตนเองเป็น "สถาปนิกทำเว็บ"

เพราะอย่างที่คุณประชา สุวีรานนท์ เคยกล่าวว่า วงการออกแบบนั้น เป็นพื้นที่ทับซ้อนของมือสมัครเล่นและมืออาชีพ เลยไม่รู้ว่าใครฝีมือขนาดไหน

ผู้ว่าจ้างก็ไม่รู้เรื่อง คนทำก็ไม่รู้เรื่อง สุดท้ายก็มีแต่รื้อใหม่ ทำใหม่กันไปเรื่อยๆ

5. บ้านสำเร็จรูป ย่อมถูกกว่าบ้านที่ออกแบบมาโดยเฉพาะ (แต่ขายดีนะ!)

เมื่อเห็นว่าการทำเว็บเหมือนสร้างบ้าน เราก็จะเริ่มเห็นแนวโน้มของ "บ้านสำเร็จรูป" / "เว็บสำเร็จรูป/CMS/Theme" กันมากขึ้น นั่นคือ การทำเว็บที่เร็ว ราคาถูก โดยแลกเปลี่ยนกับ "ความคล้ายๆ กัน" ของงานออกแบบ

ซึ่งก็คล้ายกับเสื้อผ้าสำเร็จรูป หรือสินค้าตามสั่งอื่นๆ คือ มันจะพัฒนาไปสุดทาง 2 แบบ ถ้าหากไม่สำเร็จรูปไปเลย (ง่าย, เร็ว, ถูก ฯลฯ) ก็ต้องมีเอกลักษณ์ไปเลย (เจาะจง,​ สวยงาม, สะท้อนตัวตนคนใส่, สะท้อนตัวตนคนออกแบบ ฯลฯ) ใครก็ตามที่อยู่กลางๆ ก็ย่อมอยู่ลำบากในอนาคต

6. บ้านยังต้องอยู่ เว็บยังต้องเปิด

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

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

แล้วท้ายที่สุด ก็ค่อยคิดว่า

"ทำเว็บใหม่ก่าาาาาา"

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

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

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

ตอนนี้ผลงานที่ส่งรอบแรกออกมาแล้ว Read the rest of this entry »

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

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

Read the rest of this entry »

Mozilla Labs คือลูกของ Mozilla ที่ทำหน้าที่ค้นหานวัตกรรมใหม่ๆ ให้กับเบราว์เซอร์ ตามที่บล็อกนี้เคยเสนอมาแล้วหลายตอน

ระยะหลัง Mozilla Labs พยายามขยายตัวเข้าหามวลชนมากขึ้น (ยุทธศาสตร์นี้ผมไปฟังมาที่แคนาดาเมื่อกลางปี 08) และก็ได้มีการจัดประกวดงานออกแบบขึ้นโดยใช้ชื่อว่า Mozilla Labs Design Challenge โดยกลุ่มเป้าหมายหลักคือนักเรียนนักศึกษาสาขาพวก interaction design

ผลการประกวดของการแข่งครั้งแรก (Spring 09) ซึ่งหัวข้อเป็นเรื่องทั่วๆ ไปออกมาแล้ว ผู้ชนะมี 4 ราย

ชิ้นแรกเป็นสาวโรมาเนีย เสนอแนวคิดแท็บ-เอกสารที่เป็นไอคอนแบบไอโซเมตริก เดโมมีให้ลองเล่นแต่ผมโหลดไม่สำเร็จแฮะ

ชิ้นที่สองเป็นแท็บแบบ Bar (เค้าบอกว่าเหมือนโปรแกรมพวก Media Center) อันนี้ผมเฉยๆ เพราะรู้สึกว่ามันเหมือน Flock (เดโม)

ชิ้นที่สามผมค่อนข้างชอบ เป็นการเสนอแนวคิด scrollbar ผสมกับ thumbnail ของเว็บ เดโมเป็น Flash วิธีเล่นคือคลิกบน Flash แล้วกด Spacebar ค้างไว้

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

อ่านเพิ่มได้ใน Mozilla Labs Design Challenge - Spring 09

ตอนนี้เขาเริ่มรอบต่อไปคือ Summer 09 แล้ว หัวข้อคือให้ออกแบบแท็บ ถ้าใครสนใจก็ลองส่งเข้าไปดูได้

Microsoft Office 2010 The Movie

May 14, 2009 Author: Champ | Filed under: Inspiration

office2010

เว็บโปรโมต Microsoft Office 2010 คราวนี้เขาทำแบบเปิดตัวหนังเรื่องหนึ่งกันเลยทีเดียวครับ

Narrative: There are five billions working people in the world. In 2010, their hero will arrive.
เทอร์มิเนเตอร์!

ปล. ไม่ค่อยเกี่ยวกับ Usability เท่าไหร่ แต่อาจจะเกี่ยวกับ User Experience (beforehand)

Star Trek logos: A journey across time

May 12, 2009 Author: pradt | Filed under: Scraps

ย้อนอดีตกันสักหน่อยกับภาพยนตร์ Star Trek ซึ่งถือกำเนิดมาในปี 1966 ในรูปแบบละครโทรทัศน์
จนกระทั่งในปี 1979 Star Trek ก็ถูกดัดแปลงเพื่อฉายในโรงภาพยนตร์เป็นครั้งแรกในชื่อ Star Trek: The Motion Picture

startreklogoev

สำหรับ Star Trek (2009) เป็นภาพยนตร์ลำดับที่ 11 ตระกูล Star Trek ผลงานกำกับของ J. J. Abrams ...ใครยังไม่ได้ชม ขอแนะนำให้ไปชมโดยพลัน เพราะมันสนุกมาก!

กรุณาดูภาพด้านล่างแล้วบอกว่าเป็นไตเติ้ลของเว็บอะไร

majorcineplex

คำตอบ: เมเจอร์ซีนีเพล็กซ์

บ้า SEO จนลืมใส่ชื่อเว็บ?

สำหรับของ SF Cinema City (ที่ชื่อ URL จำยากนัก!) นั้นมี Title ที่หน้าแรกว่า SF Cinema City ดูหนัง ภาพยนตร์ จองตั๋วหนัง เช็ครอบฉาย ส่วนภายในมีเพียงแค่ว่า SF Cinema City : Star Trek (ซึ่งคงเปลี่ยนไปตามหนังที่จะโปรโมตในช่วงนั้น)

หนึ่งในซีรีส์ "ความห่วยแตกของเว็บโรงหนัง" (ที่หวังว่าจะเขียนเพิ่มเร็วๆ นี้ หลังจากหายหงุดหงิดกับเว็บโรงหนังทั้งสองเจ้า)

Categories