Of all the social software built on the web in the last two decades, none are as important yet as little talked about as reputation systems. Reputation systems have driven the entire business at eBay.com, much of the business at Amazon.com, drives activity at Digg.com, powers the moderation system at Slashdot, etc…and yet for all the millions of words written about web design very few of them have been dedicated to this type of software.
That’s why I’m really excited about the recent release of Yahoo’s social design patterns for reputation systems. The following graphic from the pattern library illustrates what Yahoo calls the “competitive spectrumâ€, which is a way to classify the activity on your site and helps you to choose which reputation pattern might work best for your community.

My first introduction to the patterns happened by accident. I needed a room for this year’s IASummit and I twittered about not having one. I received a tweet back from Bryce Glass, whom I knew of but didn’t know personally. He was gracious enough to let me share a room with him and over the couple of days I was there Bryce told me about some of the fascinating work he’s doing with Yahoo’s various properties.
Bryce Glass is an interaction designer at Yahoo! He currently works in the user experience group supporting the recently-announced Yahoo! Open Strategy. But in the past year, Bryce was the user experience lead for a Reputation Platform that powers the rep systems for many of Yahoo!s properties. In that time, he had opportunity to work with several different community-oriented sites on Yahoo! on improving their reputation systems, increasing user engagement and generally creating friendlier, more-active communities.
In the talk he gave at the summit, Designing your reputation system, Bryce outlined a framework for designing reputation systems that is probably the best starting point for figuring out how to build your own. In the following interview, he starts from ground zero and explains what reputation is, what a design pattern is, and how to start applying them to your own work.
1) So, Bryce, what is your definition of reputation?
I generally use a fairly coarse-grained definition of ‘reputation’ when discussing these patterns or other work we’ve done with reputation at Yahoo! By my simple definition: one’s reputation in a community is both a history of one’s past actions within that community, and a value judgment about the worth of those actions.
Who makes that value judgment? Ideally, the community itself. So contributions that the community values are good, and those it finds objectionable (or simply has no interest in) are bad. And you, as the author or originator of that content, can be judged according to these same values. Quite simply: contribute to the community and—if the community likes it—your reputation rises.
Obviously, it’s a little more nuanced than that, but…
2) So what is a reputation design pattern?
This family of patterns are a small subset of the Yahoo! Design Pattern Library, which has been out ‘in the wild’ for a couple of years now. I’d suspect that many of your readers are at least passingly familiar with that effort (and, if not, my fellow Yahoo Christian Crumlish has a good video update up on our Developer Network.)
These patterns are notable, however, in that they’re the first social design patterns that we’ve included. I know that this is a direction that Christian wants to take the library in, so expect to see more and more of these in coming months. (Identity representation, participation, more reputation, etc.) But… going back to your question… this family of reputation patterns can be thought of a couple of different ways.
First, and foremost, it’s just an attempt to catalog and describe a number of common ways to represent some one’s status within a community. They are patterns that recur across websites, games or other interactive communities and we’ve made some attempt to be as complete as possible in this release. (Tho, for the sake of finally shipping the patterns, we did omit several—I’m hoping to sneak those out over the next several months.) For the designer of a community, these patterns might he helpful in just identifying and naming a reputation feature which they’ve been considering. And providing some very lightweight guidance on where and when to employ the pattern. So you could almost think of these patterns as a ‘Chinese menu’ of options for showing some one’s reputation on your site.
But this was a concern to us as well: through working with Yahoo! property-owners internally (the folks who make decisions about things like our Finance site, or Yahoo! Local, Maps, Answers, etc.) we understand that sometimes a long list of options is actually less helpful than no guidance at all. So we pushed hard to include at least one meta-pattern, The Competitive Spectrum, that attempts to provide guidance about which of the other patterns to employ. It attempts to provide a selection rationale.
In truth, there’s so much more guidance we could have included (the Spectrum is but one of 15 questions that I covered in a presentation on reputation systems earlier this year at the IA Summit.) But this one central question is an important one for anyone attempting to influence the community spirit of any ‘place’ they’re building online: what type of community will this be? A friendly place, where people cooperate? Or a competitive, cut-throat one with winners and losers?
3) Although reputation is sometimes bestowed on an individual by a community, what steps can an individual take to improve their reputation?
Tho’ it may sound… un-profound (is that a word?)… my advice here is simple. To improve your reputation in a community, become valuable to that community! There are a number of simpler ways to state this as well: Don’t be a jerk! Play nice with others! Do unto others as you’d have done unto you. It was all good advice when our mothers gave it to us in our youth, and is still good now.
But it gets tricky. I’d mentioned how reputation is very contextual. So you have to keep in mind the relative values of that specific community. Maybe your idea of ‘being a jerk’ is, in fact, not at all in agreement with the majority opinion of the community. Some communities on the web are built on ‘jerks’ and they’re fine with that reputation. Perhaps they value being a funny jerk, and you just don’t want to be boring in that community.
So I would say… hang out in a community before you start participating and try to learn its values. Then become an active participant, and try to figure out a way to become a valued participant. And, you know what? If it ends up that the communities values simply don’t agree with yours, then maybe that’s a sign you should find a community to frequent that’s better aligned to your values.
4) What are the biggest hurdles in designing for reputation?
I think it’s probably the number and variety of unintended consequences that little design decisions can have further down the line. I’m fond of the article—so I cite it a lot—but Ben Brown, who founded the dating site Consumating, has a great blog-post about the ‘ill-fated points system’ that they used for that site, and the variety of… um… less-than-ideal behaviors that those incentives gave rise to. Early on, Slashdot struggled with many of these same issues, and they’ve re-jiggered their comment karma system several times through the years.
A lot of these learnings are, in some small way, encoded into these patterns that we’ve released, as well as research that we’ve done at Yahoo!, and products that we’ve released, tweaked, tinkered and learned from.
A big hurdle—and if you can solve this, you’re halfway there to having a well-designed and effective reputation system—is appropriately marrying the incentives that you offer your users to the appropriate set of goals that you have for your community. You want to be sure that you’re rewarding folks for behaving like good citizens, and not just rewarding them for no good reason. (Or for vague and misguided reasons like “to keep them engaged†or “so we can have a leaderboard.â€)
5) What is the biggest misconception?
My own belief is that community designers today are a little too enamored of the “allure†of these types of systems. They are, indeed, quite powerful patterns. Microsoft, for instance—I think it’s fair to say that they’ve been quite pleasantly surprised with the success of their XBox Live Achievements program: it’s a huge revenue driver (gamers will actually buy or rent games they have little or no interest in strictly to unlock that game’s achievements!) and a fan-pleaser (witness the dozens of community sites dedicated to tips and tricks about unlocking achievements.)
BUT… and this is a big ‘but’… XBox Live is a very specific context. I would place (parts of) that service to the extreme far-end of the Competitive Spectrum. And it should be pointed out that not everyone who plays on XBox Live universally buys into this ‘competitive’ mindset. (Read the comments here for a nice overview of contra-Achievement viewpoints.)
So, it’s a powerful feature and a real showcase example for the pattern that we’ve labeled Collectible Achievements but you should really think twice before employing it on your own community site. Ask yourself: will it inculcate a certain competitive mindset in the community? Do I want that? Who will be motivated by collecting achievements? Will they be too motivated, and act out in anti-social ways to get them? Who will be turned off by them, and leave the community? Am I okay with that?
So a big misconception, currently, I think is “we should be doing this.†We should have an explicit reputation system, with badges, points, voting, thumbing up and down. All the bells and whistles. I hope that sites will soon start to employ a more measured, more intelligent approach to designing these systems.
Read Part II of this interview: Social Design Patterns for Reputation Systems: An Interview with Yahoo’s Bryce Glass (Part II)
What it does
Balsamiq Studios has just rolled out their Mockups for Desktop plug in. This tool, the first plug released in a planned series, is designed to help users create a better UI to manage their projects more easily and efficiently. Like other Balsamiq plug ins, Mockups is designed to work in Mac, Windows, and Linux systems. To support this tool, the Balsamiq site has devoted links to support, tutorials, and samples, fully explaining the uses and benefits of the product. In one quick click, users can either download the demo, or buy the complete system and instantly install it right onto their own computer.
In their own words
“Mockups For Desktop allows you to work on your UI wherever you are, regardless of your Internet connection. It works on planes, at coffee shops, and wherever you like to do uninterrupted work. Import and Export features ensure seamless integration with all the other versions of Mockups, for when you get back online. Plus you can load and save multiple mockups files, use all keyboard shortcuts and lots more.â€
Why it might be a killer
Balsamiq’s Mockups is a well-developed UI testing and creation platform that all users are bound to love. The site offers basic support to users who may be in need. An explanation of forthcoming plug ins may be useful so that users know what to expect from future developments.
Some questions
What additional benefits may other plug ins offer? What support can be introduced for them?
Updates
 » original news




