YAP Application Development Best Practices

Micah Laaker25 Aug 2009 2:04 AM
Popular Applications share many qualities. Here are some we believe to deliver the best user experience.

One Size Fits All
Write your App's front-end code to deal with fluid container dimensions. App canvas containers' widths (and heights) invariably will adjust over time, and in some cases (think: My Yahoo!'s Small View), the user has control over the width of the App's container. (Additionally, there is currently no method to call to obtain the container's dimensions; until then, you should assume you don't know the width of the container and that it could be adjusted.) That said, please note the rough dimensions of the Yahoo! Frontpage's Small View (400px wide by 460px tall) and Canvas View (750px wide by 460px tall).
  1. DO write your App's Small View and Canvas View to use a width of "100%." Example: Flixster
  2. DON'T code your App to use a fixed width (i.e. <div style="width:478px;">...</div>).


Use Yahoo!'s Megaphone
Advertise user activity through the Yahoo! Updates platform (Yahoo!'s activity stream showcasing what activities a user's friends have been up to on Yahoo! and around the Web) to draw more users into your App. Be sure to broadcast relevant and respectful information. Yahoo! users attribute a great level of trust to the Yahoo! brand, and your App's behavior in this regard will determine the success of your App in the Yahoo! ecosystem.
  1. DO write useful, leading messages that encourage other users to click. Example: "Micah has rated the book Adventures of Huckleberry Finn: 4/5 stars" via Books weRead
  2. DON'T write personally identifiable information to the stream. Example: "Micah just bought 4 shares of AAPL stock at $93.14/share."


Make a Trial Size
A large percentage of Yahoo! users are signed-out as they explore the Yahoo! network. As such, be sure to entice them to use your App by providing a meaningful, non-personalized state of your App for them to engage with before installing. Consistent user testing has demonstrated a strong affinity from users who were able to "sample" an App before sharing their personal information with the Developer.
  1. DO give your users a preview state of your App to illustrate why they should exchange their personal information to use your App. Example: Flood-it
  2. DON'T ignore the large number of signed-out users who could convert into your active userbase. Not developing content for this state can leave your App looking broken/unavailable to signed-out users.



One App, Two Views
Yahoo!'s Application Platform currently supports two very different "views": a Canvas View and a Small View. Small Views (which are widget-sized modules) can be accessed by My Yahoo!'s 40+ million dashboard users, whereas Canvas Views are accessed directly from notifications, emails, the App's user's My Apps page, My Yahoo!'s Small View, and eventually other prominent locations on the Yahoo! network. To be successful, your App will need to use both Views uniquely, with the Small View enticing your users to engage more deeply via the Canvas View by providing relevant information in a snapshot view (and, ideally, lightweight interaction).
  1. DO build a widget-like Small View and a rich, interactive Canvas View. Example: Addicted to Chappelle's Show
  2. DON'T have your Small View be a direct copy of the Canvas View.



Be social
To take advantage of the Yahoo! Application Platform, be sure to leverage Yahoo!'s Connections list (which users are now building in order to share birthday info and other data via Yahoo! Mail). Show activities in your App (or from around the Web) from the user's Connections list, as well as from similar users and all Yahoo! users.
  1. DO surface a user's friends inside your App to encourage competition and interaction. Example: Hey Einstein
  2. DON'T ignore a user's trusted relationships and ask them to create an entirely new set of relationships inside your App.



Be Inviting
An App's installation numbers largely depends on how viral the Application is. Provide sharing components inside of your App at logical points in your users' workflow (i.e. when a user wants to play a game against another user, to share a story, or to compare high scores) using yml:share.
  1. DO surface sharing and messaging controls inside your App at relevant moments. Example: Mafia Wars
  2. DON'T leave the Connections list ordered by recency (the API's default). Instead, sort the Connections alphabetically so that they can quickly find their friends.



