Blog

นับตั้งแต่การมาของ iPhone เมื่อปี 2007 การเจริญเติบโตของโทรศัพท์ Smartphone และ Tablet เป็นไปในอัตราแบบเหลือเชื่อ และจำนวนผู้ใช้ Smartphone มีมากกว่า ¼  ของจำนวนประชากรโลกแล้ว นอกจากนั้นปริมาณข้อมูลบนอินเตอร์เน็ตที่เกิดจากการใช้อุปกรณ์เคลื่อนที่เหล่านี้มีปริมาณสูงกว่าที่มาจากเครื่องคอมพิวเตอร์แล้ว ดังนั้นเว็บไซต์ที่ดีต้อง รองรับ Multi-Platform เพื่อสร้างประสบการณ์ในการใช้งานที่ดี (UX) ให้ลูกค้ากลุ่มนี้อย่างหลีกเลี่ยงไม่ได้

สำหรับในประเทศไทย ข้อมูลก็เป็นไปในทิศทางเดียวดัน

 ผลสำรวจพฤติกรรมผู้ใช้อินเตอร์เน็ตปี 2558 จาก สำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์กรมหาชน) กระทรวงเทคโนโลยีสารสนเทศ ได้ผลดังนี้  :

Internet user profile

จะเห็นได้ว่าจำนวนผู้ใช้เข้าถึงอินเตอร์เน็ตและจำนวนชั่วโมงที่ใช้ต่อวันด้วย Smartphone สูงกว่าทั้งคอมพิวเตอร์ตั้งโต๊ะและคอมพิวเตอร์พกพา  และการใช้งานด้วย Tablet ก็มีสูงถึง 21% อีกด้วย

การไม่รองรับการใช้งานของอุปกรณ์เคลื่อนที่เหล่านี้ จะส่งผลให้ประสบการณ์ในการใช้งาน (UX) อยู่ในระดับต่ำถึงต่ำที่สุด ขณะที่เราใช้ Notebook เข้าใช้งาน facebook สิ่งที่ปรากฏบนหน้าจอขนาด 11.8 นิ้ว ทุกอย่างก็ดูดีเว็บสวย อ่านสบาย เมนูใช้งานง่าย วีดีโอก็ดูสนุก  แล้วพยายามเอาทุกอย่างบนจอ 11.8 นิ้วยัดเข้าไปในจอ 5.5 นิ้วของ Smartphone ดังในรูปข้างล่างนี้

iPhone 6 Plus vs MacBook Air 11 inches

นี่ขนาด iPhone 6 Plus ที่หน้าจอมีขนาดใหญ่ เราสามารถเห็นได้ว่าเว็บก็เริ่มไม่สวยเพราะถูกย่อขนาดให้เล็กลงแบบไม่ได้สัดส่วน การอ่านก็เริ่มยากเพราะตัวอักษรเล็กมาก รวมถึงเมนูก็เริ่มอยู่ชิดกันเกินไป วีดีโอหรืออะไรก็ตามที่ต้องใช้ Flash Player ในการเล่นก็เล่นไม่ได้

แล้วถ้าจอ 4 นิ้วกว่าๆ จะเป็นยังไงเนี่ย!!!

ไชโย..พระเอกมาแล้ว

Responsive Web คือ เว็บไซต์ที่สามารถปรับ User Interface (UI) ให้เหมาะกับอุปกรณ์ที่กำลังเชื่อมต่อเข้ามาแบบอัตโนมัติ

Responsive Web ไม่ได้ย่อขนาดของหน้าจอ แต่จะปรับส่วนที่เป็น UI ทั้งหมดไม่ว่าจะเป็น ตัวอักษร รูป การจัดวางเมนู และอื่นๆ ให้เหมาะสมกับขนาดและความสามารถของอุปกรณ์ที่กำลังเข้ามาใช้งานอยู่ไม่ว่าจะเป็นคอมพิวเตอร์ Desktop, Notebook, Smartphone, Tablet, Phablet, กล่อง Set-Top-Box, Internet TV, Apple TV ไม่ว่า OS จะเป็น Windows, Mac, Linux, iOS, Android

ลองมาดูหน้าจอ facebook ซึ่งเป็น Responsive Web จากการใช้งานผ่าน Safari บน iPhone 6 Plus กัน

