Home » Web Dev » Currently Reading:

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

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

 

Search This Site:



rgb72 on Facebook

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

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

72's Friends

Useful Links

Related Articles: