Making the feature discoverable

Jun 22, 2009 12:03 GMT  ·  By

The Beta version of Internet Explorer 8 shipped with a big Emulate IE7 button next to the Home button on the Command Bar. And yet end users looking to fix IE8 compatibility issues with certain webpages failed to notice or understand the option available to them. In order to increase discoverability of the Compatibility View feature in IE8, as well as get the message across to end users, Microsoft opted instead to deliver a small icon next to the Refresh button on the right hand side of the Address Bar, in the final version of the browser.

Jess Holbrook, User Experience Researcher, and Ben Truelove, User Experience Designer, claim that it was the best solution available for Microsoft. According to the duo, end users have a natural tendency to repeatedly click the Refresh button in case something goes wrong with the layout of a page. Clicking the refresh button twice on IE8 while on a particular website will cause the Compatibility View button to kick in and present users with a balloon informing them that they can improve the layout just through a simple click.

“In the lab, we showed participants from one to three different sites with layout or content problems. At each site we asked them what they would do if they came to a site like this. Most clicked Refresh as we expected. What we found was that of people who saw the notifications, about two thirds reacted to the first notification and the other third reacted to the second notification. Showing the second notification caught the attention of a group of people who were very focused on the content of the page at the first site but were more likely to notice things outside of their normal pattern at the second site,” Holbrook said. “There was also a group who saw all three notifications and dismissed or ignored them all. We believe these users would not pay attention to the notification no matter how many times we showed it.”

The UX team working on the Compatibility Button design looked at several options, but ended up going for a page broken in half. Holbrook explained that this design managed to best transmit the message that the icon was related with a feature set up to resolve a broken webpage. “When we tested the icon in the lab, we found that the majority of participants understood that the icon had something to do with the page with a problem they were looking at. Seeing the icon led most people to read the tooltip that explains the feature. After reading the tooltip, we saw many positive reactions to the icon and that it made sense given what the feature does,” Holbrook added.

IE8 Compatibility View is a feature related to the multiple rendering engines of the browser. Microsoft had to strike a balance between introducing support for modern standards and ensuring ongoing compatibility for websites designed for IE6 and IE7. In this regard, while the company also tried to convince webmasters to adapt their websites to IE8, it also took the measure to adapt IE8 to IE6- and IE7-tailored websites.

“We expect most users to understand Compatibility View and when to use it. Of our lab participants who read the Compatibility View tooltip, the notification balloon, or tried the feature, all have understood the feature’s purpose. Most importantly, everyone who understood the feature, continued to use it on the sites they encountered that had issues. This was true for our lab participants and also for our field research participants,” Holbrook revealed.

Internet Explorer 8 (IE8) RTW is available for download here (for 32-bit and 64-bit flavors of Windows XP, Windows Vista, Windows Server 2003 and Windows Server 2008).