Product Design Framework

Basic Screen Layout

The application screen layout must be scalable in order to fit a variety of screen sizes. If the application is built for a mobile device, the screen should properly fit a variety of mobile screen sizes.

Splash Screen

Initial loading of the Yahoo Messenger application must include a “splash screen”, which may be one of the following: a combination of the Yahoo Messenger logo, Smiley logo or Yahoo Bang with Smiley logo in the splash screen. Note that the logos should be center-aligned on the screen. A splash screen animation should be used on a mobile device if the mobile device allows at least 4 frames for the animation. The following figure shows an example splash screen.

Discoverability

Messenger Client Icon

The Messenger product must be easily identifiable to the user. In cases where the Yahoo Messenger application is a single-headed client or the user needs to be guided to the Messenger experience, the Yahoo Messenger with Smiley icon should be used so the user can easily identify the client providing the Yahoo Messenger service.

Sign-in and Sign-Out

Sign-in Screen

The Sign-in screen must offer the user the following features:

  • “Yahoo ID”: A text field that allows the user to enter their Yahoo User ID
  • “Password”: A text field that allows the used to enter their password
  • “Remember my ID”: This allows the user’s information to persist through sessions
  • “Sign in as invisible”: This allows the user to sign in under invisible mode
  • “Help”: Provides the user with frequently asked questions. In addition, it should include an About Section, which will provide the user with the client developer name and the client version number.
  • “Exit”: Closes the application
  • “Sign In”: Logs the user into Yahoo Messenger

The following figure shows a sample Yahoo Messenger sign-in screen that demonstrates these requirements.

Yahoo ID Text Field

The Yahoo ID text field must support at least the following criteria:

  • Yahoo ID text field is the focus default for the screen
  • A minimum of 32 characters
  • The character default is set to lower case
  • A maximum of one @ character.
  • At least 64 characters for the DNS hostname
  • A maximum of 97 characters
  • The following characters are supported: [a-z0-9_.+-]
  • The ID must not be case sensitive

All Yahoo hosted domains must be supported, including @yahoo.com, @rocketmail.com, and @ymail.com. Yahoo’s international and partner domains need to be supported as well. Below is a list of supported domains.

  • @yahoo.com
  • @rocketmail.com
  • @ymail.com
  • @yahoo.com.ar
  • @y7mail.com
  • @yahoo.com.au
  • @yahoo.bg
  • @yahoo.com.br
  • @yahoo.ca
  • @yahoo.cl
  • @yahoo.com.cn
  • @yahoo.cn
  • @yahoo.com.co
  • @yahoo.cz
  • @yahoo.de
  • @yahoo.dk
  • @yahoo.com.ec
  • @yahoo.ee
  • @yahoo.es
  • @yahoo.fr
  • @yahoo.gr
  • @yahoo.com.hk
  • @yahoo.hu
  • @yahoo.co.id
  • @yahoo.ie
  • @yahoo.in
  • @yahoo.it
  • @yahoo.co.jp
  • @yahoo.co.kr
  • @yahoo.lt
  • @yahoo.lv
  • @yahoo.com.mx
  • @yahoo.com.my
  • @yahoo.com.ng
  • @yahoo.no
  • @yahoo.co.nz
  • @yahoo.com.pe
  • @yahoo.com.ph
  • @yahoo.com.pk
  • @yahoo.pl
  • @yahoo.ro
  • @yahoo.se
  • @yahoo.com.sg
  • @yahoo.co.th
  • @yahoo.com.tr
  • @kimo.com
  • @yahoo.com.tw
  • @yahoo.ua
  • @yahoo.co.uk
  • @yahoo.com.ve
  • @yahoo.com.vn
  • @yahoo.co.za
  • @bellsouth.net
  • @ameritech.net
  • @att.net
  • @attworld.com
  • @flash.net
  • @nvbell.net
  • @pacbell.net
  • @prodigy.net
  • @sbcglobal.net
  • @snet.net
  • @swbell.net
  • @wans.net
  • @btinternet.com
  • @btopenworld.com
  • @talk21.com
  • @rogers.com
  • @nl.rogers.com
  • @demobroadband.com
  • @xtra.co.nz
  • @verizon.net
Password Text Field

The password text field must support at least the following criteria:

  • A minimum of 16 characters
  • The character default is set to lower case
  • No spaces or special characters except underscore, comma, and period: [_ , .]
  • Case sensitivity
Automatic Sign-in

The automatic sign in feature must be supported on the Yahoo Messenger IM client. The user may be offered an option to select this feature when they sign into the IM client. If the user turns this feature “ON”, the IM client will sign in automatically when the client is launched from the device. The user must be taken directly to the Contact List screen after launching the IM client. To turn this feature “OFF” the user must manually turn the feature off in an Option/Preference or Sign out of Yahoo Messenger.