Ivan Bozhanov walked us through his jQuery-based tree component recently. The state of trees out there is interesting. YUI! has a nice, stable tree control but Dojo’s once feature-rich tree has been replaced with a fairly basic tree (i.e., doesn’t appear to have in-line editing and drag-and-drop still seems flakey; Dojo guys, correct me if I’m wrong) at the moment and jQuery UI lacks an official tree component (though a few tree plug-ins are out there); as you might expect, Ext JS has a nice tree component.
Let me highlight a few areas where jsTree stands out. First, it has some basic features that many trees out there lack:
jsTree allows the user to create, rename, reorder, move, and delete note (which is realised in a file-browser manner – eg. inplace)
It also has a rich event API which is fairly standard across most editable tree components, though the event types are finer-grained than in most trees I’ve seen (not sure whether that’s a good thing):
You can attach callbacks to almost every action:
– onbeforechange
– onchange
– onrename
– onmove
– oncreate
– ondelete
– onopen
– onclose
It also allows you to provide rules that govern what the user may or may not do based on the “type” of a node:
jsTree lets developers define rules for moving, selecting, deleting, and focusing nodes. The rules are based on developer-definable types of each node passed in the data (different sources define it differently). This limits the user in his actions. The developer can also attach inline rules which override global rules. One scenario in which these rules are useful is when you build a CMS and need a fixed number of top level nodes because of a design restriction.
While you could accomplish the same functionality with event handlers, it’s nice to have a simple built-in scheme that can be easily data-driven.
These rules are applied real-time as the user attempts to interact with the tree:
When you drag a node around a pointer tells you where you are about to insert it, and prevents the user from dropping anywhere against the rules. The warning is real time – as you drag and drop the pointer is replaced by a red cross if the action is against the defined rules. I’m still working on displaying definable text messages.
jsTree can be configured to reference a custom property in each node object to determine its type.
It also has built-in localization support; you specify string identifiers corresponding to the different languages that the tree should support on construction:
JAVASCRIPT:
-
tree1.init($(“#nested”), {
-
  data : “nested.xml”,
-
  xsl : “nested.xsl”,
-
  languages : [ "en", "bg" ],
-
  // other stuff omitted
-
});
and then in this case each node in the XML tree fed to the component specifies its language:
XML:
-
Â
-
<name lang=“bg” icon=“images/f.png”>Ðачало</name>
-
<name lang=“en” icon=“images/f.png”>Home</name>
-
Â
In addition to XML data types, it also supports JSON and in-line HTML. But it also has built-in support for doing XSL transforms on XML data sources, including a scheme that lets you include flat data that it then makes into a hierarchy:
jsTree supports XSL transformations when using the XML data source option. This is a bit faster than javascript parsing. It includes an XSL stylesheet for transforming a flat list of entries into a tree. This can be useful if you use adjacency for maintaing a tree in a database. In such situations it is quite heavy on the server to dump the whole tree as you need N-1 queries where N is the number of nodes in the tree. With this XSL solution you can just dump the table flat out with id and parent_id attributes and the XSL will transform it into a nested structure.
Unfortunately, what jsTree is lacking is the visual refinement of many of the trees out there, but as jsTree is built on top of jQuery, we suppose Ivan can add that kind of polish easily.
For many data-driven applications, high-quality grid and tree components are really important; kudos to Ivan for some interesting ideas in jsTree. The docs are certainly better than some I’ve seen, but not as complete as I’d like.
Why it might be a killer
There are already a fair number of members and this site might just succeed in matching up a few people and creating the next killer startup!
In their own words
“Whether you’re looking for a partner, a job, or an employee, Mac Yenta is the place to find them. The people on this site are the who’s who in indie Mac development. There’s a lot of talent out there — help yourself to it.â€
What it does
With a slogan of “socializing for nerdsâ€, MacYenta probably won’t appeal to everyone but it just might become a key portal for independent Mac programmers and designers looking to meet each other, collaborate together, or find work. According to MacYenta, a yenta is another term for a matchmaker; or someone who is generally good at socializing and matching up people of similar interests. Mac developers and programmers can sign up and create their own profile in which they can do all the usual stuff like uploading a photo, and they can also state what kinds of projects they are interested in and what skills they have. Profiles can be easily searched with a variety of filters and categories making it very easy to find the right person for whatever the job.
Some questions
Perhaps a good addition to the site would be the ability to vote for people who you have worked with or who did a good job for you?
Updates
 » original news




