วิธีผสานการออกแบบการเคลื่อนไหวในเวิร์กโฟลว์ UX

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

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

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• บทแนะนำกราฟิกเคลื่อนไหวขั้นสูง Round-Up
• ติดตั้ง After Effects ลงในเวิร์กโฟลว์ UX
• ศิลปะแห่งการออกแบบชื่อภาพยนตร์ตลอดประวัติศาสตร์ภาพยนตร์
• การสร้างแอนิเมชั่นขั้นสูงใน Photoshop
  

เมื่อต้องการพิจารณาแอนิเมชั่น

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

เมื่อพูดคุยกับผู้ใช้ คุณอาจได้ยินข้อเสนอแนะเช่น:

• “ไม่รู้จะโฟกัสที่ไหนดี”
• “อะไรที่สำคัญที่สุดที่นี่?”
• “ฉันไม่ต้องการที่จะใช้เครื่องมือนี้”
• “ฉันจะรู้ได้ยังไงว่าต้องทำยังไงต่อไป”
• “ฉันจะรู้ได้อย่างไรว่าฉันทำงานเสร็จแล้ว”
• “ฉันไม่เข้าใจว่าข้อมูลนี้บอกอะไรฉัน”

คำพูดเช่นนี้อาจเผยให้เห็นโอกาสในการใช้การเคลื่อนไหวเพื่อยกระดับประสบการณ์

รับซื้อจากทีมงาน

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

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

วิธีจัดแอนิเมชั่นให้ตรงกับความต้องการของผู้ใช้

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

หน้าที่หลักของแอนิเมชั่น

แอนิเมชั่นมีหน้าที่ดังต่อไปนี้:

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

เมทริกซ์นี้แสดงวิธีการแมปผลตอบรับการวิจัยของผู้ใช้กับฟังก์ชันแอนิเมชัน:

“แอนิเมชั่น UX มีพลังในการตอบสนองความต้องการของผู้ใช้ทั่วไป เพื่อช่วยให้ผู้คนบรรลุเป้าหมาย เมทริกซ์นี้จัดแนวข้อเสนอแนะการวิจัยผู้ใช้ตัวอย่าง (บนสุด) กับฟังก์ชันแอนิเมชั่น (ด้านข้าง)

เมื่อจัดลำดับความสำคัญด้วยวิธีนี้ จะแสดงให้เห็นว่าแอนิเมชั่นสามารถเป็นเครื่องมือในการปรับปรุง UX เป็นหลักได้อย่างไร และไม่ใช่วิธีใหม่ในการสร้างความน่าดึงดูดใจ”

— มาร์ค ดิ ซิอุลโล่

วิธีการรวมแอนิเมชั่นเข้ากับเวิร์กโฟลว์ UX

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

ค้นพบและสำรวจ

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

• วิจัย บริโภคและทำความคุ้นเคยกับข้อมูลที่มีอยู่ทั้งหมดเกี่ยวกับกลุ่มเป้าหมายของคุณ นี่อาจเป็นสิ่งประดิษฐ์ เช่น ตัวตน แผนที่การเดินทางของลูกค้า การวิจัยผู้ใช้ แนวทางการสร้างแบรนด์ คู่มือสไตล์ ฯลฯ
• จัดตำแหน่ง ตรวจสอบให้แน่ใจว่าภาพเคลื่อนไหวของคุณตอบสนองความต้องการและเป้าหมายเฉพาะของผู้ใช้ เมื่อเป็นไปได้ ให้ปรับฟังก์ชันแอนิเมชั่นที่คุณเสนอให้สอดคล้องกับความคิดเห็นของผู้ใช้ที่เฉพาะเจาะจง (ตามที่แสดงในแผนภูมิด้านบน) และแสดงให้เห็นว่าฟังก์ชันดังกล่าวจะช่วยเพิ่มความสามารถของผู้ใช้ในการบรรลุเป้าหมายได้อย่างไร
• สำรวจ ใช้เวลาในการสำรวจแหล่งที่มาต่างๆ ของแรงบันดาลใจที่แสดงภาพเคลื่อนไหว มีเว็บไซต์พอร์ตโฟลิโอมากมาย เช่น Dribbble, Behance และ CodePen ที่ซึ่งคุณสามารถหาตัวอย่างได้มากมาย
• สื่อสาร แบ่งปันความตั้งใจของคุณตั้งแต่เนิ่นๆ กับทีมพัฒนาและลูกค้าของคุณ บอกให้พวกเขารู้ว่าคุณกำลังพิจารณาวิธีแก้ปัญหาที่ต้องการการเคลื่อนไหว เตรียมตัวให้พร้อมด้วยผลลัพธ์ของการค้นคว้าและจัดแนวความคิดของคุณให้เข้ากับความต้องการและเป้าหมายของผู้ใช้ การทำคนเดียวนั้นท้าทายกว่า ทำงานร่วมกับนักพัฒนาของคุณ นักเทคโนโลยีสามารถขยายสิ่งที่เป็นไปได้ การสื่อสารตั้งแต่เนิ่นๆ จะช่วยลดโอกาสที่ไอเดียจะถูกโจมตีก่อนเวลาอันควร

