I’ve been working a *lot* on the Fedora Community project lately. I’ve been performing a very lightweight heuristic evaluation of the interface so far, and I ran into one issue that I’d like to address but I’m not 100% how to right now. The issue I’m struggling with right now been an annoyance for me on other web sites and web applications, too: how weighty is the link I’m about to click on? Is it going to cost me a full page load?
Here’s a cropped screenshot of the Fedora Planet widget in Fedora Community:
See the Read More link at the end of the post? Would you expect clicking on that link to:
- Take you outside of the Fedora Community application and bring you to the full blog entry page for that blog post (in this case, to Greg’s blog) in the same window. Cost: a full page load.
- The same as above, but in a new window/tab. Cost: a full page load.
- Take you to a page within Fedora Community, using Fedora Community’s UI chrome, that displays just the contents of that blog post. Cost: a full page load.
- Open up a lightbox overlayed on the screen with the full blog post. Cost: almost none, super-fast.
- Expand the bubble in-place, without requiring a page load, to display a longer excerpt or the full blog post. Cost: almost none, super-fast.
During my evaluation, I found myself naturally avoiding clicking on that ‘read more’ link because I assumed it would cost a full page load. Turns out it doesn’t… it expands the bubble in-place, and is very, very quick. But… how can users tell how weighty a click is?
There are some patterns that I’m pretty familiar with that handle similar situations:
- How can you tell that clicking on a email address link in a page will (1) launch your mail client with a new compose window with pre-filled To: field (so slow! *I* hate this!) OR (2) bring you to a web form that will let you send the mail?
- Add a little mail envelope icon next to the link if it’s a mailto: link. Possibly add a title attribute to the link tag to say something like “launches a compose window to send email” (less common for sure.) Looking for a screenshot of this in action, I had a hard time finding it so maybe it’s not as common as I thought. Here’s a quick mock to show what I mean:
- How can you tell a given link is not going to bring you to another web page but instead prompt you to download a file? How much of a time investment will downloading that file be?
- I think it’s pretty common for links to files to have at the least a parenthetical reference to the file extension, and/or how large the file is, and/or how much time in minutes it would take for a given bandwidth rate. Sometimes you’ll see an icon preceding the download link to specify the type of file (e.g., the Adobe PDF logo to specify a download link is for a PDF.)
I don’t know if either of the above type of solutions would work to distinguish between a heavy full-page load link vs. a quick / lightweight expando client-side information expansion. Looking in Jennifer Tidwell’s Designing Interfaces I noticed that she has an example on page 46 (“extras on demand”) that shows a link with a “>>” following it to show that it’s an expando type of link and not a full page load. Here’s what that would look like in the Fedora Planet widget example:
Does that look less weighty than the original screenshot? I don’t know. I’m trying to brainstorm other treatments to solve this issue. Do you know of any good resources for AJAX-y/interactive patterns like this? I did just notice that there’s an O’Reilly book in a similar vein to Tidwell’s called Designing Web Interfaces by Bill Scott and Theresa Neil. I may look this one over. I seem to be having a hard time though finding a good pattern library for this sort of thing online, although ajaxpatterns.org looks promising.