Expanded Workspace and Improved Navigation
NATIVO
Expanding the layout to use the full workspace, and redesigning the navigation for better space efficiency and a modern look.
Objective
Enhance the platform’s workspace design to optimize screen utilization, improve navigation scalability, and support content-rich experiences while aligning with business growth and user engagement goals.
Challenges
The workspace design in the platform was limited in several ways:
-
Fixed width couldn’t take advantage of larger screens or high-resolution
-
Top navigation pushed the work area down below the screen, requiring scrolling
-
Navigation couldn’t grow to accommodate more tabs than the width of the app
User Goals
-
Information: Many pages need to show a lot of information on a single screen.
-
Creating Content: The content editor needs to accommodate richer and bolder designs.
-
Reports: All metrics need to be able to fit on the screen.
Business Goals
-
Improve User Experience: Make it easier for visitors to find what they need, reducing frustration and bounce rates.
-
Boost Engagement: Encourage users to explore more pages and interact with content.
-
Reduce Support Requests: Make information more accessible, lowering the need for customer support.
-
Align with Business Growth: Support new products, services, and expanded offerings on additional tabs.
Research
Many studies have evaluated various three-level menu navigation layouts, focusing on criteria such as navigation time, user hesitation, cursor movement, selection errors, and user preference. The layouts tested have included combinations like top-top-top, top-left-left, left-left-left, and left-top-top.
KEY FINDINGS
-
Navigation Time: Layouts with the primary menu on the left (e.g., left-top-top) were faster to navigate than those with a top primary menu.
-
User Hesitation: The left-top-top layout resulted in the least hesitation, while the top-top-left layout caused the most.
-
Cursor Movement: Fewer incorrect cursor movements occurred when the primary menu was on the left, especially when the secondary and tertiary levels were on the same plane.
-
Selection Errors: A left primary menu reduced selection errors compared to a top primary menu.
-
User Preference: Most users preferred layouts with the primary menu on the left, particularly the left-top-top and left-left-left configurations.
CONCLUSION
The studies concluded that the left-top-top navigation layout performed the best overall, offering faster navigation and higher user satisfaction. Based on Nativo's needs this layout is suited best to optimize the user experience in a three-level menu.
Expanding the Workspace
BEFORE
-
Fixed-width layout restricts flexibility
-
Columns become compressed, reducing readability
-
Not all content remains visible, impacting usability
AFTER
-
Expands to fill the screen, maximizing available space
-
Columns are easily readable, improving clarity and usability
-
All content appears without scrolling, enhancing accessibility
New Navigation
BEFORE: TOP NAVIGATION
-
A limited number of tabs, restricting navigation options
-
Workspace is pushed down, reducing usable screen area
-
Requires multiple clicks, increasing interaction effort
-
Occupies valuable space, impacting layout efficiency
-
Design feels outdated, affecting user perception
AFTER: COLLAPSIBLE SIDE NAVIGATION
Slide-Over View:
-
Unlimited tabs, allowing greater flexibility in navigation
-
Workspace is more accessible, maximizing screen usage
-
Faster navigation, reducing user effort and clicks
-
Modern and sleek design, enhancing visual appeal and usability
Collapsed View:
-
Hides clutter, creating a cleaner interface
-
Recovers space, optimizing screen real estate
-
Improves focus, enhancing user experience and productivity
Pop-Over View:
-
Available when needed, providing on-demand access
-
Enables quick navigation, reducing interaction time
-
Unobtrusive design, maintaining a clean and focused workspace
The Final Outcome
By implementing a flexible layout that adapts to various screen sizes, repositioning navigation for better usability, and allowing for scalable tab management, the new design improves user experience, boosts engagement, and reduces support requests. This redesign also aligns with business growth by accommodating richer content, comprehensive reports, and expanded offerings.