Saving Yahoo ID and Password on the Device

To support the Auto Sign-in feature, the client must encrypt the Yahoo ID and password. The username and password should never be stored on the device. Instead, an authentication token should always be used to authenticate the user’s credentials. Please refer to Yahoo authentication technical documentation for details.

Sign-in

Selecting the Sign-in feature logs the user into Yahoo Messenger. The following figure shows a sample flow that clients typically use.

Sign-out

The client must support the ability for the user to completely sign-out from IM and terminate all open conversations. Signing out from the client must also sign the user off from Yahoo!’s IM server. This is performed with an HTTP DELETE call to the Session Management API, listed earlier.

Exit Yahoo Messenger

The client must also support the ability for the user to “exit” the IM client without signing off from the server. When the user applies the Exit feature, the client must maintain any or all open conversations until the user next returns to the application.

Contact List

Contact List View

The Contact List presents the user with presence information on all listed contacts. The Contact List is presented once the user has successfully signed into the Yahoo Mobile Messenger application.

The Contact List must present the user with the following features:

  • The user’s Yahoo ID and/or Nicknames. Nicknames are preferred.
  • Groups and contacts inside groups
  • Presence Status information
  • Message Notification inside the Contact List next to the contact
  • Soft key options: Menu and Open Conversations List
Groups and Contacts

The Contact List view must also show the user’s entire list of contacts, including groups and contacts within groups. Mobile clients must show at least 3 contacts.

The user must be able to scroll and select contacts from the Contact List. The scrolling feature must allow the user to scroll the Contact List, one contact at a time, and select a contact to open a conversation. Selecting a contact must take the user to the Active Conversation Window.

The user must also be able to open and close the groups on the Contact List. Groups and contacts on the Contact List must be sorted alphabetically.

Presence Status

Standard Status

The Contact List must carry the presence information on each contact. The presence information must be carried to the left of the Yahoo ID. At the minimum, the client must be able to support the following states:

  • Available
  • Busy
  • Invisible/offline
  • Custom status
  • Idle (for PC users)

Online presence indicators are used to indicate the presence of contacts in the Yahoo Messenger user interface. Approved Yahoo Messenger presence indicators are available on the following servers.