การออกแบบและสตอรี่บอร์ด

• ส เก็ตช์ เช่นเดียวกับขั้นตอนการออกแบบใดๆ จุดเริ่มต้นที่ดีที่สุดคือการใช้กระดาษ ไวท์บอร์ด และ/หรือแอปวาดภาพ สื่อนี้ให้น้ำที่สร้างสรรค์ไหลซ้ำๆ อย่างไม่ถูกยับยั้ง คุณจะต้องการ:
  • แผ่นกระดาษหรือสมุดบันทึก (เทมเพลตกระดานเรื่องราวเหมาะ);
  • ไวท์บอร์ด;
  • โปรแกรมวาดภาพหรือแอพ (SketchBook Pro, Mischief, Photoshop);
  • คะแนนโบนัสหากคุณใช้จอแสดงผลปากกา (สไตลัส) หรือแท็บเล็ตปากกา
• กระดานเรื่องราว เมื่อคุณมีความคิดและความคิดบางอย่างที่กำลังดำเนินอยู่ ให้สร้างกระดานเรื่องราวเกี่ยวกับสถานะสำคัญของแอนิเมชั่นของคุณ ใช้คำอธิบายประกอบง่ายๆ ในการมองเห็นโฟลว์ นี่เป็นวิธีที่มีประสิทธิภาพในการสื่อสารความคิดของคุณกับผู้อื่นตั้งแต่เริ่มต้น
• แชร์ ภาพสเก็ตช์และสตอรีบอร์ดเป็นเครื่องมือที่ยอดเยี่ยมในการรับคำติชมจากทีมของคุณตั้งแต่เนิ่นๆ อย่าอายที่จะแชร์ภาพสเก็ตช์และสตอรี่บอร์ดของคุณ สิ่งเหล่านี้เป็นเครื่องมือที่ยอดเยี่ยมในการทำให้ทีมของคุณเข้าใจสิ่งที่คุณวางแผนจะสร้างและรวบรวมข้อมูลเชิงลึกอันมีค่าในการทำงานร่วมกัน
• ตัดสินใจ ตามเวลาที่มีอยู่ ตัดสินใจว่าจะต้องสร้างต้นแบบอย่างไร และแอนิเมชั่นของคุณจะถูกตรวจสอบและ/หรือทดสอบโดยผู้ใช้อย่างไร จากนั้น คุณจะต้องเลือกแนวทางที่เหมาะสมในการสร้างต้นแบบของคุณ

การสร้างต้นแบบแอนิเมชั่น

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

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

การเลือกว่าจะใช้ แอปพลิเคชันต้นแบบ หรือสร้าง ต้นแบบที่มีรหัส มีดังต่อไปนี้:

• ต้องใช้ความเที่ยงตรงมากเพียงใดในการอธิบายการโต้ตอบ
• มีเวลาเท่าไร? (เวลาเท่ากับต้นทุน คุณมีเวลาเรียนรู้เครื่องมือใหม่หรือไม่)
• เครื่องมือหรือแนวทางใดที่คุณสบายใจที่สุดในปัจจุบัน
• การเคลื่อนไหวซับซ้อนหรือซับซ้อนเพียงใด?

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

แอพพลิเคชั่นสำหรับการสร้างต้นแบบ

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

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

ต่อไปนี้คือรายการแอปพลิเคชันการสร้างต้นแบบยอดนิยมสำหรับแอนิเมชั่น UX:

