Home » Web Dev » Recent Articles:

Flash ฮีโร่ในอดีต กับ HTML 5 animation มันเยอะไปมั้ย?

December 18, 2012 My View, Software, Tech, Web Dev Comments

จำได้ว่าเมื่อ 1 ปีที่ผ่านมาพอดิบพอดี ผมเขียนไปว่า Flash animation นั้น กำลังตาย และเริ่มไม่มีคนต้องการมันแล้วจริงๆ

ผ่านไป 1 ปี วันนี้ ไม่มีใครพูดถึง flash ไม่มี requirement จากลูกค้าเจ้าไหนของ rgb72 ที่แจ้งมาว่าต้องการ Flash Intro หรือ flash animation เหมือนในอดีต

จะมีก็แต่งานที่ “จำเป็น” ต้องใช้ flash จริงๆ ก็เช่นการทำเกมใน facebook ซึ่งตรงนั้น เป็นสิ่งที่ไม่สามารถหลีกเลี่ยงได้

ความ “ไม่ต้องการ” flash นั้นรุนแรงถึงขั้นที่เมื่อเห็นกล่องแจ้งขึ้นมาให้อัพเดท Flash ผมถึงกับปิดทิ้ง

ไม่รู้ว่าจะเสียเวลาอัพเดทและ restart บราวเซอร์ทำไม ในเมื่อเราไม่ได้ใช้

เหตุผลง่ายๆที่ทุกคนตอบได้ถึงการจากไปของ flash นั่นคือ พฤติกรรมคนเล่นอินเตอร์เน็ทได้เปลี่ยนไป

ทุกคนต้องการข้อมูลที่เร็วขึ้นกว่าเดิม ต้องการค้นหา อ่าน เข้าใจ และจบ

การมีภาพ animation หวืดหวา บิ้วอารมณ์ให้ตื่นเต้น กลายเป็นส่วนเกิน

อีกปัจจัยที่สำคัญมากคือการแบน Flash ของอุปกรณ์ iOS ทั้งหมด ไม่ว่าจะเป็น iPhone และ iPad ซึ่งเป็นอุปกรณ์ที่ขายดีที่สุดในโลก คนใช้มากที่สุดในโลก กลายเป็นว่า แม้คุณจะทำ flash ออกมาเจ๋งขนาดไหน แต่ไม่มีใครสามารถดูได้ หรือดูได้น้อยคน ก็ไม่รู้ว่าจะเสียงบประมาณ เสียแรงทำงานทำไม

การมีพลังมวลชนมากๆ ก็สามารถช่วยกำหนดทิศทางให้เป็นไปในทางที่ Apple ต้องการได้จริง

ถึงกระนั้น การทำ animation บนเว็บก็ใช่ว่าจะสิ้นสุด

HTML 5 คือตัวแทนฮีโร่คนเก่า พยายามเข้ามาเป็นฮีโร่หน้าใหม่ในยุคนี้

หลายบริษัท หลายเอเจนซี่ สร้างสรรค์ผลงาน animation intro ด้วย HTML 5

ทำภาพให้วิ่ง ทำให้มี interactive สัมพันธ์กับ mouse พูดกันง่ายๆคือก็ ทำทุกอย่างเหมือน flash หมด แค่เขียนด้วย HTML 5 เท่านั้น

ถือเป็นการแก้ปัญหาการมองเห็นของผู้ที่ใช้อุปกรณ์ iOS ทั้งหลาย ด้วยการเขียนด้วย HTML 5 แม้จะยุ่งขึ้นมาอีกนิด แต่กลุ่มคนจำนวนมากที่ใช้ iPhone และ iPad สามารถดูได้ เท่านี้ก็ได้จำนวน view เพิ่มขึ้นมากมาย

คนได้เห็น animation ของเราแล้ววว เย้!!!

แต่นั่นใช่ส่ิงที่คนเล่นเว็บต้องการจริงๆหรือไม่?

แล้วข้อ 1 ที่พูดไปข้างต้นล่ะ เรื่องพฤติกรรมผู้บริโภคที่เปลี่ยนไป ต้องการค้นหา อ่านเร็ว ง่าย สะดวก เข้าใจ แล้วก็จบล่ะ?

HTML 5 animation ไม่ใช่สิ่งที่ผู้ใช้งานต้องการ ภาพเคลื่อนไหวที่เป็นได้แค่ครึ่งๆกลางๆ ดีกว่ารูปภาพนิ่งๆนิดหน่อย ได้ดีไม่เท่า movie แต่การโหลดและการกิน resource ของเครื่องนั้นมากมาย เชื่อว่า HTML 5 animation ยังคงต้องมีการเปลี่ยนแปลงมากกว่านี้

หรืออาจจะดับไปเองเลยก็ได้

ทำอย่างไรให้เว็บโหลดช้า.. ดูเร็ว

July 20, 2012 Web Dev Comments

ในการพัฒนางานขึ้นมาสักชิ้น หลายครั้งที่เราได้รับโจทย์จากลูกค้าให้ทำงานที่ดีดี เจ๋งๆ เนียบๆ กราฟฟิกสวย แอนนิเมชั่นดี 3D เยอะๆ

แต่ความสามารถที่หลากหลาย งานที่สวยงาม มาพร้อมกับขนาดไฟล์ที่ใหญ่โต

หากเรา optimize ขนาดไฟล์ได้ไม่ดี งานที่ว่าสุดยอดของเรา ก็อาจจะไม่มีใครได้เห็นเลยก็ได้

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

โดยเฉพาะ behavior ของ user ในยุคนี้ที่ต้องการความเร็วเหนือสิ่งอื่นใด

ทางแก้ที่เราสามารถทำได้ และมันจะพอ “ช่วย” ได้ หากเราต้องทำ loading bar จริงๆ นั่นคือ

“การทำให้ loading ดูเร็วขึ้น”

ในต่างประเทศได้ทำการศึกษาเรื่องของ loading bar มาแล้วว่า ขณะที่ระยะเวลาการโหลดเท่าเดิม แต่ด้วยเทคนิคอะไรบางอย่าง จะทำให้ user ไม่รู้สึกเบื่อ รู้สึกว่ามันโหลดเร็ว และ อยากที่จะรอ

วิธีที่ 1 คือ การทำกราฟฟิกภายใน bar ให้วิ่งสวนทาง

หากใครใช้ Mac คงจะคุ้นเคยกับ loading bar ลักษณะนี้ดี นั่นคือ การทำแอนิเมชั่นภายใน bar ให้วิ่งสวนทางกับ bar เอง เช่น หาก loading bar วิ่งจากซ้ายไปขวา ก็ให้ทำกราฟฟิกด้านในวิ่งสวนเป็นจาก ขวา ไป ซ้าย

ในเชิงจิตวิทยา วิธีนี้จะช่วยทำให้ loading bar ของคุณดูเร็วขึ้น (ดังภาพตัวอย่าง)

วิธีที่ 2 เพิ่มจำนวนความถี่

Loading ที่มีลักษณะเป็นรูปวงกลมซึ่งเป็นที่นิยมในปัจจุบัน เป็น loading ที่ไม่มีจุดหมายปลายทางให้ user ได้คาดเดา ว่ากันง่ายๆก็คือ ต้องให้ user คอยนั่งลุ้นเป็นระยะๆ ว่าเมื่อไร่จะโหลดเสร็จ

ถึงแม้กระนั้นเราก็ไม่อยากให้ user รู้สึกว่ามันโหลดช้า หรือ ข้อมูลวิ่งเข้าเครื่องของเค้าช้า

การเพิ่มจำนวนความถี่ของเส้นรอบๆวงกลมนั้น ทำให้ระยะเวลาของแสงที่ปรากฎในแต่ละเส้นนั้น สั้นลง และทำให้ user รู้สึกว่ามันโหลดเร็วขึ้น

และการเพิ่มความเร็วในการหมุนแต่ละรอบก็ช่วยทำให้รู้สึกว่าโหลดเร็วขึ้นเช่นกัน

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

 วิธีที่ 3: อย่าหยุดเมื่อใกล้จะโหลดเสร็จ

เคยนั่งรอไฟล์โหลดแล้วมันโหลดเร็วมากในตอนต้น แต่ดันมาหยุดค้างซะนานในตอนท้ายไหมครับ?

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

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

ข้อมูลจาก: http://uxmovement.com/buttons/how-to-make-progress-bars-feel-faster-to-users/
http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
http://www.scribd.com/lmjabreu/d/2226848-Rethinking-The-Progress-Bar

 

แบบฟอร์ม.. อ่านง่ายกว่าถ้าชิดขวา

April 25, 2012 Design, Web Dev Comments