Description Image URL
Online (10px Discs GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_online_10_1.gif
Busy (10px Discs GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_busy_10_1.gif
Idle (10px Discs GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_idle_10_1.gif
Offline (10px Discs GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_offline_10_1.gif
Online (10px Discs PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_online_10_1.png
Busy (10px Discs PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_busy_10_1.png
Idle (10px Discs PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_idle_10_1.png
Offline (10px Discs PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_offline_10_1.png
Online (12px Faces GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_online_12_1.gif
Busy (12px Faces GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_busy_10_1.gif
Idle (12px Faces GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_idle_10_1.gif
Offline (12px Faces GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_offline_12_1.gif
Online (12px Faces PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_online_12_1.png
Busy (12px Faces PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_busy_12_2.png
Idle (12px Faces PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/disc_idle_12_2.png
Offline (12px Faces PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_offline_12_1.png
Online (16px Badges GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_online_16_1.gif
Busy (16px Badges GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_busy_16_1.gif
Idle (16px Badges GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_idle_16_1.gif
Offline (16px Badges GIF)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_offline_16_1.gif
Online (16px Badges PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_online_16_1.png
Busy (16px Badges PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_busy_16_1.png
Idle (16px Badges PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_idle_16_1.png
Offline (16px Badges PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/face_offline_16_1.png
Online (Aqua Small PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/aqua_online_sm_1.png
Busy (Aqua Small PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/aqua_busy_sm_1.png
Idle (Aqua Small PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/aqua_idle_sm_1.png
Offline (Aqua Small PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/aqua_offline_sm_1.png
Online (Aqua Large PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/aqua_online_lg_1.png
Busy (Aqua Large PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/aqua_busy_lg_1.png
Idle (Aqua Large PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/aqua_idle_lg_1.png
Offline (Aqua Large PNG)
http://us.i1.yimg.com/us.yimg.com/i/us/msg/opi/aqua_offline_lg_1.png

Contact (Textual) Status Message

Each contact must display a textual contact status as well as a graphical online status. If the text for an individual contact exceeds the screen size, then the application must “banner scroll” through the information once the highlight focus is on the contact.

Custom Status

Yahoo Messenger clients must support Custom Status messages by having a special area where a user can input their custom status.

New Message Notifications

New Message Icon on the Conversation List View

Due to UI constraints on mobile devices, mobile applications use new message icons and open message icons to indicate an ongoing conversations. New messages received by the client may be displayed on the Contact List by one of the New Message Icons, as shown here.

The new message icon on the Conversation List view must appear only when one or more new messages received by the client have not been “opened” by the user. After the message has been opened, use one of the Open Message Icons, shown here.

Opening a Message

To open a message, the user must open the Conversation Window view on that particular user by performing one of the following:

  1. Selecting the Yahoo ID from the Contact List and opening the Conversation Window
  2. Opening the Conversation List View and entering the Conversation Window view on the specific conversation.
Message Icon Inside the Contact List View

The new or open message icon must appear on the Conversation List next to the contact for which the user has a new or existing conversation open. A message is considered “new” until the user opens up the Active Conversation Window for the specific contact from whom the new message was received.

Add a Contact

The user must be able to add a contact to their Contact List from the menu option. The recommended high level user flow is as follows:

Add a Contact >> Select a Group >> Group Name >> Add the Contact >> Send Message

Delete a Contact

This feature allows the user to delete a contact from the Contact List. The user must be able to highlight the user and select the contextual menu option to “Delete a Contact”.

Conversations and Active Conversations

Active Conversation Window

The user must be able to conduct conversations inside the Conversation Window with another contact.

Active Conversation Window Features

The Active Conversation Window must present the user with the following features:

  • Active Conversation Thread. The Active Conversation screen view should have a clear visual layout of the conversation history between the user and any other contact. New messages must come in at the bottom of the most recent message and must be above the user’s text entry box. If the line of text exceeds the display size, it wraps around to the proceeding line. If the length of the conversation exceeds the screen size, the older portion of the conversation thread must scroll off the screen. Users must be allowed to scroll up or down to view the entire conversation.
  • Incoming and Outgoing Message Visual Indicators. The client must be able to provide the user with a clear visual distinction between incoming and outgoing messages. In UIs with limited space, one method that can be used is graphical arrows: (>> incoming messages) (<< outgoing messages).
  • Contact ID Information. The Yahoo ID (or nickname) must be supported on the left header of this screen
  • Text Mode. The user must be able to cycle through the text in the text field using arrow keys or touch functionality.
  • Text Box. The text box must occupy the entire width of the Conversation Window view and must be expandable.
Emoticons

The client must support Yahoo approved emoticons and the ability to insert emoticons. In the Conversation Window, the user must be able to choose a menu option and select the “Insert Emoticon” feature. The following table shows a list of the approved Yahoo Messenger emoticons. Note that this list may change at anytime. You can download a compressed archive of the emoticon images here.

Name Characters Small Graphic Large Graphic
Happy :)
Sad :(
Winking ;)
Big Grin :D
Batting Eyelashes ;;)
Big Hug >:D<
Confused :-/
Love Struck :x
Blushing :">
Tongue :P
Kiss :-*
Broken Heart =((
Surprise :-O
Angry X(
Smug :>
Cool B-)
Worried :-S
Whew! #:-S
Devil >:)
Crying :((
Laughing :))
Straight Face :|
Raised Eyebrow /:)
Rolling on the Floor =))
Angel O:-)
Nerd :-B
Talk to the Hand =;
Sleepy [-(
Rolling Eyes 8-|
Loser L-)
Sick :-&
Don't Tell Anyone :-$
Not Talking [-(
Clown :O)
Silly 8-}
Party <:-P
Yawn (:|
Drooling =P~
Thinking :-?
D'oh #-o
Applause =D>
Nail Biting :-SS
Hypnotized @-)
Liar :^o
Waiting :-w
Sigh :-<
Phbbbbt >:P
Cowboy <):)
Pig :@)
Cow 3:-O
Monkey :(|)
Chicken ~:>
Rose @};-
Good Luck %%-
Flag **==
Pumpkin (~~)
Coffee ~O)
Idea *-:)
Skull 8-X
Bug =:)
Alien >-)
Frustrated :-L
Praying [-O<
Money Eyes $-)
Whistling :-"
Feeling Beat Up b-(
Peace Sign :)>-
Shame On You [-X
Dancing \:D/
Bring It On >:/
Hee Hee ;))
Hiro o->
Billy o=>
April o-+
Yin Yang (%)
Chatterbox :-@
Not Worthy ^:)^
Oh Go On :-j
Star (*)
On The Phone :)]
Call Me :-c
At Wit's End ~X(
Wave :-h
Time Out :-t
Daydreaming 8->
I Don't Know :-??
Not Listening %-(
Dog :o3
Don't Want To See X_X
Hurry Up :!!
Rock On \m/
Thumbs Down :-q
Thumbs Up :-bd
Wasn't Me ^#(^
Bee :bz
Send a Message

Users should have the ability to send messages to individuals in their contact list, as well as individuals not in their Contact List.

Add Contact Request

Yahoo’s privacy policy does not allow a user to add a contact to his or her Contact List without first securing the contact’s permission. As a result, the IM client must be able to respond to requests for presence subscription on a contact-by-contact basis with four potential outcomes:

“Allow”: User B allows User A to subscribe to presence subscription.

Result: User B is added to User A’s Contact List. Note that User A is not added to User B’s Contact List.

“Deny”: User B denies User A’s request for presence subscription.

Result: User A’s Contact List is not updated for User B’s presence information. User A is notified that User B has denied the request. User A is still able to send User B messages.

“Ignore/Block”: User B responds with Ignore to user A’s request for presence subscription.

Result: User A’s Contact List is not updated for User B’s presence information. User A is not notified that User B has denied the request. Future messages sent from User A to User B will not be delivered to User A from the Yahoo servers.

“Allow and Add to my Contact List”: User B accepts User A’s request for presence subscription and simultaneously adds User A and request User A’s permission to subscribe to his or her presence.

Deny & Block/Ignore Contact Request

If User B denies User A’s request for presence subscription, the following steps occur in order.

  1. User A requests presence subscription of User B and the Yahoo Messenger application adds User B to User A’s contact list.
  2. User B receives a presence subscription request with the following options: “Allow”, “Deny”, Ignore” and “Allow and add to my contact list”.
  3. User B denies User A’s request for presence subscription.
  4. The Yahoo server updates User A’s contact list.
  5. User A receives a notification from the server that User B has denied the request for presence subscription and the Yahoo Messenger application removes User B from User A’s contact list.

If User B ignores User A’s request for presence subscription, the following steps occur in order.

  1. User A requests presence subscription of User B and the Yahoo Messenger application adds User B to User A’s contact list.
  2. User B receives a presence subscription request with the following options: “Allow”, “Deny”, “Ignore” and Allow and add to my contact list.”
  3. User B ignores User A’s request for presence subscription.
  4. Yahoo server updates User B’s profile to no longer receive messages from User A and adds User A to User B’s ignore list.
  5. User A does not receive User B presence subscription and does not get a notification that User B has ignored the request for presence subscription.
  6. Future messages sent from User A to User B will not be delivered to User B (i.e., unless User B removes User A from the ignore list), nor will User B’s presence be exposed to User A.
Wake Up

The wake up feature must be implemented on any IM client. As long as the user remains logged into the Yahoo server, the client must be able to receive IM messages.

Whenever a new IM is received, the Messenger application should signal the receipt of a new message using a pop-up window that says “You have received a new IM from <YID>. Please select GO to view your message.” The user must then be able to select “GO” to retrieve the new message.

Suspend and Resume

For applications on mobile devices, if a suspend event (e.g., the device receives a phone call) is triggered, the client must return to the screen that was active before the suspend event.

If the client was in a transition screen (e.g. sending a message, signing in and out, updating an edit to a contact) at the time of the suspend event, then the client should behave as follows:

  • If signed into the server, the client should complete its activity and return to the Contact List screen.
  • If signed out of the server, the client should return to the log in screen.
Presence Updates

The application should have the following two methods for updating the presence information for contacts on the user’s Contact List:

  • Manual Presence Updates. The client should support the ability for the user to manually request an update to the presence information for the contacts on the Contact List. The “Refresh” option is typically offered to the user inside a contextual “Menu” option on the Contact List.
  • Server-Side Presence Updates. The client must also support server side updates of the presence information of the contacts on the user’s Contact List.
IM Forwarding

Applications must support the IM forwarding feature. When the user signs off from the PC Client or web version of Yahoo Messenger and has IM Forwarding activated, the user will automatically sign in to Yahoo SMS Messenger.

Offline Messages

The application must allow messages to be sent to contacts who are offline; these are known as offline messages. The user must be able to select a contact on the Contact List that appears offline (note that a contact that appears offline may be signed in as invisible), and must be able to send an offline message to that contact.

When the contact next signs in, they will receive the offline message. The message will be tagged as offline. Users who are signed in as invisible to all or selected users will receive the offline message as if they were signed into the Yahoo IM server (i.e., the message will be received in the same way as any other IM message).

General Requirements

Client Performance Requirements

The client must satisfy the performance requirements shown in the following table at all times.

Table 6.1. 

Activity Time Requirements
Launching the client < 10 seconds
Signing into the client < 25 seconds
Re-launching the client if still signed-in < 10 seconds
Sign off < 10 seconds

Maximum Values

The client must adhere to the maximum values shown in the following table at all times.

Property Value
Number of Contacts 1000
Number of Groups 20
Group Name Size 128 characters
Status Message Size 48 characters
Add Contact Message Size 128 characters
Decline Add Contact Message Size 64 characters

Table of Contents