Inspiration

Top 5 Mobile Interaction Designs of June 2020

June 30, 2020

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.

Author

You might also like …

How to Become a Designer: 4 Unconventional Paths Design

How to Become a Designer: 4 Unconventional Paths

Top 5 Mobile Interaction Designs of August 2020 Inspiration

Top 5 Mobile Interaction Designs of August 2020

How Curiosity Influences the Best Startup Ideas Startups

How Curiosity Influences the Best Startup Ideas

Rapid Prototyping Tips to Get Your App to Market Faster Prototyping

Rapid Prototyping Tips to Get Your App to Market Faster

Top 5 Mobile Interaction Designs of July 2020 Design

Top 5 Mobile Interaction Designs of July 2020

How to Build a Stronger Design Portfolio Design

How to Build a Stronger Design Portfolio