6 Android App UIs That Blew Us Away

android-app-ui.png

We all know that a solid UI is key to creating an engaging and sticky app experience. Users today are surrounded by technology and have high expectations – they aren’t beginners, and can see clearly through a poor UI. 

Users want apps that are easily accessible, natural to navigate, and are pieces of visual eye candy that are a joy to interact with. When your app doesn’t deliver, you risk uninstalls or complete app abandonment. Even if you update and improve things later, users won’t be likely to give you a second chance.

Don’t let a bad UI ruin your app. Learn the elements of winning UI (with some help from our real-life Android app UI examples) and keep your users happy!

Components of Great UI

When it comes to apps, space is limited and user interactions become more focused to particular areas. The best app user interfaces are:

  • Clear and simple
  • Easy to navigate
  • Focused
  • Designed to guide users to what they’re looking for

App UI is about combining functionality with beautiful design so that navigating your app feels natural while providing a feast for the eyes.

App UI Elements to Consider 

There are quite a few factors that come into play when creating a stunning app UI, and we won’t go into too much depth here, but some of the major elements of user interface include:

  • Colors. Color choice is a very important aspect of good app UI. Use colors that are pleasing to the eye and complement each other. You may also want to implement a little color psychology to ensure that you’re using colors that fit in with the goal of your app. For example, a finance app might be inclined to use green colors reminiscent of money, while a meditation app might use shades of blue, associated with serenity. You’ll also want to consider how different hues and saturation affect the mood of a color. Choosing the right color pallet for your app is essential.
  • Contrast. Most apps prefer to use a high contrast design, which is easier to see and navigate on a small screen.
  • Branding Identity. Your app’s design should fit in with your larger brand identity and established style. However, apps also provide the opportunity to experiment with distinct branding for the app itself, so don’t be afraid to play with elements that aren’t typically found on your other brand properties.
  • Typography. When choosing your app’s typeface, you’ll want to focus on readability. Use large, clean typefaces that can easily be read on small mobile devices (usually sans-serif).
  • Navigation. Your app needs to be simple and easy to navigate. Users should be able to easily navigate to different sections of your app without feeling lost. Navigation should feel natural and not require much thought on the user’s part.
  • Feedback. Feedback lets app users know that a task has been completed. Feedback can be implemented in many different ways, including sounds, modal windows, or color changes, such as a button changing colors after it has been tapped.
  • Design Language. It’s also important that app creators keep to the design language of the operating system they are targeting. Android apps should use patterns that are common in Android, while apps designed for iOS should take advantage of unique iOS features like the long press. Make the app experience familiar for the user so that it fits within their larger phone functionality. For this reason, apps may feel significantly different depending on the device. Don’t simply copy and paste one app experience across different devices – each will need some tender fine-tuning.

6 Examples of Impressive App UIs

These Androis apps blew us away with their attractive and functional UIs – take a few tips from these apps on how to provide a beautiful user interface that keeps users coming back for more.

1. StubHub

StubHub is an app designed to help users get info and book tickets for concerts and events in their area.

UI-StubHub.png Why We Love It:

  • Contrasting Colors. StubHub uses a blue and orange color scheme, relying on two contrasting colors to bring energy to the app.
  • Category Selection Feedback. We love that tapping different music categories and musicians highlights the selections in bright orange. This makes it a bit more fun for users to browse through and tap their favorite bands and sports teams. It’s essential to make this process fun for users, since that data is then used to customize a user’s event feed, showing users the events and concerts that they’re most likely to enjoy.
  • Strong Combination of Visual and Text Elements. StubHub makes it easy for users process information about multiple events by allowing users to scroll through concerts, sports games, and festivals, letting images catch their eye. When users see something they like, the most important details are already there, with the option to easily click to see additional copy and learn more.
Key Takeaways:

#1. Use Feedback to Make User Input Fun. For many apps, collecting data on users is essential. Understanding what your users like and dislike helps you provide them with a better experience, boosting app retention and general brand love. However, some users aren’t naturally inclined to tell you their life story. In order to encourage user input, find ways to make the process more engaging through the use of fun, colorful feedback responses.

#2. Try Complementary Colors. If you’re unsure about your app color scheme, try implementing complementary colors. The high contrast between the two complementary colors can help provide a feeling of energy and catch a user’s eye. Consider if a contrasting color scheme could be used to add some pop to your app. 

2. Instacart 

Going to the grocery store can feel like an overwhelming experience, but Instacart makes the grocery shopping experience manageable.

This is done through a clean, simple design that is great at highlighting the most important elements (such as price, quantity, and the add to cart button) while subtly providing secondary information (such as nutrition information or item details, in case you didn’t know what an avocado is). 

Users can easily scroll through the app to locate different category departments, then browse or manually search for specific products.

UI-instacart.png

Why We Love It:

  • They’ve Done Their User Homework. Instacart knows that a large portion of their audience is also looking for recipes, so the Instacart app makes it easy to add ingredients to a user’s shopping cart, right from within a recipe! Integrating elements like a recipe section, with the ability to add ingredients to cart, shows that Instacart understand its audience and uses that understanding to create a winning UI.
  • Sorting By Popularity. Instacart helps users browse through hundreds upon hundreds of grocery items. To prevent users from feeling completely lost swiping through pages of artisanal cheeses and cured meats, Instacart sorts each category based on what items are most popular. This takes a tremendous burden off of users. Instead of digging through pages of giblets and tripe, users will easily find the most popular meats (like chicken breasts and ground beef) first.

