The existing audio module on Bing’s search results page is primarily used for showing songs by a specific musician/artist. Clicking on the play button would lead the user to a third party website to listen to the audio – ideally the audio would play inline but we were set back by the high cost of obtaining the rights to play these songs directly on Bing. With public audio clips however, we were able to leverage the content to create a seamless inline audio experience. For example, searching for Martin Luther King, Jr. would show a clip of his famous “I Have A Dream” speech which then the user could listen to inline (outlined in red below).
Although developing a solution for the inline audio experience was priority 1, a secondary problem surfaced that I felt needed solving. That was to visually differentiate the play icon in both the existing and new inline experiences.
So what’s the big deal, don’t they both play the audio? Yes, and no. If you recall, the existing play button redirects the user to a third party website, while the new inline play button which looks identical functions differently. And so began my quest to find a solution to better inform the click and give the user a better sense of what would happen once they clicked the play button.
The first step was to look at our set of existing icons – since I was designing for a section of multimedia I decided to check out the videos page. Lo and behold I found the icon above (outlined in red) which indicates that the media would play on a third party website. So below was my solution which carries a consistent style as its inline counterpart.