Several months into quarantine and social distancing, this all has begun to almost feel normal. While the summer certainly won’t be exactly how we planned, there are still many things we can do to get our spirits up. One thing we love to do here at Proto.io is to gain inspiration from designers all over the world. There are so many platforms where sharing and commenting on designs is common and we love it. This month we bring you five new mobile interaction designs to pique your creativity, even if you’re stuck inside on warm summer days.
1. Virus Tracking App — Document Scanning by Ralabsov
Contact tracing is essential to eradicate COVID-19. If people become aware that they were exposed, then they can make sure to get tested and figure out who they might have spread it to, in the event of a positive diagnosis. This mobile interaction design concept walks through the process of scanning your anonymous test results to help others who you may have come in contact with. In all, this is an effective way to understand current statistics and ways to protect yourself. As the pandemic continues, apps like these may become the norm.
Source: Dribbble
2. Food Delivery App Design by Purrweb UI
Food delivery apps have been a lifeline for those unable or unwilling to cook. This app concept shows the process of customizing a fruit bowl. Each tap of the plus sign in the top right corner of an ingredient makes it appear above the bowl and plop down on top of it (or in some cases, it doesn’t quite make it into the bowl). At the same time, the black circle that had held the plus sign transforms into a tan circle with a minus sign. This is another visual representation of the additions you’ve made to your bowl, making it easy to remove any ingredients you decide against.
Source: Dribbble
3. E-Commerce Checkout Flow by Andrea Hock
Another action that has become quite common in quarantine is online shopping. Sure, we did it a fair amount before, but when going out feels a bit too risky, our eCommerce habit got even more frequent. This mobile interaction design concept makes the payment and confirmation process more intuitive than ever. One issue we always run into is being able to go back and make a quick edit, if we know we’ve entered one number of our credit card incorrectly. With this concept, the three progress dots at the top of the screen show which step of the checkout process you’re on. As you tap on another, it turns from gray to pink, showing how close you are to completing your transaction.
Source: Dribbble
4. Bouncing Tab Bar by Aaron Iker
We rely on tab bars to communicate a lot of information and enable access to the most common sections of a smartphone or app. In this example, “home” and “settings” are two key options. The fun starts when you tap on the plus sign between those two options. The tab bar takes on a gelatinous feel as it turns to the side to become an “x.” This is our favorite part of this mobile interaction design because it is such a simple movement that completely changes the meaning of the icon from “see more” to “exit.” In addition, buttons to access photos, the camera, and files pop out of the tab bar.
Source: Dribbble
5. Physical Toggle by Fábio Oliveira
You know we like to save the best for last. We’ve gotten so used to toggles in mobile app design. We use them to change settings, opt-in or out, and more. But as we’ve grown to expect toggles, we’ve moved away from the way a 3D toggle might actually work—opting for a flat design. If there really were a sphere that moved back and forth to communicate the different states, then all toggles might look like this hyper-realistic version. While this is just one aspect of mobile interaction, we think it’s important to break down the design conventions we all subscribe to.
Source: Dribbble
That’s all for June but be sure to check out last month’s edition, featuring the best mobile interaction designs of May 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.
