Top UI/UX Design Tips: How to Design a Great Bottom Mobile Navigation Bar, part 6
Hey there, friends! Welcome back to Part 6 of our series that you’ve been loving. Today, we’re focusing on the best tips for bottom navigation bars. You’ve already learned a lot in our previous parts, and we’re excited to dive into this important topic.
We’ve packed this part with practical tips to make your bottom navigation bars work great and look good. And guess what? Part 7 is coming soon, so there’s more helpful stuff on the way!
Stay tuned, and let’s get into making your bottom navigation the best it can be!
✦ Tip 1: Choose the right sizes, padding, and margins
Creating the right anatomy for your bottom navigation is like crafting a tailor-made suit: it needs to fit perfectly with the device it’s designed for.
In the image above you can see detailed properties for navigation on iPhone 14 and iPhone 15 Pro. But these are guidelines, not rigid rules.
The key is to adapt and experiment to find what works best for each device. Why does this matter? Well, on smaller devices, a more compact navigation bar might be more appropriate. A bulky bar can eat up valuable screen space, making the app feel cramped. The goal is to balance visibility and accessibility without overshadowing the main content.
Generally, an icon size of 24px strikes a good balance. It’s large enough to be recognizable but doesn’t dominate the screen. The home indicator, that dark bar at the bottom, typically takes up around 34px.
When it comes to labels, the sweet spot is around 10–12px. Smaller text risks accessibility issues, making it hard for some users to read. On the flip side, larger text can create clutter and draw attention away from the main content. Remember, labels are there to guide, not to overshadow.
Designing for 2–3 different mobile device widths is a good practice. It ensures your navigation bar looks great and functions well across a range of devices.
✦ Tip 2: Limit the number of tabs to 5
Having too many tabs in the bottom navigation can lead to a cluttered and confusing user experience. Overloading this space with excessive options not only makes each tab smaller and harder to accurately tap, especially on mobile devices, but also overwhelms users with too many choices. This can lead to what’s known as ‘choice paralysis,’ where users find it difficult to make a decision because of the sheer number of options presented to them.
The golden rule? Aim for around three to five tabs. This range is the sweet spot for bottom navigation. It gives users enough options without crowding the space. With fewer tabs, each one gets more breathing room, making them easier to tap and reducing accidental clicks. This also makes your app feel more organized and easier to navigate.
Focus on what matters most. Choose tabs that are essential to your app’s core functions and what users need most often. This way, your users have everything they need at their fingertips, without the extra clutter.
✦ Tip 3: Design thumb-friendly tap areas
A common convention is to use a tap area that is large enough to be easily tapped with a thumb. This usually means having a tap area of at least 44px by 44px. This size is not just a random choice; it’s based on the average size of the human thumb, which ensures that most users can comfortably and accurately tap the navigation items without accidentally hitting the wrong one.
Why is this important? First, it improves the overall usability of your app. Users are likely to navigate using their thumbs, especially on larger devices. A larger tap area reduces the chance of errors and frustration, making the app more user-friendly. Second, it enhances accessibility. Not all users have the same level of dexterity, and a generous tap area ensures that the app is more accessible to people with varying motor abilities.
In contrast, a smaller tap area, like 24px by 24px, might lead to frequent mis-taps and a poor user experience.
✦ Tip 4: Differentiate active and inactive states
Differentiating the active state in bottom navigation is essential for a smooth user experience. It’s about making it immediately obvious to the user where they are in the app. A smart way to do this is to change the style and color of the active icon. Imagine an icon that shifts from an outline to a filled version, along with a noticeable change in color. This visual cue quickly directs the user’s attention to their current location.
Enhancing this distinction, you can also make the label text for the active icon darker and thicker. This simple adjustment reinforces the user’s focus on the active state. The combination of a transformed icon style, a standout color, and bolder text works effectively to differentiate the active tab from the inactive ones.
Conversely, a design that only alters the text, leaving the icon unchanged, might not be distinct enough. In such cases, users might take longer to identify their current position in the app, potentially leading to a less efficient and more frustrating navigation experience. It’s important to strike a balance and ensure that the active state stands out clearly for effortless navigation.
It’s also perfectly acceptable to keep the icon outlined instead of filling it in, as long as you change its color. The key is to implement at least two types of modifications — such as the color of the icon and the text. This dual change ensures users can effortlessly distinguish between active and inactive tabs, enhancing their navigation experience in your app.
✦ Tip 5: Choose simple and familiar icons
When selecting icons for your bottom navigation bar, the best approach is to prioritize familiarity and simplicity. Choose icons that users can instantly recognize and that accurately represent their function. A classic example is using a magnifying glass for the search function — it’s a universally understood symbol, making it far more effective than less common alternatives like binoculars.
The simplicity of the icons is also key. Complex designs or overly artistic interpretations can confuse users, leading to a slower and potentially frustrating navigation experience. The goal is to enable users to understand and navigate your app with minimal effort and thought. Simple icons achieve this by being easy to identify at a glance.
Moreover, consider the cultural context and universal appeal of your icons. Some symbols may be interpreted differently across cultures, so it’s important to choose icons that have a broad and consistent understanding.
✦ Tip 6: Keep navigation labels short and sweet
When it comes to designing your bottom navigation bar, less is definitely more. Opt for concise, one-line labels to keep the design neat and effective. Avoid long labels that spill over two lines — they can clutter the screen and overwhelm your users. Plus, they tend to make the navigation bar too big, which can throw off the balance of your app’s layout.
Short labels simplify things, helping users make quicker, more instinctive choices. They also add to a clean, contemporary aesthetic, ensuring your app is both stylish and functional.
✦ Tip 7: Keep it clean and simple
A cluttered or overwhelming design can detract from the user experience. Avoid adding unnecessary elements like boxes around your tabs, as this can create visual noise. Instead, strive for a streamlined look that guides users effortlessly through your app. The goal is to design a navigation bar that’s intuitive and unobtrusive, ensuring users can focus on what matters most — the content of your app.
✦ Tip 8: Stick to one icon style, except for the selected state
Mixing filled and outline icons in the same navigation bar is like inviting guests to a black-tie event and then having someone show up in beachwear. To avoid this visual mismatch, stick to a consistent style of icons throughout your navigation.
If you decide on outline icons, use them across all tabs. This creates a harmonious and professional look. However, there’s a clever exception: the selected state. Here, switching an outline icon to a filled version is a fantastic way to highlight the active tab. It’s like giving that tab a special badge of honor, making it stand out in a subtle yet effective way.
Also, be mindful of the complexity of your icons. Consistency isn’t just about style; it’s also about complexity. If one icon is simple and clean, the others should follow suit. Mixing a basic icon with something more intricate can throw off the visual harmony of your navigation bar.
✦ Tip 9: Avoid using too many colours
Using too many colors or assigning a different color to each tab can be counterproductive. Multiple colors can create a visually overwhelming experience.
An overabundance of hues can distract users from the content, making the navigation process more about understanding colors than intuitively moving through the app.
You want a unified look that ties the entire app together, not a palette that pulls it apart. Sticking to your brand’s color scheme reinforces brand identity and ensures a professional appearance. Too many colors can clash with your brand’s visual language and dilute its impact.
✦ Tip 10: Use notification badges in bottom navigation to highlight updates
Using notification badges in your bottom navigation bar is a great way to signal new updates or messages to users. These badges can be simple colored circles, or they can include numbers to indicate the quantity of new updates.
Badges should be small enough to not overpower the icon but large enough to be noticeable. Placing them in the top-right corner of the icon is a common practice, as it’s naturally eye-catching. Our pro tip for you is to use outline around them, this will take it to the next level.
If you’re using numbers within the badge to indicate the count of new updates, ensure they are easy to read. Avoid overly small or stylized fonts that might be hard to decipher at a glance.
Choose a badge color that stands out against the navigation bar and icon colors, yet remains consistent with the overall app design.
Only use badges for essential notifications. Overloading users with badges for every minor update can lead to notification fatigue and reduce the effectiveness of this feature.
✦ Tip 11: Separate bottom navigation from main content
Separating your bottom navigation from the main content is essential for a clear and effective user interface. Without this separation, the navigation can blend into the content, especially when scrolling, leading to a confusing and cluttered experience. There are a few most used strategies that you can use.
- You can soft outline to separate bottom navigation from main content
✦ Get the full list of the best tips for bottom navigation bar and more with our UX/UI Design Mastery Course
The UX/UI Design Mastery Course is designed to make you a great designer. You’ll learn real UX/UI design skills by working on actual projects. This course helps you create designs that people love and moves your career forward. It’s all about giving you the skills and experience you need to stand out in the design world
www.uxpeak.com
Use medium exclusive code MEDIUM20 and get 20% off
Love to learn UX/UI design tips but don't have a lot of time? We've created an eBook just for you.
The UX/UI Playbook is your new go-to-guide for mastering UI/UX design. Over 140+ pages full of tips, tricks and strategies to empower you to think, act, and design like a professional.
https://www.uxpeak.com/the-ui-ux-playbook
Use medium exclusive code MEDIUM20 and get 20% off
If you found it valuable — share with the broader community and stay in touch :) We look forward to seeing you in the next one.
