Responsive Design คืออะไร? เล่าใหม่ตั้งแต่ต้น

clock
20 January 2022

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

Responsive Design ส่งผลดีกับใครบ้าง?

  1. ผู้ใช้งาน เมื่อผู้ใช้ได้รับประสบการณ์ที่ดี มุมมองที่ผู้ใช้มีต่อผลิตภัณฑ์ก็ดีตามไปด้วย และการมอบประสบการณ์ที่ดีให้กับผู้ใช้นี้ ก็จะสามารถต่อยอดไปสู่ต่อเป้าหมายของธุรกิจหรือองค์กรได้ต่อไป
  2. ธุรกิจและองค์กร เพิ่มโอกาสให้มียอดการเข้าถึงมากขึ้น เมื่อเว็บไซต์ของเราสามารถรองรับได้หลายอุปกรณ์ จะผลดีต่อการจัดอันดับของ Search Engine เช่น Google ทำให้เรามีโอกาสไปขึ้นหน้าแรก ๆ ของ Google ได้มากขึ้น
  3. ผู้พัฒนาผลิตภัณฑ์ ง่ายต่อการแก้ไขและปรับปรุง เพราะการทำ Responsive Design จะเปลี่ยนการแก้งานจุดเดิมในหลาย ๆ ขนาดหน้าจอ ให้เป็นการแก้เพียงครั้งเดียว ก็จะส่งผลดีกับทีมผู้พัฒนาผลิตภัณฑ์ ทำให้ทีมใช้เวลาในการแก้ไขปรับปรุงไม่มาก และสามารถนำเวลาไปพัฒนาส่วนอื่น ๆ ต่อไปได้

ทำอย่างไรให้ออกแบบ Responsive ได้ดีขึ้น?

รู้ว่า User Interface (UI) ที่เราออกแบบเป็นแบบไหน

โดยอาจแบ่งง่าย ๆ จากการตั้งคำถามว่า User Interface (UI) ของเราเป็นแบบ "เน้นอ่าน" หรือ “เน้นปฏิสัมพันธ์ระหว่างผู้ใช้กับ Interface” หลังจากที่เรารู้แล้ว เราจะรู้ว่าควรใช้ Layout ย่อ-ขยายองค์ประกอบตามหน้าจอ (Fluid Layout) หรือสามารถใช้องค์ประกอบขนาดเดียวบนแต่สามารถแสดงผลบนหน้าจอหลากหลายขนาดได้ (Responsive Layout)  ซึ่งนั่นก็จะส่งผลต่อเนื่องไปยังการกำหนดขนาดของตัวหนังสือ ปุ่ม และภาพบนเฟรมด้วย

เรียงลำดับความสำคัญของข้อมูล

เนื่องจากผู้ใช้งานสมาร์ทโฟนจะเลือกใช้งานบน User Interface (UI) ที่เรียบง่ายและกระชับกว่า เราจึงควรเรียงลำดับความสำคัญขององค์ประกอบ เมื่อถึงเวลาที่นำมาออกแบบจะได้เลือกได้ว่าควรแสดง ซ่อน หรือเน้นองค์ประกอบใดบ้าง

เริ่มจากจอเล็กไปใหญ่เสมอ

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

การใช้ Grid System

ใช้ Grid System ช่วยออกแบบ จะทำให้เราวางองค์ประกอบได้สวยงามและเป็นระเบียบมากขึ้น ตัวอย่าง Grid System ที่นิยมใช้ เช่น การสร้าง Column จำนวน 4, 8, 12 เป็นโครงหลักในหน้าจอ Desktop, Tablet, Mobile ตามลำดับ ซึ่งการสร้าง Grid เปรียบเหมือนกับการสร้างโครงร่างให้กับงาน ช่วยในการกำหนดขนาด ให้ขนาดของงาน อัตราส่วน และรูปแบบออกมาในทางเดียวกันแม้แสดงผลในหน้าจอที่มีขนาดแตกต่างกัน

ลองเปิดดีไซน์ดูบนหน้าจอจริง ๆ

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

แล้วถ้าเว็บไซต์ปัจจุบันที่มีไม่ Responsive จะทำอย่างไร?

ไม่ใช่ทุกครั้งที่จะสามารถเริ่มออกแบบ Responsive ได้ตั้งแต่ต้นไปพร้อม ๆ กันทุกขนาดหน้าจอ เพราะการออกแบบ Responsive ตั้งแต่แรกนั้นอาจใช้เวลาและงบประมาณ นอกจากการออกแบบจากจอเล็กไปใหญ่ (Mobile-first Responsive) ยังมีวิธีในการการทำ Responsive อื่น ๆ อีก 3 วิธี ดังนี้

  1. Responsive Retrofitting - การนำดีไซน์เว็บเก่ามาออกแบบในขนาดอื่นเพิ่ม วิธีนี้มีข้อดี คือ ไม่ต้องออกแบบใหม่ทั้งหมด จึงทำได้เร็ว และผู้ใช้เว็บเดิมไม่ต้องปรับตัว แต่ก็ส่งผลเสีย คือ เมื่อใช้งานบนโทรศัพท์อาจโหลดข้อมูลมาแสดงผลได้ช้า เนื่องจากข้อมูลที่โหลดมามีขนาดเท่ากับใน Desktop
  2. Responsive Mobile Site – แยกเว็บสำหรับแต่ละอุปกรณ์ เช่น เว็บไซต์ facebook.com จะมีทั้งเว็บไซต์สำหรับ Desktop และสำหรับโทรศัพท์มือถือ เมื่อเราเข้าเว็บไซต์ของเฟสบุ๊ค (www.facebook.com) ผ่านโทรศัพท์มือถือ เราจะถูกนำไปที่ m.facebook.com​ ซึ่งคือ Mobile Site ของ Facebook มีข้อดีคือ มีความเสี่ยงในการเขียนโค้ดผิดน้อย แต่ก็ยังมีข้อเสียหลักๆ คือ ต้องแบกรับทั้ง 2 เว็บไซต์ในคราวเดียว ซึ่งนั่นแปลว่าจะต้องแบกรับระบบหลังบ้านและการจัดการต่าง ๆ มากกว่าการทำ Responsive Design ทีเดียวถึง 2 เท่า
  3. Piecemeal – แปลงเว็บเก่าให้กลายเป็น Responsive ทีละส่วน ทำได้ทั้งหมด 2 แบบ คือ
  • การออกแบบเพิ่มแค่บางหน้า ส่งผลดี คือ สามารถทำเฉพาะหน้าที่มีผู้เข้าถึงมาก ๆ ได้ และนำไปใช้จริงได้เร็ว
  • การออกแบบทีละส่วน การออกแบบด้วยวิธีนี้มีข้อดี คือ ผู้ใช้ไม่ต้องปรับตัวเยอะ เพราะเราสามารถทยอยเปลี่ยนทีละส่วนได้

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

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


อ้างอิง:
https://bradfrost.com/blog/post/responsive-strategy/
https://material.io/design/layout/responsive-layout-grid.html#grid-customization
https://uxplanet.org/responsive-websites-30-examples-and-5-best-practices-cd7e538af094
https://www.interaction-design.org/literature/topics/responsive-design
https://www.toptal.com/designers/responsive/responsive-design-best-practices
ภาพประกอบ:
https://storyset.com/search?q=responsive design


ติดตามบทความเกี่ยวกับการวิจัยและออกแบบได้ที่
Facebook : https://www.facebook.com/unblockdesign
Instagram : https://www.instagram.com/unblockdesign

Tags:#User Interface #Product Design #User Experience

Author
Writer: Unblock Design

ทีมออกแบบของ Blockfint ที่มีความเชี่ยวชาญในการวิจัย วางแผน และออกแบบ Digital Products


สนใจร่วมธุรกิจกับเรา?
Mailbox