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.
