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

[batteries]

http://www.batterylaptoppower.com/samsung/np-q35.htm samsung np-q35 battery ,

[laptopbattery]

http://www.laptop-battery.org.uk/
Welcome to online laptop battery store, we offer high quality laptop batteries: Sony laptop battery, TOSHIBA laptop battery, Dell laptop battery, Acer laptop battery, Compaq laptop battery, HP laptop battery ... ... ...Your need,is our eternal pursuit; Your satisfaction,is our high honour; Thank you for your support .

[batteryshop]

http://www.battery-shop.org/ We offers new and rechargeable camcorder battery brands as Sony camcorder battery, JVC camcorder battery, Canon camcorder battery... http://www.cheap-laptop-batteries.com/
Digital camera battery for Canon, Nikon, Sony, Panasonic, JVC, Kodak, Minolta, Sanyo, Olympus... http://www.power-tool-battery.com/

[batterystore]

HP COMPAQ PB995A computer batteries,Laptop Battery
Buy HP COMPAQ PB995A Laptop Battery from battery-store.eu, brand new, one year warranty, full compatible with: HP COMPAQ PB995A
http://www.battery-store.eu/laptopcomputer/hp-compaq-pb995a-1001267.htm

[laptop battery]

I got the right info about nec op-570-75901 battery on http://www.adapterlist.com/nec/op-570-75901.htm nec op-570-75901 battery but i not sure whether it will fit my notebook or not?

[Used Refurbished Laptops]

all round i would say the HP Compaq Armada is a good laptop. it is very fast and user friendly and easy to upgrade. however it seems to over heat at prolonged periods of use once in awile and only one usb port also the track point mouse is a pain but i just connect a external mouse to it so not a biggy. i only payed $160 for mine havent had many problems using it the internet is super fast the cd rom is so easy to pull out and switch devices im currently still running windows pro and would ...

[david2008]

Dell Inspiron B120 B130 Laptops CPU Cooling Fan
from
http://www.laptopbattery-usa.com/dell-inspiron-b120-b130-laptops-cpu-cooling-fan-p-1724.html

[david2008]

Find this Hotest Dell 312-0366 Battery Replacement for DELL Inspiron 1300, B120, B130/ Latitude 120L Laptop Battery from
http://www.laptopbattery-usa.com/dell-inspiron-b120-b130-laptop-battery-p-1627.html

[Cheap Acer Laptop]

I have got Acer One laptop http://www.cheapacerlaptop.com/acer-one-laptop recently at Cheap Acer Laptophttp://www.cheapacerlaptop.com. Only paid $300 US with shipping!

[ASUS AL22-703 replacement Notebook Batteries]

If you need a computer that’s easy to take along,you can see it from http://www.power-tool-battery.com/notebook-battery/asus-al22-703-1001714.htm ASUS AL22-703 replacement Notebook Batteries,whcih offer the longlife and consistently reliable performance you need to get the most out of your notebook.

[FUJITSU FPCBP200 Laptop Batteries]

Do you want to buy some laptop betteries,you can see it from http://www.cheap-laptop-batteries.com/laptop-battery/fujitsu-fpcbp200-1001719.htm FUJITSU FPCBP200 laptop batteries,Our products are very cheap and very good quality, absolutely let you satisfied http://www.cheap-laptop-batteries.com/

[Cheap Computers]

I am really a die hard fan of all Dell products.......all are really awesome......
http://www.electrocomputerwarehouse.com

[Cheap Computers]

[...] i am fond of these widgets they are dynamic and awesome which makes me real fan of DELL [...]
http://www.cheapcheapcomputers.com/

[Cheap Computers]

[...] My daughter wanted a Dell because of its capabilities and widgets [...]
http://www.pcs4cheap.ca/

[cheap computers]

This very cool widget one should install this widget on his site because it does everything with any lapse and gives your site perfection.

[computer repair Mississauga & Toronto]

Computer repair Mississauga
A2Z PC Computer Repair Toronto is a leading computer repair company in downtown Toronto. We also service Computers needing repair in Etobicoke, Scarborough, Markham, Richmond Hill, Mississauga and Brampton. We are proud to carry the name of Computer Spyware and Virus removal Toronto.
Computer repair Etobicoke
Computer repair Richmond Hill

http://www.a2zpc.ca

[Social Bookmark Submission services]

We make sure that you completely understand the impact and the effectiveness of our social bookmarking submission service, by offering you a free submission

[online store]

The Best Online Store, buy a Computer, Camera Photos, Watches, Wireless Accessories, Netbook, Cell Phones, Electronics, Books, Printers, Scanners, LCD Monitors, Wireless Accessories http://www.myonline-store.com

[Penis Enlargement]

Sexual health is an important part of overall health and male enhancement for sex becomes essential when faced with sexual disorders; even if you keep sex aside

[historical places in pakistan]

Steeped in history and blended in culture, historical sites in Pakistan reflect the

tradition and way of life of the era gone by. There are a number of historical sites in

Pakistan that make an excellent tour.

[Perfect Heaven]

I’m so glad I found this site…Keep up the good work I read a lot of blogs on a daily basis and for the most part.http://www.whiskeyblog.info/
I just wanted to make a quick comment to say great blog.http://www.fashionableblog.info/