สไลด์ประกอบการเสวนา UX101: ออกแบบอย่างไรให้ใช้ง่าย

วันก่อน อีเบนท์มาชวนไปบรรยาย ให้พูดเรื่องอะไรก็ได้ ปกติผมเจอแบบนี้ก็จะปฏิเสธทันทีด้วยความสุภาพว่า “ไม่ล่ะ ขี้เกียจ”

แต่นี่มันน่าสนใจตรงที่ “จัดที่ราชบุรีนะพี่”

ถามมันว่าใครจัด มันบอกผมจัดเองส่วนตัวเลยพี่ อยากให้มีแบบนี้ที่ราชบุรีบ้าง เพราะคนที่กรุงเทพฯ เขามีโอกาสเยอะแล้ว แต่งานมันจะเล็กมากเลยนะ เพราะไม่ได้มีหน่วยงานอะไรมาสนับสนุน หรือโปรโมตอะไรเลย เฟซบ๊งเฟซบุ๊กก็ไม่มี แค่แปะป้ายไว้ที่ร้านกาแฟ dKunst ที่จัดงานเฉยๆ (บ้าที่สุด)

งานฟรีแถมต้องเดินทางไกลแบบนี้ก็เลยตอบตกลงไปทันที โอเควะ พาลูกเมียไปเที่ยวราชบุรีอีกทีดีกว่า

ปรากฏว่างานเสวนาครั้งนี้เป็นงานเล็กๆ โคตรๆ จริงๆ ครับ มีคนฟัง 5-6 คน :30:

พูดไปเกือบชั่วโมง กับอีก 2 คนคืออีแบงค์ (สไลด์สวยมาก) และอีเบนท์ เจ้าของงานอีกคนละ 15-30 นาที จึงจบงาน และแยกย้ายกันไปกินข้าวตากยุง (อร่อย ชื่อร้านอะไรนะ คราวหน้าจะไปกลางวันๆ)

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

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

พฤติกรรมการใช้งานเฟซบุ๊กที่ผิดเพี้ยน

เปลี่ยนโหมดมาคุยเรื่องการออกแบบเว็บกันนิดนึงครับ

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

ซึ่งมันดันเป็นอินเทอร์เน็ตที่ไม่เสรีเลยนะ แต่ถูกควบคุมด้วยเอกชนเพียงรายเดียว

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

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

ที่จริงคำว่า “ใช้ง่าย” เนี่ยไม่เคยเกิดกับเฟซบุ๊กเลยนะครับ มันเลยเป็นเรื่องน่าสนใจมากว่า ที่จริงแล้ว user ทั่วโลกไม่ได้โง่รึเปล่า คนที่เป็นนักออกแบบ UI นั้นถูกปลูกฝังมาตลอดว่าเวลาออกแบบอะไร ให้คิดถึง user ที่โง่ที่สุด แต่เฟซบุ๊กซึ่งเป็นเว็บใหญ่อันดับต้นๆ ของโลก ดันเป็นเว็บที่ใช้งานยาก ปุ่มนู่นนิด ต่อมนี่หน่อย ไหนจะตัวอักษรเล็กจนมดยังต้องเพ่ง หรือระบบนำทางที่ชวนงง กูกดภาพแล้วจะ back ไปอะไรยังไงต่อ เมนูหลักอยู่ไหน ฯลฯ

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

อุตส่าห์ลอก Google+ มาทั้งที :27:

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

จบเรื่องบน มาต่อเรื่องล่าง

ทั้งนี้ที่อยู่ดีๆ ก็เขียนบล็อกนี้ขึ้นมา เพราะผมตื่นมาแหกขี้ตาดูข่าวในมือถือ ก็เจอลิงก์นี้

เลยพบว่าการประกาศอะไรที่เป็นใจความสำคัญเนี่ย เจ้าของเพจ (และผู้ใช้ปกติ) จะถูกสั่งสอนกันมาว่า “อย่าโพสต์เป็นข้อความธรรมดาหรือแชร์มาสิ เดี๋ยวไม่มีภาพ หรือภาพมันเล็ก จะไม่เป็นที่สนใจ ดังนั้นให้โพสต์เป็นภาพไปเลย แล้วถ้ามีต้นฉบับก็ให้ใส่ที่มาเอา”

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

