Life in Motion: A Guide to Animating Mobile Data Visualizations

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

หากต้องการทราบปริมาณข้อมูลที่มีอยู่ อย่ามองข้ามรายงานประจำปีของนักออกแบบ Nicholas Felton ที่สร้างขึ้นจากข้อมูลส่วนบุคคลของเขาเอง ด้วยข้อมูลมากมายที่ปลายนิ้วของคุณ ส่วนที่ยากก็คือการทำความเข้าใจมัน

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

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

ประโยชน์ของการสร้างภาพข้อมูลมือถือแบบเคลื่อนไหว

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

การช่วยให้ผู้ใช้รับรู้แนวโน้มและการเปลี่ยนแปลงเป็นข้อได้เปรียบหลักของการใช้การเคลื่อนไหวในการสร้างภาพข้อมูล Hans Rosling นักวิชาการผู้ล่วงลับเป็นที่รู้จักจากแอนิเมชั่นที่เขาวางแผนข้อมูลอายุขัยและรายได้เพื่อแสดงการเปลี่ยนแปลงในด้านสุขภาพและความมั่งคั่งในหลายสิบประเทศตลอดหลายทศวรรษ เป็นแอนิเมชั่นที่น่าดึงดูดซึ่งชี้แจงแนวโน้มเมื่อเวลาผ่านไป และต่อต้านการรับรู้ทั่วไปเกี่ยวกับการพัฒนาระดับโลก

การวิจัยชี้ให้เห็นว่าแผนภูมิคงที่แบบเคลื่อนไหวสามารถปรับปรุงการรับรู้แบบกราฟิกและเพิ่มความสนใจของผู้ดูได้ แทนที่จะแสดงแผนภูมิทั้งหมดพร้อมกัน ตัวอย่างเช่น องค์ประกอบสามารถป้อนด้วยความเร็วที่แตกต่างกัน เพื่อไม่ให้ข้อมูลมากเกินไปกับผู้ดู การเคลื่อนไหว “ช่วยในการแสดงหรือปรับปรุงลำดับชั้นภาพขององค์ประกอบ หรือการวางแนวของแกนและวิธีการแสดงข้อมูล” Tetiana Donska นักออกแบบ UI/UX ในลอนดอนในเครือข่าย Toptal กล่าว

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

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

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

เทคนิคแอนิเมชั่นและการแสดงข้อมูลสำหรับมือถือ

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

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

การเปลี่ยนแปลงมูลค่า

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

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

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

การค่อยๆ เปลี่ยน ออฟเซ็ต และการหน่วงเวลา

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

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

การเลี้ยงลูก

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

การเลี้ยงดูบุตรเป็นวิธีที่มีประสิทธิภาพในการเพิ่มการโต้ตอบและสร้างลำดับชั้น

ซูม

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

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

ข้อผิดพลาดในการออกแบบการเคลื่อนไหวที่ควรหลีกเลี่ยง

Edward Tufte ผู้ซึ่งให้เครดิตกับการเขียนหนังสือเกี่ยวกับการสร้างภาพข้อมูลสมัยใหม่อย่างแท้จริง มีคติพจน์ง่ายๆ ที่ว่า “เหนือสิ่งอื่นใด แสดงข้อมูล”

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

บนมือถือ ซึ่งผู้ใช้หน้าจออาจมีแนวโน้มที่จะฟุ้งซ่าน ส่วนที่เคลื่อนไหวมากเกินไปในการแสดงข้อมูลเป็นภาพอาจล้นหลาม

“ด้วยอุปกรณ์พกพา คุณมีฟอร์มแฟคเตอร์ขนาดเล็กที่ต้องการการโฟกัสอยู่แล้ว” Darrell Estabrook ดีไซเนอร์ผู้มีประสบการณ์ซึ่งเข้าร่วมเครือข่ายของ Toptal ในปี 2019 กล่าว สำหรับเวิร์กโฟลว์แบบเคลื่อนที่ใดๆ ก็ตาม หากไม่มีขั้นตอนที่ออกแบบมาอย่างดีและแยกกัน "ประเภทผู้ใช้นั้นผิดพลาด"

Estabrook เสริมว่า: "สำหรับการแสดงข้อมูลทั้งหมด คุณต้องถามว่าคุณกำลังให้ข้อมูลอะไรกับผู้ใช้เพื่อให้พวกเขาสามารถตัดสินใจในครั้งต่อไป ... กดปุ่มหรือเขียนอีเมลหรือเจาะลึกลงไป คุณต้องทำอะไรเพื่อให้ [ข้อมูล] นั้นแก่พวกเขา”

คุณสามารถออกแบบการแสดงภาพข้อมูลมือถือที่เน้นและมีประสิทธิภาพโดยหลีกเลี่ยงข้อผิดพลาดเหล่านี้:

ภาพที่เน้นทรัพยากรซึ่งไม่ได้เพิ่มมูลค่ามากนัก

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

แอนิเมชั่นฉูดฉาดหรือฟุ่มเฟือย

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

ภาพเชิงโต้ตอบสุดเหวี่ยง

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

รูปแบบที่ไม่สอดคล้องกัน

การแสดงภาพข้อมูลควรสอดคล้องกับสไตล์และฟังก์ชันการทำงานโดยรวมของแอปพลิเคชัน ซึ่ง Apple อ้างถึงใน Human Interface Guidelines ว่าเป็นความสมบูรณ์ด้านสุนทรียภาพ

Akinpelu นักออกแบบ UX/UI จากประเทศไนจีเรีย ระบุว่า รักษาความสอดคล้องของโวหาร “ในรูปแบบการเปลี่ยนภาพที่คุณใช้ ประเภทของแอนิเมชั่น การผสมสี” จะช่วยให้ผู้ใช้นำทางชุดข้อมูลได้

ก้าวทันข้อมูลที่เพิ่มขึ้น

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

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

อ่านเพิ่มเติมในบล็อก Toptal Design

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