Anatomy of a Widget

As regular readers of this blog know, my employer recently launched a widget that I’m pretty proud of.  It’s a distributed rating and community widget with full read/write capabilities.  The initial use case for this widget is as a blog feedback and community badge.

I thought it might be useful if I went through each component and view of the widget and explain what everything does, and the thought process behind each.

Get comfortable, as this is a pretty long post.

Purpose / Scope

Any widget that expects to earn real estate on a blog must bring something to the table for the host site.  This read/write widget attempts to do four things for the host site:

1) Provide feedback / consumer ratings functionality.  With this widget, sites can add a slick, sophisticated consumer ratings engine in minutes.

2) Build Community.  This widget provides some simple social media functionality by displaying the icons of recent reviewers, and letting folks scroll through the reviews of others.

3) Drive Traffic.  RateItAll is retooling its destination site to drive maximum traffic to blogs that implement the feedback badge.  A site wide “hottest blogs” module will be launched shortly to RateItAll’s 800K monthly uniques in order to promote the blogs that are driving the most ratings via the widget.  The obvious inspiration for this model is Digg.

4) Build Links.  Any blog that implements the feedback badge gets a targeted, direct link from RateItAll’s blog directory.

In return, we are seeking the following:

1) Review Content and Rating Data.  Reviews published via a widget simultaneously appear on RateItAll.com.  This content is owned by the reviewer and can be removed from the RateItAll network at any time at their discretion.

2) Widget Distribution.  The best way to distribute a widget is in the wild, via the widget itself.

3) Real Estate and Backlinks (more on this to follow)

I intentionally left “drive traffic” off of this list.  As ZDNet notes, this widget is about content generation that can be leveraged by both the host site and RateItAll.  Unlike many of the current generation of widgets, branding is not a primary goal for us either.

I think an important first step for anybody working on their widget strategy is to try and get their brain around the value exchange that will take place when a blogger or profile owner places your widget on their site.  What problem is your widget solving, and what do you expect to get back for solving this problem?  Is it a fair exchange?

Synching Widgets with Home Base

A critical aspect of this widget is the tie in with the RateItAll.com destination community.  Reviews posted via a widget show up simultaneously on RateItAll.com and vice versa.  Registrations captured by the widget automatically register the user with RateItAll.com, and vice versa.

RateItAll.com’s destination community supports our widget strategy in a couple of important ways:

1) It drives traffic back to participating blogs, sites, and profile pages
2) It provides the monetization infrastructure for the content collected via the distributed rating network
3) It provides widget distribution by pushing the rating widgets to the site’s large destination community

As much as I like the idea of a fully distributed, widget powered network that only exists at the edge, I believe that widgets backed by a sturdy home base community have a better chance for success than those that exist solely on a distributed basis.

Heading and Title

The orange icon in the top left of the widget is the RateItAll logo.  We used it here because it’s a subtle way to brand the widget, and the up and down arrows provide a nice visual representation of the action of rating.  We went back and forth as to whether the icon should link back to the home page, and it was only after some testing that we decided to activate this link.  Folks were clicking on the icon and expecting it to go somewhere.  So we linked it.

The scrolling title is one of my favorite aspects of the widget, and its purpose is more functional than cosmetic.  Because this widget will eventually need to represent the more than one million user generated listings on RateItAll, it needs to account for varying character lengths for titles.  The scrolling title was the only way to manage this.

Most of the issues that cropped up around heading and title for us had to do with either trying to predict potential fraud uses and how to deal with the wildly varying character lengths that you have if your widgets are user generated content.

Rating and Review Field

The rating interface and review field is the default view of the widget.  The inspiration of this view was Answerbag’s Q&A widget which I reviewed a while back.  I found the text field inviting, and as this widget’s “write” functionality is its differentiator, we decided that it should be front and center.

Down the road, we will probably let the publisher choose the default view.

The empty stars represent the most visual and real estate conserving way that we could get across the idea of rating.  Users can rate the item by clicking an empty star – if they try to submit a review without a rating, they are prompted to return to this view to submit their rating.

Footer and Nav Buttons

Immediately beneath the review field sits the all-important “Get This Widget” link.  Once we put the widget in open beta, this link will point to the widget configuration tool.  While we toyed with the idea of in widget configuration, we just weren’t able to spec out an acceptable level of user experience within such a small footprint.

For verticals other than blogs (e.g. a feedback badge for Barack Obama that might be relevant to numerous sites), we plan to include a “copy this widget” link instead that generates the code within the body of the widget.  There are a couple of widgets that do a nice job with this functionality including Chipin.

