9 วิธีการสร้าง 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 ) คืออ่านจากซ้ายไปขวา บนลงล่าง ดังนั้นการวางกราฟหรือเนื้อหาใด ๆ ควรจะวางสิ่งที่สำคัญที่สุดไว้ด้านบนซ้าย แล้วค่อยไล่ไปขวาจากบนลงล่าง เนื่องจากเป็นจุดที่สายตาคนจะมอง

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

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

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

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

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

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

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

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

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

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

บทส่งท้าย

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

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

• Designing for mobile (https://www2.insightsoftware.com/dashboard-design-guide/designing-for-mobile/)

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