กลายเป็นว่าทุกวันนี้เรามีประเภทของโพสต์ที่เป็น “รูปภาพพร้อมคำบรรยายใต้ภาพ” เต็มไปหมด ในฐานะคนออกแบบระบบ พฤติกรรมสุดฮิตที่คนหันไปใช้การโพสต์ภาพ เพื่อจะบอกเล่าเรื่องราวในฐานะข้อความใต้ภาพกันหมดเลยเนี่ย แบบนี้ถือว่าล้มเหลวนะครับ

แก้ยังไง?

ถ้าในฐานะคนออกแบบระบบและประสบการณ์การใช้งาน ก็แก้ง่ายๆ ครับ ในเมื่อเราเปลี่ยนพฤติกรรมของผู้ใช้ทุกคนในโลกทันทีไม่ได้ ก็หันมาเปลี่ยนสเต็ปการโพสต์ จาก “เลือกประเภทข้อความก่อนที่จะโพสต์” (คือเลือกว่าจะเอา text หรือภาพก่อน) ให้กลายเป็น “โพสต์แล้วค่อยแนบภาพหรือคลิปลงไป” แทน

ดังนั้นผู้ใช้จะจะแนบหรือไม่แนบภาพก็ได้ อย่างน้อยแค่มีข้อความก็ถือเป็น “การ์ดข้อความ” 1 ใบ (เรียกว่าการ์ดเพราะผมอิงกับดีไซน์ใหม่ล่าสุดที่กำลังจะเปิดตัว (และลอกมาจาก Google+) นะครับ) แต่ถ้ามีภาพก็แสดงภาพประกอบไปด้วย จบเลย สวยงาม การปรับปรุงประสบการณ์ใช้งานแบบนี้ใช้ได้ดีและเห็นผลมาแล้วกับทั้งทวิตเตอร์และ Tumblr และ แฮ่ม… Google+

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

วิชา UX มันสนุกแบบนี้แหละ ถึงจะนิดๆ หน่อยๆ แต่ถ้าทำให้เว็บใช้ง่ายขึ้นมาอีกหน่อย คนออกแบบก็ยินดีครับ

ป.ล.
ทวีตเรื่องนี้ไปเมื่อกี้ นึกได้ว่าน่าขยายเลยเอามาต่อในบล็อก จบ

รำคาญตัวอักษรจิ๋วๆ ในเฟซบุ๊กใช่ปะ เอ้า ทำไอ้นี่มาให้

Facebook Text Enlarge / Chrome Extension

พอดีเพิ่งซื้อ iMac ใหม่มา (อวดๆ) แล้วผมใช้โครมเข้าเว็บเป็นหลัก ก็พบว่าตัวเองโคตรรำคาญตัวอักษรจิ๋วๆ บนเฟซบุ๊กเลยครับ (ที่จริงคือไม่ชอบดีไซน์ทุกประการของฟซบุ๊กเลย) เลยทำไอ้นี่ขึ้นมาใช้เองเพื่อแก้ปัญหาดังกล่าว

มันเป็นตัวขยายขนาดตัวอักษรบนเฟซบุ๊กให้ใหญ่ขึ้นนิดนึงครับ จากเดิมที่จิ๋วๆ ก็ขยับมาเป็น 13px ซะ ไหนๆ ก็ไหนๆ แล้วเลยปล่อยให้โหลดด้วยละกัน ดาวน์โหลดที่นี่เลยครับ:

Facebook Feed: Enlarge Text

ส่วนวิธีติดตั้งก็ไม่ยาก ใครใช้ Firefox ต้องโหลด Add-on ชื่อ Greasemonkey ก่อน แล้วก็โหลดไอ้ตัวนั้นมาลง

หรือถ้าใครใช้โครม ก็โหลดสคริปต์ลงมาจากลิงก์ข้างบน จะได้ไฟล์ชื่อ 157418.user.js มาตัวนึง แล้วก็เข้าไปที่ URL นี้รอไว้ chrome://extensions (ก็อปไปวางเลย) แล้วจับไฟล์ที่โหลดมาตะกี้ ลากมาวางแหมะลงหน้านี้แหละ จบแล้วครับ

ถ้าใช้แล้วโอเคก็ฝากบอกต่อหรือโหวตให้ด้วยนะครับ (แม่งบ้าคะแนน)
หรือจะให้ปรับอะไรก็บอกนะ พอดีตอนนี้อู้งานปั่นต้นฉบับส่งแซลมอนอยู่ แหะๆ

