New pattern (Vote to Promote), new navigation

By YUI TeamSeptember 5th, 2007

thumbnail of a Digg page, the canonical example of the Vote to Promote patternThings have been quiet recently in Yahoo’s open pattern library, but behind the scenes we’ve been working on some cool stuff. First of all, we’ve reorganized the navigation for Yahoo!’s internal library and have now updated the navigation of the public library to match.

We’ve done away with the first-order distinction of “User needs to” and “Application needs to.” In the interests of fostering a user-centered (or, if you prefer, customer-centric) design perspective, we have reclassified all of the patterns in terms of a set of high-level user needs, because we feel that even things the application (or designer) “needs” to do must be driven ultimately by satisfying the need of an end-user.

Currently, the top-level categories in the new organizational scheme include Search, Navigate, Read, Select, Interact, Give Feedback, and Customize. A few more will probably appear as we roll out additional patterns.

Speaking of which, we are publishing a new pattern today, Vote to Promote, which is our interpretation of the best way to incorporate a scheme to allow your users to vote up content, whether content native to your application or identified elsewhere (as with Digg and Reddit).

Vote to Promote was written by Bryce Glass, a senior interaction designer on our community platform team. It’s the first in a series of “social media” patterns we’ve been working on now for much of this year, and you can expect a bunch more to appear over the next few months.

Vote to Promote is also the first pattern to include a “pattern gallery.” One bit of feedback we hear a lot – from you and from designers inside Yahoo! – is that more illustrations are better. This may sometimes show up in the form of diagrams, schematics, and templates. But each new pattern we release from now on will also feature a set of example images captured from across the Internet and displayed via Flickr. Check out the Vote to Promote pattern gallery and feel free to suggest additional examples.

Let us know what you think of the new navigation scheme and the latest addition to the library. Thanks!


  1. [...] wo zum Einsatz kommen darf, welche Vor- und Nachteile es bringt erläuter Yahoo neuerdings schon ne Weile auf einer eigens eingerichteten Developer Seite: Yahoo! Design Pattern Library. Bookmark-Pflicht! [...]

  2. Thanks for the vote-pattern!

    What I am wondering: Why is the first Star a Star and not an X or something.
    Stars are something nice. But one Star is always used for “awful”/”bad” — thats a misinterpretations, isnt it?

    I think a votebar should look like this:
    x = bad
    * = all right
    ** = good
    *** = very goog
    **** = excellent

    This also show: Bad doent have to be rated. Bad means “dont show again”. Everything else sould be used to find the good stuff…
    There are some examples out there that use the X but I have no URL right now.

    What I am interested in: why do use use the first Star for awful?
    Dont you believe the user would understand the X?


  3. That’s a great question Tobias. I actually work on Ratings-related stuff at Yahoo! and I’ll try to give you some insight into our rationale.

    First, we too have some locations on Yahoo that employ a pattern like the one you discuss (where an ‘x’ is presented alongside stars and semantically means ‘I don’t like this’ — for example, Yahoo Music’s recommender engine lets you state your dislike for a song, and only give you 4 stars to choose from:

    Regrettably, we also have -other- places on Yahoo! that use an ‘x’ somewhat differently. There, the ‘x’ undoes the star-rating that I’ve already selected for something. It’s more like a ‘clear’ action. (Why the different behavior? Cause Yahoo is a pretty big boat to steer around, with many captains. ;-) This is why we need the pattern library!)

    But-to your point- I agree. There is a bit of a mismatch between the notion of ‘awarding a star’ (which, even if it’s just 1 star, does seem like a positive, affirmative action) and giving something a negative rating. I guess it all depends on your interpretation of the ‘question’ that a star-rating widget is posing to you.

    When you see a ratings-widget for a music album, for instance, do you interpret the question as: Do you like this album? (where the possible range of answers is ‘No, not at all’ up to ‘I LOVE this album!’) OR do you interpret the mechanism as ‘How much do you like this album?’ (in which case you have basically two options: either the question does not apply to you-you don’t like the album-so you don’t reply at all; or you do like the album to some degree, so you state that degree from 1-5 stars.)

    I know, it probably seems like a pretty light hair to split, but it should give you some insight into how we tend to think about ratings at Yahoo. They are primarily an affirmative statement of interest, where the number of stars indicates the degree of interest.

    This enables easy comparisons (a ‘1-star’ restaurant is obviously nothing to boast about compared to a 5-star establishment.) And also keeps the mechanism somewhat simpler for our users. The scale only moves in one direction.

    We have other patterns (Thumbs up and Thumbs down, or different voting patterns) to let a person indicate DISlike, but we tend to employ these with caution in an effort to not promote a combative community spirit.

    Again, I don’t think any of this is objectively -right- when it comes to star-ratings, and I’d encourage you to modify these base recommendations as you see fit. Remember, any design pattern is rooted in a context, and much of what we promote as best practices are really just what works for US. (And those things are sometimes driven by business considerations/prior history/etc.)

    Thanks again for your question Tobias.


  4. Hi Bryce, thanks a lot for your answer.

    Your description “How much do you like this album?” is very good and helped me understand the difference — I agree with you!

    What I am thinking now: You sould put this description in your pattern-page to clarify the usecase of this pattern.

    IMO there are different UseCases:
    UseCase restaurant-rating: 1-5 stars, all good. Like you sad “How much do you like this X?”

    UseCase musik-rating: x + 4 stars, bad meaning “dont show again”, star meaning “so or so good”. Like you sad: “Do you like this album?”

    UseCase ?: Thumps — but I am not shure about this one…

    Even if you just describe one pattern at your library it would helb to clarify the usecase your description is based on (I just remenber that you already do this with paging/pagination-pattern for search vs. prev/next vs. …).

    regards, Tobias

  5. There is a bit of a mismatch between the notion of ‘awarding a star’ (which, even if it’s just 1 star, does seem like a positive, affirmative action) and giving something a negative rating

  6. [...] The first of this, Vote to Promote (a sort of generic “Digg This!” pattern) went live last week. There are more to come. The author of the pattern, Bryce Glass, has more to say about it in his blog, Soldier Ant, and I blogged about the pattern (and a new organizational scheme I’m trying out for the library, both the internal and open versions) at the Yahoo! User Interface Blog. [...]