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

    UX Writing คืออะไร
    Design

    ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

    UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
    Behavioural Science คืออะไร
    Business

    Behavioural Science คืออะไร มารู้จักกับเครื่องมือออกแบบพฤติกรรมกันดีกว่า

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

    More in:Design

    Web Design Font Pairing Design

    เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

    หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...
    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 ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...
    Business

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

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

    Comments are closed.