Purpose/Problem:
For this small project I worked with another student to explore alternative in-browser ad warning techniques. We were not interested in completely removing ads, as many ad blockers already do, but we wanted to create a system that would warn users who were about to click on an ad without completely altering their web browsing experience.
Overall Objectives
– Create a browser extension that warns users when they are hovering over an advertisement
– Clearly label online ads
My Roles
– Coder
– Designer
Process
Research Existing Solutions
We researched different available ad blocking extensions to see how established software functions. Most ad blockers prevented advertisements from being displayed when a webpage first loads, but the Perceptual Ad Blocker created by Princeton and Stanford researchers covers AdChoices ads with a transparent cover and the text ‘This is an ad’ (See image below).
Perceptual Ad Blocker in Action
This style of ad blocking was similar to our envisioned solution and we wanted to leverage the extension’s ad recognition functionality. Since the Perceptual Ad Blocker is open source, we were able to download and use its code as a starting point.
Explore Color and Sounds
After determining the underlying ad detection framework, we needed to explore different ways of warning users that they were going to click on an ad. We envisioned that a user would trigger a sound and visual warning when hovering his or her mouse over an ad. We decided that appealing to two of users’ senses would be more attention grabbing than a simple text-based message and began to explore appropriate warning color and sound options. After speaking with multiple potential users, we found colors and sounds that could provide a warning without being too alarming.
Code
We determined that the appropriate time to activate the color and sound alert was when a user’s mouse was hovering over an ad. To implement this, we edited the Perceptual Ad Blocker code to activate the new color and sound warning based on where a user’s mouse was. When a user moved his or her courser over an ad, the ad was covered and a warning sound was played. When the user moved his or her mouse out of the ad’s space, the sound stopped and the ad covering changed colors.
Completed Solution
The completed solution functions so that after a webpage loads detected ads are covered with an opaque warning box that contains the text ‘AdChoices Identified’. If a user hovers his or her mouse over the ad, the ad changes color and a warning sound is started. Below is a video demonstrating how the system functions. Make sure to have sound turned on for the full experience.
Future Directions
– Customizable color and sound options
– Blocking additional ad types
– Support for browsers other than Chrome