• Adobe Photoshop ด้วยการใช้ไทม์ไลน์ คอมพ์ที่เริ่มต้นในแคนวาส Photoshop สามารถแปลงเป็นแอนิเมชั่นเฟรมได้อย่างง่ายดาย Photoshop มีประโยชน์มากสำหรับการสำรวจการเคลื่อนไหวนอกเหนือจากคอมพ์ที่มีอยู่
• Adobe After Effects เครื่องมือนี้เป็นขุมพลังสำหรับการสำรวจเชิงสร้างสรรค์ที่ไร้ขอบเขต อันตรายจากการใช้เครื่องมือนี้มากเกินไปคือ มันง่ายมากที่จะสร้างสิ่งที่ไม่สามารถทำได้ด้วยเทคโนโลยีส่วนหน้าในปัจจุบัน นอกเหนือจากความเสี่ยงแล้ว ควรพิจารณาว่า After Effects เหมาะสมกับเวิร์กโฟลว์ UX อย่างไร เนื่องจากเครื่องมือนี้มีการนำไปใช้อย่างสร้างสรรค์มากมาย โดยเฉพาะอย่างยิ่งสำหรับการสำรวจความเป็นไปได้ใหม่ๆ และการผลักดันซองจดหมายด้วยการเคลื่อนไหว
• ประเด็นสำคัญ ใช่ ประเด็นสำคัญ การนำเสนอแบบเล่นเองที่ใช้ประโยชน์จากคุณสมบัติ "Magic Move" เป็นวิธีที่รวดเร็วในการแสดงการโต้ตอบและการเคลื่อนไหวของ UI Thoughtbot มีภาพรวมที่ยอดเยี่ยมของแอนิเมชั่นการสร้างต้นแบบด้วย Keynote
• Adobe Edge Animate สภาพแวดล้อมนี้ช่วยให้นักออกแบบสามารถสำรวจแนวคิด UI การเคลื่อนไหวโดยใช้แอนิเมชั่นที่เหมือนคีย์เฟรม เอาต์พุตที่สร้างขึ้นนั้นอาศัยไลบรารี JavaScript ที่เป็นกรรมสิทธิ์ ซึ่งจะทำให้นักพัฒนาหลายคนมองข้ามความพร้อมในการผลิตของแอนิเมชันที่ผลิตด้วยเครื่องมือนี้
• Axure 8 (ในรุ่นเบต้า) Axure เวอร์ชันใหม่ที่น่าตื่นเต้นนี้เพิ่มรูปแบบภาพเคลื่อนไหวเพิ่มเติมด้วยตัวเลือกการค่อยๆ เปลี่ยนที่น่าสนใจมากมาย Axure ช่วยให้คุณนึกถึงการเคลื่อนไหวในช่วงแรกๆ ที่พยายามสร้าง Wireframing แอนิเมชั่นทำผ่านกิจกรรมเป็นหลัก ( onPageLoad , OnClick , OnHover , OnMouseOver เป็นต้น) และไม่รวมคีย์เฟรมใดๆ อย่างไรก็ตาม ทำให้นักออกแบบมีความคิดในลักษณะที่ทำให้พวกเขาสื่อสารกับนักพัฒนาได้ง่ายขึ้น
• InVision แอปพลิเคชั่นบนเบราว์เซอร์ที่มีการทำงานร่วมกันอย่างสูงนี้ประกอบด้วยทรานซิชันและท่าทางแบบเคลื่อนไหวมากมาย เครื่องมือสร้างต้นแบบการไหลของหน้าจอ (ซึ่งคุณสร้างต้นแบบรอบชุดหน้าจอที่เชื่อมต่อผ่านการโต้ตอบ) เหมาะอย่างยิ่งสำหรับการตั้งค่าฮอตสปอตที่คลิกได้อย่างรวดเร็วโดยไม่ซับซ้อนเกินไป การเคลื่อนไหวทั้งหมดเกิดขึ้นในเหตุการณ์การคลิกหรือการเปลี่ยนเส้นทางหน้า ดูตัวอย่างการออกแบบของคุณบนอุปกรณ์ใดก็ได้อย่างง่ายดาย มันยังรวมถึงคุณสมบัติการทดสอบผู้ใช้มือถือฟรี เพื่อให้คุณสามารถดำเนินการศึกษาผู้ใช้ของคุณภายใน InVision มีแผนที่จะรวมคุณสมบัติแอนิเมชั่นตามไทม์ไลน์เพิ่มเติมด้วย เจ๋งมาก.
• Flinto เครื่องมือสร้างต้นแบบแอปบนอุปกรณ์เคลื่อนที่สำหรับ Mac ช่วยให้คุณสามารถเชื่อมโยงหน้าจออย่างรวดเร็วและใช้การเปลี่ยนภาพเคลื่อนไหว มีคุณสมบัติการเปลี่ยนภาพเคลื่อนไหวมากมายที่ปรับแต่งได้อย่างละเอียดเพื่อให้เคลื่อนไหวได้อย่างเหมาะสม การวนซ้ำในเครื่องมือสร้างต้นแบบการไหลของหน้าจอนี้ทำได้ง่ายโดยการลากและวางหน้าจอใหม่ทับหน้าจอเก่า
• หลักการ เครื่องมือสร้างต้นแบบนี้สำหรับแอปบนอุปกรณ์เคลื่อนที่ และสำหรับ Mac ด้วย ช่วยให้คุณใช้ไทม์ไลน์เพื่อเปลี่ยนคีย์เฟรมแบบเคลื่อนไหวได้
• Proto.io แอปบนเบราว์เซอร์นี้มีความสามารถด้านแอนิเมชั่นที่ซับซ้อน ด้วยการใช้ "การโต้ตอบ" และ "สถานะ" นักออกแบบสามารถสร้างต้นแบบการเคลื่อนไหวที่ซับซ้อนและสามารถสร้างแอนิเมชั่นที่เหมือนคีย์เฟรมได้

