How icons improved our secondary navigation experience by 40%
By: Alex Barker
Tags: Usability, Design, UX Research, UI, UX

Final Goal

To achieve our third goal, we had to make these new navigation patterns discoverable. This all depended on a single icon to show users that they could truncate that side menu.

Original Icon

This is the icon we had originally. The problem with this icon was that users thought it was going to bring them back to the previous page.

Controlled Research: To start testing new icons for discoverability, it was important that the research was controlled so that the results were based on the icon only. To do this the same set of questions and participant characteristics were used in the tests.

First Question: This question was created to be as general as possible while still being directive enough to accomplish the task. This also gave us a quantitative metric to help us track progress and compare the icons.

Where would you click to hide the menu that is currently available on the left-hand side of the page?

Second Question: The second question was used to help us understand the “why” behind the first question. This gave us a qualitative answer to help us understand how participants felt about the task given to them.

What made you click there?

Baseline

As a baseline metric, we first ran the test against the icon currently in use. In the image below the red square on the left side of the screen indicates where a successful click was. As you can see, the focus was spread across the page and only 2 of the 5 participants tested clicked in the right spot.

Baseline: 2 of the 5 participants were successful

New Icon Research

Now that we had set up the controlled test and gotten a baseline we were ready to test other icons. After developing a range of icons 3 icons were chosen to test.

The 3 icons tested: Hamburger, Arrow, and Chevron (left to right)

Hamburger icon

It was chosen because it’s easily recognized and is a common pattern for expanding and collapsing menus.

Initially, when we ran this test the hamburger icon was selected by 3 of 5 participants. One of the participants responses was removed because it was not legit (they didn’t try and clicked/answered randomly).

Usabilityhub allowed us to replace that answer with a new participant and with the new data 4 of 5 participants found the hamburger icon. Below you can see the responses to the follow-up questions, “What made you click there?”

Hamburger Qualitative Results

Arrow icon

This icon was chosen because it was more directive of what would happen when clicked. We believed it was a clear way to express that the menu would truncate to the left.

The research results showed that 4 of 5 participants found the arrow icon and were successful in completing the task.

Arrow Qualitative Results

Chevron icon

This icon was chosen because it’s a regularly used icon to show that something can collapse or expand.

To test a second pattern we placed this icon in the middle of the list rather than the top left. The idea was that this icon would show when a user hovered over the secondary navigation.

Placement for the “Arrow 2” icon

The results for this icon were that 3 out of 5 participants were able to successfully find it.

Chevron Qualitative Results

Final Test

As a final test, both the Hamburger and Arrow icons were run 5 more times since they had scored the same in the initial tests. We did this to see if one would out-perform the other which would make the final decision easier.

Hamburger Icon Results

7 out of 10 participants were successful

Qualitative Results

Arrow Icon Results

8 of 10 participants were successful

Qualitative Results

Arrow Vs. Hamburger Results

Quantitative: The Arrow icon was the winner here. While it was close, the Arrow icon was 10% more discoverable than the Hamburger icon.

Qualitative: The participants who were tested using the Arrow icon answered with more confidence and clarity when asked why they clicked where they did. The Hamburger icon results had users confused and second-guessing themselves.

Conclusion

The Arrow icon is 40% more discoverable than the original icon used. Through user testing, we were able to track the results and compare the qualitative and quantitative results to make an informed decision. Without doing this research we would have released the updates with a new icon with no research to back it up.

Before you start to think we are done, I want to say that this is not where the research ends. Now that we have solved and tested the 3 problems individually it’s time for us to get customers in an experience where they can test them all together. Once we have data to back up that this solution is the right one, we will be ready to release it.

Thanks for reading!

Follow this story for future performance results.