micro interaction

16 Pins
 4y
Collection by
Boarding Pass Animated
Boarding Pass Animated by Cardist - Dribbble
Mobile Interactions
null
Music app UI & Interaction
I came up UI and interaction design concept for music application. Check @2x for better view.
UI Interactions of the week #64
UI Interactions of the week #64 – Muzli -Design Inspiration
UI Interactions of the week #36
UI Interactions of the week #36 — Muzli -Design Inspiration
Weekly Inspiration for Designers #90
Weekly Inspiration for Designers #90
Beautiful example of how micro interactions drive narrative. In this instance, the continuity of the 'action' element carries the user through the screen. The corresponding result of the screen build from the 'log in' action conveys relationship. When the same color reappears in the bottom right, our narrative is complete. Caveat – the Floating Action Button should animate on a few frames after the avatar photo. By having them appear simultaneously, we have erroneously equated their value. Apps, Ui Ux
Login & Home Screen
Beautiful example of how micro interactions drive narrative. In this instance, the continuity of the 'action' element carries the user through the screen. The corresponding result of the screen build from the 'log in' action conveys relationship. When the same color reappears in the bottom right, our narrative is complete. Caveat – the Floating Action Button should animate on a few frames after the avatar photo. By having them appear simultaneously, we have erroneously equated their value.
A great interaction model and another missed opportunity. Would have loved to see the photo set transition seamlessly and crisply rather than exiting and then transitioning on again. These 'double' transitions are often missed opportunities. Great reference of how a little more development time would have resulted in something 100% of the way there, rather than landing in at 90%. It's really about the craftsmanship in the narrative. Motion Graphics, Cinema 4d, Motion
Photos Animated(GIF)
A great interaction model and another missed opportunity. Would have loved to see the photo set transition seamlessly and crisply rather than exiting and then transitioning on again. These 'double' transitions are often missed opportunities. Great reference of how a little more development time would have resulted in something 100% of the way there, rather than landing in at 90%. It's really about the craftsmanship in the narrative.
Very simple and clean narrative and execution. Would have wanted to see a version where the faces come from the left/right in congruence with the interaction. However, a case can be made for a more 'slot machine' approach. Very well done and a great reference for simple, clean storytelling in the micro interaction. Wordpress, Instagram, Icon Design, Ui Animation, Rating System
Survey Concept
Very simple and clean narrative and execution. Would have wanted to see a version where the faces come from the left/right in congruence with the interaction. However, a case can be made for a more 'slot machine' approach. Very well done and a great reference for simple, clean storytelling in the micro interaction.
Very clean and fun idea and execution. Provides context and playfulness. Several missed opportunities include refining the 'gift wrapping' animation and the top card transition. In the case of the grantedly complex wrapping animation, it would have been nice to really nail this, shave a few frames, and have it feel crisp. In the case of the transition mismatch, what's missing is intent and thoughtfulness. All in all, a great reference. Mobile Design, Ideas, Smartphone, Card Ui
Gift Card
Very clean and fun idea and execution. Provides context and playfulness. Several missed opportunities include refining the 'gift wrapping' animation and the top card transition. In the case of the grantedly complex wrapping animation, it would have been nice to really nail this, shave a few frames, and have it feel crisp. In the case of the transition mismatch, what's missing is intent and thoughtfulness. All in all, a great reference.
Beautifully designed and nice clean animation. What makes this a great reference is how the narrative breaks down in the design. There is no clear utility in having the button scale up to fill the visual real estate. What separates good micro interactions from great micro interactions is a clear and consistent narrative, devoid of the unnecessary. Great reference. Application Design
Module Interaction
Beautifully designed and nice clean animation. What makes this a great reference is how the narrative breaks down in the design. There is no clear utility in having the button scale up to fill the visual real estate. What separates good micro interactions from great micro interactions is a clear and consistent narrative, devoid of the unnecessary. Great reference.
Off to a great start, this promising loader breaks it's own narrative on release of the interaction. Rather than continuing the thread, the sequence breaks down. Choosing a good clean idea and having commitment is key. Ipad, Mobile Ui
gear-powered pull-to-refresh animation
Off to a great start, this promising loader breaks it's own narrative on release of the interaction. Rather than continuing the thread, the sequence breaks down. Choosing a good clean idea and having commitment is key.
Simple and clean narrative. The icon is rotated because what the content it is responsible for is rotated. While we can debate the merits and usability of this interaction, the simplicity and cleanness of the core narrative provide quick and easy access to the mental model. User Experience Design, App Design
Guillotine Menu
Simple and clean narrative. The icon is rotated because what the content it is responsible for is rotated. While we can debate the merits and usability of this interaction, the simplicity and cleanness of the core narrative provide quick and easy access to the mental model.
Upload
In general, it is extremely difficult to transition between 3 states on a micro interaction.This is a flawless example of how to do this cleanly, crisply, with an emphasis on narrative flow. Very well done.
Great example of how prototyping in motion helps you see what doesn't work. First of all, lots of love was put into this and the core of the user experience – the masked photos – doesn't play. While 3D card flip comes across as inconsistent, the bigger issue is that nobody wants their photos cropped automatically like this. Looks cool as an animation, doesn't play in ux.
GIF Image Manipulation
Great example of how prototyping in motion helps you see what doesn't work. First of all, lots of love was put into this and the core of the user experience – the masked photos – doesn't play. While 3D card flip comes across as inconsistent, the bigger issue is that nobody wants their photos cropped automatically like this. Looks cool as an animation, doesn't play in ux.
As the bottom navigation expands, the icons on left and right are displaced. Very clean example of how a simple idea facilitates the development of mental models, in this instance, of space and relationship. Flat Design
Tab Bar Animation
As the bottom navigation expands, the icons on left and right are displaced. Very clean example of how a simple idea facilitates the development of mental models, in this instance, of space and relationship.