รหัสต้นแบบ

นักออกแบบที่มีแนวโน้มทางเทคนิคมากขึ้นสามารถตัดการไล่ล่าและข้ามไปยังไลบรารีที่มีอยู่ในเฟรมเวิร์ก UI ส่วนหน้าเพื่อเริ่มกระบวนการสร้างต้นแบบ มิฉะนั้น กระบวนการส่วนนี้จะต้องได้รับความร่วมมือจากนักพัฒนา

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

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

ต่อไปนี้คือตัวอย่างเล็กๆ ของเฟรมเวิร์ก UI และไลบรารีต่างๆ ที่มีให้สำหรับการเข้ารหัสต้นแบบ UX

• ภาพเคลื่อนไหว CSS3 นี่เป็นวิธีพื้นฐานที่สุดในการเริ่มต้น ผู้สร้างแอนิเมชั่น UX ที่ต้องการสร้างโค้ดต้นแบบจำเป็นต้องมีพื้นฐานที่มั่นคงใน CSS3 และ HTML5 เพื่อทำความเข้าใจพื้นฐานวิธีการทำงานของ UI ของเว็บ
• Motion UI, ZURB ไลบรารี Sass นี้ ซึ่งเดิมใช้สำหรับ Foundation for Apps ของ ZURB จะช่วยให้คุณสร้างการเปลี่ยน CSS และภาพเคลื่อนไหวได้อย่างรวดเร็ว สร้างต้นแบบองค์ประกอบภาพเคลื่อนไหวและการเคลื่อนไหวอย่างรวดเร็วด้วยคลาสที่เรียบง่ายหรือมิกซ์อิน Sass
• Transit ไลบรารีการเปลี่ยนและการแปลง CSS แบบง่ายนี้เหมาะสำหรับผู้ที่คุ้นเคยกับ jQuery
• Velocity ไลบรารี JavaScript ที่แข็งแกร่งและมีเอกสารประกอบที่ดีกว่า ไลบรารี่นี้ได้รับการปรับแต่งเป็นพิเศษสำหรับนักออกแบบการเคลื่อนไหว
• GSAP (แพลตฟอร์มแอนิเมชั่น GreenSock) แพลตฟอร์มแอนิเมชั่นเต็มรูปแบบนี้จะทำให้เคลื่อนไหวทุกอย่างที่ JavaScript สามารถสัมผัสได้ (คุณสมบัติ CSS, ออบเจ็กต์ไลบรารีผ้าใบ, SVG, ออบเจ็กต์ทั่วไป ฯลฯ) Google แนะนำสำหรับแอนิเมชั่น JavaScript
• มีชื่อเสียง เฟรมเวิร์กแอปที่ครบครัน (สำหรับมือถือเป็นหลัก) Famous สร้างขึ้นจากเอ็นจิ้นเลย์เอาต์ 3 มิติโอเพนซอร์ส ผสานรวมกับเอ็นจิ้นแอนิเมชั่นฟิสิกส์ 3 มิติอย่างสมบูรณ์ แนวคิดเบื้องหลัง Famous คือเบราว์เซอร์ไม่เคยสร้างมาเพื่อแสดงผลแอพ — เกมถูกสร้างขึ้นเพื่อแสดงผลแอพ หากคุณต้องการกราฟิกและแอนิเมชั่นที่ราบรื่น (60 FPS) คุณจะต้องใช้การเร่งความเร็ว GPU ซึ่ง Famous ทำได้โดยการเรนเดอร์ไปยัง DOM, canvas หรือ WebGL
• Framer Framer เป็นเฟรมเวิร์กการสร้างต้นแบบที่มีในตัวและสภาพแวดล้อมการเข้ารหัส ทำงานร่วมกับ Photoshop และ Sketch แม้ว่ามันจะไม่ได้สร้างโค้ดที่พร้อมสำหรับการผลิต (และการเปลี่ยนจาก JavaScript เป็น CoffeeScript นั้นเป็นที่น่าสงสัย) แต่ก็ช่วยให้นักออกแบบแบ่งปันต้นแบบที่ให้ความรู้สึกเหมือนจริง รองรับการควบคุมการโต้ตอบและการเคลื่อนไหวด้วยท่าทางที่ละเอียด ช่วยให้นักออกแบบสามารถสื่อสารปฏิสัมพันธ์เหล่านี้กับนักพัฒนาได้อย่างแม่นยำ
• React พัฒนาโดย Facebook โดย React เป็นไลบรารี JavaScript สำหรับสร้างอินเทอร์เฟซผู้ใช้ขนาดใหญ่ ไดนามิก ขับเคลื่อนด้วยข้อมูล และพร้อมสำหรับการผลิต

