With the new year (and new decade!) right around the corner, we thought we’d sneak in one more roundup of our favorite motion interaction designs. These lists are just so fun to write because each interaction we find makes us think, laugh, want to create, or maybe all three at once! Let’s jump right into the list we compiled for you.
1. Vegan Meal by Outcrowd
This app concept aims to help vegans make healthy meals by choosing the ingredients they want to use and pulling up a recipe that includes it. When swiping through the vegetables, the user can tap to view meals for the veggie of their choice. Next, potential dishes come spinning onto the screen with information on the portion size of the dish and how other users have rated it. Tapping on the desired dish enlarges the image and sends it spinning to the top right hand corner of the screen as the ingredients and instructions slowly populate from the top to the bottom of the screen.
Source: Dribbble
2. Your Activity by Outcrowd
With smartwatches and fitness trackers, it’s easier than ever to monitor how much exercise you’re getting, how much water you’re drinking, and beyond. This colorful mobile interaction design concept allows users to swipe through the different types of physical activity they’re tracking with a metric on how much they’ve accomplished that day. In the bottom section of the screen, a user can swipe through the progress for their friends who are also using the app. Tapping into the “food” category repopulates the colorful cards in the middle of the screen to display how much water and healthy foods they’ve eaten. We especially like how this mobile app concept divides the screen into three separate sections that display different information and move independently of the others.
Source: Dribbble
3. Rate Your Ride Animated by Cuberto
Let’s be honest: in 2019 we are asked to rate so many things when it comes to the app experience. “How was your ride?” “How was your order?” “Will you rate the app?” These are the questions we’re bombarded with on mobile, and it can start to become a stale experience. But, at the end of the day, mobile companies still need that crucial customer feedback. Cuberto takes a very different approach to giving feedback and makes it an enjoyable mobile moment. When a user completes a ride in this example, they are prompted to give feedback. But instead of being faced with a headshot of their driver and the option to tap the number of stars out of five, they encounter a literal face. Dragging the small button that starts in the bottom left corner towards the right gradually changes the face’s emotion from “hideous” to “good” and vice versa. As the face is morphing into the next emotion, the adjective associated with the ride also zooms into place. If all review requests were creative like this one, we all might be more inclined to give feedback more often!
Source: Dribbble
4. Quiz iOS App by Mike | Creative Mints
Trivia is all the rage in pubs across the world, but what about bringing it to the mobile experience? HQ Trivia had it’s time in the limelight (as we profiled in December 2017), but this mobile interaction design approaches mobile trivia slightly differently. It allows users to look through floating circles containing trivia categories. Tapping on one pops the first question for that category to the top of the screen, with a yellow bar at the top counting down the seconds remaining for that question—all while animations float around the bottom of the screen. Selecting the right answer fills the button in with blue and shoots the options to the right. Lastly, the correct answer reappears near the middle of the screen with a check mark tracing above it and small icons orbiting around them.
Source: Dribbble
5. Mobile Book by Dimest for Flame Studio
There’s a lot to unpack in this busy mobile interaction design. Swiping up on the main screen of the app takes you through the different books in your mobile library, complete with the cover art, genre, and status of how much you have read so far. As the user is swiping through book options, there is also a little person at the top of the screen mimicking their motions and scrolling through large books in something that looks like a lifesize rolodex. Tapping into a specific title brings the cover art shooting up to the top of the screen. Swiping up to see more of the cover reveals three icons that bounce out from behind the image to enable mobile readers to favorite, comment, or share.
Source: Dribbble
That’s all for winter but be sure to check out last season’s edition, featuring the best mobile interaction designs of fall 2019.
Feeling inspired? Proto.io lets anyone build mobile app prototypes that feel real. No coding or design skills required. Bring your ideas to life quickly! Sign up for a free 15-day trial of Proto.io today and get started on your next mobile app design.