Harness location
Few people enjoy repeating themselves, and Yahoo! users are no different. Every Yahoo! Profile contains the user's location (which is a free-form text field, allowing users to enter neighborhoods or landmarks), so be sure to leverage that data before prompting a user for their location. You can use GeoPlanet (via a YQL query to convert a user-submitted location into lat/long, city name, etc.)
  1. DO lookup the user's Profile's location data to kickstart your App with relevant information. Example: Social Weather
  2. DON'T ask the user for their location unless it simply isn't parse-able (i.e. user has no location information or is too abstract—e.g., "anywhere other than here").



Pimp your product
Promote your App on your site or via advertising, using an Add to My Yahoo! link, to drive even more traffic to your product.
  1. DO highlight your App in your product's existing channels, such as site promotion, emails, and advertising. Example: Total Beauty Sweepstakes
  2. DON'T assume your users will proactively look for your App on Yahoo!.



Business, Never Personal
Before testing and pushing your App live, create a new Yahoo! account to "own" this Application. Then, if you need other developers to contribute (or want to sell the App to someone later on), you can share the new account's username/password without compromising your own personal Yahoo! account.
  1. DO create a new Yahoo! account under the guise of your company/team's name. Example: Target
  2. DON'T use your personal Yahoo! account, as your App will be attributed accordingly (i.e. "This App was developed by Micah L.").



Judge a Book by its Cover
Personal hygiene is important, and the rule's no different for your App.
  1. DO use a clear, distinguishable App name (to promote easy recall with your users),
  2. DO clearly describe the benefits of using your App in its Description field,
  3. DO point to a 20px-by-20px icon for your Yahoo.com/My Yahoo! navigation buttons,
  4. DO supply a 64px-by-64px recognizable icon for your Gallery/My Apps buttons,
  5. DO provide a 16px-by-16px favicon for your Updates events, and
  6. DO link to a 300px-by-250px screenshot that helps users see why they'd add your App.
    Example: Gasbuddy
  7. DON'T leave these fields empty (or provide placeholder information) if you hope to appear in Yahoo! App galleries visible to users.



Make Yourself Available
Yahoo! users like to give feedback, and we've built several tools to support their questions and feedback. However, as the owner of your App, you are the best facilitator of user feedback, bug reports, and feature requests.
  1. DO provide links in the bottom right of your App for users to send user feedback, bug reports, and feature requests. Example: Lexulous
  2. DON'T force users to submit comments about your App through Yahoo!'s "Report Abuse" link available in each App.



Build a Bridge (when relevant)
If you've got users on your site/product already, be sure to connect your user's existing work/data with your YAP Application. Ideally, users would walk up to your App on Yahoo! and have it "just work." The less the user needs to configure (or repeat), the more quickly they can engage with your App.
  1. DO allow users to quickly bind their account from your site/product with your App (via OAuth or another mechanism you create). Example: Mint
  2. DON'T ask them to recreate all their past work with your product inside your App on Yahoo!.
Rex16 Sep 2009 8:34 AM
I'm not clear as to whether we can just build applications for Yahoo Mail or if they first need to be approved by Yahoo. I have a new site - www.zuplo.com - that would make a fabulous application for Yahoo Mail. I need to understand whether my application will be accepted by Yahoo before I invest the time into building it. Thanks.

QUOTE (Micah Laaker @ Aug 25 2009, 01:04 AM) <{POST_SNAPBACK}>
Popular Applications share many qualities. Here are some we believe to deliver the best user experience.