Key Takeaways:

#1. Study and Track User Behavior. Think about the behavior and intent of your audience, and build your app UI to match their needs. You may also want to consider tracking your users via analytics to discover which screens and features are most popular. Then work on making those elements more visible or accessible for users.

#2. Make It Manageable. When dealing with a large number of products, it’s important to make sorting and filtering easy for users (especially when it comes to small screens). Consider how you can arrange and display products in a way that makes the most sense for your app users.

3. Peak 

Peak is a brain-training app that aims to help users improve their cognitive powers through mini games oriented around memory, focus, language, and problem solving.    

peak-ui.png  

Why We Love It:

  • Bright, Vivid Colors That Unify Categories. Peak uses vivid colors in their app, with different colors matching different brain-training categories (memory is orange, purple is language, etc).
  • Choose Your Flavor. Users are encouraged to tap from several selection options to choose their personal brain training goals, allowing the app to customize games and training to meet the user’s individual objectives.
  • Circle Indicators Show Onboarding Progress. Peak uses small circles at the bottom of the screen to indicate how many in-app explanation screens users can expect to run through in the app onboarding tutorial.

Key Takeaways:

#1. Use Progress Indicators For Onboarding Tutorials. Use small circles or icons to indicate a user’s progress within a given set of screens. With paper guides or introduction manuals, users get a natural sense of their progress due to the tactile nature of the guide. This physical element disappears in the translation to apps, and screen progress indicators help provide this missing place marker for users.

#2. Use Consistent Coloring to Group Related Sections. Think about how color can be used to provide structure and grouping within your app.

4. Medium

Medium is a popular social storytelling app that allows users to write and read moving stories about topics close to their heart.

UI-medium.png

Why We Love It:

  • Nice Navigation Menu. Medium does a nice job of utilizing multiple navigation menus. The main menu sits at the top of the app, making the most important app actions easily accessible (involving finding new content and checking notifications). Other, less common activities, sit in the second navigation bar, which slides out from the left when users tap the lined icon in the upper left corner (which serves as the universal menu icon).
  • A Small Splash of Green. The green accent in Medium provides just enough color to drive appeal without overshadowing the text-based stories.
  • Shows Estimated Reading Time. Medium shows the expected reading time for different articles, helping users choose different stories depending on the time at their disposal - are you in the mood for a Reader’s Digest piece or an Anna Karenna?

Key Takeaways:

#1. Sacrifice For The Screen. If you really want your content to be readable on mobile devices, you’ll need to sacrifice traditional web elements (large photographs, long paragraphs, share button sidebars) to improve readability. Keep distractions to a minimum and stick with a clean design.

#2. A Touch of Color Can Be Enough. You don’t need huge swatches of bright color to capture interest, as demonstrated by Medium’s small touches of green in just the right doses.

#3. Know How Users Navigate. Creating a smart, user-friendly navigation menu is essential for helping users get around your app and find the content they want. Think about primary and secondary activities users might conduct in your app, and use that action hierarchy to inform your navigation structure.

#4. Show Users What To Expect. Use small indicators to help app users know what to expect in your app. This can be done by showing expected reading time for articles, progress bars, and other indicators.

5. Drizly

Drizly is an app that lets users order alcohol online and get their bundles of booze delivered to their doorstep.

UI-drizly.png

Why We Love It:

  • Bear & Branding. Drizly incorporates their bear logo and their bright red coloring throughout the app, staying cohesive with their website and other branding material.
  • Clear Pricing. The clear, red pricing allows users to quickly assess and compare the prices of various adult beverages.
  • Accompanying Images. Drizly does its best to include relevant, non-obtrusive images into various sections of the app, adding a nice visual touch.

Key Takeaways:

#1. Use Brand Elements. To improve brand identity, incorporate colors and icon elements from your website or physical store into your app. Repeating existing brand elements boosts recognition.

#2. Use Images When Possible. Add in unobtrusive images to your app when possible so that users can use have a visual and textual way to interpret your app.

6. Handy

Handy is an app that allows you to hire local hands for a variety of tasks, such as plumbing, cleaning, painting, moving etc.

handy-ui.png

Why We Love It:

  • Appealing Color Palette. Handy uses several different colors, but all within a related color palette. Similar to Peak, Handy uses different colors to represent different chores (green is for cleaning, blue is for handyman tasks, red is for plumbing, etc).
  • Selection Indicators. Handy does a great job of adding some shine to user input options. Grey checkmarks become colorized once they’re tapped, and pricing changes in real-time as users adjust their orders.
  • Icons And/Or Images. You don’t need huge, action-packed images to get your point across. Handy uses a nice mix of photographs and simple, colorful icons.

Key Takeaways:

#1. Create Engaging Selection Indicators. Think about how your app can make the user input process more colorful by adding creative feedback elements.

#2. Incorporate Visual Elements (Photographs or Icons). Even incorporating simple icons into your app can greatly improve your UI. Mini illustrations or icons are a great way to provide visual breathers and break up large sections of copy. Images also help convey meaning immediately, so blend them into your app whenever possible. 

Finding Your Perfect App UI

Hitting your app UI sweet spot isn’t always easy, as different apps will have different dream UIs depending on the goal and function of the app.

Start with some of the takeaways we’ve highlighted and then perfect your design with:

  • Tracking user in-app behavior
  • A/B testing
  • User studies
  • Feedback

Continue to test and tweak in order to achieve that ultimate UI that will delight app users and keep them coming back for more!

app-user-lifecycle-quick-guide-CTA

X