Popup Menu
Role: Product Design, UX, UI
Problem Statement: “How do we create a better user experience when using the popup menu?”
Assumptions
Users are generally interacting with our pop-up menu when they are blocked from accessing content
People disproportionately click ‘pause on this site’ because it's the first option on the list. We believe it was clicked 5x more than any other popup menu item due to the order effect.
Users choose pause in place of adding the site to their allow list. They choose ‘pause on this site’ when they really want ‘don’t run on pages on this site’ - the latter would add it to their allow list. The next time they visited their preferences would be saved.
They do not understand all the options available to them, specifically permanently/temporarily blocking a website/a specific page/all websites
They like seeing the counter of how many ads Adblock has blocked on a page
Popup menu prior to redesign
Why is this problem important to our users?
Pausing and allow listing are common actions in our extension and should be intuitive to the user. Our current interface isn't as clear as it could be and the user might not be confident they are using the correct pause or allow list feature that actually solves their problem. The confusion is amplified by the fact that a user has 2 different pause options and 2 different allow list options to choose from. Many people run into ad walls which instruct you to ‘turn off your ad blocker’ in order to access the content. If a user cannot do this quickly it becomes a major pain point and could potentially cause them to uninstall due to frustration. We wanted to ensure that the interface most people see puts forward the best possible presentation and experience for our users.
Why is this problem important to our company?
The pop-up menu has anywhere between 2.5 and 5 million daily views. It is our main avenue for user engagement. Having the ability to communicate with users effectively, solve their issues, and draw awareness of new features and products is crucial. Our only constraint to this project was that we would not be introducing any new functionality. Keeping that in mind, we set out to streamline the process.
Priority #1 Simplify Pause
Is just ‘pause’ enough? Do we need ‘pause on this site’ and ‘pause on all sites’? Our data suggested that ‘pause on this site’ was clicked 5x more than any other popup menu item. Pausing is the most visible call to action on the interface and ‘pause on this site’ is also first in order of appearance. ‘Pause on all sites’ will disable AdBlock until you either open up a new browser session or re-enable AdBlock from the popup menu. We wanted to avoid users choosing the latter, people tend to forget that they have disabled AdBlock and then start seeing ads.
We realized that there might be some misunderstanding as to what “Pausing“ actually means. We had an assumption that the word ‘pause’ read as something temporary, but via user testing, we learned that was not always the case. Our conclusion was that if you are not setting the parameters for what a value is, it becomes ambiguous. A competitive product has a timed drop down, but after discussing it we came to the conclusion that you never really know how long you will actually need to be paused. More importantly, many people who want to pause AdBlock on a specific site would like AdBlock to be paused there every time they visit.
Priority #2 Allowlist Clarity
Prior to our redesign the user had two choices of adding to their allow list. One was ‘Don’t run on this page’ and the other was ’Don’t run on pages on this site’. Again, the first choice was 3x more popular and we wondered if the order effect was again responsible for its popularity. After much discussion we decided that the use case for only adding one page at a time was quite small. Typically a user will want to add an entire domain (although they may not realize it). ’Don’t run on pages on this site’ added an entire domain. Once clicked, a ‘wizard’ would appear with sliding adjustments and multiple buttons. It may be that once this modal appeared people were apprehensive, they were not sure what the sliders meant and feared it was too advanced for them. Instead of expanding the scope of the project, we decided to tackle that wizard redesign in a future sprint.
We realized that we needed to demystify the popup menu functionality. No matter what we called these actions behind the scenes, at the end of the day people needed to be able to navigate and adjust ad blocking to meet their needs. We went through many iterations on how to describe the functionality. In the end, we landed with retaining the word ‘pause’. Pausing has been a part of the product for over 10 years, the familiarity of it was worth preserving. There is a level of comfort and understanding that inherently goes along with being able to ‘pause’. The lack of permanence is reassuring. With over 70 million users worldwide, being able to provide certainty in their experience was critical.
Early Wireframes
One of our assumptions was that people access the popup menu mainly for the ability to ‘allow ads’ in an effort to support content creators. Our initial thought was to highlight the URL a user was on, and have a global condition of ‘allow ads’ with 3 choices: never, once and always. When AdBlock was installed it would default to ‘never’ - which meant it was ON and blocking ads.
We added hover states for the status area to give more context to the user but we also ran into a slew of complications as we got to second and third level consequences. 'Once' seemed odd, and what does it become when it is selected? Allowing ads ‘always’ disables AdBlock, and at that point we also had a large button which did the same function (however the former also added it to your allow list). Sadly, our solution still seemed confusing.
Early wireframes using a 3 button solution. Not working!
AdBlock customer support pointed out that maybe we didn’t need to be explicit in that AdBlock was on and running - that it was expected. Allow ads ‘never’ was basically a confusing way of saying that AdBlock was running and doing its job. This was very freeing to the UI as it meant that we could remove a possible point of confusion for the user, and more importantly, only have 2 button options.
Refining the UI
By stating the site url at the top of our popup menu, it clearly defined that the actions below were in direct relation to it. Adding a global action header ‘pause on this site’ above 2 actionable buttons gave choices of time. ‘Once’ read for right now (temporary) while you are here. And ‘Always’ was more permanent, it communicated that it would persist until told otherwise. The dichotomy of “once“ and “always“ clarified meaning. The updated copy is easier to understand and the buttons made the actions more accessible and intuitive for the user.
After much consideration, we removed the ability to ‘pause on all sites’ (disable AdBlock) from the popup menu - although we retained a way for more advanced users to access that functionality. As mentioned earlier, pausing AdBlock and forgetting is problematic. We would much rather people understand how they can be in control of their content and adjust accordingly as opposed to using a quick fix.
Here you can see how we mapped the current popup menu functionality into the redesign:
‘Block an ad on this page’ previously brought up what we call our block list wizard, it is a way for the user to target specific elements on a page and essentially hide them. The elements you hide will stay hidden each time you visit that page in the future unless you ‘remove the hiding rule’ via the pop up menu. This is a very helpful feature, but it’s not just for ads - you could block social elements or anything else that might trouble you. We wanted to give users the confidence to try out what at first glance may have seemed like an advanced feature. We renamed it to be the very friendly ‘Hide something on this page’ which not only broadens the scope of your abilities beyond ads, but the word ‘hide’ has the connotation of additional functionality. AdBlock is blocking ads and if I want to hide something else, I can go ahead and do that.
Lastly, we wanted to give our power users the ability to fine tune their experience at a more advanced level. The ‘More pause options’ brings up our allow list wizard. As mentioned earlier, this wizard is something that may frighten a new user, but having quick access to that functionality is essential to an advanced ad blocker.
We are excited to release our first major redesign of the popup menu since 2009. Many hours of collaboration can be seen within this application. Our commitment to create more meaningful, usable and reliable products through iteration has never been stronger.
Popup menu redesign