L1 NAVIGATION STUDY
TL;DR
Overview
Previous usability tests had shown the primary, or Level 1 (L1), navigation of the Honeywell Forge Performance Plus application was causing users to fail tasks or become confused.
Additional evaluative research was completed to explore different UI navigation patterns, and results showed users preferred a left-aligned icon panel for their L1 navigation.
Before moving forward with the icon panel for L1 navigation, more usability research needed to be completed before recommending this pattern for our product.
Goals
Collaborate with product designers to ideate on iconography
Create iconography explorations for each module in the Performance Plus app
Conduct usability tests to validate iconography, both out-of-context and in-context
Distribute findings to the Design System and Product teams
Role
UX UI Designer Lead
Duration
Spring 2023
BACKGROUND
Previous research found our users want quick navigation
The current state of the app's navigation is using a hamburger menu icon, which has low discoverability and increases interaction costs.
Previously completed research done by a UX colleague showed that users preferred an icon panel that is anchored on the page because they can easily and quickly navigate between the product's modules.
Current state of navigation: Hamburger menu
Explored navigation concept: 'Sticky' icon panel
Iconography research is needed
The icons that were tested in the prior navigation pattern testing were rapidly created to only test the icon panel concept; the icons were not approved by product designers.
If the icon panel pattern would used for primary navigation, further ideation and research on the icons used would be needed, which onset this research.
Explored navigation concept: 'Sticky' icon panel with tooltip
WORKSHOPS
Product designer collaboration
Before beginning icon explorations for the Performance Plus product, I decided to run workshops in Miro with products designers of each module to get their input.
Miro activities
Each product module team went through this workshop synchronously with me.
Activity 1
Designers were asked to provide a one to two sentence description of their module, framing it towards their end-user goals.
Activity 2
Designers were asked to differentiate the module they work on compared to the other Performance Plus modules.
Activity 3
Designers were asked to write down words or phrases to summarize their product module.
Activity 4
Designers were asked to identify the best symbol to represent their chosen word/phrase(s).
They could pick from pre-selected icons from IBM Carbon or provide images or drawings of their own.
Activity 4b
Lastly, designers were asked to pick the top three symbols to represent their module to be considered in further explorations.
Key takeaway - Workshops
Designers per each module selected different iconography, but some visual elements such as a cog/gear were selected more than once.
ICON SURVEY
Survey methodology - Part 1
To get feedback on icons iterated in the workshops, I created an unmoderated survey on UserTesting.com for users to view the icons out-of-context and select the best fit.
Participants (40 total):
20 work in Warehouse or Distribution Center
20 work in Industrial/Refinery Mill
Tasks:
Each user shown an image with three icons, along the description of the module per each of the four modules
Part 1 Survey in UserTesting.com
Icons per each product module
Each icon group was tested with each user in the survey
Survey - Part 1 Results
3 of the 4 modules did not have a clear winner. Because of this uncertainty, I developed more icons to test in a new survey, taking feedback users gave in the first survey.
Recording of Part 1 survey on UserTesting.com
Survey methodology - Part 2
A new survey was created to test added icons which came from user feedback in Part 1 of the survey, but with less participants.
Participants (20 total):
10 work in Warehouse or Distribution Center
10 work in Industrial/Refinery Mill
Tasks:
Each user shown an image with four icons, along the description of the module per each of the four modules
Part 2 Survey in UserTesting.com
Icons per each product module
Each icon group was tested with each user in the survey
Survey - Part 2 Results
Like Part 1, the modules did not have clear winners, but both Part 1 and 2 surveys gave direction on which icons were resonating more with users.
Recording of Part 2 survey on UserTesting.com
Key takeaway - Icon survey
Certain symbols were favored with modules, such as a building symbol for the Site Operations module or a person symbol for the Workforce Intelligence module.
USABILITY TESTING
Usability Test Methodology - Part 1
For Part 1 of the usability test, users were shown an image of the Performance Plus home page with a left-aligned icon panel that is numbered one to six.
Participants (10 total):
5 works in a Warehouse or Distribution Center
5 works in an Industrial Plant/Refinery Mill
Tasks:
The user was shown this image & asked which symbol they would click to navigate to a module with a certain description.
Note: two new modules were added in this test for Planner and My Workspace, which would live along the four other modules.
Part 1 Results
Though the correct icon was the majority pick for each module, four out of the six icons were selected for more than 2 modules.
Recording of Part 1 Usability Test in UserTesting.com
Usability Test Methodology - Part 2
For Part 2, users were shown the same image of the Performance Plus home page with a left-aligned icon panel, but used different icons in a few modules, such as Workforce Intelligence and Event Management.
Participants (10 total):
5 works in a Warehouse or Distribution Center
5 works in an Industrial Plant/Refinery Mill
Tasks:
The user was shown this image & asked which symbol they would click to navigate to a module with a certain description.
Part 2 Results
Similar to prior tests, results did not give significant, clear icon winners. The intended icon for Asset Management was only selected by one participant, and the intended icon for Event Management also was not the top selected.
Recording of Part 1 Usability Test in UserTesting.com
Key takeaway - Usability testing
I did not have strong data to support these icons within an icon panel to use as navigation within the Performance Plus application. The module naming is too abstract to be understood by symbols alone.
CONCLUSION
A sticky icon panel must have assistive text available
Though the user testing didn't show the results I hypothesized, I did learn that icons are easily abstracted into different ideas depending on the user. Though an icon works for one user, doesn't mean it will work for all users.
Left-side icon panels must use icons with assistive text
My final recommendation concluded that the product can still use these icons in a left-side panel, but they must have the text labels assisting the icon meaning by default.
If a user does become familiar enough with the icons as they use the product more, they can choose to collapse the panel to show only icons.
