Dos and Don’ts on how to place the listen button

When we deliver our implementation instructions to our customers, we include documentation on tips of how and where to best place our Listen Button.

As our service differs substantially from traditional tools for text content on websites (such as print, email and/or share options), it is essential to implement ReadSpeaker in web pages in such a way that it is clearly noticeable as an option to use. Yet it should blend in with the overall look and feel of the site. In other words, the implementation should be just right, not overbearing, but also not hidden away so that users can immediately activate the ReadSpeaker listen function.

Over the years we have been able to measure, by usage statistics, which sites are successful with ReadSpeaker and which are not. By taking a closer look at both successful and unsuccessful sites, we have been able to come up with some best practices regarding the Dos and Don’ts when implementing ReadSpeaker Listen Buttons.

Design of the Listen Button
Use a design for the Listen Button that clearly explains what the button is for. To start the ReadSpeaker service the users simply click the button that calls the service. It is therefore essential that the button you implement on your pages is self explanatory. It should be designed in such a way that a user intuitively knows what is going to happen when the button is pressed. These days few people have any doubt what’s going to happen when they press the button with a picture of a printer on it. In our experience a combination of an explanatory text (for instance “Listen”) together with a graphical icon that enhances the meaning of the button/link works best. We offer Listen Buttons that are used today on thousands of websites. For usability and awareness reasons we introduced a unified icon to identify that the website is equipped with a ReadSpeaker web reading service. When website visitors see this icon, they learn what happens if the icon is clicked; the page will be read out loud to them.  Of course you can also design and use your own button if ours doesn’t fit in with the look and feel of your site, but keep these design guidelines in mind when doing so. Here are some examples of buttons we have designed purposefully for our customers.

Examples of LIsten Button

Where to place the Listen Button
You can have the best Listen Button in the world, but if you place it in the wrong location on your page, your website visitors will have problems identifying it and usage will suffer. Ideally, the Listen Button should be close to the content and the heading so that there is an immediate mental link between the content and the Listen Button that is displayed. From experience we know that the best place for the Listen Button is just above the page content heading, aligned to the left. An alternative place is the top right corner of the content. If you wish to include the Listen Button with other options to handle the content of the page (such as mail and print) it is recommended that you implement this similar to the example below. As you can see, the buttons are placed intuitively close to the content.

Number of Buttons
If your site features multiple blocks of content (for instance different articles) on the same page, then having a single Listen Button may not be enough. It is then highly recommended to use multiple Listen Buttons per page. This style of implementation has the advantage that the Listen Button is always close to the content, providing a mental link between the content and the option to listen to the content. The Listen Button remains visible, even if you scroll down to the bottom of the page. A good example is on this blog :-)!

One thought on “Dos and Don’ts on how to place the listen button

Comments are closed.