We’ve made it through the first month of summer, and it certainly is different than we expected due to coronavirus. But creatives have found a way to find joy and inspiration nonetheless. This month we bring you five of the best mobile interaction designs that we encountered. We hope that these interactions will inspire projects you’re working on, as we could all use a little extra creative juice during these strange times. Many of the designs we chose this month focus on the fine details that some overlook in mobile app design. Let’s dig in!
1. Tap Bar Animation by Anton Zaderaka for Easy Riders
Most tab bars have become quite basic: they include a handful of icons that change color or otherwise denote which one you have selected. Anton takes the classic tab bar in a different direction and makes it abundantly clear which section you’re in. His approach is almost like a toggle: with the icon sliding out to the left or right when selected. This expansion of the icon also adds a button-shaped shadow around the selected icon and spells out what it stands for.
Source: Dribbble
2. Bookmark – Icon Animation by Yup Nguyen
This is another microinteraction that turns an everyday motion into a much more creative process. As mobile and web users, we’re very used to bookmarking content or products to go back to at a later time. But this process is typically very simple and just involves the outlined bookmark filling in with color. Yup approaches it from a literal angle and makes the bookmark seem almost like a flag rolling out from top to bottom. Choosing to bookmark something sends a black outlined flag back up to the top and rolls out a fully colored in flag in its place. Similarly, undoing the bookmark sends the colored flag back to the top and rolls the outlined bookmark out to replace it.
Source: Dribbble
Adding products to your online shopping cart has become an engrained action, but the process is typically yawn-inducing. Aaron rethinks the add to cart interaction so that it is much more animated. In his version, tapping the add to cart button makes the words vanish and moves in a liquid way to make the product appear above the button and then drop down into the cart. Next, the cart changes color gains a red checkmark to show that the item has been added, and zooms off the button (as if a person in a hurry were pushing it toward the check stand). While it’s unlikely that shoppers will want to wait the extra seconds for items to get into their online shopping cart with this extra animation, it is still an interesting way to think of more creative approaches to the online shopping experience.
Source: Dribbble
4. Card Swipe Microinteraction by Mingg for Interactive Labs
Healthy habits don’t happen overnight. Whether you need to exercise more, drink more water, or rethink your diet, there are many mobile apps out there to help you reach your goals. This app concept is a fresh take on building healthy habits with nudges from nutritionists. Near the top of the screen, it features a calendar to help you keep track of your daily progress. It has cards below that feature your specific goals and which days of the week you accomplished them. Swiping the card to the bottom left of the screen indicates that you’ll tackle that goal later while swiping to the bottom right means you’ve completed it. Lastly, you have the chance to chat with a nutritionist toward the bottom of the screen to ask questions and get motivated.
Source: Dribbble
5. Audiobook App Design by Khonok Lee
This audiobook mobile app concept flips the typical design on its head. The books you are listening to have their own cards that show how much you have completed. Swiping to the left brings up the next book. And a very surprising mobile interaction design is being able to swipe left on the book cover to see the text that the audiobook is currently covering. Tapping on certain sentences in the text brings up comment boxes so that the reader can give their opinion and see what others thought by swiping to the left. After reviewing the other comments, a quick right swipe exits out of the comments and takes you back the book’s text.
Source: Dribbble
That’s all for July but be sure to check out last month’s edition, featuring the best mobile interaction designs of June 2020.
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.
