Linking to feeds: Another approach
A while back on this blog, I asked for help in designing the most usable way to present links to a feed. (see: "The Usability of Subscribing to Feeds," 26 May 2005) That is, considering the vast majority aren't even aware of what RSS is, why are we peppering our pages with little orange icons that link to garbled-looking XML markup?
There was a fantastic discussion in the comments, and we took much of that to heart when we started developing feeds for statistics on Measure Map. And after much iteration and discussion, we decided to implement something a little different, and see how it goes.
Our first decision was to include a tiny XML icon in the page navigation at the top of the interface.
We chose this strategy for two reasons.
- We are pretty confident that our users would recognize the orange icon. To even make use of Measure Map, one must have a blog. In the act of setting up and maintaining a blog, it seems a reasonable bet that our users have had some familiarity with feeds. So we're making assumptions about our audience -- usually a risky strategy -- but one OK about.
- We're planning on offering lots of feeds. There will eventually be four or five feeds for every page in the application, and as we were designing for that, the interface started filling up with little orange icons. So why not condense them down into one element in a consistent place on every page?
But, what does that icon do? Here's where we struggled with convention. Typically, people either click on the icons or drag them to an aggregator. Some folks right-click and copy the feed's URL. We decided not to link feeds directly from the icon, but instead offer up a page that shows all the feeds a user can subscribe to.
Our inspiration was this page on the New York Times site. I've always liked this approach because you can add lots of context and help around the little icons. But maybe even more importantly, it goes a long way in helping people discover all the feeds a site offers. I knew about the top news stories feed at the Times, but didn't know they offered a "Most Emailed Stories" feed. Cool.
The only other thing we wanted to add to this page was a little drop-down menu for auto-subscribing. These have been showing up in all sorts of places recently, most notably in the nicely redesigned "Browser Friendly Feeds" over at Feedburner. (Here's a screenshot.) While I don't really relish the idea of adding every single online aggregator to my pages, the one-click subscribe function is nice. We opted not to do this, however, since most online aggregators do such a poor job with privacy and your feeds. We aim to keep your stats private; you wouldn't want those numbers inadvertently showing up in a BlogLines search, right?
It will be interesting to see how our users respond to this. Worst case, we mismanage the expectations they have for feed icons. Part of me feels like that isn't really such a big deal. Especially considering the experience we can design on that feeds page.
Anyway, there's a little view into our design process and why we chose this approach to feed linking. And to answer the inevitable questions: yes, we're sending out invitations to Measure Map as fast as we possibly can. I promise.
This entry was written by Jeffrey Veen and posted 21 December 2005 at 3:49 PM. It was filed under Web Design.
When I wrote the previous half-finished version of my site, I intended to do something like this--have it one of the persistent links in the sidebar, which linked to an explanation and URI for the feed.
I think it's a good approach, because the vast majority of web users have absolutely no clue what the boxes mean (as you're no doubt aware).
I don't know how you did MM, but I think it's a good idea to keep a link to the feed embedded in the pages as well, since I always subscribe using Sage's auto-discovery feature.
Just another thing to remember when I finally launch a useful version of my site...
I don't really like this convention of using XML as the text of the icon. XML doesn't describe in any useful way what the content is, it merely describes the syntax or 'transport'. I mean, technically your site's pages are XML, so it could even be a link to a sitemap or something. I think it's a bad practice that has spread and doesn't actually make any sense without this context.
Why not use "RSS" or "ATOM" or "FEEDS" or something more specific?
Also - here's an idea for you to still allow people to drag the feed to their aggregators while also allowing you to link to a 'feed index': use the href to link to a default feed (assuming there is one) and then use the onclick parameter of the link to override the href and link to your list of feeds for any user clicking the link.
I've seen the orange box with rss in it often enough to think that it works better than the more prevalent but wrong (as pointed out above) xml model.
That's nice. I think as more syndication becomes more prevalent and transparent, the idea of grouping all available feeds for a site on one page is a really good one. I just finished working on a site that has at least 4 different feeds for different content areas and it might be appropriate to provide a single page that both explains syndication and provides all the site's feeds.
As for the icon, the IE team just announced that they're adopting the Firefox icon, which is format agnostic.
http://blogs.msdn.com/rssteam/archive/2005/12/14/503778.aspx
i dig the feed, jeff. it took a second for me to actually pause and read the instructions, but that's my issue. the output is really useful and smart looking. it'll definitely save me time. i like saving time ;-)
btw, you might want to think about using the firefox rss icon. IE just standardized to it, so we did the same over at bountycounty.org (a shameless, but necessary plug)
How does this approach work as browsers adapt to parse and display feed content as seamlessly as they do XHTML content?
That is, if you link to the XML file and your browser actually knows to do the right thing(tm) with that content, is this approach actually future-proof or an IE5-friendly hack?
Yes XML button definetly deserves more important place than bottom of the page. Good thinking.
I think it's a great approach. As for the icon, check http://feedicons.com/
People (and IE and Firefox) are trying to do exactly same thing.
Hey, I got your book as a gift and you did a nice job with it. :)
I enjoyed reading these ideas. Thanks. It worked for me on several different levels.
I;m a blogger, and web designer, and I confess that I don't yet subscribe to feeds. I know what feeds are, I've just never felt the need to set any up. I know if I spent 15 minutes doing it I would probably instantly appreciate it.
One of my goals for the new year is to spend less time in front of the computer (without really reducing the amount of information that I consume). Maybe RSS and a palm top are the way to go for '06.
PS: "Art and Science" was one of the first web design books I ever bought, and I'm happy I started there. It's been a great resource to me.
This is a nice way to access private feeds, including the username and password in the url, but as far as I know, this isn't widely supported in parsers, or is it? Authentication isn't part of the RSS specification, so privacy in feeds is a big usability issue.
I once had to deal with this and I chosen to go on a different direction. I've decided to include a semi-random string in the url, and decided to provide the link only in a private page, accessible only by members... this way it won't get caught by search engines... although, that "bloglines search" issue screws up my plan. :( I know! Ban bloglines User Agent from accessing my feed!! buahahah... :) kidding, of course.
As for the icons, yes, I'm all for using the feed icons made by Matt Brett. ;)
Currently:
() More...
About Me
Bio: Jeffrey Veen
Book: "The Art & Science of Web Design"
Book: "HotWired Style: Principles For Building Smart Web Sites"
Work: My LinkedIn Profile
Travel: China, Tuscany, Kayaking in Baja, Touring Costa Rica, Studying Theater in London
Popular Posts
» Making a Better Open Source CMS
» Seven Steps to Better Presentations
» A Contrast in Urban Design
» IA Jargon Watch
» On Writing Short
» Pain and Cycling
Recent Photos
XML Feeds
Subscribe to my site
Click the link above to be notified automatically every time I add a new post.

