Taking too long? Close loading screen.

9 วิธีการสร้าง Mobile Friendly Dashboard ให้ใช้งานง่าย

Mar 2, 2023
Mobile Friendly Dashboard
Mobile Friendly Dashboard

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

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

แล้วแดชบอร์ดในคอมพิวเตอร์ต่างจากในโทรศัพท์มือถืออย่างไร

ไม่สามารถปฏิเสธได้เลยว่าจุดประสงค์ของแดชบอร์ดสำหรับหน้าจอคอมพิวเตอร์ และแดชบอร์ดสำหรับโทรศัพท์มือถือนั้นแตกต่างกัน การใช้งานในหน้าจอคอมพิวเตอร์อาจถูกออกแบบให้แสดงผลในรูปแบบของภาพรวมที่มีปุ่มคัดกรองผล (Filter) หรือมีกราฟซับซ้อนจำนวนมากสำหรับเหล่าผู้บริหาร ในขณะที่แดชบอร์ดสำหรับโทรศัพท์มือถืออาจถูกใช้โดยพนักงานให้ส่งอีเมล์หรือการแจ้งเตือนเท่านั้น

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

ดังนั้น ขณะออกแบบแดชบอร์ดสำหรับโทรศัพท์มือถือจึงมีข้อพิจารณาดังต่อไปนี้

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

1. การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ (Be Responsive)

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

ไม่ว่าจะเป็นอุปกรณ์ใด ก็สามารถตอบสนองได้เป็นอย่างดี

2. การทำความเข้าใจผู้ใช้ (Know Your Users)

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

3. น้อยแต่มาก (Mess with Less)

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

ลดจำนวนกราฟเหลือแต่ที่สำคัญ
จำนวนกราฟมีส่วนช่วยเน้นองค์ประกอบที่สำคัญ

4. การตามสายตา (Follow the eyes)

การจัดวางกราฟเองก็เป็นอีกเรื่องที่สำคัญในการทำแดชบอร์ดเช่นกัน โดยปกติคนจะอ่านเนื้อหาในรูปแบบตัว Z ( Z-Shaped pattern ) คืออ่านจากซ้ายไปขวา บนลงล่าง ดังนั้นการวางกราฟหรือเนื้อหาใด ๆ ควรจะวางสิ่งที่สำคัญที่สุดไว้ด้านบนซ้าย แล้วค่อยไล่ไปขวาจากบนลงล่าง เนื่องจากเป็นจุดที่สายตาคนจะมอง

Z - Shaped Pattern
Z – Shaped Pattern

5. การออกแบบที่รองรับการกดเลือก (Design for the “Fat Finger”)

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

อย่าใช้องค์ประกอบที่ซ้อน หรือวางติดกันจนเกินไป
หลีกเลี่ยงการใช้องค์ประกอบที่ทับซ้อนกัน

6. สร้างองค์ประกอบที่ตัดกัน (Apply Contrast)

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

เลือกสีที่ตัดกันเพื่อเน้นองค์ประกอบ

7. ออกแบบงานให้มีความสม่ำเสมอ (Stay Consistent)

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

เลือกใช้องค์ประกอบที่สม่ำเสมอ
คงความสม่ำเสมอ

8. สร้างการคัดกรองข้อมูล (Build in Parameterization)

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

เลือกใช้การคัดกรองเพื่อให้ใช้งานสะดวกยิ่งขึ้น
ใช้การคัดกรอง (Filter) เพื่อให้การใช้งานสะดวกยิ่งขึ้น

9. แสดงเฉพาะส่วนที่สำคัญ (Drill with Importance)

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

บทส่งท้าย

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

เอกสารอ้างอิง

แปลและเรียบเรียงโดย ชนิกานต์ วิทยถาวรวงศ์
ตรวจทานและปรับปรุงโดย นววิทย์ พงศ์อนันต์

Chanikan Withayatawornwong

ไม่พบข้อมูลตำเเหน่ง

Navavit Ponganan

Editor-in-Chief at BigData.go.th and Senior Data Scientist at Big Data Institute (Public Organization), BDI

Sign up to join Big Data Community Thailand

Make comments, write articles, and contribute to our community.