ทดสอบกับผู้ใช้

นี่คือกระบวนการพื้นฐานสำหรับการทดสอบกับผู้ใช้:

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

บันทึกสุดท้าย

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

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

ด้วยแอนิเมชั่น UX ความละเอียดอ่อนคือกุญแจสำคัญ การมุ่งเน้นที่การช่วยให้ผู้ใช้บรรลุเป้าหมายเป็นสิ่งสำคัญยิ่ง

ทรัพยากร

• “แอนิเมชั่นเชิงฟังก์ชันในการออกแบบ UX” Amit Daliot จาก Smashing Magazine Daliot ให้ภาพรวมว่าแอนิเมชั่นในการออกแบบ UX เป็นเครื่องมือในการสร้างความชัดเจนและตรรกะภายในประสบการณ์อย่างไร รวมถึงตัวอย่างที่มีประโยชน์มากมาย
• “UI ของคุณไม่ใช่แอนิเมชั่นของดิสนีย์” Sophie Paxton, Medium Paxton นำเสนอข้อมูลเชิงลึกที่ดีเกี่ยวกับวิธีการหลีกเลี่ยงการสร้างแอนิเมชั่นที่ขัดขวางผู้ใช้
• Animate.css, Daniel Eden นี่คือแอนิเมชั่นสุดเจ๋ง สนุก และข้ามเบราว์เซอร์ที่คุณสามารถใช้ได้ในโปรเจ็กต์ของคุณ
• ตัวอย่างแอนิเมชั่น CodePen สนามเด็กเล่นสร้างแรงบันดาลใจของ CodePen สำหรับแอนิเมชั่น UI สามารถผ่าและแยกเพื่อสร้างแนวคิดใหม่หรือเพียงเพื่อทดลอง
• “ทำให้ SVG เคลื่อนไหวด้วย CSS” Chris Coyier, CSS-Tricks เริ่มต้นโดยใช้โค้ด SVG แบบอินไลน์ ภายใน HTML และทำให้องค์ประกอบเคลื่อนไหวผ่าน CSS
• “เวิร์กโฟลว์ของ Modern Web Designer” (วิดีโอ), Chris Coyier, CSS-Tricks แม้ว่าจะใช้เวลาสองสามปี แต่นี่ก็ยังเป็นตัวอย่างที่เกี่ยวข้องของเวิร์กโฟลว์ส่วนหน้าที่ทันสมัย
• “ตัวอย่างแอนิเมชั่น” react.rocks แกลเลอรีนี้แสดงให้เห็นถึงพลังของ React สำหรับแอนิเมชั่น