How should you display links to PDF files? View More Blog Posts

by Jeff Sauro | March 18, 2010 :: Get RSS Feed

I'm always gathering and looking at data. One consequence of this is having to reconcile conflicting data-points—say data from users who express different perspectives on an issue. For example, one of my articles was recently tweeted with the note:  "any website with the name usability in it should let you know you're clicking on a PDF."

Few things slow the web-browsing experience down more than waiting for Acrobat to load up and then open a large file. Then you need to close the file and reorient yourself back to the webpage. While I'd like to avoid linking to PDF's whenever I can, many journal articles and publications are in PDF format, so it's hard to avoid. So in thinking this was a good suggestion, I started adding notes to my links letting users know that the link would open the dreaded PDF. First I made them look like this:


And then since they often appeared in parentheses, I made them superscripts to stand out from the other material to look like this


All was fine for about another two weeks when I got another tweet that said: "Should we still identify links to docs with file type, size (pdf, 78k)? Superscript? Like." And so I suspect I'm not the only one who has grappled with how to let their users know they're about to have an awkward experience without well, having another awkward experience. What's my solution to this somewhat conflicting data?  Well…more data of course.

Let me know what you would do or have seen that works well for dealing with the PDF-link issue in the comment box below. Oh, and no links to PDF files please.

View More Blog Posts | Updates by Email | Get RSS Feed | Follow on Twitter

Rate this Blog

Avg. Rating 2.4 (10)

Poor										Excellent
0	1	2	3	4	5	6	7	8	9	10

Comments

There are 9 Comments

April 28, 2010 | Cormac wrote:

From an accessibility point of view the 'PDF' should be included in the link anchor text. Some accessibility advocates also recommend the file size and 'Opens in New Window' is also included in the anchor text - this is for the benefit of vision impaired users using screen readers such as JAWS.

April 21, 2010 | Abhay/ Cone Trees wrote:

This is how I link to PDF files at The UX Bookmark (http://theuxbookmark.com) E.g.- [Pdf icon] Reducing the Cost of Eye Tracking Systems (PDF, 97 kb) You can view my implementation here: http://www.theuxbookmark.com/2010/02/usability-engineering/reducing-the-cost-of-eye-tracking-systems/

March 26, 2010 | michelle mussuto wrote:

This reminds me of finding a problem where one doesn't exist. Users are familiar with both the PDF icon and (PDF, 00KB), why is there a need for change? Is this coming from users or designers? It's like sites that use a color other than blue for a hyperlink or use blue/underline for things that aren't hyperlinks.

March 20, 2010 | Gary Barber wrote:

The major issue I have found with gateway pages and displaying the PDF via an page parser is that they are breaking the link to the real file. Sometimes people just don't want to read the article online they want to download the PDF and use it offline. This all depends on the audience, I have often found the PDF shock isn't usually experienced by low level web users, they just except that its another page.

March 20, 2010 | Dorian Taylor wrote:

I use the following CSS (though I don't think it works in older IEs): a[type~="application/pdf"]:after { font-size: 60%; vertical-align: text-top; content: "\2009[PDF]"; } This will match links with the type attribute set to application/pdf. \2009 is a Unicode hair space.

March 20, 2010 | George Birbilis wrote:

Why not show a tooltip (use "description" attribute of the anchor tag)?

March 19, 2010 | Jakob Nielsen wrote:

I actually have a slightly different recommendation, which is to link to a *gateway page* instead of linking directly to the PDF file: http://www.useit.com/alertbox/20030728.html This approach avoids PDF shock, and allows you to use a regular link, since you're linking to a regular Web page. If you don't want to create a gateway page, say for a one-time link to an external paper, then I would use something like (warning: PDF file, 3 MB) after the link. The little PDF icon is only enough if you're dealing with technically savvy users.

March 19, 2010 | John wrote:

Official small icon available from Adobe: http://www.adobe.com/misc/linking.html

March 19, 2010 | John wrote:

Sometimes a small icon if appropriate for the site, or "[PDF]" in the linked text.

---

Post a Comment

Comment

Name

Email Address Not Published, sold or abused

To prevent comment spam, please answer the following question before submitting (tags not permitted) : What is 1 + 5: (enter the number)

Most Popular Content

GoDaddy Web Hosting for $1.99

Six Sigma Training

Featured Product