Nworx has a lot going on under the hood, and to make all of that usable on mobile, our Eleken team designed a compact side navigation. Paired with a clear content hierarchy and thoughtful transitions, the interface helps users move between sections. A horizontal scroll with a fixed first column handles the rare tablet user.
When possible, label data points directly instead of requiring users to cross-reference a legend. If a chart needs a legend with more than 5 items, the chart is too complex. This involves using different font sizes, styles, or icons to distinguish between primary and secondary navigation. Vertical navigation menus allow users to browse through a vertical menu that expands and shrinks as needed.
If your team is migrating data fetching off REST hooks, the TanStack Query + TypeScript guide on Coding Dunia covers the server-state side that pairs naturally with TanStack Table. Container queries (supported in all major browsers since February 2023) finally let dashboard cards adapt to their container width instead of the viewport. This matters when users resize panels or use dashboards on different monitors. It’s smaller than the 44px mobile touch target because dashboard sidebars are a desktop pattern.
Avoid bi-directional cross-filtering between related visuals — it causes cascading query recalculations. Use Import mode for dimension tables even when fact tables use DirectQuery (composite model pattern). Pre-aggregate summary measures in the data model rather than calculating them on the fly. Enable query caching https://thedatascientist.com/brand-positioning-as-the-foundation-of-predictable-marketing-a-view-from-inventello-limited/ for dashboards that serve read-mostly workloads. Schedule data refreshes during off-peak hours to avoid competing with interactive query loads.
Great mobile navigation is invisible — users find what they need without thinking about how they got there. Achieve that by choosing the right navigation patterns, following platform conventions, and testing with real users on real devices. Bottom sheets slide up from the screen’s bottom edge to display supplementary content, actions, or navigation options. They support progressive disclosure — showing additional complexity only when the user requests it — keeping the primary UI clean.
By identifying the needs of your group, you’ll be able to create a navigation that helps them. Create clarity in your design with these must-know mobile UI patterns. Aurora Harley of Nielsen Norman Group found that “past experiences and repeated practice inform user experience and that any deviation from a learned routine can lead to user errors”. There are times when you can deviate from convention but when it comes to navigation it’s best to maintain clarity. Making sure that you maintain clarity is even more important when it comes to designing and creating games, which can bring a lot of compressed information into the experience. Ideally, you want to approach navigation from a user-centered design perspective.
Mobile screens are much smaller than computers – which creates the issue of readability for the content at play. The navigation in most apps is text-based, even if they rely on icons like the hamburger menu icon for some of it. In this section, we delve into essential best practices that aim to optimize mobile navigation, ensuring it remains intuitive, accessible, and supportive of users’ expectations. From accommodating diverse hand positions to maintaining legibility and visual hierarchy, each guideline is crafted to minimize friction and enhance the user journey. Spotify has grown to be a giant in the music streaming business, and their UI design reflects it. This mobile navigation example is all about cards in the homepage, using them as a dynamic way for users to discover content.
Menu
Navigation fades into the background as content takes over, while infinite scrolling and smooth transitions make the experience flow as a continuous discovery loop. Among app design examples, Notion doesn’t explain how the app works. It asks a few smart questions and instantly generates a tailored workspace.
Pinterest throws open its doors with a visually stunning display of cards, each representing a unique pin. It’s a feast for the eyes, making exploration effortless and enticing. This card-based design is like wandering through a curated museum, where every corner holds the potential for something new and captivating.
We could organize all supported countries and languages as cards or accordions, but they could also work as vertical tabs, as it’s done in the footer of Oracle. We could use the same approach in other contexts, such as filtering. We display all filter attributes on the left, and allow users to choose the specific values for these filters in the second vertical pane. That’s what the filtering experience looks like on Myntra, an Indian eCommerce retailer pictured below. It’s worth noting that animated slide-ins can be quite disorienting, distracting, and annoying for people who use the navigation a lot.
That said, experiment with different colors and sizes for your navigation menus. Also, consider placing them where users naturally expect to find them based on common experience. Breadcrumbs provide a trail for the user to follow back to their starting point and are especially useful in websites or apps with multiple levels of navigation and content. Task-oriented navigation structures the UX around the specific tasks that users need to accomplish. It works best with apps designed for completing specific tasks (like booking systems, payroll platforms, ecommerce sites, or project management tools). Revolut’s modular layout, crisp typography, and clean iconography create a clear visual hierarchy that builds trust from the first tap.
The big, bold text encourages you to dive right in, while the little illustration adds a friendly touch. Show the story behind the KPIs — trends over time, category breakdowns, forecasts. These principles are non-negotiable for enterprise Power BI dashboards. They are drawn from hundreds of production deployments across Fortune 500 organizations. In SaaS, following navigation UX best practices can make the difference between a product that’s unusable and one that can engage users.
Design better products with States, Variables, Auto Layout and more. This ensured that contrast, readability, and visual cues remained effective across scenarios. As a result, the system worked reliably for a broader audience.
Use a tab bar when you have 3–5 primary destinations that users switch between frequently. Use a hamburger menu for secondary navigation or when you have too many options for a tab bar. Bottom navigation is a persistent menu placed at the bottom of the screen on mobile apps, making it easy to reach with a thumb. It usually includes icons, labels, or a combination of both that lead to the app’s key sections.
Slack takes things to the next level by integrating a chat bot that helps users set up their profile. Featured content serves to show users the possibilities and helps them understand what the platform can accomplish as well as the things other users are using it for. Once someone starts using your website or web application, they need to know where to go and how to get there at any point.
As we said, helping users understand where they are within your app at any given moment enhances navigational efficiency and user satisfaction. For this, simply provide an intuitive drag-and-drop or selection interface that enables users to easily customize their navigation panel. The hamburger menu is a clickable icon that’s often used to open a menu. It is named for its iconic three-line design, which resembles a hamburger. In SaaS, breadcrumbs can prevent the feeling of being lost in complex interfaces by clearly showing the user’s current location relative to the hierarchy of the application. To implement it, it’s necessary to map out the user journey meticulously from beginning to end.
In general, the curtain pattern works well with a quite flat content architecture, but is difficult to manage with three or more levels. It shows its strengths when the speed of navigation matters and when users are likely to jump between sections a lot. In that case, once a user is looking for something very specific, they seem to use search rather than traversing the navigation tree up and down.
In SaaS products, especially, ease of navigation directly affects long-term adoption and customer loyalty. Popovers indirectly aid navigation by providing additional context to a menu item before a user clicks. This functionality prevents users from navigating forward and backward as they try to find what they need. This improves accessibility and makes it clear to users where they are navigating. Define the color scheme, typography, and button styles for your navigation. Make sure that these elements are consistent throughout your project to create a cohesive look and feel.
Designing Navigation For Mobile: Design Patterns And Best Practices
For example, the hamburger menu is the universally recognized icon for opening the navigation on websites and mobile apps. Aside from search, let’s take a quick look at some of the most common navigation design patterns for desktop and mobile. It’s also worth mentioning that many designers are now using dropdown menus as a means of navigation as well, but that comes with certain risks to the usability of the product.
Expand And Collapse Content
- Navigation design involves creating, analyzing, and implementing ways for users to navigate through a website or app.
- Alternatively, an overflow menu can be used to contain additional menu items or actions as they are incrementally added to the UI.
- This three-level hierarchy means the executive dashboard stays simple, the analyst gets full detail, and both access the same governed dataset.
- Users rely on menu names to understand what they’ll find behind each click.
They can move back and forth in a category and to the main menu by clicking the back button on the top left. According to research, nearly 65% of users form a negative view of a brand with a poor app experience. What becomes crucial, then, is to simplify the interface design so that users have hassle-free access to solutions of their problems. Pinterest and Fitocracy use modal popovers for quick actions, and Facebook uses popovers to quickly show snippets of content from the Activity Bar. The popover UI pattern is important for actions like these because they are being performed on the data and this way users always know what these controls apply to.
The Venmo interface leverages simple gestures, emojis, and lightweight UI elements. The social feed of payments gives everyday transactions context, turning what could be a dry utility into something more human. On mobile, Asana uses tabbed navigation and contextual drawers that scale gracefully with complexity. This work management tool relies on a progressive disclosure approach, keeping things clean without limiting power. If you want to see how we approach this at Eleken, don’t hesitate to watch our video. There, we break down our strategy to design SaaS products people want to use.
This removes the “blank page anxiety” and helps users feel like they’re accomplishing something right away. But deliver bad UX, and you’ll lose the audience before they finish onboarding. They’re distracted, impatient, and always one awkward flow away from deleting your app. Mobile UX design is what turns an app from something people download into something they depend on. It’s the invisible layer that makes a product seem intuitive, effortless — like it just gets you.
Level 1 is the dashboard itself — KPI cards and summary charts. Level 2 is a set of drill-through report pages that show dimension-level detail (e.g., regional breakdown, product category breakdown, time period detail). Level 3 is a transactional detail page showing individual records, accessible from Level 2. This three-level hierarchy means the executive dashboard stays simple, the analyst gets full detail, and both access the same governed dataset. The recommended enterprise dashboard layout follows a three-tier structure.
This way, we display only options that are relevant to users. They never have to go to irrelevant sections or pages since they get a preview and can navigate away from it quickly, should they wish to do so. If some filters don’t fit in the right pane, users can scroll to explore more or even search for a specific filter in the selection. It would be lovely to see the total number of results on that button, too. While there’s still a debate surrounding the hamburger menu, most in the design community have surrendered to its charms.
The client approached Eleken to design a caregiving MVP that supports accessibility. Since the platform was intended for users with diverse needs, the navigation had to be inclusive. Accessible navigation starts with clarity and predictability. Screen reader users, keyboard-only users, and people with visual impairments interact with navigation differently, and your design should support those differences. During the redesign process, we introduced a sidebar with descriptive labels and the option to minimize it. Even in its collapsed state, hovering over icons reveals tooltips.
