SaaS Navigation and Information Architecture
Navigation is the map of your product. When it mirrors your org chart or your database instead of users’ jobs, people get lost, miss features and ask support where things are.
How should SaaS navigation be organized?
Organize SaaS navigation around the jobs users come to do, with five to seven top-level items, the most used first. Use a left sidebar when the product has many sections or will grow, a top bar when it has few. Keep settings, help and the account menu in consistent places, and add search for larger products.
What does a well-organized app shell look like?
The mock-up shows a sidebar app shell for a fictional operations product. Items are grouped by job, the current location is clear, and settings sit apart from daily work. The pins match the notes below.
- Daily work first and the current page clearly marked.
- Grouped by job, with short group labels.
- Account and settings separate from daily work.
- Search that says what it covers.
Name items with the words users use. If customers say ‘jobs’, don’t call the section ‘Work orders’ because that’s what the database table is called.
Should you use a sidebar or a top navigation bar?
Choose by the number of sections and how the product will grow. The table compares the two common patterns.
| Left sidebar | Top bar | |
|---|---|---|
| Best for | Many sections, products that will grow | Few sections, simple products |
| Room for items | Plenty, with groups | Limited by width |
| Screen space | Uses horizontal space | Uses vertical space |
| On mobile | Collapses to a menu | Collapses to a menu or tabs |
| Common risk | Long, ungrouped lists | Overflow menus hiding features |
How do you test navigation?
Test navigation with tasks, not opinions. Ask users to find five common things, such as changing a billing address or exporting a report, and note where they look first. A card-sorting exercise, where users group feature names, shows how they think the product is organized. New features need a home in the structure before they ship; see feature announcements. Team and settings structure is covered on team invites and roles.
Users should never wonder where they are.
A clear current location, consistent placement and labels in the users’ words matter more than any visual style.
How should navigation adapt to mobile?
On mobile, keep the three or four most used destinations in a bottom bar or tabs and move the rest to a menu. Keep the current location visible and the back path obvious. See mobile SaaS UX, and for how dashboards and tables sit within the structure, dashboard design and tables and filters.
Frequently asked questions
How many items should SaaS navigation have?
Usually five to seven top-level items, grouped if there are more.
Should my SaaS use a sidebar or top navigation?
A sidebar for products with many sections or that will grow; a top bar for simple products.
Where should settings go in a SaaS app?
In a consistent place separate from daily work, often at the bottom of the sidebar or in the account menu.
How do I test SaaS navigation?
Give users tasks to find common items and note where they look first. Card sorting also helps.
Should navigation use internal names?
No. Use the words users use for their work.
How should SaaS navigation work on mobile?
Keep the most used destinations in a bottom bar or tabs, and move the rest into a menu.