flat-design
Design

นิ่งสงบ ไม่ได้สยบ User เสมอไป กระบวนท่าพริ้วไหวมัดใจ User

flat-design

credit : rikitanone

การใส่ animation หรือ motion ต่างๆ ผสมผสานกับ flat design ที่เรียบง่าย เป็นแนวทางการออกแบบ UI ที่กำลังได้รับความนิยมเป็นอย่างมากในปัจจุบัน เพื่อช่วยให้ User ไม่รู้สึกเบื่อกับการใช้แอปพลิเคชันแบบเดิมๆ

ในบทความนี้ เราจะมาดูกันว่า Animation เหล่านั้นมีกี่ประเภทและประกอบไปด้วยองค์ประกอบอะไรบ้าง

1. Hero Animations

splash-screen

Splash Screen (credit: cuberto)

Hero Animations ให้แปลตรงตัวเลยก็เหมือนกับ Animation หลัก ที่เป็นเสมือนตัวสร้างประสบการณ์ระหว่างแอปพลิเคชันกับ User เปรียบเสมือน Branding ของแอปเลยก็ว่าได้

flight-attendant

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

การที่ User กำลังรอ Loading จะเข้าไปใช้แอปพลิเคชัน Animation ในหน้า Splash Screen ก็สามารถสร้างประสบการณ์แรกเข้าที่น่าตื่นตาตื่นใจให้กับ User ได้

2. Micro Interactions

 

tcaster-loading-animation

credit : TCASter by Skooldio

Micro Interactions เป็นส่วนประกอบเล็กๆ ที่ทำให้แอปไม่แข็งทื่อ สร้างความสนุกสนานให้กับการใช้งาน

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

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

3. Visual Feedback

visual-feedback

credit: zeeyoung

Visual Feedback เป็นการตอบสนองจากการกด ปัด ลาก ดึงหรืออะไรก็ตามที่ User ทำกับแอปของเรา แล้ว Interface มีการตอบสนองกลับ เช่น ปุ่มเปลี่ยนสี ไอคอนเปลี่ยนขนาด หรือหน้าจอสไลด์เข้ามา เป็นต้น

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

ตัวอย่างของ Visual Feedback แบบต่างๆ

visualfeedback-example

การเคลื่อนไหวที่ตอบสนองการเปลี่ยนผ่านระหว่างหน้าต่างๆ ในแอป (credit: Christophekerebel)

animated-component-prioritized

การเคลื่อนไหวของส่วนประกอบต่างๆ ตามลำดับความสำคัญ (credit : Vitaly Rubtsov)

play-pause-animated

การเปลี่ยนแปลงฟังก์ชันของปุ่มหลังถูกกด เช่น ปุ่ม Play กดแล้วกลายเป็น Pause (credit : tamaskojo)

ไม่ใช่แค่เท่ แต่ feel good

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

อ้างอิง

ธนนท์ วงษ์ประยูร
ChulaArch81(ID), YWC#14, Designer at Skooldio

    You may also like

    ui-design-Cover
    Design

    ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

    สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...
    psychology ux ui blog cover
    Design

    หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

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

    More in:Design

    Business

    ทำความรู้จัก Design Thinking – สกิลมาแรงที่บริษัทชั้นนำทั่วโลกกำลังมองหา

    Design Thinking ไม่ใช่แค่ชื่อวิชาในคลาสเรียนของเด็กออกแบบ แต่เป็นสกิลที่กำลังเป็นที่ต้องการของบริษัทชั้นนำในหลายประเทศทั่วโลก เช่น Apple, Google , Microsoft, Tesla หรือ Startup ไทยอย่าง Bitkub อีกด้วย ...
    Business

    วิธีสร้าง Pitch แบบโอมากาเสะ – ด้วย Storytelling Framework

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

    ทำ Data Visualization ให้เวิร์ก – กับ 9 แหล่งความรู้ที่มือโปรแนะนำ

    แนะนำ 9 แหล่งความรู้อัปสกิล ซึ่งสรุปจากไอเดียของ 4 Speakers ผู้เชี่ยวชาญในวงการ Data Visualization ที่ไปพูดคุยใน Skooldio Live ตอน The Power ...
    Design

    Motion กับการออกแบบ UX ตามหลักจิตวิทยาการออกแบบ และการทำงานในสมองของ User

    Table of ContentsWhy Motion?ส่วนแรกคือประโยชน์ที่มีต่อสมองของ Userนอกจากจะทำงานกับสมองแล้ว Motion ยังทำงานกับจิตใจของมนุษย์อีกด้วย Why Motion? ทำไม UX/UI Designer ควรให้ความสำคัญกับการนำ Motion Design ...

    Comments are closed.