Interactions are a smaller detail of mobile design but can make a tremendous difference to the overall user experience of an application.
In the past few years it has become an integral part of any mobile design process. Interactions are often initiated by a tap or swipe, or other interactive action. The interaction encompasses the result of this trigger. Think tapping a floating action button on Android. The interaction might be an animation of the button icon, and multiple menu items sliding out from the top.
In this article we are going to look at 10 beautiful examples of mobile interaction design across both iOS and Android.
In this example, a unique interaction is applied to the lower left floating action button. Upon tapping, a set of four option expands within easy reach of the user’s hand.
Music App UI & Interaction
This music app incorporates some beautiful interaction animations to transition between popular music and now playing.
Event Cards iOS Interaction
This events app design furthers the beautiful user interface by adding some animations and transitional effects for browsing through the event cards. The result is visually appealing and very intuitive to use.
Jelly Button iInteraction
This more complex design includes multiple instances of interaction design. The expand icon, sliders, gender illustrations, and skill set filters all use subtle animations and transitions to present a polished user interface.
Album Radial Interaction
In one of the more novel examples, this music app uses animation to replicate the visuals from a traditional record player. The artwork rotates slowly and produces a very attractive and satisfying user interface.
This sign up form uses some subtle but highly effective transitional effects between clicking primary buttons and filling in data.
Playlist Radial Interaction
This music app uses interaction design to explore some alternative options for browsing playlists. The result is an innovative and highly visual menu which stays within reach of the user’s thumb at all times.
This mobile login screen uses some perfectly executed paper-turning animation effects as the fields are completed for each step.
Freelancing App Interaction
This interactive navigation concept revolves around a circular point at the bottom of the screen. From there, the radial menu is expanded and the individual screens are also expanded with great visual effect.
Application Process Interaction
This app shows how the most subtle of interaction designs can produce the most satisfying results. As the time slider is increases, the plant glows larger and gives the user visual feedback on their input.