Top 5 Mobile Interaction Designs of January 2022

With January coming to a close soon, it’s hard to imagine that we’re almost a full month into the new year. While we wonder how exactly that happened, designers have been busy cranking out mobile interaction designs that made us do a double-take. This month we bring you the mobile interactions that utilize video, cards, and augmented reality in novel ways.

1. Music Learning by tubik UX for tubik

The mobile interaction design offers up fresh songs guitar players might want to learn by scrolling down the “discover” screen to explore trending songs by difficulty, as well as a grid of brightly colored genre cards to tap into. Just above the genres is a section showing the user’s repertoire, with three groups of songs: favorites, recommended, and popular, which the user can swipe through to the left. Alongside the card title and number of pieces in that section is an image that offers a great movement that shows tubik’s attention to detail. Scrolling to the left to explore the next card in this section sends the previous down and to the left, enabling the next card to take its place. Initially, the image of the guitar player is in line with the top of the card, then as it settles into place on the screen, the image jumps up to occupy some of the white space, in line with the section heading.

2. Recycling App by Dmitry Lauretsky for Ronas IT | UI/UX Team

With different recycling policies based on the city you’re in, wouldn’t it be great if you could scan an item you’re not sure about and understand into which bin it should go? That’s what got us excited about the potential of this mobile interaction design. It rewards users for properly disposing of waste. It offers a very minimal design with a search bar up top and a rewards system card that takes up most of the screen. Along the bottom of the screen are three icons to help the user get back to the home screen, scan, and determine their location. Tapping on the scan icon takes the user to a machine learning-enabled scanner that determines the garbage. During the scanning process, a cursor moves up and down the area, it’s scanning to show that it is working. Similarly, a thin status bar along the bottom becomes increasingly green as the algorithm completes its work.

3. Gifts Store App by Purrweb UI/UX Studio

The winter holidays might be over, but Valentine’s Day and more are on the way, and this mobile interaction design aims to help. The home screen allows users to search for the gift they are considering, or, if they need some inspiration, the user can tap one of the holiday buttons below. The button shrinks temporarily as a UX trick to show that it is being pressed. Then the user is whisked away to a discovery page. The button stays put as the transition occurs, but the top of the screen is replaced with festive streamer decorations, and the bottom of the screen populates with images of gifts to scroll through, complete with prices, product titles, the ability to “like,” and a button to add it to cart. Finally, tapping on the snow globe gift option brings the user to the product page and gives it a delightful shake to add a little whimsy to the mobile experience.

4. ColdnBrew by Azie Melasari for Odama

Coffee has become a mixture of science and art. This mobile interaction design respects the seriousness of coffee lovers worldwide and enables them to buy high-end coffee machines. The app entices the user to swipe through product offerings that expand and contract as they go through them. Tapping on a particular coffee machine product card expands the image to take over the top of the screen. Then price, product name, a button to add to cart, and full product information popular below. Swiping up continues the product information and a handy video for enthusiasts to watch. We especially like it when a user taps to view the video, it matches their screen orientation instead of making the user shift to landscape mode.

5. DIOR AR (Makeup) by Nasir Uddin for Musemind

This photo editing and skincare app concept lets users try on makeup using AR filters and even suggests skincare suggestions based on what it detects from your photos. Taking a photo with the app brings up bright shapes across your face to pinpoint any blemishes or other issues you might have. There is a legend below the image to highlight the severity of issues, and a quick swipe up at the bottom of the screen brings up suggested products for your unique skin. At that point, the app switches to look much more like the average e-commerce experience with the ability to learn more about products and buy them on Amazon within the existing mobile interface. The mobile interaction design even offers a reporting capability to understand skin health over the time with graphs and product recommendations to improve scores.

That’s all for January but be sure to check out last month’s edition, featuring the best mobile interaction designs of December 2021.

Feeling inspired? Proto.io helps you bring your idea to life in no time, with no coding skills required. It’s ideal for UX designers, entrepreneurs, product managers, marketers, students, and anyone with a great idea. Sign up for a free 15-day trial to start building your first prototype today!

Originally published at https://blog.proto.io on January 26, 2022.

--

--

--

Build high-fidelity fully interactive mobile app prototypes quickly. No coding required. Get a 15-day free trial at: https://proto.io/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

3 Things to Consider When Choosing Between a Template-Based or Custom-Built Website

computer with website mockup plan on screen, desk with coffee, keyboard, and post it notes underneath

My experience with the Google UX Certificate Course 2 of 7: Empathize, Define, and Ideate

Brown Planks 07 pbr texture

Building apps for everyone: discover why inclusivity and accessibility truly matter

Part 3 — Ways to communicate multidimensional ideas

The secret heroes of UX Design

Perfect Roadmap slides to build your 2020 strategy!

IS THAT VEGAN? AN INSIDER’S GUIDE TO VEGAN INTERIOR DESIGN

A white and grey cat sitting on top of pink floral bedding with pink and red throw pillows.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Proto.io

Proto.io

Build high-fidelity fully interactive mobile app prototypes quickly. No coding required. Get a 15-day free trial at: https://proto.io/

More from Medium

Top 5 Mobile Interaction Designs of February 2022

Alternative to Figma, Sketch, and Adobe XD: comparing Lunacy to TOP-3 graphic editors

Great Adobe XD Plugins in 2022

Jakobs Neilson 10 heuristic laws of user interface design