One Size Fits All
Write your App's front-end code to deal with fluid container dimensions. App canvas containers' widths (and heights) invariably will adjust over time, and in some cases (think: My Yahoo!'s Small View), the user has control over the width of the App's container. (Additionally, there is currently no method to call to obtain the container's dimensions; until then, you should assume you don't know the width of the container and that it could be adjusted.) That said, please note the rough dimensions of the Yahoo! Frontpage's Small View (400px wide by 460px tall) and Canvas View (750px wide by 460px tall).
  1. DO write your App's Small View and Canvas View to use a width of "100%." Example: Flixster
  2. DON'T code your App to use a fixed width (i.e. <div style="width:478px;">...</div>).


Use Yahoo!'s Megaphone
Advertise user activity through the Yahoo! Updates platform (Yahoo!'s activity stream showcasing what activities a user's friends have been up to on Yahoo! and around the Web) to draw more users into your App. Be sure to broadcast relevant and respectful information. Yahoo! users attribute a great level of trust to the Yahoo! brand, and your App's behavior in this regard will determine the success of your App in the Yahoo! ecosystem.
  1. DO write useful, leading messages that encourage other users to click. Example: "Micah has rated the book Adventures of Huckleberry Finn: 4/5 stars" via Books weRead
  2. DON'T write personally identifiable information to the stream. Example: "Micah just bought 4 shares of AAPL stock at $93.14/share."


Make a Trial Size
A large percentage of Yahoo! users are signed-out as they explore the Yahoo! network. As such, be sure to entice them to use your App by providing a meaningful, non-personalized state of your App for them to engage with before installing. Consistent user testing has demonstrated a strong affinity from users who were able to "sample" an App before sharing their personal information with the Developer.
  1. DO give your users a preview state of your App to illustrate why they should exchange their personal information to use your App. Example: Flood-it
  2. DON'T ignore the large number of signed-out users who could convert into your active userbase. Not developing content for this state can leave your App looking broken/unavailable to signed-out users.



One App, Two Views
Yahoo!'s Application Platform currently supports two very different "views": a Canvas View and a Small View. Small Views (which are widget-sized modules) can be accessed by My Yahoo!'s 40+ million dashboard users, whereas Canvas Views are accessed directly from notifications, emails, the App's user's My Apps page, My Yahoo!'s Small View, and eventually other prominent locations on the Yahoo! network. To be successful, your App will need to use both Views uniquely, with the Small View enticing your users to engage more deeply via the Canvas View by providing relevant information in a snapshot view (and, ideally, lightweight interaction).
  1. DO build a widget-like Small View and a rich, interactive Canvas View. Example: Addicted to Chappelle's Show
  2. DON'T have your Small View be a direct copy of the Canvas View.



Be social
To take advantage of the Yahoo! Application Platform, be sure to leverage Yahoo!'s Connections list (which users are now building in order to share birthday info and other data via Yahoo! Mail). Show activities in your App (or from around the Web) from the user's Connections list, as well as from similar users and all Yahoo! users.
  1. DO surface a user's friends inside your App to encourage competition and interaction. Example: Hey Einstein
  2. DON'T ignore a user's trusted relationships and ask them to create an entirely new set of relationships inside your App.



Be Inviting
An App's installation numbers largely depends on how viral the Application is. Provide sharing components inside of your App at logical points in your users' workflow (i.e. when a user wants to play a game against another user, to share a story, or to compare high scores) using yml:share.
  1. DO surface sharing and messaging controls inside your App at relevant moments. Example: Mafia Wars
  2. DON'T leave the Connections list ordered by recency (the API's default). Instead, sort the Connections alphabetically so that they can quickly find their friends.



Harness location
Few people enjoy repeating themselves, and Yahoo! users are no different. Every Yahoo! Profile contains the user's location (which is a free-form text field, allowing users to enter neighborhoods or landmarks), so be sure to leverage that data before prompting a user for their location. You can use GeoPlanet (via a YQL query to convert a user-submitted location into lat/long, city name, etc.)
  1. DO lookup the user's Profile's location data to kickstart your App with relevant information. Example: Social Weather
  2. DON'T ask the user for their location unless it simply isn't parse-able (i.e. user has no location information or is too abstract—e.g., "anywhere other than here").



