YT YouTube2Text

YouTube2Text → Transcripts → Top UI/UX Design Tips - How to Design a Great Bottom Mobile Navigation Bar

Top UI/UX Design Tips - How to Design a Great Bottom Mobile Navigation Bar — Transcript

by uxpeak · 4,003 words · 626 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00If your bottom navigation looks like
0:01this or this or even this, you need to
0:05watch this video because right now your
0:07users are probably suffering. Every time
0:10they open your app, they feel like this.
0:13A bad bottom navigation doesn't just
0:15look messy and unappealing. It makes
0:17your app frustrating to use and
0:19confusing to navigate. And when that
0:21happens, users don't just get annoyed,
0:24they leave and find something better.
0:26But here's the good news. Fixing this is
0:29easier than you think if you know the
0:31right UI design principles. And today
0:33I'm going to show you exactly how to
0:35design a bottom navigation bar that's
0:37not just good, but so intuitive and
0:40smooth that people will love using your
0:42app. These are the same design
0:44principles used by the best apps in the
0:46world. And by the end of this video,
0:48you'll know exactly how to design a
0:50bottom navbar that feels amazing. Oh,
0:54and stick around till the end because
0:55there's one big mistake that even pro
0:58designers keep making. And trust me, you
1:00don't want to be that designer. Now, one
1:04thing that can really take your bottom
1:05navigation to the next level is adding
1:07subtle micro interactions like this.
1:10Looks great, right? It's those small
1:12details that make an app feel polished
1:14and responsive. But before you get too
1:17excited about animations, there's
1:19something even more important. the
1:22fundamentals because if you don't get
1:24the basics right, no amount of fancy
1:27micro interactions will save your
1:29navigation. So, let's start from the
1:31ground up. When you open a mobile app,
1:33you'll usually see two types of
1:35navigation. Top navigation, which sits
1:38at the top, and bottom navigation, which
1:40sits at the bottom of your screen. They
1:42look similar on both iOS and Android.
1:45But here's something that confuses a lot
1:47of designers. On iOS, it's called a tab
1:50bar. On Android, it's called bottom
1:52navigation. Throughout this video, I'll
1:54just call it the bottom navigation bar
1:56to keep it simple. Now, a lot of
1:58designers think the bottom navigation
2:00bar is just buttons at the bottom, but
2:02the truth is it's so much more. It's
2:05actually the backbone of your app's
2:07usability. Here's why. Your bottom
2:09navigation bar represents the top level
2:12structure of your app. It tells users
2:14what's important and helps them move
2:15quickly between the core sections. And
2:17here's something you really need to
2:19understand. This is prime real estate.
2:23Your bottom navigation is one of the
2:24most tapped, most used areas in your
2:27entire app. So, every icon, every label,
2:31every micro interaction, you have to be
2:33strategic because a well-designed bottom
2:36navigation can make your app feel
2:38effortless. A bad one, it drives people
2:41away. So, how do you decide what to put
2:44in your bottom navigation bar? Let's
2:46break it down step by step. Tip:
2:48Prioritize the most important and
2:50frequently used screens or actions. The
2:53bottom navigation should only contain
2:55the most essential destinations in your
2:57app. The core features users interact
3:00with most often. Good candidates for
3:02bottomnav. Home, main feed, dashboard,
3:05or landing screen. Search, discover, if
3:08users frequently search or browse
3:09content. Add, create, if users regularly
3:13add posts, messages, or content.
3:15Messages, notifications. If social
3:17interaction is a big part of the app,
3:20profile, user account settings, history,
3:22and saved content. Bad candidates for
3:25bottomnav. Help. Fact. It needs to be in
3:28profile or side menu. Log out. No one
3:31logs out that frequently. Keep it
3:33elsewhere. Legal pages, privacy policy,
3:36terms, etc. Nobody needs these at their
3:38fingertips. Introducing elements like a
3:40back or forward button or even logos
3:42which are traditionally part of the top
3:44navigation in the bottom navigation bar
3:46is a practice best avoided. This
3:49approach aligns with Jacob's law which
3:51suggests that users spend most of their
3:53time on other websites or apps.
3:55Therefore, they prefer your site or app
3:57to work the same way as others they
3:59already know. Cluttering the bottom
4:00navigation with elements typically found
4:02at the top can confuse users as it goes
4:05against the familiar navigation patterns
4:07they're accustomed to. On the other
4:09hand, including a call toaction CTA
4:12button in the bottom navigation is a
4:14smart move. These buttons are usually
4:16placed in the center of prominence and
4:18ease of access. CTAs like create an
4:21order or post serve a dual purpose. They
4:24stand out to the user, encouraging
4:26action, and their central positioning
4:28makes them easily reachable, especially
4:30on larger devices. Tip: Understand who
4:33are your users before you design
4:35anything, especially your bottom
4:37navigation. You need to know who your
4:39users are, who's your target audience
4:41because this will shape everything about
4:43your design choices. Ask yourself, how
4:46comfortable are they with technology?
4:47How old are they? What problems are you
4:50helping them solve? What devices do they
4:52use? Why does this matter? Because even
4:55small decisions like adding labels to
4:57your icons depend on your users. If your
5:00audience is younger and techsavvy, you
5:02might get away with minimalist approach
5:04and show just icons. But if your users
5:07are older and less familiar with apps,
5:09labels below icons can make navigation
5:12clearer and help them feel more
5:13confident using your app. Tip: Choose
5:16the right sizes, padding, and margins.
5:19Creating the right autonomy for your
5:20bottom navigation is like crafting a
5:22tailorade suit. It needs to fit
5:25perfectly with the device it's designed
5:26for. In the image, you can see detailed
5:29properties for navigation on the iPhone
5:3114 and iPhone 15 Pro. But these are
5:34guidelines, not rigid rules. The key is
5:37to adapt and experiment to find what
5:39works best for each device. Why does
5:42this matter? Well, on smaller devices, a
5:44more compact navigation bar might be
5:46more appropriate. A bulky bar can eat up
5:49valuable screen space, making the app
5:51feel cramped. The goal is to find the
5:53right balance between visibility and
5:55accessibility without overshadowing the
5:58main content. Generally, an icon size of
6:0124 pixels strikes a good balance. It's
6:03large enough to be recognizable but
6:05doesn't dominate the screen. The home
6:07indicator, that dark bar at the bottom,
6:09typically takes up around 34 pixels.
6:12When it comes to labels, the sweet spot
6:14is around 10 to 12 pixels. Smaller text
6:17can cause accessibility issues, making
6:19it hard for some users to read. On the
6:21flip side, larger text can create
6:24clutter and draw attention away from the
6:25main content. Remember, labels are there
6:28to guide, not to overshadow. Designing
6:31for two to three mobile device widths is
6:33a good practice. It ensures your
6:35navigation bar looks great and functions
6:37well across a range of devices. If
6:39you're designing a bottom navigation bar
6:41for modern smartphones, especially on
6:43iPhones and Android devices without
6:45physical buttons, there's one detail
6:47that many junior designers forget. the
6:50home indicator. That thin line at the
6:53bottom of the screen, that's the home
6:55indicator. It lets users swipe up to go
6:57back to the home screen, and it sits
6:59right below your bottom navigation bar.
7:02So, here's what you need to know. You
7:04should not modify or hide the home
7:07indicator. You should not overlap your
7:10navigation bar onto it. Why does this
7:12matter? Because if your bottom
7:14navigation is too low or feels cramped
7:16against the home indicator, users might
7:19accidentally trigger the home indicator
7:21when trying to tap your nav icons. Find
7:23your app harder to use, especially
7:25one-handed. Feel like your design is
7:27broken or unfinished. What to do
7:30instead? Respect the devices safe area,
7:33also called the safe zone. Make sure
7:35your bottom navigation sits above the
7:37home indicator so there's enough
7:39spacing. Test it on a real device. Use
7:42Figma Mirror to see your design directly
7:44on your phone. What looks good in Figma
7:47on your screen can feel completely
7:49different when you're actually tapping
7:50it on a real phone. Tip: Limit the
7:53number of tabs to five. Having too many
7:56tabs in the bottom navigation can lead
7:58to a cluttered and confusing user
8:00experience. Overloading the space with
8:02excessive options not only makes each
8:04tab smaller and harder to accurately
8:06tap, especially on mobile devices, but
8:09also overwhelms users with too many
8:11choices. This can lead to what's known
8:13as choice paralysis, where users find it
8:16difficult to make a decision because of
8:17the sheer number of options presented to
8:20them. The golden rule, aim for three to
8:22five tabs, max six tabs. This range is
8:26the sweet spot for bottom navigation. It
8:28gives users enough options without
8:30crowding the space. With fewer tabs,
8:32each one has more breathing room, making
8:34them easier to tap and reducing
8:36accidental clicks. This also makes your
8:38app feel more organized and easier to
8:41navigate. Focus on what matters most.
8:43Choose tabs that are essential to your
8:45app's core functions and what users
8:47access most often. This way, your users
8:50have everything they need at their
8:52fingertip without the extra clutter.
8:54Tip: Design thumb friendly tap areas. A
8:58common convention is to use a tap area
9:00that is large enough to be easily tapped
9:02with a thumb. This usually means having
9:04a tap area of at least 44 pixels x 44
9:07pixels. This size is not just a random
9:09choice. It's based on the average size
9:11of a human thumb, which ensures that
9:13most users can comfortably and
9:15accurately tap the navigation items
9:17without accidentally hitting the wrong
9:19one. Why is this important? First, it
9:22improves the overall usability of your
9:24app. Users are likely to navigate using
9:26their thumbs, especially on smaller
9:28devices. A larger tap area reduces the
9:31chance of errors and frustration, making
9:33the app more userfriendly. Second, it
9:36enhances accessibility. Not all users
9:38have the same level of dexterity, and a
9:41generous tap area ensures that the app
9:43is more accessible to people with
9:44varying motor abilities. In contrast, a
9:47smaller tap area, like 24 pixels x 24
9:51pixels, might lead to frequent mistaps
9:53and a poor user experience. Enjoying the
9:56tips so far? That's awesome. But let's
9:58be real, watching a few tips is great,
10:01but what is really going to make a
10:02difference is knowing how to put it all
10:04together. That's where a lot of
10:06designers get stuck. You pick up bits
10:08and pieces, but when you sit down to
10:10design, something still feels off.
10:12That's exactly why we created the UIUX
10:15playbook to give you clear, practical
10:17techniques and real examples that show
10:19you how to design UIs that look clean,
10:21modern, and professional so your work
10:24stands out and looks right every time.
10:26We've had so much amazing feedback from
10:28designers who said that after reading
10:30the playbook, they went from struggling
10:32with designs that just didn't look right
10:34to creating work that looks amazing and
10:37that they're finally proud to share. If
10:39you want to check it out, there's a
10:40special discount for you. Use level up
10:4240 at checkout to get 40% off. And if
10:45you're curious, you can also download a
10:47free preview first. You'll find
10:49everything linked in the description
10:51below. Tip: Differentiate active and
10:54inactive states. Differentiating the
10:56active state in bottom navigation is
10:58essential for creating a clean user
11:00experience. It's about making it
11:02immediately obvious to the user where
11:04they are in the app. A smart way to do
11:06this is to change the style and color of
11:08the active icon. Imagine an icon that
11:11shifts from an outline to a filled
11:13version along with a noticeable change
11:14in color. This visual cue instantly
11:17draws the user's attention to their
11:19current location. To further enhance
11:21this distinction, you can also make the
11:23labeled text for the active icon darker
11:25and thicker. This simple adjustment
11:28reinforces the user's focus on the
11:29active state. The combination of a
11:32transformed icon style, a standout
11:34color, and bolder text works effectively
11:37to differentiate the active tab from the
11:39inactive ones. Conversely, a design that
11:42only alters the text, leaving the icon
11:44unchanged, might not be distinct enough.
11:47In such cases, users might take longer
11:49to identify their current position in
11:51the app, potentially leading to a slower
11:53and more frustrating navigation
11:55experience. It's important to strike a
11:57balance and ensure that the active state
11:59stands out clearly for effortless
12:01navigation. It's also perfectly
12:03acceptable to keep the icon outlined
12:05instead of filling it in as long as you
12:07change its color. The key is to apply at
12:09least two visual changes, such as
12:12adjusting the icon's color and making
12:14the text bolder. This dual change
12:16ensures users can effortlessly
12:18distinguish between active and inactive
12:20tabs, enhancing their navigation
12:22experience in your app. Tip: Choose
12:25simple and familiar icons. When
12:28selecting icons for your bottom
12:29navigation bar, the best approach is to
12:32prioritize familiarity and simplicity.
12:35Choose icons that users can instantly
12:37recognize and that accurately represent
12:39their function. A classic example is
12:41using a magnifying glass for the search
12:43function. It's a universally understood
12:46symbol, making it far more effective
12:48than less familiar options like
12:50binoculars. The simplicity of each icon
12:52is also key. Complex designs or overly
12:55artistic interpretations can confuse
12:57users. The goal is to enable users to
13:00understand and navigate your app with
13:02minimal effort or thought. Simple icons
13:04achieve this by being easy to identify
13:06at a glance. Tip: Keep navigation labels
13:10short and sweet. When it comes to
13:12designing your bottom navigation bar,
13:14less is often more. Opt for concise
13:17single line labels to keep the design
13:20neat and effective. Avoid long labels
13:22that spill over into two lines. They can
13:25clutter the screen and overwhelm your
13:27users. They also tend to make the
13:29navigation bar too big, which can throw
13:31off the balance of your app's layout.
13:33Short labels keep things simple, helping
13:35users make quicker, more instinctive
13:37choices. They also contribute to a
13:40clean, contemporary aesthetic, ensuring
13:42your app is both stylish and functional.
13:45Tip: Keep it clean and simple. A
13:48cluttered or overwhelming design can
13:50hurt the user experience. Avoid adding
13:52unnecessary elements like boxes around
13:54your tabs as these can create visual
13:57noise. Instead, strive for a clean,
14:00minimalist look that guides users
14:02effortlessly through your app. The goal
14:04is to design a navigation bar that's
14:06intuitive and unobtrusive, allowing
14:08users to focus on what matters most, the
14:11content of your app. Tip: Stick to one
14:13icon style except for the selected
14:15state. Mixing filled and outline icons
14:18in the same navigation bar is like
14:20inviting guests to a black tie event
14:22only to have someone show up in
14:23beachwear. To avoid this visual
14:25mismatch, stick to a consistent style of
14:28icons throughout your navigation. If you
14:29decide on outline icons, use them
14:31consistently across all tabs. This
14:34creates a harmonious and visually
14:36balanced look. However, there's a clever
14:38exception, the selected state. here.
14:41Switching an outline icon to a filled
14:43version is a fantastic way to highlight
14:45the active tab. It's like giving that
14:47tab a special badge of honor, making it
14:50stand out in a subtle yet effective way.
14:53Also, be mindful of the complexity of
14:55your icons. Consistency isn't just about
14:58style, it's also about complexity. If
15:01one icon is simple and clean, the others
15:03should follow suit. Mixing a minimal
15:06icon with a more detailed one can throw
15:08off the visual harmony of your
15:09navigation bar. Tip: Avoid using too
15:13many colors. Using too many colors in
15:15your bottom navigation or giving each
15:17tab its own color may seem like a fun
15:20idea, but it usually does more harm than
15:22good. Instead of helping users, it
15:25creates visual chaos. Suddenly,
15:27navigation becomes a guessing game of
15:29colors rather than something that feels
15:31natural and easy. Here's the thing. You
15:34want your navigation to feel like part
15:35of the app, seamless, not loud. When
15:38every tab is a different color, it pulls
15:40attention away from what actually
15:42matters, the content. It can even mess
15:44with your brand's look, making your app
15:47feel less polished and harder to
15:49recognize. The better approach, stick to
15:51your brand's color palette. Keep it
15:53simple and consistent. That way, your
15:56navigation feels clean, your app feels
15:58professional, and your brand stays
16:00strong. Tip: Use notification badges in
16:04bottom navigation to highlight updates.
16:06Using notification badges in your bottom
16:08navigation bar is a great way to signal
16:10new updates or messages to users. These
16:13badges can be simple colored circles, or
16:16they can include numbers to indicate the
16:17quantity of new updates. Badges should
16:20be small enough to stay subtle, but
16:22large enough to be noticeable. Placing
16:24them in the top right corner of the icon
16:26is a common practice, as it's naturally
16:28eye-catching. Here's a pro tip. Adding
16:31an outline around the badge can make it
16:33stand out even more and give it a
16:35polished look. If you're using numbers
16:37within the badge to indicate the count
16:38of new updates, ensure they are easy to
16:41read. Avoid overly small or stylized
16:44fonts that might be hard to decipher at
16:46a glance. Choose a badge color that
16:48stands out against the navigation bar
16:50and icon colors, yet still feels
16:53consistent with the overall app design.
16:55Finally, only use badges for essential
16:58notifications. Overloading users with
17:00badges for every minor update can lead
17:03to notification fatigue, reducing the
17:05effectiveness of this feature. Tip:
17:08Experiment with creative layouts, but
17:10with usability being your priority.
17:12While standard layouts are tried and
17:14tested for usability, stepping outside
17:16the box with a creative and beautiful
17:18design can give your app a distinctive
17:20edge. The key is to strike a balance
17:23between aesthetics and usability. You
17:25can add value to your app by
17:27experimenting with different shapes,
17:29positions, or even dynamic interactions
17:31for your bottom navigation. Maybe you're
17:33thinking about a unique icon arrangement
17:35or an unconventional bar shape. These
17:38creative touches can make your app
17:40memorable. However, here's a word of
17:42caution. Never sacrifice usability for
17:45aesthetics. For instance, while an
17:47unconventional layout may look stunning,
17:49if it confuses users or makes navigation
17:52harder, it can do more harm than good.
17:54All right, let's make this a little bit
17:55more interactive. I want you to pause
17:57the video right now and head to the
17:59comment section. Tell me which bottom
18:01navigation design you like the most. Is
18:03it option A, clean and simple? Option B,
18:07with that sleek line above the active
18:08tab, option C, minimalist with a smooth,
18:11interactive feel, or option D with a
18:14more distinctive custom look. Drop your
18:17favorites in the comments, A, B, C, or
18:19D, and tell me why. I'm curious to see
18:21which style you prefer.
18:23Tip: Separate bottom navigation from
18:26main content. Remember when I mentioned
18:28you should stick around till the end
18:30because there's one big mistake that
18:31even pro designers keep making? Well,
18:34here it is. Not separating the bottom
18:36navigation from the main content. Adding
18:38a subtle soft outline or a one pixel
18:41border around the navigation bar can
18:43create a gentle but clear separation.
18:46This method is unobtrusive yet effective
18:48at visually distinguishing the
18:50navigation area as a distinct element.
18:53Tip: You can use background color to
18:55separate bottom navigation from main
18:56content. Another approach is to
18:58differentiate the background colors of
19:00the bottom navigation and the main
19:02screen. For instance, if your main
19:04screen is white, consider using a light
19:06gray for the navigation bar. This
19:08contrast creates a sense of depth,
19:10making the navigation area feel like a
19:12distinct interactive element of the app.
19:16Using a shadow is also a great way to
19:18achieve this separation. A small soft
19:20shadow above the navigation bar can
19:22create an elevated effect, giving the
19:25impression that the navigation is
19:26floating above the rest of the content.
19:28However, it's important to keep the
19:30shadow subtle. An overly large or harsh
19:33shadow can draw attention away from the
19:35content and detract from the sleekness
19:36of your design. Tip: Choose neutral
19:39colors and avoid using too many colors
19:41in both your top and bottom navigation.
19:44It's best to keep the navigation colors
19:46neutral, such as white, gray, or dark
19:48tones. This approach ensures that the
19:50navigation doesn't distract from the
19:52main content of the app. By reserving
19:54brighter or primary colors for key
19:57actions on the main screen, you help
19:59those elements stand out and draw
20:01attention to what matters most. It's
20:03also important to avoid using too many
20:05different colors between the top and
20:06bottom navigation bars. This can lead to
20:09a disjointed visual experience and
20:11distract users from the app's content.
20:13Keeping a consistent color palette
20:15between these two elements creates a
20:17cohesive and harmonous design. When
20:19choosing colors for your navigation,
20:21it's crucial to consider how they
20:23complement your app's overall theme and
20:25branding. While neutral colors like
20:27white, gray, or dark shades are
20:29generally recommended for their
20:31versatility and subtlety, it's perfectly
20:33fine to opt for a different color if it
20:35enhances your brand's identity. However,
20:38the color should not be so bright or
20:40overpowering that it overwhelms the main
20:42content or disrupts the user's focus. It
20:45should complement the primary colors
20:46used on the main screen, enhancing key
20:49actions and content rather than
20:50competing with them. By the way,
20:53everything that you have learned so far
20:54here is from our UX UI design mastery
20:57course, where we have more than 50
20:59lessons like this one, all designed to
21:01take you from a beginner to a UX UI
21:04design pro. If you want to know more,
21:06the link's in the description. Tip:
21:08Avoid poor contrast for inactive states.
21:11A common pitfall is using poor contrast
21:14for inactive icons and labels, making
21:16them difficult to see or understand,
21:18especially for users with visual
21:20impairments. It's important to strike a
21:22balance between visibility and
21:24distinction. Instead of opting for
21:26drastically different colors, consider
21:28slightly reducing the opacity of
21:30inactive elements. This approach
21:32maintains a cohesive color scheme while
21:34clearly differentiating active and
21:36inactive states. A good starting point
21:39is to aim for an opacity level that is
21:41noticeable yet not too faint. The web
21:44content accessibility guidelines
21:46recommend a minimum contrast ratio of
21:483:1 for graphical elements and user
21:50interface components. To make sure your
21:52color choices meet accessibility
21:54standards, use tools like the web aim
21:57contrast checker. Tip: Add sleek micro
22:01interactions. Now that you mastered all
22:03important fundamentals and your bottom
22:05navigation bar has a solid base, it's
22:08time to take it completely to the next
22:10level to absolutely delight your users
22:12and make them go, "Wow!" A lot of
22:14beginner designers skip this. Their
22:16bottom navigation is just static. You
22:19tap and it changes, but there's no
22:21feeling. It's like pressing a light
22:23switch with no click. Micro interactions
22:26and smooth transitions make your bottom
22:28navigation feel responsive, polished,
22:30and honestly just more fun to use. Tip
22:33one, tap feedback. When a user taps an
22:36icon, show a quick visual response like
22:38a color change, scale up, or a ripple
22:41effect. Tip two, when switching between
22:44tabs, don't just snap to the next one.
22:46Add a small sliding underline or animate
22:48the icon smoothly into place. Tip three,
22:52transitions between screens. When a user
22:54switches screens, don't make it feel
22:56like they teleported, add a soft fade,
22:59or a sides slide transition. It makes
23:01navigation feel connected. These little
23:04details, they're what separating boring
23:06designs from apps that feel amazing. So,
23:09next time you design a bottom
23:11navigation, don't just make it work,
23:14make it feel great. If you made it all
23:16the way to the end, congratulations. You
23:19now know how to design a perfect bottom
23:21navigation bar. and hopefully your
23:24navigation will never look like this
23:26ever again. I really hope you enjoyed
23:29this video. If you did, it would mean a
23:31lot if you shared it with others. Let's
23:33make every bottom navigation bar out
23:35there awesome. Also, let me know in the
23:37comments which tip was your favorite.
23:39I'd love to hear what you found most
23:40helpful. Thanks for watching and I'll
23:42see you in the next one. Have an amazing

About this transcript

This page contains the full transcript of Top UI/UX Design Tips - How to Design a Great Bottom Mobile Navigation Bar by uxpeak, generated from the public captions YouTube serves with the video. The transcript has 4,003 words across 626 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.