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

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

 

กำเนิด นิทานอาหรับราตรี.. ทำไมต้อง 1,001ราตรี?

บ่ายวันเสาร์ ขณะที่กำลังนั่งหน้าคอมพิวเตอร์เพราะเหตุที่ฝนตกหนักจนมืด จำเป็นต้องทำงาน internal project ที่กำลังบิ้วกันมานานเกือบจะ 8 เดือนแล้ว นั่นคือโครงการทำนิทานสำหรับเด็กขายบน iPad

เนื่องจากเป็น internal project อย่างที่บอก เลยทำให้กว่าจะดำเนินการอะไรหลายๆอย่างได้นั้น ไม่รวดเร็วเท่าไรนัก อย่างไรก็ตาม ช่วงนี้เป็นช่วงที่เราต้องลงรายละเอียดกันซะแล้ว

และด้วยความพยายามเป็นคนติสด้วยการฟังเพลง Soundtrack หนังอาหรับ หนังแขก ไปทำงานไป จึงทำให้นึกถึงเรื่องราวที่เล่าสืบต่อกันมาถึง “กำเนิด นิทานอาหรับราตรี” หรือที่มีชื่อเป็นภาษาอังกฤษว่า “The Arabian Nights”

ไปอ่านมาจากหลายๆที่ แต่ละที่มีรายละเอียดที่แตกต่างกัน แต่โครงเรื่องหลักๆยังเหมือนกัน เลยคิดว่าอยากจะเอามาเล่าให้ฟังกันบ้างสนุกๆ

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

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

วิธีที่โหดเหี้ยม อำมหิต ไร้มนุษยธรรม เช่นนี้ได้ทำให้หญิงที่ถูกเรียกเข้าไปคนแล้วคนเล่า หวาดกลัว และแน่นอน ทำให้มีผู้หญิงเสียชีวิตเป็นจำนวนมาก

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

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

แต่ขณะที่นอนรออยู่ เธอกลับเล่าเรื่อง แต่งนิทานที่สนุกมากๆ ให้กษัตริย์ได้ฟัง เมื่อกษัตริย์ได้ฟังนิทานที่นางเอกเล่าให้ฟังแล้วก็เกิดพอพระทัย เพราะนิทานที่เล่ามาล้วนมีความสนุกมากไม่น่าเชื่อ

แต่เล่ายังไม่ทันจบ ก็เช้าเสียแล้ว!!….

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

แต่นิทานเรื่องนี้ก็ไม่ได้จบเอาง่ายๆเสียด้วย อย่างที่เรารู้กันว่ากว่าจะจบก็ปาเข้าไป 1,001 คืน!!

และด้วยการพยายามช่วยตัวเองและปกป้องผู้อื่นให้รอดจากการโดนประหารชีวิต ทำให้เราได้นิทานที่แสนจะอมตะนิรันดรการหลายเรื่องอย่าง อะลาดินกับยักษ์ในตะเกียงวิเศษ, ซินแบดผจญภัย และ อาลีบาบา

จุดจบของเรื่องเป็นสิ่งที่หลายคนสงสัยมาก มีหลายกระแสหลายเรื่องราว บ้างก็ว่าสุดท้ายแล้ว กษัตริย์ได้มีบุตรกับผู้หญิงคนนี้ จนทำให้เค้าไม่สามารถฆ่าผู้หญิงคนนี้ได้ บ้างก็บอกว่า เธอได้ขออภัยโทษและได้รับการยกโทษให้ บ้างก็ว่ากษัตริย์นั้นมีเรื่องอื่นให้สนใจมากกว่าการไล่ฆ่าผู้หญิงเหมือนแต่ก่อน

แต่ไม่ว่าจะจบอย่างไร สรุปเอาเป็นว่า หนังเรื่องนี้จบกันอย่าง Happy Ending

แค่เรื่องราวกำเนิดนิทานชุดนี้ก็สนุกแล้ว ส่วนเนื้อเรื่องหลายคนคงจะคุ้นเคยเป็นอย่างดี

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

เพียงแค่มันจะไม่ได้จบแค่ 7 ภาคเท่านั้นน่ะสิ!!

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

ข้อมูลจาก: หนังสือที่มิอาจจะจำได้แล้วว่าชื่ออะไร ประกอบกับเว็บไซต์ด้านล่างนี้
http://english-for-thais.blogspot.com/2008/05/198.html
http://www.pantip.com/cafe/library/topic/K6144254/K6144254.html
http://www.se-ed.com/eShop/Products/Detail.aspx?CategoryId=494&No=9789748232447&AspxAutoDetectCookieSupport=1 

Search This Site:



rgb72 on Facebook

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

Air (คำที่เกี่ยวข้อง: Adobe, Flash, HTML, JavaScript)
– หนึ่งใน technology ที่พัฒนาโดย Adobe ซึ่งมีคุณสมบัติที่ช่วยให้นักพัฒนาสามารถสร้างโปรแกรมสำหรับคอมพิวเตอร์ได้ใช้เทคนิคเดียวกันกับการเขียน code สำหรับเว็บ ไม่ว่าจะเป็น HTML, JavaScript หรือ Flash โดยคำว่า AIR นั้นย่อมาจาก Adobe Integrated Runtime

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