ข้อมูลพื้นฐานจากเว็บไซต์ UXmovement.com (http://uxmovement.com/forms/form-label-proximity-right-aligned-is-easier-to-scan/)

อุปสรรค์สำคัญในการทำแบบฟอร์มคือทำอย่างไรให้คนกรอกข้อมูล หนึ่งในวิธีแก้คือการทำให้คนอ่านรู้สึกง่ายที่จะอ่าน ง่ายที่จะกรอก ไม่สับสน

และนั่นเป็นหน้าที่ของดีไซน์เนอร์โดยตรง

การออกแบบฟอร์มนั้นจริงๆก็ไม่ยาก แค่เรียงตัวอักษรคำอธิบายไว้ว่า จะให้กรอกอะไร ตามมาด้วย กล่อง input box ที่ต้องการให้เค้าใส่ข้อมูล

ซึ่งวิธีการเรียงตัวอักษร สามารถแบ่งออกได้เป็น 3 รูปแบบคือ
1. ตัวอักษรอยู่ด้านบนกล่องใส่ข้อมูล
2. ตัวอักษรอยู่ข้างในกล่องใส่ข้อมูล
3. ตัวอักษรอยู่ด้านข้างกล่องใส่ข้อมูล

แน่นอนว่าสองวิธีแรกนั้นทำให้การอ่านแบบฟอร์มง่ายกว่าแบบที่สามมาก แต่บางครั้ง ดีไซน์เนอร์เองก็หลีกเลี่ยงไม่ได้ที่จะต้องออกแบบให้ตัวอักษรอยู่ทางด้านข้าง

แต่จะทำอย่างไรให้อ่านง่ายล่ะ?

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

จากภาพด้านบน จะเห็นว่า การวางตัวอักษรชิดซ้ายจะทำให้เกิดช่องว่าง เกิดพื้นที่สีขาว หรือที่เค้าเรียกว่า ‘white space’ มากกว่าการวางตัวอักษรชิดขวา และนั่นเป็นเหตุผลให้การอ่านแบบฟอร์มยากขึ้น

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

ลองเปลี่ยนวิธีการออกแบบ แบบฟอร์มดู โดยส่วนตัวแล้ว คิดว่านอกจากจะทำให้การกรอกข้อมูลง่ายขึ้นแล้ว การกั้นหน้าขวามีผลทำให้แบบฟอร์มของเราดูสวยขึ้นด้วยครับ

Search This Site:



rgb72 on Facebook

คำศัพท์ Internet วันละคำ

Android (คำที่เกี่ยวข้อง: App)
– ระบบปฎิบัติการบนมือถือและอุปกรณ์พกพาประเภท Tablet ที่พัฒนาโดย Google ซึ่งเป็นระบบปฎิบัติการประเภท Open Source ซึ่งนอกจากจะเปิดให้นักพัฒนาสามารถแปลงระบบของตัวเองได้โดยอิสระแล้ว ยังเป็นระบบที่มีความเสถียร ใช้งานง่าย และที่สำคัญคือ ฟรี ทำให้เป็นบริษัทมือถือหลายค่ายอย่าง Samsung, LG, และ HTC หันมาเลือกใช้ Android แทน Windows Mobile

72's Friends

Useful Links

rgb72


being72 คือหนังสือที่รวบรวมเรื่องราวความเป็น rgb72 บริษัทออกแบบเว็บไซต์ ตั้งแต่อดีตถึงปัจจุบัน โดยจัดทำเนื่องในโอกาสครบรอบ 10ปี

+ บทความจากผู้เขียน
+ ตอนที่1: Pre-rgb72 / ทำงานกับ Martha Stewart
+ ตอนที่2: Pre-rgb72 / Arcadian
+ ตอนที่3: Pre-rgb72 / ewit
+ ตอนที่4: เริ่มต้นอย่างเงียบๆ
+ ตอนที่5: Generation 1 (ยุคที่1:บุกเบิก) / เริ่มต้นที่ศูนย์
+ ตอนที่6: โทร โทร โทร...
+ ตอนที่7: นามบัตร
+ ตอนที่8: หนังสือพิมพ์และโทรทัศน์
+ ตอนที่9: MATCHING STUDIO
+ ตอนที่10: มีเงินที่ไหน ให้ไปที่นั่น
+ ตอนที่11: พนักงานคนแรก
+ ตอนที่12: ภาพแทรก ออฟฟิสที่สองของ rgb72
+ ตอนที่13: เพื่อนจาก ewit
+ ตอนที่14: GettyImages ฟ้องจริง ถึงจริง
+ ตอนที่15: เว็บไซต์ที่ทำแบบมากที่สุด
+ ตอนที่16: ความฝันที่ 1 พบชื่อลูกค้าทุกๆ ห้านาทีที่ขับรถ
+ ตอนที่17: สมุย.. สร้างเสร็จได้ในวันเดียว
+ ตอนที่18: ขึ้นศาล.. มันไม่สนุก
+ ตอนที่19: นักธุรกิจต่างชาติ
+ ตอนที่20: ความฝันที่ 2 เที่ยวต่างประเทศ
+ ตอนที่21: Super AE
+ ตอนที่22: สินบน
+ ตอนที่23: ผู้หญิงที่ผมไม่รับ
+ ตอนที่24: งานที่คุณไม่ได้ดู
+ ตอนที่25: นักออกแบบ
+ ตอนที่26: คู่แข่งที่รัก
+ ตอนที่27: เซียนหลังกระดานหุ้น ตอนที่ 1/2
+ ตอนที่27: เซียนหลังกระดานหุ้น ตอนที่ 2/2
+ ตอนแทรก: หาาา?... อะไรนะ!!??
+ ตอนที่28: ยิ่งให้... ยิ่งได้
+ ตอนที่ 29: Wall of Frames
+ ตอนที่ 30: ผี 72
+ ตอนที่ 31: เพื่อนจากตะวันออกกลาง
+ ตอนที่ 32: Photography
+ ตอนที่ 33: Too Far from the Dream





Recent Comments

Powered by Disqus