Overview

Icon Panel

Navigation

User testing

Objectives

Create icons to represent each module of the Performance + Honeywell Forge application, which will be used in an icon panel anchored to the left side of the UI.

After designing iconography, user test within applicable users from User Testing to validate icon designs.

Completion

May 2023

Background

Past research found users want quick navigation

Currently, the app's navigation is behind a hamburger menu icon, which has low discoverability and increases interaction costs.

Previously completed research done by a research colleague showed that users preferred an icon panel that is anchored on the page because they can easily navigate between the product's modules.

Current state: Hamburger menu

Concept explored: Sticky icon panel

Determine what iconography would best depict product modules

Icon research is needed

The icons that were tested initially were rapidly made to test the icon panel concept; the icons were not approved by product module designers.

If the icon panel would be proceeded with for navigation, further ideation and research on the icons chosen would be needed.

Concept explored: Sticky icon panel with tooltip

Workshops

Collaborating with product designers

Miro exercises

Before beginning design explorations for icons for modules of the product, I decided to run short workshops in Miro with products designers of each module to get their input.

Also, this was an opportunity to bring awareness to global navigation updates the Design System was considering.

Direction for icon designs

Each product module team went through this workshop synchronously with me.

Activity 1

First, designers were asked to provide a one to two sentence description of their module, while thinking about the main user goals being accomplished in their module.

Activity 2

Designers were asked to differentiate the module they are dedicated to from the other modules in the product to get them thinking about what makes their module unique in the product.

Activity 3

Designers were asked to write down the words or phrases that come to mind after providing a description and thinking about distinctions their module has in the product.

An example word cloud was provided for designers to reference and to show what was expected for this activity.

Activity 4

Designers were asked to take those words and phrases from Activity 3 and determine the best symbol to represent the word/ phrase written down. 

They could pick from pre-selected icons from IBM Carbon or they were told they could also provide screenshots from Google searching.

Activity 4B

Lastly, designers were asked to pick the top three symbols to represent their module to be considered in design explorations.

Comparing takeaways from the workshops

After running the workshop with five product design teams for each module, I analyzed the results and selected with icons to design to proceed into user feedback.

Icon survey

Test 1A methodology

After icon explorations, to get feedback on deciding the most recognizable icon for each app module, I created an unmoderated survey for users to take on UserTesting.com that showed the icons being considered out-of-context.

  • 40 participants (20 work in warehouse domain, & 20 work in industrials domain) 

  • ​User shown an image with three icons, along the description of the module per each of the four modules

Icon group being tested for each product module

Each icon group was tested below within each user test.

Site Operations

Asset Management

Workforce Intelligence

Event Management

Test 1A results

Most modules did not have a stand-out winner, other than Asset Management with 29 votes for the third icon for that set.

To view an example user test, watch the adjacent video attached. Because of the uncertainty with a clear icon winner, more testing with more icons was decided as the next step.

Votes for icons in each module

Site Operations

Asset Management

Workforce Intelligence

Event Management

Test 1B methodology

Test 1B had the same approach as test 1A, except the user chose from a set of four icons instead of three, as well as selecting from some new icons.

  • 20 participants (10 work in warehouse domain, & 10 work in industrials domain) 

  • ​User shown an image with four icons, along the description of the module per each of the four modules

Icon group being tested for each product module

Each icon group was tested below within each user test.

Site Operations

Asset Management

Workforce Intelligence

Event Management

Test 1B results

Likewise to test 1A, uncertainty came from the test results of determining which icon from each set was the clear stand-out.

But both tests 1A and 1B gave direction on which icons were resonating better versus others so I was able to forward to in-context icon testing.

Votes for icons in each module

Site Operations

Asset Management

Workforce Intelligence

Event Management

Usability tests

Test 2A methodology

For test 2A, users were shown the adjacent image of the app's home page, with an icon panel numbered one to six. 

  • 10 participants (5 from warehouse domain & 5 from industrials domain)

  • ​The user was shown this image & asked which symbol they would click to navigate to a module with its description.

    Note: two new modules were added in this test for Planner and My Workspace, which would live along the four other modules.

Test 2A 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. 

After watching all user tests, I decided to create one more in-context test using different icons to see if they would help better differentiate the icons.

Votes for icons in each module

Test 2B methodology

Test 2B used the same methodology as Test 2A, but used different icons in a few modules, such as Workforce Intelligence and Event Management. 

  • 10 participants (5 from warehouse domain & 5 from industrials domain)

  • ​The user was shown this image & asked which symbol they would click to navigate to a module with its description.

Test 2B results

Similar to tests 1A and 1B, more confusing results came from this round of testing. 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.

Needless to say, I did not have strong data to support these icons within an icon panel to use as navigation within the application.

Votes for icons in each module

Conclusion

A sticky icon panel must have assistive text available

Though the user testing didn't show the results I wanted, we did get some knowledge from the testing - icons get easily confused with each other.

Because the module names and corresponding symbols are abstract, users are not sure what the icon should look like and take unconfident guesses in a product setting.

Icon-only navigation increases interaction costs in first-time users

Users must decode what the icon means when first interacting with the product, which increases cognitive load. So text labels should be used to support to icon visuals.

Given that our product is susceptible to scaling, more modules may be added in the future; which means more icons and more confusion. Labels will always be more accessible and usable, and will prevent this from being an issue.

Left-side navigation with icons & 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.

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.

paschalallie@gmail.com

Connect with me

Copyright © Allie Paschal.