The ShareCentral is a 5-port USB hub that allows two computers to share USB devices without a network. Just plug the devices in the $80 hub, plug the hub into both computers, and you can use your mouse, keyboard, hard drive or whatever on either computer with the flick of a switch. Best of all, it knows which computer is trying to print and automatically switches the printer to that machine, like a network device. It also comes in 1- and 2-port varieties, $40 and $60 respectively, full release after the jump. [Kensington]
Kensington® ShareCentral(TM) Brings Greater Convenience and Ease to
Home Computing Shared Tasks
Innovative Device Lets Families Share Projects among Computers
and USB Peripherals – With Just the Press of a Button
Redwood Shores, Calif. – June 16, 2008 – Kensington Computer Products Group, a worldwide leader in delivering smart made simple(TM) computing accessories for the mobile consumer, today announced ShareCentral, an innovative USB peripheral sharing device for the home that lets family members instantly and effortlessly share up to five USB peripheral devices between any two computers with an easy press of a button. ShareCentral brings the cords and cables of external devices into one small, attractive desktop or wall mounted unit, allowing people to share their choice of peripherals and content in one easy fingertip motion, with no network required.
Recent Kensington research conducted by Markettools showed that more than 40% of households have 3 – 4 computers in their home belonging to different family members. A full 70% of these households have a dedicated computing space equipped with a stationary computer, as well as a variety of peripherals, that are shared by the whole family. These multiple-computer families have a screaming need to be able to easily share access to the peripherals they use the most including printers (50%), scanners (30%) and external disks drives (22%) so they can turn work, homework, photos and music gathered on notebooks, flash drives and iPod music players into polished, finished work meant for sharing with others.
“ShareCentral is a great example of our smart made simple design philosophy,” said Frederic Frappereau, Global Product Marketing Manager at Kensington. “Everyone is mobile. Then they bring the day’s data, photos and music back to one shared, usually cramped, home computing center which the entire family needs to access in those few hours between dinnertime and bedtime. Up until now, they spent that precious time switching out cords and cables to connect their computers to their peripherals. Now with ShareCentral, they can focus on sharing the content, to produce creative results of which they all can be proud.”
Key features include
• Share up to five different USB peripherals – Instantly share access to multiple USB peripherals between two computers at the press of a button. Users gain instant access to their USB peripherals by plugging one simple USB cable into their computers. LED lights on the product indicate which computer has access.
• Easy to set up, simple and straightforward – ShareCentral is easy to set up and easy to use with no network or software required. Plug–n–play right out of the box!
• No more cord clutter – ShareCentral eliminates cable mess by connecting device cables into a central desktop unit; also wall mountable.
• Easy printer sharing –Simply press a button to switch the USB printer from one computer to another. ShareCentral 2 and ShareCentral 5 Automatic Print Sharing will detect and automatically switch to the computer that is trying to print, conveniently eliminating the need for any buttons to be pressed (available for Windows® XP and Windows Vista®).
• Adaptable and personal – All USB ports are independently controlled by a button and assignable to either computer. Each button comes with interchangeable magnetic keycaps for personalization to user’s device and specifications.
The ShareCentral Collection
ShareCentral 5 (SKU K33901US) – No more plugging and unplugging computer devices. With Kensington ShareCentral 5, two computers can share a printer, hard drive, scanner—up to any five USB peripherals – and switch between them with the touch of a button. Suggested Retail Price $79.99
ShareCentral 2 (SKU K33900US) – With the Kensington ShareCentral 2, two computers can share a printer, hard drive, scanner—any two USB devices. Suggested Retail Price $59.99
ShareCentral 1 (SKU K33903US) – With the Kensington ShareCentral 1, two computers can share a printer or any USB device. Suggested Retail Price $39.99
The Kensington ShareCentral Collection is now available for pre-order at Amazon.com and Kensington.com and will be available at major retailers at the end of the month.




