14

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.

enter image description here

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

3 Answers 3

18

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.

enter image description here

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.

10
  • 1
    I think the answer will be complete if you also include the fact that icons do increase cognitive load due to the sensemaking effort involved; the fact that very few icons are conventional, and even these are often unknown to technical novices; and the interference effect, where the addition of (unclear) icons can actually reduce the user response time.
    – Izhaki
    Jan 27, 2014 at 14:59
  • 1
    If I were to choose either only icon, or only text (because of space-issues) I would have chosen the bar on the left with only a beer... Signs are probably best represented with icons (especially road signs). But as everything else, it depends on the context, and, of course - the users. Test each solution with real users, don't always listen to generalizing studies. (Even though they are mostly right)
    – Velkommen
    Jan 27, 2014 at 15:23
  • One point here: "Universally understood icons work well" - there is a chance that the new window icon is universally understood. (note: I'm not saying it is or it isn't, but it's certainly possible).
    – JonW
    Jan 27, 2014 at 16:22
  • @JonW True that! But there is confusion between share and open as well, which would support the theory of using words together with images. Jan 27, 2014 at 17:04
  • What about using a pdf icon with a new window icon? But then you need to ask yourself if the icons could carry the message on their own. I think the pdf icon is understood universally. Jan 27, 2014 at 17:48
9

Tl;dr: Use the PDF iconenter image description here or enter image description here, 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.

7
  • Whoops forgot to mention this is for a PDF link. Jan 27, 2014 at 14:53
  • Considering how often application's logos change, I'd suggest using something more permanent. Even PDF would work in this case
    – fregante
    Jan 29, 2014 at 1:28
  • @bfred.it, interesting thought, but better to stick to the trademark owners style guides. Also, I'd argue that adding a text link as such doesn't necessarily add anything other than making a style choice. I can't find an example of the PDF logomark that looks much different from either above.
    – Matthew
    Jan 29, 2014 at 8:15
  • Consider OS X, you won't see that icon anywhere, the system can read PDF autonomously. The icon is different and not even red. The program you use to open it, it's not necessarily the best way to represent the format.
    – fregante
    Jan 29, 2014 at 16:23
  • Except this is for a web site, not for files on the operating system, which are two very different UX contexts. PDFs are a standard brand on the web, and that logo has been the common mark for them for decades. In the US, facial tissue is commonly called "Kleenex". Doesn't matter whether it's technically correct, it's colloquially used because it has the widest reach and recognition.
    – Matthew
    Jan 29, 2014 at 21:56
0

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.

1
  • You definitely have some great points for someone who is not part of the "icon centric" world. We definitely need to keep in mind users (like yourselves) that see an icon and have no association with it. Great point with the hover over text, as that is what many sites do now to help users learn what things do what. That being said, these are all just your own opinions. To answer the question more fully, you might provide some helpful links to studies, or resources, which explain how to resolve the issue, rather than just describing a frustration with it.
    – Andrew
    Nov 25, 2014 at 21:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.