วิธีการใช้ Kinetic Typography เพื่อทำให้เว็บไซต์ของคุณโต้ตอบได้?

Kinetic typography หมายถึงรูปแบบของแอนิเมชั่น ที่นี่เราทำให้คำใช้งานได้จริง

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

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

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

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

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

https://dribbble.com/shots/14187210-Behance

องค์ประกอบเชิงโต้ตอบ 5 วิธีปรับปรุงประสบการณ์เว็บไซต์

ยกระดับสุนทรียภาพ

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

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

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

นี่คือสิ่งที่เว็บไซต์สแตติกเก่าที่ดีไม่สามารถทำได้

ให้คุณโดดเด่น

คุณต้องมีในสิ่งที่คนอื่นไม่มี

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

นี่คือที่ที่คุณสามารถขีดออก

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

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

ให้ผู้ใช้มีส่วนร่วม

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

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

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

ปรับปรุงลำดับชั้นของภาพ

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

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

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

ให้ความรู้ผู้ใช้

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

จากการศึกษาการตลาดเนื้อหา 93% ของนักการตลาดเชื่อว่าเนื้อหาเชิงโต้ตอบนั้น 'มีประสิทธิภาพสูงในการให้ความรู้แก่ลูกค้าที่คาดหวัง'

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

นี่คือวิธีที่ประเภทจลนศาสตร์สามารถทำให้เว็บไซต์ของคุณโต้ตอบได้

1. ทำให้เวลารอโหลดหน้าของคุณสนุกยิ่งขึ้น

https://dribbble.com/shots/6189182-Counter-01

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

แต่กิจกรรมแบบอักษรสามารถช่วยได้ที่นี่

ลองนึกถึงหน้าที่ขนาดตัวอักษรที่เปลี่ยนไปจะแจ้งให้คุณทราบว่าเหลือเวลารออีกเท่าใด

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

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

2. กระตุ้นความสนใจของผู้ใช้และคำใบ้ในขั้นตอนต่อไป

https://dribbble.com/shots/18058873-Internet-Speed-Test-App

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

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

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

https://dribbble.com/shots/17559699-Move-On-Up

3. บอกคนอื่นว่าควรเน้นอะไร

https://dribbble.com/shots/9287077-hop

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

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

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

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

https://dribbble.com/shots/13945869-My-Services

4. เตรียมผู้ใช้สำหรับการเปลี่ยนแปลงสถานะหรือการเปลี่ยนแปลง

https://dribbble.com/shots/11258557-Creative-Coding-5

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

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

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

5. เน้นคำสำคัญ วลี หรือพื้นที่ของเว็บไซต์

https://dribbble.com/shots/11138509-The-Truth-is-Worth-It

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

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

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

6. ให้ข้อเสนอแนะด้วยภาพเมื่องานเสร็จสมบูรณ์

https://dribbble.com/shots/16174668-KEEP-IT-UP

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

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

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

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

7. ช่วยกำหนดโทนของแบรนด์

https://dribbble.com/shots/17070314-SIMPLE

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

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

แม้ว่าเพียงอย่างเดียว จะไม่สามารถสร้างแบรนด์ทั้งหมดของคุณได้ แต่สามารถทำงานร่วมกับเครื่องมืออื่นๆ ได้อย่างแน่นอน

The Takeaway

มีสาม:

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