safari facebook on iPhone 6 plus screen

จะเห็นได้ว่ามันไม่ใช่การย่อขนาดให้เล็กลง แต่คือการปรับให้เหมาะสม ตัวหนังสือไม่เล็กไป รูปภาพขนาดกำลังเหมาะ เมนูด้านบนถูกจัดใหม่ และมี Hamburger Menu ที่แตะแล้วจะมีเมนูอื่นๆ ปรากฏขึ้นมาอีกมากมาย

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

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

แล้วทำไมไม่ใช้ App. ล่ะ?

ยุคนี้ Mobile Application หรือ App. เป็นของคู่กับ Smartphone และแน่นอน App. ให้ประสบการณ์ในการใช้งาน (UX) ที่ดีกว่า Responsive Web ทั้งนี้เพราะ App. ถูกเขียนขึ้นมาเพื่อภาระกิจนี้โดยเฉพาะ  App. ยังสามารถใช้งาน Hardware ของอุปกรณ์เคลื่อนที่ได้อย่างเต็มที่ เช่น ภาพหรือวีดีโอ ความละเอียดสูงๆ App สามารถใช้ Graphic Processing Unit ของอุปกรณ์เคลื่อนที่ได้ดีกว่า จึงให้ผลลัพธ์ที่สวยงามกว่า  App. สามารถเข้าถึง รายชื่อและเบอร์โทรศัพท์ หรือ อัลบั้มรูปภาพที่อยู่บนสมาร์ตโฟนได้ และ App. สามารถใช้ Sensor ต่างๆ ของโทรศัพท์ได้ หรือ App. ทำการแสกนลายนิ้วมือเพื่อใช้แทนพาสเวิร์ดได้ เป็นต้น

แต่…ไม่มีอะไรที่ได้มาฟรีๆ ครับ!

การพัฒนา App. ทำได้ยาก ไม่ใช่โปรแกรมเมอร์ทุกคนจะทำได้ และถ้าไปจ้างให้คนอื่นเขียนให้ราคาก็จะค่อนข้างแพง นอกจากนั้นยังต้องเขียนหลาย Platform ไม่ว่าจะเป็น iOS,  Android, และ Windows เป็นต้น เมื่อเขียนแล้วยังต้องไปผ่านขั้นตอนของ App Store ก่อนจึงเริ่ม Download กันได้ แล้วถ้าลูกค้ามี iPhone หรือ Android รุ่นเก่าๆ จะสามารถใช้ได้หรือไม่? ลูกค้าจะโหลดเป็นมั๊ย จะรู้มั๊ยว่าต้องไปโหลดที่ไหน? และอื่นๆ อีกมากมายที่เป็นปัญหาของ App.

แล้ว Responsive Web หรือ App ดีกว่ากัน?

ขอให้ดูตารางเปรียบเทียบข้อดีข้อเสียของ Responsive Web กับ App เพื่อใช้ตอบคำถามนี้ครับ

 Responsive Web  Mobile Application
 การเข้าถึง ทุกคนที่มี Internet และ Browser บนอุปกรณ์ตัวใดก็ได้ เฉพาะผู้ที่มี Smartphone, Tablet, Phablet ที่รองรับ App ตัวนั้น
ความง่ายและเร็วในการกระจายไปยังผู้ใช้งาน ทันทีที่พัฒนาเสร็จ โดยผู้ใช้งานไม่ต้องทำอะไรเลย ต้องผ่านการตรวจสอบและอนุมัติจาก App Store
 การเริ่มต้นใช้งาน เพียงเข้าไปที่ Website นั้นๆ ก็ใช้งานได้ทันที ต้อง Download App จาก App Store, Play Store, Microsoft Storeต้องตั้งค่าและเรียนรู้วิธีการใช้งาน