Of course, there is no registration required to grab or copy a widget.

To the right of the “Get This Widget” link sits the “Submit” button.  This particular location on the widget changes depending on the view, and acts as our catch-all location to put functionality that we couldn’t figure out where else to put.  More on this to follow.

The nav buttons provide access to the four primary views of the widget: the Rate It! View, the Community view, the Browse Reviews view, and the About Us view.  Mousing over each of these nav buttons tells the user what it does.

HTML Link

Beneath the body of the widget there’s an HTML link with the structure “Category Name on RateItAll.com” which pulls from RateItAll’s taxonomy.  So the previously mentioned Barack Obama widget would have the text “2008 Presidential Candidates on RateItAll,” and an Elbo Room widget (SF bar) would display “San Francisco Bars on RateItAll.”

This link has two purposes – to provide the user with access to related content, and to support our SEO efforts.

We view these SEO efforts as a win / win for us and the publisher, as traffic will be routed back to participating blogs.  We are intentionally not optimizing for the blog’s name – we chose instead to optimize for the category of that the blog falls under (e.g. optimizing for “Web 2.0 Blogs” as opposed to “Read/WriteWeb.”

Because this link sits outside of the .swf file, it can be easily removed by the publisher.  We’re OK with this.

Login / Join View

When a not signed in user submits a rating / review, they are prompted to join or login.  While putting up a registration barrier is not ideal from a content generation perspective, in the world of credible consumer ratings, there’s no way of getting around it.

The toggle functionality between the join and login fields was modeled off of the excellent Box.net widget.  To date, Box.net is the only widget that I’ve seen to tackle in-widget registration, and I think they do a masterful job.

Logging in to one widget automatically logs you into all RateItAll feedback widgets, and logging out of one logs you out of all.  Widget login/logout is not synched with RateItAll.com login at the moment – we’re trying to figure out the best way to manage this piece by looking at services like MyBlogLog as a model.

Community View

The Community View displays a list of the most recent ten users who have rated the item.  This view was modeled off of the MyBlogLog widget, and clicking on a user’s profile picture takes them to that user’s RateItAll profile, where numerous social media features are provided including messaging, testimonials, friending, and more.

The catch all slot of the Community View houses the logout button.  Clicking this button deletes your Flash cookie, and logs you out of all RateItAll feedback widgets.

Browse Reviews View

The Browse Reviews view represents the “Read” aspect of the widget, and allows end users to scroll through the reviews that have been posted by others.  As time goes on, we expect this view to become a useful way for blog publishers to convert passers by to full time readers / subscribers.  User reviews are one of the web’s most effective tools in driving conversion, and there’s no reason that this shouldn’t apply to blogs as well as products.

Clicking on a review header takes the user to a permalink of the review itself, where the end user can rebut the review, link to it, email it to a friend, or click through to post their own review.

The catch all slot of the Browse Reviews View holds a link to view all reviews that points to the RateItAll hosted listing for the item.

About Us View

This view shows a short snippet which explains what the widget does.  We’re considering swapping this out for an About section on the item being rated.  For example, if we decide to do this, a feedback badge on Read/WriteWeb would show “About RWW” instead of About RateItAll.

Next Steps

Moving forward, we are in the process of trying to address most of Ivan Pope's Ten Sins of Widget Makers, as well as tweak the widget so it works for different verticals.

For more coverage of RateItAll’s distributed rating widget, see Read/WriteWeb, ZDNet’s The Social Web, Stuntdubl, Stefan Juhl, and Stickiwidgets.

To participate in the closed beta of this widget, click HERE.

If you’d like to provide feedback on RateItAll’s Distributed Rating Widget, use the widget below.

Comments

[agerhart]

Excellent post man....thanks a lot for putting that together.

As a relative newbie in the widget space it is helpful to see a complete breakdown like this with the benefits to the user and company. I'll definitely be referencing this post as we begin to scope out the Phase II release of our existing widgets and begin designing our next wave of widgets.

Thanks!

[Ming]

Great post... This and Ivan's post will definitely be referenced frequently. My opinion mirrors that of both and I attempt to address all the same issues.

[Ivan]

Top class post - one to cut out and keep for any aspiring widgetmaker. Me included. Thanks.

[Nurceyiz Evtekstili]

http://www.nurceyizevtekstili.com
http://www.erdogdubilgisayar.com
http://www.nevresimler.com