Text vs Icon (Opens in a New Window)

Question

Over the past months I have been turning small websites responsive and encountered PDF links that spell out Opens in a New Window instead of using an icon. I spoke to the client about using an icon however the client has stressed that users will not understand what the icon means.

Can anyone provide some insight/information on which is preferred over the other?

Answer 1

There are several studies studying users ability to understand icons, text and both. The results of these studies always come to the same conclusion. Double coding (text and image) is always the easiest and fastest for users. Look at the three images below, and decide which one would get you a beer fastest be fastest to recognize.

On a more serious note, Microsoft found that icons alone didn't do the trick.

Many researchers have shown that icons are hard to memorize and are often highly inefficient. The Microsoft Outlook toolbar is a good example: the former icon-only toolbar had poor usability and changing the icons and their positioning didn’t help much. What did help was the introduction of text labels next to the icons. It immediately fixed the usability issues and people started to use the toolbar. In another study, the team of UIE observed that people remember a button’s position instead of the graphic interpretation of the function.

Reference: Myth #13: Icons enhance usability

But there are places where Icons actually can help:

Where icons add value:

• Universally understood icons work well (ie. print, close, play/pause, reply).
• Icons can serve as bulletpoints, structuring a webpage (ie. file type icons for PDFs, DOCs, etc.).
• Good icons can make the look of a webpage more pleasing.

One could argue that the open in a new window icon really is universally understod. However, there are quite a few open in a new window icons around, which are plattform specific, and even changes between releases within the same platform. Further, the share icon is very similar to the open icon. I wouldn't rely on just the icon if I wanted my users to know what they should expect.

But if, and only if, this is a PDF link, you could use the PDF icon and test run with the intended audience and see what result you get. Anything less than 90 percent positive response would give me argument to use both image and text.

Answer 2

Tl;dr: Use the PDF icon or , and drop the text.

Update:

Given your comment (thanks!) the icon tells users it is a PDF, and is, practically, universally recognizable (not meaningfully increasing cognitive debt).

Opening in a new tab is appropriate for PDFs because:

1. Research showed the standard user action after finishing a PDF in a browser window is to close the window.
2. Often, the browser will launch the default PDF reader on the machine and abort opening the new window.

Both of these feel the about the same to the user, and are expected behavior. "Opens in a new window" will actually be confusing for users if their browser is configured to open files in a desktop application automatically.

The icon prepares the user that something uncommon will happen when the click the link. It is both communicative and inconspicuous.

Orig:

The better question may be to ask why the link should open in a new window as a default interaction.

Standard UX for browser links is to target SELF. Users right-click select "Open in a new Tab" or "... Window" when they want to open a new tab or window. This has been a commonly supported interaction on all major browsers for many major versions of each.

For further reading, see this SO question, Jakob Nielsen (#9), and a talk from Jared Spool.

The one exception I'd make, which Nielsen empirically observes, is that links to PDFs or non-HTML files (anything that isn't a web page) should be opened in a new window.

If it is necessary:

Adoption of the icon will likely be effected by the demographics of the site users. Browser demographics can help:

• If the majority of users access using modern, latest-version browsers, the users may be younger or more tech-savvy.
• If the majority of the users access using older browsers, the user base may be older or not "digital native".

However, as pointed out here, browser demographics cannot be the only metric by which you make decisions.

The middle ground for your client may be to add "Opens in a new window" as the roll-over text for those links, in addition to using the icon.

And, since you're only using these links for PDFs and other documents/files, use the icon for the most recognizable application that will open that file (the Word logo, PDF logo, etc). That will be instantly recognizable.

Answer 3

I once read an article about creating web pages, which cautioned designers that their icons might be meaningful to the designer but were meaningless to users. With the transition from text based DOS applications to graphics based Windows programs, developers seem obsessed with replacing perfectly understandable words with funny little pictures. Just because something can be represented by an icon doesn't mean it should be! I notice the top of the comment panel has a text menu. I understand what those choices mean but if they were replaced with icons I wouldn't have a clue unless I moved my mouse pointer over them to get a text explanation.

Even though I taught myself how to use a Dos based CADD program with no help, I have been unable to do the simplest tasks with any of the Windows based CADD programs because of the confusing array of icons that are meaningless. I've had the same problem with graphics manipulation programs. Although I know most of the common icons such as a pic of a printer, there are many new ones to learn. I don't have to relearn how to read in order to understand text menus or options.

I hope the computer world looses its infatuation with cute little pictures and some day returns to more easily understood text options.