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