Pimp your product
Promote your App on your site or via advertising, using an Add to My Yahoo! link, to drive even more traffic to your product.
  1. DO highlight your App in your product's existing channels, such as site promotion, emails, and advertising. Example: Total Beauty Sweepstakes
  2. DON'T assume your users will proactively look for your App on Yahoo!.



Business, Never Personal
Before testing and pushing your App live, create a new Yahoo! account to "own" this Application. Then, if you need other developers to contribute (or want to sell the App to someone later on), you can share the new account's username/password without compromising your own personal Yahoo! account.
  1. DO create a new Yahoo! account under the guise of your company/team's name. Example: Target
  2. DON'T use your personal Yahoo! account, as your App will be attributed accordingly (i.e. "This App was developed by Micah L.").



Judge a Book by its Cover
Personal hygiene is important, and the rule's no different for your App.
  1. DO use a clear, distinguishable App name (to promote easy recall with your users),
  2. DO clearly describe the benefits of using your App in its Description field,
  3. DO point to a 20px-by-20px icon for your Yahoo.com/My Yahoo! navigation buttons,
  4. DO supply a 64px-by-64px recognizable icon for your Gallery/My Apps buttons,
  5. DO provide a 16px-by-16px favicon for your Updates events, and
  6. DO link to a 300px-by-250px screenshot that helps users see why they'd add your App.
    Example: Gasbuddy
  7. DON'T leave these fields empty (or provide placeholder information) if you hope to appear in Yahoo! App galleries visible to users.



Make Yourself Available
Yahoo! users like to give feedback, and we've built several tools to support their questions and feedback. However, as the owner of your App, you are the best facilitator of user feedback, bug reports, and feature requests.
  1. DO provide links in the bottom right of your App for users to send user feedback, bug reports, and feature requests. Example: Lexulous
  2. DON'T force users to submit comments about your App through Yahoo!'s "Report Abuse" link available in each App.



Build a Bridge (when relevant)
If you've got users on your site/product already, be sure to connect your user's existing work/data with your YAP Application. Ideally, users would walk up to your App on Yahoo! and have it "just work." The less the user needs to configure (or repeat), the more quickly they can engage with your App.
  1. DO allow users to quickly bind their account from your site/product with your App (via OAuth or another mechanism you create). Example: Mint
  2. DON'T ask them to recreate all their past work with your product inside your App on Yahoo!.
Jonathan LeBlanc16 Sep 2009 8:50 AM
Hi Rex, this information is for building applications under YAP for my.yahoo or the Yahoo! homepage. The Open Mail applications are slightly different. What I would suggest is that you contact the Mail team directly to discuss your application. You may do so by contacting them through the help links on this post: http://developer.yahoo.net/forum/index.php?showtopic=1716

Jonathan LeBlanc
Technology Evangelist
Yahoo! Developer Network
Twitter: jcleblanc
Rex16 Sep 2009 10:46 AM
Thanks Jonathan, will do!
shane1 Jun 2010 9:56 AM
QUOTE (Micah Laaker @ Aug 25 2009, 01:04 AM) <{POST_SNAPBACK}>
Make a Trial Size
A large percentage of Yahoo! users are signed-out as they explore the Yahoo! network. As such, be sure to entice them to use your App by providing a meaningful, non-personalized state of your App for them to engage with before installing. Consistent user testing has demonstrated a strong affinity from users who were able to "sample" an App before sharing their personal information with the Developer.
  1. DO give your users a preview state of your App to illustrate why they should exchange their personal information to use your App. Example: Flood-it
  2. DON'T ignore the large number of signed-out users who could convert into your active userbase. Not developing content for this state can leave your App looking broken/unavailable to signed-out users.


How can we tell if a user is signed-in or not? Is there an api I'm missing?
shane1 Jun 2010 10:10 AM
QUOTE (shane @ Jun 1 2010, 08:56 AM) <{POST_SNAPBACK}>
How can we tell if a user is signed-in or not? Is there an api I'm missing?


Found it :

http://developer.yahoo.com/yap/guide/other...html#signed_out