Redesigning Navigation for a Better Defect Tracking Experience
Summary
Designed a tablet app for tracking equipment defects, focusing on intuitive navigation through complex hierarchies and 3D models. By simplifying the UI, enabling saved paths, and optimising navigation, the solution enhances user efficiency during inspections of large machinery like draglines.
Reduced Time on Task
Simplified navigation speeds up workflows and reduces delays.
Simplified navigation speeds up workflows and reduces delays.
Increased Task Success
Intuitive design enhances accuracy and improves completion rates.
Intuitive design enhances accuracy and improves completion rates.
Higher User Satisfaction
User-friendly interface ensures a smoother and happier experience.
User-friendly interface ensures a smoother and happier experience.
Background
We were building a tablet app to help users efficiently track defects while inspecting equipment. The app needed to provide a user-friendly interface for navigating complex equipment structures and managing defect details directly on-site.
Requirement
The app needed to provide easy navigation to specific components or parts of the equipment, enabling users to quickly create, update, and delete defects directly on the 3D model during inspections.
Challenges
The biggest challenge was making it easy for users to navigate through the layers of equipment structure and locate the defective part. Traditional navigation methods struggle to handle the complexity of each object in the equipment hierarchy, as every object has unique properties and requires the ability to be selected or drilled down to the next level seamlessly. This becomes even more difficult with large machines, like draglines, where the hierarchy can be massive.
Additionally, navigating through a 3D model on a tablet posed another challenge, as we needed to minimise action buttons to allow users to easily pan, rotate, and zoom in on the desired section.
Additionally, navigating through a 3D model on a tablet posed another challenge, as we needed to minimise action buttons to allow users to easily pan, rotate, and zoom in on the desired section.
User Interview
Our users are mine site workers who need to conduct the equipment inspection regularly. Current workflow are paper-based and it's difficult to keep track on the defect status. The users want the app to be easy to use and can help them monitoring crack propagation and take proper actions before the part fails.
ā
ā
Observations & Requirementsš
Users prefer bigger fonts and button size as they have big fingers.
The navigation needs to be easy to jump between different levels and parts.
Display the full path of current location within the hierarchy.
Concept Development & Validation
Design Goal
Create a clean and simplified UI that prioritises ease of use, with intuitive navigation and a well-defined hierarchy to help users quickly locate and interact with the necessary components, ensuring a seamless and efficient workflow.
Display the full path in nested hierarchy ā
We tried and tested several navigation options including the traditional side panel (vertical navigation), top menu with breadcrumb, and tab groups. Each has its own pros and cons.
Vertical Navigation
Side panel takes too much space on the screen when it expands and it doesn't provide enough information when collapses. It doesn't show the whole hierarchy so user cannot jump to other location easily.
Vertical Navigation using side panel
Top navigation with tabs
Breadcrumb looks better but still doesn't display the whole hierarchy structure. When the amount of tabs increases, it might take up a lot of screen space.
Top navigation with tabs
Design the Solution
I got the inspiration from mega menu and its beauty - showing the full story, combining the benefit of breadcrumb and vertical navigation, landed up with the design that both functionally and aesthetically pleasing.
Navigation Solution - Mega Menu
Allow users to save paths - Reduce repetitive clicks š
We noticed the navigation path can be quite long on larger machines, and users end up spending a lot of time finding the right part. We got requested to design a way to memorise those paths like bookmarks on internet browsers. During the research, we came up with different ideas. Eventually, we decided to mimic the bookmark function on chrome browser and use the icon star to make it easier for users to figure out what the function does.
Saved Paths for quick, easy access
Effortless Navigation Between Neighbouring Parts āļø
Each inspection has its own workflow to check every parts. To make it easier for users to jump between adjacent parts and perform the inspection, we added in the next and back buttons to make the navigation experience better.
Navigate to neighbouring parts using back and forth buttons
Results
Future Development & Takeaways
The future development aims to evolve the navigation system by adopting a more flexible, blockchain-like approach. Users will be able to start their navigation journey from any part or object within the structure, seamlessly drilling down or linking to connected components. This approach will enable a more dynamic and non-linear navigation experience.
Additionally, the web app can integrate with the inspection workflow builder and inspection tracker, providing a comprehensive solution for defect tracking. Future improvements will also include AI-powered search functionality, enhancing the speed and accuracy of finding specific components and defects.
Additionally, the web app can integrate with the inspection workflow builder and inspection tracker, providing a comprehensive solution for defect tracking. Future improvements will also include AI-powered search functionality, enhancing the speed and accuracy of finding specific components and defects.
What I've Learnedš©š»āš«ā
A New Navigation Model is Needed:
Traditional top-down navigation is inefficient, especially for large machines like draglines with many hierarchical levels. Users should have the flexibility to start navigation from any part or object in the structure, allowing for a more intuitive, dynamic experience.
Minimalist Navigation Reduces Cognitive Load
Too many components and functions in the navigation panel can overwhelm users and slow down their ability to find the desired part. Keeping the navigation minimal ensures users can focus on their tasks and navigate more efficiently.
Hide Unused Navigation Elements
It's important to hide the navigation panel when not in use to reduce visual clutter. However, it must be easy and intuitive for users to reveal the panel when needed, ensuring smooth access without unnecessary interruptions.
From Chaos to Consistency:
Building a Design System That Delivers
Optimising Leave Management
for Seamless Rostering
ā
Contact
Let's Connect
Have questions or want to chat about my work? Feel free to reach out to me.
Iād love to hear from you! š
Iād love to hear from you! š
