August 2, 2024

Why I Chose Bottom Navigation

Design

Image of the home page of my portfolio with navigation button located towards the bottom of the screen
Image of the home page of my portfolio with navigation button located towards the bottom of the screen
Image of the home page of my portfolio with navigation button located towards the bottom of the screen
UX Perspective

As UX/UI designers, we constantly seek ways to refine our craft and create more intuitive, accessible, and delightful user experiences. In my recent portfolio redesign, I embraced bottom navigation buttons—a choice influenced by industry trends and a desire to push the boundaries of user experience.

Let's Talk About The Apple Paradigm Shift

Apple's decision to move the search bar to the bottom of Safari in iOS 15 was not merely a cosmetic change but a strategic enhancement to improve user interaction. This shift acknowledges a fundamental principle in UX design: minimizing the effort required for users to interact with an interface.

Ergonomics: The Case for Bottom Navigation
Mobile:
  1. Thumb Zone Mapping: Research into how users interact with their devices has shown that the most accessible area on a smartphone screen is the bottom third. This "thumb zone" is where users can comfortably tap without adjusting their grip. By placing navigation buttons in this zone, we reduce the physical strain on users and make navigation more intuitive.

  2. Natural Hand Positioning: When holding a phone, our natural grip positions our thumbs at the bottom of the screen. Designing for this natural posture ensures that primary navigation actions are within easy reach, enhancing the overall user experience.

  3. Adoption in Native Mobile Apps: Most native mobile apps already use a bottom navigation bar, making it a common mobile design pattern. Users are accustomed to this layout, which reduces the cognitive load and allows them to transfer their navigation habits from one app to another seamlessly.

Desktop:
  1. Screen Real Estate Optimization: On larger screens, such as desktops, placing navigation at the bottom can free up valuable vertical space at the top. This allows more room for content and reduces the need for users to scroll, especially when dealing with long pages.

  2. Consistent Experience Across Devices: By maintaining a consistent navigation structure across both mobile and desktop interfaces, users can enjoy a seamless transition between devices. This consistency helps in building familiarity and reduces the learning curve, enhancing overall user satisfaction.

  3. Reduced Cursor Travel Distance: For desktop users, having navigation at the bottom can reduce the distance the cursor needs to travel, especially when the browser window is maximized. This can lead to quicker navigation and a more efficient user experience.


According to a report by Statista, mobile devices (excluding tablets) generated 54.8% of global website traffic in the first quarter of 2021, a trend that has been steadily rising over the years.

Enhancing My Portfolio's User Experience

While I advocate for sticking with common design patterns—understanding that users spend more time on other sites than ours—I saw my portfolio as an opportunity to push the boundaries and explore a better user experience. This move is timely, considering the substantial increase in mobile internet usage. As users increasingly rely on mobile devices for browsing, optimizing for ease of use on these devices becomes paramount.

Practical Implementation

To ensure the effectiveness of bottom navigation, I focused on a few key design principles:

  1. Clear Icons and Labels: The navigation button is paired with intuitive icons and clear labels, minimizing confusion and enhancing discoverability.

  2. Sticky Navigation: The navigation button remains fixed at the bottom, providing consistent access regardless of where the user is on the page.

  3. Minimalistic Design: A clean, unobtrusive design ensures that the navigation bar does not distract from the portfolio content.

Conclusion

The shift towards bottom navigation is not just a trend; it’s a response to evolving user needs and behaviors. By aligning my portfolio design with these principles, I not only enhance its usability but also demonstrate a commitment to modern, user-centered design practices. Just as Apple’s move to bottom navigation in Safari redefined mobile browsing, my portfolio’s bottom navigation aims to create a more accessible, intuitive, and enjoyable experience for all users.

It's important to stay adaptable and empathetic to user needs. Embracing bottom navigation is a step towards making digital experiences more ergonomic and user-friendly, ensuring that my portfolio not only showcases my work but also pushes the conventional boundaries towards a better user experience.

MY RECENT STORIES