[Nerd Alert] ไอติมในโค้ดสีที่มีคำว่า face

เมื่อวานซืน อยู่ดีๆ ก็อยากรู้ครับว่าไอ้รหัสสีแบบ Hex color ที่ใช้สำหรับทำเว็บเนี่ย ถ้าพยายามบังคับมันให้เป็นตัวอักษรที่อ่านออก หรือคำที่อ่านง่ายเลย มันจะมีคำว่าอะไรบ้างไหม เผื่อจะเอามาใช้สุ่มสีมั่วๆ ซะหน่อย

แล้วก็เจอครับ!
ดีใจมาก ดีใจอยู่คนเดียวแบบไม่รู้จะอธิบายให้ใครฟังว่าไงดี เพราะแม่งเป็นเรื่องความสนใจส่วนตัวและเนิร์ดมากๆ :30:

เอาสั้นๆ เผื่อใครงง ก็คือไอ้เจ้าโค้ด #000000 ถึง #ffffff เนี่ย ถ้าเปลี่ยนตัวเลข (ฐาน 16 มีตั้งแต่ 0 ถึง f) ข้างในให้มีคำว่า “face” เป็นส่วนหนึ่งปั๊บ รับรองสวยเลย จบเลย (ซึ่งทั้ง f a c และ e นี้ก็เป็นหนึ่งในตัวเลขฐาน 16 เหมือนกัน) แล้วพื้นที่ที่เหลือก็ใส่อะไรไปก็ได้ตั้งแต่ 0 ยัน f ปั๊บ รับรอง ผลออกมาจะดูสวยดีมีรสนิยมทั้งหมด ที่สำคัญมันเป็นโทนสีที่คล้ายๆ กับไอติมในร้าน i-berry น่ะครับ คือจะว่าแว้นก็ไม่แว้น จะทึมก็ไม่ทึม แต่มันหวานๆ เปรี้ยวๆ น่ากินชะมัด!

พูดไปก็คงนึกภาพไม่ออกเท่าไหร่ ยิ่งคนที่ไม่ได้ทำเว็บก็ยิ่งงงว่าไอ้นี่มันพูดอะไร ..อ้ะ งั้นดูตัวอย่างนะ
Continue reading [Nerd Alert] ไอติมในโค้ดสีที่มีคำว่า face

046 | NewWebPick E-zine | 02

yagoohoogle
คลอดแว้ววววววววววววววววววววววววววววววววววววว
ไชโยววววววววววว โห่ววววววววววว ฮิ้ววววววววววววว
รอเธอมานานแซ้นนนานนนนนนน (เพ้อเหี้ยอะไรมึงนักวะ)

เอ้า เข้าเรื่อง
คือ NewWebPick E-Zine เนี่ย มันเป็น E-Magazine ไง
เนื้อหาภายในก็เป็นเรื่องเกี่ยวกับกระแสของกราฟิกดีไซน์ในปัจจุบัน
ฉบับนี้เป็นฉบับที่สองแล้ว (พิมพ์ไปโหลดไป ผมยังไม่ได้อ่าน)
โดยฉบับแรกคลอดตอนกันยา ๒๐๐๔
มีเนื้อหาเน้นไปทางความอึ้งที่เกิดจากกระแสพายุงานออกแบบจากฝั่งเอเชีย

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

เฮ้ย เดี๋ยวโม้ยาวฉิบ — ลองโหลดมาอ่านดู
แม้จะดูเหมือนยาก แต่จริงๆ แล้วอ่านง่าย หมือนพลิกหนังสือธรรมดานี่แหละ
แล้วจะได้แรงบันดาลใจมากมายสำหรับคนที่นั่งออกแบบแล้วเกิดสมองตันขึ้นมา
ขอแนะนำอย่างยิ่งยวดเลยครับ

ดาวน์โหลดได้ที่ www.newwebpick.com

ป.ล.
ขนาดไฟล์ของเล่มแรกราวๆ ๓๐ เม็ก ส่วนเล่มสองนี่ล่อไป ๔๐ กว่าเม็ก!

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

ป.ฮ.
แต่ก็ยังไม่เสร็จอยู่ดี ..ไม่ใช่เพราะอะไรหรอก — กำลังต่อสู้กับตัวขี้เกียจอยู่ง่ะ