Patterns for Expressing Expansion Link Weights in Web Applications

I wanted to give a huge thanks to everyone who responded to my Weighty Asynchronous UI Patterns post – I received a ton of helpful and insightful comments.

I’d like to summarize the discussion into a set of patterns for future reference using the feedback you all gave me. So here we go:

Formatting “In-Place” / Javascript Expansion Links

  • Use a downward arrow:
  • Use a disclosure triangle widget:
  • Use the following types of text in the link text itself:
    • “Expand”
    • “Expand this”
    • “Expand rest of comment”
    • “Show more”
    • Examples:
  • Use a [+] / [-] expansion widget:
  • Use a collapsible panel widget

Formatting “Real” Links that Necessitate a Full Page Load

  • Use a forward arrow or other icon to signal a fresh page load:
  • Use the following types of text in the link text itself:
    • “Read More at foobar.com”:
    • “Jump to full post”
    • “…”

Ambiguous Link Treatments that Can Make the Link’s Weight Confusing

  • “read more”
  • >> – comments seemed divided as to the meaning of this one.

General Tips for the Treatment of Links

  • Opening links in a new browser window appears to be universally hated, so don’t do this. Just use a normal link and let users decide how to open it using their browser controls.
  • If you can, add a “title” attribute to your link tag with information to help users determine the weight of the link.
  • Consider making both a “real” link and a javascript “expand” link available, labeling both clearly using the techniques suggested above
  • I’m not sure where lightboxes come into play in all of this. Since they are not very common and thus not to be expected, they should probably be delineated with a link.
  • In general, I think most users expect links to be “real” links, so if it’s not a real link – if it’s an in-place expansion, lightbox, or something else, mark those links as being special, and leave “real” links plain.
  • If you must pop open a new browser window or pop up, the following types of icons are probably good to use to signal this:

Other Resources

By the way, I made all the icons used in the examples above for this post. If you like any of them feel free to cut them out and use them under the public domain.

Postscript: Codebeard asked a good question in the comments: what did we end up doing in Fedora Community? Luke Macken helped me fix it as shown in the animated gif below:

As a special bonus, here’s the same pattern applied to viewing SSH keys in Fedora Community user profiles. (*ahem* someone has been having too much fun in Gimp today, eh? 😉 )

About Máirín Duffy

Máirín is a principal interaction designer at Red Hat. She is passionate about software freedom and free & open source tools, particularly in the creative domain: her favorite application is Inkscape. You can read more from Máirín on her blog at blog.linuxgrrl.com.


5 thoughts on “Patterns for Expressing Expansion Link Weights in Web Applications

  1. Wow, great job. I’m impressed by how quickly you put all of this together.

    I think I’d be happy with almost any of these, so I guess it’s now just a matter of which behaviour do you want to implement?

    Posted by codebeard | April 15, 2009, 8:46 pm
  2. @codebeard: hey thanks 🙂 i ended up using the downward arrow in Fedora community. and it came out awesome, I used jquery. I’ll post an animated gif to the post to show it 🙂

    Posted by mairin | April 15, 2009, 9:07 pm
  3. Awesome post!

    Posted by Marius Gedminas | April 17, 2009, 3:47 pm


  1. Pingback: No more paintain. « mairin - June 11, 2009

%d bloggers like this: