All Posts Pattern: Linking To Non-Web Documents

by: Mia Silverman on Feb 17, 2009

I recently encountered a common design question while working on an intranet redesign project, “Should web links that point to PDFs and other non-web documents open in a new window?” Poking around the web to see what examples or standards I might find on the topic,  I found an article by Jakob Nielson titled “Open New Windows For PDF and other Non-Web Documents.” Jakob’s article offers guidelines that I thought made a lot of sense, but one of them I disagree with and I offer an alternative here.  Also, I provide an example of a good hyperlink format at the end. A summary of Jakob’s viewpoint is: “When using PC-native file formats such as PDF or spreadsheets, users feel like they're interacting with a PC application. Because users are no longer browsing a website, they shouldn't be given a browser UI.” And, because users frequently close document windows, it’s a good idea to open the document in a new window. Here are the 4 guidelines for linking to non-Web documents he suggests:

  1. Open non-Web documents in a new browser window.
  2. Warn users in advance that a new window will appear.
  3. Remove the browser chrome (such as the Back button) from the new window.
  4. Best of all, prevent the browser from opening the document in the first place. Instead offer users the choice to save the file on their harddisk or to open it in its native application (Adobe Reader for PDF, PowerPoint for slides, etc.).

While I agree with the first three guidelines above, the fourth one I do not. My experience observing many users is that they find this type of behavior extremely annoying. Thinking from their user’s point of view, why would I want to take the additional time to either load a file in its native application or save the file to my hard drive (where I would then also have an extra file hanging around on my machine), when I could just have easily clicked the link and had it open more quickly in a browser window? While searching the web, or my intranet, I may not even know whether the link I clicked is something I am actually interested in until I’ve had a chance to look at it. Therefore, I’d like the process of opening the file to be as quick and easy for me as possible. Instead, I suggest replacing this fourth guideline with a new one: New Guideline #4: Display the file extension in the link name. For example, if a link points to a PDF file, the link name should read: Link name (pdf). This practice  supports the other guidelines by giving the user the context to understand why a new window with no browser chrome opens when  clicking the link. And, it does it in a nice streamlined way. Alternatively, an icon can be used to visually represent the file type instead of showing the file extension in text, but this may be distracting and/or messy if there are many links to PC-native files listed on the page, such as the pages I encountered in the intranet design project. And, an icon may not work as well if you are already using a different icon to warn users that a new window will appear. Lastly, I had really hoped Jakob’s article would provide a few examples of what an appropriate hyperlink format looks like. Since this helpful piece was missing from the article, I thought I’d include it here:

Examples of what NOT to do

Example A:

  • Example link one
  • Example link two
  • Example link three

These links are missing their file extension, and a warning that the links will open in a new window.

Example B

  • Example link one 
  • Example link two 
  • Example link three 

These links use an ambiguous icon to warn the user that a new window is opening. For example, the icon could also be interpreted as a link to an external site. The file type icon is also a bit confusing when positioned next to a second icon for the same link.

Examples of what to do

Example A

  • Example link one (pdf) 
  • Example link two (doc) 
  • Example link three (pdf) 

These links follow the convention I suggest here.

Example B

  • Example link one (opens new window)
  • Example link two (opens new window)
  • Example link three (opens new window)

For user populations that really need things spelled out, you could be even more direct, by putting text like “opens new window” instead of the file extension. In this case, an icon with the file type is very helpful.