การอัพเดทเวอร์ชั่น ทันทีที่พัฒนาเสร็จ โดยผู้ใช้งานไม่ต้องทำอะไรเลย ต้องผ่านการตรวจสอบและอนุมัติจาก App Storeผู้ใช้งานต้อง Download เวอร์ชั่นใหม่ซึ่งเครื่องและ OS อาจจะไม่รองรับ
ความสวยงามของ UI และ กราฟฟิคต่างๆ ขึ้นอยู่กับความเร็วอินเตอร์เน็ตและ Hardware สุดยอด สามารถใช้ Graphic ได้เต็มที่และยังใช้แบบ Off-line ได้ด้วย
การใช้ Function/Features ของอุปกรณ์เคลื่อนที่ ใช้ได้อย่างจำกัด ใช้ได้ทุกอย่างเลย
User Experience ดี ดีมาก ถึง มากที่สุด
ความยากง่ายในการพัฒนา ง่ายมาก เหมือนการพัฒนา website ทั่วไป ยากถึงยากที่สุด ขึ้นอยู่กับความต้องการ
ค่าใช้จ่ายในการพัฒนาและดูแล ไม่มี ถึง มีต่ำมาก สูง ถึง สูงมาก อย่าลืมว่าคุณต้องทำทั้ง iOS, Andriod, และอื่นๆ ถ้ามี
การค้นหาด้วย Search Engine เจอทุกอย่างรวมถึง Content ที่อยู่บนเว็บ เจอแต่ Link ที่พาไปโหลด App.

 

สรุป :

Website ต้องรองรับการใช้งานของอุปกรณ์ที่ไม่ใช่คอมพิวเตอร์โดยเฉพาะ  Smartphone, Tablet, และ Phablet เพราะอุปกรณ์เหล่านี้มีทั้งจำนวนและปริมาณการใช้อินเตอร์เน็ตมากกว่าคอมพิวเตอร์แล้ว

Responsive Web และ Mobile Application เป็นทางเลือกสำหรับการใช้งานดังกล่าว ซึ่งทั้งสองชนิดมีข้อดีและข้อเสียที่ต่างกันดังนี้

  • Responsive Web จะง่าย สะดวก และประหยัด แต่อาจจะไม่ให้ UX ดีเท่ากับ App.
  • App. ให้ UX ที่ยอดเยี่ยมเพราะถูกสร้างขึ้นมาโดยเฉพาะ สามารถใช้ความสามารถของ Hardware ได้เต็มที่และสามารถใช้งานแบบ Offline ได้ด้วย แต่ค่าใช้จ่ายค่อนข้างสูง และกระบวนการในการให้บริการจะยุ่งยากกว่า Responsive Web มากๆ เลย

หากคุณต้องการ UX แบบสุดโคตร และงบประมาณไม่ใช่ปัญหาของคุณ… App. เลยครับ

แต่ถ้าต้องการ UX ที่ดีแบบโอเคเลย แต่ประหยัดและใช้เวลาน้อยกว่า ก็..Responsive Web ครับ …Nirundon





Leave a Reply








สวัสดี..ครับ

Search

Tag Cloud

#Responsive Web #User Interface #ประสบการณ์การใช้งาน Digital Marketing F. Hilaire OST. ฟ. ฮีแลร์ OST. ฟ. ฮีแลร์ ครูฝรั่งแห่งสยามประเทศ SEM SEO SMM UI User Experience UX กลยุทธ์ การออกแบบเว็บที่ดี การออกแบบเว็บไซต์ การออกแบบเว็บไซต์ที่ดี การเลี้ยงปลาเสือตอ ความหวังในการเพาะพันธุ์ ปลาเสือตอ ความเป็นมาของปลาเสือตอ คุณลักษณะของเว็บไซต์ที่ดี จำนวนผู้ใช้งานมือถือ จำนวนผู้ใช้งานอินเตอร์เน็ต ดรุณศึกษา ประสบการณ์ชีวิต ปลาเสือตอ ปลาเสือตอพันธุ์ไทย ปลาเสือตอลายคู่ ปลาเสือตอลายใหญ่ ปลาเสือตอเขมร ฝึกพูดภาษาอังกฤษ พระมหาชนก ฟ.ฮีแลร์ ครูฝรั่งแห่งสยามประเทศ ภาพยนตร์ ฟ. ฮีแลร์ วิธีดูปลาเสือตอ วิธีเพิ่ม UX วิธีเลี้ยงปลาเสือตอ ศาสนา ศาสนาพุทธ หนัง ฟ. ฮีแลร์ องค์ประกอบของเว็บไซต์ที่ดี ฮวงจุ้ย ฮวงจุ้ยที่ทำงาน เหรียญพระมหาชนก โรงเรียนอัสสัมชัญ