ในปัจจุบันโลกของเทคโนโลยีมีการออกแบบและสร้างอุปกรณ์ให้เราได้ใช้หลากหลาย ทั้ง Desktop, Tablet, Smart Phone และอื่น ๆ ซึ่งอุปกรณ์แต่ละชิ้นก็มีข้อจำกัดในการใช้งานที่แตกต่างกัน ทั้งขนาดหน้าจอ ระบบปฏิบัติการ ไปจนถึงปฏิสัมพันธ์ระหว่างผู้ใช้และอุปกรณ์ แต่เนื่องจากช่องทางออนไลน์เป็นช่องทางที่ไม่สามารถเลี่ยงได้สำหรับธุรกิจหรือองค์กรที่ต้องการเข้าถึงลูกค้ายุคใหม่ จึงเป็นหน้าที่ของผู้ออกแบบที่ต้องออกแบบประสบการณ์ที่ดีบนแพลตฟอร์มต่าง ๆ เพื่อให้ผู้ใช้สามารถเข้าถึงได้ไม่ว่าจะใช้งานบนอุปกรณ์ใดก็ตาม สรุปง่ายๆ ว่าการออกแบบ Responsive ก็คือ การออกแบบเพื่อรองรับอุปกรณ์ที่มีขนาดหน้าจอต่างกันมาก ๆ เช่น Desktop กับ Smart Phone นั่นเอง
โดยอาจแบ่งง่าย ๆ จากการตั้งคำถามว่า User Interface (UI) ของเราเป็นแบบ "เน้นอ่าน" หรือ “เน้นปฏิสัมพันธ์ระหว่างผู้ใช้กับ Interface” หลังจากที่เรารู้แล้ว เราจะรู้ว่าควรใช้ Layout ย่อ-ขยายองค์ประกอบตามหน้าจอ (Fluid Layout) หรือสามารถใช้องค์ประกอบขนาดเดียวบนแต่สามารถแสดงผลบนหน้าจอหลากหลายขนาดได้ (Responsive Layout) ซึ่งนั่นก็จะส่งผลต่อเนื่องไปยังการกำหนดขนาดของตัวหนังสือ ปุ่ม และภาพบนเฟรมด้วย
เนื่องจากผู้ใช้งานสมาร์ทโฟนจะเลือกใช้งานบน User Interface (UI) ที่เรียบง่ายและกระชับกว่า เราจึงควรเรียงลำดับความสำคัญขององค์ประกอบ เมื่อถึงเวลาที่นำมาออกแบบจะได้เลือกได้ว่าควรแสดง ซ่อน หรือเน้นองค์ประกอบใดบ้าง
ถ้าเปรียบเทียบง่าย ๆ การใส่เสื้อหลวม อย่างไรก็ง่ายกว่าใส่เสื้อคับแน่นอน เช่นเดียวกับการที่เรามีข้อมูลจำนวนหนึ่ง หากนำไปออกแบบโดยเริ่มจากเฟรมขนาดเล็กอย่างจอโทรศัพท์ก่อน จะทำให้จัดขนาดขององค์ประกอบได้ง่ายกว่า ไม่ต้องคำนึงว่าเมื่อย่อองค์ประกอบจากจอ Desktop ลงมาแล้ว องค์ประกอบจะเล็กและเบียดเสียดกันเกินไป จนผู้ใช้จะอ่านไม่ออกหรือกดไม่ติด (ทั้งนี้ขึ้นอยู่กับความถนัดของผู้ออกแบบด้วย)
ใช้ Grid System ช่วยออกแบบ จะทำให้เราวางองค์ประกอบได้สวยงามและเป็นระเบียบมากขึ้น ตัวอย่าง Grid System ที่นิยมใช้ เช่น การสร้าง Column จำนวน 4, 8, 12 เป็นโครงหลักในหน้าจอ Desktop, Tablet, Mobile ตามลำดับ ซึ่งการสร้าง Grid เปรียบเหมือนกับการสร้างโครงร่างให้กับงาน ช่วยในการกำหนดขนาด ให้ขนาดของงาน อัตราส่วน และรูปแบบออกมาในทางเดียวกันแม้แสดงผลในหน้าจอที่มีขนาดแตกต่างกัน
เนื่องจากเวลาทำงานออกแบบ นักออกแบบมักจะทำบนหน้าจอ Desktop ซึ่งมีพื้นที่การแสดงผลค่อนข้างกว้าง ทำให้เราอาจไม่เห็นภาพว่าดีไซน์ที่เราออกแบบมาเพื่ออุปกรณ์อื่น ๆ เช่น Tablet หรือ Mobile นั้นเหมาะสมแล้วจริงหรือไม่ การนำดีไซน์มาเปิดดูในอุปกรณ์นั้นจริง ๆ จะทำให้นักออกแบบสามารถตรวจสอบดีไซน์ในบริบทที่ใกล้เคียงกับการใช้งานของผู้ใช้จริงมากที่สุด
ไม่ใช่ทุกครั้งที่จะสามารถเริ่มออกแบบ Responsive ได้ตั้งแต่ต้นไปพร้อม ๆ กันทุกขนาดหน้าจอ เพราะการออกแบบ Responsive ตั้งแต่แรกนั้นอาจใช้เวลาและงบประมาณ นอกจากการออกแบบจากจอเล็กไปใหญ่ (Mobile-first Responsive) ยังมีวิธีในการการทำ Responsive อื่น ๆ อีก 3 วิธี ดังนี้
ข้อดีอื่น ๆ จากการออกแบบแบบ 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
ทีมออกแบบของ Blockfint ที่มีความเชี่ยวชาญในการวิจัย วางแผน และออกแบบ Digital Products